/** Shopify CDN: Minification failed

Line 2213:85 Expected ":"
Line 2268:2 Unexpected "}"

**/
/* ============================================================
   @font-face
   ============================================================ */

@font-face {
  font-family: 'Miranda Sans';
  src: url('{{ 'MirandaSans-Regular.ttf' | asset_url }}') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Miranda Sans';
  src: url('{{ 'MirandaSans-Medium.ttf' | asset_url }}') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Miranda Sans';
  src: url('{{ 'MirandaSans-Bold.ttf' | asset_url }}') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   Design Tokens
   ============================================================ */

:root {

  /* Font */
  --font-body: 'Miranda Sans', system-ui, sans-serif;

  /* Font sizes */
  --text-xs:   0.75rem;
  --text-sm:   0.9rem;     
  --text-caption:   1.2rem;     
  --text-base: 1.4rem;
  --text-md:   1.5rem; 
  --text-lg:   1.7rem;   
  --text-xl:   2rem;    
  --text-2xl:  2.5rem;  
  --text-3xl:  3rem;  
  --text-4xl:  4rem;    
  --text-5xl:  4.5rem;    

  /* Line heights */
  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* Spacing scale */
    --space-0:  0rem;
    --space-1:  0.25rem;
  --space-neg1:  -0.25rem;
  --space-2:  0.5rem;
  --space-neg2:  -0.5rem;
  --space-3:  0.75rem;
  --space-neg3:  -0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-neg6:  -1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --neg-space-12: -3rem;
  --space-neg12: -3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-48: 12rem;


  /* Layout */
  --grid-columns: 12;
  --grid-gap:     1.5rem;
  --margin:       1.25rem;  /* mobile */
  --max-width:    1440px;
  --page-width: 80vw;
  --page-margin-neg: -10vw;
  --page-margin: 11vw;

}

@media (min-width: 768px) {
  :root {
    --margin:    2rem;
    --grid-gap:  1.5rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --margin:    3rem;  /* your 48px desktop margin */
    --grid-gap:  2rem;
  }
}
/* Animations */
:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extra-longer: 750ms;
  --duration-extended: 3s;
  --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
  --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
  --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

/* ============================================================
   Reset
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-behavior: smooth;
}


[id] {
  scroll-margin-top: 60px;
}


img,
video,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}



/* ============================================================
   Colours
   ============================================================ */
:root {/* Base colours */
--color-white:       #fafafa;
--color-blue:        #243263;
--color-blue-dark:   #121f4b;
--color-grey-dark:   #1a1a1a;
--color-grey-vlight:  #fafafa;
--color-grey-light:  #f2f2f2;
--color-grey-mid:  #d7d7d7;
--color-grey-txt: #76788E;
--color-red:         #c22d2b;
--color-yellow:      #eac21f;
--color-lightblue: #3676ca;
--color-gradient-red: linear-gradient(142deg,rgba(36, 50, 99, 1) 0%, rgba(185, 50, 97, 1) 74%, rgba(194, 45, 43, 1) 100%);
--color-gradient-grey: linear-gradient(to top, #e5e5e5 0%, #f5f5f5 100%);

/* Semantic colours */
--color-background:        var(--color-white);
--color-background-light: var(--color-grey-vlight);
--color-background-mid: var(--color-grey-light);
--color-background-dark:        var(--color-blue);
--color-background-night:        var(--color-blue-dark);
--color-badge-background: var(--color-red);
--color-text:              var(--color-grey-dark);
--color-text-blue:              var(--color-blue);
--color-text-grey:              var(--color-grey-txt);
--color-text-inverse:      var(--color-white);
--color-primary:           var(--color-blue);
--color-primary-dark:      var(--color-blue-dark);
--color-accent:            var(--color-red);
--color-highlight:            var(--color-yellow);
--color-highlight-blue:     var(--color-lightblue);
--color-highlight-grey:     var(--color-grey-light);
--color-border:            var(--color-blue);
--color-border-grey:            var(--color-grey-mid);
}
/* ============================================================
   Base Typography
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  min-width:300px;
}

main {    margin-bottom: var(--space-12);}

h1 { font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    font-weight: 700;
    color: var(--color-text-blue);
    display: block;
    border-left: 25px solid var(--color-primary);
    padding: var(--space-6);
  text-transform: capitalize;}
  h1.no-bar {  border-left: 0px ;}
h1.mega, .rte h1.mega {    font-size: 7rem;
    margin: 70px auto;
    text-transform: uppercase;
    font-weight: 800;
    border: 1px solid var(--color-border);
    width: 88%;
  text-align:center;}



.rte h1:before {  content: "";
     content: "";
    position: absolute;
    left: var(--page-margin-neg);
    top: auto;
    /* transform: translateY(-50%); */
    width: var(--page-margin);
    height: 65px;
    background: var(--color-text-blue);}
.rte h1 {border-left: 0px;
    padding: var(--space-3) 0;}

.rte h1.title-bar:before {width: 20vw;}

.border-heading {border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);}
.padding-right {padding-right:var(--space-6);}
.padding-left {padding-left:var(--space-6);}
.padding {padding:var(--space-6);}
.padding-lg {padding:var(--space-12);}
.padding-side {padding:0 var(--space-6);}
.padding-side-lg {padding:0 var(--space-12);}
.padding-top {padding:var(--space-6) 0;}
.padding-top-lg {padding:var(--space-12) 0;}
.padding-bottom-xlg {padding:var(--space-12) 0 var(--space-20) 0;}

h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); font-weight: 700; color:var(--color-text); }
h3 { font-size: var(--text-lg);  line-height: var(--leading-normal); font-weight: 800; padding-block:var(--space-8); }
h4 { font-size: var(--text-lg);  line-height: var(--leading-normal); font-weight: 800; padding-block:var(--space-8); }
h5 { font-size: var(--text-md);  line-height: var(--leading-normal); font-weight: 600; }
h6 { font-size: var(--text-md);  line-height: var(--leading-normal); font-weight: 400; }

h3::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 12px;
  background: currentColor;
}

h4::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  margin-top: 12px;
  background: currentColor;
}

.rte h2 {margin: var(--space-12) 0 var(--space-6) 0;}
.rte h3, .rte h4 {padding: var(--space-6) 0 var(--space-4) 0;}
.rte p {margin: var(--space-6) 0; line-height: var(--leading-loose);}
/* ============================================================
   Layout Grid
   ============================================================ */

.layout {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  margin-inline: auto;
  /*grid-column: content-start / content-end;*/
}

 @media (width <= 749px){ 
    .layout .col-1, .layout .col-2 { grid-column: span 3;}
     .layout .col-3, .layout .col-4, .layout .col-5,.layout .col-6{ grid-column: span 6;}
    .layout .col-7, .layout .col-8, .layout .col-9,.layout .col-10,.layout .col-11.layout .col-12{ grid-column: span 12;}
  }
  @media (width <= 500px){ 
    .layout { display: block;}
  }

.layout--constrained {
  max-width: var(--max-width);
  margin: 0 var(--space-12);
}

