/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* ***************************************************** */
/* ***************************************************** */
/* *************** Begin Global settings *************** */
/* ***************************************************** */
/* ***************************************************** */

/* ---------- Begin define global variables ---------- */

:root {
  --primary-font-family: "Kumbh Sans", sans-serif;
  /* body */
  --secondary-font-family: var(--primary-font-family);
  /* titles */
  --primary-bg-color: #13434d;
  --primary-bg-color-variant: #0e3840;
  --secondary-bg-color: #f26430;
  --secondary-bg-color-variant: #eeeeee;
  --main-bg-color: #f5f5f7;
  --main-text-color: #252525;
  --additional-text-color: #414042;
  --btn-bg-color: var(--secondary-bg-color);
  /* var(--primary-bg-color); */
  --btn-color: white;
  /* --btn-hover-bg-color: #044c7c; */
  --btn-hover-bg-color: rgba(0, 185, 75, 0.8);
  --btn-hover-color: white;
  --header-bg-color: #f5f5f5;
  --header-text-color: var(--main-text-color);
  --header-text-hover-color: var(--additional-text-color);
  --header-nav-bg-color: var(--secondary-bg-color);
  --header-nav-text-color: white;
  --header-nav-text-hover-color: var(--header-text-hover-color);
  --header-top-bg-color: white;
  --header-top-text-color: inherit;
  --header-top-text-hover-color: var(--header-text-hover-color);
  --header-bottom-bg-color: #414042;
  --header-bottom-text-color: white;
  --header-bottom-text-hover-color: inherit;
  --footer-bg-color: #3a3a3a; /* MZS 2026-06-12 - was #414042; reference footer bg */
  --footer-text-color: white;
  --footer-text-hover-color: var(--additional-text-color);
  --footer-bottom-bg-color: inherit;
  --footer-bottom-text-color: #e8e8e8;
  --footer-bottom-text-hover-color: inherit;
  --items-border-radius: 4px;
  /* for buttons, cards, ... */
  /* MZS 2026-05-13 - section 1 tidy: matching the mb-3 override below for a uniform H+V grid spacing. MZS 2026-05-18 r3: bumped 4→5px each side → 10px horizontal gap. */
  --product-miniature-padding-desktop: 5px;
  /* must be less or equal than row margin */
  /* --product-miniature-padding-tabletandmobile: 8px; */
  --product-miniature-padding-tabletandmobile: 4px;
  /* must be less or equal than row margin */

  --header-menu-text-hover-color: #c3c3c3;
  --btn-primary-bg-color: #989596;
  --customer-reassurance-title-color: #414042;
  --customer-reassurance-text-color: #989596;
  --home-banner-image-hover-color: #0072bc;
  --searchbar-border-color: rgba(65, 64, 66, 0.49);
  --footer-top-bg-color: #044c7c;
  --mobile-menu-li-border-color: #eaeaea;
  --submenu-bg-color: #f1f1f1;
  --submenu-arrow-color: #c4c4c4;
  --list-grid-view-icon-color: #afb7ba;
  --blockreassurance-description-color: #989596;
  --footer-icon-color: #0072bc;
  --reference-label-color: rgba(65, 64, 66, 0.5);
  --image-slider-border-color: rgba(65, 64, 66, 0.2);
  --order-summary-bg-color: rgba(0, 0, 0, 0.03);
}

/* ---------- End define glonal variables ---------- */

.products {
  margin-left: calc(var(--product-miniature-padding-desktop, 5px) * -1);
  margin-right: calc(var(--product-miniature-padding-desktop, 5px) * -1);
}

.products .product-miniature {
  padding-left: var(--product-miniature-padding-desktop, 5px);
  padding-right: var(--product-miniature-padding-desktop, 5px);
}

@media (max-width: 1199px) {

  .container,
  #wrapper {
    max-width: initial;
  }

  .row {
    margin-left: -8px;
    margin-right: -8px;
  }

  #wrapper.pt-2 .row {
    margin-left: 0px;
    margin-right: 0px;
  }

  .container,
  #wrapper,
  .row>div[class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }

  #wrapper.pt-2 .row #content-wrapper {
    padding-left: 0px;
    padding-right: 0px;
  }

  /* !!!!!!!!!!!!!!!!! */
  #index section#wrapper,
  #cart section#wrapper,
  body#order-confirmation section#wrapper {
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
  }

  .products {
    margin-left: calc(var(--product-miniature-padding-tabletandmobile, 8px) * -1);
    margin-right: calc(var(--product-miniature-padding-tabletandmobile, 8px) * -1);
  }

  .products .product-miniature {
    padding-left: var(--product-miniature-padding-tabletandmobile, 8px);
    padding-right: var(--product-miniature-padding-tabletandmobile, 8px);
  }
}

@media (min-width: 1200px) {
  /* !!!!!!!!!!!!!  */

  .container,
  #wrapper {
    width: 95%;
    max-width: 1417px;
    /*MZS*/
  }

  body#cart #wrapper,
  body#order-confirmation #wrapper {
    width: 100%;
    padding: 0;
    max-width: 1990px;
    overflow-x: hidden;
  }

  html {
    overflow-x: hidden;
  }
}

html {
  font-size: 16px;
  /* -----> 1rem = 16px */
}

body {
  background: var(--main-bg-color, #ffffff);
  color: var(--main-text-color, #252525);
  font-family: var(--primary-font-family);
}

body#manufacturer #content-wrapper #main,
body#supplier #content-wrapper #main {
  /* padding: 10px 10px !important; */
  padding: 10px 10px;
}

body#sitemap .page-content,
body#order-detail .page-content,
body#order-slip .page-content,
body#module-gdprpro-erasemydata .page-content,
body#module-gdprpro-requestmydata .page-content {
  background: white;
}

body#index {
  background-color: #e0e0e0c7;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.sectiontitle,
.products-section-title {
  font-family: var(--secondary-font-family);
}

.page-wrapper {
  border: none;
  background: inherit;
}

.page-header,
.page-footer {
  padding: 8px 0;
  background: transparent;
  margin-bottom: 15px;
}

.page-header h1 {
  font-weight: 600;
}

.page-content {
  padding: 10px;
}

.page-content>.row {
  margin-left: -10px;
  margin-right: -10px;
}

.page-content>.row>div[class^="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

@media (max-width: 767px) {
  .page-content {
    padding: 5px;
  }

  .page-content>.row {
    margin-left: -5px;
    margin-right: -5px;
  }

  .page-content>.row>div[class^="col-"] {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.page-footer {
  margin: 15px 0 0;
}

.page-footer>a {
  display: inline-flex;
  align-items: flex-end;

  vertical-align: middle;
  line-height: initial;
  font-size: 14px;
}

.page-footer>a+a {
  margin-left: 10px;
  border-left: 1px solid var(--main-text-color);
  padding-left: 12px;
}

.page-footer>a i {
  font-size: 18px;
  margin-right: 5px;
}

.card {
  border-radius: var(--items-border-radius);
}

.card-title {
  font-weight: 600;
}

p {
  /* line-height: initial; */
  margin-bottom: 0.625rem;
}

.alert {
  border-radius: var(--items-border-radius);
}

.discount {
  background-color: #eb1d26;
}

img {
  max-width: 100%;

  height: auto;

  display: block;
  margin-left: auto;
  margin-right: auto;
}

.label,
label {
  margin-bottom: 3px;
}

.dropdown-menu {
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
  background: #f9f9f9;
  border: 1px solid var(--secondary-bg-color);
  margin: 0;
}

.dropdown-menu li a {
  font-size: 14px;
  padding: 4px 10px;
}

.dropdown-menu li:hover a {
  background: var(--secondary-bg-color-variant);
  color: white;
}

.btn-unstyle:focus .expand-more {
  color: var(--additional-text-color);
}

.btn {
  padding: 5px 25px;
  border-radius: var(--items-border-radius);
}

.btn-link {
  color: var(--additional-text-color);
}

.btn-primary,
.btn-secondary,
.btn-tertiary {
  box-shadow: none;
}

.btn-primary {
  background-color: var(--btn-bg-color);
  border-color: var(--btn-bg-color);
  color: var(--btn-color);

  border-radius: var(--items-border-radius);
  position: relative;
  overflow: hidden;
}

/* ********* button primary animation ********* */

/* .btn-primary:after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
	background: rgba(255, 255, 255, 0.13);
    background: linear-gradient( to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100% );
}
.btn-primary:hover:after {
	width: 120%;
	background-color: rgba(255,255,255,0);
  
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	
	opacity: 0.5;
} */

.btn-primary.focus,
.btn-primary:focus,
.btn-primary:hover,
.btn.btn-primary.focus,
.btn.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary.active.focus,
.btn.btn-primary.active:focus,
.btn.btn-primary.active:hover,
.btn.btn-primary:active.focus,
.btn.btn-primary:active:focus,
.btn.btn-primary:active:hover,
.open>.btn.btn-primary.dropdown-toggle.focus,
.open>.btn.btn-primary.dropdown-toggle:focus,
.open>.btn.btn-primary.dropdown-toggle:hover {
  background-color: var(--btn-hover-bg-color);
  border-color: var(--btn-hover-bg-color);
  color: var(--btn-hover-color);
  box-shadow: none;
}

.btn-outline-primary {
  color: var(--btn-bg-color);
  border-color: var(--btn-bg-color);
}

.btn-outline-primary:hover {
  background-color: var(--btn-hover-bg-color);
  border-color: var(--btn-hover-bg-color);
  color: var(--btn-hover-color);
}

.btn-outline-primary.focus,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(31, 175, 218, 0.5);
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
  background-color: var(--btn-bg-color);
  border-color: var(--btn-bg-color);
}

.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus,
.btn-light {
  box-shadow: none;
}

.input-group-btn .btn {
  height: 100%;
}

.btn-zoom .material-icons {
  font-size: 18px !important;
}

body#product .images-container .btn-zoom .material-icons {
  color: #888 !important;
}

a,
a.u-link-body {
  color: var(--primary-bg-color);

  line-height: 1;
}

a.btn-primary {
  color: var(--btn-color);
}

a:hover,
a.u-link-body:hover,
a:focus,
a.u-link-body:focus {
  color: var(--additional-text-color);
}

a.btn-primary:hover,
a.btn-primary:focus {
  color: var(--btn-hover-color);
}

a,
.btn,
.btn-primary {
  transition: all 0.25s ease;
}

select.form-control {
  cursor: pointer;
  border-radius: 5px;
  border: none;

  /* -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
	
	background-image: url('../img/select-bg.svg');
	background-repeat: no-repeat;
	background-position: right;
    padding-right: 50px; */
}

.form-control:focus,
.input-group.focus {
  outline-color: var(--primary-bg-color);
  outline: none;
}

.form-control:focus {
  border-color: #acacac;
}

/* .custom-radio input[type=radio]:checked + span {
    background-color: var(--primary-bg-color);
} */
.custom-checkbox input[type="checkbox"]+span+p {
  display: inline;
}

.custom-control-input:checked~.custom-control-label:before {
  border-color: var(--primary-bg-color);
  background-color: var(--additional-text-color);
}

.accordion .selected .card {
  border-color: var(--additional-text-color);
}

.bootstrap-touchspin {
  border: 1px solid #c9cccf;
}

.bootstrap-touchspin .input-group-btn {
  flex-shrink: 0;
  min-width: 35px;
}

.bootstrap-touchspin .input-group-btn .btn {
  color: var(--main-text-color, #000000);
  width: 100%;
  padding: 5px;
}

.bootstrap-touchspin .input-group-btn .btn:hover {
  background-color: #f0f0f0;
}

.bootstrap-touchspin .input-group-btn:first-child {
  margin-right: 0;
}

.bootstrap-touchspin>input {
  border-left: 1px solid #ced4da;
  border-right: 1px solid #ced4da;

  font-weight: 500;
  font-size: 14px;
  min-height: 38px;
}

.bootstrap-touchspin .input-group-btn:last-child {
  margin-left: 0;
}

.modal-content {
  border: none;
}

@media (min-width: 768px) and (max-width: 991px) {
  .modal-dialog {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

.gdprModal {
  z-index: 9999999999;
}

/* ---------- slick stuff ---------- */

.slick-track {
  min-width: 100%;
}

.products-slick .slick-track {
  display: flex;
  line-height: initial;
}

.products-slick .slick-track .product-miniature {
  flex: initial;
  height: inherit;

  /* margin-bottom: 0 !important; */
}

.slick-slider .btn.slick-arrow {
  box-shadow: none !important;
}

.slick-slider .btn.slick-arrow i {
  font-size: 2rem;
  box-shadow: 0px 0px 5px #aaaaaa;
}

.slick-slider.slick-dotted .slick-dots {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-bottom: 0;
}

.slick-slider.slick-dotted .slick-dots li {
  position: relative;
  display: inline-block;
  /* width: 20px;
    height: 20px; */
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-slider.slick-dotted .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 7px;
  height: 7px;
  padding: 2px;
  cursor: pointer;
  border: 1px solid #ffffff;
  outline: none;
  background: #fff;
  border-radius: 50px;
}

.slick-slider.slick-dotted .slick-dots li.slick-active button {
  border: 1px solid #f26430;
  outline: none;
  background: #f26430;
  width: 20px;
  font-size: 0;
  line-height: 0;
  display: block;

  height: 7px;
  padding: 2px;
  cursor: pointer;

  outline: none;

  border-radius: 50px;
}

.slick-slider.slick-dotted .slick-dots li button:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;

  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;

  opacity: 1;
  background: transparent;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-slider.slick-dotted .slick-dots li.slick-active button:before {
  opacity: 0.9;
  background: #f26430;
}

.slick-slider.slick-dotted .slick-dots li button:hover:before,
.slick-slider.slick-dotted .slick-dots li button:focus:before {
  opacity: 1;
  background: transparent;
}

.svg_icon {
  display: inline-block;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;

  flex-shrink: 0;
}

/* ---------- custom classes ---------- */

.hidden-item {
  display: none;
}

.line-heigth-0 {
  line-height: 0;
}

.line-heigth-1 {
  line-height: 1;
}

.inset-0 {
  inset: 0;
}

.mt-1-5,
.my-1-5 {
  margin-top: 0.375rem !important;
}

.mb-1-5,
.my-1-5 {
  margin-bottom: 0.375rem !important;
}

.mr-1-5,
.mx-1-5 {
  margin-right: 0.375rem !important;
}

.ml-1-5,
.mx-1-5 {
  margin-left: 0.375rem !important;
}

@media (min-width: 768px) {
  .position-md-initial {
    position: initial !important;
  }
}

@media (max-width: 767px) {

  .mr-md-down-1-5,
  .mx-md-down-1-5 {
    margin-right: 0.375rem !important;
  }

  .ml-md-down-1-5,
  .my-md-down-1-5 {
    margin-left: 0.375rem !important;
  }
}

/* ***************************************************** */
/* ***************************************************** */
/* **************** End Global settings **************** */
/* ***************************************************** */
/* ***************************************************** */

/* ***************************************************** */
/* **************** Begin Header settings ************** */
/* ***************************************************** */
#mobile-logo-center {
  display: none;
}

#header-visible-desktop {
  display: block;
}

#header-visible-mobile {
  display: none;
}

@media screen and (max-width: 1024px) {
  #mobile-logo-center {
    display: block;
  }

  #header-visible-desktop {
    display: none;
  }

  #header-visible-mobile {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
  }

  #header-visible-mobile #mobile-logo-center .logo {
    width: 60%;
  }

  #mobile__search_container {
    overflow: hidden;
    position: relative;
  }
}

#header {
  /* border-bottom: 1px solid #d3d3d3; */
  /* background: var(--header-bg-color); */
  background: #F86434;
  color: var(--header-text-color);
  line-height: 1;
  font-size: 15px;
  position: relative;
  /* MZS 2026-06-09 r30 - keep #header above any in-page dropdown (current max is ul#options + .pla_color_swatch at z-index 5). */
  z-index: 201;
}

/* @media(min-width:1200px){
	#header:not(body#module-thecheckout-order #header) {
		position: sticky;
		top: 0;
		z-index: 999;	
	}
} */

#header .btn,
#header .btn-primary,
#header .form-control {
  font-size: inherit;
  line-height: inherit;
}

#header a:not(.btn-primary),
#header .btn:not(.btn-primary) {
  color: inherit;
}

/* #header a:not(.btn-primary):hover, */
#header .btn:not(.btn-primary):hover {
  /* color: var(--header-menu-text-hover-color); */
  color: var(--header-bottom-bg-color);
}

#header .btn-primary .span_label {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  line-height: initial;
}

#header .header-nav {
  color: var(--header-nav-text-color);

  border-bottom-color: var(--header-nav-bg-color);
  border-bottom: none;

  font-size: 12px;
}

#header .header-nav .svg_icon {
  width: 24px;
  height: 24px;
}

#header .header-nav a:not(.dropdown-item) {
  color: var(--header-nav-text-color);
  background: transparent;
  font-weight: 500;
}

#header .header-nav a:not(.dropdown-item):hover {
  color: var(--header-nav-text-hover-color);
}

#header .header-nav__col .nav_hook>*:not(:empty) {
  padding: 2px 0;
}

#header .header-nav__col>*:not(:empty):not(:first-child):not(.nav_hook),
#header .header-nav__col>*:not(:empty)~.nav_hook>*:not(:empty),
#header .header-nav__col>*:not(:empty)~.div_header_nav_cutom>*:not(:empty):not(:first-child) {
  padding-left: 8px;
  padding-right: 8px;
}

#header .header-nav__col>*:not(:empty)~.div_header_nav_cutom>*:not(:empty):first-child {
  padding-right: 8px;
}

/* #header .header-nav__col > div:empty + div:not(:empty):not(.nav_hook) {
	padding-left: 0;
} */
/* #header .header-nav__col > div:not(:empty) ~ div:empty + div:not(:empty):not(.nav_hook) {
	padding-left: 10px;
} */

#header .div_header_middle {
  transition: color 0.2 ease-in;
  background: #f86434;
  color: white;
}

#header .header-top>*:not(.header__right),
#header .header-top .header__right>*:not(:empty) {
  padding: 12px 0;
}

@media (max-width: 991px) {

  #header .header-top>*:not(.header__right),
  #header .header-top .header__right>*:not(:empty) {
    padding: 15px 8px;
  }

  #footer .footer-center .container {
    padding-top: 20px;
  }
}

#header .header-top .header__right {
  align-items: center;
}

#header .header-top .header__right>*:not(:empty):last-child {
  padding-right: 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~ header middle styles ~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ----------------------------------------- */
/* ***** icon without background style ***** */
/* ----------------------------------------- */

#header .header-top .btn-primary:not(.search-widget__btn) {
  padding: 12px;
}

#header #_mobile__header .btn-primary {
  background: transparent;
  color: inherit;
}

/* #header .header-top .header__right .btn-primary:hover {
	color: var(--header-top-text-hover-color);
} */
#header .header-top .header__right .svg_icon {
  width: 22px;
  height: 22px;
}

@media (max-width: 767px) {
  #header .header-top .header__right .svg_icon {
    width: 18px;
    height: 18px;
  }
}

#header .shopping-cart .item-count .span_count {
  font-size: 10px;
  padding-top: 1px;
}

@media (min-width: 768px) {
  #header .btn-primary .item-count:not(.position-md-initial) {
    font-size: 10px;
    height: 15px;
    min-width: 15px;
    padding: 0 3px;
    top: 2px;
    right: 0;
    font-weight: 600;
    border-radius: 30px;
    /* background: var(--header-text-hover-color); */
    background: var(--btn-hover-bg-color);
    color: white;
    box-shadow: 0 0 0 1px #fff;
  }

  #header .shopping-cart .item-count .span_count {
    padding-top: 0;
    font-size: 10px;
  }
}

@media (max-width: 767px) {

  #header .shopping-cart .item-count,
  #header div#quotesCart .quoteqty.item-count {
    font-size: 9px;
    line-height: 10px;
    height: 13px;
    min-width: 13px;
    padding: 0 3px;
    top: 2px !important;
    right: 1px;
    font-weight: 400;
    border-radius: 30px;
    /* background: var(--header-text-hover-color); */
    background: var(--btn-hover-bg-color);
    color: white;
    box-shadow: 0 0 0 1px #fff;
  }
}

/* -------------------------------------- */
/* ***** icon with background style ***** */
/* -------------------------------------- */
/* #header .header-top .header__right > *:not(:empty) {
	padding-left: 3px;
	padding-right: 3px;
}
#header .header-top .btn-primary:not(.search-widget__btn) {
	padding: 6px;
}
#header .header-top .header__right .svg_icon {
	width: 17px;
	height: 17px;
}
@media (min-width: 768px) {
	#header .header-top .btn-primary:not(.search-widget__btn):not(.title-visible) {
		width: 40px;
		height: 40px;
	}
}
@media (max-width: 767px) {
	#header .header-top .btn-primary:not(.search-widget__btn) {
	    width: 37px;
		height: 39px;
	}
}
#header .btn-primary .item-count .span_count {
	padding-top: 1px;
}
@media (min-width: 768px) {
	#header .btn-primary .item-count:not(.position-md-initial) {
		font-size: 13px;
	    height: 20px;
		min-width: 20px;
		padding: 0 3px;
		top: 0;
		right: 0;
		font-weight: 600;
	}
	#header .btn-primary .item-count:not(.position-md-initial) .span_count {
		padding-top: 0;
	}
}
@media (max-width: 767px) {
	#header .btn-primary .item-count {
		font-size: 10px;
	    height: 15px;
		min-width: 15px;
		padding: 0 3px;
		top: 0;
		right: 0;
	}
} */

/* ------------------------------------- */
/* ***** bordered icon items style ***** */
/* ------------------------------------- */

/* #header .header-top .header__right > *:not(:empty) {
	border-left: 1px solid var(--secondary-bg-color);
}
@media (min-width: 992px) {
	#header .header-top .header__right > * {
		min-width: 120px;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#header .header-top .header__right > * {
		min-width: 112px;
	}
}
@media (max-width: 767px) {
	#header .header-top .header__right > * {
		min-width: 60px;
	}
} */

.header__search {
  order: initial;
}

#_desktop_searchbarcontainer {
  padding: 0 15px;
}

.header__search .search-widget {
  padding: 5px 15px;
}

#_mobile_searchbarcontainer.header__search .search-widget {
  padding: 5px 5px 4px 5px;
  background: var(--secondary-bg-color);
}

.search-widget__group {
  display: flex;
  justify-content: center;
}

.search-widget input.form-control {
  border-top-left-radius: var(--items-border-radius);
  border-bottom-left-radius: var(--items-border-radius);

  height: auto;
  min-height: 40px;
  padding: 10px;
}

.search-widget button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-widget button span {
  padding-right: 8px;
  display: none;
}

@media (min-width: 1200px) {
  #header .search-widget {
    max-width: 700px;
  }
}

@media (max-width: 767px) {
  #header .div_search_mobile.visible-mobile-always {
    min-height: 58px;
    /* min-height of input.form-control + padding of search-widget */
    padding: 3px 0 10px;
  }
}

@media (max-width: 1199px) {

  #header .header-nav__col>*:not(:empty):not(.nav_hook),
  #header .header-nav__col .nav_hook>*:not(:empty) {
    padding: 12px 0;
  }

  /* #header .header-nav__right #_desktop_contactshop,
	#header .header-nav__right #_desktop_user_info {
		display: none !important;
	} */
}

@media (max-width: 1023px) {

  #header .header-nav__right #_desktop_contactshop,
  #header .header-nav__right #_desktop_user_info {
    display: none !important;
  }

  #header .header-nav .svg_icon.menu_close_icon {
    width: 24px;
    height: 24px;
  }

  #header .div_header_bottom .container {
    background: white;
    padding: 0px;
  }

  .ets_mm_megamenu .additional-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .ets_mm_megamenu .additional-info>div {
    width: 92%;
    display: flex;
    justify-content: center;
  }

  .ets_mm_megamenu .additional-info_contact {
    background-color: #f26430;
    padding: 10px 30px;
    color: white;
    border-radius: 10px;
  }

  .ets_mm_megamenu .additional-info_auth {
    background-color: #006fb9;
    padding: 10px 30px;
    color: white;
    border-radius: 10px;
  }

  .ets_mm_megamenu .additional-info_contact a,
  .ets_mm_megamenu .additional-info_auth span,
  .mm_menus_li.mm_sub_align_full.additional-info span.visible--desktop.span_label {
    font-weight: 400;
    font-size: 18px;
    color: white;
    display: block;
  }

  .mm_menus_li.mm_sub_align_full.additional-info svg.svg_icon.user_icon {
    display: none;
  }

  #header .ets_mm_megamenu .menu-mobile-navigation {
    left: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    bottom: 0px;
    background-color: #414048;
    border-top: 1px solid #414048;
    border-bottom: 1px solid #414048;
    border-right: 2px solid #414048;
    z-index: 100;
  }

  #header .ets_mm_megamenu .menu-mobile-navigation span:hover,
  #header .ets_mm_megamenu .menu-mobile-navigation span:active {
    color: white;
  }

  #header .ets_mm_megamenu .menu-mobile-navigation a {
    border-right: 1px solid #5c5c5c;
    border-bottom: none;
  }

  #header .ets_mm_megamenu .menu-mobile-navigation a.menu-mobile-navigation_case-study {
    border-right: 1px solid #414048;
    border-bottom: none;
  }

  #header .ets_mm_megamenu li.menu-mobile-navigation a {
    padding: 25px 5px !important;
  }

  #header .ets_mm_megamenu .mm_menus_ul {
    background: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* #header .ets_mm_megamenu .mmm_menu_container-block.visible-on-open-menu {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
    width: 100vw;
    height: 100vh; 
    position: relative;
  }
  #header .ets_mm_megamenu .ets_mm_block_content .category-level3{
    display: none;
  }
  #header .ets_mm_megamenu .ets_mm_block_content .category-level1{
    display: none;
  } 
  
  #header .ets_mm_megamenu .ets_mm_block_content{
    display: none;
  }
  .ets_mm_block.mm_block_type_html.mm_hide_title span.h4{
    width: 100%;
    display: block;
    position: relative;
    font-size: 18px!important;
    padding: 10px 0px;
    margin: 0px;
  }
  .mmm_menu_container-block  .ets_mm_block .h4.opened{
    color:#f26430;
  }
  .mmm_menu_container-block  .ets_mm_block .h4.opened::after{
    border-right: 1px solid #282832;
    border-top: 1px solid #282832;
    content: "";
    height: 7px;
    margin-top: -3px;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: rotate(313deg);
    -webkit-transform: rotate(313deg);
    transition: all 0.35s;
    -webkit-transition: all 0.35s;
    width: 7px;
  
  }
  .mmm_menu_container-block  .ets_mm_block .h4:not(.opened)::after{
    border-right: 1px solid #282832;
    border-top: 1px solid #282832;
    content: "";
    height: 7px;
    margin-top: -3px;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: rotate(136deg);
    -webkit-transform: rotate(136deg);
    transition: all 0.35s;
    -webkit-transition: all 0.35s;
    width: 7px;
  } */
}

@media (max-width: 767px) {
  #header .ets_mm_megamenu .mm_menus_ul>li>a .mm_menu_content_title {
    font-size: 18px !important;
    font-weight: 600 !important;
    width: 91%;
    border-bottom: 1px solid #ccc;
    padding: 12px 12px 12px 0px;
    color: black;
  }

  li.mm_tabs_li.mm_tabs_has_content .mm_tab_li_content:not(.opened) .mm_tab_name.mm_tab_toggle.mm_tab_has_child::after {
    border-bottom: 2px solid #ccc;
    content: ",";
    position: absolute;
    width: 91%;
    height: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: auto;
  }

  #header {
    font-size: 13px;
  }

  #header .header-nav {
    font-size: 12px;
  }

  #header .header-nav__col>*:not(:empty):not(.nav_hook),
  #header .header-nav__col .nav_hook>*:not(:empty) {
    padding: 5px 0;
  }
}

/* MZS 2026-05-18 section 3 item 3.1: breadcrumb restyle - 11.5px, flex layout, blue links, › separators (matches reference_category.html). */
.breadcrumb {
  font-size: 11.5px;
  padding: 0;
  background: inherit;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* MZS 2026-05-18 follow-up #3: normalize all breadcrumb items so the active <span>-only item aligns with the linked <a>-wrapped items. */
.breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
}
.breadcrumb .breadcrumb-item a {
  line-height: 1.4;
}

.breadcrumb .breadcrumb-item {
  padding-left: 0;
}
.breadcrumb .breadcrumb-item a {
  color: #1A6FAB;
}
.breadcrumb .breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb .breadcrumb-item.active {
  color: #888;
  font-weight: 500;
}

.breadcrumb .breadcrumb-item+.breadcrumb-item {
  padding-left: 0;
}

.breadcrumb .breadcrumb-item+.breadcrumb-item:before {
  content: "›";
  padding-right: 0;
  margin-right: 4px;
  color: #999;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

@media (max-width: 767px) {
  .breadcrumb {
    margin-bottom: 5px;
  }
}

body#product .breadcrumb {
  margin-top: 2px;
  margin-bottom: 2px;
  border-bottom: 1px solid transparent;
  padding-bottom: 5px;
}

/* ***************************************************** */
/* **************** End Header settings **************** */
/* ***************************************************** */

/* ***************************************************** */
/* **************** Start Additional Header Style **************** */
/* ***************************************************** */

.div_header_bottom {
  color: var(--header-bottom-text-color);
  background-color: var(--header-bottom-bg-color);
}

.container.header-top.d--flex-between.py-0 {
  justify-content: center;
}

div#_mobile_shoppingcart svg {
  margin-right: 0.375rem !important;
}

.visible-on-mobile.d-md-none {
  display: flex;
  gap: 7px;
}

#header .ets_mm_megamenu.sticky_enabled.scroll_heading {
  background: var(--header-bottom-bg-color);
}

#header .ets_mm_megamenu {
  font-family: "Kumbh Sans";
}

@media (min-width: 1024px) {
  #header .div_hook_dnav2 .blockcart-container {
    display: none !important;
  }
}

.ets_mm_megamenu.bg_submenu[data-bggray="bg_gray"]:before {
  visibility: hidden !important;
}

.mm_blocks_ul .ets_mm_block_content .category-level2 {
  text-decoration: none !important;
}

.mm_blocks_ul .ets_mm_block_content .category-level2 a {
  color: #f26430 !important;
}

.mm_blocks_ul .ets_mm_block_content .category-level2 a:hover {
  color: #f26430 !important;
  text-decoration: none !important;
}

.mm_blocks_ul .ets_mm_block_content .category-level2 a:active {
  color: #414141 !important;
}

.mm_blocks_ul .ets_mm_block_content .category-level1::after {
  border-bottom: 1px solid #414141 !important;
}

.mm_blocks_ul .ets_mm_block_content .category-level1:hover::after {
  border-bottom: 1px solid #414141 !important;
}

.mm_blocks_ul .ets_mm_block_content .category-level1 span::after {
  color: #414141;
}

.mm_blocks_ul .ets_mm_block_content .category-level1:hover span::after {
  color: #414141;
}

/* .mm_blocks_ul .ets_mm_block_content .category-level1 a {
  color: #f26430 !important;
} */

.mm_blocks_ul .ets_mm_block_content .category-level1:hover a {
  color: #414141 !important;
}

ul.mm_menus_ul ul.ets_mm_categories li a {
  font-size: 16px;
  background: transparent !important;
  color: #f26430 !important;
  text-transform: uppercase;
}

span.mm_menu_content_title img {
  margin: 0;
}

li.close_menu .btn-close {
  color: white;
}

@media (max-width: 1023px) and (min-width: 768px) {
  .changestatus .mm_menus_ul .mm_menus_li:before {
    display: block !important;
  }

  li.mm_tabs_li.mm_tabs_has_content .mm_tab_li_content:not(.opened) .mm_tab_name.mm_tab_toggle.mm_tab_has_child::after {
    border-bottom: 2px solid #ccc;
    content: ",";
    position: absolute;
    width: 95%;
    height: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: auto;
  }

  /* .changestatus .mm_menus_ul .arrow::before{
		top:1%;
	}
	.changestatus .mm_menus_ul .arrow::after{
		top:1%;
	} */
}

@media (max-width: 767px) {
  .mm_menus_ul .mm_menus_li:before {
    display: block !important;
  }

  /* .mm_menus_ul .arrow::before{
		top:30%
	}
	.mm_menus_ul .arrow::after{
		top:30%
	} */
}

@media (max-width: 1023px) {
  .layout_layout1 .ets_mm_block_content ul li a::before {
    content: none;
  }

  li.mm_menus_li.mm_sub_align_full span.mm_tab_toggle_title {
    color: var(--header-bottom-bg-color);
    font-size: 18px;
  }

  li.mm_menus_li.mm_sub_align_full span.mm_tab_toggle_title .span_tabtitle {
    font-size: 18px;
    font-weight: 600;
  }

  .menu-mobile .mm_tabs_li .mm_columns_contents_ul.active {
    background-color: white !important;
  }

  .menu-mobile .mm_tab_li_content.opened .mm_tab_toggle_title,
  .menu-mobile .mm_tab_li_content.opened .mm_tab_toggle_title .span_tabtitle {
    background-color: #fdeee8;
  }

  .menu-mobile .mm_tab_li_content .mm_tab_toggle_title .span_tabtitle {
    background-color: white;
  }

  .menu-mobile .back-to-main-menu {
    font-size: 18px;
  }

  #header .menu-mobile .ets_mm_block .ets_mm_categories .category-subtitle a:active,
  #header .menu-mobile .ets_mm_block .ets_mm_categories .category-subtitle a:hover {
    color: #f26430 !important;
  }

  .menu-mobile-navigation span {
    display: block;
    width: 100%;
    text-align: center;
  }

  .menu-mobile .ets_mm_block .ets_mm_categories {
    margin-left: 30px;
  }

  .ets_mm_megamenu.changestatus.ets_mm_megamenu .mm_menus_ul .close_menu {
    background-color: var(--header-nav-bg-color) !important;
  }

  #header .ets_mm_megamenu .mm_menus_ul>li.mm_menus_li_tab.mm_menus_li_tab.menu-mobile a.menu-item-before {
    padding: 0px !important;
    margin-left: 15px;
  }

  ul.mm_columns_ul.mm_columns_ul_tab.active li {
    padding-top: 0;
  }

  .pull-right {
    display: flex;
    gap: 10px;
  }

  .pull-left button.btn-close {
    background: transparent;
    border: none;
    padding: 0;
  }

  .pull-left button.btn-close span {
    font-size: 37px;
  }

  .mm_tab_li_content.closed {
    border: none !important;
  }

  span.mm_tab_toggle_title,
  span.span_tabtitle {
    background: white;
  }

  .mm_tab_toggle_title {
    padding: 10px 33px 10px 18px !important;
  }

  ul.mm_columns_contents_ul.active {
    background: var(--main-bg-color) !important;
  }

  ul.ets_mm_categories li {
    border: none !important;
    padding-bottom: 0 !important;
  }

  .ets_mm_megamenu_content div#_desktop_user_info {
    display: block !important;
  }

  .mm_menus_li.mm_sub_align_full.additional-info {
    display: flex !important;
    flex-direction: column;
  }

  .mm_menus_li.mm_sub_align_full.additional-info .menu-mobile-signin {
    display: flex;
    justify-content: center;
  }

  /* mobile menu whislist & shopping cart styles */
  .pull-right .btn-primary:not(.search-widget__btn).has-counter {
    padding-right: 12px !important;
    padding-top: 3px !important;
  }

  .pull-right .div_headerwishlistlinkcontainer svg,
  .pull-right .blockcart.blockcart-header.cart-preview.header__rightitem.d-flex.align-items-center.justify-content-center.inactive svg {
    width: 20px !important;
  }

  .pull-right .btn-primary .item-count {
    font-size: 9px !important;
    height: 13px !important;
    min-width: 13px !important;
  }

  /* mobile menu whislist & shopping cart styles end */

  #header .ets_mm_megamenu.changestatus.ets_mm_megamenu .mm_menus_ul .close_menu {
    padding: 4px 15px 4px;
  }

  /* #header .ets_mm_megamenu .mm_menus_ul > li:hover > a .mm_menu_content_title{
		color:white;
	} */

  .mm_menus_ul .mm_menus_li:before {
    margin-left: 10px;
    top: 13px;
    z-index: 101;
  }
}

@media (max-width: 767px) {

  #header .header-nav .header-nav__right #_mobile_header-icons a.btn-primary,
  #header .header-nav #quotesCart .quotes_cart a#quotes-cart-link {
    padding: 4px 10px 0 10px;
    height: auto;
  }
}

/* 2021 - 08 - 17 */

.ets_mm_megamenu_content span.span_tabtitle {
  background: var(--submenu-bg-color);
  color: var(--header-bottom-bg-color);
  font-weight: 600;
}

.mm_tab_li_content.closed {
  background: var(--submenu-bg-color);
}

ul.mm_columns_ul.mm_columns_ul_tab {
  font-size: 15px !important;
}

ul.mm_columns_contents_ul {
  background: white !important;
  border: none !important;
}

.ets_mm_block.mm_block_type_category.mm_hide_title .h4 {
  display: none;
}

.ets_mm_block.mm_block_type_category.mm_hide_title .ets_mm_categories ul:not(.category-level2) li a {
  color: var(--header-bottom-bg-color) !important;
}

.ets_mm_block.mm_block_type_category.mm_hide_title ul li a {
  text-transform: capitalize !important;
  text-shadow: none !important;
}

ul.mm_menus_ul li ul li .span_tabtitle {
  text-transform: capitalize;
}

@media (min-width: 1024px) {
  body .ets_mm_megamenu.bg_submenu[data-bggray="bg_gray"] .mm_menus_ul>li:not(.categorytab) {
    opacity: 1;
  }

  ul.mm_menus_ul li.mm_sub_align_full:hover>a {
    background: white !important;
  }

  .mm_tab_li_content.closed {
    border: none;
  }

  .menu-guttering a,
  .menu-downpipes a,
  .menu-aluminium-capping a,
  .menu-soil-drain a,
  .menu-drainage a,
  .menu-roof-deck a,
  .menu-aluminium-fab a {
    position: relative !important;
  }

  #header ul.mm_columns_contents_ul {
    border-left: 1px solid #bebebe !important;
    border-bottom: 1px solid #bebebe !important;
    border-right: 1px solid #bebebe !important;
  }

  .mm_tab_toggle_title {
    padding: 29px 33px 29px 23px !important;
    text-align: initial;
  }

  #header .div_header_nav_cutom {
    padding-left: 0 !important;
  }
}

/* ***************************************************** */
/* **************** Searchbar Style **************** */

div#_desktop_searchbarcontainer .ssa-searchblock.ssa-searchblock-displaySearch.clearfix {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  /* padding-top:11px; */
  padding: 12px;
}

input.ssa-search-query.ssa-search-query-input.form-control.ui-autocomplete-input {
  border-radius: 15px;
}

button.btn.btn-default.button-search.ssa-button-search {
  width: 50px;
  padding: 0 8px;
  background: transparent;
  color: white !important;
  font-weight: bold !important;
  font-size: 17px !important;
  z-index: 2;
}

.ssa-nav-right {
  display: block !important;
  position: absolute !important;
  left: 0;
  top: 0;
}

input.ssa-search-query.ssa-search-query-input.form-control.ui-autocomplete-input {
  padding-right: 15px;
  color: var(--searchbar-border-color);
  padding-left: 45px;
}

@media (max-width: 767px) {
  .ssa-searchblock.ssa-searchblock-displaySearch.clearfix {
    padding: 0 10px 0 0;
  }
}

.sticky-search {
  position: fixed;
  top: 82px !important;
  width: 100%;
  z-index: 999;
}

/* ***************************************************** */
/* **************** Searchbar Style End **************** */

/* ************************* Start Header Quotes module Styles *********************** */
#header div#quotesCart div#box-body {
  position: absolute;
  width: 250px;
  right: -26px;
  background-color: white;
  z-index: 10000;
  display: none;
}

#header div#quotesCart span.span_cart_title {
  font-size: 15px !important;
  text-transform: none;
  font-weight: 100;
  padding-left: 8px !important;
  padding-top: 3px;
}

#header div#quotesCart a#quotes-cart-link {
  /* display: flex;
  justify-content: center;
  position: relative; */
  /* padding-right: 8px; */
}

@media (min-width: 1024px) {
  .cart-products-count,
  #header div#quotesCart .quoteqty.item-count {
    height: 15px;
    min-width: 15px;
    top: 0;
    right: -6px;
    border-radius: 30px;
    background: var(--btn-hover-bg-color);
    color: white;
    box-shadow: 0 0 0 1px #fff;
  }
}

@media (max-width: 1023px) {
  .cart-products-count,
  #header div#quotesCart .quoteqty.item-count {
    top: -2px;
    right: 1px;
    border-radius: 30px;
    background: var(--btn-hover-bg-color);
    color: white;
    box-shadow: 0 0 0 1px #fff;
  }
}

#header div#quotesCart span.ajax_quote_quantity {
  font-size: 10px !important;
  padding-top: 1px;
}

#header div#quotesCart svg.svg_icon.quotes_icon {
  color: white;
}

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

  #header .header__right #_desktop_header-icons .div_headerwishlistlinkcontainer+a,
  #header .header__right #_desktop_header-icons #quotes-cart-link .span_cart_title,
  #header .header__right #_desktop_header-icons .shopping-cart+a,
  span.visible--desktop.quotes__label.span_label {
    display: none;
  }

  #header .quotes_cart .header {
    width: auto;
  }
}


@media (min-width: 1024px) {
	#header #_desktop_header-icons a {
		text-align: center;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
  #header div#quotesCart .quoteqty.item-count {
    top: -1px;
    font-size: 9px;
    height: 16px;
    min-width: 16px;
    padding: 0 3px;
  }

  .menu-opened .ets_mm_megamenu_content .container {
    height: calc(100vh - 60px);
  }

  .menu-opened .ets_mm_megamenu_content_content {
    height: 100%;
    max-height: 100%;
  }

  .menu-opened .ets_mm_megamenu_content .container>.ets_mm_megamenu_content_content .additional-info {
    margin-top: auto;
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  #header div#quotesCart .quoteqty.item-count {
    left: 22px;
  }

}

@media (max-width: 767px) {
  .header-nav.u-bor-bot div#quotesCart svg.svg_icon.quotes_icon {
    color: white !important;
  }

  #header .header-nav #quotesCart .quotes_cart {
    background: transparent !important;
  }

  .header-nav.u-bor-bot .quotes_cart .header {
    width: auto !important;
  }

  .header-nav.u-bor-bot .clone-slidebar-toggle.quotes_cart {
    margin-right: 0 !important;
  }

  .header-nav.u-bor-bot div#quotesCart .quoteqty.item-count.align-items-center.justify-content-center.position-absolute.px-1.d-flex {
    top: 2px !important;
  }

  .header-nav.u-bor-bot .afqQuotesCartOver {
    order: -1;
  }
}

/* ************************* End Header Quotes module Styles *********************** */

body.menu-opened {
  overflow: hidden;
}

body:not(.menu-opened) #header .menu_close_icon,
body.menu-opened #header .menu_icon {
  display: none !important;
}

.menu-mobile-signin a.account.u-link-body.btn-primary,
.a_singnin.u-link-body.btn-primary {
  background: transparent;
}

#header .header-nav div#div_header_tel svg {
  height: 20px !important;
}

#header .div_header_middle .div_headerwishlist:hover a,
#header .div_header_middle .afqQuotesCartOver:hover a,
#header .div_header_middle .afqQuotesCartOver:hover div#quotesCart svg.svg_icon.quotes_icon,
#header .div_header_middle .blockcart.blockcart-header.cart-preview:hover svg.svg_icon.cart_icon,
#header .div_header_middle .blockcart.blockcart-header.cart-preview:hover span.visible--desktop.blockcart__label {
  color: var(--header-bottom-bg-color) !important;
  transition: all 0.25s ease;
}

#header .btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: none;
}

@media (min-width: 1432px) {
  #header .header__logo.header-top__col {
    padding: 0 0;
  }

  #header .header__logo.header-top__col img {
    width: 300px;
  }
}

/* 2021.12.13 changes */

#header div#menu-icon {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#header div#menu-icon .menu-label {
  order: 1;
  font-size: 10px;
}

#header .quotes_cart .quotes-text-mobile,
.wishlist-text-mobile,
.cart-text-mobile {
  display: none;
}


@media screen and (max-width: 768px) {
	#header .quotes_cart .quotes-text-mobile {
		display: inline-block;
	}
}

@media screen and (max-width: 1023px) {
  #header div#quotesCart svg.svg_icon.quotes_icon {
    color: white;
  }

  #header .quotes_cart .header {
    text-transform: capitalize;
    letter-spacing: initial;
    font-size: 10px;
    font: 10px;
  }
}

span.call-us-text-mobile {
  display: none;
}

@media (max-width: 767px) {
  #header div#menu-icon {
    flex-direction: column;
  }

  .quotes-text-mobile,
  .wishlist-text-mobile,
  .cart-text-mobile,
  span.call-us-text-mobile {
    display: block !important;
  }

  #header div#quotesCart .mobile_quotes .quoteqty.item-count {
    right: initial;
  }

  #header #quotesCart .header,
  #header .div_headerwishlistlinkcontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .shopping-cart.header,
  .blockcart.blockcart-header.cart-preview.header__rightitem {
    flex-direction: column !important;
  }

  #header #quotesCart span.quotes-text-mobile {
    font-family: "Kumbh Sans";
  }

  #header span.wishlist-text-mobile {
    line-height: initial;
    padding-top: 2px;
  }

  span.visible--desktop.blockcart__label.span_mycart.span_cart_label.span_label {
    display: block;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 10px;
    padding-top: 2px;
    margin-top: -4px;
  }

  .shopping-cart.header.d-flex.align-items-center.justify-content-center.has-counter.flex-row.position-relative.btn-primary {
    padding: 4px 10px 0px 10px;
  }

  #header #quotesCart a#quotes-cart-link {
    padding: 4px 10px 0px 10px;
  }

  div#_mobile_header-icons {
    gap: 10px;
  }

  #header div#_mobile_contactshop span.span_tel {
    display: none;
  }

  #header .header-nav div#_mobile_contactshop div#div_header_tel svg {
    height: 28px !important;
  }

  span.call-us-text-mobile {
    line-height: initial;
    padding-top: 2px;
    white-space: nowrap;
  }

  #header .header-nav__right.header-nav__col div#_mobile_header-icons {
    padding-left: 10px;
  }

  svg.svg_icon.phone_icon.flex-shrink-0.mr-md-down-1-5.mr-2 {
    margin: 0 !important;
  }

  #header #quotesCart .header:hover svg.svg_icon.quotes_icon,
  #header #quotesCart .header:hover span.quotes-text-mobile {
    color: #414042 !important;
    line-height: normal;
  }

  #header .div_headerwishlistlinkcontainer:hover svg.svg_icon.wishlist_icon,
  #header .div_headerwishlistlinkcontainer:hover span.wishlist-text-mobile {
    color: #414042;
  }

  .blockcart.blockcart-header.cart-preview.header__rightitem:hover span.visible--desktop.blockcart__label.span_mycart.span_cart_label.span_label,
  .blockcart.blockcart-header.cart-preview.header__rightitem:hover svg.svg_icon.cart_icon {
    color: #414042;
  }

  #header .quotes_cart .header {
    padding: 0 !important;
  }
}

/* ***************************************************** */
/* **************** End Additional Header Style **************** */
/* ***************************************************** */

/* ***************************************************** */
/* **************** Start Home Banner Style **************** */
/* ***************************************************** */

.home-banner-grid-row {
  display: flex;
  flex-wrap: wrap;
  padding-top: 15px;
  max-width: 1990px;
  margin: auto;
}

.first_column .banner-image,
.second_col_1 .banner-image,
.second_col_2 .banner-image,
.third_col_1 .banner-image,
.third_col_2_first .banner-image,
.third_col_2_second .banner-image,
.home-banner-grid-row {
  padding-right: 7.5px;
  padding-left: 7.5px;
}

.second_col_1 .banner-image,
.third_col_1 .banner-image {
  padding-bottom: 7.5px;
}

.second_col_2 .banner-image,
.third_col_2_first .banner-image,
.third_col_2_second .banner-image {
  padding-top: 7.5px;
}

.header-nav__right.header-nav__col a.d-flex.align-items-center.justify-content-center.has-counter.flex-row.position-relative.btn-primary {
  padding: 12px;
}

#index .third_col_2 {
  display: flex;
  width: 100%;
}

.first_column,
.second_column,
.third_column {
  flex: 1 1 0;
}

.home-banner-grid-row a.hovereffect {
  display: block;
  position: relative;
}

.jxml-banner-description {
  color: var(--header-bg-color);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  z-index: 1;
}

.home-banner-grid-row span.banner-title {
  display: block;
  text-transform: uppercase;
  font-size: 30px;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 992px) {
  .third_col_2_first .banner-title {
    margin-top: 22px;
  }

  .third_col_2_second .banner-title {
    margin-top: 23px;
  }
}

.home-banner-grid-row p.banner-description {
  padding-left: 20px;
  padding-right: 20px;
  line-height: initial;
  font-weight: bold;
}

.home-banner-grid-row .banner-image a.hovereffect:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom,
      rgba(0, 114, 188, 0),
      var(--home-banner-image-hover-color));
  opacity: 0;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  z-index: 1;
}

.home-banner-grid-row .banner-image a.hovereffect:hover:before {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 1;
}

.home-banner-grid-row .button_discover {
  padding-left: 14px;
  visibility: hidden;
}

.home-banner-grid-row .banner-image a:hover .button_discover {
  visibility: visible;
}

.home-banner-grid-row .button_discover button {
  padding: 10px 35px 10px 35px;
  border-radius: 50px;
  background: transparent;
  color: var(--header-bg-color);
  border: 2px solid white;
  font-weight: bold;
}

.home-banner-grid-row .button_discover button:focus {
  outline: 0;
}

@media (max-width: 1276px) {

  .first_column,
  .second_column {
    flex: 1 0 50%;
  }

  .third_column {
    display: flex;
  }

  .third_col_1,
  .third_col_2 {
    flex: 1 0 50%;
  }

  .third_col_1 .banner-image,
  .third_col_2_first .banner-image,
  .third_col_2_second .banner-image {
    padding-top: 15px;
  }
}

@media (max-width: 631px) {
  .third_column {
    display: block;
  }

  .home-banner-grid-row {
    padding-left: 7.5px;
    padding-top: 0;
    padding-right: 0;
  }

  .first_column {
    flex: 1 0 50%;
  }

  .second_column {
    flex: 1 0 50%;
  }

  .first_column .banner-image {
    padding-right: 7.5px;
    padding-top: 15px;
    padding-left: 0;
    padding-bottom: 15px;
  }

  .second_col_1 .banner-image {
    padding-top: 15px;
    padding-left: 7.5px;
    padding-bottom: 7.5px;
    padding-right: 7.5px;
  }

  .second_col_2 .banner-image {
    padding-left: 7.5px;
    padding-top: 7.5px;
    padding-right: 7.5px;
    padding-bottom: 15px;
  }

  .third_col_1 .banner-image {
    padding-top: 0;
    padding-bottom: 15px;
    padding-right: 7.5px;
    padding-left: 0;
  }

  .third_col_2_first .banner-image {
    padding-top: 0;
    padding-left: 0;
    padding-right: 7.5px;
    padding-bottom: 15px;
  }

  .third_col_2_second .banner-image {
    padding-top: 0;
    padding-right: 7.5px;
    padding-left: 7.5px;
    padding-bottom: 15px;
  }

  .home-banner-grid-row span.banner-title {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    font-size: 16px;
  }

  .home-banner-grid-row p.banner-description {
    padding-left: 10px;
    padding-right: 15px;
    font-size: 14px;
  }
}

@media (max-width: 520px) {
  .home-banner-grid-row {
    padding: 0;
  }

  .first_column,
  .second_column,
  .third_column {
    flex: 1 0 100%;
  }

  .home-banner-grid-row .banner-image {
    padding: 7px;
    padding-left: 0;
    padding-right: 0;
  }

  .first_column .banner-image {
    padding-top: 0px;
  }

  .first_column .banner-image,
  .second_column .banner-image,
  .third_column .banner-image {
    padding-bottom: 0px;
  }

  .third_col_2_first .banner-image {
    padding-right: 3.5px;
  }

  .third_col_2_second .banner-image {
    padding-left: 3.5px;
  }

  /* .third_col_2_first .jxml-banner-description, .third_col_2_second .jxml-banner-description{
		padding-top:15px;
	} */

  .home-banner-grid-row span.banner-title {
    font-size: 26px;
  }

  .third_col_2_first p.banner-description {
    padding-right: 6px;
  }
}

.home-banner-grid-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-banner-grid-row .second_column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home-banner-grid-row .third_column {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.home-banner-grid-row .third_col_1 .banner-image {
  padding-bottom: 0;
}

@media (min-width: 768px) and (max-width: 991px) {
  .home-banner-grid-row span.banner-title {
    font-size: 17px;
  }

  .home-banner-grid-row p.banner-description {
    font-size: 13px;
    line-height: initial;
  }

  .home-banner-grid-row .button_discover button {
    padding: 6px 28px;
  }
}

@media (max-width: 767px) {
  .home-banner-grid-row span.banner-title {
    font-size: 17px;
  }

  /* .home-banner-grid-row .first_column .banner-image {
		padding-left: 0;
	} */
  .home-banner-grid-row p.banner-description {
    font-size: 13px;
    line-height: initial;
  }

  .first_column .banner-image,
  .second_col_1 .banner-image,
  .second_col_2 .banner-image,
  .third_col_1 .banner-image,
  .third_col_2_first .banner-image,
  .third_col_2_second .banner-image,
  .home-banner-grid-row {
    padding-right: 5px;
    padding-left: 5px;
  }

  .third_col_1 .banner-image,
  .third_col_2_first .banner-image,
  .third_col_2_second .banner-image {
    padding-top: 10px;
  }

  .home-banner-grid-row .button_discover button {
    padding: 5px 25px;
  }

  .home-banner-grid-row span.banner-title,
  .home-banner-grid-row p.banner-description {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (min-width: 650px) {

  .home-banner-grid-row .first_column,
  .home-banner-grid-row .first_column .banner-image {
    display: flex;
    width: 100%;
  }

  .home-banner-grid-row .third_col_2,
  .home-banner-grid-row .second_col_2 {
    align-self: flex-end;
    width: 100%;
  }
}

@media (max-width: 649px) {

  .home-banner-grid-row>div,
  .home-banner-grid-row .third_col_1,
  .home-banner-grid-row .third_col_2 {
    width: 100%;
    flex-basis: 100%;
    justify-content: center;
  }

  .home-banner-grid-row .first_column {
    padding-top: 10px;
  }

  .home-banner-grid-row .first_column .banner-image {
    display: block;
  }

  .first_column .banner-image,
  .second_col_1 .banner-image,
  .second_col_2 .banner-image,
  .third_col_1 .banner-image,
  .third_col_2_first .banner-image,
  .third_col_2_second .banner-image,
  .home-banner-grid-row {
    padding-top: 0;
    padding-bottom: 10px;
  }

  .home-banner-grid-row .third_col_1 .banner-image {
    padding-bottom: 10px;
  }

  .home-banner-grid-row p.banner-description {
    font-size: 17px;
  }
}

@media (min-width: 380px) {

  .home-banner-grid-row .third_col_2>div,
  .home-banner-grid-row .third_col_2 .banner-image {
    display: flex;
    width: 100%;
  }
}

@media (max-width: 379px) {
  .home-banner-grid-row .third_col_2 {
    flex-direction: column;
  }
}

/* *************************** */

.first_column .banner-image a,
.third_col_1,
.third_col_2_first .banner-image a {
  width: 100%;
}

/* ***************************************************** */
/* **************** End Home Banner Style **************** */
/* ***************************************************** */

/* ***************************************************** */
/* **************** Start Home Customer Reassurance Style **************** */
/* ***************************************************** */

#index .card.card--reassurance.mb-3 {
  padding-right: 30px;
  padding-left: 30px;
}

#cart .card.card--reassurance.mb-3 {
  background-color: var(--header-bg-color);
}

#index .card.card--reassurance.mb-3 .list-group,
#cart .card.card--reassurance.mb-3 .list-group {
  flex-direction: row;
  flex-wrap: wrap;
  padding: 20px;
  gap: 20px;
}

#cart .card.card--reassurance.mb-3 .list-group-item {
  padding: 0px;
  background-color: var(--header-bg-color);
}

#cart .card.card--reassurance.mb-3 .list-group-item>div {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: flex-start;
}

#cart .card.card--reassurance.mb-3 .list-group-item .description span {
  width: 100%;
  display: block;
  text-align: justify;
  color: #252525;
}

#product .card.card--reassurance,
#product .card.card--reassurance .list-group-item {
  background-color: var(--header-bg-color);
}

#product .card.product_custom_nav_tabs_container,
#product .card.product_custom_nav_tabs_container .nav-link {
  background-color: var(--header-bg-color);
}

#product .card.card--reassurance .list-group-item span {
  color: #252525;
}

.card.card--reassurance.mb-3 .image-title-container img {
  margin: initial;
  width: 41px;
}

.show-description {
  display: block !important;
}

.rotate {
  transform: rotate(180deg);
}

@media (max-width: 1199px) {
  #index .card.card--reassurance.mb-3 .list-group {
    flex-direction: column;
  }

  #index .card.card--reassurance.mb-3 li.list-group-item div {
    position: relative;
  }

  #index .card.card--reassurance.mb-3 svg.arrow-down.d-none {
    position: absolute;
    top: 0;
    left: 100%;
  }

  #index svg.arrow-down.d-none {
    display: block !important;
  }

  #index .card.card--reassurance.mb-3 .description {
    display: none;
  }

  #index .card.card--reassurance.mb-3 {
    padding-left: 15px;
    margin-bottom: 0 !important;
  }

  #index .card.card--reassurance.mb-3 .description.show-description {
    padding-top: 7px;
    padding-left: 45px;
  }

  #header .header-nav .svg_icon:not(.menu_close_icon).cart_icon {
    width: 30px !important;
    height: 30px !important;
  }
}

@media (min-width: 1200px) {
  .card.card--reassurance.mb-3 .list-group li {
    flex: 1 1 0;
  }

  #index .card.card--reassurance.mb-3 {
    margin-top: 23.5px;
  }
}

@media (max-width: 1000px) {
  .card.card--reassurance.mb-3 {
    padding-right: 10px;
    padding-left: 10px;
  }
}

@media (max-width: 414px) {
  .card.card--reassurance.mb-3 {
    padding: 5px;
  }

  .card.card--reassurance.mb-3 .list-group-item {
    padding: 0.35rem 0.25rem;
  }

  .card.card--reassurance.mb-3 .list-group li {
    flex: initial;
  }
}

/* ***************************************************** */
/* **************** End Home Category Blocks Style **************** */
/* ***************************************************** */

/* ***************************************************** */
/* **************** Start Home Image Slider Style **************** */
/* ***************************************************** */

span.btn-discover {
  padding: 8px 38px 8px 38px;
  border-radius: 50px;
  background: var(--secondary-bg-color);
  color: var(--header-bg-color);
  border: 2px solid var(--secondary-bg-color);
  font-weight: bold;
}

.carousel-container.position-relative .container.position-absolute {
  max-width: 1850px;
  padding: 0;
}

p.display-1.text-uppercase.slide-title {
  font-size: 42px;
  background: #80808082;
  padding: 0 7px;
}

#carousel.ps_imageslider .slider-caption {
  color: var(--header-bg-color);
  line-height: initial;
  border: none;
  padding: 0;
  max-height: 80%;
  top: 10%;
  bottom: 10%;
  left: 7%;
  right: 7%;
  overflow: hidden;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  max-width: 100%;
}

.carousel-container.position-relative .slider-caption.d-flex.align-items-center.justify-content-center.flex-column {
  align-items: flex-start !important;
}

.carousel-container.position-relative .caption-description {
  padding-bottom: 20px;
  font-size: 1.5rem;
}

.slick-slider .btn.slick-arrow i {
  font-size: 3rem;
  box-shadow: none;
}

@media (max-width: 1060px) {
  button.btn.btn-link.slick-prev.slick-arrow {
    padding-left: 0;
  }

  button.btn.btn-link.slick-next.slick-arrow {
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  #carousel.ps_imageslider .slider-caption .slide-title {
    font-size: 27px;
  }

  .carousel-container.position-relative .caption-description {
    padding-bottom: 5px;
  }
}

@media (max-width: 600px) {
  #carousel.ps_imageslider .slider-caption .slide-title {
    font-size: 16px;
    margin-bottom: 0;
  }

  .carousel-container.position-relative .caption-description {
    padding-bottom: 5px;
  }

  .carousel-container.position-relative .caption-description p {
    font-size: 12px;
  }

  span.btn-discover {
    padding: 2px 26px 5px 26px !important;
    font-size: 12px;
  }

  .slick-slider .btn.slick-arrow i {
    font-size: 1rem !important;
  }

  button.btn.btn-link.slick-prev.slick-arrow {
    padding-left: 2px !important;
  }

  button.btn.btn-link.slick-next.slick-arrow {
    padding-right: 2px !important;
  }
}

/* ***************************************************** */
/* **************** End Home Image Slider Style **************** */
/* ***************************************************** */

/* ***************************************************** */
/* **************** Start Home Brandlist Style **************** */
/* ***************************************************** */
section#search_filters_brands {
  margin-bottom: 0px;
}

section#search_filters_brands h2.h2.sectiontitle.facet-label {
  text-align: center;
}

section#search_filters_brands span.span_titletext a {
  color: var(--header-bottom-bg-color);
}

section#search_filters_brands span.span_titletext {
  text-align: center;
  font-weight: bold;
  font-size: 26px;
}

section#search_filters_brands span.span_titletext:after {
  /* content: ""; */
  display: block;
  width: 75px;
  border-bottom: 4px solid #0072bc;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
}

.div_brand_carousel_container.brands-slick.slick-items-container.spacing-md-top.slick-initialized.slick-slider {
  border: none;
}

.div_brand_carousel_container .li_brand_item a {
  border-radius: 15px;
  background-color: white;
}

.div_brand_carousel_container .li_brand_item a img {
  border-radius: 15px;
  padding: 10px;
  max-height: 180px;
  transition: all 1s ease;
}

.div_brand_carousel_container .li_brand_item a:after {
  border-radius: 40px;
}

/* ***************************************************** */
/* **************** End Home Brandlist Style **************** */
/* ***************************************************** */

/* ***************************************************** */
/* **************** Start Home Banner Image Style **************** */
/* ***************************************************** */

section.bannersection.ps_banner.hasdescription img {
  min-height: 170px;
  object-fit: cover;
}

section.bannersection.ps_banner.hasdescription {
  position: relative;
  margin-bottom: 0;
}

section.bannersection.ps_banner .banner-title {
  padding-top: 30px;
  color: var(--header-bg-color);
  font-weight: bold;
  font-size: 42px;
  text-transform: uppercase;
  padding-bottom: 15px;
}

section.bannersection.ps_banner .div_bannerdescription_container {
  color: var(--header-bg-color);
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 0px;
  left: 9%;
}

section.bannersection.ps_banner .div_bannerdescription {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

section.bannersection.ps_banner span.span_description {
  color: var(--header-bg-color);
  font-size: 16px;
}

section.bannersection.ps_banner span.btn.btn-primary {
  padding: 5px 33px 5px 33px;
  border-radius: 50px;
  background: var(--secondary-bg-color);
  color: var(--header-bg-color);
  border: 2px solid var(--secondary-bg-color);
  font-weight: bold;
  width: 148px;
}

@media (max-width: 1199px) {
  section.bannersection.ps_banner .banner-title {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  section.bannersection.ps_banner .div_bannerdescription_container {
    padding-left: 30px;
  }

  section.bannersection.ps_banner .banner-title {
    padding-top: 22px;
    padding-left: 0;
    font-size: 27px;
    padding-bottom: 10px;
  }

  section.bannersection.ps_banner span.btn.btn-primary {
    padding: 2px 26px 2px 26px;
  }

  section.bannersection.ps_banner .div_bannerdescription_container {
    left: 4%;
  }

  .slick-list.draggable .slider_content_container span.btn-discover {
    padding: 4px 38px 4px 38px;
  }
}

@media (max-width: 600px) {
  section.bannersection.ps_banner .banner-title {
    font-size: 16px;
  }

  section.bannersection.ps_banner span.span_description {
    font-size: 12px;
  }

  section.bannersection.ps_banner span.btn.btn-primary {
    padding: 2px;
    width: 105px;
    font-size: 12px;
  }

  section.bannersection.ps_banner .div_bannerdescription_container {
    left: 2%;
  }
}

/* ***************************************************** */
/* **************** End Home Banner Image Style **************** */
/* ***************************************************** */

/* ***************************************************** */
/* **************** Start Footer Style **************** */
/* ***************************************************** */
.footer-top {
  background: var(--footer-top-bg-color);
}

.footer-center,
.footer-bottom {
  background: var(--footer-bg-color);
}

/* MZS 2026-06-15 — client: remove footer top padding. */
#footer {
  padding-top: 0;
}

#back-top {
  bottom: 75px;
  right: 15px;

  z-index: 10;
}

#back-top span {
  width: 44px;
  height: 44px;

  background: #1A6FAB;
  color: var(--btn-color);

  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  cursor: pointer;

  filter: alpha(opacity=70);
  opacity: 0.7;
}
#back-top span:hover { background: #155d8f; opacity: 1; }
/* MZS 2026-05-22 - Load more (amazzingfilter pagination type 2) recoloured blue (was orange via .btn-primary). */
.dynamic-loading .loadMore,
.dynamic-loading .loadMore.next,
.loadMore.next.btn {
  background: #1A6FAB !important;
  border-color: #1A6FAB !important;
  color: #fff !important;
}
.dynamic-loading .loadMore:hover,
.loadMore.next.btn:hover {
  background: #155d8f !important;
  border-color: #155d8f !important;
}

#back-top span:hover {
  filter: alpha(opacity=100);
  opacity: 1;
}

.footer-top form.needs-validation {
  display: flex;
  justify-content: center;
}

.footer-top .input-group.input-group-newsletter {
  order: 1;
}

.footer-top .input-group-append {
  position: absolute;
  right: 0;
  z-index: 3;
}

.footer-top .btn.btn-primary {
  width: 150px;
  background: var(--home-banner-image-hover-color);
  color: white !important;
  font-weight: bold !important;
  font-size: 17px !important;
  z-index: 2;
  border-radius: 50px;
  height: 38px;
}

.footer-top .btn.btn-primary .align-items-center {
  display: block !important;
  font-size: 15px;
}

.footer-top .input-group.input-group-newsletter input.form-control {
  border-radius: 50px;
  padding-left: 25px;
  padding-right: 150px;
}

.block_newsletter.col-lg-8.col-12 {
  margin-right: auto;
  margin-left: auto;
  padding-top: 30px;
  padding-bottom: 30px;
}

.footer-top p.small.mt-2 {
  color: white;
  padding-right: 30px;
  font-size: 18px;
  text-align: initial;
}

.footer-top p.footer__title.footer__title--desktop {
  display: none;
}

@media (min-width: 992px) {
  #footer .collapse:not(.show) {
    display: block !important;
  }

  .input-group.input-group-newsletter {
    max-width: 500px;
    align-items: center;
  }

  .clearfix.div_newslettertext.text-center {
    max-width: 540px;
  }

  .clearfix.div_newslettertext.text-center p.small.mt-2 {
    margin: 0 !important;
    padding: 0 50px;
  }

  .footer-top form.needs-validation {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .col-lg-6.linklist.linklist_footer {
    display: flex;
    justify-content: space-around;
  }
}

/* MZS 2026-06-12 — Footer structure pass 1: 4-equal-column grid on desktop.
   No color/typography/visual change in this pass — structure only.
   `.col-lg-6.linklist_footer` (wide-left wrapper of Information + Useful Links
   sub-blocks) becomes `display: contents` so its 2 children promote to direct
   grid items of `.inner`. Combined with `#block_myaccount_infos` +
   `.block-contact` → exactly 4 grid items in row 1.
   GDPR button + `#gdpr-consent` span full-width on row 2.
   Mobile (≤991px) intentionally untouched — existing collapse-accordion stays.
   Hover colors, font sizes, social icons, GDPR styling NOT changed this pass. */
@media (min-width: 992px) {
  #footer .footer-center .inner.d-md-flex {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 28px;
    align-items: start;
    padding-top: 36px;
    padding-bottom: 28px;
  }
  /* MZS 2026-06-12 pass 2 — heading top padding zeroed only where the grid +
     .inner padding apply; tablet 768-991 keeps the old 30px. */
  #footer .footer-center p.footer__title.footer__title--desktop {
    padding-top: 0;
  }
  #footer .footer-center .col-lg-6.linklist.linklist_footer {
    display: contents;
  }
  #footer .footer-center #block_myaccount_infos.col-lg-3,
  #footer .footer-center .block-contact.col-lg-3 {
    flex: none !important;
    max-width: none !important;
    padding-left: 0;
    padding-right: 0;
  }
  #footer .footer-center a.show-gdpr-modal {
    grid-column: 1 / -1;
    order: 99;
  }
  #footer .footer-center #gdpr-consent {
    grid-column: 1 / -1;
    order: 100;
  }
}

@media (max-width: 991px) {
  .footer-top {
    background: var(--footer-bg-color);
  }

  .collapse:not(.show) {
    display: none !important;
  }

  .footer-top form.needs-validation {
    flex-direction: column;
  }

  .footer-top .input-group.input-group-newsletter {
    max-width: 415px;
  }

  .block_newsletter.col-lg-8.col-12 {
    padding-top: 0;
    padding-bottom: 0;
  }

  a.footer__title--mobile.footer__title {
    color: var(--footer-text-color);
  }

  .col-lg-6.linklist.linklist_footer {
    display: block;
  }
}

#index .footer-container {
  margin-top: 0;
  padding-top: 0;
}

/* MZS 2026-06-12 pass 2 — reference heading: 13px/700. padding-top stays 30px
   here for tablet; zeroed at ≥992px inside the pass-1 grid media block. */
p.footer__title.footer__title--desktop {
  color: var(--footer-text-color);
  padding-top: 30px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: initial;
}

/* MZS 2026-06-12 pass 2 — reference links: 13px #ccc mixed-case (was 14px uppercase). */
.col-lg-6.linklist.linklist_footer ul li a,
div#block_myaccount_infos ul li a {
  color: #ccc;
  text-transform: none;
  font-size: 13px;
}

/* MZS 2026-06-12 — reference link rhythm. li margin (NOT ul gap):
   desktop force-open rule above sets display:block !important on ULs,
   so flex/grid gap would silently not apply. */
#footer .footer-center .linklist_footer ul,
#footer .footer-center ul.account-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
#footer .footer-center .linklist_footer ul li,
#footer .footer-center ul.account-list li {
  margin-bottom: 4px; /* MZS 2026-06-15 - client: tighter footer link rows (was 7px) */
}

/* MZS 2026-06-12 pass 2 — reference store-info text: 12.5px #ccc, airy line-height. */
div#footer_storeinfo span {
  color: #ccc;
  font-size: 12.5px;
  line-height: 1.7;
}

/* MZS 2026-06-12 — Opening Hours + credentials (reference styling, theme palette).
   padding-bottom: 0 everywhere defeats div#footer_storeinfo div { padding-bottom: 10px }.
   Explicit __row span rule defeats div#footer_storeinfo span { font-size: 12.5px }. */
#footer .lc-foot-hours { margin: 4px 0 14px; padding-bottom: 0; }
#footer .lc-foot-hours__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--footer-text-color);
  margin-bottom: 8px;
  padding-bottom: 0;
}
#footer .lc-foot-hours__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  padding-bottom: 0;
}
#footer .lc-foot-hours__row span {
  font-size: 12px;
  color: #ccc;
  line-height: 1.5;
}
#footer .lc-foot-hours__row span.lc-foot-hours__always { color: #1a9a6a; font-weight: 600; }
#footer .lc-foot-credentials {
  font-size: 11px;
  color: #ccc;
  line-height: 1.8;
  margin-bottom: 14px;
  padding-bottom: 0;
}

.footer-center .social-sharing.col-lg-4.col-sm-12 {
  max-width: 100%;
  padding-top: 15px;
}

div#footer_storeinfo div {
  padding-bottom: 10px;
}

div#footer_storeinfo .div_address.d-flex.align-items-center {
  align-items: flex-start !important;
}

div#footer_storeinfo .div_address.d-flex.align-items-center svg.svg_icon.mail_icon.flex-shrink-0.mr-3 {
  margin-top: 6px;
}

.footer-center-top {
  display: none;
}

@media (min-width: 992px) {
  .footer-center-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    /* MZS 2026-06-12 pass 4 — reference row border (:391). */
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 24px; /* MZS 2026-06-15 - client: gap below the review/payment row */
  }

  .footer-center-top .secure-payments {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .footer-center-top .secure-payments > span {
    /* MZS 2026-06-12 pass 2 — reference payments-label: 12px #ccc normal (was 18px bold white).
       MZS 2026-06-15 — scoped to the direct label span + padding-top 10px→0 now the badges are
       30px pills (row is align-items:center, no nudge needed). */
    color: #ccc;
    font-size: 12px;
    font-weight: normal;
    padding-top: 0;
  }

  /* MZS 2026-06-12 pass 4 — reference vertical divider (:781) + Trustpilot slot.
     Placeholder is dashed + dim so it reads as "to be replaced". */
  .footer-center-top .lc-foot-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
  }
  .footer-center-top .lc-foot-trustpilot {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    text-decoration: none;
  }
  .footer-center-top .lc-foot-trustpilot__score {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
  }
  .footer-center-top .lc-foot-trustpilot__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .footer-center-top .lc-foot-trustpilot__stars {
    display: flex;
    gap: 2px;
    font-size: 15px;
    line-height: 1;
    color: #f59e0b;
  }
  /* 5th star: grey base + 80% orange overlay (4.8 of 5). Adjust width if score changes. */
  .footer-center-top .lc-ftp-star--partial {
    position: relative;
    display: inline-block;
    color: #d1d5db;
  }
  .footer-center-top .lc-ftp-star--partial > span {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 80%;
    color: #f59e0b;
  }
  .footer-center-top .lc-foot-trustpilot__label {
    font-size: 11px;
    color: #888;
  }
  .footer-center-top .lc-foot-trustpilot__label strong {
    color: #ccc;
    font-weight: 500;
  }
  .footer-center-top .lc-foot-trustpilot:hover .lc-foot-trustpilot__label strong {
    color: #fff;
  }

  /* MZS 2026-06-15 — Google review badge mirrors the Trustpilot badge (rebuilt from <img>). */
  .footer-center-top .lc-foot-google {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    text-decoration: none; /* MZS 2026-06-16 — now an <a>; kill default underline (mirrors Trustpilot) */
  }
  /* MZS 2026-06-16 — brand word brightens on hover, parity with Trustpilot. */
  .footer-center-top .lc-foot-google:hover .lc-foot-google__label strong {
    color: #fff;
  }
  .footer-center-top .lc-foot-google__score {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
  }
  .footer-center-top .lc-foot-google__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .footer-center-top .lc-foot-google__stars {
    display: flex;
    gap: 2px;
    font-size: 15px;
    line-height: 1;
    color: #f59e0b;
  }
  .footer-center-top .lc-foot-google__label {
    font-size: 11px;
    color: #888;
  }
  .footer-center-top .lc-foot-google__label strong {
    color: #ccc;
    font-weight: 500;
  }
  /* MZS 2026-06-15 — footer payment-logo pills are defined as base rules below (must work at all
     viewports; the raw visa.svg is ~1000px wide, so it needs the pill/img sizing everywhere). */
}

/* MZS 2026-06-15 — client brand SVGs, one per white pill (mirrors references/FOOTER.html) */
#footer .secure-payments .lc-foot-payments {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
#footer .secure-payments .lc-foot-pay-pill {
  height: 34px;
  min-width: 46px;
  padding: 4px 9px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#footer .secure-payments .lc-foot-pay-pill img {
  height: 18px;
  width: auto;
  max-width: 100%;
  display: block;
}

#footer .social-sharing.col-lg-4.col-sm-12 .social-share-btn {
  background-image: none !important;
}

#footer .social-sharing.col-lg-4.col-sm-12 svg {
  height: 100%;
}

#footer .social-sharing.col-lg-4.col-sm-12 a.text-hide.social-share-btn.social-share-btn--footer.p-0.btn.btn-primary.facebook svg {
  width: 13px;
  height: 38px;
  /* padding-top: 10px; */
}

#footer svg.svg_icon.mail_icon.flex-shrink-0.mr-3 {
  color: var(--footer-icon-color);
}

#footer svg.svg_icon.social_icon {
  width: 25px;
}

#footer .google-rating {
  flex: 0 0 33%;
  max-width: 33%;
  padding-top: 14px;
}

#footer li.Credit.slips,
ul#footer_account_list li:last-child,
ul#footer_account_list li.lnk_quotes, /* MZS 2026-06-12 - askforaquotepro duplicate "My quotes" */
.footer-center ul.account-list li.Vouchers {
  display: none;
}

#footer a.show-gdpr-modal {
  background: transparent !important;
  border: none;
  font-size: 12px !important; /* MZS 2026-06-12 - was 14px; reference legal-link size */
}

#footer a.show-gdpr-modal {
  display: flex !important;
  justify-content: flex-start;
  flex: 0 0 27% !important;
  padding: 0px;
}

#footer .show-gdpr-modal {
  margin-top: 0;
}

#footer .footer-center .social-sharing.col-lg-4.col-sm-12 {
  flex-wrap: nowrap !important;
}

@media (min-width: 992px) and (max-width: 1300px) {
  #footer a.show-gdpr-modal {
    flex: 0 0 28% !important;
  }
}

@media (max-width: 991px) {
  #footer a.show-gdpr-modal {
    justify-content: flex-start !important;
  }

  #footer a.text-hide.social-share-btn.social-share-btn--footer.p-0.btn.btn-primary.facebook {
    width: 20px !important;
  }

  #footer a.show-gdpr-modal {
    padding-left: 15px;
  }
}

#footer a.text-hide.social-share-btn.social-share-btn--footer.p-0.btn.btn-primary.facebook {
  margin-left: 0 !important;
}

#footer .social-sharing.col-lg-4.col-sm-12 {
  padding-left: 0 !important;
}

#footer .footer-center .btn-primary {
  background-color: transparent;
}

#footer .footer-center a.btn-primary:hover {
  background-color: var(--btn-hover-bg-color);
}

.footer-top .input-group-append .btn-primary {
  border: none;
}

/* MZS 2026-06-12 pass 2 — hover recolored to reference orange (was #268dd0 blue).
   Pass 4b: Trustpilot block excluded — its spans carry their own colors. */
.footer-center ul li a:hover,
.footer-center a.show-gdpr-modal:hover,
.footer-center a:not(.lc-foot-trustpilot):not(.lc-foot-google):hover span {
  color: #E8531A !important;
}

/* MZS 2026-06-12 pass 2 — reference copyright: 12px #ccc, shop name white. */
#footer .footer-bottom .span_copy {
  font-size: 12px;
  color: #ccc;
}
#footer .footer-bottom .span_copy strong {
  color: #fff;
  font-weight: 500;
}

/* MZS 2026-06-12 pass 3 — Memberships row (reference :890-903). */
#footer .lc-foot-memberships {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-wrap: wrap;
}
#footer .lc-foot-memberships__label {
  font-size: 12px;
  font-weight: 600;
  color: #ccc;
  margin-right: 4px;
}
#footer .lc-foot-memberships__badge {
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
}
#footer .lc-foot-memberships__badge img {
  width: auto;
  max-height: 36px;
  object-fit: contain;
}

/* MZS 2026-06-12 pass 3 — copyright/legal row (reference :905-911). */
#footer .footer-bottom .div_copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
#footer .footer-bottom .footer-bottom-right {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
#footer .footer-bottom .lc-foot-legal__link {
  font-size: 12px;
  color: #ccc;
}
#footer .footer-bottom .lc-foot-legal__link:hover {
  color: #E8531A;
}

/* MZS 2026-06-12 pass 3 — original GDPR button hidden; the legal row's shadow link
   (.lc-gdpr-proxy) proxy-clicks it. Element stays in DOM — gdprpro's handler stays
   bound and #gdpr-consent mount is untouched. Higher specificity + later source
   beats the legacy `display: flex !important` rule. */
#footer .footer-center a.show-gdpr-modal {
  display: none !important;
}

/* ***************************************************** */
/* **************** End Footer Style **************** */
/* ***************************************************** */

/* ***************************************************** */
/* **************** Start Category Page Style **************** */
/* ***************************************************** */
@media (min-width: 992px) {
  #left-column .card.card--reassurance .list-group-item {
    padding: 0.75rem 0.6rem;
  }

  div#search_filters {
    padding-right: 0.6rem;
    padding-left: 0.6rem;
  }
}

.plisttop .sort-by-row {
  flex-wrap: wrap;
  gap: 12px;
}

h1.h1.category_header {
  font-size: 26px;
  font-weight: bold;
  color: var(--header-bottom-bg-color);
  padding-bottom: 20px;
}

/* Trimming category description style Start */
span.btn.btn-primary.more,
span.btn.btn-primary.less {
  background: transparent;
  border: none;
  color: var(--home-banner-image-hover-color);
  padding: 0px 3px 0 0;
}

span.btn.btn-primary.more:active:focus,
span.btn.btn-primary.more:active:hover,
span.btn.btn-primary.less:active:focus,
span.btn.btn-primary.less:active:hover {
  background: transparent;
  border: none;
  color: var(--header-bottom-bg-color);
}

.div_showmoreless_content_container {
  max-height: 100px;
  transition: max-height 0.5s ease;
}

.span_showmoreless_fade {
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, #fff, rgba(255, 255, 255, 0));
  opacity: 0;
  transition: all 0.5s ease;
}

.div_showmoreless_container:not(.opened) .span_showmoreless_fade {
  opacity: 1;
  height: 50%;
}

.div_showmoreless_container.need_showmore .span_showmoreless_fade,
.div_showmoreless_container.need_showmore .div_showmoreless_buttons {
  display: block;
}

.div_showmoreless_container.opened .div_showmoreless_buttons .more,
.div_showmoreless_container:not(.opened) .div_showmoreless_buttons .less {
  display: none;
}

/* Trimming category description style End*/

#subcategories .div_subcategory_container.d-flex.flex-column a.subcategory-name {
  width: 90%;
}

@media screen and (min-width: 1200px) {

  #category .container.category-container-top,
  #category .subcategories-container .container,
  #manufacturer #wrapper .l-wrapper .pt-2,
  #new-products #wrapper .wrapper .pt-2,
  #category #wrapper {
    max-width: 1700px;
    width: 95%;
  }

  #product .l-wrapper {
    max-width: 1440px;
  }

  #footer .container {
    max-width: 1440px;
  }

  #footer .linklist.linklist_footer>div {
    /* MZS 2026-06-12 - was 50%; since pass-1 display:contents these divs ARE the
       grid items — 50% halved them inside their 1fr tracks at this breakpoint. */
    width: auto;
  }

  #footer .linklist.linklist_footer {
    padding: 0px;
  }

  #manufacturer #wrapper {
    max-width: 1700px;
    width: 95%;
  }

  #new-products #wrapper {
    max-width: 1700px;
    width: 95%;
  }
}

#footer .google-rating img {
  margin-left: 0px;
}

#category div#subcategories {
  padding-top: 20px;
  border-top: 2px solid rgba(65, 64, 66, 0.2);
}

#category div#subcategories img {
  border-radius: 50%;
  border: 3px solid var(--home-banner-image-hover-color);
}

#category div#subcategories a.subcategory-name {
  text-transform: uppercase;
  color: var(--header-bottom-bg-color);
  font-weight: bold;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}

#category div#subcategories ul.clearfix.d-flex.flex-wrap li {
  display: inline-block;
  width: 206px;
  padding-top: 20px;
}

.div_subcategory_container.d-flex.flex-column:hover .subcategory-name {
  color: var(--secondary-bg-color) !important;
}

.div_subcategory_container.d-flex.flex-column:hover img {
  border: 3px solid var(--secondary-bg-color) !important;
}

/* MZS 2026-05-22 - subcategory tile hover-lift (item 7). The card border/shadow/overflow:hidden
   live on the <li>, so lift the LI (whole card moves as one unit) - lifting the inner container slid the
   title up inside the clipped li. Orange border on hover = the card outline. */
#category div#subcategories ul.clearfix.d-flex.flex-wrap li {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#category div#subcategories ul.clearfix.d-flex.flex-wrap li:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(242,100,48,0.20);
  border-color: var(--secondary-bg-color);
}

#category-image-description-container {
  display: flex;
  flex-wrap: wrap;
}

.category-cover.visible--desktop {
  order: 1;
  flex: 1 0 17%;
}

.category-cover.visible--desktop img {
  border-radius: 50%;
  border: 3px solid var(--home-banner-image-hover-color);
}

.products .card.card-product.thumbnail-container {
  height: 100% !important;
}

.products .product-description.product__card-desc {
  height: 100% !important;
  justify-content: initial;
}

.products .product-description .h3.product-title {
  flex: 1;
}

.products .product-description .product-price-and-shipping {
  flex: 1;
}

.breadcrumb a {
  line-height: initial;
}

/* product miniatures images animation */

.product__card-img.div_product_image {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 10px;
}

.div_productimgcontainer {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.product__card-img.div_product_image img {
  margin: 0 auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  max-width: 100%;
  height: auto;
}

.div_productimgcontainer img {
  webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  opacity: 1;
}

.div_productimgcontainer img {
  -webkit-transform: translateX(0) scale(1);
  transform: translateX(0) scale(1);
}

span.product-additional img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.product-miniature:hover .div_productimgcontainer img {
  opacity: 0;
}

.product-miniature:hover .div_productimgcontainer img {
  transform: translateX(-100%) scale(0);
}

.product-miniature:hover span.product-additional img {
  opacity: 1;
}

.product-miniature:hover span.product-additional img {
  transform: translateX(0) scale(1);
}

/* end product miniatures images animation */

span.quicview-label {
  font-weight: bold;
  color: var(--home-banner-image-hover-color);
}

.product-miniature .an_wishlist-mini-count.js-an_wishlist-product-count {
  display: none;
}

.highlighted-informations.text-center.p-2.no-variants {
  height: 2.8em !important;
}

.highlighted-informations {
  /* bottom: 37%; */
  width: 135px;
  background-color: transparent;
  /* left: 30%; */
  border: 1px solid var(--home-banner-image-hover-color);
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.8);
  display: none;
}

@media (max-width: 380px) {
  .highlighted-informations {
    width: 120px;
  }

  svg.svg_icon.quickview_icon {
    width: 17px;
  }

  span.quicview-label {
    font-size: 13px;
  }
}

.product-miniature .card.card-product.thumbnail-container:hover .highlighted-informations {
  display: block !important;
}

.product-miniature h3.h3.product-title a,
p.h3.product-title a {
  color: black;
  font-size: 15.5px;
  font-weight: bold;
  line-height: 1.35;
  text-align: left;
  transition: none;
  text-transform: capitalize;
}
/* MZS 2026-05-19 review-batch A5: clamp removed - show full title regardless of length.
   MZS 2026-06-04 r2: title is back in SECTION_SELECTORS so 2-up (display:contents on
   .pla-section--title-attrs) aligns cards. On desktop the @media reset below forces
   min-height:0 so the inline min-height set by the equalizer is a no-op; the wrapper
   .pla-section--title-attrs handles the equalization there. */
.product-miniature .product-title {
  text-align: left;
  overflow: visible;
  text-overflow: clip;
}
@media (min-width: 1024px) {
  .product-miniature .product-title { min-height: 0 !important; }
}

.product-miniature .div_productlistreviews {
  position: absolute;
  top: 40px;
  right: 4px;
}

.product-miniature .an_wishlist-mini .js-an_wishlist-addremove {
  background: transparent;
  color: var(--submenu-arrow-color);
}

.card.card-product.thumbnail-container {
  border-radius: 8px;
  /* MZS 2026-05-13 - section 1 tidy: home-page-matching drop-shadow on each product card so cards visually lift off the background. MZS 2026-05-18 r3: smaller radius (more square) + toned-down shadow. */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.product-miniature .card-body.div_product_meta {
  padding: 0.5rem;
}

.product-miniature .product-price-and-shipping .price {
  color: var(--secondary-bg-color);
  font-size: 22px;
}

span#lyoshowvatfree {
  font-size: 12px;
}

.product-miniature button.btn.btn-primary.add-to-cart {
  background-color: var(--secondary-bg-color);
  border-color: var(--secondary-bg-color);
  border-radius: 20px;
  margin-bottom: 4px;
}

/* MZS 2026-06-09 r25 - scoped to body:not(#product) so the listing-card corner-absolute
   styling (and the transparent-bg hover) doesn't leak onto the product detail page. */
body:not(#product) button.fly_to_quote_cart_button.btn.btn-primary {
  background: transparent;
  border: none;
  position: absolute;
  padding: 0;
  top: 8px;
  right: 8px;
}

body:not(#product) button.fly_to_quote_cart_button.btn.btn-primary:hover,
body:not(#product) button.fly_to_quote_cart_button.btn.btn-primary:active,
body:not(#product) button.fly_to_quote_cart_button.btn.btn-primary:focus {
  border-color: transparent !important;
  background-color: transparent !important;
}

svg.svg_icon.quotes_icon {
  color: var(--secondary-bg-color);
}

.product-miniature .details {
  display: flex;
  justify-content: center;
}

.product-miniature .details {
  padding-top: 25px;
  padding-bottom: 25px;
}

button.btn.btn-touchspin-down,
button.btn.btn-touchspin-up {
  padding: 4px 8px 4px 8px;
}

.div_inputqtyparent {
  display: inline-flex;
  border: 1px solid var(--header-bottom-bg-color);
  border-radius: 50px;
  margin-right: 15px;
  margin-bottom: 10px;
}

.div_inputqtyparent #number {
  border: none;
  text-align: center;
  width: 40px;
  font-weight: bold;
  color: var(--header-bottom-bg-color);
}

#select-sort-order {
  border-radius: 50px;
  border-color: var(--header-bottom-bg-color);
}

label.visible--desktop {
  font-weight: bold;
}

.product-miniature .product__card-img.div_product_image {
  display: flex;
  justify-content: center;
}

form.add-to-cart-or-refresh {
  text-align: center;
}

.product-miniature .div_productdescription_short {
  display: none;
}

div#js-product-list-top .col-lg-6.visible--desktop.total-products {
  display: flex;
}

div#js-product-list-top .col-lg-6.visible--desktop.total-products p.product__quantity {
  padding-left: 20px;
}

div#js-product-list-top {
  margin-top: 4rem !important;
  margin-bottom: 2rem !important;
}

i.material-icons.show_list,
i.material-icons.show_grid {
  color: var(--list-grid-view-icon-color);
  cursor: pointer;
}

/* Pagination style Start */

ul.page-list.pagination.justify-content-center.justify-content-lg-end.mt-3.mt-lg-0.mb-0 {
  gap: 10px;
}

.page-item.active .page-link,
.page-item.active .product-comments__pagination li span,
.product-comments__pagination li.active .page-link,
.product-comments__pagination li.active span,
.product-comments__pagination li .page-item.active span {
  background-color: var(--home-banner-image-hover-color);
  border-color: var(--home-banner-image-hover-color);
  border-radius: 50%;
  width: 38px;
  text-align: center;
}

.page-link,
.product-comments__pagination li span {
  color: var(--header-bottom-bg-color);
  background-color: #fff;
  border-radius: 50%;
  width: 38px;
  text-align: center;
  border-color: var(--header-bottom-bg-color);
  font-weight: bold;
  padding: 0.5rem 0.35rem;
}

ul.page-list li.page-item.disabled span {
  border: none;
  font-weight: bold;
}

.row.u-a-i-c.pagination_cotainer {
  justify-content: center;
}

.row.u-a-i-c.pagination_cotainer .page-link.next {
  border: none;
}

/* Pagination style End */

@media (max-width: 421px) {
  .product-miniature {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #subcategories ul.clearfix.d-flex.flex-wrap {
    justify-content: center;
  }
}

article.pla_block {
  height: auto !important;
}

.pla_attribute_group_label {
  font-weight: bold;
  color: var(--header-bottom-bg-color);
}

.product-miniature .div_details_cart {
  padding-top: 22px;
}

.listview-container {
  padding-top: 25px;
}

@media (max-width: 480px) {
  article.pla_block {
    flex: 0 0 50%;
    max-width: 50%;
  }

  #subcategories li.flex-shrink-0 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  #subcategories li.flex-shrink-0 .div_subcategory_container .img-fluid {
    max-width: 70%;
  }

  .product-miniature .div_details_cart {
    padding-top: 10px;
  }
}

@media (max-width: 361px) {
  a.button.btn.btn-default.pla_ajax_add_to_cart_button.view-product.btn-primary {
    padding: 7px 10px 7px 10px;
  }
}

/* Blockreassurance Style Start */
.card.card--reassurance.mb-3 {
  border: none;
}

.card.card--reassurance.mb-3 li.list-group-item {
  border-bottom: none;
}

.card.card--reassurance.mb-3 .image-title-container img {
  margin: initial;
  width: 31px;
}

.image-title-container {
  display: flex;
  justify-content: flex-start;
}

.image-title-container .h6 {
  font-size: 18px;
  font-weight: bold;
  padding-left: 15px;
  color: var(--header-bottom-bg-color);
}

.description {
  padding-top: 21px;
  font-size: 15px;
  line-height: 1.2;
  color: var(--blockreassurance-description-color);
}

.product-miniature .highlighted-informations.text-center.p-2.no-variants {
  position: absolute;
  top: 40%;
}

/* Blockreassurance Style End */

/* List View Style Start */

@media

/* (max-width: 991px) and */
(min-width: 1300px) {
  #js-product-list article.product-miniature.js-product-miniature.productlisting_product_container.mb-3.product_allow_oosp.product_show_list {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  #js-product-list .product-miniature.product_show_list .product__card-img.div_product_image {
    display: flex;
    justify-content: flex-start;
  }

  #js-product-list .product-miniature.product_show_list .card.card-product.thumbnail-container {
    flex-direction: row;
  }

  #js-product-list .product-miniature.product_show_list .product-title,
  .product-miniature.product_show_list .product-price-and-shipping.text-center {
    text-align: start !important;
    padding-left: 30px;
    padding-top: 20px;
  }

  #js-product-list .product-miniature.product_show_list .details {
    justify-content: center;
    padding-left: 30px;
  }

  #js-product-list .product-miniature.product_show_list .highlighted-informations {
    width: 135px;
  }

  /* #js-product-list .product-miniature.product_show_list button.fly_to_quote_cart_button.btn.btn-primary {
    bottom: 8px;
    left: 7%;
    top: auto;
  } */

  #js-product-list .product-miniature.product_show_list .div_productlistreviews {
    position: absolute;
    bottom: 0;
    left: 9.3%;
    top: auto;
    right: auto;
  }

  #js-product-list .product-miniature.product_show_list .div_productdescription_short {
    display: block !important;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 25px;
  }

  #js-product-list .product-miniature.product_show_list .highlighted-informations.text-center.p-2.no-variants {
    position: absolute;
    top: 30%;
    left: 26%;
  }

  #js-product-list .product-miniature.product_show_list button.btn.cdpcp-compare-btn.btn-tertiary.cdpcp-compare-btn--above-list.cdpcp-compare-btn--js {
    top: auto !important;
    width: auto !important;
    padding: 0 !important;
    bottom: 3px !important;
    left: 13% !important;
    margin: 0 !important;
  }

  #js-product-list .product-miniature.product_show_list .product__card-desc {
    justify-content: flex-start;
  }

  #js-product-list .product-miniature.product_show_list .div_details_cart {
    padding-top: 0;
  }

  #js-product-list .product-miniature.product_show_list .listview-container {
    display: flex;
    gap: 50px;
    padding-top: 30px;
    flex-wrap: wrap;
    padding-left: 30px;
  }
}

/* #category .product-miniature.product_show_list .pla_attributes.pla_attributes_populated div{
	justify-content:flex-start;
} */

@media (max-width: 1299px) {

  i.material-icons.show_grid,
  i.material-icons.show_list,
  .col-lg-6.visible--desktop.total-products span {
    display: none;
  }
}

@media (min-width: 1348px) and (max-width: 1499px) {
  .product-miniature.product_show_list .highlighted-informations.text-center.p-2.no-variants {
    top: 26%;
    left: 23%;
  }
}

@media (min-width: 1300px) and (max-width: 1347px) {
  .product-miniature.product_show_list .highlighted-informations.text-center.p-2.no-variants {
    top: 16%;
    left: 20%;
  }
}

/* List View Style End */

.pla_attribute_group_label.size-label:before,
.pla_attribute_group_label.length-label:before,
.pla_attribute_group_label.colour-label:before {
  width: 17px;
  content: "";
  height: 15px;
  margin-right: 7px;
  display: inline-block;

  background-repeat: no-repeat;
}

.pla_attribute_group_label.size-label:before {
  background-image: url(../img/gutter-size.svg);
}

.pla_attribute_group_label.length-label:before {
  background-image: url(../img/gutter-length.svg);
}

.pla_attribute_group_label.colour-label:before {
  background-image: url(../img/colour.svg);
}

.product-miniature button.btn.cdpcp-compare-btn.btn-tertiary.cdpcp-compare-btn--above-list.cdpcp-compare-btn--js {
  position: absolute;
  right: 8px;
  top: 76px;
  width: auto;
  padding: 0;
}

.product-miniature svg.cdpcp-icon-add.cdpcp-compare-btn__icon,
#category .product-miniature svg.cdpcp-icon-remove.cdpcp-compare-btn__icon {
  width: 25px;
  height: 25px;
}

.product-miniature span.cdpcp-compare-btn__text.cdpcp-compare-btn__text--add,
#category .product-miniature span.cdpcp-compare-btn__text.cdpcp-compare-btn__text--remove {
  display: none;
}

@media (max-width: 1199px) {
  .product-miniature .an_wishlist-mini svg {
    width: 23px !important;
    height: 19px !important;
  }
}

/* .pla_attributes.pla_attributes_populated {
  padding: 0 20px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .pla_attributes.pla_attributes_populated {
    padding: 0 10px;
  }
}

@media (max-width: 767px) {
  .pla_attributes.pla_attributes_populated {
    padding: 0 5px;
  }
} */

/* Faceted Search Style Start */

label.custom-control-label {
  cursor: pointer;
}

.custom-control.custom-checkbox.custom-color label.custom-control-label {
  display: flex;
  align-items: center;
}

.custom-control.custom-checkbox.custom-color .color__label {
  padding-left: 0.4rem;
  flex: 0 0 80%;
}

div#search_filters {
  border: none;
}

div#search_filters p.text-uppercase.h6 {
  color: #009b72;
  font-weight: bold;
  font-size: 18px;
  padding-bottom: 20px;
}

div#search_filters .facet__header {
  text-transform: uppercase;
  color: var(--header-bottom-bg-color);
}

div#search_filters a.icon-collapse.visible--mobile.stretched-link {
  display: none;
}

div#search_filters .custom-color.custom-control,
div#search_filters .custom-control {
  margin-bottom: 13px;
}

.facet__block {
  border-bottom: none !important;
}

.custom-control-label:before {
  border-radius: 4px;
}

div#search_filters span.color {
  border-radius: 50%;
  flex: 1 1 20%;
  max-width: 1.25rem;
}

.color__label {
  font-size: 15px;
  font-weight: bold;
  color: var(--header-bottom-bg-color);
}

/* Faceted Search Style End */

.product-miniature svg.cdpcp-icon-add.cdpcp-compare-btn__icon.cdpcp-compare-btn__icon--add {
  color: var(--submenu-arrow-color);
}

.product-miniature svg:hover {
  color: var(--secondary-bg-color) !important;
}

svg.cdpcp-icon-add.cdpcp-compare-btn__icon.cdpcp-compare-btn__icon--add:hover,
svg.cdpcp-icon-add.cdpcp-compare-btn__icon.cdpcp-compare-btn__icon--remove:hover {
  color: #f26430;
}

.div_hookproductlistreviews.an_wishlist-in svg,
.cdpcp-compare-btn--remove svg {
  color: var(--secondary-bg-color);
}

.product-miniature svg.svg_icon.quotes_icon:hover {
  color: var(--secondary-bg-color) !important;
}

.product-miniature span.cdpcp-compare-btn__text.cdpcp-compare-btn__text--remove {
  display: none;
}

.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 414px) {
  .js-product-miniature .pla_buttons_container a.btn {
    padding: 5px 12px;
  }
}

@media (max-width: 349px) {
  body#category .js-product-miniature .pla_buttons_container a.btn {
    padding: 5px 7px;
  }

  body#category .js-product-miniature .pla_buttons_container a.btn span {
    font-size: 15px;
  }
}

.modal-cart__name {
  color: black;
}

.product-flags {
  top: 10px;
  left: 0.75rem;
}

li.product-flag.on-sale {
  background: #f26430;
  border-radius: 50%;
  padding: 0.8rem 0.45rem 0.8rem 0.45rem;
  font-size: 12px;
  box-shadow: 0 4px 25px 0 rgb(242 100 48 / 50%);
}

.div_inputqtyparent .btn:focus {
  box-shadow: none !important;
}

.visible--mobile.text-right.up {
  margin-top: 15px;
}

a.all-product-link.float-left.float-md-right.h4 {
  padding-left: 15px;
}

.bulk-save-badge {
  background: #ed1d26;
  /* border-radius: 50%; */
  border-radius: 5px;
  padding: 0.8rem 0.45rem 0.8rem 0.45rem;
  font-size: 13px;
  box-shadow: 0 4px 25px 0 #dc3545;
  width: 50px;
  padding: 11px 10px;
  position: absolute;
  top: 10px;
  left: 0.75rem;
  z-index: 1;
}

.bulk-save-badge span {
  display: flex;
  color: #fddd00;
  font-weight: bold;
}

.pla_custom_select_container a.pla_color {
  border-radius: 50%;
}

.btn:not(:disabled):not(.disabled).active:focus,
.btn:not(:disabled):not(.disabled):active:focus {
  box-shadow: none !important;
}

/* ***************************************************** */
/* **************** End Category Page Style **************** */
/* ***************************************************** */

/* ***************************************************** */
/* **************** Start Quickview Style **************** */
/* ***************************************************** */

.modal-content {
  border-radius: 20px;
}

@media (min-width: 992px) {
  .quickview .modal-dialog.modal-lg {
    max-width: 1240px !important;
  }
}

.quickview .modal-body button.btn.cdpcp-compare-btn.btn-secondary.cdpcp-compare-btn--js.cdpcp-compare-btn--add,
.quickview .modal-body button.btn.cdpcp-compare-btn.btn-secondary.cdpcp-compare-btn--js.cdpcp-compare-btn--remove {
  margin: 0 !important;
}

.quickview .modal-header .close {
  float: right;
  font-size: 2.5rem;
  font-weight: 500;
}

.modal-dialog.modal-sm .modal-footer.text-xs-center {
  justify-content: center !important;
}

/* Display Color variants Start */

.clearfix.item_input_container {
  display: flex;
  flex-direction: column;
  position: relative;
  flex-grow: 1;
  max-width: 320px;
}

label.label-color.js-option span.sr-only {
  position: initial;
  padding-left: 25px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.product-variants label.label-color.js-option:not(ul#options label.label-color.js-option) {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  margin-top: 0;
}

.product-variants span.attr-name {
  order: 1;
  text-decoration: none;
  padding-left: 10px;
}

@media (min-width: 350px) and (max-width: 430px) {
  .quickview .modal-body .product-variants span.attr-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 160px;
  }

  .quickview .modal-footer button.btn.cdpcp-compare-btn.cdpcp-compare-btn--no-js.btn-secondary {
    margin: 0 0 !important;
  }
}

.js-drop {
  display: none;
}

.js-option {
  display: inline-block;
}

ul#options {
  border: 1px solid #6b6b6b;
  position: absolute;
  z-index: 3;
  background-color: white;
  width: 100%;
  top: 100%;
  padding: 10px;
  overflow-y: scroll;
  max-height: 300px;
}

span#color-image {
  border-radius: 50%;
  width: 1.2rem;
  height: 1.2rem;

  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
}

.custom-select,
#select-op-btn {
  background: #fff url(../img/down-arrow.svg) no-repeat right 0.75rem center/8px 10px;
  overflow: hidden;
}

/* Display Color variants End */

/* Quickview Right column Style Start */

h1.modal-title {
  text-transform: capitalize;
  font-weight: bold;
}


.modal-body .product-prices {
  display: flex;
  align-items: center;
}

div#lyoshowvatfree {
  margin-top: -20px !important;
  color: var(--reference-label-color);
}


div#lyoshowvatfree span {
  display: none;
}

div#lyoshowvatfree strong {
  padding-right: 3px;
  font-size: 14px !important;
}


.reference-number {
  padding-right: 0;
}

.product-reference .label {
  color: var(--reference-label-color);
  padding-right: 10px;
  font-size: 0.875rem;
  min-width: 58px;
  font-weight: bold;
}



.div_delivery_times span {
  font-weight: initial !important;
  color: #009b72;
  font-size: 0.875rem;
  padding-left: 10px;
}

@media (max-width: 767px) {
  .quickview.show .modal-body .row .col.col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .quickview .modal-body button.btn.btn-primary.add-to-cart.btn-lg.btn-block.btn-add-to-cart.js-add-to-cart {
    padding: 3px 27px 5px 27px;
  }
}

/* Quickview Right column Style End */

/* Variants selector style Start */


body:not(#product) .form-group.product-variants-item.item_select,
body:not(#product) .form-group.product-variants-item.item_color {
  display: flex;
}

body:not(#product) .form-group.product-variants-item.item_select label,
body:not(#product) .form-group.product-variants-item.item_color .label {
  flex: 0 0 25%;
  font-weight: bold;
  color: var(--header-bottom-bg-color);
}

body:not(#product) .form-group.product-variants-item.item_select div,
body:not(#product) .form-group.product-variants-item.item_color select {
  flex-grow: 1;
  max-width: 320px;
}

body:not(#product) .form-group.product-variants-item.item_select div select,
body:not(#product) .form-group.product-variants-item.item_color .custom-select {
  border-radius: 20px;
  border-color: var(--header-bottom-bg-color);
}

/* MZS 2026-06-05 r8 - icon :before blocks DELETED (user said clean up icons, will wire later).
   Layout rules above scoped to body:not(#product) so product detail no longer needs !important
   to defeat 20px radius / 25% label / 320px max-width. Quickview + listing keep their styling. */
/* Variants selector style End */

/* .modal-body button.btn.btn-primary.add-to-cart.btn-lg.btn-block.btn-add-to-cart.js-add-to-cart {
  background-color: var(--secondary-bg-color);
  border-color: var(--secondary-bg-color);
  border-radius: 20px;
  padding: 3px 35px 5px 35px;
  box-shadow: 0 4px 25px 0 rgb(242 100 48 / 50%);
}
*/

.modal-body button.btn.btn-primary.add-to-cart span.span_cart_text {
  text-transform: initial;
  font-size: 17px;
}

.modal-body button.btn.btn-primary.add-to-cart span.icon_container {
  display: none;
}

.modal-body .product-actions label.quantity__label.col-auto.control-label {
  display: none;
}

/* .modal-body .bootstrap-touchspin {
  border-radius: 20px;
  box-shadow: none;
  border-color: var(--header-bottom-bg-color) !important;
  border: 1px solid #c9cccf;
}

.modal-body .bootstrap-touchspin .btn {
  font-size: 20px;
}

.modal-body .bootstrap-touchspin>input {
  max-width: 33px !important;
  border: none !important;
  font-weight: bold !important;
}

.modal-body .bootstrap-touchspin .input-group-btn .btn {
  padding: 2px;
  color: #8c8c8c;
  border-radius: 20px;
  background-color: transparent;
}

.modal-body .product-add-to-cart .qty {
  margin-left: 0;
} */

svg.svg_icon.wishlist_icon.heart_filled.flex-shrink-0.mr-2 {
  color: #f26430;
}

.modal-body button.btn.cdpcp-compare-btn.btn-secondary.cdpcp-compare-btn--js.cdpcp-compare-btn--add,
button.btn.cdpcp-compare-btn.btn-secondary.cdpcp-compare-btn--js.cdpcp-compare-btn--remove {
  color: var(--header-bottom-bg-color);
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
  order: 1;
  padding: 0;
}

.modal-content svg.cdpcp-icon-add.cdpcp-compare-btn__icon.cdpcp-compare-btn__icon--add {
  color: var(--secondary-bg-color);
}

.modal-content button.btn.cdpcp-compare-btn.btn-secondary.cdpcp-compare-btn--js.cdpcp-compare-btn--4177.cdpcp-compare-btn--add {
  background: transparent;
  color: var(--header-bottom-bg-color);
  border: none;
  margin-top: 0 !important;
}

.modal-content svg.cdpcp-icon-add.cdpcp-compare-btn__icon.cdpcp-compare-btn__icon--add,
svg.cdpcp-icon-remove.cdpcp-compare-btn__icon.cdpcp-compare-btn__icon--remove {
  width: 22px;
  height: 22px;
}

.modal-content svg.svg_icon.quotes_icon {
  color: var(--secondary-bg-color) !important;
}

.modal-footer .product-additional-info {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 0px;
  margin-top: 15px;
  gap: 7px;
}

.modal-footer button.fly_to_quote_cart_button.btn.btn-primary {
  position: initial !important;
  top: 0 !important;
  right: 0 !important;
  margin: 0 !important;
}

.modal-footer svg.svg_icon.wishlist-o_icon.heart_empty.flex-shrink-0.mr-2 {
  color: var(--secondary-bg-color);
}

.modal-footer .product-additional-info .an_wishlist-btn-product span.span_favtext {
  font-size: 16px;
}

.quickview .modal-footer {
  justify-content: flex-start !important;
  padding-left: 0 !important;
  border-top: 0;
}

.modal-header {
  border-bottom: 0;
}

.modal-footer button.btn.cdpcp-compare-btn.btn-secondary.cdpcp-compare-btn--js.cdpcp-compare-btn--4175.cdpcp-compare-btn--add {
  margin-top: 0 !important;
}

button.btn.btn-link.btn-zoom.visible-desktop.product-layer-zoom {
  top: 12px; /* MZS 2026-06-16 — was 5px */
  right: 12px; /* MZS 2026-06-16 — was 1px */
  height: 30px;
  padding: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); /* MZS 2026-06-16 — was none */
  color: var(--image-slider-border-color);
  background: white;
  border: 1px solid #e2e0db;
}

/* Image slider Style Start */

.product-thumbs .btn.slick-arrow {
  padding: 0;
  position: initial;
  transform: none;
  border-radius: 50%;
}

.slick-prev {
  left: 0;
}

.slick-arrow {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  z-index: 1;
}

.product-thumbs .slick-list.draggable {
  height: 440px !important;
}

.slick-track {
  opacity: 1;
  height: 1330px !important;
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.product-thumb.slick-slide:not(.slick-active) {
  opacity: 0;
  visibility: hidden;
}

/* MZS 2026-06-16 — on the product detail strip, window the carousel with .slick-list overflow:hidden
   only (whole thumbs now that slide pitch == slick slideWidth). The :not(.slick-active) opacity rule
   above was a band-aid for the old sliver and made thumbs vanish while paging. Scoped to body#product
   so quickview keeps the original behaviour. */
body#product .div_thumbnails .product-thumb.slick-slide:not(.slick-active) {
  opacity: 1 !important;
  visibility: visible !important;
}

.product-thumb.slick-slide {
  webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

/*.slick-vertical .slick-slide {
    float: none;
} 

 .product-thumbs .slick-list.draggable {
    padding-top: 35px;
} */

.div_thumbcontainer div {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 100%;
  transition: background 0.15s;
}

.div_thumbcontainer div>* {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slick-track {
  height: auto !important;
}

@media (min-width: 1200px) {
  .modal-body .images-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
  }

  .modal-body .images-container.has_thumbnails>.div_flagsandimgcontainer {
    max-width: calc(100% - 105px);
  }

  .modal-body .images-container>.div_flagsandimgcontainer {
    flex-grow: 1;
  }

  .modal-body .images-container .product-thumbs {
    width: 95px;
    margin-right: 10px;
    align-items: baseline;
    flex-shrink: 0;
    display: block;
    height: auto;
    justify-content: center;
  }

  .modal-body .images-container .product-thumbs .slick-arrow {
    margin: auto;
  }
}

.slick-list.draggable img.img-fluid {
  border: 1px solid #e2e0db; /* MZS 2026-06-16 — cover image border (was 0); calc(100% - 2px) reserves the 2px */
  max-width: calc(100% - 2px);
  height: auto;
  border-radius: 8px; /* MZS 2026-06-16 — was 20px */
}

.product-thumb {
  padding-bottom: 12px;
}

#product .row {
  padding-top: 0.5rem;
}

.product-thumb.slick-slide {
  height: auto;
}

button.btn.btn-link.slick-next.slick-arrow .material-icons.right {
  z-index: 1;
}

/* MZS 2026-06-10 — horizontal thumbs at ALL viewports (was mobile-only @media max-width:1498px).
   Mirrors the mobile-horizontal CSS overlay pattern: slick stays in its original vertical
   internal state, but CSS overpaints to horizontal so the visual result is a horizontal strip
   below the cover. Cover-image navigation continues via the custom drag-simulation arrows at
   custom.js:835-841 (.div_thumbnails .custom-slick-prev/.custom-slick-next) and via slick
   asNavFor on thumb click (index-based, works regardless of vertical/horizontal transform math). */
body#product .div_thumbnails .images-container.has_thumbnails.vertical-desktop {
  display: block;
}
body#product .div_thumbnails .product-thumbs {
  height: auto !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 12px;     /* gap between cover and thumbs strip */
  min-height: 80px;     /* final height once visible */
}

/* MZS 2026-06-10 r8 — hide thumbs strip until slick fires. display:none keeps the strip
   OUT OF FLOW until .slick-initialized is added (during slick's constructor); the moment
   it's added, this rule stops matching and the strip becomes visible at its final 95px.
   Specificity (5 classes + body#product = 0,1,5) > R1's display:flex (0,1,4); +!important
   ensures the cascade respects the gate even where R1's display:flex !important applies. */
body#product .product-thumbs.js-qv-product-images.visible-desktop.slick__arrow-outside:not(.slick-initialized) {
  visibility: hidden !important;
}
body#product .div_thumbnails .product-thumbs .slick-list.draggable {
  height: initial !important;
  padding-top: 0;
}
/* Stable cover-image width at all viewports — cover stops growing/shrinking between
   vertical-side and horizontal-below states (defeats the modal scope calc at L4773
   and the narrow-desktop scope at L4851-4855 below). */
body#product .div_thumbnails .images-container.has_thumbnails > .div_flagsandimgcontainer {
  max-width: 100% !important;
}

/* MZS 2026-06-10 r2.1 (re-applied after revert) — Pre-init COVER curtain. Gates on
   .slickslider_loaded (added by the JS handler in custom.js right after the .product-thumbs
   init handler, inside setTimeout(1000ms) AFTER slick's constructor finishes its initial
   setPosition). The :first-child stays visible from t=0 → user sees only slide #1 until the
   curtain lifts. Symmetric to the .product-thumbs visibility curtain above (R1). */
body#product .products-imagescover:not(.slickslider_loaded) > *:not(:first-child) {
  display: none;
}

/* Legacy mobile-horizontal rules kept untouched for non-product-page scopes (e.g. quickview at
   ≤1498px which still uses the .images-container.has_thumbnails.vertical-desktop class). */
@media (max-width: 1498px) {
  .images-container.has_thumbnails.vertical-desktop {
    display: block;
  }

  .product-thumbs {
    height: auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product-thumbs .slick-list.draggable {
    height: initial !important;
    padding-top: 0;
  }
}

/* MZS 2026-06-10 — narrow-desktop vertical-side sizing now redundant (cover is full-width above).
   Keep the rule selector but make it a no-op so cover image doesn't oddly shrink at 1200-1299px. */
@media (min-width: 1200px) and (max-width: 1299px) {
  .div_thumbnails .images-container.has_thumbnails>.div_flagsandimgcontainer {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .slick-slider .btn.btn-link.slick-arrow i {
    font-size: 1.4rem !important;
  }
}

.product-thumbs .slick-list.draggable img.thumb.js-thumb {
  border-radius: 50%;
  border: 0;
}

/* Image slider Style End */

.modal-footer button.btn.cdpcp-compare-btn.cdpcp-compare-btn--no-js.btn-secondary {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.modal-footer button.btn.cdpcp-compare-btn.cdpcp-compare-btn--no-js.btn-secondary .cdpcp-icon-add,
button.btn.cdpcp-compare-btn.cdpcp-compare-btn--no-js.btn-secondary .cdpcp-compare-btn__text-add {
  display: block !important;
}

.modal-footer button.btn.cdpcp-compare-btn.cdpcp-compare-btn--no-js.btn-secondary span.cdpcp-compare-btn__text.cdpcp-compare-btn__text--add {
  color: black;
  display: block !important;
}

.modal-footer button.btn.cdpcp-compare-btn.cdpcp-compare-btn--no-js.btn-secondary span.cdpcp-compare-btn__text.cdpcp-compare-btn__text--add {
  color: black;
  display: block !important;
}

.modal-footer button.btn.cdpcp-compare-btn.cdpcp-compare-btn--no-js.btn-secondary {
  display: flex;
  align-items: center;
}

/* ***************************************************** */
/* **************** End Quickview Style **************** */
/* ***************************************************** */

#quantity_wanted[type="number"] {
  -moz-appearance: textfield;
}

/* ***************************************************** */
/* **************** Start Cart Style **************** */
/* ***************************************************** */

#cart .cart-grid.row,
#cart section.product-featuredproducts.featured-products {
  width: 95%;
  max-width: 1550px;
  margin: auto;
}

#cart .card-body a.h5.product-line__title {
  font-size: 1rem;
  font-weight: bold;
}

#cart .card-body p.h6.product-line-reference {
  font-size: 0.875rem;
  color: var(--reference-label-color);
  margin: 0;
}

.cart-product-variants .small {
  font-size: 0.875rem;
  color: var(--reference-label-color)
}

#cart .card-body p.h6.product-line-reference span.label {
  margin: 0;
}

#cart .card-body .cart-product-variants .small span:first-child {
  font-weight: bold;
}

.cart-product-variants {
  display: flex;
}

.cart-product-variants .small:not(:last-child) {
  padding-right: 10px;
}

.bootstrap-touchspin {
  border-radius: 20px;
  box-shadow: none;
  border-color: #999999;
}

.bootstrap-touchspin .btn {
  font-size: 20px;
  z-index: 0; /* MZS 2026-06-22 - keep qty stepper below the bulk/pack badge popover (z-index 300) */
}

.bootstrap-touchspin>input {
  max-width: 33px !important;
  border: none !important;
  font-weight: bold !important;
}

.bootstrap-touchspin .input-group-btn .btn {
  padding: 2px;
  color: #8c8c8c;
  border-radius: 20px;
  background-color: transparent;
}

.bootstrap-touchspin .input-group-btn .btn:hover {
  background-color: transparent;
}

#cart .bootstrap-touchspin .input-group-btn {
  min-width: 25px;
}

#cart .bootstrap-touchspin>input {
  min-height: 40px;
}


#cart .div_qty {
  padding: 0 7px;
}

body#cart .product-line-grid.row.no-gutters .product-line-actions {
  flex-wrap: wrap;
  align-items: start;
}

#cart span.product-price {
  font-size: 1.25rem;
}

#cart a.label.btn.btn-outline-primary,
.cart-grid-body.col-12.col-lg-9 a.label {
  background: transparent;
  color: #0072bc;
  font-weight: bold;
  border: none;
}

#cart .cart-buttons {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
}

#cart .cart-buttons .delete-all-products-button .btn-delete-all-products {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 15px;
}

@media screen and (max-width: 991px) {
  #cart .cart-buttons .delete-all-products-button .btn-delete-all-products {
    margin: 0px;
    font-size: 16px;
    padding: 5px 10px;
  }

  #cart a.label.btn.btn-outline-primary {
    padding: 5px;
  }
}

#cart .card {
  border-radius: 12px;
}

#cart h3.card-header {
  font-weight: bold;
  color: var(--header-bottom-bg-color);
  border-bottom: none;
  background-color: transparent;
  border-radius: 20px;
  text-align: center;
  font-size: 1.25rem;
}

#cart .card.cart-summary.mb-5 {
  border: none;
  background-color: white;
  border-radius: 15px;
}

#cart .card-footer {
  border: none;
  background: transparent;
}

#cart .cart-summary-line.cart-total {
  background: transparent;
}

#cart .cart-summary-line.cart-total {
  align-items: center;
}

#cart .cart-summary-line.cart-total span.label {
  font-size: 1.2rem;
}

body#cart .cart-footer-info {
  padding-top: 20px;
}

#cart footer#footer {
  margin: 0;
  padding: 0;
}

.checkout-steps-container {
  width: 95%;
  max-width: 1630px;
  margin: auto;
  padding-bottom: 50px;
  padding-top: 15px;
}

.checkout-steps-icons {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.checkout-step1 {
  padding: 17px 20px 17px 20px;
  background: var(--secondary-bg-color);
  border-radius: 50%;
  position: relative;
}

.checkout-step2,
.checkout-step3 {
  padding: 17px 19px 17px 19px;
  background: #c4c4c4;
  border-radius: 50%;
  position: relative;
}

.icon-connecter {
  position: absolute;
  border-top: 2px dashed #c4c4c4;
  width: 100%;
  top: 46px;
  z-index: 1;
  width: 90%;
  max-width: 1630px;
}

.checkout-steps-icons div span {
  position: absolute;
  right: 0;
  left: 0;
  top: 100%;
  min-width: 92px;
  display: block;
  font-size: 14px;
  font-weight: bold;
}

.checkout-step1 span {
  padding-left: 10px;
}

@media (min-width: 1200px) {
  .checkout-step1 span {
    padding-left: 6px;
  }

  .checkout-steps-icons div span {
    font-size: 16px;
  }
}

#cart .checkout-steps-icons .checkout-step2 span,
#cart .checkout-steps-icons .checkout-step3 span {
  color: #c4c4c4;
}

#cart span.span_titletext {
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  color: var(--header-bottom-bg-color);
}

#cart span.span_titletext:after {
  content: "";
  display: block;
  width: 75px;
  border-bottom: 4px solid #0072bc;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
}

p.h3.product-title:hover {
  color: var(--header-bottom-bg-color);
}

@media (max-width: 991px) {
  #cart .cart-grid-right.col-12.col-lg-3.mt-3.mt-lg-0 {
    order: 1;
  }

  #cart .cart-grid-body.col-12.col-lg-9 {
    order: 2;
  }

  .checkout-steps-container {
    width: 85%;
  }

  .icon-connecter {
    width: 81%;
  }
}

@media (max-width: 767px) {

  body#cart .product-line-grid.row.no-gutters .media,
  body#cart .product-line-grid.row.no-gutters .media .cart-product-variants {
    flex-wrap: wrap;
  }

  body#cart .product-line-grid.row.no-gutters .media img {
    width: initial;
    margin: auto;
  }

  body#cart .product-line-grid.row.no-gutters .media .media-body {
    flex: 0 0 100%;
    width: 100%;
    padding-top: 12px;
  }

  body#cart .product-line-grid.row.no-gutters .product-line-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 991.98px) {
  .checkout {
    position: initial;
    background-color: transparent;
  }
}

@media (max-width: 1199px) {

  .cart-product-variants,
  #cart .cart-footer-info ul li {
    padding-left: 0;
  }
}

body#cart .cart-items .form-control {
  padding: 0.375rem 0;
}

body#cart .cart-items input.form-control {
  width: 60px !important;
}

body#cart .cart-content-titles {
  padding-bottom: 8px;
}

body#cart .cart-content-titles span {
  font-weight: bold;
}

body#cart .cart-item .product-line-info.product-price {
  flex-direction: column;
  align-items: start;
}

@media (min-width: 1184px) {
  body#cart .cart-content-titles {
    display: flex !important;
  }
}

/* ***************************************************** */
/* **************** End Cart Style **************** */
/* ***************************************************** */

/* ***************************************************** */
/* **************** Start Additional Pages Style **************** */
/* ***************************************************** */

#contact .contact-rich h4 {
  text-transform: uppercase;
  font-weight: bold;
  color: var(--header-bottom-bg-color);
  margin-bottom: 2rem;
}

#contact .contact-rich a {
  color: #007bff;
}

#contact .contact-rich a:hover {
  text-decoration: underline;
}

#contact .contact-rich .block {
  display: flex;
  gap: 12px;
}

#contact .contact-rich .material-icons {
  font-size: 2rem;
}

#contact form.js-customer-form.needs-validation {
  display: flex;
  flex-direction: column;
}

#contact section.form-fields {
  order: -1;
}

#contact h1.text-center {
  font-weight: bold;
  color: var(--header-bottom-bg-color);
}

#contact input.btn.btn-primary {
  background: var(--secondary-bg-color);
  border: none;
}

h2.page-heading {
  color: var(--header-bottom-bg-color);
  font-weight: bold;
}

ul.page-list.clearfix.text-sm-center {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

#cms h3 {
  font-weight: bold;
}

@media (max-width: 991px) {
  body#cms .page-content.page-content--cms iframe {
    max-width: 100%;
    /* height: auto; */
  }
}

/* Start My Account page Style */

.page-content .row .row.account-links {
  flex-direction: column;
}

.account-links>a {
  flex: 0;
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.account-links .link-item {
  padding: 0;
  text-transform: initial;
  display: block;
  text-align: start;
  border: none;
  color: var(--header-bottom-bg-color);
}

.account-links .link-item svg {
  fill: var(--header-bottom-bg-color);
}

body#identity form#customer-form,
body#address form.needs-validation {
  margin-left: 0;
}

header.page-header.my-account {
  border: none;
}

header.page-header.my-account h1.h1.page-title span {
  color: #0072bc;
  font-size: 18px;
}

.my-account-page-content {
  border-left: 1px solid #d5d5d5;
  padding-left: 50px;
}

.my-account-page-content h2 {
  padding-bottom: 20px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--header-bottom-bg-color);
}

.account-links .link-item svg {
  margin-right: 10px;
}

.page-content .row .row.account-links .text-sm-center {
  padding: 5px 8px 20px 8px;
}

.page-content .row .row.account-links .text-sm-center a:hover {
  text-decoration: underline;
}

label.required:after {
  content: "*";
  color: var(--secondary-bg-color);
  font-weight: bold;
}

body#identity span.input-group-btn {
  position: absolute;
  right: 18px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 3;
}

#identity button.btn.btn-light {
  background: transparent;
  margin-left: 5px;
  padding: 0;
  height: auto;
  margin-top: 7px;
}

.row.account-links span.link-item:hover svg,
.row.account-links a.active svg {
  fill: var(--home-banner-image-hover-color);
}

.row.account-links span.link-item:hover,
.row.account-links a.active .link-item {
  color: var(--home-banner-image-hover-color);
}

@media (min-width: 576px) and (max-width: 1199px) {
  .my-account-page-content {
    padding-left: 35px !important;
  }
}

@media (min-width: 576px) and (max-width: 1086px) {
  .row.account-links {
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }

  .my-account-page-content {
    flex: 0 0 60% !important;
    max-width: 60% !important;
  }

  header.page-header.my-account .page-header h1 {
    padding-right: 0;
  }
}

@media (max-width: 575px) {
  .my-account-page-content {
    border: none;
  }
}

body#identity section.form-fields .form-group small.form-text.text-muted {
  display: none;
}

body#identity section.form-fields .form-group label,
body#identity section.form-fields .form-group .label {
  color: grey;
}

.row.account-links .link-item i {
  margin: 0;
  font-size: 1.4rem;
}

@media (min-width: 700px) {
  body#identity section.form-fields .form-group label {
    flex: 1 0 28%;
  }

  body#address section.form-fields .form-group label {
    flex: 1 0 38%;
  }
}

/* End My Account page Style */

footer.page-footer a span:hover {
  text-decoration: underline;
}

.products .card-product:hover .product-title,
.card-product:hover .product-title a {
  color: black;
}

/* Start Thank you page Style */

body#order-confirmation section#content-hook_order_confirmation .card-title {
  margin: 0;
  color: #f26430;
  text-transform: initial;
  padding-bottom: 8px;
  font-size: 27px;
}

body#order-confirmation .card-body span {
  font-size: 19px;
}

body#order-confirmation section#content-hook_order_confirmation .card-body {
  padding: 0.5rem 1rem 1.2rem 1rem;
  border-bottom: 1px solid #e5e5e5;
}

.display-not-fullwidth {
  width: 95%;
  max-width: 1700px;
  margin: auto;
}

body#order-confirmation section#content-hook_payment_return {
  border: none;
}

body#order-confirmation .order-summary-container {
  border: 2px solid #e5e5e5;
  padding: 10px 10px 20px;
}

body#order-confirmation section#content-hook_order_confirmation .card-body {
  text-align: center;
}

body#order-confirmation section#content-hook_order_confirmation {
  background: white !important;
  border: none;
}

body#order-confirmation .page-content.page-order-confirmation.card,
body#order-confirmation .page-content.page-order-confirmation.card .order-confirmation-table {
  border: none;
}

body#order-confirmation .page-content.page-order-confirmation.card {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

body#order-confirmation .page-content.page-order-confirmation.card .order-summary-container {
  flex: 70%;
  max-width: 70%;
}

body#order-confirmation .page-content.page-order-confirmation.card #order-details {
  flex: 100%;
  max-width: 100%;
}

body#order-confirmation .order-details-container {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex: 28%;
  max-width: 28%;
  border: 2px solid #e5e5e5;
  padding: 15px;
  width: 100%;
}

body#order-confirmation .order-confirmation-table span.image img {
  max-width: 60px;
}

body#order-confirmation div#order-items h3.table__title-head,
body#order-confirmation div#order-details h3 {
  font-weight: bold;
  color: var(--secondary-bg-color);
  font-size: 18px;
}

body#order-confirmation div#order-details {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

body#order-confirmation div#order-details div {
  flex: 50%;
  max-width: 50%;
}

body#order-confirmation span.thank-you-msg {
  display: block;
  padding: 10px;
  font-weight: bold;
  font-size: 18px;
}

body#order-confirmation .order-summary-container .total-value {
  background: white;
  border-top: 1px solid #e5e5e5;
}

body#order-confirmation .order-confirmation-table .qty {
  flex-grow: 1;
}

body#order-confirmation .order-confirmation-table .qty .row {
  justify-content: space-between;
}

body#order-confirmation section#content-hook-order-confirmation-footer {
  padding: 30px 0;
  background: rgba(196, 196, 196, 0.15);
}

body#order-confirmation section#content-hook-order-confirmation-footer span.order-conf-footer-title {
  font-size: 25px;
  font-weight: bold;
  display: block;
  text-align: center;
  padding: 0 0 30px 0;
}

body#order-confirmation .order-confirmation-page-footer,
body#order-confirmation .order-confirmation-page-footer div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

body#order-confirmation .order-confirmation-page-footer div {
  flex-direction: column;
  align-items: center;
  flex: 25%;
  max-width: 25%;
}

body#order-confirmation .order-confirmation-page-footer span {
  padding: 20px 20px;
  text-align: center;
  color: #000000;
  font-weight: bold;
  flex-grow: 1;
  max-width: 234px;
}

body#order-confirmation footer#footer {
  padding-top: 0;
  margin-top: 0;
}

body#order-confirmation .order-summary-container table.table.table-borderless tr td:first-child {
  float: right;
}

body#order-confirmation .order-confirmation-table .order-line.row .prod-price {
  min-width: 90px;
}

body#order-confirmation div#order-delivery-method,
body#order-confirmation div#order-payment-method {
  border-top: 1px solid #e5e5e5;
  padding: 15px 0;
}

@media (max-width: 1023px) {

  body#order-confirmation .page-content.page-order-confirmation.card .order-summary-container,
  body#order-confirmation .page-content.page-order-confirmation.card .order-details-container {
    flex: 100%;
    max-width: 100%;
  }

  body#order-confirmation div.order-details-container {
    justify-content: space-between;
    padding-left: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
  }

  body#order-confirmation div#order-details div#order-delivery-method,
  div#order-payment-method {
    margin-top: 20px;
  }

  #header .quotes_cart .header {
    padding: 0 !important;
  }
}

@media (max-width: 699px) {
  body#order-confirmation .order-confirmation-page-footer span {
    padding: 20px 10px;
  }

  body#order-confirmation .order-confirmation-page-footer div {
    flex: 50%;
    max-width: 50%;
  }
}

@media (max-width: 414px) {
  body#order-confirmation .order-confirmation-page-footer svg {
    width: 38px;
  }

  body#order-confirmation section#content-hook-order-confirmation-footer span.order-conf-footer-title {
    font-size: 22px;
  }
}

/* End Thank you page Style */

/* Start Case Studies Style */
.case-study-container h4 a {
  font-weight: bold;
}

.case-studies-container>div {
  position: relative;
  float: left;
  margin: 10px;
}

.case-studies-container .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: #102747;
}

.case-studies-container .text {
  color: #fff;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 200px;
}

@media (max-width: 991px) and (min-width: 525px) {
  .case-studies-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .case-study-container {
    width: 46%;
  }
}

@media (max-width: 524px) {
  .case-study-container {
    width: 100%;
  }
}

.case-studies-container .text a:link {
  color: #fff;
}

.case-studies-container .text a:link,
.case-studies-container .text span,
.case-studies-container .text a {
  color: #fff;
}

.case-studies-container .case-study-container:hover .overlay {
  opacity: 0.7;
}

@media (min-width: 992px) {
  .case-studies-container>div {
    width: calc(25% - 20px);
    padding-right: 1px;
    padding-bottom: 1px;
    margin-bottom: 0;
  }
}

@media (max-width: 414px) {
  .case-studies-container .text {
    width: 100%;
  }
}

/* End Case Studies Style */

/* Start Card Payment Style */

body#module-firstdatapaymentgateway-paymentform #header .header-nav.u-bor-bot,
body#module-firstdatapaymentgateway-paymentform #header div#_desktop_searchbarcontainer,
body#module-firstdatapaymentgateway-paymentform #header .header-top .header__right,
body#module-firstdatapaymentgateway-paymentform #header .div_header_bottom,
body#module-firstdatapaymentgateway-paymentform #header .div_search_mobile.visible--mobile.visible-mobile-always,
body#module-firstdatapaymentgateway-paymentform #footer {
  display: none !important;
}

body#module-firstdatapaymentgateway-paymentform #header .container.header-top.d--flex-between.py-0 {
  justify-content: flex-start !important;
}

body#module-firstdatapaymentgateway-paymentform header#header {
  box-shadow: none;
  border: none;
}

body#module-firstdatapaymentgateway-paymentform img.logo.img-fluid {
  max-width: 88%;
}

body#module-firstdatapaymentgateway-paymentform .header__logo {
  padding-bottom: 0 !important;
}

body#module-firstdatapaymentgateway-paymentform .checkout-steps-container {
  width: 98%;
}

body#module-firstdatapaymentgateway-paymentform .checkout-steps-container {
  padding-bottom: 20px;
}

body#module-firstdatapaymentgateway-paymentform .icon-connecter-first {
  position: absolute;
  border-top: 2px dashed #f26430;
  width: 100%;
  top: 54px;
  z-index: 1;
  width: 44%;
  left: 5%;
}

body#module-firstdatapaymentgateway-paymentform .icon-connecter-second {
  position: absolute;
  border-top: 2px dashed #c4c4c4;
  width: 100%;
  top: 54px;
  z-index: 1;
  width: 44%;
  right: 5%;
}

@media (max-width: 991px) {
  body#module-firstdatapaymentgateway-paymentform .checkout-steps-container {
    width: 90%;
  }

  body#module-firstdatapaymentgateway-paymentform .icon-connecter-first {
    left: 7%;
  }

  body#module-firstdatapaymentgateway-paymentform .icon-connecter-second {
    right: 7%;
  }
}

@media (max-width: 767px) {
  body#module-firstdatapaymentgateway-paymentform .cart-summary-block #main {
    margin-right: 20px;
  }
}

body#module-firstdatapaymentgateway-paymentform .checkout-step3 span {
  color: #c4c4c4;
}

body#module-firstdatapaymentgateway-paymentform .checkout-step2 {
  background: var(--secondary-bg-color);
}

body#module-firstdatapaymentgateway-paymentform .cart-detailed-totals .card-block {
  border: none;
}

body#module-firstdatapaymentgateway-paymentform #main .cart-grid.row.justify-content-center,
body#module-firstdatapaymentgateway-paymentform #main .card-block {
  background: #f6f6f6;
}

body#module-firstdatapaymentgateway-paymentform #main .cart-detailed-totals .card-block:last-child {
  border-radius: 0 0 20px 20px;
  padding-top: 0;
}

body#module-firstdatapaymentgateway-paymentform #main .cart-detailed-totals .card-block:first-child {
  padding-bottom: 0;
}

body#module-firstdatapaymentgateway-paymentform .cart-summary-line.cart-total.cart-total-tax-included .label {
  font-size: 18px;
}

/* End Card Payment Style */

/* Start Quotes page style */
body#module-askforaquotepro-QuotesCart .quoteSubmitOptions.clearfix small.form-text.text-muted,
body#module-askforaquotepro-QuotesCart div#checkout-guest-form form#customer-form section.form-fields div.form-group:first-child {
  display: none;
}

body#module-askforaquotepro-QuotesCart .quoteSubmitOptions.clearfix .form-group {
  display: flex;
}

body#module-askforaquotepro-QuotesCart .quoteSubmitOptions.clearfix .form-group input.form-control:not(body#module-askforaquotepro-QuotesCart .quoteSubmitOptions.clearfix .form-group input.form-control.js-visible-password) {
  flex: 0 0 70%;
}

body#module-askforaquotepro-QuotesCart .quoteSubmitOptions.clearfix .form-group label {
  flex: 0 0 30%;
}

body#module-askforaquotepro-QuotesCart .quoteSubmitOptions.clearfix a.nav-link.active {
  font-weight: bold;
  text-decoration: underline;
}

body#module-askforaquotepro-QuotesCart .quoteSubmitOptions.clearfix .nav-link {
  display: block;
  padding: 0.2rem 1rem;
}

body#module-askforaquotepro-QuotesCart h1.h1 {
  font-weight: bold;
}

body#module-askforaquotepro-QuotesCart div#quotes-detail-content .product-line-grid.row .product-line-grid-right>.row {
  width: 100%;
}

body#module-askforaquotepro-QuotesCart div#quotes-detail-content .input-group.bootstrap-touchspin.ASFcountInputInner {
  max-width: 88px;
}

@media (min-width: 464px) and (max-width: 767px) {
  body#module-askforaquotepro-QuotesCart div#quotes-detail-content .product-line-grid-right .row {
    flex-wrap: nowrap;
  }
}

@media (max-width: 463px) {
  body#module-askforaquotepro-QuotesCart div#quotes-detail-content .product-line-grid-right>.row {
    flex-wrap: nowrap;
    align-items: baseline;
  }

  body#module-askforaquotepro-QuotesCart div#quotes-detail-content .product-line-grid-right .row .row {
    gap: 10px;
  }

  .product-line-actions .product-price {
    margin: 0 0.8rem;
  }
}

@media (max-width: 767px) {
  body#module-askforaquotepro-QuotesCart div#quotes-detail-content .product-line-grid-body {
    margin-left: 15px;
    margin-right: 15px;
  }
}

@media (max-width: 470px) {
  body#module-askforaquotepro-QuotesCart .quoteSubmitOptions.clearfix .form-group {
    display: block;
  }
}

/* End Quotes page style */

#thecheckout-address-delivery .customer-addresses {
  display: none;
}

/* MZS 2026-06-12 — checkout redesign: legacy inner-area/confirm paddings removed;
   checkout styling now lives in themes/guttercentre/modules/thecheckout/views/css/custom.css */

@media (min-width: 992px) {
  body#module-thecheckout-order .blocks.checkout-area-8.width-below-50pct.width-below-70pct {
    height: inherit !important;
  }
}

/* MZS 2026-06-12 — checkout redesign r2: grey header backgrounds removed; the
   checkout header treatment now lives in the thecheckout override custom.css */

#module-thecheckout-order .sticky {
  position: relative;
  box-shadow: none;
}

/* MZS 2026-06-12 — checkout redesign: legacy block-header (22px/2px border),
   form-control sizing and customer-logged padding rules removed — replaced by
   themes/guttercentre/modules/thecheckout/views/css/custom.css */

/* ***************************************************** */
/* **************** End Additional Pages Style **************** */
/* ***************************************************** */

/* ***************************************************** */
/* **************** Start CMS Pages Style **************** */
/* ***************************************************** */

#cms #content #testimonials li {
  text-transform: uppercase;
  text-align: center;
  padding: 5px 15px 40px;
}

.material-design-google125:before {
  content: "\f10e";
}

#cms #content #testimonials li:before {
  font-size: 27px;
  line-height: 1em;
  color: #fff;
  margin: 0 auto 38px;
  text-align: center;
  width: 55px;
  height: 55px;
  background: #102747;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cms #content #testimonials li p {
  margin-bottom: 33px;
  color: #7587a1;
  font-weight: 500;
  line-height: 28px;
}

#cms #content .btn.btn-default {
  border-color: #f26430;
  min-width: 6.4375rem;
  border-width: 0.125rem;
  font-weight: bold;
}

#cms #content .btn.btn-default:hover {
  background: #044c7c;
  color: white;
  border-color: #044c7c;
}

body#cms .bx-wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 30px !important;
}

body#cms .bx-pager.bx-default-pager {
  padding-bottom: 20px;
}

body.cms-id-11 section.page-cms-11 {
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 1300px) {
  body.cms-id-11 section#content div:not(div.overlay) {
    width: calc(33.333333% - 20px);
  }
}

@media (min-width: 768px) and (max-width: 1299px) {
  body.cms-id-11 section#content div:not(div.overlay) {
    width: calc(50% - 20px);
  }
}

@media (max-width: 767px) {
  body.cms-id-11 section#content div:not(div.overlay) {
    width: calc(100% - 20px);
  }
}

@media (max-width: 414px) {
  body#cms .page-content.page-content--cms iframe {
    height: auto;
  }
}

body.cms-id-11 section#content div:not(div.overlay) {
  padding-right: 1px;
  padding-bottom: 1px;
  margin-bottom: 0;
  float: left;
  margin: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

body.cms-id-11 section#content h3 {
  flex-grow: 1;
  height: 45px;
}

body.cms-id-11 section#content iframe,
body.cms-id-11 section#content .position-relative {
  width: 100% !important;
}

body.cms-id-11 section#content .position-relative .overlay {
  position: absolute;
  inset: 0;
  background-color: #102747c2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}

body.cms-id-11 section#content>div:hover .overlay {
  opacity: 0;
  z-index: -1;
}

/* ***************************************************** */
/* **************** End CMS Pages Style **************** */
/* ***************************************************** */

.row.account-links a#discounts-link {
  display: none;
}

li.product-flag.new {
  padding: 0.7rem 0.3rem;
  background: #f26430;
  border-radius: 50%;
  font-size: 14px;
}

@media (max-width: 767px) {
  .media img.product-image.modal-cart__image.img-fluid {
    max-width: 120px !important;
  }
}

.custom-control.custom-checkbox.custom-color.custom-control--active label.custom-control-label span {
  background: #d5d5d5;
}

body#sitemap a#supplier-page,
body#sitemap a#stores-page {
  display: none;
}

/*  */
input.ssa-search-query.ssa-search-query-input.form-control:not(.ui-autocomplete-input) {
  border: 1px solid var(--searchbar-border-color);
  border-radius: 10px;
}

body#index .video-title_block:after {
  content: "";
  display: block;
  width: 75px;
  border-bottom: 4px solid #0072bc;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
}

body#index .family-business .col1,
body#index .family-business .col2,
body#index .family-business .col3 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
  display: flex;
  flex-direction: column;
}

body#index .family-business iframe {
  width: 100%;
  padding: 0 10px;
}

body#index .family-business .text-center {
  flex-grow: 1;
}

@media (max-width: 767px) {
  .text-center span {
    font-size: 16px !important;
  }
}

@media (max-width: 500px) {
  body#index .family-business {
    flex-wrap: wrap;
  }

  body#index .family-business .col1,
  body#index .family-business .col2,
  body#index .family-business .col3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  body#index .family-business iframe {
    width: auto;
    height: auto;
  }
}

.card-product.card .discount {
  display: block;
  border-radius: 5px;
}

.product-miniature:has(.bulk-save-badge) .card-product.thumbnail-container .product-flags {
  top: 63px;
}

li.product-flag.discount {
  background: #eb1d26;
  border-radius: 5px;
}

/* ***************************************************** */
/* **************** new category changes *************** */
/* ******************** (2023-03-14) ******************* */
body#category {
  background: #ededed;
}

.span_showmoreless_fade {
  /* background: linear-gradient(0deg, #ededed, rgba(255,255,255,0)); */
  background: linear-gradient(0deg, #ffffff, rgba(255, 255, 255, 0));
}

#category .category-container-top .breadcrumb {
  margin-bottom: 1rem;
}

@media (min-width: 1200px) {
  #category .category_header {
    font-size: 32px;
  }
}

.category_custom_nav_tabs_container .nav-tabs {
  border-bottom: none;
  column-gap: 3%;
  row-gap: 5px;
  flex-wrap: wrap;
}

.category_custom_nav_tabs_container .nav-tabs .nav-item {
  margin-bottom: 0;
}

.category_custom_nav_tabs_container .nav-tabs .nav-item:only-child {
  display: none;
}

.category_custom_nav_tabs_container .nav-tabs .nav-link {
  border-bottom-width: 3px;
  color: inherit;
  background: transparent;
}

.category_custom_nav_tabs_container .nav-tabs .nav-link:hover {
  border-color: transparent transparent #d1d1d1;
}

.category_custom_nav_tabs_container .nav-tabs .nav-link.active {
  border-bottom-color: var(--secondary-bg-color);
}

.category_custom_nav_tabs_container #category-downloads .category-downloads {
  display: grid;
  /* grid-template-columns: repeat(4, 1fr); */
  /* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  column-gap: 15px;
  row-gap: 15px;
}

@media (max-width: 767px) {
  .category_custom_nav_tabs_container #category-downloads .category-downloads {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.category_custom_nav_tabs_container #category-downloads .attachment_name {
  color: var(--header-bottom-bg-color);
  font-weight: bold;
}

.category_custom_nav_tabs_container #category-downloads .attachment_name:hover {
  color: var(--btn-hover-bg-color);
}

.category_custom_nav_tabs_container #category-downloads .attachment {
  column-gap: 5px;
  justify-self: center;
}

.category_custom_nav_tabs_container #category-downloads .attachment_download {
  font-size: 13px;
  color: rgba(65, 64, 66, 0.5);
  padding-top: 4px;
}

.category_custom_nav_tabs_container #category-downloads .attachment>.attachment_name {
  width: 35px;
}

.category_custom_nav_tabs_container #category-projects .category-projects {
  column-gap: 15px;
  row-gap: 15px;
}

.category_custom_nav_tabs_container #category-projects .category-projects .category-project {
  width: 140px;
  display: block;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

.category_custom_nav_tabs_container #category-projects .category-projects .category-project:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-image:linear-gradient(to bottom, rgba(0, 114, 188, 0), var(--home-banner-image-hover-color)); */
  opacity: 0.85;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  z-index: 1;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset,
    rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.category_custom_nav_tabs_container #category-projects .category-projects .category-project:hover:before {
  inset: 0;
  opacity: 1;
  box-shadow: none;
}

#category div#subcategories {
  padding-bottom: 10px;
  border-top: none;
}

#category div#subcategories .subcategory_title {
  font-weight: bold;
  text-transform: capitalize;
}

#category div#subcategories .subcategory_title_container,
#category div#subcategories ul {
  /* display: grid !important; */
  /* grid-template-columns: repeat(5, 1fr); */
  /* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */
  column-gap: 15px;
  row-gap: 15px;
  margin-bottom: 0;
}

#category div#subcategories .subcategory_title_container {
  row-gap: 0;
}

#category div#subcategories .subcategory-placeholder:first-child {
  flex: 0 0 calc(28.3333333333% - 12px);
  max-width: calc(28.3333333333% - 12px);
}

#category div#subcategories .subcategory-placeholder:first-child+.subcategory-placeholder {
  flex: 0 0 calc(5% - 12px);
  max-width: calc(5% - 12px);
}

#category div#subcategories .subcategory-placeholder {
  width: auto;
  flex: 0 0 calc(16.6666666667% - 13px);
  max-width: calc(16.6666666667% - 13px);
}

#category div#subcategories ul:after {
  display: none;
}

#category div#subcategories ul.clearfix.d-flex.flex-wrap li {
  width: auto;
  /* padding: 10px 5px 5px; */
  padding: 0;
  /* padding: 10px; */
  /* flex: 0 0 calc(20% - 12px);
    max-width: calc(20% - 12px); */
  /* MZS 2026-05-19 review-batch A7: 5 tiles per row (was 6) for bigger tiles */
  flex: 0 0 calc(20% - 13px);
  max-width: calc(20% - 13px);
  /* max-width: 100%; */

  /* background: white; */
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 10px;
  overflow: hidden;
  /* MZS 2026-05-13 - section 1 tidy: home-page-matching drop-shadow. MZS 2026-05-18 r3: toned down. */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

#category div#subcategories ul.clearfix.d-flex.flex-wrap li:hover {
  border-color: var(--secondary-bg-color);
}

#category div#subcategories ul li .div_subcategory_container {
  height: 100%;
}

/* MZS 2026-05-18 section 3 item 3.6: tile label left-aligned, smaller font, no enforced min-height (more square + compact). */
#category div#subcategories ul li a.subcategory-name {
  width: 100%;
  max-width: 100%;
  background: var(--header-bottom-bg-color);
  display: flex;
  align-items: start;
  justify-content: flex-start;
  color: white;
  text-align: left;
  text-transform: none;
  min-height: auto;
  /* MZS 2026-05-19 review-batch A7: bigger label padding + font for bigger tiles */
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

@media (min-width: 1200px) {
  #category div#subcategories .subcategory_title {
    /* font-size: 2rem; */
    font-size: 1.775rem;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  #category div#subcategories .subcategory-placeholder:first-child {
    flex: 0 0 calc(35% - 12px);
    max-width: calc(35% - 12px);
  }

  #category div#subcategories .subcategory-placeholder:first-child+.subcategory-placeholder {
    flex: 0 0 calc(5% - 12px);
    max-width: calc(5% - 12px);
  }

  #category div#subcategories .subcategory-placeholder,
  #category div#subcategories ul.clearfix.d-flex.flex-wrap li {
    flex: 0 0 calc(20% - 12px);
    max-width: calc(20% - 12px);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {

  /* #category div#subcategories ul {
        grid-template-columns: repeat(4, 1fr);
    } */
  #category div#subcategories .subcategory-placeholder:first-child {
    flex: 0 0 calc(45% - 12px);
    max-width: calc(45% - 12px);
  }

  #category div#subcategories .subcategory-placeholder:first-child+.subcategory-placeholder {
    flex: 0 0 calc(5% - 12px);
    max-width: calc(5% - 12px);
  }

  #category div#subcategories .subcategory-placeholder,
  #category div#subcategories ul.clearfix.d-flex.flex-wrap li {
    flex: 0 0 calc(25% - 12px);
    max-width: calc(25% - 12px);
  }
}

@media (min-width: 576px) and (max-width: 991px) {

  /* #category div#subcategories ul {
        grid-template-columns: repeat(3, 1fr);
    } */
  #category div#subcategories .subcategory-placeholder:first-child {
    flex: 0 0 calc(61.3333% - 12px);
    max-width: calc(61.3333% - 12px);
  }

  #category div#subcategories .subcategory-placeholder:first-child+.subcategory-placeholder {
    flex: 0 0 calc(5.3333% - 12px);
    max-width: calc(5.3333% - 12px);
  }

  #category div#subcategories .subcategory-placeholder,
  #category div#subcategories ul.clearfix.d-flex.flex-wrap li {
    flex: 0 0 calc(33.3333% - 12px);
    max-width: calc(33.3333% - 12px);
  }
}

@media (max-width: 575px) {

  /* #category div#subcategories ul {
        grid-template-columns: repeat(2, 1fr);
    } */
  #category div#subcategories .subcategory-placeholder:first-child {
    flex: 0 0 calc(95% - 12px);
    max-width: calc(95% - 12px);
  }

  #category div#subcategories .subcategory-placeholder:first-child+.subcategory-placeholder {
    flex: 0 0 calc(5% - 12px);
    max-width: calc(5% - 12px);
  }

  #category div#subcategories .subcategory-placeholder,
  #category div#subcategories ul.clearfix.d-flex.flex-wrap li {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

/* MZS 2026-05-18 section 3 item 3.6: cap image area at 100px tall (matches reference). Image fits inside via object-fit. */
#category div#subcategories img {
  border-radius: 0;
  border: none !important;
  border-color: white;
  background-color: white;

  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: 100%
}
#category div#subcategories ul li .div_subcategory_container > a.img {
  display: flex;
  /* MZS 2026-05-19 review-batch A7: taller image area (was 100px) */
  height: 140px;
  background: #f6f5f2;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#js-product-list-top .sort-by-row>.form-inline {
  display: none;
}

@media (max-width: 767px) {
  body#category #_desktop_reassurance {
    margin: 0;
  }
}

body#category .plisttop {
  padding: 1rem 1rem 0.75rem;
  background: transparent;
}

body#category div#js-product-list-top {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

#js-product-list-top>.total-products .small {
  width: auto;
  max-width: unset;
  flex-basis: auto;
}

body#category #cdpcp-go-to-compare-form {
  display: none;
}

body#category .prods {
  margin-top: 25px;
}

body#category #select-sort-order {
  border-radius: var(--items-border-radius);
}

@media (min-width: 768px) {
  body#category #left-column div#search_filters .left_col_title p.text-uppercase.h6 {
    margin-bottom: 30px;
    font-size: 26px;
    padding-bottom: 10px;
  }

  body#category div#search_filters {
    padding-right: 0;
    padding-left: 0;
    background: transparent;
  }

  body#category .facet__block {
    border: 1px solid #c8c8c8 !important;
    padding: 0.6rem;
    background: white;
    border-radius: 15px;
  }
}

@media (max-width: 575px) {
  #js-product-list-top>.total-products {
    padding-bottom: 10px;
    text-align: center;
  }
}

body#category .footer-container {
  padding-top: 0;
}

div#search_filters p.text-uppercase.h6 {
  text-transform: initial !important;
}

div#search_filters .facet__header {
  text-transform: initial;
  font-size: 1.25rem;
  cursor: pointer;
  margin: 0;
  padding: 8px 0;
}

div#search_filters .facet__header+div {
  padding-top: 20px;
  border-top: 1px solid rgb(200, 200, 200);
}

@media (min-width: 992px) {
  #search_filters .rotate-arrow {
    -webkit-transform: rotate(315deg) !important;
  }

  #search_filters .arrow-after {
    border-right: 2px solid rgb(200, 200, 200);
    border-top: 2px solid rgb(200, 200, 200);
    content: "";
    height: 8px;
    margin-top: -3px;
    position: absolute;
    right: 5px;
    top: 40%;
    -webkit-transform: rotate(133deg);
    transition: all 0.35s;
    -webkit-transition: all 0.35s;
    width: 8px;

    display: block;
  }
}

/**menu*/
.new-menu .category-level2 span a {
  color: #414141;
}

/* ********************************************************* */
/* **************** end new category changes *************** */
/* ********************** (2023-03-14) ********************* */

/* mobile friendly test - sitemap - clickable elements too close */
body#sitemap #content-wrapper ul li {
  margin-bottom: 0.3rem;
}

BODY#cart .cart-detailed-totals .block-promo,
BODY#module-thecheckout-order .cart-detailed-totals .block-promo {
  display: none;
}

/*cart custom changes*/

.cart-detailed-totals-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: center;
  justify-content: center;
}

.cart-summary-line {
  display: flex;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  border-bottom: none;
}

.cart-summary-line .label {
  flex: 0 0 65%;
  padding: 10px;
  margin: 0px;
}

.cart-summary-line div,
.cart-summary-line .net-value {
  padding: 12px;
}

.cart-summary-line.cart-total-tax {
  margin-bottom: 0px;
}

.cart-summary-line.cart-total.cart-total-tax-included {
  margin-bottom: 20px;
}

#order-confirmation .table-order-confirmation {
  max-width: 50%;
  width: 50%;
  margin: auto 0 auto auto;
}

#order-confirmation #ps_cashondelivery-displayOrderConfirmation p {
  display: none;
}

/* MZS 2026-06-12 — checkout redesign: legacy .value padding/border-left removed
   (totals restyled in the thecheckout override custom.css) */

#ed_shopping_footer {
  padding: 1.25rem;
}

table.cart-summary-totals,
.cart-detailed-totals table {
  display: table;
  background-color: rgba(255, 255, 255, 0);
  border-collapse: collapse;
}

#cart .checkout.cart-detailed-actions .btn.btn-primary {
  border-radius: 8px;
  width: auto;
  margin-bottom: 15px;
  font-size: 1.25rem;
  padding: 8px;
}

table.cart-summary-totals,
.cart-detailed-totals table {
  display: table;
  background-color: rgba(255, 255, 255, 0);
  border-collapse: collapse;
}

#cart .cart-detailed-totals {
  margin-bottom: 20px;
}

table.cart-summary-totals {
  border-top: none !important;
}

table.cart-summary-totals tr,
.cart-detailed-totals table tr {
  width: 100%;
  max-width: 100%;
  display: table-row !important;
}

table.cart-summary-totals td,
.cart-detailed-totals table td {
  width: 50%;
  max-width: 50%;
  display: table-cell;
}

#order-items table.cart-summary-totals,
#order-items .cart-detailed-totals table {
  display: table;
  background-color: rgba(255, 255, 255, 0);
  border-collapse: collapse;
}

#order-items table.cart-summary-totals tr,
#order-items .cart-detailed-totals table tr {
  text-align: right;
}

#order-items table.cart-summary-totals td,
#order-items .cart-detailed-totals table td {
  text-align: right;
}

table.cart-summary-totals td {
  padding: 8px !important;
}

/* MZS 2026-06-12 — checkout redesign: grey totals background removed (white card now) */

body#order-confirmation table.table-order-confirmation.table.table-bordered td.small-vat .label {
  margin-bottom: 0 !important;
}

/*end cart custom changes*/

/***************************************************************************************/
/***************************************INDEX CUSTOM ************************************/
/***************************************************************************************/

#index #wrapper {
  margin: 0px auto;
  max-width: 1413px;
  margin-top: 22px;
  padding: 0px 9px;
}

@media (max-width: 1023px) {
  #header .nav-wrapp {
    background: transparent;
  }
}

@media (min-width: 1024px) {
  #header .nav-wrapp {
    background: #B0492A82;
  }
}

#header .header-nav.u-bor-bot {
  margin: 0px auto;
  max-width: 1415px;
}

/* #header .header-nav.u-bor-bot .header__container {
  width: 100%;
  max-width: 100%;
} */

#header .div_header_middle_bottom {
  background: #f86434;
}

@media screen and (min-width: 1500px) {
  #header .div_header_bottom.position-relative .container {
    padding: 0px !important;
  }
}

#header .div_header_middle_bottom .div_header_middle .header-top {
  background: #f86434;
  padding: 2px 0 !important;
}

#index .div_homepage_banner_container {
  margin: 0px auto;
  max-width: 1417px;
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  align-items: center;
  row-gap: 20px;
  column-gap: 20px;
}

#index .div_homepage_banner_container .home-banner-row {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: start;
  align-items: center;
  margin-bottom: 0;
  width: 100%;
}

#index .home-banner-row .second_column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  column-gap: 20px;
}

#index .first_column.col-6 {
  display: flex;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
  padding: 0px;
}

#index .first_column.col-lg-4,
#index .second_column.col-lg-4,
#index .third_column.col-lg-4 {
  padding: 0px;
}

#index .first_column .first_column__block,
#index .second_column .first_column__block,
#index .third_column .first_column__block {
  width: 100%;
  border-radius: 15px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 25%);
}

#index .first_column__block .container-image a {
  position: relative;
  display: block;
}

#index .first_column__block.first_column__slider .carousel-container {
  border-radius: 15px;
  border: none;
  background: transparent;
}

#index .first_column__block .container-image .container-description {
  position: absolute;
  top: 39%;
  left: 5%;
  color: white;
}

#index .first_column__block .caption-description {
  position: absolute;
  top: 50%;
  left: 0%;
  color: white;
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
  #index .first_column__block .caption-description {
    position: absolute;
    top: 40%;
    left: 0%;
    color: white;
    white-space: nowrap;
  }
}

#index .first_column__block.first_column__slider .caption-description p,
#index .first_column__block .container-image .container-description p {
  font-size: 1.5rem;
  font-weight: 400;
  background: #808080c7;
  width: fit-content;
  line-height: 27px;
}

#index .first_column__block.first_column__slider .caption-description h3,
#index .first_column__block .container-image .container-description p.container-title {
  font-size: 42px;
  line-height: 46px;
  font-family: var(--secondary-font-family);
  font-weight: 600;
  text-transform: uppercase;
  background: #808080c7;
  padding: 5px;
}

#index .first_column__block .container-image img {
  border-radius: 15px;
  height: 335px;
  object-fit: cover;
  width: 100%;
}

#index .first_column.col-6 .first_column__block .container-image img {
  border-radius: 15px;
  height: 25rem;
  object-fit: cover;
  width: 100%;
}

#index .second_column .second_column__block-row-1 {
  background: #f26430;
  padding: 10px 20px;
  border-radius: 15px;
  margin-bottom: 10px;
  width: 85%;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 25%);
  width: 100%;
  height: 50%;
}

#index .second_column .second_column__block-row-1 .container-title {
  font-size: 42px;
  text-transform: uppercase;
  font-weight: 600;
  color: white;
  line-height: 64px;
  margin-bottom: 1px;
}

#index .second_column .second_column__block-row-1 .container-description {
  font-size: 1.5rem;
  color: white;
  line-height: 30px;
  letter-spacing: -0.7px;
}

#index .second_column .second_column__block-row-1 .button_container {
  margin: 20px auto 10px auto;
  display: flex;
  justify-content: center;
  width: 100%;
}

#index .second_column__block-row-1 .button_container button {
  background-color: #585858;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 10px 50px;
  font-size: 1.3rem;
  color: white;
  border: none;
  display: flex;
  align-items: stretch;
}

#index .second_column .second_column__block-row-2 {
  background: #006fb9;
  padding: 10px 20px;
  border-radius: 15px;
  width: 85%;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 25%);
  width: 100%;
  height: 50%;
}

#index .second_column .second_column__block-row-2 .container-title {
  font-size: 42px;
  text-transform: uppercase;
  font-weight: 600;
  color: white;
  line-height: 64px;
  margin-bottom: 1px;
}

#index .second_column .second_column__block-row-2 .container-description {
  font-size: 1.5rem;
  color: white;
  line-height: 30px;
  letter-spacing: -0.7px;
}

#index .second_column .second_column__block-row-2 .button_container {
  margin: 20px auto 10px auto;
  display: flex;
  justify-content: center;
  width: 100%;
}

#index .second_column__block-row-2 .button_container button {
  background-color: #585858;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 10px 20px;
  font-size: 1.3rem;
  color: white;
  border: none;
  display: flex;
  align-items: stretch;
}

#index .home-banner-row_title h3 {
  /* font-size: 42px; */
  font-size: 39px;
  font-weight: 600;
  padding-left: 30px;

  margin-bottom: 0;
}

@media (min-width: 1025px) {
  #header .menu-mobile-navigation {
    display: none;
  }
  
  #header .header-top .header__right .blockcart-container .svg_icon {
    width: 40px;
    height: 40px;
  }

  #header .header-top .header__right .afqQuotesCartOver .svg_icon {
    width: 26px;
    height: 26px;
  }

  #index .index-cards-row {
    width: 100%;
    gap: 10px;
    max-width: 100%;
    padding: 5px;
  }

  #index .div_homepage_banner_container .home-banner-row {
    padding: 5px;
  }
}

@media (max-width: 1024px) {
  .page-wrapper--index .carousel-container {
    margin-bottom: 25px !important;
  }

  #index section#search_filters_brands span.span_titletext {
    margin-bottom: 10px !important;
  }

  #quotesCart .quoteqty.item-count {
    height: 13px;
    width: 15px;
    font-weight: 200;
    border-radius: 50px;
  }
}

#index .first_column.col-4 {
  display: block;
  height: 100%;
}

#index .first_column.col-4 .container-image a {
  position: relative;
}

#index .first_column.col-4 .container-image .container-description {
  position: absolute;
  top: 50%;
  left: 5%;
  color: white;
}

#index .first_column.col-4 .container-image .container-description p {
  font-size: 18px;
  font-weight: 300px;
  background: #aaa8a6;
  width: fit-content;
  line-height: 27px;
}

#index .first_column.col-4 .container-image .container-description p.container-title {
  font-size: 30px;
  font-family: var(--secondary-font-family);
  font-weight: 300px;
  text-transform: uppercase;
  background: #aaa8a6;
  padding: 5px;
}

#index .first_column.col-4 .container-image img {
  border-radius: 15px;
  width: 620px;
  height: 426px;
  box-shadow: 23px 23px 68px #d1d1d1;
}

#index .cards-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 5px;
}

#index .cards-column a {
  width: 100%;
}

#index .cards-column_img img {
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 25%);
  object-fit: cover;
}

#index .cards-column_img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

#index .cards-column_description {
  width: 100%;
  background-color: #383838;
  min-height: 138px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 25%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: space-around;
  flex-wrap: nowrap;
}

#index .cards-column_description ol li,
#index .cards-column_description ol {
  list-style: circle;
  color: #fff;
}

#index .cards-column_description ol {
  width: 100%;
  max-width: 100%;
  padding-top: 12px;
}

#index .cards-column_description .cards-column__view {
  background-color: #f26430;
  padding: 10px;
  width: 100%;
  color: #fff;
  line-height: 20px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#index .cards-column_description .cards-column__view p {
  margin-bottom: 0px;
}

#index .cards-column_description .cards-column__view span {
  font-size: 12px;
}

#index .first_column__block.first_column__banner {
  display: block;
}

#index .first_column__block.first_column__slider {
  display: none;
}

#search_mobile button {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  #_mobile_contactshop .span_additional {
    padding-top: 2px;
  }

  #index .cards-column_description .cards-column__view span {
    display: none;
  }

  .cards-column__view {
    border-radius: 15px;
  }

  .div_menu_icon,
  #search_mobile,
  .header__logo.logo__mobile,
  #_mobile_quote {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 10px;
    padding-right: 10px;
  }

  .mobile_shopping_cart {
    padding-left: 10px;
    padding-right: 10px;
  }

  .header__logo.logo__mobile {
    margin: 0px;
    width: 100%;
    max-width: 100%;
    padding: 0px;
  }

  .header__logo.logo__mobile a {
    width: 90%;
    margin: 5px auto !important;
    display: block !important;
  }

  .header__logo.logo__mobile a .logo {
    width: auto;
    object-fit: contain;
    max-height: 50px;
    height: 50px;
  }
}

@media screen and (min-width: 766px) and (max-width: 1024px) {
  .cards-column__view {
    border-radius: 15px;
  }

  .div_menu_icon,
  #search_mobile,
  .header__logo.logo__mobile,
  #_mobile_quote {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 10px;
    padding-right: 10px;
  }

  .mobile_shopping_cart {
    padding-left: 10px;
    padding-right: 10px;
  }
}

#_mobile_searchbarcontainer {
  display: none;
}

@media screen and (max-width: 1024px) {
  #index .first_column__block.first_column__banner {
    display: none;
  }

  #index .first_column__block.first_column__slider {
    display: block;
  }

  #index .cards-column_description ol {
    display: none;
  }

  #index .cards-column_description {
    background-color: #f26430;
    min-height: 38px;
    padding-left: 10px !important;
  }

  #index .index-video-row .cards-column_description {
    padding-left: 15px !important;
  }
}

#index .index-video-row,
#index .index-cards-row {
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 0px;
  column-gap: 0px;
  justify-content: flex-start;
}

#index .cards-column_description a {
  color: white;
}

#index .cards-column_description li::marker {
  color: white;
  background-color: #fff;
}

#index .cards-column_description li a:hover {
  color: #f26430;
}

#index .cards-column_description li:hover::marker {
  color: #f26430;
  background-color: #f26430;
}

#index .index-video-row .cards-column_description {
  background: #0072bc;
  color: white;
  font-weight: 500;
  padding: 5px;
  display: flex;
  justify-content: center;
}

@media screen and (min-width: 1024px) {
  #index .index-video-row .cards-column_description {
    padding: 10px 6px;
    min-height: fit-content;
  }

  #mobile_searchbarcontainer .ssa-search_fa {
    display: none;
  }

  .mm_menus_li.mm_sub_align_full.additional-info {
    display: none;
  }
}

#index .index-video-row iframe {
  width: 100%;
  height: 300px;
  border-radius: 15px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 25%);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

#index .index-video-row .cards-column_video {
  font-size: 18px;
  font-weight: 500;
  color: var(--footer-top-bg-color);
  text-align: center;
}

#index #content.page-content {
  padding: 0px;
}

#index #content #carousel.ps_imageslider {
  background-color: transparent;
  border-radius: 15px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 25%);
}

#index #carousel.ps_imageslider .slider_content_container {
  background-size: cover;
}

/* #index #carousel .container .caption-description p span {
  background-color: #80808082;
  color: white !important;
  padding: 0px 5px;
} */

#index #search_filters_brands {
  margin-bottom: 40px !important;
  margin-top: 0 !important;
}

#index section#search_filters_brands span.span_titletext {
  /* font-size: 42px; */
  font-size: 39px;
  font-weight: 600;
  padding-left: 30px;
  text-align: left;
  display: flex;
  /* margin: 10px 0px 62px 0px; */
  margin: 0 0px 40px 0px;
}

@media (min-width: 400px) and (max-width: 600px) {
  #index section#search_filters_brands span.span_titletext {
    font-size: 30px;
  }
}

.page-wrapper--index .carousel-container {
  margin-bottom: 40px;
}

#index section#search_filters_brands span.span_titletext a {
  line-height: initial;
}

@media screen and (min-width: 1400px) {

  #header .div_header_middle_bottom .div_header_middle .header-top,
  #header .header-nav.u-bor-bot .header__container {
    padding: 0px;
  }
}

@media screen and (max-width: 1450px) and (min-width: 1025px) {
  #header .header-nav.u-bor-bot,
  #header .div_header_middle_bottom .div_header_middle {
    padding: 0px 10px;
  }

  .div_header_bottom.position-relative .container,
  .div_header_bottom.position-relative .container .ets_mm_megamenu_content .container {
    width: 100%;
    max-width: 100%;
  }

  #index #wrapper.l-wrapper.pt-2 {
    margin: 0px auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  #index #wrapper.l-wrapper.pt-2>.row {
    padding-left: 5px;
    padding-right: 5px;
  }

  #index #wrapper .row,
  #index #wrapper .row #content-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0px;
    margin: 0px auto;
  }

  #index #content-wrapper .home-banner-row {
    padding: 0px;
  }

  #index #wrapper #content .home-banner-row {
    display: flex;
    flex-direction: column;
  }

  #index .home-banner-row {
    padding: 0px 20px;
  }

  #index .home-banner-row .first_column.col-6,
  #index .home-banner-row .second_column.col-6 {
    width: 49%;
    max-width: 49%;
  }

  #index .second_column .second_column__block-row-1 .container-title,
  #index .second_column .second_column__block-row-2 .container-title {
    font-size: 2rem;
  }

  #index .second_column .second_column__block-row-1 .container-description,
  #index .second_column .second_column__block-row-2 .container-description {
    font-size: 1.3rem;
  }

  #index .second_column__block-row-1 .button_container button,
  #index .second_column__block-row-2 .button_container button {
    /* font-size: 1.2rem; */
    font-size: 1.1rem;
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }

  #index .second_column__block-row-1 .button_container button {
    padding: 10px 23px;
  }

  #index .first_column.col-6 .first_column__block .container-image img {
    height: 27rem;
  }

  #index .first_column__block.first_column__slider .caption-description h3,
  #index .first_column__block .container-image .container-description p.container-title {
    font-size: 2rem;
    white-space: nowrap;
  }

  #index .first_column__block.first_column__slider .caption-description p,
  #index .first_column__block .container-image .container-description p {
    font-size: 1.3rem;
  }

  #index .home-banner-row.col-lg-4 {
    flex: 0 0 32%;
    max-width: 0 0 32%;
  }

  #index .index-video-row .cards-column_video {
    min-height: 60px;
  }

  #index #div_brandlist .div_brand_carousel_container {
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
  }

  .carousel-container.position-relative .caption-description {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 1024px) and (min-width: 600px) {
  #index #wrapper.l-wrapper.pt-2 {
    max-width: unset;
    margin: 0px auto;
    padding: 10px;
    margin-top: 40px;
  }

  #index #wrapper .row,
  #index #wrapper .row #content-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0px;
    margin: 0px auto;
  }

  #index #content-wrapper .home-banner-row {
    padding: 0px;
  }

  #index #wrapper #content .home-banner-row {
    display: flex;
    flex-direction: column;
  }

  #index .home-banner-row {
    padding: 0px 20px;
  }

  #index .div_homepage_banner_container {
    margin: 20px auto 10px auto;
  }

  #index .second_column .second_column__block-row-1 {
    margin-bottom: 20px;
  }

  #index .div_homepage_banner_container .home-banner-row {
    margin-bottom: 0px;
    padding: 5px;
  }

  #index .div_homepage_banner_container .index-cards-row {
    padding: 0px;
  }

  #index .second_column .second_column__block-row-2 .button_container,
  #index .second_column .second_column__block-row-1 .button_container {
    justify-content: flex-start;
  }

  #index .first_column__block.first_column__slider .caption-description h3,
  #index .first_column__block .container-image .container-description p.container-title {
    font-size: 46px;
  }

  #index .second_column .second_column__block-row-1 .container-title,
  #index .second_column .second_column__block-row-2 .container-title {
    letter-spacing: 2px;
    word-spacing: 12px;
    /* font-size: 44px; */
    font-size: 40px;
  }

  #index .second_column .second_column__block-row-1 .container-description,
  #index .second_column .second_column__block-row-2 .container-description {
    font-size: 25px;
  }

  #index .second_column__block-row-1 .button_container button {
    font-size: 20px;
    padding: 10px 40px;
  }

  #index .second_column__block-row-1 .button_container button {
    padding: 10px 60px 10px 40px;
    font-size: 20px;
  }

  #index .cards-column {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
  }

  #index .home-banner-row {
    display: flex;
    flex-wrap: wrap !important;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    row-gap: 0;
    width: 90vw;
  }

  #index .home-banner-row_title h3 {
    /* padding-bottom: 10px;
    padding-top: 10px; */
    font-size: 42px;
    font-weight: 800;
  }

  #index .index-video-row {
    justify-content: flex-start;
    display: flex;
    padding: 0px;
  }

  #index .index-video-row .cards-column_video {
    min-height: 55px;
  }

  #index #content-wrapper #content .home-banner-row,
  #index #content-wrapper #content .home-banner-row .carousel-container {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px;
  }

  #index #search_filters_brands {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 767px) {
  #index .index-video-row {
    flex-direction: row;
    justify-content: flex-start;
  }
}

@media screen and (min-width: 400px) and (max-width: 600px) {
  #index .index-video-row iframe {
    height: 160px;
  }

  #carousel.ps_imageslider .slider-caption .slide-title,
  #index .first_column__block.first_column__slider .caption-description h3,
  #index .second_column .second_column__block-row-1 .container-title,
  #index .second_column .second_column__block-row-2 .container-title {
    font-size: 25px;
  }

  #index .cards-column_description .cards-column__view,
  #index .index-video-row .cards-column_description {
    font-size: 15px;
    padding: 10px;
  }

  #index .index-video-row .cards-column_description {
    padding-left: 15px !important;
  }

  #index .div_homepage_banner_container {
    margin-top: 10px;
  }

  .carousel-container.position-relative .caption-description p,
  #index #carousel .container .caption-description p span,
  #index .second_column .second_column__block-row-1 .container-description,
  #index .second_column .second_column__block-row-2 .container-description {
    font-size: 17px;
  }

  #index .first_column__block.first_column__slider .caption-description p,
  #index .first_column__block .container-image .container-description p {
    white-space: pre;
    font-size: 17px;
  }

  #index .first_column__block.first_column__slider .caption-description h3,
  #index .first_column__block .container-image .container-description p.container-title {
    font-size: 30px;
    line-height: 35px;
    padding: 6px 2px;
    width: fit-content;
    white-space: nowrap;
  }

  #index .first_column__block.first_column__slider .caption-description p,
  #index .first_column__block .container-image .container-description p {
    margin-right: 20px;
    padding: 0px 5px;
  }

  #index .div_homepage_banner_container .home-banner-row {
    margin-bottom: 0px;
    padding: 5px;
  }

  #index .second_column .second_column__block-row-1 .container-description,
  #index .second_column .second_column__block-row-2 .container-description {
    font-size: 17px;
  }

  #index .second_column__block-row-1 .button_container button,
  #index .second_column__block-row-2 .button_container button {
    padding: 10px 22px;
    font-size: 15px;
    align-items: flex-start;
    text-align: left;
  }

  #index .home-banner-row_title h3 {
    font-size: 30px;
    padding-left: 0px;
    font-weight: 800;
  }

  #index .cards-column {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
  }

  #index .cards-column_img {
    height: 160px;
  }

  /* #index .cards-column_description {
    min-height: 155px;
  }
  #index .cards-column_title {
    min-height: 55px;
  } */
  #index .cards-column_description a {
    font-size: 14px;
  }

  #index .index-video-row {
    flex-direction: column;
  }

  #index .index-video-row .cards-column {
    width: 100%;
    max-width: 100%;
  }

  #index #wrapper.l-wrapper {
    padding: 0px 15px;
  }

  #index #search_filters_brands {
    width: 100%;
    max-width: 100%;
  }

  #index .page-wrapper--index .carousel-container {
    margin-bottom: 25px;
  }

  #index section#search_filters_brands span.span_titletext {
    padding: 0px;
    /* margin-bottom: 20px; */
    margin-bottom: 20px !important;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  #index #content #carousel.ps_imageslider {
    margin-bottom: 0 !important;
  }

  .page-wrapper--index .carousel-container {
    margin-bottom: 5px !important;
  }

  #index section#search_filters_brands span.span_titletext {
    margin-bottom: 25px !important;
  }
}

@media screen and (max-width: 479px) {
  #index #wrapper.l-wrapper.pt-2 {
    padding: 10px;
  }

  #header .header-nav .svg_icon:not(.menu_icon),
  #header .header-nav .svg_icon:not(.menu_close_icon) {
    width: 20px;
    height: 20px;
  }

  #index .div_homepage_banner_container {
    margin-top: 10px;
  }

  #index .second_column .second_column__block-row-1 .button_container,
  #index .second_column .second_column__block-row-2 .button_container {
    justify-content: flex-start;
  }

  #mobile_searchbarcontainer .ssa-searchblock form .ssa-nav-fill .ssa-search-query {
    border-radius: 15px;
  }

  #mobile_searchbarcontainer button.btn.btn-default.button-search.ssa-button-search {
    border-radius: 15px;
  }

  #index .second_column .second_column__block-row-1 .container-title,
  #index .second_column .second_column__block-row-2 .container-title {
    font-size: 21px;
    /* line-height: 35px; */
    line-height: initial;
  }

  #mobile_searchbarcontainer button.btn.btn-default.button-search.ssa-button-search {
    padding: 5px 20px;
  }

  #index .second_column .second_column__block-row-1 .button_container,
  #index .second_column .second_column__block-row-2 .button_container {
    /* margin: 10px auto 10px auto; */
    margin: 0 auto 0 auto;
  }

  #index .second_column .second_column__block-row-1 .container-description,
  #index .second_column .second_column__block-row-2 .container-description {
    /* font-size: 15px; */
    font-size: 14px;
    line-height: initial;
    margin: 8px 0 12px;
  }

  #index .second_column .second_column__block-row-1,
  #index .second_column .second_column__block-row-2 {
    height: unset;
    padding: 12px 12px;
  }

  #index .first_column__block.first_column__slider .caption-description h3,
  #carousel.ps_imageslider .slider-caption .slide-title {
    font-size: 21px;
    margin-bottom: 2px;
    line-height: 27px;
  }

  #index .first_column__block.first_column__slider .caption-description p {
    font-size: 15px;
    white-space: nowrap;
  }

  #index #carousel .container .caption-description p span,
  .carousel-container.position-relative .caption-description p {
    font-size: 15px;
    white-space: break-spaces;
  }

  #index .second_column__block-row-1 .button_container button,
  #index .second_column__block-row-2 .button_container button {
    /* font-size: 12px;
    padding: 5px; */
    font-size: 10px;
    padding: 5px 10px;
    align-items: center;
  }

  #index .first_column__block.first_column__slider.d-lg-none {
    height: 200px;
  }

  #index .home-banner-row_title h3 {
    font-size: 27px;
  }

  #index .cards-column_description .cards-column__view {
    margin-bottom: 0px;
    /* min-height: 60px; */
  }

  #index .cards-column_description .cards-column__view p {
    font-size: 15px;
    margin-bottom: 0px;
  }

  #mobile_searchbarcontainer .ssa-searchblock form .ssa-nav-fill .ssa-search-query {
    border-radius: 15px;
  }

  #index .index-video-row iframe {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
  }

  #index .cards-column_description {
    padding-left: 5px !important;
  }

  #index .index-video-row .cards-column_description {
    padding: 10px 10px 10px 15px !important;
    font-weight: 400;
    color: white;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    /* min-height: 59px; */
  }

  #index section#search_filters_brands span.span_titletext {
    /* font-size: 27px; */
    font-size: 21px;
  }

  #index .cards-column_img {
    height: 160px;
  }

  #index .index-video-row iframe {
    height: 160px;
  }

  #index .home-banner-row_title h3 {
    font-size: 21px;
  }

  #carousel.pch_imageslider .slider-caption {
    top: 39%;
  }

  #index .div_homepage_banner_container .home-banner-row {
    padding: 5px;
  }

  /* #wrapper.l-wrapper.pt-2 #content-wrapper #content.page-content{
    padding: 0px 15px;
  } */
  #carousel.pch_imageslider .slider_content_container {
    background-size: cover;
  }

  #index .index-video-row .cards-column_description {
    padding-left: 15px !important;
  }
}

@media (min-width: 401px) and (max-width: 479px) {

  #index .second_column__block-row-1 .button_container button,
  #index .second_column__block-row-2 .button_container button {
    font-size: 13px;
  }

  #index .second_column .second_column__block-row-1 .container-description,
  #index .second_column .second_column__block-row-2 .container-description {
    font-size: 16px;
  }

  #index .second_column .second_column__block-row-1 .container-title,
  #index .second_column .second_column__block-row-2 .container-title {
    font-size: 23px;
  }

  #index .first_column__block.first_column__slider .caption-description p {
    font-size: 20px;
  }

  #index .first_column__block.first_column__slider .caption-description h3,
  #carousel.ps_imageslider .slider-caption .slide-title {
    font-size: 23px;
  }
}

@media (max-width: 479px) {
  #carousel.pch_imageslider {
    background: transparent;
  }
}

.slick-list.draggable .slider_content_container span.btn-discover {
  background-color: #006fb9;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 10px 20px;
  color: white;
  border: none;
  display: flex;
}

.visible-on-mobile {
  display: none;
}

.visible-on-desktop {
  display: block;
}

.u-a-i-c.visible-on-desktop {
  display: flex;
}

#mobile_searchbarcontainer {
  display: none;
}

@media screen and (max-width: 280px) {

  #header .header-nav .svg_icon:not(.menu_icon),
  #header .header-nav .svg_icon:not(.menu_close_icon),
  #search_mobile .material-icons.search img {
    width: 0.7rem;
    height: 0.7rem;
  }
}

@media screen and (max-width: 1023px) {
  .visible-on-mobile {
    display: block;
  }

  header#header {
    position: sticky;
    top: 0px;
    right: 0px;
    left: 0px;
    /* MZS 2026-06-09 r30 - bumped from 10 to 100 to keep sticky header above in-page dropdowns. */
    /* MZS 2026-06-19 - bumped to 201 so the mobile sticky header stays above an open bulk/pack popover's
       card-lift (.product-miniature:has(.bulk-popover.open){z-index:200}). */
    z-index: 201;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 6px -6px;
  }

  #header .u-a-i-c.visible-on-desktop {
    display: none;
  }

  #header .div_header_middle.visible-on-desktop {
    display: none;
  }

  #header .header__container.container {
    height: inherit;
    padding: 0px;
  }

  #_mobile_quote .span_additional {
    font-size: 10px;
    /* padding-top: 5px; */
    white-space: nowrap;
  }

  main #er .nav-
  /* #header .header-top__col.logo__mobile {
    flex: 2;
    width: auto ;
    max-width: 50% ;
  } */

  .toggleSearch {
    display: block;
  }

  /* .sticky:not(body#module-thecheckout-order .div_header_middle_bottom.sticky):not(body#module-firstdatapaymentgateway-paymentform .div_header_middle_bottom.sticky) {
    position: relative;
  } */

  #_mobile__search.not-visible {
    right: -100%;
    position: absolute;
  }

  #div_header_tel .a_phone span.d-flex {
    display: none !important;
  }

  #mobile__search_container {
    overflow: hidden;
    position: absolute;
    width: 100%;
    top: 0;
  }

  #_mobile__search.notactive {
    right: -100%;
    position: absolute;
    overflow: hidden;
    animation: ease-out 1;
    animation-name: header-search-out;
    animation-duration: 0.5s;
    max-height: 60px;
    width: 100%;
    background-color: #f26430;
  }

  #_mobile__search.active {
    position: relative;
    animation: ease-in 1;
    animation-name: header-search-in;
    animation-duration: 0.5s;
    width: 100%;
    background-color: #f26430;
    left: 0px;
    max-height: 60px;
    height: 60px;
  }

  @keyframes header-search-out {
    0% {
      left: -300px;
    }

    100% {
      left: 300px;
    }
  }

  @keyframes header-search-in {
    0% {
      left: 300px;
    }

    100% {
      left: 0px;
    }
  }

  #_mobile__search .search_mobile_icon {
    padding: 10px;
  }

  #_mobile__search {
    display: flex;
  }

  #mobile_searchbarcontainer button.btn.btn-default.button-search.ssa-button-search:hover {
    box-shadow: none;
  }

  #mobile_searchbarcontainer .material-icons+span {
    display: block;
  }

  #mobile_searchbarcontainer {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    /* width: 85vw;
    max-width: 85vw; */
  }

  #mobile_searchbarcontainer .ssa-nav-right {
    right: -37px !important;
    top: 0;
  }

  #mobile_searchbarcontainer button.btn.btn-default.button-search.ssa-button-search {
    font-size: 14px !important;
    width: 93px;
  }

  #mobile_searchbarcontainer .ssa-searchblock form .ssa-nav-fill .ssa-search-query {
    top: 2%;
    height: 35px;
  }

  #mobile_searchbarcontainer .ssa-searchblock form .ssa-nav-fill {
    height: 35px;
  }

  #mobile_searchbarcontainer button.btn.btn-default.button-search.ssa-button-search {
    height: 35px;
    width: 88px;
    border-radius: 5px;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  #mobile_searchbarcontainer button.btn.btn-default.button-search.ssa-button-search i {
    font-size: 20px;
    font-weight: 100;
  }

  #_mobile__search .search_mobile_icon_close .material-icons.search span {
    font-size: 10px !important;
    display: block !important;
    font-family: var(--primary-font-family) !important;
    font-weight: 100 !important;
    font-style: normal !important;
  }

  .material-icons.search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: auto;
  }

  #_mobile_quote .afqQuotesCartOver .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* #header .mobile_shopping_cart {
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction:column ;
  } */
  #header .mobile_shopping_cart .blockcart {
    flex-direction: column;
  }

  #header #_mobile__search {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  #_mobile__search button {
    padding: 10px;
  }

  /* #_mobile__search .ssa-searchblock form .ssa-nav-fill .ssa-nav-search-field{
    width: 90%;
  } */
  #_mobile__search .ssa-nav-right {
    /* border-right-style: -50px; */
    /* height: fit-content; */
    height: auto;
  }

  #mobile_searchbarcontainer form {
    display: flex;
    flex-direction: row-reverse;
  }

  #mobile_searchbarcontainer .ssa-searchblock {
    padding: 0;
  }

  #mobile_searchbarcontainer form .ssa-nav-right {
    position: initial !important;
  }

  #mobile_searchbarcontainer form .ssa-nav-fill {
    flex-grow: 1;
  }

  #mobile_searchbarcontainer form .ssa-search-query {
    position: initial;
    padding: 6px 12px;
    text-indent: 0;
  }

  #mobile_searchbarcontainer form .ssa-nav-search-field {
    height: auto;
  }

  #mobile_searchbarcontainer form .ssa-nav-search-field {
    width: 100%;
  }

  #mobile_searchbarcontainer button.btn.btn-default.button-search.ssa-button-search {
    padding: 10px 12px 10px 10px;
    width: auto;
  }

  #mobile_searchbarcontainer .ssa-searchblock form .ssa-nav-fill .ssa-search-query {
    border-radius: 5px;
  }

  #mobile_searchbarcontainer button.btn.btn-default.button-search.ssa-button-search span:not(.ssa-search_fa) {
    color: white !important;
  }

  /* #mobile_searchbarcontainer.header__search.toggleSearch{
    bottom: -45px;
    position: absolute;
    left: 0px;
    right: 0px;
    background-color: #f26430;
  } */
  /* .header-nav.u-bor-bot.sticky {
    position: relative;
  } */

  .ssa-searchblock form .ssa-nav-fill {
    background-color: #f26430;
  }

  .header__search {
    margin-top: 0px;
  }

  .button.btn.btn-default.button-search.ssa-button-search {
    font-size: 12px !important;
    width: 81px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  #header .svg_icon.phone_icon {
    margin-right: 0px !important;
  }

  #div_header_tel .span.call-us-text-mobile {
    display: block;
    text-transform: capitalize;
  }

  .shopping-cart.header.has-counter {
    padding: 2px 10px 0 10px;
  }

  #header div#quotesCart a#quotes-cart-link {
    padding: 2px 10px 0 10px;
  }

  #header .btn-primary .item-count:not(.position-md-initial) {
    top: 1px;
    right: 2px;
  }

  .mobile_shopping_cart .shopping-cart.header a.u-link-body {
    padding: 4px 10px 0 10px;
  }
}

@media (max-width: 767px) {
  #index .cards-column_description {
    padding-left: 0 !important;
    min-height: unset;
    flex-grow: 1;
    justify-content: center;
  }

  #index .cards-column_description .cards-column__view {
    justify-content: left;
  }

  #index .cards-column_description .cards-column__view p {
    font-size: 0.875rem;
  }

  #index .index-video-row .cards-column_description {
    align-items: flex-start;
    padding: 10px !important;
    line-height: initial;
    flex-grow: 1;
    justify-content: center;
    font-size: 0.875rem;
  }

  #index .index-video-row,
  #index .index-cards-row {
    align-items: unset;
  }
}

#_desktop_searchbarcontainer button.btn.btn-default.button-search.ssa-button-search,
#_desktop_searchbarcontainer input.ssa-search-query.ssa-search-query-input.form-control.ui-autocomplete-input {
  border-radius: 4px;
}

#cart a.btn.btn-lg.btn-secondary svg.svg_icon.quotes_icon {
  transition: all 0.25s ease;
}

#cart a.btn.btn-lg.btn-secondary:hover,
#cart a.btn.btn-lg.btn-secondary:hover svg.svg_icon.quotes_icon {
  color: rgba(0, 185, 75, 0.8);
}

@media screen and (min-width: 1024px) {
  .sticky {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    box-shadow: rgb(0 0 0 / 34%) 0px 8px 6px -6px;
  }
}

/*header from 1023down*/
@media screen and (max-width: 1023px) {

  #header div#menu-icon .menu-label,
  .u-a-i-c.visible-on-mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  .div_menu_icon,
  #search_mobile,
  #_mobile_quote,
  .mobile_shopping_cart {
    padding: 0px 15px;
  }

  .div_menu_icon,
  #search_mobile,
  .header__logo.logo__mobile,
  #_mobile_quote,
  .mobile_shopping_cart {
    display: flex;
    width: auto;
    height: 100%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  #menu-icon {
    padding: 10px 2px;
  }

  #search_mobile .search_mobile_icon {
    padding: 5px;
  }

  #header .header__logo {
    max-width: 100%;
    flex: 1;
  }

  #menu-icon,
  button.search_mobile_icon,
  .header__logo.logo__mobile a,
  #_mobile_quote .afqQuotesCartOver,
  .mobile_shopping_cart .blockcart-container {
    margin: auto;
  }

  .header__logo.logo__mobile a img.logo {
    max-height: 60px;
    padding: 5px 0px;
    width: auto;
  }

  #_mobile_quote .afqQuotesCartOver {
    padding: 10px 5px;
  }

  .mobile_shopping_cart .blockcart-container {
    padding: 5px;
  }

  #header .mobile_shopping_cart .blockcart {
    flex-direction: column;
  }

  #header div#menu-icon .menu-label,
  #search_mobile button span:not(.search),
  #_mobile_quote .quotes-text-mobile,
  span.visible--desktop.blockcart__label.span_mycart {
    text-transform: capitalize;
    font-size: 10px;
    margin-top: 3px;
    font-weight: 500;
  }

  .home-banner-row.visible-on-desktop-only {
    display: none !important;
  }

  #header div#menu-icon .menu-label {
    margin-top: 7px !important;
  }
}

@media screen and (max-width: 479px) {

  .div_menu_icon,
  #search_mobile,
  #_mobile_quote,
  .mobile_shopping_cart {
    padding: 0px 10px;
  }
}

body#category .cp-ps-container.fitvidsignore.cp-hidden.cp-noskin.cp-container.cp-responsive,
body#category .cp-ps-container.fitvidsignore.cp-hidden.cp-noskin.cp-container.cp-responsive .cp-slide,
body#category .cp-ps-container.fitvidsignore.cp-hidden.cp-noskin.cp-container.cp-responsive .cp-slide img.cp-tn {
  display: none !important;
}

body#category .cp-popup-inner .cp-layers .cp-wrapper.cp-in-out {
  display: block;
}

.product-miniature .product-description .div_delivery_times {
  display: inline-flex;
}

.product-miniature .estimateddelivery .ed_item p {
  display: inline-flex !important;
}

body .modal {
  z-index: 99999;
}

@media (max-width: 767px) {
  #footer .footer-center .container {
    padding-bottom: 20px;
  }
}

body#module-gallerique-gallery #gallery_container a,
body#module-gallerique-gallery #gallery_container img,
body#cms.cms-id-11 iframe,
body#cms.cms-id-11 .overlay,
body#cms.cms-id-15 .case-study-container img,
body#module-smartblog-category .articleContent:before,
body#module-smartblog-category .articleContent,
body#module-gallerique-gallerylist .gallerique-gallery-cover img {
  border-radius: 15px;
}

body:not(#category):not(#product) .cp-popup.cp-popup-visible,
body:not(#category):not(#product) .cp-popup-overlay {
  display: none !important;
}

/* Mzs - product-miniature */
/* --product-miniature-padding-tabletandmobile */

.product-miniature .details {
  padding: 0;
  width: fit-content;
}

.product-miniature .pla_attributes .view-product {
  width: 100%;
}

.product-miniature .div_details_cart .custom-footer-buttons {
  gap: 0.4rem;
}

.product-miniature .div_details_cart .details .btn {
  color: white;
  width: 100%;
  padding: 4px;
  border-radius: 4px;
  font-weight: normal;
  align-items: center;
  align-content: center;
  width: fit-content;
  font-size: 15px;
}

.product-miniature .div_details_cart .details.quote .btn {
  background-color: transparent !important;
  border: 1px solid var(--btn-bg-color) !important;
  color: var(--btn-bg-color);
}

.product-miniature .div_details_cart .details.info .btn {
  background-color: transparent !important;
  border: 1px solid #0072bc !important;
  color: #0072bc;
}

.product-miniature .div_details_cart .details a {
  line-height: unset;
}

.product-miniature .div_details_cart {
  padding: 0;
  gap: 0.8rem;
}

.product-miniature select.pla_select {
  border-radius: 4px;
  padding: 7px 22px 7px 10px;
  font-size: 13px;
  line-height: 1.2;
}

.product-miniature .pla_custom_select_container {
  border-radius: 4px;
}

/* MZS 2026-05-13 - section 1 refinement: match the custom div-based dropdown (used for Finish / colour swatches) to the native .pla_select sizing so the two selector types are visually identical. Upstream pla-1.6.css ships 9px/8px padding + 14px font on .div_custom_select — without this override the third selector looked taller than the first two. */
.product-miniature .pla_custom_select_container .div_custom_select {
  padding: 7px 22px 7px 10px;
  font-size: 13px;
  line-height: 1.2;
}
.product-miniature .pla_custom_select_container .div_custom_select .span_attribute_name {
  font-size: 13px;
  line-height: 1.2;
}

.product-miniature .listview-container {
  padding: 0;
  padding-bottom: 0.5rem;
}

.product-miniature .product-price-and-shipping .ask_offer {
  width: 0;
  opacity: 0;
  height: 0;
}

.product-miniature .btn {
  font-weight: 700;
  border-radius: 4px;
  padding: 8px 0;
}

.product-miniature .pla_attribute_group_container {
  margin-top: 0;
  margin-bottom: 0;
}
/* MZS 2026-05-13 - section 1 tidy: stack pla.js-rendered dropdowns as a flex column with 8px gap so consecutive selectors breathe instead of touching. Inner colour-swatch rows have their own .pla_color_swatch flex-wrap rule at custom.css:10654 so they're unaffected. */
.product-miniature .pla_attributes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-miniature .pla_attribute_group_container label {
  position: relative;
  margin-bottom: 0;
}

.product-miniature .pla_attribute_group_label.size-label:before,
.pla_attribute_group_label.length-label:before,
.pla_attribute_group_label.colour-label:before {
  display: none;
}

.product-miniature .product_lidt_attributes .custom-label-position {
  position: absolute;
  top: -6px;
  left: 12px;
  background: white;
  font-size: 12px;
  width: fit-content;
  z-index: 1;
  line-height: 12px;
  height: 12px;
  padding: 0 6px;
}

.product-miniature .div_inputqtyparent {
  border-radius: 4px;
}

.product-miniature:not(.product_show_list) .listview-container .product_lidt_attributes .pla_attributes .pla_buttons_container {
  flex-grow: unset;
  margin-top: 0.8rem;
  width: 75%;
}

.product-miniature:not(.product_show_list) .listview-container {
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 4px;
}

.product-miniature .qty-container {
  padding-left: 0 !important;
}

.products .product-description .h3.product-title {
  min-height: 65px;
  flex: unset;
  text-align: left;
  margin-bottom: 0;
}

.products .product-description .product-price-and-shipping {
  flex: unset;
}

.pla_attribute_group_label {
  color: #b2b2b2;
  font-weight: 400;
}

.pla_buttons_container .pla_label_quantity,
.div_qty_input_container .pla_label_quantity {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 0 6px;
  font-size: 12px;
  z-index: 3;
  line-height: 12px;
  height: 12px;
  color: #b2b2b2;
}

.highlighted-informations {
  border-radius: 4px;
}

.pla_buttons_container .div_inputqtyparent .btn {
  background: #e8e8e8;
  border-radius: 4px;
  border: 1px solid var(--header-bottom-bg-color);
  padding: 4px 12px;
  border-top: unset;
  border-bottom: unset;
}

.bootstrap-touchspin .input-group-btn .btn {
  background: #e8e8e8;
  border: 1px solid #999999;
  padding: 4px 12px;
  height: 105%;
  top: -1px;
  position: relative;
}

#module-askforaquotepro-QuotesCart .bootstrap-touchspin .btn {
  background: #e8e8e8;
  border-radius: 4px;
  border: 1px solid var(--header-bottom-bg-color);
  height: 38px;
  position: relative;
}

.div_inputqtyparent,
.bootstrap-touchspin {
  border-left: unset;
  border-right: unset;
  flex-wrap: nowrap;
}

.pla_buttons_container input.pla_quantity,
body:not(#product) .bootstrap-touchspin input {
  width: 100% !important;
  height: 35px !important;
  font-weight: normal !important;
}

.form-group.product-variants-item.item_select label:before,
.form-group.product-variants-item.item_color .label:before {
  display: none !important;
}

body:not(#product) .form-group.product-variants-item.item_select div select,
body:not(#product) .form-group.product-variants-item.item_color .custom-select {
  border-radius: 4px;
  padding-left: 17px;
}

.bootstrap-touchspin,
.bootstrap-touchspin .input-group-btn {
  border-radius: 4px !important;
}

button.btn.btn-primary.add-to-cart.btn-lg.btn-block.btn-add-to-cart.js-add-to-cart {
  border-radius: 4px !important;
  box-shadow: unset !important;
  padding: 5px 0 !important;
}

body:not(#product) .form-group.product-variants-item.item_select label,
body:not(#product) .form-group.product-variants-item.item_color .label {
  position: absolute !important;
  top: -6px !important;
  left: 12px !important;
  background: white !important;
  font-size: 12px !important;
  width: fit-content !important;
  z-index: 1 !important;
  line-height: 12px !important;
  height: 12px !important;
  padding: 0 6px !important;
  color: #b2b2b2 !important;
  font-weight: 400 !important;
}

#product .div_right_col_container .div_qty_input_container,
.quickview.show .div_qty_input_container {
  width: 75%;
}

#product .div_right_col_container .product-actions,
.quickview.show .product-actions {
  max-width: 300px;
}

#product .div_right_col_container .fly_to_quote_cart_button,
.quickview.show .fly_to_quote_cart_button {
  background-color: transparent !important;
  border: 1px solid var(--secondary-bg-color) !important;
  color: var(--secondary-bg-color);
  padding: 4px !important;
  border-radius: 4px;
  align-content: center;
  font-size: 15px;
  font-weight: normal;
  width: fit-content;
  position: initial !important;
}

#product .div_right_col_container .product-add-to-cart .qty,
.quickview.show .product-add-to-cart .qty {
  margin: 0.8rem 0 0 0;
  gap: 0.4rem;
}

#product .div_right_col_container .product-quantity,
.quickview.show .product-quantity {
  margin-top: 0;
  width: 100%;
}

.product-additional-info .ask_offer {
  width: 100%;
  max-width: 300px;
}

.bootstrap-touchspin>input {
  max-width: 100% !important;
}

.product-additional-info {
  padding-top: 0;
}

#product .form-control:focus,
.quickview.show .form-control:focus {
  box-shadow: unset;
}

#product .div_right_col_container .product-variants,
.quickview.show .product-variants {
  padding-top: 0.9rem;
}

.product-thumbs .slick-list.draggable img.thumb.js-thumb {
  border-radius: 4px;
}

.slick-list.draggable img.img-fluid {
  border-radius: 16px; /* MZS 2026-06-16 — was 4px; cover image radius */
}

.form-group.product-variants-item.item_select,
.form-group.product-variants-item.item_color {
  margin-bottom: 0.8rem;
}

button.btn.btn-primary.add-to-cart.btn-lg.btn-block.btn-add-to-cart.js-add-to-cart:hover {
  box-shadow: none;
}

.modal-body button.btn.btn-primary.add-to-cart.btn-lg.btn-block.btn-add-to-cart.js-add-to-cart {
  box-shadow: none;
}

.product-add-to-cart .product-quantity {
  margin-top: 0 !important;
}

.pla_custom_select_container .div_custom_select {
  padding-left: 17px;
}

.product-miniature .qty-cart-button-container {
  gap: 0.4rem;
  height: 100%;
}

.product-miniature .btn {
  padding: 5px 0 6px;
}


.modal-backdrop {
  z-index: 4 !important;
}

.product-miniature .card-body.div_product_meta {
  padding: 0.5rem 8px;
  max-width: 300px;
  margin: auto;
  width: 100%;
}

.quickview.show .lowestprice,
.quickview.show .lowestprice-withouttax {
  display: none;
}

.product-miniature .div_delivery_times svg {
  display: none;
}

.div_delivery_times span {
  padding-left: 0;
  line-height: normal;
}

#estimateddelivery .ed_item svg {
  display: none;
}

#estimateddelivery .ed_date_init {
  padding-left: 0 !important;
}

.pla_custom_select_container .pla_color_swatch {
  z-index: 5;
  left: -1px;
  width: 101%;
}

.af-color-box {
  border-radius: 4px;
}

.pla_custom_select_container .pla_color_swatch img {
  border-radius: 4px;
}


.div_delivery_times svg {
  display: none;
}

#product main {
  background-color: #ededed;
}

#product .card.product_custom_nav_tabs_container,
#product .card.product_custom_nav_tabs_container .nav-link {
  background-color: #ededed;
}

#product .card.card--reassurance,
#product .card.card--reassurance .list-group-item {
  display: none;
}

ul#options {
  z-index: 5;
}


span.lyoshowvatfree2 {
  display: block;
}

span.lyoshowvatfree2 span {
  font-size: 14px !important;
  font-weight: 700;
}

.product-miniature .product-price-and-shipping .price {
  font-size: 26px;
  line-height: 1.1;
}

.row.mainrow .col-md-6.col-lg-7.div_right_col .div_right_col_container {
  border-right: none;
}

#product .div_left_col {
  padding: 0 0 0 15px;
}

#product .div_left_col .div_left_col_container {
  padding: 12px;
  border-radius: 20px;
  background: white;
}

.row.mainrow .div_right_col {
  padding: 0 6px 0 0;
  gap: 12px;
}

.row.mainrow .div_right_col .div_right_col_container {
  border-right: unset;
  padding: 12px;
  background: white;
}

@media (max-width: 767px) {
  #product .div_left_col {
    padding: 0 6px 0 6px;
  }

  #product .div_left_col .div_left_col_container {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-bottom: 0;
  }

  .row.mainrow .div_right_col {
    padding: 0 6px 0 6px;
    top: -1px;
  }

  .row.mainrow .div_right_col .div_right_col_container {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-top: 0;
    border-bottom: 0;
  }
}

@media (min-width: 768px) {
  /* MZS 2026-06-10 r7 — reverted r6 Fix A: restored r2 unified-card-with-right-column
     pattern (height: 100% stretch, border-right: 0 + flat right-side radii, so the left
     card's right edge merges with the right column's left edge). User wants unified look. */
  #product .div_left_col .div_left_col_container {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-right: 0;
  }

  .row.mainrow .div_right_col .div_right_col_container {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-left: 0;
  }
}

#product-buy-column {
  width: 100%;
}

#product .product-buy-box {
  flex: 1 0 21%;
  opacity: 1;
  padding-left: 40px;
  border-left: unset;
  padding: 12px;
  background: white;
  height: 100%;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.125);
}


.product-miniature .pla_attribute_group_container:first-child {
  margin-top: 0.4rem;
}

.div_right_col_container .product-prices {
  gap: 0;
}

#product .price-1 {
  font-size: 11px;
  color: #554f58;
  padding-bottom: 3px;
}

#product .orignal-price {
  font-size: 14px;
}

@media (min-width: 1200px) {
  .div_thumbnails .images-container.has_thumbnails>.div_flagsandimgcontainer {
    margin: auto;
  }
}

.div_right_col_container .product-prices span.current-price-display.price {
  font-size: 24px;
}


.product-prices .current-price {
  line-height: normal;
}

.product-prices .original-price {
  font-size: 13px;
}

.pla_custom_select_container .div_custom_select .span_image,
.pla_custom_select_container .div_custom_select .span_image img {
  border-radius: 4px !important;
}

.product-miniature .div_details_cart .details.quote .btn:hover {
  background-color: #f264301a !important;
}

.product-miniature .div_details_cart .details.info .btn:hover {
  background-color: #0072bc1a !important;
}

#product .div_top_col {
  padding-left: 0;
}

#product .div_right_col_container .fly_to_quote_cart_button:hover,
.quickview.show .fly_to_quote_cart_button:hover {
  background-color: #f264301a !important;
}

section.product-attachments .attachment-name-container {
  flex: 1;
}

.row.mainrow .col-md-12.col-lg-12.div_bottom_col {
  padding-top: 18px;
}

.row.mainrow .col-md-12.col-lg-12.div_bottom_col .product-tab-container {
  flex: 1 0 100%;
  padding-right: 0;
}

@media (max-width: 767px) {
  .product-miniature:not(.product_show_list) .listview-container {
    margin-top: 0.2rem;
  }
}

.price.current-price-discount {
  color: var(--secondary-bg-color);
}

@media (max-width: 767px) {
  .products .product-description .h3.product-title {
    min-height: 112px;
  }
}

#cart .card.cart-summary.mb-5 .checkout.card-block {
  background-color: transparent !important;
}

#cart .share-basket-widget h3.card-header {
  display: none;
}

.share-basket-widget.card {
  background-color: transparent !important;
}

#estimateddelivery div {
  margin-top: 0 !important;
  margin-bottom: 1px !important;
}

.product-miniature .product-description .div_delivery_times {
  margin-bottom: 0 !important;
}

#header .quotes_cart .header {
  width: auto;
}

.product__product-price .price-1 {
  color: #554f58;
  font-size: 11px;
}

#estimateddelivery svg+span {
  line-height: normal;
}

.quickview h1 {
  line-height: 1.2;
  margin-bottom: 4px;
}

.modal-dialog .hide-default {
  display: none;
}

span#color-image {
  border-radius: 5px;
}

#header #quotesCart .quotes_cart {
  flex-direction: column;
}

#header .clone-slidebar-toggle {
  border-radius: 8px;
}

.product-miniature .product-description .div_delivery_times {
  line-height: 24px;
}

.product-miniature .product-description .div_delivery_times span {
  line-height: 24px;
}

.div_delivery_times {
  padding-top: 0;
}

#header #_desktop_header-icons a {
  font-weight: 700;
}

@media (max-width: 767px) {
  .product-miniature .product-description .div_delivery_times {
    margin-bottom: 0 !important;
  }

  #estimateddelivery div {
    margin-bottom: 0 !important;
  }

  .product-miniature .estimateddelivery .ed_item p>span {
    line-height: 24px !important;
  }
}

body:not(.loaded) #header .blockcart:hover .svg_icon.cart_icon>use {
  color: var(--header-bottom-bg-color);
}

.product-reference .reference-number label {
  margin-bottom: 0 !important;
}

#header #quotesCart .header span.quotes-text-mobile {
  line-height: normal;
}

.div_right_col_container .product-prices {
  padding-bottom: 0.1rem;
}


.product-reference>div {
  line-height: normal;
  color: var(--reference-label-color);
}


/** PeterChamp 2026-03-25 - Show lowest delivery time when no combo selected **/
/* Hide the empty ED element, keep sibling label visible via override below */
#product.ed-show-default #estimateddelivery.moved,
#product.ed-show-default .div_right_col_container > .estimateddelivery:not(.hide-default) {
  display: none !important;
}
/* Override module's sibling-hiding rule to keep static label in correct position */
#product.ed-show-default #estimateddelivery.moved ~ .div_delivery_times {
  display: flex !important;
}
/* When ED module is moved but empty (on combo URLs), show static sibling label */
#product:not(.ed-show-default) #estimateddelivery.moved:empty ~ .div_delivery_times {
  display: flex !important;
}

.product-prices div.tax-shipping-delivery-label {
  padding-bottom: 2px;
}

#product .custom-nav-thumbnails,
.quickview .custom-nav-thumbnails {
  justify-content: space-between;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
}

.quickview .custom-nav-thumbnails.custom-show-arrows {
  display: flex !important;
}

#product .custom-nav-thumbnails>div,
.quickview .custom-nav-thumbnails>div {
  cursor: pointer;
}

#product .div_thumbnails .slick-arrow,
.quickview .images-container .slick-arrow {
  display: none !important;
}

.custom-nav-thumbnails i {
  font-size: 30px;
  color: #f26430;
}

/* ***************************** */
/* hide profiling from customers */
/* ***************************** */
#prestashop-profiling {
  display: none !important;
}

/* ***************************** */
/* ***************************** */
/* ***************************** */

/* @media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
} */

body#index #custom-text .home-banner-row.custom-text {
  flex-wrap: wrap !important;
  flex-direction: row !important;
  max-height: 35vh;
  overflow: hidden;
  transition: max-height 1s ease;
  row-gap: 0;
}

/* .div_showmoreless_container.need_showmore.opened .home-banner-row.custom-text {
  max-height: fit-content;
  transition: all 0.5s ease;
} */

.div_showmoreless_container .div_showmoreless_buttons {
  position: relative;
  z-index: 2;
}

.home-banner-row.custom-text:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.div_showmoreless_container.need_showmore.opened .home-banner-row.custom-text:after {
  content: none;
}

.home-banner-row.custom-text .home-banner-row_title {
  font-size: 39px;
  font-weight: 600;
  text-transform: none;
  margin-top: 20px;
}

.home-banner-row.custom-text .home-banner-row_title.secondary {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 10px;
}

.home-banner-row.custom-text>.home-banner-row:last-child,
.home-banner-row.custom-text>.home-banner-row:last-child>p {
  margin-bottom: 0 !important;
}

body#index #custom-text {
  margin-bottom: 42px;
  border-radius: 15px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 25%);
}

/* @media (max-width: 1024px) {
  .home-banner-row.custom-text .home-banner-row_title:not(.secondary) {
    padding: 0 10px;
  }
} */

body#index .home-banner-row.custom-text .first_column,
body#index .home-banner-row.custom-text .second_column {
  flex: 1 1 0;
}

body#index #custom-text .second_column {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 15px;
  align-self: flex-start;
}

@media (max-width: 787px) {
  body#index .home-banner-row.custom-text {
    flex-direction: column;
  }

  body#index .home-banner-row.custom-text .first_column,
  body#index .home-banner-row.custom-text .second_column {
    flex: 1 0 100%;
  }

  body#index .home-banner-row.custom-text .second_column .home-banner-row_title {
    display: none;
  }

  body#index .home-banner-row.custom-text .second_column .container-image {
    align-self: center;
  }
}

/* ***************************** */

/* ***End home page text block** */

/* ***************************** */



BODY#category.category-id-278 .l-wrapper,

BODY#category.category-id-10229 .l-wrapper,

BODY#category.category-id-10323 .l-wrapper,

BODY#category.category-id-10882 .l-wrapper {

	display: block !important;

}

.home-banner-row .custom-index-category-label-container {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 30%;
}

@media (max-width: 767px) {
  .home-banner-row .custom-index-category-label-container {
    top: 40% !important;
  }

	.home-banner-row .custom-index-category-label-container .custom-index-category-label {
		font-size: 14px !important;
    padding: 8px !important
	}
}

.home-banner-row .custom-index-category-label-container .custom-index-category-label {
	display: inline-block;
  padding: 12px 24px;
  background-color: #ffffffc0;
  color: #000;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  border-radius: 26px;
  font-family: sans-serif;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 25%);
  transition: all 0.3s ease;
}

.home-banner-row .cards-column:hover .custom-index-category-label-container .custom-index-category-label {
	box-shadow: 2px 2px 12px 4px rgba(0, 0, 0, 25%);
	color: #f26430;
  background-color: #ffffff
}

/* Start - Added by Huni from PrestaChmps - 05.22.2025 */
#authentication .register-form form#customer-form .form-fields {
	display: flex;
	flex-direction: column;
}

#authentication .register-form form#customer-form .form-group:nth-of-type(1) {
	order: 1;
}

#authentication .register-form form#customer-form .form-group:nth-of-type(2) {
	order: 2;
}

#authentication .register-form form#customer-form .form-group:nth-of-type(5) {
	order: 3;
}

#authentication .register-form form#customer-form .form-group:nth-of-type(3) {
	order: 4;
}

#authentication .register-form form#customer-form .form-group:nth-of-type(4) {
	order: 5;
}

#authentication .register-form form#customer-form .form-group:nth-of-type(6) {
	order: 7;
}

#authentication .register-form form#customer-form .form-group:nth-of-type(7) {
	order: 8;
}

#authentication .register-form form#customer-form .form-group:nth-of-type(8) {
	order: 8;
}

#authentication .register-form form#customer-form .form-group:nth-of-type(9) {
	order: 10;
}

#authentication .register-form form#customer-form .form-group:nth-of-type(11) {
	order: 11;
}

#authentication .register-form form#customer-form .form-group .text-muted,
#authentication .register-form form#customer-form .form-group:nth-of-type(10) {
	display: none;
}

/* End */

/* MZS - Popup #32 Custom CSS */
#cp_32 img {
	filter: brightness(0.8);
}

.cp-popup .cp-shadow img {
	display: none !important;
}

/** PeterChamp Fix all products notavailble for order 2025-06-26 **/
.product-miniature[data-available_for_order="0"] .pla_buttons_container.custom-add-to-cart-position {
	display: none;
}

.product-miniature[data-available_for_order="0"] .pla_buttons_container.qty-container {
	width: 100% !important;
}

.product-miniature[data-available_for_order="0"] .custom-footer-buttons {
	justify-content: center;
}

button.btn.btn-default.button-search.ssa-button-search:hover {
  box-shadow: unset;
}

#header .header-nav__col>*:not(:empty)~.div_header_nav_cutom>a:not(:first-child) {
  border-left: 1px solid white;
}

#_desktop_header-icons {
  font-size: 14px;
}

@media (min-width: 1200px) {
  header .container {
    max-width: 1200px;
  }
}

#header .form-control {
  font-size: 14px;
}

#_desktop_searchbarcontainer .btn:not(:disabled):not(.disabled):active, #_desktop_searchbarcontainer .btn:focus {
  box-shadow: unset !important;
}

#div_header_tel p {
  font-size: 14px;
}

#_desktop_header-icons > div:not(:last-of-type) {
  border-right: 1px solid #ffffff66;
}

#_desktop_header-icons > div {
  padding: 6px 12px;
}

#header #_desktop_header-icons .afqQuotesCartOver .custom-bottom-link,
#header #_desktop_header-icons #_desktop_user_info .custom-bottom-link {
  line-height: normal;
  margin-top: 5px;
}

.menu-custom-tabs .menu-custom-tab {
  position: relative;
}

@media (max-width: 1023px) {
  .menu-custom-tabs {
    padding: 8px 4px 0 !important;
    max-width: 768px;
    margin: auto;
    gap: 4px;
  }

  .menu-custom-tabs .menu-custom-tab {
    font-size: 0.75rem;
    padding: 0.5rem 0.3125rem;
  }

  #_desktop_user_info svg {
    display: none;
  }
}

@media (max-width: 360px) {
  .menu-custom-tabs .menu-custom-tab {
    font-size: 0.7rem;
    padding: 0.45rem 0.3rem;
  }
}

@media (max-width: 767px) {
  .menu-custom-tabs .menu-custom-tab svg {
    display: none;
  }
}

.menu-custom-tabs .menu-custom-tab svg {
  position: absolute;
  right: 0px;
  transition: all 0.25s ease;
  width: 26px;
  height: 26px;
}

.menu-custom-tabs .menu-custom-tab.active svg {
  rotate: 90deg;
}

#header #_desktop_header-icons .blockcart-container a {
  font-size: 18px;
  margin-top: 2px;
}

.custom-bottom-link-smaller {
  font-size: 11px;
  margin-top: 4px;
  font-weight: 400;
  color: #e9e9e9;
}

@media (min-width: 1200px) {
    .header-top__col {
        width: 30%;
    }
}

#header .quotes_cart .header {
  position: relative;
}

#carousel.pch_imageslider .slider-caption .caption-description > p {
  line-height: normal;
}

#index .div_homepage_banner_container {
  margin-top: 0 !important;
}

@media (min-width: 1024px) { 
  .ets_mm_megamenu.bg_submenu[data-bggray="bg_gray"]:before {
    visibility: visible !important;
  }
  
  body .div_header_middle_bottom:not(.sticky) .ets_mm_megamenu:before {
    top: 207px !important
  }
  
  body .div_header_middle_bottom.sticky .ets_mm_megamenu:before {
    top: 183px !important
  }
}

#_desktop_user_info:hover a,
#_desktop_user_info:hover .custom-bottom-link-smaller, 
.afqQuotesCartOver:hover .custom-bottom-link-smaller {
  color: var(--header-bottom-bg-color) !important;
}

#_desktop_user_info a,
#_desktop_user_info .custom-bottom-link-smaller, 
.afqQuotesCartOver .custom-bottom-link-smaller,
.cls-1 {
  transition: all 0.25s ease;
}

#_desktop_user_info:hover .cls-1 {
  stroke: var(--header-bottom-bg-color) !important;
}

.cls-1 {
  fill: none;
	stroke-miterlimit: 10;
	stroke-width: 2; 
  stroke: white;
}

@media (max-width: 767px) {
    #header .shopping-cart .item-count {
      top: -1px !important;
      right: -8px;
  } 
}

@media screen and (max-width: 479px) {
    #index .cards-column {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
        padding: 5px;
    }
}

@media (min-width: 400px) {
  #index section#search_filters_brands span.span_titletext a, #index .home-banner-row_title h3 {
    font-size: 28px;
  }
}

#_desktop_contactshop {
	padding: 5px 0;
}

/* MZS 2026-06-12 — checkout redesign r2: header no longer fully hidden on
   checkout; minimal logo + Secure Checkout bar styled in the thecheckout
   override custom.css (hidden <992px there to keep mobile as before) */

.home-banner-row a {
	font-weight: 600;
}

/* MZS - Cart page */
.cart-item:not(:last-child) {
  border-color: rgba(0,0,0,.125);
}

.cart-product-variants .small span::before {
  display: none !important;
}

.table-bordered,.table-bordered td,.table-bordered th {
    border: none
}

body#cart #wrapper {
    padding-top: 0 !important;
}

#cart .cart-footer-info #pch-reassurance {
    background-color: unset;
}

#cart .custom-breadcrumb .custom-cart-link {
  color: #0072bc;
  line-height: 24px;
}

#cart .custom-breadcrumb .custom-cart-link:not(i):not(span) {
  font-size: 14px;
  text-decoration: underline;
  font-weight: 700;
}

#cart h1 {
  font-size: 1.625rem;
  font-weight: 700;
  color: #414042
}

#cart .cart-buttons .delete-all-products-button .btn-delete-all-products, #cart .remove-from-cart {
  font-weight: 500;
  font-size: 14px;
}

#cart .remove-from-cart {
  color: #999999;
}

#cart .cart-buttons .delete-all-products-button .btn-delete-all-products{
  color: #999;
}
#cart .cart-buttons .delete-all-products-button .btn-delete-all-products:hover{
  /* color: var(--btn-hover-bg-color); */
  text-decoration: underline;
}

#cart .cart-buttons .delete-all-products-button .btn-delete-all-products:hover, #cart .remove-from-cart:hover {
  text-decoration: underline;
}

#cart .cart-line-product-actions {
  margin-top: 12px;
}

#cart .product-line-actions .input-group.bootstrap-touchspin {
  max-width: unset !important;
}

/* MZS 2026-06-18c — Webkul pack-qty cart line: the module stamps the qty <input> with stray
   `input-group bootstrap-touchspin wk-cart-line` classes that pull in Bootstrap layout/border rules,
   so it renders unlike a normal line (the prior fixed-33px clamp made it too NARROW, taller, and left a
   pill border on the input — the "weird border inside"). Measured a real normal line in the SAME wrapper:
   it FLEX-GROWS to fill (~60px), is 32px tall, has NO top/bottom border, NO radius, white bg, only the
   1px #e2e0db left/right dividers. Match that here. High specificity (`.input-group.bootstrap-touchspin >
   input…`) + longhand border properties to beat the Bootstrap rules the stray classes trigger (the prior
   `border:none` lost the cascade). Wrapper left to size naturally (dropped the :has rule). Basket + checkout. */
body#cart .input-group.bootstrap-touchspin > input.js-cart-line-product-quantity.wk-cart-line,
body#module-thecheckout-order .input-group.bootstrap-touchspin > input.js-cart-line-product-quantity.wk-cart-line {
  display: block !important;
  flex: 0 0 60px !important;
  width: 60px !important;
  min-width: 0 !important;
  max-width: 60px !important;
  height: auto !important;
  min-height: 0 !important;
  border-style: solid !important;
  border-color: #e2e0db !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  border-left-width: 1px !important;
  border-right-width: 1px !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: center !important;
  font-weight: 400 !important;
  padding: 0 !important;
  -moz-appearance: textfield !important;
}
body#cart .input-group.bootstrap-touchspin > input.wk-cart-line::-webkit-outer-spin-button,
body#cart .input-group.bootstrap-touchspin > input.wk-cart-line::-webkit-inner-spin-button,
body#module-thecheckout-order .input-group.bootstrap-touchspin > input.wk-cart-line::-webkit-outer-spin-button,
body#module-thecheckout-order .input-group.bootstrap-touchspin > input.wk-cart-line::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
/* The stray classes on the input bloat the wrapper via a content-sized flex chain (211px vs the normal
   118px). Size the pack wrapper to its content so it hugs the 60px input + buttons like a normal line.
   Needs :has (modern browsers). */
body#cart .input-group.bootstrap-touchspin:has(> input.wk-cart-line),
body#module-thecheckout-order .input-group.bootstrap-touchspin:has(> input.wk-cart-line) {
  width: max-content !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
}
/* MZS 2026-06-18b — client: the cart/checkout qty stepper VALUE shouldn't be bold (defeats the global
   .bootstrap-touchspin>input{font-weight:bold} at custom.css:5295 for cart-line steppers, normal + pack). */
body#cart .js-cart-line-product-quantity,
body#module-thecheckout-order .js-cart-line-product-quantity {
  font-weight: normal !important;
}


#cart .div_qty {
  position: relative;
}

#cart .quantity-label {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  font-size: 12px;
  color: #6e6e6e;
  padding: 0 4px;
}

#cart .cart-summary .estimated-delivery {
  font-size: 14px;
  color: #009b72;
  text-align: center;
}

.bootstrap-touchspin .input-group-btn .btn.bootstrap-touchspin-down {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.bootstrap-touchspin .input-group-btn .btn.bootstrap-touchspin-up {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#cart .cart-summary-line {
  border-top: 1px solid rgba(0,0,0,.125);
  font-size: 14px;
}

#cart .cart-total .value {
  color: #0072bc;
  font-size: 20px;
}

@media (max-width: 767px) {
  #cart .share-basket-widget a {
    font-size: 12px;
  }
}

body#module-askforaquotepro-QuotesCart #quoteAuth .quoteSubmitOptions.clearfix .js-customer-form .form-group:nth-of-type(1) {
    display: flex !important;
}
@media (max-width: 768px) {
  body#module-askforaquotepro-QuotesCart #quoteAuth .quoteSubmitOptions.clearfix .js-customer-form .form-group:nth-of-type(1) {
      display: block !important;
  }
}

body#cart .cart-item .product-line-info.product-price .current-price-display, #cart span.product-price {
  color: #f86434;
}

/* MZS - new Index section */
.custom-index-banner-section .banner-image-1 {
  background-image: url('/img/index_modern.jpg');
}

.custom-index-banner-section .banner-image-2 {
  background-image: url('/img/index_traditional.jpg');
}

.custom-index-banner-section .banner-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
  border-radius: 15px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 25%);
}

.custom-index-banner-section .banner-overlay {
  backdrop-filter: brightness(0.8);
  clip-path:inset(0 round 15px);
  padding: 36px;
}

.custom-index-banner-section h2 {
  font-size: 36px;
  font-weight: 600;
}

.custom-index-banner-section .title-shade {
  font-size: 32px;
  margin: 0 0 10px 0;
  text-transform: none;
  font-weight: 700;
}

.custom-index-banner-section .banner-image p {
  font-size: 16px
}

.custom-index-banner-section .title-section {
  padding-left: 15px;
}

.custom-index-banner-section .title-section p {
  max-width: 700px;
}

.custom-index-banner-section .btn-custom-shop-now {
  display: inline-block;
  padding: 12px 24px;
  background-color: #ffffffc0;
  color: #000000;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 26px;
  font-family: sans-serif;
  margin-top: 20px
}
.custom-index-banner-section .btn-custom-shop-now:hover {
  color: #f26430;
  background-color: #ffffff
}

.custom-index-banner-section .banner-container {
  padding: 10px;
}

@media (max-width: 767px) {
  .custom-index-banner-section h2 {
    font-size: 28px;
  }

  .custom-index-banner-section h3 {
    font-size: 20px !important;
  }
}

/* MZS - hide field-alias on customer page */
#address .field-alias,
#address .field-vat_number,
#address .field-id_country,
#address .field-phone_mobile {
  display: none !important;
}

#module-thecheckout-order div.form-group:has(input[name="address_oid"]) {
    display: none;
}

/* .bootstrap-touchspin-injected{
    display: flex;
    align-items: stretch;
} */

.js-hidden {
    display: none !important;
}

.js-visible {
    display: block !important;
}

/* MZS quick manufacturer page fix */
#manufacturer .span_showmoreless_fade {
    background: linear-gradient(0deg, var(--main-bg-color), rgba(255, 255, 255, 0)) !important;
}
/* end */

@media (max-width: 767px) {
  #product .product-description iframe {
    max-width: 100% !important;
  }
}
.bargainBlock.customer_bargain {
    background-color: #2fb5d2 !important;
}

@media (max-width: 1199px) {
    .page-content--module-smartblog-category {
        display: flex;
        flex-direction: column;
    }
}

.banner-relative {
  position: relative;
}

.custom-banner-overlay {
  position: absolute;
  top: 25%;
  left: 5%;
  max-width: 540px;
}

.custom-banner-overlay .title {
  font-size: 40px;
  color: white;
  margin: 0 0 10px 0;
  text-transform: none;
  font-weight: 700;
}

.custom-banner-overlay .description {
  font-size: 18px;
  color: white;
  margin: 0 0 10px 0;
  line-height: initial;
  padding-top: 0;
}

.custom-banner-overlay .button-link {
    display: inline-block;
    padding: 12px 24px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    border-radius: 26px;
    font-family: sans-serif;
    margin-top: 20px;
}

@media (max-width: 767px) {
  .custom-banner-overlay .title {
    font-size: 24px !important;
  }

  .custom-banner-overlay .description {
    font-size: 14px !important;
  }

  .custom-banner-overlay {
    top: 10%;
    max-width: 325px;
  }
}

/* =============================================================
   #af_form – Single-line filter bar + dropdown fixes
   ============================================================= */

/* Flex row: all filters on one line */
.horizontal-layout #af_form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 5px 0;
}

/* Keep hidden inputs out of the flex flow */
#af_form .hidden_inputs {
  display: none;
}

/* Each filter: auto-width, no float */
.horizontal-layout .h-el {
  float: none;
  width: auto;
  flex: 0 1 auto;
  padding: 0;
  margin: 0;
  position: relative;
}

/* Outer filter item: rounded pill style */
@media (min-width: 768px) {
  body:not(.has-compact-filter) #amazzing_filter .af_filter:not(.no-available-items) {
    border: 1px solid rgba(0,0,0,.125) !important;
    padding: 0.25rem;
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    /* MZS 2026-05-19 - was 5px, set to 0 so pills align to .title_block center in the #amazzing_filter flex row */
    margin-bottom: 0;
  }
}

/* Inner trigger: no border, compact text */
#af_form .af_filter .af_subtitle {
  border: none;
  font-size: 14px;
  padding: 4px 20px 4px 6px;
  height: auto;
  line-height: 1.4;
  white-space: nowrap;
  min-width: unset;
}

/* Dropdown: below the button, wider, with shadow */
.horizontal-layout .af_filter_content {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  min-width: 220px;
  max-height: 350px;
  overflow-y: auto;
  font-size: 12px;
  margin-top: 2px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #c8c8c8;
  padding: 8px !important;
  z-index: 2;
  overflow-y: auto;
}

/* Scrollable list inside dropdown */
/* .horizontal-layout .af_filter_content ul {
  max-height: 300px;
} */

/* MORE FILTERS link inline - pill-style + brand-blue accent so it doesn't disappear into the chrome.
   2026-05-19: was font-size:11px gray-on-gray and visually disappeared next to the pills.
   2026-05-19 follow-up: removed font-weight/letter-spacing; added margin-top:0 + box-shadow:none + :active
   to neutralize the module's :focus rule that was shifting the button down by 1em + restyling text. */
#af_form .toggleMoreFilters {
  float: none;
  margin: 0;
  font-size: 12px;
  background: #fff;
  color: #1A6FAB;
  border: 1px solid #1A6FAB;
  border-radius: 10px;
  padding: 5px 12px;
  text-transform: none;
  transition: background 0.15s, color 0.15s;
}
#af_form .toggleMoreFilters:hover,
#af_form .toggleMoreFilters:focus,
#af_form .toggleMoreFilters:active {
  background: #1A6FAB;
  color: #fff;
  outline: none;
  box-shadow: none;
  margin-top: 0;
}
/* Space the +/- icon away from the "More/Less filters" text so it doesn't crowd the label */
#af_form .toggleMoreFilters .icon-plus,
#af_form .toggleMoreFilters .icon-minus {
  margin: 0 2px 0 6px;
}

/* =============================================================
   Colour filter (a62): wider for the 2-column swatch grid.
   2026-05-26 - selector was unscoped, overrode 220px base for ALL
   dropdowns. Scoped to .a62 so other filters use the base 220px. */

.horizontal-layout .af_filter.a62 .af_filter_content {
  min-width: 320px;
  max-height: 300px;
  overflow-y: auto;
}

/* 2026-05-26 - Unify dropdown item row heights across filter types.
   Tighter than round-2 (24px vs 30px). NO display:flex on <li> because that
   would override the module's .cut-off .cut { display:none } (front.css:438)
   and break the more/less toggle. Alignment lives on the <label>, which the
   module already makes flex at front.css:38-42. */
.horizontal-layout .af_filter_content li {
  min-height: 24px;
  padding: 0;
}
.horizontal-layout .af_filter_content .af-checkbox-label,
.horizontal-layout .af_filter_content .af-radio-label {
  padding: 3px 8px;
  width: 100%;
  align-items: center;
}
.horizontal-layout .af_filter.a62 .af-color-box {
  width: 22px;
  height: 22px;
  min-width: 22px;
}
.horizontal-layout .af-inline-colors li {
  min-height: 24px;
  padding: 0 6px;
}

/* 2026-05-27 - Neutralize the module's inner <ul> overflow (front.css:46-50
   sets max-height:750px; overflow-y:auto). Our panel already scrolls; the
   inner ul scrolling on top of it produced a double scrollbar once the more/less
   cut-off broke and all items rendered. */
.horizontal-layout .af_filter_content ul {
  max-height: none;
  overflow: visible;
  padding: 0;
  margin: 0;
}

/* 2026-05-27 - Make more/less toggle flow inline at the end of the list
   instead of being pinned absolutely at the panel bottom (front.css:417-419
   + :642-645), which overlaid item rows once the panel scrolled. */
.horizontal-layout .af_filter_content .toggle-cut-off {
  position: static;
  border-top: none;
  margin: 6px 0 0;
  text-align: center;
  display: block;
}
.horizontal-layout .af_filter_content .toggle-cut-off span {
  position: static;
  top: auto;
  background: none;
  padding: 0;
}

/* 2026-05-26 - Hover-row highlight (same light-blue as active pill). */
.horizontal-layout .af_filter_content li:hover .af-checkbox-label,
.horizontal-layout .af_filter_content li:hover .af-radio-label {
  background: #eff6ff;
  border-radius: 4px;
}
.horizontal-layout .af-inline-colors li:hover {
  background: #eff6ff;
  border-radius: 4px;
}

/* 2026-05-26 - Apply button row inside each dropdown panel.
   Click only closes the panel (custom.js handler); AJAX behavior is
   unchanged (module fires on checkbox change as before). */
.horizontal-layout .af_filter_content .af-apply-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e6e6e6;
}
.horizontal-layout .af-apply-close {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 6px;
}

.horizontal-layout .af_filter:last-child .af_filter_content {
	left: unset;
	right: 0;
}

.horizontal-layout .af_filter_content::-webkit-scrollbar {
  width: 8px; 
  background-color: rgba(0,0,0,0);
  -webkit-border-radius: 10px;
}

.horizontal-layout .af_filter_content::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

.horizontal-layout .af_filter_content::-webkit-scrollbar-thumb:vertical {
  background: rgba(0,0,0,0.5);
  -webkit-border-radius: 10px;
}

.horizontal-layout .af_filter_content::-webkit-scrollbar-thumb:vertical:active {
  background: rgba(0,0,0,0.61); 
  -webkit-border-radius: 10px;
}

#af_form .af_filter.a62 .af_filter_content ul {
  column-count: 1;
  column-gap: 10px;
  max-height: none;
  overflow: visible;
}

/* Show ALL colour items even when cut-off is active */
#af_form .af_filter.a62.cut-off .cut {
  display: block !important;
}

/* Hide the show more/less toggle */
#af_form .af_filter.a62 .toggle-cut-off {
  display: none !important;
}
.af-inline-colors li{
  float:none;
}

/* =========================================================
   PeterChamp 2026-04-14 - Product page Phase A layout refactor
   Geraint mockup v3: 2-col product page, hide 3rd sidebar,
   bigger price & orange CTA, tighter spacing
   ========================================================= */

/** PeterChamp 2026-04-14 - REVERTED: hiding 3rd col / widening 50% was wrong interpretation.
 *  Mockup actually wants 3 columns: image | description+features | buy block.
 *  Column layout kept native (5/4/3), buy block moved to 3rd col via template edit. */

/** PeterChamp 2026-04-14 - bigger bolder price per mockup (was 24px). Keep original brand-orange #f26430 */
body#product .div_right_col_container .product-prices span.current-price-display.price {
  font-size: 32px;
  font-weight: 700;
  /* color intentionally not overridden - keeps original orange #f26430 from line 4344 */
}


/** PeterChamp 2026-04-14 - prominent orange Add-to-Basket CTA per mockup */
body#product button.btn.btn-primary.add-to-cart.btn-lg.btn-block.btn-add-to-cart.js-add-to-cart {
  font-size: 18px;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/** PeterChamp 2026-04-14 - tighter vertical spacing inside right column */


body#product .div_right_col_container .product-actions {
  margin-top: 10px;
}

/** PeterChamp 2026-04-14 - compact reference/brand row with thin divider */
/* MZS 2026-06-09 r20 - removed border-bottom + padding-bottom on .div_product_reference (item 4) */

/** PeterChamp 2026-04-14 - product name: bigger, tighter per mockup */
/** PeterChamp 2026-04-14 - A2 additive bullets: description_short + feature list above buy block */
body#product .pc_product_description_short.pc_phaseA2 {
  font-size: 13px;
  line-height: 1.5;
  color: #404040;
  margin: 4px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

body#product ul.pc_product_features_bullets.pc_phaseA2 {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

body#product ul.pc_product_features_bullets.pc_phaseA2 li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.4;
  color: #333;
}

body#product ul.pc_product_features_bullets.pc_phaseA2 li:before {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 0;
  color: #2a9d5c;
  font-weight: 700;
  font-size: 14px;
}

body#product ul.pc_product_features_bullets.pc_phaseA2 .pc_feat_name {
  font-weight: 600;
  color: #252525;
}

body#product ul.pc_product_features_bullets.pc_phaseA2 .pc_feat_val {
  color: #555;
}
/** PeterChamp 2026-04-14 - Stack Add-to-Basket under Qty input in 3rd col (was side-by-side flex-row) */
/* =========================================================
   End PeterChamp 2026-04-14 Product page Phase A
   ========================================================= */

/* =========================================================
   PeterChamp 2026-05-07 revision 8 - Listing miniature flex-wrap layout
   Replaces the previous CSS Grid card (Phase B/C, 2026-04-23/28) plus the
   never-wired .pla-bottom slot system. The card is now a flex-wrap container
   whose direct children are the 4 sections defined in product.tpl:
     .pla-section--image       - flex order 1, default 35% / switched 100%
     .pla-section--title-attrs - flex order 2, default 65% / switched 100%
     .pla-section--prices      - flex order 3, full width
     .pla-section--actions     - flex order 4, full width (qty/basket/quote/info)
   Switched view is .products--two-up at <=1023px - all sections become 100%
   stacked vertically per the mobile mockup.
   Companion changes (revision 8):
     - themes/guttercentre/templates/catalog/_partials/miniatures/product.tpl
       (flat 4-section structure, hand-placed qty + Add-to-Basket so pla.js
       binds to them rather than injecting duplicates)
     - themes/guttercentre/assets/js/custom.js
       (pla_display_quantity_field=false override, view-switcher click handler,
       localStorage restore, prestashop.on('updateProductList') re-apply)
   ========================================================= */
.product-miniature .card.card-product.thumbnail-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}

/* MZS 2026-05-28 r7 - rewrite of the 2026-05-22 fix.
   Prior version used align-content:space-between on flex-wrap, which (a) didn't
   pin the delivery line near the buttons and (b) became wrong once pchcustomercollect's
   .lc-delivery-opts started rendering into title-attrs on no-price cards. We now always
   render an empty .pla-section--prices (product.tpl r7) and lay the card out as a grid:
   image|title at top, big spacer middle, prices then actions stacked at bottom. The
   .lc-delivery-opts gets moved into the prices section by the module's relocate JS
   (cart.js) which finds .pla-price-anchor as priceBlock.lastElementChild. */
@media (min-width: 1024px) {
  .product-miniature.pla-no-price .card.card-product.thumbnail-container {
    display: grid;
    grid-template-columns: 35% 65%;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "image title"
      "image .    "
      "prices prices"
      "actions actions";
    align-items: start;
    column-gap: 0;
  }
  .product-miniature.pla-no-price .pla-section--image       { grid-area: image;   width: auto; }
  .product-miniature.pla-no-price .pla-section--title-attrs { grid-area: title;   width: auto; }
  .product-miniature.pla-no-price .pla-section--prices      { grid-area: prices;  width: auto; }
  .product-miniature.pla-no-price .pla-section--actions     { grid-area: actions; width: auto; }
}

.pla-price-anchor { display: none; }

/* MZS 2026-05-28 r8a - Avoid FOUC: pchcustomercollect's
   displayProductListReviews hook emits .lc-delivery-opts INSIDE .pla-section--title-attrs.
   Its own client JS (modules/pchcustomercollect/views/js/cart.js relocateListingCollectBlocks)
   moves it to the prices section on DOM-ready and stamps data-pch-moved="1". Until that runs,
   the element is briefly visible in the wrong place. Hide it until the move sets the attribute. */
.product-miniature .lc-delivery-opts.pch-lc-delivery-opts:not([data-pch-moved="1"]) {
  visibility: hidden;
}

/* MZS 2026-05-28 r8b - Bottom-align the delivery block inside an EMPTY
   prices section (no-price cards) so it lands at the same Y as has-price cards,
   where the delivery block naturally sits at the bottom because price/VAT/etc
   content fills the rest of the equalized section height. */
.product-miniature .pla-section--prices.pla-prices--empty {
  display: flex !important; /* override .producthasdiscount { display: grid } when both classes are present */
  flex-direction: column;
  justify-content: flex-end;
}

/* MZS 2026-06-08 r12 - POA / unavailable listing card state.
   - Vertically + horizontally centre the message inside .pla-section--prices's equalized height.
   - Disable Add to Basket via pointer-events + greyed colour palette (Quote stays active).
   - Hide pla.js-injected duplicate "Currently unavailable online" text in title-attrs. */
/* MZS 2026-06-09 r2 - right-align the red state message. r1 used center+stretch but text stayed
   visually left in browser (likely cache). r2 strengthens: adds text-align:right to the flex container
   so it inherits even on shrink-to-fit children; bumps the .pla-state-msg selector with .pla_block
   ancestor + !important + align-self:stretch to defeat any cascade competitor. */
/* MZS 2026-06-09 r4 - extend scope to body#search (search results page uses same listing card markup
   + bridge IIFE, but state styling was scoped body#category only → red right-aligned look fell back
   to default black left-aligned on search). Every rule below covers both. */
body#category .pla-section--prices.pla-prices--empty,
body#search   .pla-section--prices.pla-prices--empty { justify-content: center; align-items: stretch; text-align: right; }
body#category .pla_block .pla-state-msg,
body#search   .pla_block .pla-state-msg { text-align: right !important; font-size: 14px; font-weight: 700; line-height: 1.3; padding: 0 8px; align-self: stretch; }
body#category .pla-state-msg--unavailable,
body#search   .pla-state-msg--unavailable { color: #C8210D; }
body#category .pla-state-msg--poa,
body#search   .pla-state-msg--poa { color: #C8210D; }

/* MZS 2026-06-09 - POA listing bridge: the standalone modules/poa/ module injects legacy POA
   listing DOM (#poa-attributes-label outside .pla-section--prices + .btn-poa-add-to-cart clone of
   Add-to-Basket). The IIFE in custom.js re-renders POA state inside .pla-section--prices using
   the r12 .pla-state-msg--poa pattern, so these legacy elements are redundant. !important is
   required because the module sets display:block via $.show() at runtime. */
body#category .pla_block #poa-attributes-label,
body#search   .pla_block #poa-attributes-label { display: none !important; }
body#category .pla_block .btn-poa-add-to-cart,
body#search   .pla_block .btn-poa-add-to-cart { display: none !important; }

/* MZS 2026-06-09 r3 - POA listing bridge: modules/poa/views/js/front.js:145 calls
   addTocartButton.hide() when POA is active. Force-show the native button (not the
   .btn-poa-add-to-cart clone, which stays hidden). Use inline-flex (not inline-block) to
   preserve the theme's vertical text centering at custom.css:10897 (align-items: center
   inside the 40px-fixed-height button). Scope .pla-no-price (not .poa-inited) so the
   override only fires where the button actually needs un-hiding — POA-active + unavailable. */
body#category .pla_block.pla-no-price .pla_ajax_add_to_cart_button:not(.btn-poa-add-to-cart),
body#search   .pla_block.pla-no-price .pla_ajax_add_to_cart_button:not(.btn-poa-add-to-cart) {
  display: inline-flex !important;
}

/* MZS 2026-06-09 - POA listing bridge: when the JS shim flags a card as POA-active, hide the
   original price children so our .pla-state-msg sits in the equalised price area alone (matches
   the unavailable card layout). The shim removes the inline display:none the poa module set on
   .pla-section--prices, so we need this rule to keep the price content out of view. */
body#category .pla-section--prices.pla-state-poa-active > *:not(.pla-state-msg):not(.pla-price-anchor),
body#search   .pla-section--prices.pla-state-poa-active > *:not(.pla-state-msg):not(.pla-price-anchor) {
  display: none !important;
}

/* MZS 2026-06-09 r4 - greying + duplicate-badge-hide also need body#search variant. */
body#category .pla_block.pla-no-price .pla_ajax_add_to_cart_button,
body#category .pla_block.availability_not_available_for_order .pla_ajax_add_to_cart_button,
body#search   .pla_block.pla-no-price .pla_ajax_add_to_cart_button,
body#search   .pla_block.availability_not_available_for_order .pla_ajax_add_to_cart_button {
    background: #e0e0e0;
    border-color: #e0e0e0;
    color: #8a8a8a;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
}
body#category .pla_block.pla-no-price .pla_ajax_add_to_cart_button:hover,
body#category .pla_block.availability_not_available_for_order .pla_ajax_add_to_cart_button:hover,
body#search   .pla_block.pla-no-price .pla_ajax_add_to_cart_button:hover,
body#search   .pla_block.availability_not_available_for_order .pla_ajax_add_to_cart_button:hover {
    background: #e0e0e0;
    border-color: #e0e0e0;
    color: #8a8a8a;
}

body#category .product-miniature .product_not_available_for_order,
body#search   .product-miniature .product_not_available_for_order { display: none; }

/* MZS 2026-05-22 - item 9 (mobile): in the 2-up switched view the card is fully stacked, so space-between scatters the sections; switch the no-price card to a column and let the action row absorb the slack to pin it to the bottom. In mobile 1-up (row layout like desktop) reuse space-between. */
@media (max-width: 1023px) {
  .products.products--two-up .product-miniature.pla-no-price .card.card-product.thumbnail-container {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .products.products--two-up .product-miniature.pla-no-price .pla-section--actions {
    margin-top: auto;
  }
  .products:not(.products--two-up) .product-miniature.pla-no-price .card.card-product.thumbnail-container {
    align-content: space-between;
  }
}

/* MZS 2026-05-13 - section 1 tidy: equalise horizontal + vertical card gap. MZS 2026-05-18 r3: bumped to 10px each axis for a roomier grid.
 * Horizontal gap comes from --product-miniature-padding-desktop=5px (×2 cards = 10px).
 * Vertical comes from Bootstrap's `mb-3` class on each article (1rem = 16px) — override it. */
.product-miniature.productlisting_product_container.mb-3 {
  margin-bottom: 10px !important;
}
.product-miniature .pla-section { box-sizing: border-box; padding: 8px; }

/* DEFAULT VIEW (1up) - both desktop and mobile */
/* MZS 2026-05-11 - override the legacy `.product-miniature .product__card-img.div_product_image { display: flex; justify-content: center }` rule at custom.css:3722-3725 so the image (thumbnail link) and the pch_custombanner sibling stack VERTICALLY (image on top, banner below), each taking the full section width. */
.product-miniature .pla-section--image       {
  width: 35%; order: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.product-miniature .pla-section--image > .thumbnail {
  display: block;
  width: 100%;
  text-align: center;
}
.product-miniature .pla-section--title-attrs { width: 65%; order: 2; }
/* MZS 2026-06-04 - "From" inline with price/strikethrough row (client feedback round 14).
 * No-discount: "From £58.24 ex. VAT" on row 1, inc-VAT on row 2.
 * Discount:    "From £109.20 -10%" on row 1, "£98.28 ex. VAT" on row 2, inc-VAT on row 3.
 * Replaces 2026-05-11/13/19 flex+grid combo. Mobile 2-up has its own override below. */
.product-miniature .pla-section--prices {
  width: 100%; order: 3;
  align-items: baseline;
}

/* No-discount: From + price + ex.VAT inline on row 1; inc-VAT row 2; delivery row 3.
 * MZS 2026-06-04 r3: grid-template-columns is `1fr auto auto` (matches discount) so the
 * full-width rows (incvat, deliv) actually span the section width — was `auto auto auto`
 * with `justify-content: flex-end` which made tracks content-sized + right-hugged, so the
 * `"deliv deliv deliv"` row only spanned content-width and delivery sat on the right edge. */
.product-miniature .pla-section--prices:not(.producthasdiscount):not(.bulk-discount-on) {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "badge badge badge"
    "wasrow wasrow wasrow"
    "spc spc spc"
    "from price exvat"
    "incvat incvat incvat"
    "deliv deliv deliv";
  /* MZS 2026-06-19 - badge/wasrow as min-content so they COLLAPSE to 0 when empty (non-badge cards).
     MZS 2026-06-22 - empty `spc` spacer is the ONLY flexible (1fr) track: it absorbs the row-equalizer's
     min-height slack BEFORE align-content runs, so price/inc/deliv (min-content) stay content-sized and the
     whole price block bottom-pins identically on badge + non-badge cards -> their price/delivery lines align
     across a mixed row. Spacer is 0 when there's no slack (uniform / single-card rows) = no visual change. */
  grid-template-rows: min-content min-content 1fr min-content min-content min-content;
  column-gap: 4px;
  row-gap: 0;
  align-items: baseline;
  justify-items: end;
}
.product-miniature .pla-section--prices:not(.producthasdiscount) > .price-1                                  { grid-area: from; justify-self: end; }
.product-miniature .pla-section--prices:not(.producthasdiscount) > .price-23                                 { display: none; }
.product-miniature .pla-section--prices:not(.producthasdiscount) > .price                                    { grid-area: price; justify-self: end; }
.product-miniature .pla-section--prices:not(.producthasdiscount) > .lyoshowvatfree1                          { grid-area: exvat; }
.product-miniature .pla-section--prices:not(.producthasdiscount) > .lyoshowvatfree2                          { grid-area: incvat; text-align: right; }
.product-miniature .pla-section--prices:not(.producthasdiscount) > .pchdc-label.pchdc-listing-label          { grid-area: deliv; justify-self: stretch; }
.product-miniature .pla-section--prices:not(.producthasdiscount) > .lc-delivery-opts.pch-lc-delivery-opts    { grid-area: deliv; justify-self: stretch; }

/* Discount: From + strikethrough + badge on row 1; current price + ex.VAT on row 2; inc-VAT row 3; delivery row 4. */
.product-miniature .pla-section--prices.producthasdiscount {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "badge  badge  badge"
    "wasrow wasrow wasrow"
    "spc    spc    spc"
    "from   reg    flags"
    "price  price  exvat"
    "incvat incvat incvat"
    "deliv  deliv  deliv";
  /* MZS 2026-06-22 - `spc` 1fr spacer bottom-pins the price block (see no-discount block above). */
  grid-template-rows: min-content min-content 1fr min-content min-content min-content min-content;
  column-gap: 4px;
  row-gap: 0;
  align-items: baseline;
  justify-items: end;
}
.product-miniature .pla-section--prices.producthasdiscount > .price-1                          { grid-area: from; justify-self: end; }
.product-miniature .pla-section--prices.producthasdiscount > .price-23                         { display: none; }
.product-miniature .pla-section--prices.producthasdiscount > .regular-price                    { grid-area: reg; font-size: 13px; text-decoration: line-through; opacity: 0.6; }
.product-miniature .pla-section--prices.producthasdiscount > .product-flags                    { grid-area: flags; justify-self: end; margin: 0; padding: 0; }
.product-miniature .pla-section--prices.producthasdiscount > .price                            { grid-area: price; justify-self: end; }
.product-miniature .pla-section--prices.producthasdiscount > .lyoshowvatfree1                  { grid-area: exvat; }
.product-miniature .pla-section--prices.producthasdiscount > .lyoshowvatfree2                  { grid-area: incvat; text-align: right; }
.product-miniature .pla-section--prices.producthasdiscount > .pchdc-label.pchdc-listing-label  { grid-area: deliv; }

/* MZS 2026-06-19 - Bulk Save ACTIVE state: when a qty tier is reached, custom.js adds .bulk-discount-on
   so the card mirrors a standing-discount card (client ask): row1 "From <struck base> -X%", row2 the
   discounted price + ex.VAT, row3 inc.VAT. Reuses the .producthasdiscount grid verbatim; the existing
   :not(.producthasdiscount) child maps (.price-1/from, .price/price, lyoshowvatfree1/exvat, lyoshowvatfree2/
   incvat, pchdc-label & lc-delivery-opts/deliv) still apply (the card is NOT .producthasdiscount), so we
   only add the grid-template + promote .bulk-was's children into the reg/flags areas via display:contents. */
.product-miniature .pla-section--prices.bulk-discount-on {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "badge  badge  badge"
    "wasrow wasrow wasrow"
    "spc    spc    spc"
    "from   reg    flags"
    "price  price  exvat"
    "incvat incvat incvat"
    "deliv  deliv  deliv";
  /* MZS 2026-06-22 - `spc` 1fr spacer bottom-pins the price block (see no-discount block above). */
  grid-template-rows: min-content min-content 1fr min-content min-content min-content min-content;
  column-gap: 4px;
  row-gap: 0;
  align-items: baseline;
  justify-items: end;
}
.product-miniature .pla-section--prices.bulk-discount-on > .bulk-was { display: contents; }
.product-miniature .pla-section--prices.bulk-discount-on .bulk-was-price { grid-area: reg; justify-self: end; font-size: 13px; color: #999; text-decoration: line-through; }
.product-miniature .pla-section--prices.bulk-discount-on .bulk-disc      { grid-area: flags; justify-self: end; background: #eb1d26; }

/* MZS 2026-05-21 - ex/inc VAT labels + inc-VAT price all the same grey (#7a7a7a),
   overriding the module's inline blue on the price; only the badge stays red, ex-VAT price orange. */
.product-miniature .product-price-and-shipping .lyoshowvatfree1,
.product-miniature .product-price-and-shipping .lyoshowvatfree2,
.product-miniature .product-price-and-shipping .lyoshowvatfree2 span {
  color: #7a7a7a !important;
  font-weight: inherit !important;
}

/* ============================================================================================
   MZS 2026-06-19 - Bulk Save (quantity-discount) + "Sold in packs of N" badges + popovers on
   listing cards. Ported from references/gutter-centre-final_98.html. The badge sits in a
   reserved top "badge" grid row of .pla-section--prices; the Bulk Save reserved struck-was row
   sits in the "wasrow" grid row (visibility:hidden, revealed by custom.js when a tier is active).
   Cards without a badge leave the badge/wasrow grid rows empty (auto height -> collapse), and the
   JS row-equalizer keeps badge vs non-badge cards the same height across a row.
   ============================================================================================ */

/* --- badge-wrap: occupies the reserved top grid row, right-aligned, anchors the popover --- */
.product-miniature .pla-section--prices > .bulk-badge-wrap {
  grid-area: badge;
  justify-self: end;
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 5px;
  z-index: 2;
}
/* raise the whole card above its row-siblings while a popover is open so it isn't clipped/covered */
.product-miniature:has(.bulk-popover.open) {
  position: relative;
  z-index: 200;
}

/* --- Bulk Save badge (red) + Pack badge (blue). MZS 2026-06-19: bumped a little bigger + Bulk Save red per
   client; selectors also cover body#product for the JS-built PDP badge (Part B). --- */
.product-miniature .bulk-badge,
.product-miniature .pack-badge,
body#product .bulk-badge,
body#product .pack-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  padding: 4px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.product-miniature .bulk-badge, body#product .bulk-badge { background: #eb1d26; }
.product-miniature .bulk-badge:hover, body#product .bulk-badge:hover { background: #c81620; }
.product-miniature .pack-badge, body#product .pack-badge { background: #1b74b8; }
.product-miniature .pack-badge:hover, body#product .pack-badge:hover { background: #155d8f; }
.product-miniature .bulk-badge svg,
body#product .bulk-badge svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

/* --- popover (selectors also cover body#product for the PDP badge) --- */
.product-miniature .bulk-popover,
body#product .bulk-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 230px;
  max-width: calc(100vw - 16px);
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e5e4df;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
  z-index: 300;
  display: none;
  text-align: left;
  white-space: normal;
  cursor: default;
}
.product-miniature .bulk-popover.open, body#product .bulk-popover.open { display: block; }
.product-miniature .bulk-popover-title,
body#product .bulk-popover-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: #2d2a26;
  margin-bottom: 10px;
}
.product-miniature .bulk-popover-close,
body#product .bulk-popover-close {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  font-size: 16px;
  color: #999;
  cursor: pointer;
}
.product-miniature .bulk-popover-close:hover, body#product .bulk-popover-close:hover { color: #2d2a26; }

/* --- tier table (selectors also cover body#product for the PDP badge) --- */
.product-miniature .bulk-table, body#product .bulk-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.product-miniature .bulk-table th,
body#product .bulk-table th {
  text-align: left;
  padding: 4px 0 6px;
  color: #999;
  font-weight: 600;
  font-size: 10.5px;
  border-bottom: 1px solid #e5e4df;
}
.product-miniature .bulk-table th:not(:first-child), body#product .bulk-table th:not(:first-child) { text-align: right; }
.product-miniature .bulk-table td,
body#product .bulk-table td {
  padding: 7px 0;
  border-bottom: 1px solid #e5e4df;
  color: #2d2a26;
}
.product-miniature .bulk-table td:not(:first-child), body#product .bulk-table td:not(:first-child) { text-align: right; }
.product-miniature .bulk-table tr:last-child td, body#product .bulk-table tr:last-child td { border-bottom: none; }
.product-miniature .bulk-table tr.bulk-active td, body#product .bulk-table tr.bulk-active td { font-weight: 700; background: #f9f7f4; }
.product-miniature .bulk-table tr.bulk-active td:first-child, body#product .bulk-table tr.bulk-active td:first-child { border-left: 2px solid #f26430; padding-left: 6px; }
.product-miniature .bulk-table .bulk-save-pct, body#product .bulk-table .bulk-save-pct { color: #009b72; font-weight: 600; }
.product-miniature .bulk-table .bulk-price, body#product .bulk-table .bulk-price { color: #f26430; font-weight: 700; }

/* --- popover explanatory text (pack) — selectors also cover the PDP --- */
.product-miniature .bulk-popover .bulk-pack-text, body#product .bulk-popover .bulk-pack-text { font-size: 11.5px; color: #5a5a5a; line-height: 1.6; margin: 0 0 8px; }
.product-miniature .bulk-popover .bulk-pack-valid, body#product .bulk-popover .bulk-pack-valid { font-size: 11px; color: #999; }

/* --- PDP (body#product): hide PrestaShop's native discount table (the badge placement lives in the price grid,
   see body#product .product-prices .bulk-badge-wrap near the grid templates) --- */
body#product section.product-discounts { display: none !important; }

/* --- reserved struck "was" row (Bulk Save): visibility:hidden keeps the height reserved --- */
.product-miniature .pla-section--prices > .bulk-was {
  grid-area: wasrow;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-height: 16px;
  margin-bottom: 2px;
}
.product-miniature .pla-section--prices > .bulk-was .bulk-was-price {
  font-size: 11.5px;
  color: #999;
  text-decoration: line-through;
}
.product-miniature .pla-section--prices > .bulk-was .bulk-disc {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  /* MZS 2026-06-19 - red to match the site's standing-discount badge (.product-flag.discount #eb1d26);
     the .bulk-disc badge only ever shows in the .bulk-discount-on state, which mirrors that layout. */
  background: #eb1d26;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
}
.product-miniature .pla-section--prices > .bulk-was .bulk-disc:empty { display: none; }

/* PeterChamp 2026-05-07 revision 8.3 - consolidated action-row layout.
 * One height + one gap value via CSS variables → uniform sizing and spacing
 * across the qty stepper, Add to Basket, Add to Quote. */
.product-miniature .pla-section--actions {
  --action-row-height: 40px;
  --action-row-gap: 8px;
  width: 100%; order: 4;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--action-row-gap);
  align-items: stretch;
}

/* MZS 2026-05-27 - pchdc emits TWO delivery markups: .pchdc-label (1 line)
   and .lc-delivery-opts (2 radios: collect + deliver). Treat both as the SAME
   visual block so the separator line is unbroken across the row and the
   "Estimated delivery..." text lines up at the same Y on every card. */

/* Place .lc-delivery-opts in the same grid area as .pchdc-label (custom.css:10770) */
.product-miniature .pla-section--prices.producthasdiscount > .lc-delivery-opts.pch-lc-delivery-opts {
  grid-area: deliv;
  justify-self: stretch;
}
.products.products--two-up .pla-section--prices > .lc-delivery-opts.pch-lc-delivery-opts {
  grid-area: deliv;
  justify-self: stretch;
}
.product-miniature .pla-section--prices > .lc-delivery-opts.pch-lc-delivery-opts {
  flex-basis: 100%;
  width: 100%;
}

/* Shared shell: same separator border, same min-height, content bottom-aligned */
.product-miniature .product-price-and-shipping .pchdc-label.pchdc-listing-label,
.product-miniature .product-price-and-shipping .lc-delivery-opts.pch-lc-delivery-opts {
  flex-basis: 100%;
  width: 100%;
  margin: 8px 0 0 !important;
  padding: 8px 0 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  min-height: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 4px;
}
.product-miniature .product-price-and-shipping .lc-delivery-opts.pch-lc-delivery-opts {
  flex-direction: column;
  justify-content: flex-end;
}
.product-miniature .lc-delivery-opts.pch-lc-delivery-opts .lc-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #009b72;
  line-height: 1.4;
  cursor: pointer;
}
.product-miniature .lc-delivery-opts.pch-lc-delivery-opts .lc-radio-label {
  font-weight: bold;
}

/* Stepper container: bordered group with internal dividers (reference design). Buttons + input live inside, share one outer border, no internal gap. MZS 2026-05-18 r3. */
.product-miniature .pla-section--actions .div_inputqtyparent {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 0;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* Uniform sizing on EVERY action-row cell */
.product-miniature .pla-section--actions .btn-touchspin-down,
.product-miniature .pla-section--actions .btn-touchspin-up,
.product-miniature .pla-section--actions .pla_quantity,
.product-miniature .pla-section--actions .ajax_add_to_cart_button,
.product-miniature .pla-section--actions .pla_ajax_add_to_cart_button,
.product-miniature .pla-section--actions .custom_add_to_quote,
.product-miniature .pla-section--actions .miniature-info-btn-switched {
  height: var(--action-row-height) !important;
  min-height: var(--action-row-height) !important;
  box-sizing: border-box;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
  margin: 0;
}

/* Stepper cells: darker-grey +/- buttons inside the bordered container (item 6 above), with 1px dividers between input and buttons. Cells lose their own border + radius so they cleanly fill the container. MZS 2026-05-18 r3. */
.product-miniature .pla-section--actions .btn-touchspin-down,
.product-miniature .pla-section--actions .btn-touchspin-up {
  border: 0;
  border-radius: 0;
  background: #e8e6e0;
  padding: 0 10px;
  font-weight: normal;
}
.product-miniature .pla-section--actions .btn-touchspin-down:hover,
.product-miniature .pla-section--actions .btn-touchspin-up:hover {
  background: #dcd9d2;
}
.product-miniature .pla-section--actions .pla_quantity {
  border: 0;
  border-left: 1px solid #d6d6d6;
  border-right: 1px solid #d6d6d6;
  border-radius: 0;
  background: #fff;
  padding: 0 6px;
  font-weight: normal;
  width: 44px;
  flex: none;
  text-align: center;
}

/* Add to Basket: solid primary, grows to fill remaining space */
.product-miniature .pla-section--actions .ajax_add_to_cart_button,
.product-miniature .pla-section--actions .pla_ajax_add_to_cart_button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 14px;
  font-weight: 600;
}

/* Add to Quote: filled blue, content-sized. MZS 2026-05-18 r3 + r3-followup-2: blue values switched to reference_category.html's --blue (#1A6FAB) / --blue-hover (#155d8f). */
.product-miniature .pla-section--actions .custom_add_to_quote {
  flex: 0 0 auto;
  padding: 0 14px;
  font-weight: 600;
  background-color: #1A6FAB;
  color: #fff;
  border: 1px solid #1A6FAB;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.product-miniature .pla-section--actions .custom_add_to_quote:hover,
.product-miniature .pla-section--actions .custom_add_to_quote:focus {
  background-color: #155d8f;
  border-color: #155d8f;
  color: #fff;
  box-shadow: 0 2px 8px rgba(26,111,171,0.35);
}

/* Quote button compact restyle: 50x40 square-ish, 2-line text "Add to / Quote". 50px content area fits "Add to" on line 1 but is too narrow for "Add to Quote" (~84px) so the browser wraps at the space.
 * MZS 2026-05-11 - originally scoped via `.products:not(.products--two-up)` to mean "1-up layout".
 * MZS 2026-05-18 r3-followup-3: on DESKTOP we drop the class scope and use a viewport media query instead, because custom.js:1192-1194 re-applies `.products--two-up` from localStorage on every page load regardless of viewport (see project_view_switcher_localstorage_bug). Without this, after the JS init the desktop quote button reverts to the wide single-line shared-rule default. Mobile keeps class-scoping (no leak issue there because the view-switcher UI is visible so the class accurately reflects current view).
 * The orange hover was also dropped — main blue hover at line ~10667 now applies. */
@media (min-width: 1024px) {
  .product-miniature .pla-section--actions .custom_add_to_quote {
    flex: 0 0 50px;
    width: 50px;
    padding: 0 2px;
    font-size: 0.725rem;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }
}
@media (max-width: 1023px) {
  .products:not(.products--two-up) .product-miniature .pla-section--actions .custom_add_to_quote {
    flex: 0 0 50px;
    width: 50px;
    padding: 0 2px;
    font-size: 0.725rem;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }
}

/* MZS 2026-05-11 revision 8.10 - bump specificity to 3 classes so this beats the rev 8.8 consolidated rule (which sets display:inline-flex). Switched-view rule at custom.css:10692 has 4 classes + media query, still wins in 2-up. */
.product-miniature .pla-section--actions .miniature-info-btn-switched { display: none; }

/* MZS 2026-05-08 revision 8.7 - Info button blue (matches hover overlay) */
.product-miniature .miniature-info-btn-switched {
  background-color: #fff;
  color: #0072bc;
  border: 1px solid #0072bc;
}
.product-miniature .miniature-info-btn-switched:hover,
.product-miniature .miniature-info-btn-switched:focus {
  background-color: #f2f9fc;
  color: #0072bc;
}

/* product-flags hook spans full row (last child of the flex container) */
.product-miniature .card.card-product.thumbnail-container > .product-flags { width: 100%; order: 5; }

/* MZS 2026-05-13 - section 1 tidy: product-flags is now rendered INSIDE
 * .pla-section--prices (next to the strikethrough regular-price) rather than as
 * a card-level sibling absolutely positioned over the image. Reset the absolute
 * positioning from custom.css:4198-4201 and the on-sale 50% pill from
 * custom.css:4203-4209 for the in-card location only, and add an inline-pill
 * style. .bulk-save-badge is a separate element (custom.css:4223-4236) and
 * keeps its absolute-over-image positioning. */
.product-miniature .pla-section--prices .product-flags {
  position: static;
  top: auto;
  left: auto;
  margin: 0 0 0 6px;
  padding: 0;
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  vertical-align: middle;
  width: auto;
}
.product-miniature .pla-section--prices .product-flag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}
.product-miniature .pla-section--prices li.product-flag.on-sale {
  background: #f26430;
  color: #fff;
  border-radius: 4px;
}
.product-miniature .pla-section--prices li.product-flag.discount {
  background: #eb1d26;
  color: #fff;
  margin-top: 0;
}

/* PeterChamp 2026-05-07 revision 8 hotfixes after first deploy:
 *  - min-width:0 lets sections shrink below intrinsic content width so the
 *    25-color swatch row inside .pla_attributes doesn't push title-attrs
 *    past 65% and force flex-wrap to the next row.
 *  - The local pla.js variant on this site emits a custom .qty-cart-button-container
 *    + .pla_buttons_container even when pla_display_quantity_field is false,
 *    so we hide it via CSS - our hand-placed equivalents in .pla-section--actions
 *    are the canonical ones.
 *  - askforaquotepro hooks displayProductPriceBlock and renders a duplicate
 *    .ask_offer / .fly_to_quote_cart_button inside the prices section.
 *    Hide it; our Add to Quote button in the action row is the canonical one.
 *  - Color swatches inside .pla_color_swatch need to wrap to fit the narrower
 *    title-attrs column instead of forcing horizontal overflow.
 */
.product-miniature .pla-section { min-width: 0; }
.product-miniature .pla_attributes .qty-cart-button-container,
.product-miniature .pla_attributes .pla_buttons_container { display: none !important; }
.product-miniature .pla-section--prices .ask_offer,
.product-miniature .pla-section--prices .fly_to_quote_cart_button { display: none !important; }
.product-miniature .pla_color_swatch { display: flex; flex-wrap: wrap; gap: 4px; }
.product-miniature .pla_attribute_group_container { width: 100% !important; }

/* MZS 2026-06-09 r30 - r29 cross-selling restyle REVERTED per user. Pla.js native takes over. */

@media (min-width: 1024px) {
  /* MZS 2026-05-22 - desktop default 3-up (1024-1439px); 4-up from 1440px via the rule after this block. */
  .product-miniature {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  /* User-added category styling (preserved from prior commit) */
  #amazzing_filter {
    margin: 0 -16px
  }

  #category .container.category-container-top, #category .subcategories-container .container {
    width: 100%;
  }

  /* 2026-05-19: .category-top-parent padding now handled by Bootstrap p-3 p-lg-4 on the section (TPL) */

  #category div#subcategories ul.clearfix.d-flex.flex-wrap li {
    flex: 0 0 calc(10% - 9px);
    max-width: calc(10% - 9px);
    border-radius: 6px;
  }

  #category div#subcategories ul li a.subcategory-name {
    font-size: 14px;
    min-height: 55px;
  }

  .category_custom_nav_tabs_container .nav-tabs {
    column-gap: 5px
  }

  /* === Phase C: mobile-only view switcher hidden on desktop === */
  .pla-view-switcher {
    display: none !important;
  }

  #category .category_header {
    font-size: 28px;
  }

  #category div#subcategories ul {
    column-gap: 10px;
    row-gap: 10px;
  }

  #category div#subcategories .subcategory_title {
    font-size: 20px;
  }
  
  .custom-filter-toggle-pch {
    display: none !important;
  }
}

/* MZS 2026-05-22 - 4 products/row from 1440px (overrides the 3-up default above); <=1023px stays the mobile view. */
@media (min-width: 1440px) {
  .product-miniature {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (max-width: 1023px) {
  /* === Phase C: mobile item count ===
     Specificity bumped to .products .product-miniature so we beat the
     pre-existing rule at line 3795 (article.pla_block, <=480px, flex 50%)
     which would otherwise win at narrow widths. */
  /* Default (no class on .products): 1-up. New card design comes from globals. */
  .products .product-miniature {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* PeterChamp 2026-05-07 revision 8 - SWITCHED VIEW (.products--two-up, mobile only):
     2 products per row + vertical card internals.
     Order: image -> title -> price -> combinations (dropdowns) -> action row.
     `display: contents` on .pla-section--title-attrs flattens it so .product-title and
     .product_lidt_attributes become direct flex children of .card and can be ordered
     independently (split title from combinations without changing the .tpl structure). */
  .products.products--two-up .product-miniature {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .products.products--two-up .product-miniature .pla-section--image  { width: 100%; order: 1; }
  .products.products--two-up .product-miniature .pla-section--title-attrs { display: contents; }
  .products.products--two-up .product-miniature .product-title       { width: 100%; order: 2; padding: 0 8px; box-sizing: border-box; }
  .products.products--two-up .product-miniature .div_productlistreviews { width: 100%; order: 2; padding: 0 8px; box-sizing: border-box; }
  .products.products--two-up .product-miniature .pla-section--prices { width: 100%; order: 3; padding: 0 8px; }
  .products.products--two-up .product-miniature .product_lidt_attributes { width: 100%; order: 4; padding: 0 8px; box-sizing: border-box; }
  .products.products--two-up .product-miniature .pla-section--actions { width: 100%; order: 5; flex-wrap: wrap; }

  /* Switched-view action row wraps to two lines: [stepper | basket] / [quote | info].
   * MZS 2026-05-18 r3-followup-4: stepper sizes to its content (4 children: border + 2 buttons + input fit ~90px). Basket flexes to fill remaining row width. Previous `flex: 0 0 40%` forced a ~66px container which, after round-3's `overflow: hidden` on the stepper, clipped the `+` button off the right edge (input had `min-width: 40px` + 2 buttons ×24px = 88px content > 66px container). */
  /* MZS 2026-05-18 r3-followup-6: stepper full-width to match basket/quote/info rows. Input flex-grows to fill the middle; buttons stay content-sized (~24px each) so the +/- glyphs don't stretch. */
  .products.products--two-up .product-miniature .pla-section--actions .div_inputqtyparent      { flex: 0 0 100%; width: 100%; }
  .products.products--two-up .product-miniature .pla-section--actions .pla_quantity            { flex: 1 1 0; width: auto; min-width: 0; }
  /* MZS 2026-05-18 r3-followup-5: basket gets its own row (flex-basis 100% wraps it). Stepper sits alone on row 1 above; quote+info wrap to row 3 below — prevents the "to Bas..." clipping when stepper+basket shared row 1. */
  .products.products--two-up .product-miniature .pla-section--actions .ajax_add_to_cart_button,
  .products.products--two-up .product-miniature .pla-section--actions .pla_ajax_add_to_cart_button { flex: 0 0 100%; width: 100%; min-width: 0; }
  .products.products--two-up .product-miniature .pla-section--actions .custom_add_to_quote     { flex: 0 0 calc(50% - 4px); }
  .products.products--two-up .product-miniature .miniature-info-btn-switched                   { display: inline-flex; flex: 0 0 calc(50% - 4px); }

  /* Hover overlay turned off in switched view (no hover on mobile anyway, but explicit) */
  .products.products--two-up .product-miniature .miniature-hover-info-btn { display: none; }

  /* MZS 2026-05-13 - section 1 refinement: 2-up prices section uses CSS grid so the
   * regular-price + discount badge sit on their OWN row above the current price. At ~180px
   * card width the inline-pill layout (used at 1-up) cramps badly, so we stack:
   *   Row 1: From
   *   Row 2: £69.49 (strikethrough) + -10% badge       [only when has_discount]
   *   Row 3: £62.54 (current)       + Ex VAT
   *   Row 4: £75.05 Inc VAT
   *   Row 5: Estimated delivery
   * `.producthasdiscount` class is emitted by product.tpl when $product.has_discount is true. */
  /* MZS 2026-05-13 - section 1 refinement round 2: in mobile 2-up, reset the
   * inherited right-align (from the 1-up default rule above) to left for the full-width
   * grid-area cells (From / Inc VAT amount). The .regular-price + .product-flags cells
   * already use justify-self:start so they're unaffected by text-align inheritance. */
  /* MZS 2026-06-04 r4: 2-up grid now mirrors desktop's inline-"From" layout
     (3-col `1fr auto auto` + same grid-template-areas as C2/C3). Was a 2-col grid
     with "from from" as its own row 1 which kept "From" floating above-right of
     the price — client feedback round 14 r4 wanted From inline like desktop. */
  .products.products--two-up .product-miniature .pla-section--prices > .price-1,
  .products.products--two-up .product-miniature .pla-section--prices > .price-23,
  .products.products--two-up .product-miniature .pla-section--prices > .lyoshowvatfree2 { text-align: right; }

  .products.products--two-up .product-miniature .pla-section--prices {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 6px;
    row-gap: 0;
    align-items: baseline;
    justify-items: end;
  }
  .products.products--two-up .product-miniature .pla-section--prices.producthasdiscount,
  .products.products--two-up .product-miniature .pla-section--prices.bulk-discount-on {
    grid-template-areas:
      "badge  badge  badge"
      "wasrow wasrow wasrow"
      "spc    spc    spc"
      "from   reg    flags"
      "price  price  exvat"
      "incvat incvat incvat"
      "deliv  deliv  deliv";
    grid-template-rows: min-content min-content 1fr min-content min-content min-content min-content;
  }
  .products.products--two-up .product-miniature .pla-section--prices:not(.producthasdiscount):not(.bulk-discount-on) {
    grid-template-areas:
      "badge badge badge"
      "wasrow wasrow wasrow"
      "spc spc spc"
      "from price exvat"
      "incvat incvat incvat"
      "deliv deliv deliv";
    grid-template-rows: min-content min-content 1fr min-content min-content min-content;
  }
  .products.products--two-up .pla-section--prices > .price-1                          { grid-area: from; justify-self: end; }
  .products.products--two-up .pla-section--prices > .price-23                         { display: none; }
  .products.products--two-up .pla-section--prices > .price-23:has(*)                  { display: block; grid-area: from; }
  .products.products--two-up .pla-section--prices > .regular-price                    { grid-area: reg; justify-self: end; font-size: 12px; }
  .products.products--two-up .pla-section--prices > .product-flags                    { grid-area: flags; justify-self: end; margin: 0; }
  .products.products--two-up .pla-section--prices > .price                            { grid-area: price; justify-self: end; }
  .products.products--two-up .pla-section--prices > .lyoshowvatfree1                  { grid-area: exvat; }
  .products.products--two-up .pla-section--prices > .lyoshowvatfree2                  { grid-area: incvat; text-align: right; }
  .products.products--two-up .pla-section--prices > .pchdc-label.pchdc-listing-label  { grid-area: deliv; justify-self: stretch; }

  /* User-added category styling (preserved) */
  .subcategories-container {
    padding: 10px;
    width: 100%;
    border-radius: 8px;
  }

  /* MZS 2026-05-18 section 3 item 3.6: align mobile values with new desktop values. */
  #category div#subcategories ul li a.subcategory-name {
    font-size: 13px;
    min-height: auto;
  }

  #category div#subcategories ul.clearfix.d-flex.flex-wrap li {
    flex: 0 0 calc(50% - 5px);
    max-width: calc(50% - 5px);
  }

  h1.h1.category_header {
    font-size: 22px;
  }

  #category div#subcategories ul {
    gap: 10px
  }

  .text-center span {
    font-size: 14px !important;
  }

  #category div#subcategories .subcategory_title {
    font-size: 20px;
  } 

  #js-product-list-top>.total-products .small {
    text-align: left;
  }

  body#category .plisttop {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  #js-product-list-top .col-lg-6 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .has-compact-filter #amazzing_filter .compact-toggle {
    display: none !important;
  }
}

body#category .prods {
  margin-top: 0px !important;
}
/* User-added global (preserved) */
.category-top-parent {
  background: white;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.125);
  /* MZS 2026-05-13 - section 1 tidy: home-page-matching drop-shadow. MZS 2026-05-18 r3: toned down. */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

/* === Phase C: Mobile-only view switcher button (segmented control) === */
.pla-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 8px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  padding: 2px;
  background: white;
  vertical-align: middle;
}

.pla-view-switcher__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #888;
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  transition: background-color 0.15s, color 0.15s;
}

.pla-view-switcher__btn:hover {
  color: var(--secondary-bg-color, #f26430);
}

.pla-view-switcher__btn.is-active {
  background: var(--secondary-bg-color, #f26430);
  color: white;
}

.pla-view-switcher__btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  pointer-events: none;
}

#category .category_header {
  text-transform: initial;
  padding-bottom: 0
}

.category_custom_nav_tabs_container .nav-tabs .nav-link.active {
  color: var(--secondary-bg-color)
}

.category_custom_nav_tabs_container .nav-tabs {
  column-gap: 6px;
}

.category_custom_nav_tabs_container .nav-tabs .nav-link {
  padding: 6px
}

.category-downloads {
  display: flex !important;
  flex-wrap: wrap;
}
/* =========================================================
   End PeterChamp 2026-04-23 / 2026-04-28 Listing Phase B + C
   ========================================================= */

/* ===========================================================================
 * PeterChamp 2026-05-07 - Listing miniature redesign
 * Coordinated CSS additions for:
 *   1. Hide productlistattributes dropdown group label (keep native arrow)
 *   2. Hover-on-image "More Info" overlay (desktop hover only)
 *   3. Price layout: ex./inc. VAT labels + discount next to ex-VAT price
 *   4. 1-line clamp on category description with Read more / Read less toggle
 *   5. Filter heading "No filters applied" / "N filter(s) applied"
 * Existing rules for .pla-view-switcher / .products--two-up are preserved
 * (already wired). New rules below are appended last so they win specificity
 * battles where needed.
 * =========================================================================== */

/* --- 1. Hide the productlistattributes dropdown group label ---
 * pla.js writes:
 *   <div class="pla_attribute_group_container">
 *     <label>
 *       <div class="pla_attribute_group_label">Color:</div>
 *       <select>...</select>
 *     </label>
 *   </div>
 * Hiding the label keeps the <select>'s native down-arrow visible. Scoped to
 * .product-miniature only so the product-detail page (if it uses the same
 * markup elsewhere) stays untouched. */
.product-miniature .pla_attribute_group_label {
  display: none !important;
}
.product-miniature .pla_attribute_group_container .pla_select,
.product-miniature .pla_attribute_group_container select {
  width: 100%;
}

/* --- 2. Hover-on-image "More Info" overlay (desktop hover only) --- */
.product-miniature .thumbnail.product-thumbnail {
  position: relative;
  overflow: hidden;
  display: block;
}
/* PeterChamp 2026-05-07 revision 8 - styled to match the existing
 * .product-miniature .div_details_cart .details.info .btn (blue ghost button)
 * with hover tint, just centered as an absolutely-positioned overlay. */
.product-miniature .miniature-hover-info-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: normal;
  font-size: 15px;
  line-height: 1.3;
  background-color: #fff;
  border: 1px solid #0072bc;
  color: #0072bc;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.15s ease;
  z-index: 3;
}
.product-miniature .miniature-hover-info-btn:hover {
  background-color: #f2f9fc;
}
@media (hover: hover) and (pointer: fine) {
  .product-miniature .thumbnail.product-thumbnail:hover .miniature-hover-info-btn {
    opacity: 1;
  }
}
/* pch_custombanner styling moved to themes/guttercentre/modules/pch_custombanner/views/css/front.css
 * (theme module override — replaces the module's own front.css at /modules/pch_custombanner/views/css/). */

/* --- 3. Price layout — REMOVED 2026-05-07 revision 4.
 *      The original ruleset added explicit "inc. VAT" / "ex. VAT" spans and forced
 *      .product-price-and-shipping into a flex-wrap container. That broke the
 *      "From" alignment and DUPLICATED the labels lyoshowvatfree already renders.
 *      Layout is now back to the upstream natural flow. If we ever want lowercase
 *      VAT wording, do it via text-transform on the lyoshowvatfree output selector
 *      or via a translation override in BO — NOT by adding our own labels in
 *      miniatures/product.tpl. */

/* --- 4. 1-line clamp on category description + Read more / Read less ---
 * The existing JS at custom.js line 244 already toggles .opened on click of
 * .div_showmoreless_buttons .btn. We just need:
 *   - clamp the content to 1 line by default
 *   - lift the clamp when .opened
 *   - make the buttons visible (the d--none was dropped in category-header.tpl) */
#category-description.div_showmoreless_container .div_showmoreless_content,
#category-faq_description.div_showmoreless_container .div_showmoreless_content {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
#category-description.div_showmoreless_container.opened .div_showmoreless_content,
#category-faq_description.div_showmoreless_container.opened .div_showmoreless_content {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  text-overflow: clip;
}
#category-description.div_showmoreless_container .div_showmoreless_buttons,
#category-faq_description.div_showmoreless_container .div_showmoreless_buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* MZS 2026-05-11 - inline "Read more" with truncated description (collapsed state only).
 * Scoped to .active so we only flex the visible tab — without it, our 0,1,2,0 specificity
 * overrides Bootstrap's `.tab-content > .tab-pane { display: none }` for inactive panes,
 * making the hidden FAQ pane a layout-active transparent block (opacity:0 from .fade:not(.show)).
 * min-width:0 on the content container lets the inner -webkit-line-clamp text actually
 * ellipsize inside a flex item; without it the description refuses to shrink below content size
 * and pushes the button off-screen. :not(.opened) keeps inline layout limited to collapsed state. */
#category-description.div_showmoreless_container.active:not(.opened),
#category-faq_description.div_showmoreless_container.active:not(.opened) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
#category-description.div_showmoreless_container.active:not(.opened) .div_showmoreless_content_container,
#category-faq_description.div_showmoreless_container.active:not(.opened) .div_showmoreless_content_container {
  flex: 1 1 auto;
  min-width: 0;
}
#category-description.div_showmoreless_container.active:not(.opened) .div_showmoreless_buttons,
#category-faq_description.div_showmoreless_container.active:not(.opened) .div_showmoreless_buttons {
  flex: 0 0 auto;
  margin-top: 0 !important;
}

/* --- 5. Filter heading "N filter(s) applied" / "No filters applied" --- */
.active-filter__title {
  font-weight: 700;
  margin: 0 0 0.5rem;
  padding: 0.35rem 0;
  color: #1c1c1c;
  text-transform: none;
}
#js-active-search-filters.active_filters {
  margin-bottom: 0.75rem;
}
#js-active-search-filters.active_filters .active-filter__title {
  display: block;
}
#amazzing_filter .title_block.active-filter__title {
  display: block;
}

/* --- end PeterChamp 2026-05-07 listing miniature redesign --- */

/* ==================================================================
 * MZS 2026-05-18 - SECTION 3: Category page top redesign
 *   3.2 / 3.3 / 3.4 - Downloads + FAQ buttons + accordion panels
 *   3.5 - Subcategories section moved outside .category-top-parent
 * ================================================================== */

/* --- Category description plain-text wrapper (no tab UI) --- */
.cat-description {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
.cat-description .btn-link {
  padding: 0;
  font-size: 12px;
  color: #1A6FAB;
  text-decoration: none;
}
.cat-description .btn-link:hover { text-decoration: underline; }

/* --- 3.2 - Action button row in category header (margin-top + justify-end removed 2026-05-19 A9 - buttons now inline with title via .cat-title-row flex-start) --- */
.cat-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-header-actions .cat-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  transition: filter 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.cat-header-actions .cat-action-btn .cat-action-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  font-size: 11px;
  font-weight: 700;
}
.cat-header-actions .cat-action-btn.btn-dl { background: #1A6FAB; }
.cat-header-actions .cat-action-btn.btn-dl:hover { background: #155d8f; }
.cat-header-actions .cat-action-btn.btn-faq { background: #1A6FAB; }
.cat-header-actions .cat-action-btn.btn-faq:hover { background: #155d8f; }
.cat-header-actions .cat-action-btn.active {
  filter: brightness(0.87);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);
}
/* 2026-05-19: two-line button label (title + subtitle) per reference design */
.cat-header-actions .cat-action-btn .cat-action-btn-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  text-align: left;
}
.cat-header-actions .cat-action-btn .cat-action-btn-label strong {
  font-weight: 600;
  font-size: 13px;
}
.cat-header-actions .cat-action-btn .cat-action-btn-sub {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
}

/* --- Shared accordion panel (collapsed by default) --- */
.cat-acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
  background: #fafaf8;
  border-radius: 8px;
  margin-top: 8px;
}
.cat-acc-panel.open { max-height: 1500px; }

/* --- 3.3 - Downloads card grid (restyle existing .attachment markup) --- */
.cat-acc-panel#cat-panel-downloads .cat-panel-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  padding: 0 16px;
}
.cat-acc-panel#cat-panel-downloads .attachment {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e2e0db;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  margin: 16px 0;
}
.cat-acc-panel#cat-panel-downloads .attachment:hover {
  border-color: #E8531A;
  box-shadow: 0 2px 10px rgba(232, 83, 26, 0.08);
}
.cat-acc-panel#cat-panel-downloads .attachment .svg_icon.pdf {
  width: 38px; height: 38px; border-radius: 7px;
  background: #fff2ed; padding: 6px;
  flex-shrink: 0;
  color: #E8531A;
}
.cat-acc-panel#cat-panel-downloads .attachment .attachment-name-container {
  flex: 1 1 0;
  min-width: 0;
}
.cat-acc-panel#cat-panel-downloads .attachment .attachment_name {
  font-size: 13px; font-weight: 600; color: #2a2a2a;
  display: block;
  text-decoration: none;
}
.cat-acc-panel#cat-panel-downloads .attachment .attachment_download {
  font-size: 11px; color: #888; margin-top: 2px;
  display: block;
  text-decoration: none;
}
.cat-acc-panel#cat-panel-downloads .attachment .svg_icon.download { display: none; }

/* --- 3.4 - FAQ accordion --- */
.cat-acc-panel#cat-panel-faq .cat-panel-body { display: block; padding: 0 16px; }
.cat-acc-panel#cat-panel-faq .faq-list { display: flex; flex-direction: column; }
.cat-acc-panel#cat-panel-faq .faq-item { border-bottom: 1px solid #e2e0db; }
.cat-acc-panel#cat-panel-faq .faq-item:last-child { border-bottom: none; }
.cat-acc-panel#cat-panel-faq .faq-q {
  width: 100%; background: none; border: none; text-align: left;
  padding: 13px 0; font-size: 13.5px; font-weight: 600; color: #2a2a2a;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: inherit;
}
.cat-acc-panel#cat-panel-faq .faq-q svg { transition: transform 0.2s; flex-shrink: 0; stroke: #888; }
.cat-acc-panel#cat-panel-faq .faq-item.open .faq-q { color: #1A6FAB; }
.cat-acc-panel#cat-panel-faq .faq-item.open .faq-q svg { transform: rotate(180deg); stroke: #1A6FAB; }
.cat-acc-panel#cat-panel-faq .faq-a {
  font-size: 13px; color: #555; line-height: 1.7;
  padding-bottom: 13px; display: none;
}
.cat-acc-panel#cat-panel-faq .faq-item.open .faq-a { display: block; }
.cat-acc-panel#cat-panel-faq .faq-a p { margin: 0 0 8px; }
.cat-acc-panel#cat-panel-faq .faq-a p:last-child { margin-bottom: 0; }

/* --- 3.5 - Subcategories section spacing (now sibling outside .category-top-parent) --- */
.subcategories-section {
  margin-top: 20px;
  margin-bottom: 20px;
}
.subcategories-section .subcategories-container {
  padding: 0;
}

/* ==================================================================
 * MZS 2026-05-18 SECTION 3 follow-up: layout corrections
 *   - Disable flex on #category-image-description-container so my children stack vertically (the parent's `display: flex; flex-wrap: wrap` at line 3479 was making the accordion panel sit BESIDE the button row, stretching the button vertically).
 *   - Move buttons into a .cat-title-row (title left, buttons top-right).
 *   - Inline "Read more" link at the end of a 1-line clamped description.
 * ================================================================== */
#category-image-description-container {
  display: block !important;
}

/* MZS 2026-05-19 review-batch A9: buttons sit DIRECTLY right of the title (not pushed to far right via space-between). Title shrinks to natural width with flex: 0 0 auto so buttons follow with the 16px gap. */
.cat-title-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}
.cat-title-row > #_desktop_category_header {
  flex: 0 0 auto;
  min-width: 0;
}
.cat-title-row > #_desktop_category_header h1 {
  margin-bottom: 0;
  padding-bottom: 0;
}
.cat-title-row .cat-header-actions {
  margin-top: 0;
  flex-shrink: 0;
}

/* Inline Read more / Read less (1-line clamp with link at end) */
.cat-description .cat-desc-inline {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cat-description:not(.opened) .div_showmoreless_content {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-description.opened .div_showmoreless_content {
  flex: 1 1 100%;
  min-width: 0;
}
.cat-description .more,
.cat-description .less {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  font-size: 12px;
  color: #1A6FAB;
  cursor: pointer;
  background: transparent;
  border: none;
  font-weight: 500;
}
.cat-description .more:hover,
.cat-description .less:hover { text-decoration: underline; }
.cat-description .less { display: none; }
.cat-description.opened .more { display: none; }
.cat-description.opened .less { display: inline-flex; }
/* MZS 2026-05-18 follow-up #3: SVG chevron (replaces the U+2304 UTF glyph whose visual centre sits above the baseline, causing the link to look like it's jumping up). */
.cat-description .cat-desc-arrow {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
}
.cat-description .cat-desc-arrow.up {
  transform: rotate(180deg);
}
/* MZS 2026-05-18 follow-up #4: force ALL descendants inline when truncated. Was previously enumerating p/br/strong/em/span/a only, which left h2/h3/ul/li as blocks (broke truncation on rich-HTML descriptions). */
.cat-description:not(.opened) .div_showmoreless_content * {
  display: inline;
}
.cat-description:not(.opened) .div_showmoreless_content br { display: none; }

/* ==================================================================
 * MZS 2026-05-18 SECTION 3 follow-up #2: post-review polish
 *   - Breadcrumb chevron darkened + sized (separate edit above)
 *   - Panel extends edge-to-edge of the card (no white frame)
 *   - Button SVG icons inherit white text color
 *   - Chevron indicator on each button, rotates 180° when open
 * ================================================================== */

/* Panel edge-to-edge: card clips, panel escapes the card's padding. */
.category-top-parent { overflow: hidden; }
/* 2026-05-19 restructure: panels are now full-width SIBLINGS outside the padded .cat-header-inner
   wrapper, so they reach the card edges with ZERO negative margins. Card/header padding can change
   freely without ever re-tuning panel margins. Spacing above a panel comes from .cat-header-inner's
   bottom padding; the card's overflow:hidden rounds the panel's bottom corners. */
.cat-acc-panel {
  margin: 0;
  border-radius: 0;
}
.cat-acc-panel .cat-panel-body {
  border-top: 1px solid #e2e0db;
}

@media (max-width: 1023px) {
  .cat-acc-panel#cat-panel-downloads .attachment {
    margin: 0;
  }

  .cat-acc-panel#cat-panel-downloads .attachment:first-child {
    margin-top: 16px;
  }

  .cat-acc-panel#cat-panel-downloads .attachment:last-child {
    margin-bottom: 16px;
  }
}

/* Button SVG icons inherit the white text colour. */
.cat-header-actions .cat-action-btn svg { fill: currentColor; color: #fff; }
.cat-header-actions .cat-action-btn svg use { fill: currentColor; }

/* Chevron indicator on each action button. */
.cat-header-actions .cat-action-btn { gap: 8px; }
.cat-header-actions .cat-action-btn-chevron {
  transition: transform 0.2s;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
}
.cat-header-actions .cat-action-btn.active .cat-action-btn-chevron {
  transform: rotate(180deg);
}

.cat-acc-panel#cat-panel-faq .faq-q:focus {
  outline: none;
}

/* ==================================================================
 * MZS 2026-05-18 - SECTION 4: Category page filter-bar restyle
 *   4   - Always-on "Filters:" label inline with pills
 *   4.1 - Selected-filter chips with x-per-value + Clear all
 *   4.2 - Hide the "Show N per page" dropdown (.div_pagination)
 *   4.3 - Move items count to right end of filter-bar row
 * ================================================================== */

/* 4 - "Filters:" label inline with pills.
   2026-05-19: bumped selector specificity from #amazzing_filter to #amazzing_filter.af.block
   to beat the module's `#amazzing_filter.block .title_block` rule (0,3,1) at front.css that was
   forcing font-size:1.4em + margin-bottom:5px, making "Filters:" too big and off-baseline. */
#amazzing_filter.af.block .title_block {
  display: inline-flex;
  align-items: center;
  margin: 0 8px 0 0;
  padding: 4px 0;
  font-size: 15px;
  font-weight: 600;
  color: #2a2a2a;
  text-transform: none;
  border: none;
}
/* MZS 2026-05-18 SECTION 4 hotfix - #amazzing_filter is the outer flex
   so .title_block sits inline with .block_content. Inside .block_content we use
   flex-column with explicit order so chips render BELOW pills (not above).
   Reverted the previous .block_content and #af_form flex-row rules - those were
   changing positioning context for amazzingfilter's absolute-positioned dropdowns. */
#amazzing_filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#amazzing_filter > .block_content {
  flex: 1 1 auto;
  min-width: 0;
}
#amazzing_filter .block_content {
  display: flex;
  flex-direction: column;
}
#amazzing_filter #af_form {
  order: 1;
}

/* 4.1 - Selected-filter chips row (order:2 puts it below pills inside flex-column .block_content) */
#amazzing_filter .selectedFilters {
  order: 2;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
}
#amazzing_filter .selectedFilters.hidden {
  display: none;
}
#amazzing_filter .af-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f3f1ec;
  border: 1px solid #e2e0db;
  border-radius: 14px;
  padding: 3px 8px 3px 10px;
  font-size: 12px;
  color: #2a2a2a;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#amazzing_filter .af-selected-chip:hover {
  background: #ebe9e2;
  border-color: #c8c5bd;
}
#amazzing_filter .af-selected-chip .chip-facet {
  font-weight: 600;
}
#amazzing_filter .af-selected-chip .chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  line-height: 1;
  border-radius: 50%;
  background: #d6d2c8;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-left: 2px;
}
#amazzing_filter .af-selected-chip:hover .chip-x {
  background: #E8531A;
}
#amazzing_filter .selectedFilters .clearAll {
  margin-left: 4px;
}
#amazzing_filter .selectedFilters .clearAll a.all {
  font-size: 12px;
  color: #1A6FAB;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 4.2 - kill the per-page "Show N" selector (.div_pagination wraps Show label + dropdown) */
.div_pagination {
  display: none !important;
}

/* 4.3 - hide top items count entirely (user wants count only at bottom pagination).
   The .cat-filterbar-row + .cat-items-count slot was reverted on 2026-05-18 because the
   wrapper duplicated on every amazzingfilter AJAX cycle - see TPL comment in products-top.tpl. */
#js-product-list-top > .total-products {
  display: none !important;
}
/* --- end MZS 2026-05-18 SECTION 4 --- */

/* ==================================================================
 * MZS 2026-05-22 - SECTION 4.4: desktop filter-bar redesign (item 8)
 *   Reference: references/reference_category_final.html
 *   Active filter group => blue pill + count badge; applied chips => dark
 *   pills with circular x + "Applied:" label; Clear all => red text link.
 *   All DESKTOP-scoped (body:not(.has-compact-filter)); the mobile drawer
 *   keeps its existing look (only the small count badge carries over).
 * ================================================================== */

/* Per-group count badge (shows on desktop pills AND drawer accordion headers). */
#amazzing_filter .af_subtitle .af-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 10px;
  background: #1A6FAB;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Active group pill: blue border + tinted bg + blue label (reference .filter-chip.active). */
body:not(.has-compact-filter) #amazzing_filter .af_filter.af-has-selection {
  border-color: #1A6FAB !important;
  background: #eff6ff !important;
}
body:not(.has-compact-filter) #amazzing_filter .af_filter.af-has-selection .af_subtitle {
  color: #1A6FAB;
}
/* Unify the pill background: the module gives .af_subtitle a white bg (front.css:576), which on an
   active pill shows as a white box inside the light-blue padded pill. Make the subtitle transparent
   so the pill's single background (white inactive / #eff6ff active) shows uniformly. */
body:not(.has-compact-filter) #amazzing_filter .af_filter .af_subtitle {
  background: transparent;
}

/* Hide the redundant items-count in the desktop applied row (count stays at bottom pagination). */
body:not(.has-compact-filter) #amazzing_filter .selectedFilters .selected-count {
  display: none;
}

/* Applied chips => dark pills (reference .applied-chip). */
body:not(.has-compact-filter) #amazzing_filter .af-selected-chip {
  background: #2a2a2a;
  border: none;
  border-radius: 20px;
  padding: 4px 8px 4px 11px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}
body:not(.has-compact-filter) #amazzing_filter .af-selected-chip:hover {
  background: #444;
  border: none;
}
body:not(.has-compact-filter) #amazzing_filter .af-selected-chip .chip-x {
  width: 15px;
  height: 15px;
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-size: 13px;
  margin-left: 4px;
}
body:not(.has-compact-filter) #amazzing_filter .af-selected-chip:hover .chip-x {
  background: rgba(255,255,255,0.45);
}

/* Clear all => red text link with a thin separator (reference .clear-all + .applied-sep). */
body:not(.has-compact-filter) #amazzing_filter .selectedFilters .clearAll {
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid #e2e0db;
}
body:not(.has-compact-filter) #amazzing_filter .selectedFilters .clearAll a.all {
  color: #dc2626;
  text-decoration: none;
  font-weight: 600;
}
body:not(.has-compact-filter) #amazzing_filter .selectedFilters .clearAll a.all:hover {
  text-decoration: underline;
}

/* MZS 2026-05-22 round 3 (item 8): own the desktop applied row. The amazzingfilter module
   repositions/re-renders its .selectedFilters (sf_position) on every AJAX cycle, so on desktop we
   hide its native row entirely and render our own .af-applied-desktop (built in custom.js) that the
   module never touches. Drawer (.has-compact-filter) still uses .selectedFilters as before. */
/* The module's sf_position JS relocates .selectedFilters OUTSIDE #amazzing_filter (to a full-width
   spot above the bar), so the hide must be ancestor-agnostic to catch it. Desktop only; the drawer
   (.has-compact-filter) still uses .selectedFilters. .cf live inside it, so they're hidden too. */
body:not(.has-compact-filter) .selectedFilters {
  display: none !important;
}
.has-compact-filter #amazzing_filter .af-applied-desktop {
  display: none;
}
body:not(.has-compact-filter) #amazzing_filter .af-applied-desktop {
  flex: 0 0 100%;
  width: 100%;
  order: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e0db;
  margin-bottom: 14px;
}
body:not(.has-compact-filter) #amazzing_filter .af-applied-desktop.af-empty {
  display: none;
}
body:not(.has-compact-filter) #amazzing_filter .af-applied-desktop .af-applied-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body:not(.has-compact-filter) #amazzing_filter .af-applied-label {
  font-size: 12px;
  font-weight: 700;
  color: #888;
}
body:not(.has-compact-filter) #amazzing_filter .af-applied-clear {
  color: #dc2626;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  margin-left: 4px;
}
body:not(.has-compact-filter) #amazzing_filter .af-applied-clear:hover {
  text-decoration: underline;
}

/* ==================================================================
 * MZS 2026-05-19 - SECTION 4 review-batch tweaks
 *   A2 - dropdown text 13.5px so title (14px) is 0.5px bigger
 *   A3 - dropdown text + border lighter gray
 *   A4 - chevron bolder/larger on BOTH standard <select> and custom div-dropdown
 *   (A5/A6/A7/A9 are in-place edits above, not in this block)
 * ================================================================== */

/* A2 + A3 - dropdown font-size + lighter gray text/border (parallel block for both pla.js dropdown types) */
.product-miniature select.pla_select,
.product-miniature .pla_custom_select_container .div_custom_select {
  font-size: 13.5px;
  color: #4a4a4a;
  border-color: #c8c5bd;
}

/* A3 fix 2026-05-21: the custom select's visible border is on .pla_custom_select_container
   (pla-1.6.css:103 sets it #767676 dark). The inner .div_custom_select has no border, so the
   earlier border-color tweak above was a no-op. Match it to the standard select's light border. */
.product-miniature .pla_custom_select_container {
  border-color: #c8c5bd;
}

/* A4 - bigger/bolder chevron on STANDARD <select> (overrides pla-1.6.css down-arrow.svg).
   2026-05-19 follow-up: bumped chevron 12px -> 16px per user request. */
.product-miniature select.pla_select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 32px;
}

/* A4 - CUSTOM div-dropdown (color swatches) - add matching chevron via ::after */
.product-miniature .pla_custom_select_container .div_custom_select {
  position: relative;
  padding-right: 28px;
}
.product-miniature .pla_custom_select_container .div_custom_select::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center;
  background-size: 12px 12px;
  pointer-events: none;
}

/* Discount layout collision fix 2026-05-19: legacy `.product-price-and-shipping .price-1 { height: 12px }`
   at custom.css:9240 makes the "From" text overflow downward and paint over the struck regular-price.
   Override with auto height + small line-height so it sits cleanly in its own grid row. */
.product-miniature .pla-section--prices > .price-1 {
  height: auto;
  font-size: 11px;
  line-height: 1.2;
  color: #777;
}

/* MZS 2026-06-04 r9: gap between row 1 (From + strikethrough + -X% badge) and row 2
   (£price + ex.VAT) - client wanted it looser. Was -2px (tighten, legacy from the
   pre-r3 layout where struck price was row 2 and discounted was row 3). Applied to
   BOTH row-2 items so align-items:baseline keeps them on the same baseline. */
.product-miniature .pla-section--prices.producthasdiscount > .price,
.product-miniature .pla-section--prices.producthasdiscount > .lyoshowvatfree1,
.product-miniature .pla-section--prices.bulk-discount-on > .price,
.product-miniature .pla-section--prices.bulk-discount-on > .lyoshowvatfree1 {
  margin-top: 2px;
}

/* Restore amazzingfilter's `more-f` hide that was defeated by our pill rule at custom.css:10283
   (both rules same specificity 0,3,1; custom.css loads later so the pill display:flex was winning).
   When #af_form lacks .show-more-f (default), filters past more_f threshold (=10) stay hidden.
   Clicking .toggleMoreFilters adds .show-more-f to #af_form, this rule stops matching,
   and the pill rule restores display:flex for the revealed filters. */
#af_form:not(.show-more-f) .af_filter.more-f {
  display: none !important;
}

/* Selected-filter chip row structure (per reference design):
   - hide amazzingfilter's inline "Filters:" label (redundant - we already show "Filters:" above the pills via .title_block)
   - count text at the START
   - Clear-all pushed to the END */
.has-compact-filter #amazzing_filter .selectedFilters .selected-filters-label {
  display: none;
}
body:not(.has-compact-filter) #amazzing_filter .selectedFilters .selected-filters-label {
  display: inline;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin-right: 4px;
}
#amazzing_filter .selectedFilters .selected-count {
  font-size: 12px;
  color: #666;
  margin-right: 4px;
  white-space: nowrap;
}
#amazzing_filter .selectedFilters .clearAll {
  margin-left: auto;
}
/* --- end MZS 2026-05-19 review-batch --- */

/* ===== amazzingfilter compact off-canvas drawer restyle - MZS 2026-05-21 =====
   Our Section-4 rules above target the DESKTOP horizontal bar (#amazzing_filter as a flex
   row, .title_block as an inline label, .block_content flex-column + child order). They leak
   into the mobile off-canvas drawer and break it. Re-scope the drawer to a clean vertical
   column: header / scrollable list / fixed action bar. .has-compact-filter is added to <body>
   by the module only while the drawer layout is active, so this is breakpoint-independent. */
.has-compact-filter #amazzing_filter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
}
/* Header: re-purpose the (module-hidden) .title_block as a sticky title bar. Our desktop rule
   un-hides it; here we lay it out as a header and host the × close button. */
.has-compact-filter #amazzing_filter.af.block .title_block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #2a2a2a;
  border-bottom: 1px solid #e2e0db;
}
.has-compact-filter #amazzing_filter .af-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #777;
  cursor: pointer;
}
.has-compact-filter #amazzing_filter .af-drawer-close:hover { color: #E8531A; }
/* Scroll area fills remaining height; kill our desktop flex-column + child order so the
   filter list (and selected filters) flow top-down in DOM order again. */
.has-compact-filter #amazzing_filter .block_content {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 16px;
}
/* Selected filters back at the TOP (order props are now inert), with a divider below. */
.has-compact-filter #amazzing_filter .selectedFilters {
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid #efede8;
}
.has-compact-filter #amazzing_filter .selectedFilters .selected-count {
  flex: 0 0 100%;
  margin: 0 0 10px;
  text-align: center;
  font-size: 12px;
  color: #777;
}
/* Selected-filter chips + CLEAR: ONE consistent pill. Removes the module's margin-top on the chips,
   makes CLEAR the same height/border/radius as the chips, and drops the doubled border on the Clear
   wrapper. Covers the module's .cf divs, our .af-selected-chip (if present), and .clearAll a.all. */
.has-compact-filter #amazzing_filter .selectedFilters > div:not(.clearAll),
.has-compact-filter #amazzing_filter .selectedFilters .af-selected-chip,
.has-compact-filter #amazzing_filter .selectedFilters .clearAll a.all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0 !important;
  padding: 6px 10px;
  background: #f3f1ec;
  border: 1px solid #e2e0db;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.2;
  color: #2a2a2a;
}
/* truncate long chip values so the × never sits on the text */
.has-compact-filter #amazzing_filter .af-selected-chip .chip-value {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.has-compact-filter #amazzing_filter .af-selected-chip .chip-x { flex: 0 0 auto; }
/* the module's .cf chip has an absolute × link: reserve space on the right and centre it */
.has-compact-filter #amazzing_filter .selectedFilters > div:not(.clearAll) {
  position: relative;
  padding-right: 26px;
}
.has-compact-filter #amazzing_filter .selectedFilters > div:not(.clearAll) > a {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  opacity: 0.5;
}
/* CLEAR: the pill lives on a.all; neutralise the wrapper so there is a SINGLE border */
.has-compact-filter #amazzing_filter .selectedFilters .clearAll {
  margin: 0 !important;
  padding: 0;
  background: transparent;
  border: 0;
}
.has-compact-filter #amazzing_filter .selectedFilters .clearAll a.all {
  color: #1A6FAB;
  text-decoration: none;
}
.has-compact-filter #amazzing_filter .selectedFilters .clearAll a.all .txt {
  font-size: 12px;
  line-height: 1.2;
  margin-top: 0;
}
.has-compact-filter #amazzing_filter .selectedFilters .clearAll i { margin: 0; }
/* In the drawer (amazzingfilter's deferred VIEW-PRODUCTS mode) the module updates its OWN .cf chips
   live on every change, but our buildChips() only refreshes on a full product reload - so our chips
   go stale here. Show the module's live .cf chips and hide ours in the drawer. (Desktop keeps our
   prefixed chips: selections reload immediately there, so they update fine.) */
/* Drawer uses OUR prefixed chips (kept live via the change handler in custom.js); hide the module's
   duplicate .cf. (.cf stays in the DOM so the module's CLEAR-all still works.) */
.has-compact-filter #amazzing_filter .selectedFilters .cf {
  display: none !important;
}
/* Per-filter "more.../less" cut-off: stop it floating on the group divider; make it a clean
   centered link inside its own filter group. */
.has-compact-filter #amazzing_filter .af_filter .toggle-cut-off {
  position: static;
  bottom: auto;
  margin-top: 8px;
  text-align: center;
}
.has-compact-filter #amazzing_filter .af_filter .toggle-cut-off span {
  padding: 2px 12px;
  background: transparent;
  color: #1A6FAB;
  font-size: 13px;
}
/* Bottom action bar: white + hairline instead of flat grey. */
.has-compact-filter #amazzing_filter .btn-holder {
  background: #fff;
  border-top: 1px solid #e2e0db;
  padding: 12px 16px;
}
/* Hidden on desktop (where .title_block is the inline "Filters:" label). */
.af-drawer-close { display: none; }
/* --- end MZS 2026-05-21 compact drawer restyle --- */

/* ============================================================
   MZS 2026-06-03 - Per-card variant tooltip
   Replaces pla.js's "Please select all product variants" modal
   + suppresses #blockcart-modal/toaster on listings; keeps the
   cart-count refresh intact. Skeleton SSR'd in product.tpl.
   MZS 2026-06-04 - sizes bumped + success/quote variants centered.
   ============================================================ */
.product-miniature .pla-section--actions { position: relative; }

.lc-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  max-width: calc(100% - 8px);
  border-radius: 8px;
  padding: 12px 14px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.lc-tooltip.show { opacity: 1; }

.lc-tooltip.success { background: #1a3d0a; }
.lc-tooltip.error   { background: #5a1010; }
.lc-tooltip.quote   { background: #0c3a6e; }

/* MZS 2026-06-04 - center success + quote variants (no missing-bullets list to anchor left). */
.lc-tooltip.success,
.lc-tooltip.quote { text-align: center; }
.lc-tooltip.success .tt-head,
.lc-tooltip.quote .tt-head { justify-content: center; }
.lc-tooltip.success .tt-body,
.lc-tooltip.quote .tt-body { padding-left: 0; }

.lc-tooltip .tt-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.lc-tooltip .tt-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lc-tooltip.success .tt-icon { background: #3B6D11; }
.lc-tooltip.error   .tt-icon { background: #791F1F; }
.lc-tooltip.quote   .tt-icon { background: #185FA5; }
.lc-tooltip .tt-icon svg { width: 12px; height: 12px; }

.lc-tooltip .tt-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.lc-tooltip.success .tt-title { color: #C0DD97; }
.lc-tooltip.error   .tt-title { color: #F7C1C1; }
.lc-tooltip.quote   .tt-title { color: #B5D4F4; }

.lc-tooltip .tt-body {
  font-size: 12.5px;
  line-height: 1.45;
  padding-left: 26px;
  margin-bottom: 3px;
}
.lc-tooltip .tt-body:empty { display: none; }
.lc-tooltip.success .tt-body { color: #EAF3DE; }
.lc-tooltip.error   .tt-body { color: #FCEBEB; }
.lc-tooltip.quote   .tt-body { color: #E6F1FB; }

.lc-tooltip .tt-missing {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 26px;
  margin-top: 3px;
}
.lc-tooltip .tt-missing:empty { display: none; }
.lc-tooltip .tt-missing span {
  font-size: 12px;
  color: #F09595;
  display: flex;
  align-items: center;
  gap: 4px;
}
.lc-tooltip .tt-missing span::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #F09595;
  flex-shrink: 0;
}

/* MZS 2026-06-09 r22 — positioning anchor for the floating tooltip below */
body#product .div_prices_and_cart_container { position: relative; }

/* MZS 2026-06-09 r22 — float the product-page tooltip above .product-add-to-cart
   (mirrors listing card pattern; supersedes r20 inline-banner override).
   Inherits position: absolute + bottom: calc(100% + 8px) + opacity show/hide
   + pointer-events: none from the broadened base .lc-tooltip rule (~12368).
   We only override the listing's centered/narrow geometry to span the buy column. */
body#product .lc-tooltip {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: none;
  margin: 0;
}
/* MZS 2026-06-15 - sel-err must beat the select's resting `border:...!important` (custom.css:13652)
   and target the colour-picker's inner bordered element, else the red never paints. */
body#product .product-variants-item.item_select select.custom-select.sel-err,
body#product .product-variants select.sel-err {
  border-color: #e02020 !important;
  background-color: #fff5f5 !important;
}
body#product .product-variants-item.item_color .div_color_attribute_container.sel-err .div_custom_color_select,
body#product .div_color_attribute_container.sel-err,
body#product .pla_custom_select_container.sel-err { border-color: #e02020 !important; }

.product-miniature .pla_attributes select.sel-err,
.product-miniature .pla_attributes .pla_attribute_horizontal.sel-err select {
  border-color: #e02020 !important;
  background-color: #fff5f5 !important;
}
/* Colour-picker analogue: the visible border lives on .pla_custom_select_container
   (pla-1.6.css:103 sets it #767676 dark; custom.css:12089 already overrides it for
   the neutral state). The inner .div_custom_select has no border, only the pink
   fill and the pill-radius. */
.product-miniature .pla_attributes .pla_custom_select_container.sel-err {
  border-color: #e02020 !important;
}
.product-miniature .pla_attributes .pla_custom_select_container.sel-err > .div_custom_select {
  background-color: #fff5f5 !important;
}

/* MZS 2026-06-22 - also hide the old core add-to-cart modal on the PDP; the new-style
   "Added to basket" .lc-tooltip (ppShowSuccess, custom.js) replaces it there now. */
body#category #blockcart-modal,
body#category .add-to-cart-popover,
body#product #blockcart-modal,
body#product .add-to-cart-popover {
  display: none !important;
}
/* MZS 2026-06-03 - END per-card variant tooltip */

/* ====================================================================
   MZS 2026-06-05 — Product page redesign round 1
   Scoped to body#product. Sections: A right-col / B variants /
   C qty stepper / D basket+quote / E middle col / F gallery /
   G accordion / H mobile @media | 0 top-row layout (added 2026-06-10)
   ==================================================================== */

/* ---- 0. TOP-ROW LAYOUT (lg+) ---- */
/* MZS 2026-06-10 — Top row uses flex-basis percentage overrides at lg+ to hit
   the prototype's 300:510:340 column ratio (≈26%/44%/30%). Bootstrap col-lg-3/5/4
   (25%/41.67%/33.33%) made the buy column ~60px too wide; 12ths can't express
   the wanted ratio. Earlier attempt used CSS Grid on .row.mainrow but that
   captured .div_bottom_col (col-lg-12 accordion section) as a grid item and
   squashed it to the first track — reverted. Bootstrap's row stays flex; only
   the three TOP columns get overridden flex-basis. .div_bottom_col keeps its
   Bootstrap col-lg-12 100% basis and wraps to its own row as Bootstrap intends.
   Note: middle column carries legacy class `.div_right_col` (misnamed — actually
   middle column; rename is out of scope). */
@media (min-width: 992px) {
    body#product .row.mainrow {
        /* Bootstrap rows have -15px horizontal margins to cancel col gutters,
           which we're also zeroing on the three top columns — reset so the row
           doesn't extend past the container edge. */
        margin-left: 0;
        margin-right: 0;
    }
    /* MZS 2026-06-11 — Client review: right buy column too wide ("wasted space"),
       middle stretch OK, image a little wider OK. 26/44/30 → 28/47/25. */
    body#product .row.mainrow > .div_left_col {
        flex: 0 0 28%;
        max-width: 28%;
    }
    body#product .row.mainrow > .div_right_col {
        flex: 0 0 47%;
        max-width: 47%;
    }
    body#product .row.mainrow > #product-buy-column {
        flex: 0 0 25%;
        max-width: 25%;
    }
    /* .div_bottom_col intentionally NOT listed — it keeps Bootstrap col-lg-12
       (flex: 0 0 100%; max-width: 100%) so the accordion section below the
       top row renders at full width. The previous-round grid broke this. */
}

body#product #product-buy-column .product-buy-box {
    display: block !important;
    opacity: 1 !important;
}

/* ---- A. RIGHT COLUMN BUY BOX ---- */
body#product #product-buy-column > .product-buy-box {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    padding: 16px 14px;
}
body#product .pc_col3_buy_block.pc_phaseA1demo { display: block; margin: 0; }

body#product .product-prices {
    display: grid;
    /* MZS 2026-06-15 — RIGHT-aligned to match references/gutter-centre-product-page_33.html
       (price block below the selectors, flush-right). Slack 1fr column moved to the LEFT and
       justify-items:end so each row hugs the right edge; margin-top adds the selects->price gap
       (was 0 — a hold-over from when price sat above the variants). */
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
        "from   price   exvat"
        "incvat incvat  incvat"
        "deliv  deliv   deliv";
    column-gap: 4px;
    row-gap: 3px;
    align-items: baseline;
    justify-items: end;
    margin: 14px 0;
    padding: 0;
}
body#product .product-prices > .product__product-price { display: contents; }
body#product .product-prices > .product__product-price > .div_productdiscount { display: contents; }
body#product .product-prices > .product__product-price > .current-price { display: contents; }
body#product .product-prices .product-discount { display: contents; }
body#product .product-prices .regular-price {
    grid-area: regular;
    text-decoration: line-through;
    color: #8a8a8a;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
}
body#product .product-prices .discount {
    grid-area: badge;
    background: #e22a2a;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 5px;
    line-height: 1.3;
}
body#product .product-prices .current-price-display.price {
    grid-area: main;
    /* MZS 2026-06-15 - was justify-self:start (left); price block is now RIGHT-aligned */
    justify-self: end;
    color: #e8531a;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}
body#product .product-prices .current-price-display.price.lowestprice-withouttax:empty { display: none; }
/* MZS 2026-06-05 r13 - PS emits .lowestprice-withouttax alongside main price; hide the duplicate to stop the overlap */
body#product .product-prices .current-price-display.price.lowestprice-withouttax { display: none !important; }
/* MZS 2026-06-05 r13 - close the gap between delivery widget and variant selects:
   defeat PCH spacer + zero wrapper margins between .product-prices and .product-variants
   MZS 2026-06-11 — Module's product-label.tpl ONLY emits this spacer when collect-stock
   is 0 (a height-reserve for listing cards so delivery-only cards don't visually jump
   shorter than delivery+collect cards). On PDP there's no neighbouring card — the
   reserved height becomes a dead 18px gap below the lone delivery radio. Hide it. */
body#product .pch-lc-radio-spacer { display: none !important; }
body#product #product-buy-column .product-actions,
body#product #product-buy-column #_desktop_productinformation,
body#product #product-buy-column .product-information,
body#product #product-buy-column form#add-to-cart-or-refresh {
    margin: 0;
    padding: 0;
}

body#product .product-prices .tax-shipping-delivery-label.label1 {
    grid-area: exvat;
    align-self: end;
    color: #5a5a5a;
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 4px;
    padding: 0;
}
body#product .product-prices > .div_hookproductpriceblock { display: none; }
/* MZS 2026-06-05 r14 - flatten so children (#lyoshowvatfree, .pchdc-label, .lc-delivery-opts)
   become direct grid items of .product-prices; otherwise inc.VAT amount can't be placed
   in `incvat` row independently from delivery row. */
body#product .product-prices > .tax-shipping-delivery-label:not(.label1) {
    display: contents;
}
body#product .product-prices #lyoshowvatfree {
    grid-area: incvat;
    margin: 0 !important;
    padding: 0 !important;
}
body#product .product-prices .pchdc-label.pchdc-listing-label {
    grid-area: deliv;
    margin: 0 !important;
    padding: 0 !important;
}
body#product .product-prices .lc-delivery-opts.pch-lc-delivery-opts {
    grid-area: deliv;
}
body#product .product-prices > .tax-shipping-delivery-label:not(.label1) > br { display: none; }
body#product .pchdc-label.pchdc-listing-label {
    color: #1a9a6a !important;
    font-size: 13px !important;
    font-weight: 500;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

body#product .pc_col3_buy_block > .div_delivery_times {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    color: #1a9a6a;
    font-size: 13px;
    font-weight: 500;
}
body#product .pc_col3_buy_block > .div_delivery_times svg { color: #1a9a6a; }
body#product .div_rightcol_content > .div_rightcol_right_container { display: none !important; }

/* MZS 2026-06-10 — delivery widget relocated by JS to a wrapper directly after
   .product-prices (custom.js IIFE; anchor moved from .product-variants 2026-06-15 when
   price was reordered below the variants). Wrapper collapses when empty. */
body#product .pch-delivery-relocated:empty { display: none; }
body#product .pch-delivery-relocated {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px; /* MZS 2026-06-16 — even buy-column rhythm: delivery->add-to-cart gap was 4px, now 14px to match variants->price + price->delivery */
}
body#product .pch-delivery-relocated .pchdc-label.pchdc-listing-label {
    margin: 0 !important;
    padding: 0 !important;
}
/* MZS 2026-06-11 — same as rule above, applied after JS relocation into .pch-delivery-relocated. */
body#product .pch-delivery-relocated .pch-lc-radio-spacer { display: none !important; }

/* MZS 2026-06-10 — Hide delivery items while they're still at original location
   (inside .product-prices). PS AJAX combination response re-renders .product-prices
   with fresh items each time; our IIFE then moves them into .pch-delivery-relocated.
   Without this rule, they paint briefly at the old above-variants location during the
   AJAX response before our handler runs. Once moved out, the ancestor-scoped selector
   stops matching and items become visible at the new spot. */
body#product .product-prices > .tax-shipping-delivery-label > .pchdc-label.pchdc-listing-label,
body#product .product-prices > .tax-shipping-delivery-label > .lc-delivery-opts.pch-lc-delivery-opts {
    display: none !important;
}
/* MZS 2026-06-15 — on the product page the module also renders a BARE .pchdc-label (no
   .pchdc-listing-label) inside .product-prices, which the relocation/FOUC selectors above don't
   catch, so it lingers as a duplicate "Estimated delivery" line inside the price block. The
   canonical delivery line is the relocated .lc-delivery-opts radio (in .pch-delivery-relocated,
   OUTSIDE .product-prices — unaffected by this rule). Hide the leftover in-price label. */
body#product .product-prices .pchdc-label { display: none !important; }

/* ---- B. VARIANT SELECTS ---- */
body#product .product-variants {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px; /* MZS 2026-06-16 — was 8px; even buy-column rhythm (uniform 14px between selects too) */
}
body#product .product-variants .product-variants-item { margin: 0; padding: 0; }

body#product .product-variants-item.item_select select.custom-select {
    width: 100%;
    height: 44px;
    padding: 10px 36px 10px 14px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236a6a6a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
    font-size: 14px;
    color: #1a1a1a;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body#product .product-variants-item.item_select select.custom-select:focus {
    outline: none;
    border-color: #e8531a;
}

body#product .product-variants-item.item_color .div_custom_color_select {
    height: 44px;
    width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: #fff;
    padding: 0 36px 0 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #1a1a1a;
    position: relative;
    transition: border-color 0.15s;
}
body#product .product-variants-item.item_color .div_custom_color_select::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 10px;
    height: 6px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236a6a6a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center;
    pointer-events: none;
    transition: transform 0.2s;
}
body#product .product-variants-item.item_color .div_color_attribute_container.open .div_custom_color_select { border-color: #e8531a; }
body#product .product-variants-item.item_color .div_color_attribute_container.open .div_custom_color_select::after { transform: translateY(-50%) rotate(180deg); }
body#product .product-variants-item.item_color .div_custom_color_select .label-color {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    cursor: pointer;
}
body#product .product-variants-item.item_color .div_custom_color_select .attr-name {
    flex: 1 1 auto;
    font-size: 14px;
    color: #1a1a1a;
}
body#product .product-variants-item.item_color .div_custom_color_select #color-image,
body#product .product-variants-item.item_color .js-drop #color-image {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    flex: 0 0 16px;
}
/* MZS 2026-06-09 r30 - fancy .js-drop panel styling REVERTED per user.
   Dropdown falls back to legacy ul#options styling at custom.css:4398-4408.
   Only the .open show rule below is retained because the IIFE at custom.js:1962+ relies on it. */
body#product .product-variants-item.item_color .div_color_attribute_container.open ul.js-drop { display: block; }

body#product .product-variants-item.item_radio .item_input_container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
body#product .product-variants-item.item_radio .custom-control.custom-radio { position: relative; margin: 0; padding: 0; }
body#product .product-variants-item.item_radio .custom-control-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
body#product .product-variants-item.item_radio .custom-control-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    height: 36px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    color: #1a1a1a;
    font-size: 13px;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
body#product .product-variants-item.item_radio .custom-control-label::before,
body#product .product-variants-item.item_radio .custom-control-label::after { display: none !important; }
body#product .product-variants-item.item_radio .custom-control-input:checked + .custom-control-label {
    border-color: #e8531a;
    background: #fff3eb;
    color: #e8531a;
    font-weight: 600;
}

/* ---- C. QTY STEPPER ---- */
body#product .div_qty_input_container.pc_qty_wrap {
    display: flex;
    align-items: stretch;
    height: 44px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
    width: auto;
    padding: 0;
}
body#product .div_qty_input_container.pc_qty_wrap > .pla_label_quantity { display: none !important; }
body#product .pc_qty_btn {
    width: 32px;
    background: #fff;
    border: none;
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    padding: 0;
    transition: background 0.1s;
}
body#product .pc_qty_btn:hover { background: #f6f4f0; }
body#product .pc_qty_btn:active { background: #ece9e3; }
body#product .div_qty_input_container.pc_qty_wrap input#quantity_wanted {
    width: 38px;
    text-align: center;
    border: none;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    background: transparent;
    font-size: 14px;
    font-weight: 400 !important;
    color: #1a1a1a;
    padding: 0;
    border-radius: 0;
    -moz-appearance: textfield;
    height: 100%;
    box-shadow: none;
}
body#product .div_qty_input_container.pc_qty_wrap input#quantity_wanted::-webkit-outer-spin-button,
body#product .div_qty_input_container.pc_qty_wrap input#quantity_wanted::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---- D. BASKET + QUOTE INLINE ROW ---- */
body#product .product-add-to-cart .qty.col-auto {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
}
body#product .product-add-to-cart .qty.col-auto > label.quantity__label { display: none !important; }
body#product .product-add-to-cart .qty .div_product_add_to_cart {
    display: contents;
    flex: 1 1 auto;
    margin: 0;
    width: auto;
    padding: 0;
}
body#product .product-add-to-cart .qty .add-to-cart {
    height: 44px;
    width: 100%;
    background: #e8531a;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 0 14px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: none;
}
body#product .product-add-to-cart .qty .add-to-cart:hover { background: #1a9a6a; } /* MZS 2026-06-15 - green on hover per client (was #d34915 darker-orange) */
body#product .product-add-to-cart .qty .add-to-cart:disabled { background: #c8c8c8; cursor: not-allowed; }
body#product .product-add-to-cart .qty .add-to-cart .span_cart_text { font-size: 14px; line-height: 1; }
body#product .product-add-to-cart .qty .add-to-cart .icon_container { display: none; }

/* ---- E. MIDDLE COLUMN ---- */
body#product .div_right_col_container > .pc_col2_title_block { margin: 0 0 8px; }
body#product .div_right_col_container > .pc_col2_title_block .h_product_name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: 0;
}
body#product .pc_col2_reference_block { margin: 0 0 14px; padding: 0; }
body#product .pc_col2_reference_block .div_product_reference { padding: 0; }
body#product .pc_col2_reference_block .product-reference {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
}
body#product .pc_col2_reference_block .reference-number,
body#product .pc_col2_reference_block .brand-name {
    display: inline-flex;
    align-items: baseline;
    gap: 2px; /* MZS 2026-06-15 - tighten Code:/Brand: label-to-value to a single-space look (was 4px) */
    font-size: 12px;
}
body#product .pc_col2_reference_block .label.mb-0 {
    color: #8a8a8a;
    font-size: 12px;
    margin: 0;
    /* MZS 2026-06-15 - kill the 58px min-width + 10px padding-right leaking from the global
       `.product-reference .label` rule (custom.css:4698) that forced the wide Code:/Brand: gap */
    min-width: 0;
    padding-right: 0;
    text-transform: none;
    font-weight: 400;
}
body#product .pc_col2_reference_block .reference-number > span,
body#product .pc_col2_reference_block .brand-name > span {
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 400;
}

body#product .pc_col2_full_description {
    font-size: 13.5px;
    line-height: 1.55;
    color: #444;
    margin: 0;
}
body#product .pc_col2_full_description.pc_desc_clamp .pc_desc_inner {
    position: relative;
    max-height: 23em;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
body#product .pc_col2_full_description.pc_desc_clamp .pc_desc_inner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.4em;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events: none;
}
body#product .pc_col2_full_description.pc_desc_clamp.expanded .pc_desc_inner { max-height: 200em; }
body#product .pc_col2_full_description.pc_desc_clamp.expanded .pc_desc_inner::after { display: none; }
/* MZS 2026-06-10 — descAutoHide adds .fits when content fits within max-height
   (button is also hidden). Kill the fade too — otherwise it overlays the last
   ~2.4em of visible content and washes it out. */
body#product .pc_col2_full_description.pc_desc_clamp.fits .pc_desc_inner::after { display: none; }
body#product .pc_desc_more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    padding: 4px 0;
    margin: 4px 0 0;
    cursor: pointer;
    color: #1A6FAB;
    font-size: 13px;
    font-weight: 600;
    outline: none;
}
body#product .pc_desc_more[hidden] { display: none !important; }
body#product .pc_desc_more .pc_desc_chevron { transition: transform 0.2s; }
body#product .pc_col2_full_description.expanded + .pc_desc_more .pc_desc_chevron { transform: rotate(180deg); }

/* ---- F. GALLERY ---- */
body#product .div_thumbnails .product-cover img,
body#product .div_thumbnails .product-img img {
    max-height: 380px;
    width: auto;
    margin: 0 auto;
    display: block;
    aspect-ratio: 1 / 1; /* belt-and-braces; harmless when width:auto */
}
body#product .product-thumbs .product-thumb .div_thumbcontainer {
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: #f6f4f0;
    transition: border-color 0.15s;
    padding: 4px;
}
/* MZS 2026-06-05 r15 - orange active-thumb border removed per user request */
body#product .product-thumbs .product-thumb img.thumb {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- G. ACCORDION PANELS ---- */
body#product .product-tab-container { padding: 0; }
body#product .pc_acc_btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
    cursor: pointer;
    text-align: left;
    font-weight: 600;
    transition: background 0.1s;
    background: none;
    border: none;
    font-size: 14px;
    color: #2a2a2a;
}
body#product .pc_acc_btn_left { display: inline-flex; align-items: center; gap: 12px; }
body#product .pc_acc_icon { color: #e8531a; flex-shrink: 0; }
body#product .pc_acc_chevron { color: #6a6a6a; transition: transform 0.2s; flex-shrink: 0; }
body#product .pc_acc.open .pc_acc_chevron { transform: rotate(180deg); }
body#product .pc_acc_body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease, padding 0.2s;
}
body#product .pc_acc_body h2,
body#product .pc_acc_body h3,
body#product .pc_acc_body h4 {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 12px 0 6px;
}
body#product .pc_acc_body ul { padding-left: 22px; }
body#product .pc_acc_body .product-attachments .attachment_name {
    color: #1a1a1a;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
body#product .pc_acc_body .product-attachments .attachment_download {
    color: #8a8a8a;
    font-size: 12px;
    text-decoration: none;
}
body#product .pc_acc_body .product-attachments .svg_icon.pdf { color: #e22a2a; flex-shrink: 0; }
body#product .pc_acc_body .product-attachments .svg_icon.download { color: #6a6a6a; flex-shrink: 0; }

/* ---- H. MOBILE ---- */
@media (max-width: 767px) {
    body#product .row.mainrow {
        display: flex;
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
    }
    body#product .row.mainrow > [class*="col-"] {
        max-width: 100%;
        flex: 0 0 100%;
        padding-left: 8px;
        padding-right: 8px;
    }
    body#product #product-buy-column > .product-buy-box { padding: 12px; border-radius: 0 0 20px 20px; border-top: 0; margin-top: -1px }
    body#product .div_right_col_container > .pc_col2_title_block .h_product_name { font-size: 18px; }
    body#product .div_thumbnails .product-cover img,
    body#product .product-add-to-cart .qty.col-auto { gap: 6px; }
    body#product .product-add-to-cart .qty .add-to-cart { font-size: 13px; padding: 0 10px; }
    body#product .product-add-to-cart .qty .fly_to_quote_cart_button {
        font-size: 11px;
        min-width: 52px;
        padding: 4px 6px;
    }
    body#product .product-tab-container { margin-top: 3px; }
    body#product .pc_acc_btn { padding: 12px 14px; font-size: 14px; }
}
/* END MZS 2026-06-05 — Product page redesign round 1 */

/* ====================================================================
   MZS 2026-06-05 r2 — Product page redesign round 2 polish
   Fixes after user review of round 1:
   A. Unify gallery+middle+buy-box into ONE continuous card (extend the
      existing left-merges-with-middle pattern to also absorb the right)
   B. Restore .qty flex-direction:row (defeats PeterChamp 2026-04-14
      `flex-direction:column !important` at custom.css:10613) so qty +
      Basket + Quote sit on the same row
   C. Hide bootstrap-touchspin auto-injected up/down buttons so we don't
      see TWO sets of stepper controls (touchspin's + our pc_qty_btn)
   D. Polish: drop middle col radius, share padding
   ==================================================================== */

@media (min-width: 768px) {
    /* A. Unified card — middle col is fully square, right buy box square+borderless left */
    body#product .row.mainrow .div_right_col .div_right_col_container {
        border-radius: 0 !important;
        border-right: 0 !important;
        border-top: 1px solid rgba(0,0,0,0.125);
        border-bottom: 1px solid rgba(0,0,0,0.125);
    }
    body#product #product-buy-column > .product-buy-box,
    body#product #product-buy-column .product-buy-box {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-left: 0 !important;
        border-top-right-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
        border-top: 1px solid rgba(0,0,0,0.125) !important;
        border-right: 1px solid rgba(0,0,0,0.125) !important;
        border-bottom: 1px solid rgba(0,0,0,0.125) !important;
        background: #fff !important;
        height: 100% !important;
        /* MZS 2026-06-17 — top 16->12 so the variant selectors' top edge lines up with the
           product title + image (both their containers use padding:12px at L9402/9414). */
        padding: 12px 14px !important;
    }
    /* Eliminate Bootstrap col gutter between middle and right so cards touch */
    body#product .row.mainrow .div_right_col { padding-right: 0 !important; }
    body#product .row.mainrow #product-buy-column {
        padding-left: 0 !important;
    }
}

/* B. .qty row direction restore — match PeterChamp 2026-04-14 selector signature + !important */
body#product #product-buy-column .product-add-to-cart .d-flex.flex-row.qty.col-auto,
body#product #product-buy-column .product-add-to-cart .d-flex.flex-row.qty {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}
body#product #product-buy-column .product-add-to-cart .d-flex.flex-row.qty > .div_qty_input_container {
    width: auto !important;
    flex: 0 0 auto !important;
}
body#product #product-buy-column .product-add-to-cart .d-flex.flex-row.qty > .product-quantity {
    width: auto !important;
    flex: 1 1 auto !important;
    display: contents !important;
}
body#product #product-buy-column .product-add-to-cart .d-flex.flex-row.qty .div_product_add_to_cart {
    display: contents !important;
    width: auto !important;
    flex: 1 1 auto;
}

/* C. Hide bootstrap-touchspin auto-injection */
body#product .div_qty_input_container.pc_qty_wrap .bootstrap-touchspin,
body#product .div_qty_input_container.pc_qty_wrap div.input-group {
    display: contents;
}
body#product .div_qty_input_container.pc_qty_wrap .bootstrap-touchspin-up,
body#product .div_qty_input_container.pc_qty_wrap .bootstrap-touchspin-down,
body#product .div_qty_input_container.pc_qty_wrap .input-group-btn,
body#product .div_qty_input_container.pc_qty_wrap .input-group-prepend,
body#product .div_qty_input_container.pc_qty_wrap .input-group-append { display: none !important; }
body#product .div_qty_input_container.pc_qty_wrap input#quantity_wanted {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* D. Polish — internal padding match */
/* MZS 2026-06-17 — top 16->12 so the product TITLE lines up with the image container (12px,
   L9402) and the buy box (12px, L13399). Was 16 -> title sat 4px below image + selectors. */
body#product .div_right_col_container { padding: 12px 14px; }
/* END MZS 2026-06-05 r2 — round 2 polish */

/* ====================================================================
   MZS 2026-06-17 — Webkul wkmultipleunit (sell-in-multiples / "pack qty") buy box.
   These products inject their OWN qty stepper as a bootstrap-touchspin around
   #wk_quantity_wanted, inside a .div_qty_input_container WITHOUT .pc_qty_wrap, so the
   theme's B/C compacting (custom.css ~13434, keyed on .pc_qty_wrap) doesn't apply: the
   touchspin input balloons to ~214px and eats the row, squashing Add-to-Basket and pushing
   Add-to-Quote past the card's right edge. Compact the touchspin so the row matches a normal
   buy box: qty stepper (fixed, compact) + Add-to-Basket (grows) + Add-to-Quote, inside the card.
   Scoped to :not(.pc_qty_wrap) so standard (non-Webkul) buy boxes are untouched.
   ==================================================================== */
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) {
    flex: 0 0 auto !important;
    width: auto !important;
}
/* The wk touchspin renders as separate boxy grey buttons; restyle it as the theme's unified
   bordered pill so it matches the normal stepper (.pc_qty_wrap custom.css:13077/13833,
   .pc_qty_btn 13091/13842, #quantity_wanted 13106). Visual only — pack increment (data-inc=2) kept.
   MZS 2026-06-17 round 2 (client: "make the quantity box look the same as the others"). */

/* the touchspin input-group IS the pill: one rounded border, fixed height, corners clipped */
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .bootstrap-touchspin,
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .input-group {
    display: flex !important;
    align-items: stretch !important;
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    height: 38px !important;
    border: 1px solid #d6d6d6 !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    background: #fff !important;
    padding: 0 !important;
    box-shadow: none !important;
}
/* hide the Webkul "Qty" caption (normal stepper hides .pla_label_quantity, custom.css:13090) */
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .pla_label_quantity { display: none !important; }
/* center value input: transparent, no own border/radius — matches #quantity_wanted */
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) #wk_quantity_wanted,
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .bootstrap-touchspin > input,
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) input.form-control {
    width: 38px !important;
    min-width: 0 !important;
    max-width: none !important;   /* defeat global .bootstrap-touchspin>input { max-width:33px } at custom.css:5292 */
    flex: 0 0 38px !important;
    height: 100% !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #1a1a1a !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) #wk_quantity_wanted::-webkit-outer-spin-button,
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) #wk_quantity_wanted::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
/* -/+ button wrappers: no boxes of their own. min-width:0 defeats custom.css:519
   (.bootstrap-touchspin .input-group-btn { min-width:35px }) which left ~5px of white pill
   showing beside each 30px button (the "extra spaces" the client saw). */
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .input-group-btn,
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .input-group-prepend,
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .input-group-append {
    display: flex !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    border: 0 !important;
    background: transparent !important;
}
/* -/+ buttons styled like .pc_qty_btn: flat grey, no radius, 30px, fill height */
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .input-group-btn .btn,
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .bootstrap-touchspin-up,
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .bootstrap-touchspin-down,
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .wk-touchspin-up,
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .wk-touchspin-down {
    width: 30px !important;
    min-width: 0 !important;
    /* The .input-group-btn span wrappers leave a thin vertical sliver of white pill above/below the
       buttons (height:% resolves against the span's CONTENT box = 36px after the pill's 1px top+bottom
       border, so it can't reach the full 38px). Overflow the button a few px and centre it so the
       pill's overflow:hidden clips it flush top AND bottom — grey fills edge-to-edge. MZS 2026-06-17
       round 3, per client ("make the button height 101%"). */
    height: calc(100% + 4px) !important;
    align-self: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #e8e6e0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #4a4a4a !important;
    font-size: 0.9rem !important;
    font-weight: normal !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .input-group-btn .btn:hover,
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .wk-touchspin-up:hover,
body#product .product-add-to-cart .div_qty_input_container:not(.pc_qty_wrap) .wk-touchspin-down:hover {
    background: #dcd9d2 !important;
}
/* END MZS 2026-06-17 — Webkul wkmultipleunit buy box */

/* ====================================================================
   MZS 2026-06-05 r3 — Product page redesign round 3 polish
   A. Strip cream backgrounds added in round 1 to .div_productimagecontainer and .div_thumbcontainer
   B. Dynamic description clamp via CSS var (--pc-desc-max-height) set by JS to match gallery height
   C. Accordion match reference verbatim (border-top separator inside panel, 8px gap, exact colors).
      Attachments rendered as a 5-col horizontal .dl-link grid with orange-tinted PDF icon square.
   ==================================================================== */

/* A. Gallery — drop cream backgrounds + padding */
body#product .div_thumbnails .div_productimagecontainer {
    background: transparent !important;
    padding: 0 !important;
}
body#product .product-thumbs .product-thumb .div_thumbcontainer {
    background: transparent !important;
    padding: 4px;
}

/* B. Description — dynamic clamp REMOVED (MZS 2026-06-09 r20): JS gallery-height sync was
   causing collapse-back bug; clamp is now driven by the static max-height: 7em above. */

/* C. Accordion — match reference exactly */
body#product .pc_accordions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}
body#product .pc_acc {
    background: #fff;
    border: 1px solid #e2e0db;
    border-radius: 8px;
    overflow: hidden;
}

body#product .pc_acc_btn:hover { background: transparent; }
body#product .pc_acc_btn_left { gap: 10px; }
body#product .pc_acc_label { font-size: 14px !important; font-weight: 600 !important; color: #2a2a2a !important; }
body#product .pc_acc_icon { stroke-width: 2; fill: #e8531a }
body#product .pc_acc_chevron { width: 14px !important; height: 14px !important; color: #888 !important; stroke-width: 2.5; }

#pc-acc-returns .pc_acc_icon { fill: transparent !important; }
#pc-acc-downloads .pc_acc_icon { stroke-width: 1.2 !important; }

/* KEY: border-top separator inside panel between title and body when open */
body#product .pc_acc.open .pc_acc_body {
    border-top: 1px solid #e2e0db;
    max-height: 4000px;
}
body#product .pc_acc_body {
    font-size: 13px !important;
    color: #888 !important;
    line-height: 1.7 !important;
}
body#product .pc_acc_body p,
body#product .pc_acc_body li,
body#product .pc_acc_body div { font-size: 13px !important; color: #555 !important; line-height: 1.7 !important; }

/* MZS 2026-06-10 — Static accordion content patterns (Delivery + Returns).
   Ported from references/gutter-centre-product-page_19.html. Reference used inline
   style attrs with var(--muted/--dark/--blue/--border) — substituted to literal
   theme colors (#888/#2a2a2a/#1A6FAB/#e2e0db) since those vars aren't defined in
   our theme. .delivery-grid is shared between Delivery and Returns panels.
   !important is needed on font-size/color/line-height because the catchall rule
   just above (.pc_acc_body p,li,div) carries !important. */
body#product .pc_acc_body .pc_acc_intro {
    font-size: 12px !important;
    color: #888 !important;
    margin: 0 0 16px;
    line-height: 1.5 !important;
}
body#product .pc_acc_body .pc_acc_outro {
    font-size: 12px !important;
    color: #888 !important;
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid #e2e0db;
    line-height: 1.5 !important;
}
body#product .pc_acc_body .pc_acc_outro strong { color: #2a2a2a; }
body#product .pc_acc_body .pc_acc_outro a { color: #1A6FAB; }
body#product .pc_acc_body .delivery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
body#product .pc_acc_body .delivery-item {
    padding: 10px 12px;
    background: #fafaf8;
    border: 1px solid #e2e0db;
    border-radius: 6px;
    font-size: 12px !important;
    color: #555 !important;
    line-height: 1.5 !important;
}
body#product .pc_acc_body .delivery-item strong {
    display: block;
    font-size: 12px !important;
    font-weight: 700;
    color: #2a2a2a !important;
    margin-bottom: 2px;
}
body#product .pc_acc_body .delivery-item span {
    font-size: 11.5px !important;
    color: #888 !important;
}

/* Attachments — 5-col flat horizontal grid (matches .dl-links) */
body#product .pc_acc_body .product-attachments {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px;
    padding: 0;
    margin: 0;
}
body#product .pc_acc_body .product-attachments .attachment {
    background: #fff;
    border: 1px solid #e2e0db;
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    transition: border-color 0.15s;
}
body#product .pc_acc_body .product-attachments .attachment:hover { border-color: #e8531a !important; }

/* PDF icon — small orange-tinted square (matches .dl-link-icon) */
body#product .pc_acc_body .product-attachments .svg_icon.pdf {
    background: #fff2ed;
    border-radius: 5px;
    color: #e8531a !important;
    flex-shrink: 0;
    box-sizing: border-box;
}

body#product .pc_acc_body .product-attachments .attachment-name-container {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
    display: flex !important;
    flex-direction: column;
}
body#product .pc_acc_body .product-attachments .attachment_name {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #2a2a2a !important;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.3 !important;
}
body#product .pc_acc_body .product-attachments .attachment_download {
    font-size: 10px !important;
    color: #888 !important;
    text-decoration: none;
    line-height: 1.3 !important;
}
body#product .pc_acc_body .product-attachments .svg_icon.download {
    width: 12px !important;
    height: 12px !important;
    color: #ccc !important;
    flex-shrink: 0;
    stroke-width: 2.2;
}
body#product .pc_acc_body .product-attachments .attachment:hover .svg_icon.download { color: #e8531a !important; }

/* Responsive: fewer columns on smaller viewports */
@media (max-width: 1199px) {
    body#product .pc_acc_body .product-attachments { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
    body#product .pc_acc_body .product-attachments { grid-template-columns: repeat(1, 1fr) !important; }
    .div_flagsandimgcontainer .slick-slide .product-cover > div { width: 100%; }
    .div_flagsandimgcontainer .slick-slide .product-cover > div img { width: 100%; }
}
/* END MZS 2026-06-05 r3 — round 3 polish */

/* ====================================================================
   MZS 2026-06-05 r4 — Internal column dividers + hide accordion icons
   - Middle col gains left + right 1px borders so the unified top card
     shows clear image | middle | buy-box dividers
   - Round-1 .pc_acc_icon hidden so user can swap in their own SVGs later
   ==================================================================== */

@media (min-width: 768px) {
    body#product .row.mainrow .div_right_col .div_right_col_container {
        border-left: 1px solid rgba(0,0,0,0.125);
        border-right: 1px solid rgba(0,0,0,0.125) !important;
    }
}

/* MZS 2026-06-09 r20 - removed `body#product .pc_acc_icon { display: none !important; }`
   so the 20x20 icon slot inside .pc_acc_btn_left is visible/reserved (user adds SVG icons). */
/* END MZS 2026-06-05 r4 — round 4 dividers */

/* ====================================================================
   MZS 2026-06-05 r5 — Mirror category listing buy-stack on product detail
   Source: custom.css listing rules at 8760, 8802, 10746-10984, 12080-12130.
   Strategy: keep round-1's grid skeleton, override fonts/colors/sizes/
   missing grid areas to match listing exactly.
   ==================================================================== */

/* A. Price grid — restore "From" cell + listing template-areas */
body#product .product-prices:not(.producthasdiscount) {
    grid-template-areas:
        "bulkbadge bulkbadge bulkbadge"
        "from price exvat"
        "incvat incvat incvat"
        "deliv deliv deliv" !important;
}
body#product .product-prices.producthasdiscount {
    grid-template-areas:
        "bulkbadge bulkbadge bulkbadge"
        "from   reg    badge"
        "price  price  exvat"
        "incvat incvat incvat"
        "deliv  deliv  deliv" !important;
}
/* MZS 2026-06-19 - the JS-built PDP Bulk Save / Pack badge wrap sits in its own full-width row, flush right
   (matches the listing). It is a grid item of .product-prices via .product__product-price{display:contents}, so
   without grid-area it auto-placed into the 1fr left column and right-aligned mid-block. */
body#product .product-prices .bulk-badge-wrap {
    grid-area: bulkbadge;
    justify-self: end;
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    z-index: 2;
}
/* MZS 2026-06-05 r12 - "From" indicator restored, styled like listing but justify-self: start (left) */
body#product .product-prices > .product__product-price > .price-1 {
    display: block;
    grid-area: from;
    /* MZS 2026-06-15 - was justify-self:start (left); price block is now RIGHT-aligned */
    justify-self: end;
    font-size: 11px;
    line-height: 1.2;
    color: #777;
    height: auto;
    /* MZS 2026-06-15 - bottom-align "From" with the adjacent price (was margin-top:9px hack;
       align-self:end mirrors the ex.VAT label and works in both discount + no-discount grids) */
    margin-top: 0;
    align-self: end;
}

body#product .product-prices > .product__product-price.has-discount > .price-1 {
  margin-top: 0 !important; /* MZS 2026-06-15 - align-self:end handles bottom alignment now */
}

body#product .product-prices > .product__product-price > .price-1 > span, span.aeuc_from_label { font-size: 11px !important; color: #777 !important; }

/* Main price — smaller, still orange */
body#product .product-prices .current-price-display.price {
    grid-area: price;
    color: #e8531a !important;
    font-size: 28px !important; /* MZS 2026-06-15 - slightly larger than the 26px related-product cards (was 22px) */
    font-weight: 700 !important;
    line-height: 1.15 !important;
}
/* ex.VAT inline label — listing grey */
body#product .product-prices .tax-shipping-delivery-label.label1 {
    font-size: 12px !important;
    color: #7a7a7a !important;
    align-self: end !important;
    margin: 0 0 5px;
}
/* inc.VAT line — listing grey + RIGHT-aligned (MZS 2026-06-15, was LEFT in round 12) */
body#product #lyoshowvatfree,
body#product #lyoshowvatfree strong,
body#product #lyoshowvatfree span {
    color: #7a7a7a !important;
    font-size: 13px !important;
    font-weight: inherit !important;
    text-align: right !important;
}
/* Discount row 1 — strike + badge */
body#product .product-prices .regular-price {
    grid-area: reg !important;
    font-size: 13px !important;
    text-decoration: line-through !important;
    opacity: 0.6 !important;
    color: inherit !important;
    margin: 0;
}
body#product .product-prices .discount {
    grid-area: badge !important;
    background: #e22a2a !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* MZS 2026-06-05 r8 - delivery row border-top removed (user: "remove this fucking border here") */
/* MZS 2026-06-05 r10 - r9 right-align rule removed; reference is fully LEFT-aligned */
body#product .pchdc-label.pchdc-listing-label {
    color: #009b72 !important;
    font-size: 14px !important;
    font-weight: bold !important;
}
body#product .lc-delivery-opts.pch-lc-delivery-opts .lc-radio {
    font-size: 14px !important;
    color: #009b72 !important;
    gap: 6px !important;
}

/* B. Variant selects — mirror listing's pla_select/.div_custom_color_select */
body#product .product-variants-item > .label { display: none !important; }
body#product .product-variants-item.item_select select.custom-select {
    height: auto !important;
    padding: 9px 28px 9px 10px !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    color: #4a4a4a !important;
    border: 1px solid #c8c5bd !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px 16px !important;
    box-shadow: none !important;
}
body#product .product-variants-item.item_color .div_custom_color_select {
    height: auto !important;
    padding: 7px 28px 7px 10px !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    color: #4a4a4a !important;
    border: 1px solid #c8c5bd !important;
    border-radius: 6px !important;
}

/* C. Action row — CSS variables + listing button shape */
body#product #product-buy-column .product-add-to-cart .d-flex.flex-row.qty.col-auto {
    --action-row-height: 38px;
    --action-row-gap: 7px;
    gap: var(--action-row-gap) !important;
    margin-top: 4px !important;
}

/* Qty stepper — bordered group with internal dividers */
body#product .div_qty_input_container.pc_qty_wrap {
    flex: 0 0 auto !important;
    width: auto !important;
    height: var(--action-row-height, 38px) !important;
    border: 1px solid #d6d6d6 !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    padding: 0 !important;
}
body#product .pc_qty_btn {
    background: #e8e6e0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 30px !important;
    color: #4a4a4a !important;
    font-weight: normal !important;
    font-size: 0.9rem !important;
}
body#product .pc_qty_btn:hover { background: #dcd9d2 !important; }

/* Add to Basket — flex 1, listing sizing */
body#product .product-add-to-cart .qty .add-to-cart {
    height: var(--action-row-height, 38px) !important;
    flex: 1 1 0;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border: 1px solid #e8531a;
    border-radius: 7px !important;
    background: #e8531a !important;
    color: #fff !important;
}
body#product .product-add-to-cart .qty .add-to-cart:hover {
    background: #1a9a6a !important; /* MZS 2026-06-15 - green on hover per client (was #d04817 orange; this !important rule overrode the one at ~13071) */
    border-color: #1a9a6a !important;
}

/* Add to Quote — 44px narrow with stacked "Add to / Quote" text (reference values) */
body#product .product-add-to-cart .qty .fly_to_quote_cart_button {
    height: var(--action-row-height, 38px);
    flex: 0 0 50px;
    width: 50px;
    min-width: 0;
    padding: 0 2px;
    font-size: 0.725rem;
    line-height: 1.15;
    font-weight: 700;
    white-space: normal;
    text-align: center;
    border: 1px solid #1A6FAB;
    border-radius: 7px;
    background: #1A6FAB;
    color: #fff;
}
body#product .product-add-to-cart .qty .fly_to_quote_cart_button:hover {
    background: #155d8f;
    border-color: #155d8f;
}

/* MZS 2026-06-09 r31 - hide the duplicate Add to Quote rendered by askforaquotepro inside
   .product-additional-info > .ask_offer > .quote_ask_form. The blue relocated button is the
   visible UI; the duplicate stays in DOM (hidden) so askforaquotepro's AJAX form data
   (afq_pid / afq_action / afq_ipa) is still available, and our IIFE triggers it programmatically. */
body#product .product-additional-info .ask_offer .fly_to_quote_cart_button {
    display: none;
}
/* END MZS 2026-06-05 r5 — mirror category listing buy-stack */

/* ====================================================================
   MZS 2026-06-05 r6 — Discount grid fix + named selects + dedup inc.VAT
   A. Use :has(.regular-price) for discount-mode detection (round 5
      keyed on .producthasdiscount which is listing-only, doesn't exist
      on product detail — that's why the -10% badge was floating).
   B. Restore the small caption label above each variant select.
   C. Hide redundant inline .tax-shipping-delivery-label.label1 since
      lyoshowvatfree's row already labels itself.
   ==================================================================== */

/* A. Discount-mode grid template — MZS 2026-06-05 r12: verbatim listing template (3-col)
   with `justify-items: start` (on the container) so cells pack LEFT instead of RIGHT */
body#product .product-prices:has(.regular-price) {
    grid-template-areas:
        "bulkbadge bulkbadge bulkbadge"
        "from   reg     badge"
        "price  price   exvat"
        "incvat incvat  incvat"
        "deliv  deliv   deliv" !important;
}
body#product .product-prices:not(:has(.regular-price)) {
    grid-template-areas:
        "bulkbadge bulkbadge bulkbadge"
        "from   price   exvat"
        "incvat incvat  incvat"
        "deliv  deliv   deliv" !important;
}

/* B. Small caption label above variant select (hidden in round 5) */
body#product .product-variants-item > .label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #777 !important;
    margin: 0 0 3px 4px;
    padding: 0;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* C. MZS 2026-06-05 r17 - round-6 dedup reverted; restore the inline ex/inc.VAT label next to the main price per user request */
/* MZS 2026-06-05 r17b reverted in r18 - VAT label fixed at TPL source instead */
/* END MZS 2026-06-05 r6 — discount grid + named selects + dedup */

/* ====================================================================
   MZS 2026-06-17 — Product page: thumbnail loop clip-fix + POA/unavailable
   buy box (mirror listing) + "Add to your project" state styling.
   ==================================================================== */

/* --- Task 1: thumbnail continuous-loop clip fix ---
   product-cover-thumbnails.tpl re-enabled "infinite": true for wrap-around.
   With infinite, slick clones + offsets the horizontal track so the leftmost
   active thumb's 1px border touched the .slick-list overflow clip (left edge
   cut). A hair of horizontal padding lets the active thumb's border clear it. */
body#product .product-thumbs .slick-list {
    padding-left: 3px !important;
    padding-right: 3px !important;
}

/* --- Tasks 2 & 3: POA / unavailable on the detail buy box ---
   Mirrors the listing card: red #C8210D message replaces the price; Add to
   Basket greyed + inert; Add to Quote stays active. Three triggers:
   (a) unavailable (available_for_order=0) -> .product-prices.pd-prices--empty + .product-add-to-cart.pd-no-price
   (b) whole-product POA (show_price=0)    -> same as (a)
   (c) per-combination POA                 -> body#product.poa-attributes (toggled live by modules/poa front.js) */

/* message look (shared concept with the listing .pla-state-msg) */
body#product .product-prices .pd-state-msg {
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #C8210D;
    padding: 0 8px;
    width: 100%;
}
/* the per-combination dupe is hidden BY DEFAULT (the price grid would otherwise auto-place it);
   only body.poa-attributes reveals it. */
body#product .product-prices .pd-poa-combo { display: none; }

/* (a)+(b) server-side empty states: switch the price grid to a centered flex column for the message */
body#product .product-prices.pd-prices--empty {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: right;
}

/* (c) per-combination POA: poa front.js adds body.poa-attributes on each combo change. Replaces the
   deleted product.tpl inline rule; reveal the combo message, hide the price grid's other children. */
body#product.poa-attributes .product-prices > *:not(.pd-poa-combo) { display: none !important; }
body#product.poa-attributes .product-prices .pd-poa-combo { display: block !important; }

/* When a POA attribute is selected the poa module hides the whole .product-prices (its own CSS) and
   shows this sibling #poa-attributes-label + an #add-to-cart-poa "Add to Quote" clone. Because the
   module hides .product-prices, the .pd-poa-combo above can't surface — so STYLE the module's label as
   the listing red message, and hide the clone (we keep the native greyed basket + askforaquotepro Quote). */
body#product #poa-attributes-label {
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #C8210D;
    padding: 4px 8px;
}
body#product #add-to-cart-poa { display: none !important; }
/* keep the NATIVE basket visible-but-greyed in the combo-POA state (beats the module's jQuery
   .hide() inline display:none). */
body#product.poa-attributes .div_product_add_to_cart .btn-add-to-cart { display: block !important; }

/* grey + disable Add to Basket (detail button class = .add-to-cart.btn-add-to-cart; 4 classes + !important
   beats the orange rule at ~13808 which has 3 classes). */
body#product .product-add-to-cart.pd-no-price .add-to-cart.btn-add-to-cart,
body#product.poa-attributes .product-add-to-cart .add-to-cart.btn-add-to-cart {
    background: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
    color: #8a8a8a !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 1 !important;
}
body#product .product-add-to-cart.pd-no-price .add-to-cart.btn-add-to-cart:hover,
body#product.poa-attributes .product-add-to-cart .add-to-cart.btn-add-to-cart:hover {
    background: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
    color: #8a8a8a !important;
}
/* keep Add to Quote active in all states (sibling, not matched above — defensive) */
body#product .product-add-to-cart.pd-no-price .fly_to_quote_cart_button,
body#product.poa-attributes .fly_to_quote_cart_button { pointer-events: auto !important; cursor: pointer !important; }

/* a delivery estimate under "unavailable"/POA is contradictory — hide it in these states.
   .product-prices, .pch-delivery-relocated and .div_delivery_times are siblings in the buy form. */
body#product .product-prices.pd-prices--empty ~ .div_delivery_times,
body#product .product-prices.pd-prices--empty ~ .pch-delivery-relocated,
body#product.poa-attributes .div_delivery_times,
body#product.poa-attributes .pch-delivery-relocated { display: none !important; }

/* --- Task 5: format POA / unavailable in the "Add to your project" (ps_categoryproducts) section ---
   These cards use the listing miniature (.pla_block / .pla-state-msg / pla-no-price /
   availability_not_available_for_order) but the listing state CSS is scoped body#category/#search
   only, so on body#product they fell back to unstyled. .pla_block exists ONLY in this section on the
   product page, so this scope is safe. Mirrors custom.css:10900-10958. */
body#product .pla-section--prices.pla-prices--empty { justify-content: center; align-items: stretch; text-align: right; }
body#product .pla_block .pla-state-msg { text-align: right !important; font-size: 14px; font-weight: 700; line-height: 1.3; padding: 0 8px; align-self: stretch; }
body#product .pla-state-msg--unavailable, body#product .pla-state-msg--poa { color: #C8210D; }
body#product .pla_block.pla-no-price .ajax_add_to_cart_button,
body#product .pla_block.pla-no-price .pla_ajax_add_to_cart_button,
body#product .pla_block.availability_not_available_for_order .ajax_add_to_cart_button,
body#product .pla_block.availability_not_available_for_order .pla_ajax_add_to_cart_button {
    background: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
    color: #8a8a8a !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 1 !important;
}
/* MZS 2026-06-17 — POA bridge for the project section. The custom.js POA bridge now also runs on
   body#product (guard extended) and re-renders the per-combination POA message inside
   .pla-section--prices as .pla-state-msg--poa. These rules mirror the listing bridge
   (custom.css:10914-10937), scoped body#product .pla_block so the main buy box's own POA elements
   (#poa-attributes-label after .product-prices, outside any .pla_block) are untouched:
   hide the legacy poa-module label + "Add to Quote" clone, force-show the native (greyed) basket,
   and when poa-active hide the price children so only the message shows. */
body#product .pla_block #poa-attributes-label { display: none !important; }
body#product .pla_block .btn-poa-add-to-cart   { display: none !important; }
body#product .pla_block.pla-no-price .pla_ajax_add_to_cart_button:not(.btn-poa-add-to-cart) { display: inline-flex !important; }
body#product .pla-section--prices.pla-state-poa-active > *:not(.pla-state-msg):not(.pla-price-anchor) { display: none !important; }
/* END MZS 2026-06-17 — product page thumb-loop + POA/unavailable + project section */

/* ====================================================================
   MZS 2026-06-05 r7 — Defeat legacy variant-select rules
   Sources fought against:
   - custom.css:4517-4520 (display: flex on item)
   - custom.css:4522-4527 (label flex 0 0 25%, bold)
   - custom.css:4529-4533 (select max-width 320px)
   - custom.css:4541-4588 (icon :before injection — gutter-size/length/colour SVGs)
   - custom.css:8927-8930 (only PARTIAL :before disable — missed span.Colour:before half)
   - custom.css:8932-8936 (border-radius 4px + padding-left 17px)
   - custom.css:8949-8963 (position: absolute floating-label-in-border-notch)
   ==================================================================== */

/* B. HIDE all labels on product detail (defeats the absolute floating-label rule at 8949) */
body#product .form-group.product-variants-item.item_select label,
body#product .form-group.product-variants-item.item_select label.label,
body#product .form-group.product-variants-item.item_color > .label,
body#product .form-group.product-variants-item.item_color .label.Colour,
body#product .form-group.product-variants-item.item_color .label.Finish,
body#product .form-group.product-variants-item.item_color .label.Color {
    display: none !important;
}

/* C. Let selects fill the buy-box width (defeats the 25%/320px caps at 4529) */
body#product .form-group.product-variants-item.item_select > div,
body#product .form-group.product-variants-item.item_color > .div_color_attribute_container,
body#product .form-group.product-variants-item.item_color select {
    flex: none;
    max-width: 100% !important;
    width: 100% !important;
}

/* D. KILL all :before icon injection on variants (defeats 4541-4588's SVG icons that bled through) */
body#product .product-variants-item label:before,
body#product .product-variants-item .label:before,
body#product .product-variants-item label.label:before,
body#product .product-variants-item span:before,
body#product .product-variants-item .Gutter:before,
body#product .product-variants-item .Size:before,
body#product .product-variants-item .Length:before,
body#product .product-variants-item .Colour:before,
body#product .product-variants-item .Color:before,
body#product .product-variants-item .Finish:before,
body#product .product-variants-item.item_color .div_custom_color_select:before,
body#product .product-variants-item.item_color .div_custom_color_select .label-color:before,
body#product .product-variants-item.item_color .span_select:before {
    display: none !important;
    content: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* F. Colour/Finish custom div-select — make it visually identical to the native select */
body#product .form-group.product-variants-item.item_color .div_color_attribute_container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
}
body#product .form-group.product-variants-item.item_color .div_custom_color_select {
    background: #fff;
    background-image: none !important;
    background-color: #fff !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 32px !important;
    padding: 9px 32px 9px 10px !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    color: #4a4a4a !important;
    border: 1px solid #c8c5bd !important;
    border-radius: 6px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    width: 100% !important;
}

/* Custom chevron on the colour-select trigger — match native select's */
body#product .form-group.product-variants-item.item_color .div_custom_color_select::after {
    content: "" !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    width: 16px !important;
    height: 16px !important;
    transform: translateY(-50%) !important;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center;
    background-size: 16px 16px !important;
    pointer-events: none !important;
    display: block !important;
    margin: 0;
}
body#product .form-group.product-variants-item.item_color .div_color_attribute_container.open .div_custom_color_select::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Placeholder text inside the colour-select trigger */
body#product .form-group.product-variants-item.item_color .div_custom_color_select .span_select {
    color: #4a4a4a !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
}

/* MZS 2026-06-08 - colorSelectAdapter at custom.js:1947 pins .pla_custom_select_container onto
   .div_color_attribute_container on product detail. After the r9 revert restored
   `border: 1px solid #767676; border-radius: 50px;` on the shared pla-1.6.css rule, that listing
   pill border leaked onto the OUTER wrapper here, painting a second border around the intended
   .div_custom_color_select #c8c5bd border. Defeat the leakage on body#product. */
/* MZS 2026-06-09 r27 - scope tightened from body#product .pla_custom_select_container
   so this strip rule only kills the listing-pill leakage on the DETAIL page colour-picker
   (.product-variants-item.item_color). Cross-selling listing cards on body#product use
   .pla_attribute_group_container > .pla_custom_select_container — they want their normal
   listing border to render. */
body#product .product-variants-item.item_color .pla_custom_select_container {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: none;
}
/* END MZS 2026-06-05 r7 — defeat legacy variant-select rules */

/* ════════════════════════════════════════════════════════════════════
   MZS 2026-06-08 - basket round 1: page-head + Order Summary restyle
   Scope: body#cart. Removes legacy .custom-breadcrumb (cart.tpl no longer
   emits it); restyles displayReassurance + displaySavedBasket hook outputs
   into a unified .page-actions button cluster; restyles .cart-summary card
   chrome + totals rows; adds payment-icons / secure-note / kerbside-note.
   ════════════════════════════════════════════════════════════════════ */

/* Page head: back-link + 3-button cluster + title below */
body#cart .page-head { margin: 8px 0 18px; }
body#cart .page-head-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
body#cart .back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: #0072bc; text-decoration: none; margin-right: auto; }
/* MZS 2026-06-08 r10 - hover: underline only the text span (not the arrow icon). text-decoration on an inline-flex parent paints under both flex items, breaking visually across the gap. */
body#cart .back-link:hover { color: #005a96; }
body#cart .back-link:hover .back-link-text { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
body#cart .back-link .material-icons { font-size: 16px; }
body#cart .page-title { font-size: 24px; font-weight: 700; color: #2a2a2a; letter-spacing: -0.3px; margin: 0; padding: 0; text-transform: none; background: none; border: none; box-shadow: none; }

/* Page actions: 3-button cluster */
body#cart .page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body#cart .page-actions .card, body#cart .page-actions .card-block, body#cart .page-actions .quote-card, body#cart .page-actions .share-basket-widget { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; display: inline-flex; align-items: center; }
body#cart .page-actions .quote-card .checkout.card-block, body#cart .page-actions .quote-card .text-sm-left, body#cart .page-actions .quote-card .text-sm-center { display: inline-flex; align-items: center; margin: 0; padding: 0; }
body#cart .page-actions .share-basket-widget .card-header { display: none; }
body#cart .page-actions .share-basket-widget .d-flex { margin: 0; gap: 8px; display: inline-flex; flex-wrap: nowrap; }
/* MZS 2026-06-08 r3 - defensive pipe-hider after r3 TPL edit removed pipe at source. Direct-child selector keeps text labels safe. */
body#cart .page-actions .share-basket-widget > .d-flex > span { display: none; }
body#cart .page-actions > *:not(.quote-card):not(.share-basket-widget) { display: none; }

body#cart .page-actions .quote-card .btn, body#cart .page-actions .basket-share-btn, body#cart .page-actions .basket-retrieve-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px; font-size: 12px; font-weight: 600; border-radius: 6px; border: 1.5px solid #e2e0db; background: #fff; color: #2a2a2a; text-decoration: none; line-height: 1; transition: border-color 0.15s, background 0.15s, color 0.15s; margin: 0; white-space: nowrap; }
body#cart .page-actions .quote-card .btn { background: #1A6FAB; color: #fff; border-color: #1A6FAB; }
body#cart .page-actions .quote-card .btn:hover { background: #155d8f; border-color: #155d8f; color: #fff; }
body#cart .page-actions .basket-share-btn:hover, body#cart .page-actions .basket-retrieve-btn:hover { border-color: #aaa; color: #2a2a2a; text-decoration: none; }
body#cart .page-actions .basket-share-btn .material-icons, body#cart .page-actions .basket-retrieve-btn .material-icons { font-size: 14px; margin-right: 0; }

body#cart .custom-breadcrumb { display: none; }

/* Order Summary restyle */
body#cart .card.cart-summary { border: 1px solid #e2e0db; border-radius: 10px; box-shadow: none; overflow: hidden; background: #fff; }
body#cart .card.cart-summary .card-header { background: none; border: none; font-size: 15px; font-weight: 700; color: #2a2a2a; padding: 0; margin: 0; }
body#cart .card.cart-summary .text-muted.small { color: #888; margin-left: auto; }
body#cart .card.cart-summary .card-body--summary { padding-top: 8px; padding-bottom: 12px; }
body#cart .card.cart-summary .cart-summary-line { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #e2e0db; font-size: 13px; }
body#cart .card.cart-summary .cart-summary-line.cart-total { border-bottom: none; }
body#cart .card.cart-summary .cart-summary-line .label { color: #888; }
body#cart .card.cart-summary .cart-summary-line .value { color: #2a2a2a; font-weight: 600; }
body#cart .card.cart-summary .cart-total { padding-top: 12px; margin-top: 4px; }
body#cart .card.cart-summary .cart-total .label { color: #2a2a2a; font-weight: 600; font-size: 14px; }
body#cart .card.cart-summary .cart-total .value { color: #E8531A; font-size: 18px; font-weight: 700; }
body#cart .card.cart-summary .estimated-delivery { margin: 8px 0 0; padding: 8px 11px; background: #f0fdf7; border: 1px solid #b6e8d4; border-radius: 8px; font-size: 12px; color: #1a9a6a; font-weight: 500; }

body#cart .card.cart-summary .card-footer { background: #fff; border-top: none; padding: 0 18px 14px; }
body#cart .card.cart-summary .card-footer .btn-primary, body#cart .card.cart-summary .card-footer .btn-lg { background: #E8531A; border-color: #E8531A; color: #fff; width: 100%; height: 48px; border-radius: 8px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
body#cart .card.cart-summary .card-footer .btn-primary:hover, body#cart .card.cart-summary .card-footer .btn-lg:hover { background: #d04817; border-color: #d04817; color: #fff; }

/* MZS 2026-06-15 — client brand SVGs, one per grey pill (mirrors references/gutter-centre-basket.html);
   tight padding/min-width so all 5 fit one row in the narrow summary column. */
body#cart .payment-icons { display: flex; align-items: center; justify-content: center; gap: 5px; padding-top: 12px; flex-wrap: wrap; }
body#cart .pay-icon { height: 23px; min-width: 32px; padding: 2px 6px; background: #f6f5f2; border: 1px solid #e2e0db; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
body#cart .pay-icon img { height: 14px; width: auto; max-width: 100%; display: block; }

/* MZS 2026-06-08 r11 - kerbside-note becomes a flush cream band, not an inset rounded callout. Negative L/R/bottom margins escape .card-footer's 18px/18px/14px padding so the band reaches the card's inner edges; .card.cart-summary's overflow:hidden + border-radius:10px (line 13723) clips the bottom corners to follow the card's curve. Secure-note owns the gap above the band via padding-bottom:14px. Matches references/gutter-centre-basket.html:277. */
body#cart .secure-note { text-align: center; font-size: 11px; color: #888; padding: 10px 0 14px; display: flex; align-items: center; justify-content: center; gap: 4px; }
body#cart .secure-note .material-icons { color: #1a9a6a; font-size: 12px; }

body#cart .kerbside-note { display: flex; align-items: flex-start; gap: 7px; margin: 0 -18px -14px; padding: 9px 18px; background: #f8f7f4; border-top: 1px solid #e2e0db; border-radius: 0; font-size: 11px; color: #888; line-height: 1.5; }
body#cart .kerbside-note .material-icons { font-size: 13px; flex-shrink: 0; margin-top: 1px; color: #888; }

@media (max-width: 768px) {
  body#cart .page-head-top { gap: 8px; }
  body#cart .page-actions { width: 100%; margin-top: 4px; }
  body#cart .page-title { font-size: 20px; }
}

.cart-grid-body > .card {
  border: none;
}

.pch-section-block {
  margin: 0;
}

/* END MZS 2026-06-08 - basket round 1 */

/* MZS 2026-06-08 r4 - Order Summary polish: title divider + neutralize pre-existing .cart-summary-line padding/border bloat. */
body#cart .card.cart-summary > .d-flex.align-items-center { border-bottom: 1px solid #e2e0db; margin-bottom: 4px; }
body#cart .card.cart-summary .cart-summary-line .label, body#cart .card.cart-summary .cart-summary-line > div, body#cart .card.cart-summary .cart-summary-line .value, body#cart .card.cart-summary .cart-summary-line .net-value { padding: 0; }
body#cart .card.cart-summary .cart-summary-line { border-top: none; font-size: 13px; }
body#cart .card.cart-summary .cart-summary-line.cart-total.cart-total-tax-included { margin-bottom: 0; }
/* END MZS 2026-06-08 r4 */

/* MZS 2026-06-08 r5 - match reference exactly on the price rows: tighter gap above Grand Total + uniform "(incl. VAT)" text styling. */
body#cart .card.cart-summary .cart-total { padding-top: 8px; margin-top: 0; }
body#cart .card.cart-summary .cart-total .label .text-muted.small { color: inherit; font-size: inherit; }
/* END MZS 2026-06-08 r5 */

/* MZS 2026-06-08 r8 - the round-7 Transform-to-Quote rule was moved to themes/guttercentre/modules/askforaquotepro/views/css/front.css (the module's own CSS, where the conflicting bad-actor rules used to live) per user direction "move related css to that file". */

/* Sticky cart summary */
#cart .l-wrapper.pt-2 {
  overflow: visible !important;
}

/* Keep your existing sticky styles */
.card.cart-summary {
  position: sticky;
  top: 200px; 
  align-self: flex-start;
}

body#product #product-buy-column .product-add-to-cart .d-flex.flex-row.qty > .product-quantity:after {
  display: none;
}

body#product .pc_acc_btn:focus {
  outline: none;
}

.product-refresh.ps-hidden-by-js {
  display: none !important;
}

body#product .div_thumbnails .product-thumbs {
  max-height: 80px;
  margin: 0;
}

body#product .product-thumbs .product-thumb {
  /* MZS 2026-06-16 — removed `max-width:80px`: capping the slick SLIDE to 80px while slick sizes
     the track for listWidth/slidesToShow (~88.75px) made the slide pitch drift out of the
     translate step → half-clipped sliver thumb at the overflow edge (worse the wider the screen).
     Let the slide take slick's computed width; cap the visible thumb box below instead. */
  padding: 0;
}

/* MZS 2026-06-16 — cap the visible thumbnail (not the slick slide) so slide pitch == slick's
   slideWidth → no half-clipped sliver; thumbnails stay <=80px square, centered in their slide
   regardless of image count (few-image products have wide slides; this keeps the thumb 80px). */
body#product .div_thumbnails .product-thumbs .product-thumb .div_thumbcontainer {
  max-width: 80px;
  margin-left: auto;
  margin-right: auto;
}

/* MZS 2026-06-16 — 2–3 thumbnails never scroll (slick min slidesToShow is 3), but slick stretches each
   slide to listWidth/count so the centered 80px thumbs end up far apart (~98px gap on a 2-image product).
   Collapse the track to a tight centered flex group. Keyed on the template's data-count; ≥4-image
   carousel is untouched. !important beats slick's inline width/transform; transform:none is safe (no
   scroll for ≤3) and survives slick setPosition / combination re-inits. */
/* MZS 2026-06-17 — client: products with FEWER than 4 thumbnails should align their thumbnails
   LEFT, flush with the main image's left edge (was centered). justify-content:center -> flex-start,
   and remove the 3px slick-list clip-padding (the <4 strip never scrolls, so nothing to clip) so the
   first thumb's left edge lines up with the cover image. ≥4-image carousel untouched. */
body#product .div_thumbnails .product-thumbs[data-count="1"] .slick-track,
body#product .div_thumbnails .product-thumbs[data-count="2"] .slick-track,
body#product .div_thumbnails .product-thumbs[data-count="3"] .slick-track {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 9px;
  width: 100% !important;
  transform: none !important;
  padding-left: 0 !important;   /* slick/theme left padding offset the first thumb ~9px from the cover edge */
  margin-left: 0 !important;
}
/* the outer flex container (custom.css:~5129 justify-content:center) centers a content-width
   slick-list (~190px), which is what actually offsets the thumbs — left-align the container, and
   flush the list's left padding/margin so the first thumb's left edge meets the cover image. */
body#product .div_thumbnails .product-thumbs[data-count="1"],
body#product .div_thumbnails .product-thumbs[data-count="2"],
body#product .div_thumbnails .product-thumbs[data-count="3"] {
  justify-content: flex-start !important;
}
body#product .div_thumbnails .product-thumbs[data-count="1"] .slick-list,
body#product .div_thumbnails .product-thumbs[data-count="2"] .slick-list,
body#product .div_thumbnails .product-thumbs[data-count="3"] .slick-list {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
body#product .div_thumbnails .product-thumbs[data-count="1"] .slick-slide,
body#product .div_thumbnails .product-thumbs[data-count="2"] .slick-slide,
body#product .div_thumbnails .product-thumbs[data-count="3"] .slick-slide {
  margin-left: 0 !important;
}
body#product .div_thumbnails .product-thumbs[data-count="1"] .product-thumb,
body#product .div_thumbnails .product-thumbs[data-count="2"] .product-thumb,
body#product .div_thumbnails .product-thumbs[data-count="3"] .product-thumb {
  width: 80px !important;   /* fixed = the capped thumb size; `auto` collapses (img is width:100% of an unanchored box) */
  flex: 0 0 80px !important;
}

.js-product-images-modal .modal-dialog {
  max-width: 600px
}

#_desktop_productinformation .pch-lc-delivery-opts {
  border-top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

/* MZS 2026-06-10 r2 — ps_categoryproducts header: kill all-caps, left-align, render
   the "Frequently bought with this product" subtitle INLINE next to the H2 via a
   real DOM <span> rendered by the section partial (replaces previous ::after content
   approach). The new <span.span_titlesubtitle> is captured in the categoryproducts
   override TPL and rendered by product-section.tpl as a sibling of the H2; other
   sections that don't capture stay subtitle-less. Flex on the title container with
   align-items: baseline + flex-wrap: wrap → desktop has heading + subtitle inline at
   baseline; narrow viewports wrap the subtitle to its own line naturally. */
body#product .ps_categoryproducts .div_productssectiontitlecontainer {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    text-align: left !important;
    margin-bottom: 16px;
}
body#product .ps_categoryproducts .products-section-title,
body#product .ps_categoryproducts .span_productssectiontitle,
body#product .ps_categoryproducts .span_titletext {
    text-transform: none !important;
    text-align: left !important;
    margin: 0;
}
body#product .ps_categoryproducts .span_titletext::after,
body#product .ps_categoryproducts .products-section-title::after,
body#product .ps_categoryproducts .span_productssectiontitle::after {
    display: none !important;
}
body#product .ps_categoryproducts .span_titlesubtitle {
    font-size: 13px;
    font-weight: 400;
    color: #888;
    line-height: 1.4;
}

#product .product-categoryproducts {
  padding: 0 15px;
}

.div_left_col_container, .div_right_col_container, .product-buy-box, .pc_acc {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.product-thumb img {  
  border: 1.5px solid #b8b6b0 !important;
  box-sizing: border-box !important; /* MZS 2026-06-15 - keep active(2px)/inactive(1.5px) borders inside the box so the orange ring can't overflow/clip */
}

.product-thumb.slick-current img {
  border: 2px solid #E8531A !important;
} 

.custom-nav-thumbnails {
  display: none !important;
}

#product .div_productimagecontainer li.product-flag.discount {
  display: none !important;
}

.footer__title {
  text-transform: none;
}

#index .first_column__block
  .container-image
  .container-description
  p.container-title {
  font-size: 42px;
  line-height: 46px;
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  background: #808080c7;
  padding: 5px;
}

#header .ets_mm_megamenu .mm_menus_ul>li>a {
    padding: 12px 15px;
    font-family: "Kumbh Sans";
}

#index .first_column__block .container-image .container-description p.container-title {font-size: 42px;line-height: 46px;font-family: "Kumbh Sans",sans-serif;font-weight: 600;text-transform: uppercase;background: #808080c7;padding: 5px;}
#index .first_column__block .container-image .container-description p.container-title {font-size: 42px;line-height: 46px;font-family: "Kumbh Sans", sans-serif;font-weight: 600;text-transform: uppercase;background: #808080c7;padding: 5px;}


/* PeterChamp 2026-07-02 TEMP (go-live): hide the OLD theme's duplicate delivery-times line on the
   product page (pchdc renders the delivery estimate line). Same element as the parked anti-flash
   rule earlier in this file. REMOVE once the new product templates are fully copied. */
.div_right_col_container .div_delivery_times { display: none !important; }