body {
	font-family: "Poppins",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" /*{body-font-family}*/;
	font-size: 14px /*{body-font-size}*/;
	color: #212529 /*{body-font-colour}*/;
	background-image:none /*{body-background-image}*/;
	background-color: #fff /*{body-background-colour}*/;
}

a, .btn-link{
	color: #006FF5 /*{link-text-colour}*/;
}
a:hover, a:active, a:focus, .btn-link:hover{
	color: #004ca9 /*{link-text-hover-colour}*/;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: "Poppins",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" /*{headers-font-family}*/;
	color: #333 /*{headers-colour}*/;
}

.carousel-caption h3, .carousel-caption h2,.carousel-caption .h3,.carousel-caption p {
	color: #fff /*{carousel-text-colour}*/;
}

h1, .h1 {
	font-size: 26.249px /*{header-1-font-size}*/;
}
h2, .h2 {
	font-size: 21px /*{header-2-font-size}*/;
}
h3, .h3 {
	font-size: 18.375px /*{header-3-font-size}*/;
}
h4, .h4 {
	font-size: 15.75px /*{header-4-font-size}*/;
}
h5, .h5 {
	font-size: 13.124px /*{header-5-font-size}*/;
}
/* Secondary button */
.btn-outline-secondary, .btn-default {
	color: #333 /*{buttons | btn-default-text-colour}*/;
	background-color: #fff /*{buttons | btn-default-background-colour}*/;
	border-color: #ccc /*{buttons | btn-default-border-colour}*/;
}
.btn-outline-secondary:hover, .btn-default:hover{
	color: #333 /*{buttons | btn-default-text-colour-hover}*/;
	background-color: #ebebeb /*{buttons | btn-default-background-colour-hover}*/;
	border-color: #adadad /*{buttons | btn-default-border-colour-hover}*/;
}
.btn-outline-secondary.disabled, .btn-default:disabled {
	color: #333 /*{buttons | btn-default-text-colour-hover}*/;
	background-color: #ebebeb /*{buttons | btn-default-background-colour-hover}*/;
	border-color: #adadad /*{buttons | btn-default-border-colour-hover}*/;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle,
.btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active, .show > .btn-default.dropdown-toggle {
	color: #333 /*{buttons | btn-default-text-colour-hover}*/;
	background-color: #ebebeb /*{buttons | btn-default-background-colour-hover}*/;
	border-color: #adadad /*{buttons | btn-default-border-colour-hover}*/;
}
/* Primary button */
.btn-primary {
	color: #fff /*{buttons | btn-primary-text-colour}*/;
	background-color: #006FF5 /*{buttons | btn-primary-background-colour}*/;
	border-color: #006FF5 /*{buttons | btn-primary-border-colour}*/;
}
.btn-primary:hover {
	color: #fff /*{buttons | btn-primary-text-colour-hover}*/;
	background-color: #005ecf /*{buttons | btn-primary-background-colour-hover}*/;
	border-color: #0058c2 /*{buttons | btn-primary-border-colour-hover}*/;
}
.btn-primary.disabled, .btn-primary:disabled {
	color: #fff /*{buttons | btn-primary-text-colour-hover}*/;
	background-color:  #005ecf /*{buttons | btn-primary-background-colour-hover}*/;
	border-color: #0058c2  /*{buttons | btn-primary-border-colour-hover}*/;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
	color: #fff /*{buttons | btn-primary-text-colour-hover}*/;
	background-color: #005ecf /*{buttons | btn-primary-background-colour-hover}*/;
	border-color: #0058c2  /*{buttons | btn-primary-border-colour-hover}*/;
}
/* Warning button */
.btn-warning {
	color: #fff /*{buttons | btn-warning-text-colour}*/;
	background-color: #ffc107 /*{buttons | btn-warning-background-colour}*/;
	border-color: #ffc107 /*{buttons | btn-warning-border-colour}*/;
}
.btn-warning:hover {
	color: #fff /*{buttons | btn-warning-text-colour-hover}*/;
	background-color: #e0a800 /*{buttons | btn-warning-background-colour-hover}*/;
	border-color: #ffc107 /*{buttons | btn-warning-border-colour-hover}*/;
}
.btn-warning.disabled, .btn-warning:disabled {
	color: #fff /*{buttons | btn-warning-text-colour-hover}*/;
	background-color:  #e0a800 /*{buttons | btn-warning-background-colour-hover}*/;
	border-color: #ffc107 /*{buttons | btn-warning-border-colour-hover}*/;
}
.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle {
	color: #fff /*{buttons | btn-warning-text-colour-hover}*/;
	background-color: #e0a800 /*{buttons | btn-warning-background-colour-hover}*/;
	border-color: #ffc107 /*{buttons | btn-warning-border-colour-hover}*/;
}
/* Danger button */
.btn-danger {
	color: #fff /*{buttons | btn-danger-text-colour}*/;
	background-color: #dc3545 /*{buttons | btn-danger-background-colour}*/;
	border-color: #dc3545 /*{buttons | btn-danger-border-colour}*/;
}
.btn-danger:hover {
	color: #fff /*{buttons | btn-danger-text-colour-hover}*/;
	background-color: #c82333 /*{buttons | btn-danger-background-colour-hover}*/;
	border-color: #bd2130 /*{buttons | btn-danger-border-colour-hover}*/;
}
.btn-danger.disabled, .btn-danger:disabled {
	color: #fff /*{buttons | btn-danger-text-colour-hover}*/;
	background-color:  #c82333 /*{buttons | btn-danger-background-colour-hover}*/;
	border-color: #bd2130 /*{buttons | btn-danger-border-colour-hover}*/;
}
.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle {
	color: #fff /*{buttons | btn-danger-text-colour-hover}*/;
	background-color: #c82333 /*{buttons | btn-danger-background-colour-hover}*/;
	border-color: #bd2130 /*{buttons | btn-danger-border-colour-hover}*/;
}
/* Success button */
.btn-success {
	color: #fff /*{buttons | btn-success-text-colour}*/;
	background-color: #28a745 /*{buttons | btn-success-background-colour}*/;
	border-color: #28a745 /*{buttons | btn-success-border-colour}*/;
}
.btn-success:hover {
	color: #fff /*{buttons | btn-success-text-colour-hover}*/;
	background-color: #218838 /*{buttons | btn-success-background-colour-hover}*/;
	border-color: #1e7e34 /*{buttons | btn-success-border-colour-hover}*/;
}
.btn-success.disabled, .btn-success:disabled {
	color: #fff /*{buttons | btn-success-text-colour-hover}*/;
	background-color:  #218838 /*{buttons | btn-success-background-colour-hover}*/;
	border-color: #1e7e34 /*{buttons | btn-success-border-colour-hover}*/;
}
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle {
	color: #fff /*{buttons | btn-success-text-colour-hover}*/;
	background-color: #218838 /*{buttons | btn-success-background-colour-hover}*/;
	border-color: #1e7e34 /*{buttons | btn-success-border-colour-hover}*/;
}
/* Info button */
.btn-info {
	color: #fff /*{buttons | btn-info-text-colour}*/;
	background-color: #17a2b8 /*{buttons | btn-info-background-colour}*/;
	border-color: #17a2b8 /*{buttons | btn-info-border-colour}*/;
}
.btn-info:hover {
	color: #fff /*{buttons | btn-info-text-colour-hover}*/;
	background-color: #138496 /*{buttons | btn-info-background-colour-hover}*/;
	border-color: #117a8b /*{buttons | btn-info-border-colour-hover}*/;
}
.btn-info.disabled, .btn-info:disabled {
	color: #fff /*{buttons | btn-info-text-colour-hover}*/;
	background-color:  #138496 /*{buttons | btn-info-background-colour-hover}*/;
	border-color: #117a8b /*{buttons | btn-info-border-colour-hover}*/;
}
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle {
	color: #fff /*{buttons | btn-info-text-colour-hover}*/;
	background-color: #138496 /*{buttons | btn-info-background-colour-hover}*/;
	border-color: #117a8b /*{buttons | btn-info-border-colour-hover}*/;
}

.breadcrumb {
	background-color: #f8f9fa /*{breadcrumb-background-colour}*/;
}

.breadcrumb-item + .breadcrumb-item::before {
	color: #6c757d /*{breadcrumb-text-colour}*/;
}

.breadcrumb > .active,
.breadcrumb a {
	color: #696969 /*{breadcrumb-text-colour}*/;
}

.pagination .page-link{
	color: #006FF5 /*{pagination-text-colour}*/;
	background-color: #fff /*{pagination-bg-colour}*/;
	border-color: #dee2e6 /*{pagination-border-colour}*/;
}
.pagination .page-link:hover,
.pagination .page-link:focus{
	color: #004ca9 /*{pagination-text-colour-hover}*/;
	background-color: #e9ecef /*{pagination-bg-colour-hover}*/;
	border-color: #dee2e6 /*{pagination-border-colour-hover}*/;
}
.pagination .active .page-link,
.pagination .active .page-link:hover,
.pagination .active .page-link:focus {
	color: #fff /*{pagination-text-colour-active}*/;
	background-color: #006FF5 /*{pagination-bg-colour-active}*/;
	border-color: #006FF5 /*{pagination-border-colour-active}*/;
}

.badge-secondary {
	background-color: #ebebeb /*{label-default-bg}*/;
}
.badge-primary {
	background-color: #006FF5 /*{label-primary-bg}*/;
}
.badge-success {
	background-color: #28a745 /*{label-success-bg}*/;
}
.badge-info {
	background-color: #17a2b8 /*{label-info-bg}*/;
}
.badge-warning {
	background-color: #212529 /*{label-warning-text-colour}*/;
	background-color: #ffc107 /*{label-warning-bg}*/;
}
.badge-danger {
	background-color: #dc3545 /*{label-danger-bg}*/;
}

.card {
	border-color: #ddd /*{panel-border-colour}*/;
}
.card-header {
	background-color: #f5f5f5 /*{panel-header-bg-colour}*/;
	border-color: #ddd /*{panel-header-border-colour}*/;
}

.productsave {
	color: #D9534F /*{sale-colour}*/;
}

.wrapper-header .navbar-toggler {
	color: #696969 /*{navbar-default-link-colour}*/;
}

.wrapper-header .navbar {
	background-color: #f8f9fa /*{navbar-default-bg-colour}*/ !important;
}

.wrapper-header .navbar .navbar-nav .nav-link {
	color: #696969 /*{navbar-default-link-colour}*/;
}

.wrapper-header .navbar-nav .nav-link:hover,
.wrapper-header .navbar-nav .nav-link:focus {
	color: #333 /*{navbar-default-link-colour-hover}*/;
}
.wrapper-header .navbar-nav .show > .nav-link,
.wrapper-header .navbar-nav .active > .nav-link,
.wrapper-header .navbar-nav .nav-link.show, .wrapper-header .navbar-nav .nav-link.active{
	color: #555 /*{navbar-default-link-colour-active}*/;
}

.dropdown-menu {
	background-color: #fff /*{dropdown-menu-bg}*/;
	border-color: #ccc /*{dropdown-menu-border-colour}*/;
}

.dropdown-item{
	color: #212529 /*{dropdown-menu-link-colour}*/;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active{
	color: #262626 /*{dropdown-menu-link-colour-hover}*/;
	background-color: #f5f5f5 /*{dropdown-menu-link-bg-hover}*/;
}

/* =========================================================
   HEADSET HUB CATEGORY PRODUCT GRID — CLEAN FINAL VERSION
   Works with cms/thumbs/product/template.html supplied with this file.
   ========================================================= */

/* Equal grid columns. List view uses list.template.html and is unaffected. */
.products-row[aria-label="Products in category"] {
  align-items: stretch !important;
  align-content: flex-start !important;
}

.products-row[aria-label="Products in category"] > .hh-product-card {
  display: flex !important;
  margin-bottom: 0 !important;
}

.products-row[aria-label="Products in category"] .nProductThumb {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* One fixed square image area for every product, independent of source dimensions. */
.products-row[aria-label="Products in category"] .hh-product-media {
  position: relative !important;
  width: 100% !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.products-row[aria-label="Products in category"] .hh-product-image-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  background: #ffffff !important;
}

/* Preserve the source image ratio. White space automatically fills missing sides. */
.products-row[aria-label="Products in category"] .hh-product-image {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: transparent !important;
}

/* Savings are overlaid inside the square instead of reserving a blank row. */
.products-row[aria-label="Products in category"] .hh-product-badges {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 5 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 3px !important;
  width: auto !important;
  max-width: calc(100% - 16px) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.products-row[aria-label="Products in category"] .hh-product-badges .badge {
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Consistent card content alignment. */
.products-row[aria-label="Products in category"] .card-title {
  min-height: 2.8em !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

.products-row[aria-label="Products in category"] .card-title a {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

.products-row[aria-label="Products in category"] .price {
  margin: 0 0 7px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

.products-row[aria-label="Products in category"] .buying-options {
  width: 100% !important;
  margin-top: auto !important;
}

.products-row[aria-label="Products in category"] .buying-options .nBtn {
  max-width: 100% !important;
}

/* The cart icon inside the button must not inherit product-image dimensions. */
.products-row[aria-label="Products in category"] .buying-options .nBtn img {
  width: auto !important;
  height: auto !important;
  max-width: 18px !important;
  max-height: 18px !important;
  object-fit: contain !important;
}

@media (max-width: 575.98px) {
  .products-row[aria-label="Products in category"] .hh-product-image-link {
    padding: 8px !important;
  }

  .products-row[aria-label="Products in category"] .card-title,
  .products-row[aria-label="Products in category"] .price {
    font-size: 12px !important;
  }
}


/* =========================================================
   HEADSETHUB: FORCE 4 PRODUCTS PER ROW ON TABLET/DESKTOP
   ========================================================= */
@media (min-width: 768px) {
  .products-row[aria-label="Products in category"] > .hh-product-card,
  .products-row[aria-label="Products in category"] > .nProductThumb__col {
    -ms-flex: 0 0 25% !important;
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: 25% !important;
  }
}

@media (max-width: 767.98px) {
  .products-row[aria-label="Products in category"] > .hh-product-card,
  .products-row[aria-label="Products in category"] > .nProductThumb__col {
    -ms-flex: 0 0 50% !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
  }
}

/* List view must remain one product per row. */
.thumb_list .products-row[aria-label="Products in category"] > .hh-product-card,
.thumb_list .products-row[aria-label="Products in category"] > .nProductThumb__col {
  -ms-flex: 0 0 100% !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}


/* =========================================================
   HEADSETHUB FINAL COMPACT GRID FIX
   Removes inherited card/min-height spacing and keeps 4 columns.
   ========================================================= */
.products-row[aria-label="Products in category"] {
  align-items: flex-start !important;
  row-gap: 18px !important;
}

.products-row[aria-label="Products in category"] > .hh-product-card {
  display: block !important;
  align-self: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.products-row[aria-label="Products in category"] .nProductThumb {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
}

.products-row[aria-label="Products in category"] .hh-product-media,
.products-row[aria-label="Products in category"] .nProductThumb__img {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

.products-row[aria-label="Products in category"] .hh-product-image-link {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 8px !important;
  background: #fff !important;
  overflow: hidden !important;
}

.products-row[aria-label="Products in category"] .hh-product-image {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

.products-row[aria-label="Products in category"] .card-title {
  min-height: 2.8em !important;
  margin: 0 0 5px !important;
}

.products-row[aria-label="Products in category"] .price {
  margin: 0 0 7px !important;
}

.products-row[aria-label="Products in category"] .buying-options {
  margin-top: 0 !important;
}


/* =========================================================
   HEADSET HUB PRODUCT PAGE — RECOMMENDATION CAROUSELS
   Applies only to product-page product carousels.
   Keeps category-page grid rules untouched.
   ========================================================= */

.product-extra-lists .hh-product-carousel-track,
#browsingHistory__product .hh-product-carousel-track {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: flex-start !important;
  gap: 18px !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Four visible cards on desktop. */
.product-extra-lists .hh-product-carousel-track > *,
#browsingHistory__product .hh-product-carousel-track > * {
  display: block !important;
  flex: 0 0 calc((100% - 54px) / 4) !important;
  width: calc((100% - 54px) / 4) !important;
  max-width: calc((100% - 54px) / 4) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: flex-start !important;
}

/* Neutralise Bootstrap column widths inside product-page carousels. */
.product-extra-lists .hh-product-carousel-track > [class*="col-"],
#browsingHistory__product .hh-product-carousel-track > [class*="col-"] {
  flex-basis: calc((100% - 54px) / 4) !important;
}

/* Cards must size to their own content rather than creating tall blank tracks. */
.product-extra-lists .hh-product-carousel-track .nProductThumb,
#browsingHistory__product .hh-product-carousel-track .nProductThumb {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 0 !important;
}

/* Equal square image area, without stretching or cropping the source image. */
.product-extra-lists .hh-product-carousel-track .hh-product-media,
#browsingHistory__product .hh-product-carousel-track .hh-product-media,
.product-extra-lists .hh-product-carousel-track .nProductThumb__img,
#browsingHistory__product .hh-product-carousel-track .nProductThumb__img {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

.product-extra-lists .hh-product-carousel-track .hh-product-image-link,
#browsingHistory__product .hh-product-carousel-track .hh-product-image-link,
.product-extra-lists .hh-product-carousel-track .thumbnail-image,
#browsingHistory__product .hh-product-carousel-track .thumbnail-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #fff !important;
}

.product-extra-lists .hh-product-carousel-track .hh-product-image,
#browsingHistory__product .hh-product-carousel-track .hh-product-image,
.product-extra-lists .hh-product-carousel-track .product-image,
#browsingHistory__product .hh-product-carousel-track .product-image {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* Keep badges over the image and prevent a separate empty badge row. */
.product-extra-lists .hh-product-carousel-track .hh-product-badges,
#browsingHistory__product .hh-product-carousel-track .hh-product-badges {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 5 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  width: auto !important;
  max-width: calc(100% - 16px) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Compact titles, prices and buttons. */
.product-extra-lists .hh-product-carousel-track .card-title,
#browsingHistory__product .hh-product-carousel-track .card-title {
  min-height: 2.8em !important;
  margin: 0 0 5px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.product-extra-lists .hh-product-carousel-track .price,
#browsingHistory__product .hh-product-carousel-track .price {
  margin: 0 0 7px !important;
}

.product-extra-lists .hh-product-carousel-track .buying-options,
#browsingHistory__product .hh-product-carousel-track .buying-options {
  width: 100% !important;
  margin: 0 !important;
}

/* Carousel navigation remains vertically centred around the product cards. */
.product-extra-lists .nProductsCarousel,
#browsingHistory__product .nProductsCarousel {
  position: relative !important;
  min-height: 0 !important;
}

.product-extra-lists .nProductsCarousel__nav,
#browsingHistory__product .nProductsCarousel__nav {
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}

@media (max-width: 991.98px) {
  .product-extra-lists .hh-product-carousel-track,
  #browsingHistory__product .hh-product-carousel-track {
    gap: 14px !important;
  }

  .product-extra-lists .hh-product-carousel-track > *,
  #browsingHistory__product .hh-product-carousel-track > *,
  .product-extra-lists .hh-product-carousel-track > [class*="col-"],
  #browsingHistory__product .hh-product-carousel-track > [class*="col-"] {
    flex: 0 0 calc((100% - 14px) / 2) !important;
    width: calc((100% - 14px) / 2) !important;
    max-width: calc((100% - 14px) / 2) !important;
  }
}

@media (max-width: 575.98px) {
  .product-extra-lists .hh-product-carousel-track,
  #browsingHistory__product .hh-product-carousel-track {
    gap: 10px !important;
  }

  .product-extra-lists .hh-product-carousel-track > *,
  #browsingHistory__product .hh-product-carousel-track > *,
  .product-extra-lists .hh-product-carousel-track > [class*="col-"],
  #browsingHistory__product .hh-product-carousel-track > [class*="col-"] {
    flex: 0 0 calc((100% - 10px) / 2) !important;
    width: calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
  }
}