/* Named spans for inner layouts */
.col-1  { grid-column: span 1; min-width: 0; }
.col-2  { grid-column: span 2; min-width: 0; }
.col-3  { grid-column: span 3; min-width: 0;}
.col-4  { grid-column: span 4; min-width: 0;}
.col-5  { grid-column: span 5; min-width: 0;}
.col-6  { grid-column: span 6; min-width: 0;}
.col-7  { grid-column: span 7; min-width: 0;}
.col-8  { grid-column: span 8; min-width: 0;}
.col-9  { grid-column: span 9; min-width: 0;}
.col-10  { grid-column: span 10; min-width: 0;}
.col-11  { grid-column: span 11; min-width: 0;}
.col-12,.full  { grid-column: span 12; min-width: 0;}


/* ============================================================
   Utilities
   ============================================================ */

/* Accessible hide — for screen reader text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to main content link (accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 999;
  padding: var(--space-2) var(--space-4);
  background: var(--color-background-night);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
}

.skip-link:focus {
  top: var(--space-4);
}

/* General */
.center     { text-align: center; }
.flex-center     { display: flex; justify-content: center; align-items: center; }
.margin-center   { margin-inline: auto; }
.bold {font-weight:800;}
.wrap {flex-wrap: wrap;}
.gap {gap: 20px;}
.normal {font-weight:400;}
.space-6 {padding-block:var(--space-6);}
.space-12 {padding-block:var(--space-12);}
.space-20 {padding-block:var(--space-20);}
.pad-6 {padding:0 var(--space-6);}
.pad-12 {padding:0 var(--space-12);}
.pad-20 {padding:0 var(--space-20);}

.text-xs {font-size:var(--text-xs);}
.text-sm {font-size:var(--text-sm);}
.text-lg {font-size:var(--text-lg);}
.text-xl {font-size:var(--text-xl);}
.highlight {color:var(--color-highlight);}
.highlight-blue {color:var(--color-highlight-blue);}
.highlight-grey {color:var(--color-grey-mid);}
.blue-text {color:var(--color-text)}

/* Inline List */
.inline-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.inline-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.inline-list.pipe li::after {
  content: '|';
  color: var(--color-text-inverse);
}

.inline-list.pipe li:last-child::after {
  display: none;
}

/* ============================================================
   Links
   ============================================================ */

a {
  transition: color 0.2s ease;
}

a:link    { text-decoration: underline; text-underline-offset: 4px; }
header a:link, footer a:link {text-decoration: none;}
a:visited { }
a:hover   { color: var(--color-highlight-blue); }
header a:hover, footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
a:active  { color: var(--color-highlight-blue); }

#customer-menu a:link    { text-decoration: none; }
#customer-menu a:hover    { text-decoration: underline; }

.icon a:hover img {
  filter: invert(42%) sepia(62%) saturate(480%) hue-rotate(178deg) brightness(95%) contrast(92%);
  transform: scale(1.2);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.section-redline {width: 100%; height: 1px; position: relative; margin:var(--space-6) 0;}
.redline-left {position: relative;}
.redline-full::after {
    content: "";
    display: block;
    width: 100%;
    height: 18px;
    position: absolute;
    bottom: -10px;
    background: var(--color-accent);
    z-index: 100;
}

.redline-left::after {
    content: "";
    display: block;
    width: 100%;
    height: 18px;
    position: absolute;
    bottom: -10px;
    background: var(--color-accent);
    z-index: 100;
}
.redline-right {
  position: relative;
}

.redline-right::after {
  content: "";
  display: block;
  width: 60%;
  height: 18px;
  position: absolute;
  bottom: -10px;
  right: 0;
  background: var(--color-accent);
  z-index: 100;
}
.redline-full.scrollgrow::after {
  transform: scaleX(0);
  transform-origin: right center;

  animation: redline-grow linear forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 65%;
}

.redline-right.scrollgrow::after {
  transform: scaleX(0);
  transform-origin: right center;

  animation: redline-grow linear forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 45%;
}

.redline-left.scrollgrow::after {
  transform: scaleX(0);
  transform-origin: left center;
  animation: redline-grow linear forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 45%;
}

@keyframes redline-grow {
  to {
    transform: scaleX(1);
  }
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}


input {width: 100%;
    font-size: var(--text-md);
    padding: var(--space-3);
  margin: var(--space-3);}

button, .btn, .button, .rte a.button {}
.button--primary {
	display: inline-block;
	padding: 1.25rem 1.25rem;
	color: var(--color-text-inverse);
  background: var(--color-background-dark);
	/*font-size: 1rem;*/
  font-weight:800;
	transition: all .3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
  width:100%;
  border-radius: 0rem;
  text-decoration: none!important;
  text-align: center;
	&:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--color-blue);
		border-radius: 0rem;
		z-index: -2;
	}
	&:before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0%;
		height: 100%;
		background-color:var(--color-blue-dark);
		transition: all .3s;
		border-radius: 0rem;
		z-index: -1;
	}
	&:hover {
		color: var(--color-text-inverse);
    /*transform: scale(1.1);
  transition: transform 0.2s ease;*/
		&:before {
			width: 100%;
		}
	}
}



button svg, .btn svg, .button svg { color: var(--color-text-inverse);}
.button--secondary svg { color: var(--color-text-grey);}

button.reset__button, .btn.reset__button, .button.reset__button, .rte a.button.reset__button {display: inline-flex;
	padding: .75rem 1.25rem;
	color: var(--color-text);
  border: 1px solid var(--color-border-grey);
  background:var(--color-background);
  font-weight:800;
	transition: all .3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
  border-radius: 0rem;
	&:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
		border-radius: 0rem;
		z-index: -2;
	}
	&:before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0%;
		height: 100%;
		background-color:var(--color-grey-mid);
		transition: all .3s;
		border-radius: 0rem;
		z-index: -1;
	}
	&:hover {
		color: var(--color-text-inverse);
    /*transform: scale(1.1);
  transition: transform 0.2s ease;*/
		&:before {
			width: 100%;
		}
	}
}
.reset__button svg {color: var(--color-text);}





button.button--secondary, .button--secondary {
	display: inline-block;
	padding: 1.25rem;
  text-align: center;
	color: var(--color-text);
  border: 1px solid var(--color-border-grey);
  font-weight:800;
	transition: all .3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
  width:100%;
  border-radius: 0rem;
  background-color: var(--color-background-mid);
	&:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--color-background-mid);
		border-radius: 0rem;
		z-index: -2;
	}
	&:before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0%;
		height: 100%;
		background-color:var(--color-grey-mid);
		transition: all .3s;
		border-radius: 0rem;
		z-index: -1;
	}
	&:hover {
		color: var(--color-text-inverse);
    /*transform: scale(1.1);
  transition: transform 0.2s ease;*/
		&:before {
			width: 100%;
		}
	}
}
a.button--secondary {text-decoration: none;}

#close-btn {    position: absolute;
    max-width: 40px!important;
    top: 0px;
    right: 0px;
    padding: 2px 2px;}


/* Header */
/*------ #AnnouncementContainer ------*/
#announcement-container { width:100%; height:auto; background-color: var(--color-highlight-blue); color:var(--color-text-inverse); font-size:12px; text-align:Center;}
.announcement-one {padding:3px; overflow: hidden; height: 38px; align-content:center;}

/*------ #Header ------*/
/* Header Setup */
  header {Width:100%; min-width: 320px; margin:auto; border:1px solid var(--color-border-grey); }
  header #logo {align-content: center; flex: 1}
  header #logo img {max-width: 160px; width:100%;}
  header #logo:hover img {transform: scale(1.2); transition: transform 0.3s ease;}
 /* Logo */

 /* Phone Numbers */  

 #logo-row {justify-content: space-between;}
 #search {   flex: 2}
 #phone-numbers {  flex: 1}
 header #logo-row #phone-numbers{line-height:1.2em; outline: 1px solid var(--color-border-grey);}
  header #logo-row #phone-numbers .location{font-size:12px;width:100%;min-height:23px;}
  header #logo-row #phone-numbers .location a:link,header #logo-row #phone-numbers .location a:visited{margin-right:10px; color: var(--color-text-grey);font-weight:600;display:block;float:left;text-transform:uppercase;}
  header #logo-row #phone-numbers .location a:active,header #logo-row #phone-numbers .location a:hover{color:#474E93;font-weight:600;}
  header #logo-row #phone-numbers .location a.phone:link,header #logo-row #phone-numbers .location a.phone:visited{margin-right:10px;color:#76787A;font-weight:400;display:block;float:right;}
  header #logo-row #phone-numbers .location a.phone:active,header #logo-row #phone-numbers .location a.phone:hover{color:#474E93;font-weight:600;}
  #logo-row #phone-numbers .language-marker{background-color: var(--color-grey-light); border-radius: 2px; padding: 6px 4px; margin-bottom: 6px; font-size: var(--text-sm); font-weight: 800; text-align:right;}
  /* Search */
 #logo-row #search {align-content: center; text-align: right;}
 .header__search {border-left: 1px solid var(--color-border-grey);
    padding: var(--space-6);}
  #logo-row #search form {margin-bottom: 0px;}
  #logo-row #search input.search_box{height:100%;min-height:68px;padding:10px;background:none;}
  .search-container {display: flex;align-items: center;overflow: hidden;}

.search-container .icon-container {
  width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--color-border-grey); /* Thin grey line on the left */
}

.search-container .icon-container img {
  width: 20px;
  height: 20px;
}

.search_box {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 14px;
}

.search_box::placeholder {color: var(--color-grey-mid)}
.search-results {width:100%;}

.search-modal__content {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.35s ease, opacity 0.25s ease;
}

details[open] .search-modal__content.is-closing {
  transform: translateY(-100%);
  opacity: 0;
}

/*------ #Navbar ------*/

/* Navbar */
nav {width: 100%;}
nav#mega-menu {height:auto; border-bottom: 1px solid var(--color-border-grey); font-size:var(--text-sml); padding: var(--space-3) 0;}

/* Menu Items */
#menu {
  display: flex;
  justify-content: space-between; /* Distributes items evenly */
  align-items: center; /* Aligns items vertically */
  padding: 0;
  margin: 0;
  width: 100%;
      height: auto;
}

#menu .menu-item {
  flex: 1;
  text-align: center;
  list-style-type: none;}

#menu .menu-item a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 1.2rem; 
  letter-spacing:1px;
  text-transform: uppercase; 
  color: var(--color-text); }
  
 /* Customer Menu */
nav#customer-menu {text-align: right;
    background: var(--color-background-mid);
    border-bottom: 1px solid var(--color-border-grey);
      display: flex;
    justify-content: flex-end;}
nav#customer-menu ul {margin:0; padding:0; }
  nav#customer-menu ul li{    list-style-type: none;
    display: inline-block;
    padding: 0px 0px;
    text-transform: uppercase;
    min-width: 95px;}
  nav#customer-menu ul li:last-child a, nav#customer-menu ul li#deals a{border-right:0px;}
a.highlight-button:link, a.highlight-button:visited {
    height: 54px;
    font-size: var(--text-sm);
    text-align: center;
    color: var(--color-text);
    display: grid;
    place-items: center;
    margin-right: -4px;
    padding: 0px 20px;
    border-right: 1px solid var(--color-border-grey);
   }
a.highlight-button:active, a.highlight-button:hover {color: var(--color-text-blue) background: var(--color-background-mid) ;}
#deals a.highlight-button:link, #deals a.highlight-button:visited {    background: var(--color-accent);
    color: var(--color-text-inverse);
    min-width: 95px;
    height: 35px;
    border-radius: 20px; }
a.highlight-button.special:link, a.highlight-button.special:visited {
    background: var(--color-background-night);
    color: var(--color-text-inverse);
    min-width: 95px;
    height: 35px;
    border-radius: 20px;
margin: 0px 0px 0px 10px;}   

.special a.highlight-button:active, .special a.highlight-button:hover{background: var(--color-background-night)}
#deals a.highlight-button:active, #deals a.highlight-button:hover {background: var(--color-background-dark) }
nav#customer-menu #customer-interface {position: relative;
    padding: 2px 20px;
    border: 1px solid var(--color-border-grey);
    border-top: 0px;                             
    border-radius: 0 0 0px 10px;
    min-width: 240px;
    z-index: 999;
    display:flex;
    align-items: center;
    justify-content: flex-end;
  }
 #customer-interface > div {padding: 0px 16px;} 
#customer-interface img {
    position: relative;
    top: 5px;
  padding-right:4px;
  display:inline-block;
}

#account a:hover img{
    position: relative;
    left: 2px;}
.software-container .sub-container:hover {background: var(--color-background-mid);}
.software-container .sub-container a:hover {font-weight:400;}




/* Tablet */
@media (width <= 960px) {}
  
@media only screen and (min-width: 900px){
    section#choose-shop3d .flex > div {width:24%;}    
    section#choose-shop3d .flex div .bluebg img {width:70px; margin:auto;}
}

   @media (width <= 949px){
  header #logo-row {height: auto; padding:0; justify-content: space-between;}
  header #logo-row #search {margin-right: 0px; border-top: 1px solid var(--color-border-grey); border-bottom: 1px solid var(--color-border-grey);
  display: flex;
        justify-content: flex-end;
        /* align-content: center; */
        align-items: center;}
  header #logo-row #search form {margin-bottom: 0px;}
  header #logo-row #logo {padding: 10px 2.4% 10px 2.4%;}
  #phone-numbers {width: 45%;}
  div#mobile-nav {display: flex!important;
    align-items: center;
    justify-content: flex-end;}   
    div#mobile-nav div {padding: var(--space-6);} 
  div#mobile-nav img {width: 30px; height:30px; padding:0px 5px;}
 div#mobile-nav > div {border-left: 1px solid var(--color-border-grey);}

    #cart-block a {display: grid;    align-items: center;grid-auto-flow: column;}

  /* hide navs */   
  header #buttons {display:None;}
  nav#mega-menu, nav#customer-menu{display:none;}
  #phone-numbers {display:none;}

    
}

  @media (width <= 749px) {
    
  }

   @media (width <= 500px) {
     #announcement-container {display:none;}
  }

  @media (width <= 408px){

    header #logo-row {display:block; }
    header #logo-row #logo {background: var(--color-background-mid); padding: 0;}
    header #logo-row #logo img {width:50%; margin:auto;}
    header #logo-row #search {justify-content: space-between;}
    div#mobile-nav {display:flex; justify-content: space-between;
        align-items: center;}
    #cart-block, #hamburger {border-left:0; border-right:0;}
  }

/* component-grid */
/* component-grid */
.grid {
  display: flex;
  /*flex-wrap: wrap;*/
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

.product-grid, .collection-list {flex-wrap: wrap;}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  /*flex-grow: 1;*/
  flex-shrink: 0;
}



.grid--gapless.grid .grid__item {
  width: calc(25%);
  max-width: calc(50%);
  /*flex-grow: 1;*/
  flex-shrink: 0;
}

@media screen and (max-width: 990px) {   
  .grid__item {width: 100%;} 
  .grid--gapless.grid .grid__item {width: 100%;}
 }



/* sticky-grid */
.sticky-layout, .cart__footer-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding:var(--space-12);
}

/* left side just flows */
.sticky-layout .grid-left, .cart__footer-wrapper .grid-left{
  flex: 2;
}

/* right side becomes sticky */
.sticky-layout .grid-right, .cart__footer-wrapper .grid-right {
  flex: 1;
  position: sticky;
  top: calc(var(--header-height, 80px) + 2rem);
}


.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  position: relative;
}

.content-container:after {
  content: '';
  position: absolute;
  top: calc(var(--text-boxes-border-width) * -1);
  right: calc(var(--text-boxes-border-width) * -1);
  bottom: calc(var(--text-boxes-border-width) * -1);
  left: calc(var(--text-boxes-border-width) * -1);
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  z-index: -1;
}

.content-container--full-width:after {
  left: 0;
  right: 0;
  border-radius: 0;
}


/* Card Wrapper */
.product-card-wrapper .card,
.contains-card--product {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
  --text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card--collection {
  --border-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}
/* component-media */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}


.hide {display:none;}


 .alert {
  display: flex;
  margin: var(--space-12) 0;
  --alert-color: var(--color-blue);
  border: 1px solid var(--alert-color);
  background: color-mix(in srgb, var(--alert-color), transparent 70%);
}


.alert path, .alert circle,.alert rect{ fill:var(--color-text-inverse)}

.product__info-container .alert{border: 1px solid var(--color-border); border-top:0px; padding: 0;}
.product__info-container .alert .message {padding: var(--space-12) var(--space-6);}


.alert .icon {
  padding: var(--space-3);
  display: flex;
  align-items: center;
  background: var(--alert-color);
      min-width: 50px;
    padding: var(--space-6);
}

.alert .message {
  padding: var(--space-6);
}

/* variants */
.alert.red { --alert-color: var(--color-red); color:var(--color-text); }
.alert.red path, .alert.red circle,.alert.red rect{ fill:var(--color-text-inverse)}

.alert.blue { --alert-color: var(--color-lightblue); }
.alert.blue path, .alert.blue circle,.alert.blue rect{ fill:var(--color-text-inverse)}

.alert.yellow { --alert-color: var(--color-yellow); color:var(--color-text); }
.alert.yellow path, .alert.yellow circle,.alert.yellow rect{ fill:var(--color-text)}

.alert.darkblue { --alert-color: var(--color-blue); color: var(--color-text-inverse);}
.alert.darkblue path, .alert.darkblue circle,.alert.darkblue rect{ fill:var(--color-blue-dark)}

.alert.grey { --alert-color: var(--color-grey-mid); color: var(--color-text);}
.alert.grey path, .alert.grey circle,.alert.grey rect{ fill:var(--color-text)}



.link-style {text-decoration:underline; cursor: pointer;}
.link-style:hover {color:var(--color-highlight-blue);}

.bluebox {    padding: var(--space-12);
    background: var(--color-background-dark);
    color: var(--color-text-inverse); flex-grow:1}
  .bluebox h4:first-child {padding-top:0;}



  div#shipping-origin {
    padding: var(--space-6) 0;
    margin: var(--space-6) 0;
}

select#province-select {
    width: 100%;
    padding: var(--space-6);
}

#quote-opener {text-align:center;}
.eq-email-wrapper .field {
    display: block;
    margin: var(--space-6) 0;
}

.eq-email-wrapper {    padding: var(--space-12);}

.point-value {text-align:center; color:var(--color-text-blue); margin:var(--space-6) 0 0 0;}
.cart-note-block {padding: var(--space-12);}

.promo-code {     display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6) 0 !important;
  margin-bottom:var(--space-6); 
color:var(--color-text-blue)}
  .promo-code .input {    flex-grow: 1;
    padding-right: var(--space-6);}
.promo-code .promo-button {    padding: var(--space-6) 0 0 var(--space-6);}

.content {margin-top:var(--space-12);}

/* Product Page */
.product__description {margin-top:var(--space-12);}
.product__info-container {
    color: var(--color-text-blue);
    display: block;
    border-left: 25px solid var(--color-primary);  }

.product__info-container > div {padding: var(--space-6) var(--space-12);}
.product__info-container h1 {border-left: 0;
    padding: 0;}

    .product-sku-container {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-12);
    display: flex;
    justify-content: space-between;
}
#price-line-container {
  border-bottom: 1px solid var(--color-border);}

#price-line-container p {font-weight:800;}
.discount-price p.title {
    margin-bottom: -10px;
}
.price__sale .discount-price {padding: var(--space-6) var(--space-12);}
.options-title {    font-weight: 800;}
.actions-list { 
  border-bottom:1px solid var(--color-border);
  display: flex;
    justify-content: space-between;
  font-size:0.9em;}
.actions-list img {width:70px}
#stock-list {
  border-bottom:1px solid var(--color-border);
}
.locationLine .location, .locationLine .stockCount {color: var(--color-text-blue) !important;}
.stockCount.out-of-stock::after {
  content: " Out of Stock";
}
#add-to-cart {
    display: flex;
    justify-content: space-between;
  border-bottom:1px solid var(--color-border);
  padding: 0;
  align-items: center;
}
#add-to-cart .quantity-selector {
    flex-grow: 1;
    padding: var(--space-6) var(--space-12);
}
#add-to-cart .buy-buttons {
    flex-grow: 2;
    margin: 40px var(--space-12) var(--space-6) var(--space-12);
}
#options-list { 
  border-bottom: 1px solid var(--color-border);}

.product__title { 
  border-bottom: 1px solid var(--color-border);}
.short-description {padding:var(--space-6) 0;}
#variant-list { 
  border-bottom: 1px solid var(--color-border);}
#variant-list legend.form__label {display:none;}
#product-options {padding: var(--space-6) var(--space-12);}

#price-line-container .price__regular {
    padding: var(--space-6) var(--space-12);
}

.rte table {border:1px solid var(--color-border);     border-spacing: 0px; margin:var(--space-12) 0; text-align:left; color:var(--color-text-blue)}
.rte table td {border-bottom: 1px solid var(--color-border);}
.rte table tr.table-header {background-color:var(--color-background-dark)!important; color:var(--color-text-inverse);}
.rte table tr.label-header {background-color:var(--color-background-night)!important; color:var(--color-text-inverse);}
.rte table td, table th {padding:var(--space-6); border-bottom: 1px solid var(--color-border);}
.rte table tbody tr:hover {background-color: rgba(0, 0, 0, 0.06);}

@media (min-width: 720px) {
.spec-toggle-container {text-align: right;
    margin-bottom: -5rem;
    position: relative;
    top: -5rem;}
}


.product-block-container {display: flex;     flex-wrap: wrap; gap: var(--space-12); justify-content: space-between;}
.product-block {flex: 0 0 calc(50% - var(--space-6));}
.product-block-border {border: 1px solid var(--color-border); padding: var(--space-6); margin: var(--space-6) 0;}
 
#chat-box { background: var(--color-background-dark);
    color: var(--color-text-inverse); }
#chat-box .text-container {padding-top: var(--space-24);}
#chat-box .img-container {margin-top:-30px; min-height:65px;}
 #chat-box .heading-container {display:flex;     justify-content: space-between;     border-bottom: 1px solid var(--color-white);
    padding-bottom: var(--space-12);     flex-wrap: wrap;}
#chat-box h2 {color: var(--color-text-inverse); font-size: var(--text-3xl);}
#chat-box .contact-links {margin: var(--space-6) 0; padding: var(--space-6) 0;}

#product-tag-container {margin:var(--space-12) 0; grid-gap: var(--space-6); flex-wrap: wrap; justify-content: center; }
.product-tag:hover {    background: var(--color-background-mid);}
.product-tag .icon svg {     width: 30px;
    height: 30px;
    max-width: 30px;}
.product-tag .icon svg path, .product-tag .icon svg rect, .product-tag .icon svg circle {fill:var(--color-text-blue)}
.product-tag .title {font-weight: 800; line-height: 1.8rem; margin: 0;
    padding: 0;}
.product-tag .subtitle {    font-size: 1rem; margin: 0px;
    padding: 0; } 
#product-tag-container .product-tag {
  display: flex;
  color: var(--color-text-blue);
  border: 1px solid var(--color-border);
  flex: 1 1 200px;
}

#product-tag-container .product-tag .icon {
  padding: var(--space-6);
  display: flex;
  align-items: center;
    border-right: 1px solid var(--color-border);
        width: 65px;
}

#product-tag-container .product-tag .message {
  padding: var(--space-6);
  display: grid;
    align-items: center;
}

div#cart-notification {
    background: var(--color-background-mid);
    z-index: 999;
    border: var(--color-border);
}

div#cart-notification button path, div#cart-notification button rect,div#cart-notification button circle{
    fill: var(--color-white);
}


.cover {object-fit: cover;}
.filter {filter: brightness(0.7) saturate(1.1);}



@media (width <= 989px){ }
@media (width <= 749px){
  .card__information {
    margin-bottom: var(--space-12);
}

}
@media (width <= 500px ){
.search-modal {background: #fffffff0 !important;}
.search-modal__content {padding: var(--space-16) var(--space-8);}

}


/*---------------------- #FeaturedBrands ----------------------*/
  #major-brands {     margin: var(--space-24) auto var(--space-6) auto !important;}
  .major-brands-container {display: flex; overflow:hidden;}
  #more-brands {display: flex; margin:-16px auto  var(--space-12) auto; ;  overflow:hidden;}
  #major-brands .block, #more-brands .block{
    flex: 1 1 100%;
    order: -1; 
    overflow:hidden;
}
  #major-brands .block .block-bg, #more-brands .block .block-bg {transition: transform 0.5s ease;}
  #major-brands .block:hover .block-bg, #more-brands .block:hover .block-bg {transform: scale(1.15);}



#major-brands .block .block-bg {
    min-height: 250px;
    text-align: center;
    display: flex;
    justify-content: center;
    background-size: cover;
}
#more-brands .block .block-bg {
    min-height: 150px;
    text-align: center;
    display: flex;
    justify-content: center;
    background-size: cover;
}


#major-brands .block img {
    width: 80%;
    max-width: 150px;
    min-width: 100px;
    margin: auto;
    filter:drop-shadow(18px 5px 6px #000000) drop-shadow(-18px -5px 6px #000000) drop-shadow(0px 0px 9px #000000);
}

#more-brands .block img {
    width: 80%;
    max-width: 100px;
    min-width: 50px;
    margin: auto;
   filter:drop-shadow(18px 5px 6px #000000) drop-shadow(-18px -5px 6px #000000) drop-shadow(0px 0px 9px #000000);
}

@media (width <= 989px){ }
@media (width <= 749px){
  .major-brands-container, #more-brands {flex-wrap: wrap;}
  #major-brands .block { flex: 1 1 49%;}
  #more-brands .block { flex: 1 1 32%;}

}
@media (width <= 500px ){
  
  }
@media (width <= 400px ){
  #major-brands .block, #more-brands .block { flex: 1 1 100%;}
#more-brands {display:none;}
}

/* Search Page */
.template-search__header h1 {border:0px;}
#new-search h2 {margin-bottom:var(--space-6);}
#search-suggestions ul li {display:inline-block;}
#search-suggestions a:link,#search-suggestions a:visited{ color:var(--color-text-blue); background-color:var(--color-background-mid); display:block; margin:var(--space-3); padding:var(--space-3) var(--space-6); text-decoration:none;   transition: transform 0.5s ease;}
#search-suggestions a:active,#search-suggestions a:hover{color:var(--color-text-inverse); background-color:var(--color-background-dark);   transform: scale(1.15); 
}

.variant-pill {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.variant-pill.is-disabled {
  opacity: 0.5;
}

.variant-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.variant-swatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0,0,0,0.15);
  display:inline-block;
}

.variant-label-text {
  line-height: 1;
}

.variant-pill.is-disabled {
  opacity: 0.5;
}


.contact-card .contact-text ul {
    list-style: square;
    margin-block: 1rem;
    padding-left: 2.3rem;
}
.contact-card .contact-text ul li {padding: var(--space-1) 0;}


section.spacer, div.spacer{margin-top:var(--space-24); margin-bottom:var(--space-24);}
section.spacer-sml, div.spacer-sml{margin-top:var(--space-12); margin-bottom:var(--space-12);}
section.grey-section, div.grey-section {background: var(--color-background-light); padding-top:var(--space-48); padding-bottom:var(--space-48);}
hr {margin-top:var(--space-12); margin-bottom:var(--space-12);}
h1.spacer {margin-bottom: var(--space-24);}

.halves,.quarters,.thirds,.flow-container { display: flex; gap: 16px;}
.block {flex: 1;}


    .faq-header {Display:flex; justify-content: space-between;}
    .faq-question {
  cursor: pointer;
  font-weight: 600;
  padding: 16px 0;
  border-bottom: 2px solid var(--color-border);
}

.faq-answer {
  padding: 16px 0;
}

.faq-answer-inner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: var(--space-6) var(--space-12);
}

.faq-answer-inner.image-right {
  flex-direction: row-reverse;
}

.faq-answer-inner.image-full {
  display: block;
}

.faq-answer-inner.image-full .faq-image {
  width: 100%;
  margin-bottom: 16px;
}

.faq-answer-inner.image-full .faq-image img {
  width: 100%;
  max-width:750px;
  margin:auto;
  height: auto;
  display: block;
  border-radius: 8px; /* optional, keeps it aligned with your UI system */
}

.faq-answer-inner.image-full .faq-text {
  width: 100%;
}


.faq-image img {
  max-width: 240px;
  height: auto;
  border-radius: 8px;
}

.faq-ask-button {
  margin-top: 12px;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none; /* removes default marker */
  color: var(--color-text-blue);
}

.faq-question::-webkit-details-marker {
  display: none; /* Safari/Chrome default triangle removal */
}

.faq-caret {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
  display: inline-flex;
}

/* Rotate when open */
details[open] .faq-caret {
  transform: rotate(45deg);
}
.faq-answer {
  animation: faqFade 0.25s ease;
  color: var(--color-text-blue);
}

@keyframes faqFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rte ul {list-style-type: disc; }

.location-section {background:var(--color-gradient-red);}
.location-section h1 {color:var(--color-text-inverse);     margin-bottom: var(--space-12); text-shadow: 5px 5px 15px #1d1d1d;}
.location-section h1::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 12px;
  background: currentColor;
}
.location-section h1:before {display:none;}
.location-section .container {padding:var(--space-24) 0;}
.location-map {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  min-height: 400px;
  margin: var(--space-12) 0;
}

.location-list {
  display: flex;
  flex-direction: column;
}

.location-item {
  padding: var(--space-12) var(--space-6);
  cursor: pointer;
  border:1px solid var(--color-border);
  border-left: 10px solid var(--color-border);
      padding-left: var(--space-8);
  background: var(--color-background);
}

.location-item:hover {
  background: var(--color-background-mid);
      border-left: 10px solid var(--color-border);
    padding-left: var(--space-8);
}
.location-item:hover .loc-title {text-decoration:underline;}

.location-item.active {
  border-color: var(--color-border);
  background: var(--color-background-mid);
      border-left: 10px solid var(--color-background-night);
    padding-left: var(--space-8);
}

.location-map-frame {
  width: 100%;
  min-height: 400px;
}
.loc-pro { 
    margin-top: 0 !important;
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--text-caption);
    color: var(--color-text);}
.loc-pro::after {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  margin-top: 6px;
  background: currentColor;
}
.loc-title {    
    color: var(--color-text-blue);
    font-size: 1.6rem;
    font-weight: 600; 
    margin-bottom: -10px!important;}

.grain-bg {
  position: relative;
  overflow: hidden;
}
.grain-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
    opacity: 0.4;
    mix-blend-mode: multiply;
    background-image: url(/cdn/shop/files/grain-location.png?v=1780954998);
    background-size: cover;
}

.grain-bg > * {
  position: relative;
  z-index: 2;
}

.angled-div {
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
  padding: 6rem 0;
}


.image-text {
  display: flex;
  gap: 4rem;
  align-items: center;
  align-items: stretch;
}

.image-text__content,
.image-text__image {
  flex: 1;
}

.image-text__content {
    padding: var(--space-12);
}

.image-text__image {
  display: flex;
  overflow: hidden; /* important for clean cropping */
}

.image-text__image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the frame evenly */
  display: block;
}

.image-text__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.logo-list-section {    border-bottom: 1px solid var(--color-border); }
h2.line-header {text-transform:uppercase; color:var(--color-text-blue); 
border-top:1px solid var(--color-border);
border-bottom:1px solid var(--color-border);
text-align:center;
padding:var(--space-6) 0;
font-size:1.4rem;
margin-bottom: 0px;}    
.logo-list-container {justify-content: center; gap: var(--space-12);}
.logo-block {
    display:flex;
    align-items: center;
    
 }
.logo-list-container img {
    max-height: 75px;
    max-width: 150px;
    width: 100%;
    height: auto;
    padding: var(--space-6);
    border:0px;
}

.collection-hero__text-wrapper {display: flex; justify-content: space-between;}
.section-collection-title-secondary .collection-hero__text-wrapper {    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    text-align: center;}
 .section-collection-title-secondary .collection-hero__text-wrapper h1 { 
    color: var(--color-text);
  border-left: 0px;}

  .brand-logo {width: 15%;}


  .product-comparison .comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 920px) {
  .product-comparison .comparison-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* CARD BASE */
.compare-card {
  border: 1px solid rgba(0,0,0,0.1);
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  display: grid;
  align-content: start;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  animation: cardIn 420ms ease forwards;
}

.compare-card-image {height: 110px;}
.compare-card-title {
    min-height: 65px;
    display: grid;
    align-content: center;
    text-align: center;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* EMPTY SLOT CARD */
.compare-card--empty {
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(var(--color-foreground), .2);
  background: rgba(var(--color-foreground), .02);
}

/* IMAGE */
.compare-card img {
  width: 100%;
  max-width: 110px;
  margin: 0 auto 12px;
}

/* TABLE */
.compare-card table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.compare-card td,
.compare-card th {
  padding: 6px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 1rem;
}

/* ACTIONS */
.actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.actions > a {margin:var(--space-3) 0;}

/* INLINE DROPDOWN */
.product-picker-inline {
  width: 100%;
  position: relative;
}

.product-picker__toggle {
  width: 100%;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--color-foreground), .15);
  background: white;
  cursor: pointer;
}

.product-picker__menu {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 10px;
  border: 1px solid rgba(var(--color-foreground), .1);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: 200ms ease;
  z-index: 20;
}

.product-picker__menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.product-picker__option {
  width: 100%;
  text-align: left;
  padding: 12px;
  border: 0;
  background: white;
  cursor: pointer;
}

.product-picker__option:hover {
  background: rgba(0,0,0,0.04);
}

.custom-media-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-background-mid);
  height:100%;
 
}
.custom-media-gallery__main {max-width: 90%;
    margin: var(--space-12) auto auto auto;}
.custom-media-gallery__main img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.custom-media-gallery__thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: var(--space-3);
    justify-content: center;
    align-items: center;
     padding:var(--space-12);
}

.thumb {
  border: 1px solid transparent;
  padding: 0;
  background: none;
  cursor: pointer;
}

.thumb[aria-current="true"] {
  border-color: var(--color-border);
}

.thumb img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  display: block;
}

.gallery-main-image {
  opacity: 1;
  transform: scale(1);
  transition: opacity 550ms ease, transform 350ms ease;
  will-change: opacity, transform;
}

.gallery-main-image.is-fading {
  opacity: 0;
  transform: scale(1.02);
}


#quarter-banners {background: var(--color-background-dark);}
  

  .seasonal-banners__featured-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .seasonal-banners__featured-banner,
  .seasonal-banners__image {
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
  }

/* background layer */
.seasonal-banners__featured-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 1.2s ease;
  will-change: transform;
  z-index: 0;
}

/* hover zoom ONLY background */
.seasonal-banners__featured:hover .seasonal-banners__featured-banner::before {
  transform: scale(1.1);
}


/* keep content above background */
.seasonal-banners__overlay {
  position: relative;
  z-index: 2;
}




@media (width <= 989px){  
  #search.col-7{grid-column: span 10}
}
@media (width <= 749px){ 
    .layout .col-1, .layout .col-2 { grid-column: span 3;}
     .layout .col-3, .layout .col-4, .layout .col-5,.layout .col-6{ grid-column: span 6;}
    .layout .col-7, .layout .col-8, .layout .col-9,.layout .col-10,.layout .col-11.layout .col-12{ grid-column: span 12;}
   #search.col-7{grid-column: span 9}
  }
  @media (width <= 500px){ 
    .layout { display: block;}
  }

.seasonal-banners__featured {overflow: hidden;}
 

  .seasonal-banners__featured-banner {
      min-height: 300px;
  }

  .seasonal-banners__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .seasonal-banners__item {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .seasonal-banners__image {
    min-height: 230px;
    background-color: var(--color-background-dark);
  }

  .seasonal-banners__image {
  background-size: 105%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.seasonal-banners__item:hover .seasonal-banners__image {
  background-size: 115%;
}

  .seasonal-banners__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    padding: var(--space-12);
    align-content: center;
    align-items: center;
  }

  .seasonal-banners__overlay h2 {text-shadow: 2px 2px 10px black; color:var(--color-white)}

  .seasonal-banners__overlay p { margin: 0; margin: var(--space-6);}

  .seasonal-banners__item {
  position: relative;
  overflow: hidden;
}

.seasonal-banners__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 25px;
  background: var(--color-lightblue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
  z-index: 1;
}




  @media screen and (max-width: 989px) {
    .seasonal-banners__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 749px) {
    .seasonal-banners__grid {
      grid-template-columns: 1fr;
    }
      .seasonal-banners__image {min-height: 150px;}
  .seasonal-banners__grid { gap: 0px;}
  }

  .search-status {text-align:center; padding:var(--space-6) 0;}


  .article-card-wrapper h3.card__heading:before {
    content: "Article";
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    background-color: var(--color-background-mid);
    margin: var(--space-3) 0;
    padding: var(--space-2);
    position: relative;
  }

  .product-nav {    background-color: var(--color-background-mid);
    border-bottom: 1px solid var(--color-border);position: sticky;
  top: 0;
  z-index: 1000;
  }
.product-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-nav li {
  flex: 1;
      border-right: 1px solid var(--color-border);
    display: flex;
    align-items: center;
}

.product-nav a {
  display: block;
  width: 100%;
  text-align: center;
  align-content: center;
  padding:var(--space-6);
  text-decoration:none;
}

.product-nav a:hover {
  font-weight: 700;
  border-bottom: 2px solid var(--color-accent);
  background-color:var(--color-background-dark);
  color:var(--color-text-inverse);
}



.featured-product-scroll__wrapper {
  position: relative;
}

.featured-product-scroll__container {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin: var(--space-12) 0;
}

.featured-product__image {
  position: relative;
  height: 125px;
  overflow: visible;
}

.featured-product__image img {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 98%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.featured-product__image-bg {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 0;
  right: 0;
  background: var(--color-background-mid);
  border-radius: 8px; /* optional */
}

.featured-product-scroll__container::-webkit-scrollbar {
  display: none;
}

.featured-product__block {
  flex: 0 0 220px;
}
.featured-product__block:hover .featured-product__image img{transform: scale(1.15);}
.featured-product__block:hover .featured-product__image-bg {  background: #dee0e8;}


a.featured-product__block {text-decoration: none !important;}
a.featured-product__block:hover {text-decoration: underline !important;}
.featured-product__block .block-text{    z-index: 999;
    position: relative;}

a.featured-product__block h5 {
    text-align: center;
    color: var(--color-text-blue);
    padding-top: var(--space-4);
}
.featured-product__block p {
    text-align: center;
}
.featured-product-scroll .heading { position: relative;}
.featured-product-scroll .explore-link {position:absolute; top: 23px;     right: 0; }

.featured-product-scroll__controls {text-align:right; }
.featured-product-scroll__controls button {width:30px; border: 0;     margin: 0 Var(--space-2); background:transparent; cursor: pointer; }
.featured-product-scroll__controls button:disabled svg path,.featured-product-scroll__controls button:disabled svg rect,.featured-product-scroll__controls button:disabled svg circle {fill: var(--color-grey-mid)!important;}
.featured-product-scroll__prev svg {transform: rotate(180deg);}
.featured-product-scroll__controls button svg path,.featured-product-scroll__controls button svg rect,.featured-product-scroll__controls button svg circle {fill: var(--color-text-blue);}
.featured-product-scroll__controls button:hover {    transform: scale(1.1); transform 0.3s ease;}

input { margin: var(--space-3) 0;}


.contact-card-container {display: flex; flex-wrap: wrap;     gap: var(--space-12);}
.contact-card-container > * {flex: 0 0 calc(50% - var(--space-12));}
    .contact-card {    display: flex; flex-grow: 1;     outline: 1px solid var(--color-border);     align-items: flex-start; }
    .contact-card .contact-icon {background-color:var(--color-background-dark); width:12%;  min-width: 50px;  height: 100%;}
    .contact-card .contact-text {padding: var(--space-12) var(--space-12);
    color: var(--color-text-blue);
    width: 100%; }

     .contact-card .contact-text h3 {   margin-top: 0;
    padding-top: 0;}
    .contact-card .contact-icon img {
    width: 100%;
    min-width: 10px;
    height: auto;
    padding: var(--space-6);
    margin: var(--space-3) auto;
}

@media (width <= 1260px){ .actions-list .logo {display:none; justify-content: center;}}
@media (width <= 949px){
.contact-card .contact-icon {display:none;}
}
  @media (width <= 749px){ 
    .featured-product-scroll__controls {
    display: flex;
    justify-content: space-between;}

    .contact-card {flex: 100%;}

    .location-map {grid-template-columns: 1fr;}
    .location-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
}
.location-item {flex: 1;}



}

.featured-product-scroll__controls button {width: 50px;}

.featured-product__block {
    flex: 0 0 297px;
    margin: 0;
    padding: 0;
}

  }

  @media (width <= 500px){ 
.featured-product-scroll__wrapper {    width: 300px; margin: auto;}
    .featured-product__image {width: 300px;}

    .featured-product-scroll__controls {
    display: flex;
    justify-content: space-between;
}

.featured-product-scroll__controls button {width: 50px;}

.featured-product__block {
    flex: 0 0 297px;
    margin: 0;
    padding: 0;
}

.featured-product-scroll__container {
    display: flex;
    gap: 0;
  min-width:300px;}

    .featured-product__block .block-text {}

    a.featured-product__block {display: grid;
    justify-content: center;}
  }
  
   @media (width <= 749px){
    #social {    padding: var(--space-12);}
    .product__info-container h1 {font-size: var(--text-3xl);}  
    .contact-card .contact-icon {
        display: block;
    }
   }
@media (width <= 500px){
    .inline-list {justify-content: center;}
    .product__info-container h1 {font-size: var(--text-2xl);}    
  .product__info-container .alert .icon {display:none}
  .product__info-container .alert .message {padding: 0;}
  .faq-ask-button {display:none;}
  .rte h1:before, .rte h1.title-bar:before {
    display:none;
}
 .location-list { flex-wrap: wrap;}
 .location-item { flex: 100%;}


    :root {

  /* Font */
  --font-body: 'Miranda Sans', system-ui, sans-serif;

  /* Font sizes */
  --text-xs:   0.75rem;
  --text-sm:   0.8rem;     
  --text-caption:   1rem;     
  --text-base: 1.3rem;
  --text-md:   1.4rem; 
  --text-lg:   1.5rem;   
  --text-xl:   1.7rem;    
  --text-2xl:  2rem;  
  --text-3xl:  2.5rem;  
  --text-4xl:  3.5rem;    
  --text-5xl:  3.7rem; 
  }

}
  
     @media (width <= 400px){
    .collection-hero__text-wrapper .icon {display:none;}
    .grid {flex-wrap: wrap;}
    
    .product__info-wrapper.grid__item, .grid__item.product__media-wrapper {max-width:100%}
  }
   

  
/*------ #Mobile Navbar ------*/
div#mobile-nav {display:none}  
nav#mobile-subnav {display:none;}
#menu li a{}


 /* Mobile Navbar */
button#hamburger-button {background:none; border:0;}
  /* submitted */
  /* Base Styles for the Navigation */
#mobile-subnav {
  background-color: #fff; /* Background for the navbar */
  border-bottom: 1px solid var(--color-border-grey);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    top: -69px;
    z-index: 88888;
   box-sizing: border-box;
}

#mobile-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#mobile-menu li a {font-size:15px; text-transform:uppercase;}  
#mobile-menu:first-child {border-top: 1px solid #EBEBEB;}
#mobile-menu > li {
  position: relative; /* Position for dropdown handling */
  border-bottom: 1px solid #EBEBEB;
  padding:0px;
}
ul#mobile-menu li:nth-child(11){background: var(--color-red);}
ul#mobile-menu li:nth-child(11) a:hover{background: #9b1d19;}
ul#mobile-menu li:nth-child(11) a{color: var(--color-text-inverse);}

/* Links Styling */
#mobile-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 16px;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.3s ease;
}

#mobile-menu a:hover {
  background-color: #f5f5f5; /* Hover background */
  color: var(--color-text);
}

/* Dropdown Styling */
#mobile-menu ul, #mobile-menu ul ul {margin:0;}
#mobile-menu ul li, #mobile-menu ul ul li {list-style-type:none;}
#mobile-menu .dropdown > a:after, #mobile-menu .dropdown ul li > a:after {
content: url('/cdn/shop/files/Icon-arrow-right.svg?v=1732727664');
  display: inline-block; /* Ensures the image behaves like an inline element */
  width: 16px; /* Optional: set width */
  height: 16px; /* Optional: set height */  float: right;
  font-size: 12px;
  margin-left: 10px;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

#mobile-menu .dropdown:hover > a:after {
  transform: rotate(90deg); /* Rotate the arrow on hover */
}

  #mobile-menu .dropdown.active > a:after {
  transform: rotate(-90deg); /* Rotate the arrow up when clicked*/
}


  

#mobile-menu .dropdown > ul {
  display: none; /* Hide dropdown by default */
  position: relative;
  left: 0;
  top: 100%;
  background-color: #fff;
  width: 100%; /* Full width dropdown */
  border: 1px solid var(--color-border-grey);
  /*box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);*/
  z-index: 999;
  padding-inline-start: 0px;
}

#mobile-menu .dropdown.active > ul {
  display: block; 
  position: static;

}


/* Submenu Styling */
#mobile-menu .dropdown ul li a {
  padding-left: 20px; /* Indent for submenus */
  font-weight: 600;
  border-left: 6px solid var(--color-border-grey);
  font-size: 13px;
}

  #mobile-menu .dropdown ul ul li a {
  border-left: 0px;
    font-weight: 400;
    text-transform: capitalize;
    border-left: 6px solid var(--color-border-grey);
}

#mobile-menu .dropdown ul ul {
  background-color: var(--color-background-mid); /* Light grey background for 3rd level */
  padding-inline-start: 0px;
}

#mobile-menu .dropdown ul ul li a {
  padding-left: 50px; /* Further indent for 3rd level submenu */
}

/* Active Link Styling */
#mobile-menu a.active {background-color: var(--color-background-mid);}
#mobile-menu li.open ul {display:block;}


/* Collection Titles */
    .image-text {align-items: stretch;}
    .image-text-section {border-left: 20px solid var(--color-border);}
    .image-text-section.page-width {border-left: 0px;}
    .image-card-container {display: flex; flex: 0 0 50%;     justify-content: flex-end;}
    .image-card {flex-grow: 1; min-height: 300px; overflow: hidden;
        display: flex;
    background-size: cover;
    background-position: center;
    align-items: flex-end;}
    a.image-card {text-decoration:none;}
.image-card-text {
    position: absolute;
   bottom: 0;
    
    background: #00000082;
    display: block;
    width: 100%;
    height: 30px;
    padding: 2rem 2rem 5rem 2rem;
}
.image-card-text h5.subtitle {color:var(--color-grey-mid);     font-size: var(--text-sm);}
.image-card-text h5.heading {color:var(--color-text-inverse);}


/* Collection Title - Printer Category */
  .image-text {align-items: stretch; border-bottom: 1px solid var(--color-border)}
    .printer-header-section.page-width {border-left: 0px;}
    .nav-card-container {display: flex; flex: 0 0 60%;     justify-content: flex-end;     height: 350px;}
    a.image-card {text-decoration:none;}
.nav-card-text {
transform: rotate(-90deg);
}
.image-card-text h5.heading {color:var(--color-text-inverse);}
.image-card__label img {width:20px;}
.nav-card-container {
    display: flex;
    gap: 0;
}

.image-card {
    display: flex;
    flex-grow: 1;
    min-height: 350px;
    text-decoration: none;
    border: 1px solid #243b7d;
    position:relative;
    overflow: hidden;
    transition: flex-grow 0.3s ease;
}
.image-card:hover {flex-grow: 2;}
.image-card:hover .image-card__image {filter: sepia(100%) saturate(200%) brightness(86%) hue-rotate(180deg); transform: scale(1.05); }
.image-card:hover .image-card__label{background: #273260cf;     border-right: 1px solid var(--color-white);}
.image-card:hover h5{color:var(--color-text-inverse)}
.image-card:hover .image-card__label img {filter: invert(100%); }

.image-card__label {
height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-right: 1px solid var(--color-border);
    width: 50px;
    padding: var(--space-6);
    background: #dbdbdbe3;
    z-index:999;
}


.image-card__label h5 {
    margin: 0;
    transform: rotate(-90deg);
    transform-origin: left;
    white-space: nowrap;
    position: absolute;
    bottom: 5px;
    left: 24px;
}

.image-card__label img {
   width: 100%;
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid var(--color-border);
    position: absolute;
    top: -30px;
    left: 0;
    transition: filter 0.3s ease;
    
}


.image-card__image {
   width: 100%;
    padding: 10px 10px 10px 10px;
    background-position: center;
    background-size: cover;
    transition: filter 0.3s ease;
    transition: transform 0.3s ease;
}

/* Image Blocks */

.image-card-container {display: flex; flex-wrap: wrap;     /*gap: var(--space-12);*/}
.image-card-container > * {flex: 0 0 calc(33% - var(--space-12));}
    .image-card {    display: flex; align-content: space-between; flex-grow: 1; flex-wrap: wrap; border: 1px solid var(--color-border); }
    
    .image-card .image-card-text {flex: 0 0 100%; 
    color: var(--color-text-blue); /*padding: var(--space-12); -- 3D Printers Collection Fix */ }

     .image-card .image-card-text h3 {   margin-top: 0;
    padding-top: 0;     color: var(--color-text-blue);
    font-size: 2.2rem;}
     .image-card .image-card-text h3:after {display:none;}
     .image-card-text p {margin: 0;}
.image-card .image-img {flex: 0 0 100%;     width: 100%;
    height: 230px;
    display: flex;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
background:var(--color-background-mid);}
    .image-img img {
        width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    padding: 0;
    margin: 0;
}

.image-img.logo-container img {
    object-fit: contain;
    padding: var(--space-24);}

.feature-section {    display: flex;
    align-content: center;
    align-items: stretch;
    justify-content: space-around;
    margin: var(--space-12) 0;}

.feature-section .feature-left, .feature-section .feature-right { padding: var(--space-12); flex: 1;     border: 1px solid var(--color-border);}
.feature-image {
     flex: 1 1 calc((100% - 20px) / 2);
  min-width: calc((100% - 20px) / 2);}
  .feature-image img {
    width: 100%;
}