/* Variables / Custom Properties */
:root {

  /* Colours */

  --primary: #905D52;
  --secondary: #A7A29C;

  --black: #1E1E1E;
  --white: #FFF;
  
  --gray-8:#333;
  --gray-7:#404040;
  --gray-6:#949494;
  --gray-5:#CECECE;
  --gray-4:#E2E2E2;
  --gray-3:#F0F0F0;
  --gray-2:#F5F5F5;
  --gray-1:#FBFBFB;
  
  /* Global */
  
  --container: 1665px;
  --gap: 2rem;
  --gap-quarter: calc(var(--gap)/4);
  --gap-half: calc(var(--gap)/2);
  --gap-extra: calc(var(--gap)*1.5);
  --gap-double: calc(var(--gap)*2);
  
  --drop-shadow: 0px 4px 16px rgba(30, 30, 30, 0.2);
  --drop-shadow--heavy: 0px 4px 16px rgba(30, 30, 30, 0.7);
  --text-shadow: 0px 4px 32px rgba(0, 0, 0, 0.45);
  
  --transition: all 0.3s;
  
  /* Typography */
  
  --text-xxxs: clamp(0.75rem, calc(0.75rem + ((1vw - 0.3rem) * 0.1689)), 0.875rem);      /* 12 - 14px */
  --text-xxs:  clamp(0.875rem, calc(0.875rem + ((1vw - 0.3rem) * 0.1689)), 1rem);        /* 14 - 16px */
  --text-xs:   clamp(1rem, calc(1rem + ((1vw - 0.3rem) * 0.1689)), 1.125rem);            /* 16 - 18px */
  --text-s:    clamp(1.125rem, calc(1.125rem + ((1vw - 0.3rem) * 0.2534)), 1.3125rem);   /* 18 - 21px */
  --text-m:    clamp(1.3125rem, calc(1.3125rem + ((1vw - 0.3rem) * 0.3378)), 1.5625rem); /* 21 - 25px */
  --text-xm:   clamp(1.5625rem, calc(1.5625rem + ((1vw - 0.3rem) * 0.2534)), 1.75rem);   /* 25 - 28px */
  --text-l:    clamp(2.375rem, calc(2.375rem + ((1vw - 0.3rem) * 0.5068)), 2.75rem);     /* 38 - 44px */
  --text-xl:   clamp(2.75rem, calc(2.75rem + ((1vw - 0.3rem) * 0.3378)), 3rem);          /* 44 - 48px */
  --text-xxl:  clamp(2.75rem, calc(2.75rem + ((1vw - 0.3rem) * 1.3514)), 4.25rem);     /* 52 - 68px */
  
}

/* Global */
html {
  scroll-behavior: smooth;
}

body {
  background: url(img/wood-background.jpg);
  font-family: gotham, 'Helvetica Neue', 'Arial Nova', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: var(--black);
}

.container,
.page-content-wrapper {
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  max-width: var(--container);
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 640px) {
  .container,
  .page-content-wrapper {
    padding-left: .5rem;
    padding-right: .5rem;
  }
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.block {
  display: block !important;
}

.col--2, .col--3, .col--4, .col--1-3, .col--3-1, .col--3-2 {
  display: flex;
  gap: var(--gap);
  flex-direction: column;
}

@media screen and (min-width: 767px) {
  .col--2, .col--3, .col--4, .col--1-3, .col--3-1, .col--3-2 {
    display: grid;
    align-content: flex-start;
  }
  
  .col--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .col--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .col--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .col--1-3 {
    grid-template-columns: 1fr 3fr;
  }
  
  .col--3-1 {
    grid-template-columns: 3fr 1fr;
  }
  
  .col--3-2 {
    grid-template-columns: 3fr 2fr;
  }  
}

@media screen and (min-width: 1020px) {
  .col--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

hr {
  max-width: 134px;
  background: var(--gray-5);
  height: 3px;
  margin: 2rem 1rem;
  border: 0 solid transparent;
}

video {
  max-width: 100%;
}

article {
  padding: 3rem 1rem;
}

@media screen and (max-width: 640px) {
  article {
    padding: 2rem .5rem;
  }  
}

.page article {
  padding: 3rem 0;
}

.callout-box,
.callout-box--sidebar {
  background: var(--gray-3);
  padding: var(--gap);
}

.callout-box {
  margin-top: var(--gap-double);
}

.callout-box--sidebar {
  margin-top: var(--gap);
}

.callout-box h2 {
  font-size: var(--text-l);
  text-transform: unset;
}

.callout-box p {
  margin-top: var(--gap-half);
}

.callout-box--sidebar {
  border: 4px solid var(--black);
  text-align: center;
}

.callout-box--sidebar h2 {
  font-size: var(--text-s);
  margin-bottom: var(--gap-half);
}

html.menu-visible {
  overflow: hidden;
}

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

/* Typography */

h1, h2, h3, h4 {
  text-transform: uppercase;
  line-height: 1.1;
  font-family: gotham;
  font-style: normal;
  font-weight: 700;
}

h1 { font-size: var(--text-xxl); margin-top: var(--gap); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-l); }
h4 { font-size: var(--text-m); }

p,
.page p,
.page li {
  font-size: var(--text-s);
  line-height: 1.3;
  font-weight: 400;
  margin-bottom: var(--gap);
}

.text--center {
  text-align: center !important;
}

.upper {
  text-transform: uppercase;
}

a {
  transition: var(--transition);
}

p a {
  color: var(--black);
}

p a:hover {
  text-decoration: underline;
}

.text-xs { font-size: var(--text-xs); }
.text-s { font-size: var(--text-s); }
.text-m { font-size: var(--text-m); }
.text-xm { font-size: var(--text-xm); }
.text-l { font-size: var(--text-l); }
.text-xl { font-size: var(--text-xl); }
.text-xxl { font-size: var(--text-xxl); }

/* Buttons */

.button,
.button--small,
input[type="submit"] {
  background: var(--black);
  color: var(--gray-1) !important;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  transition: var(--transition);
}

.button,
input[type="submit"] {
  padding: 1rem 2rem;
  font-size: var(--text-m);
  letter-spacing: 1px;
  border: 0;
}

.button--small {
  padding: .5rem 1rem;
  font-size: var(--text-xxs);
  letter-spacing: 2px;
}

.button:hover,
.button--small:hover,
input[type="submit"]:hover {
  background: var(--gray-8) !important;
  box-shadow: var(--drop-shadow--heavy);
  cursor: pointer;
  color: #fff;
  text-decoration: none;
}

/* Header */

#header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  background: var(--gray-1);
}

@media screen and (max-width: 899px) {
  #header {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }  
}

#header div {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#header #logo {
  width: 333px;
  max-width: 90%;
  margin: auto;
  padding: 0 1.5rem;
}

#header i {
  font-size: var(--text-s);
}

#header #menu-toggle {
  cursor: pointer;
  background-color: transparent;
  cursor: pointer;
  border: none;
  padding: 0;
}

#header nav {  
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background-color: rgba(30, 30, 30, 0.98);
  padding: 2rem;
  opacity: 0;  
  visibility: hidden;
  overflow: auto;
}
html.menu-visible #header nav {
  transition: ease all 0.3s;
  opacity: 1;
  visibility: visible;
}
#header nav #logo-icon {
  height: 64px;
  width: 64px;
  margin-bottom: 0.75rem;
}
#header nav #menu-close {
  background-color: transparent;
  cursor: pointer;
  border: none;
  padding: 0;
  color: var(--white);
  position: absolute;
  top: 2rem;
  right: 2rem;
}
#header nav > ul {
  list-style: none;
  padding-left: 0;
  text-align: center;
}
#header nav > ul a {
  color: var(--white);
  text-transform: uppercase;
  font-size: var(--text-s);
  text-decoration: none;
  font-weight: 700;
}
#header nav > ul ul {
  padding-left: 0;
  list-style-type: none;
}
#header nav > ul ul a {
  color: var(--gray-6);
}
#header nav > ul > li i {
  display: none;
}
#header .mobile-icon--cart {
  color: var(--black);
}
#header .button--small {
  margin-top: 2rem;
  background: var(--gray-1);
  color: var(--black);
}

@media screen and (max-width: 1199px) {
  #header nav li:has(.has-dropdown) {
    margin-top: 1rem;
  }
}

@media screen and (min-width: 1200px) {
  #header #menu-toggle,
  #header nav #logo-icon,
  #header nav #menu-close,
  #header .mobile-icon--cart {
    display: none;
  }
  #header {
    justify-content: flex-start;
  }  
  #header #logo {
    margin: 0;
    padding: 0;
  }
  #header nav {
    position: relative;
    display: flex;
    flex-direction: row;    
    background-color: transparent;
    opacity: 1;
    visibility: visible;    
    padding: 0;
    height: auto;
    overflow: initial;
    transition: none;    
  }
  #header nav > ul {
    display: flex;
    gap: var(--gap-half);
    list-style-type: none;
    text-transform: uppercase;
    text-align: left;
    padding-left: 0;
  }
  #header nav > ul li:last-child {
    align-items: center;
  }
  #header nav > ul > li {
    position: relative;
  }
  #header nav > ul > li i {
    display: inline-block;
  }
  
  /* #header nav > ul > li > a.is-active i {
    transform: rotate(180deg);
  } */

  #header nav > ul > li,
  #header nav > ul > li > a {
    color: var(--black);
    text-transform: uppercase;
    font-size: var(--text-xxs);
    text-decoration: none;
    font-weight: 700;
  }

  #header nav ul li a:hover {
    color: var(--secondary);
  }

  /* DROPDOWN */
  #header nav .has-dropdown:hover {
    cursor: pointer;
  }
  #header nav > ul ul {
    display: none;
    position: absolute;
    z-index: 100;
    top: 100%;  
    width: 250px;      
    text-transform: uppercase;
  }
  #header nav > ul ul.is-visible, #header nav #main-menu-ul > li:hover ul {
    display: block;
  }
  #header nav > ul ul > li {
    display: block;
    background-color: var(--white);
    padding: .5rem 2rem;
  }
  
  #header nav > ul ul > li,
  #header nav > ul ul > li a {
    color: var(--black);
    text-transform: uppercase;
    font-size: var(--text-xxs);
    text-decoration: none;
    font-weight: 700;
  }
  
  #header nav li {
    display: flex;
    align-self: center;
  }

  #header aside {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-half);
    padding: var(--gap);
    margin-left: auto;
  }

  #header .button--small {
    margin-top: 0;
    background: var(--black);
    color: var(--gray-1);
  }  
  #header .button--small:hover {
    background: var(--gray-8);
    box-shadow: var(--drop-shadow);
  }

}

#header-search input,
#header-search button,
#filters #filter--search div input,
.doors-page--details #filter--search div input,
#filters #filter--search div button,
.doors-page--details #filter--search div button {
  border: 0;
  background: none;
}

#header-search fieldset,
#filters #filter--search div {
  display: flex;
  border: 2px solid var(--secondary);
  background: var(--gray-1);
  height: 43px;
}

#header-search fieldset input {
  width: 170px;
}

#filters #filter--search div input {
  width: 90%;
}

.icon--cart {
  color: var(--black);
  transition: var(--transition);
}

.icon--cart:hover {
  color: var(--primary);
}

/* FOOTER */

#footer {
  background: var(--gray-2);
}

#footer > div {
  padding: calc(var(--gap)*1.5);
}

#footer h2 {
  font-size: var(--text-m);
}

#footer h3 {
  font-size: var(--text-xs);
}

#footer p {
  font-size: var(--text-xxs);
}

#footer .logo-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: center;
}

#footer .logo--woodland {
  width: 350px;
}

#footer .social-links {
  display: flex;
  gap: var(--gap);
  justify-content: center;
}

#footer .social-links a {
  opacity: 0.75;
}

#footer .social-links .social--instagram:hover,
#footer .social-links .social--facebook:hover,
#footer .social-links .social--linkedin:hover {
  opacity: 1;
}

.footer--wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gap);
}

.footer--buttons {
  margin-bottom: 2rem;
  padding: 0;
}

.footer--buttons .button {
  font-size: var(--text-xs);
  padding: 0.75rem 1rem;
  text-align: center;
}

.wrapper--info {
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: var(--gap-double);
}

.wrapper--info a,
.table--specs a {
  color: var(--black);
  font-size: var(--text-xxs);
}

.wrapper--info a:hover,
.table--specs a:hover {
  color: var(--primary);
}

.wrapper--info {
  margin-top: 2rem;
}

.details--wrapper > div {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--gap-half);
}

.sitemap ul {
  gap: var(--gap-half);
  padding-left: 1rem;
}

.colophon {
  text-align: center;
  padding: var(--gap);
}

.colophon p,
.colophon a {
  color: var(--gray-6);
  font-size: var(--text--xxs);
  margin-bottom: 0;
}
.wrapper--info .details--wrapper.col--2:last-child {
    row-gap: 5rem;
  }
@media screen and (max-width: 1285px) {
  .footer--buttons.col--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .wrapper--info {
    grid-template-columns: 1fr;
    row-gap: 0rem;
  }
  .wrapper--info .details--wrapper.col--2:last-child {
    row-gap: 2rem;
  }
}

@media screen and (max-width: 1020px) {
  .footer--wrapper {
    grid-template-columns: 1fr;
  }
  .wrapper--info {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 450px) {
  .wrapper--info {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 899px) {
  .back-to-top-wrapper {
    display: none !important;
  }
}

@media screen and (min-width: 900px) {
  .back-to-top-wrapper {
    display: block;
    position: absolute;
    top: 100vh;
    right: 0;
    width: 213px;
    pointer-events: none;
    opacity: 0.6;
    transition: 0.3s;
  }
  
  .back-to-top-link {
    position: fixed;
    pointer-events: all;
    bottom: 5rem;
    display: inline-block;
    text-decoration: none;
    font-size: var(--text-s);
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    width: 213px;
    height: 42px;
    background-color: var(--black);
    color: var(--gray-1);
    padding: 0.25rem;
    transform: rotate(-90deg);
    right: -86px;
    bottom: 30vh;
  }
  .back-to-top-wrapper:hover {
    opacity: 1;
  }
}

/* HOME */

.home-hero {
 display: grid;
 align-items: center;
}

@media screen and (max-width: 900px) {
  .home-hero {
    grid-template-columns: 1fr;
  }
}

.home-hero h1 { 
  font-weight: 500;
  margin-top: 1rem;
  font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.3rem) * 1.0135)), 3rem);          /* 36 - 48px */
}

.home-hero video {
  box-shadow: var(--drop-shadow);
}

.home header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap);
  align-items: flex-start;
}

@media screen and (min-width: 1020px) {
  .home header {
    flex-direction: row;
    align-items: center;
  }
}

.home header > div {
  display: flex;
  align-items: baseline;
}

@media screen and (max-width: 899px) {
  .home header > div a {
    display: none;
  }
}

.our-products section,
.new-products section,
.inspiration-gallery section,
.featured-products section {
  display: grid;
}

.product {
  align-items: stretch;
  display: flex;
}

.product > a {
  width: 100%;
}

.product--category-listing {
  transition: var(--transition);
}

.product--category-listing:hover {
  cursor: pointer;
  box-shadow: var(--drop-shadow);
}

.product--category-listing div:first-of-type {
  background: var(--primary);
  height: 375px;
  padding: var(--gap);
  position: relative;
  background-size: cover !important;
  background-position: center center !important;
  -webkit-box-shadow: inset 0px 0px 32px 0px rgba(0,0,0,0.75);
     -moz-box-shadow: inset 0px 0px 32px 0px rgba(0,0,0,0.75);
          box-shadow: inset 0px 0px 32px 0px rgba(0,0,0,0.75);
}

@media screen and (min-width: 1100px) {
  .product--category-listing div:first-of-type {
    height: 685px;
  } 
}

.product--category-listing.stair-parts div {
  background: url('img/stair-parts.jpg');
}

.product--category-listing.mouldings div{
  background: url('img/mouldings.jpg');
}

.product--category-listing.doors div {
  background: url('img/doors.jpg');
}

.product--category-listing.custom div {
  background: url('img/custom.jpg');
}

.product--category-listing h3 {
  color: #fff;
  text-shadow: var(--text-shadow);
  transform: rotate(-90deg);
  transform-origin: left top;
  position: absolute;
  bottom: 0;
  left: 32px;
}

.product--category-listing p a {
  color: #fff;
}

.product--category-listing p a:hover {
  color: var(--primary);
}

.our-products section > div {
  background: var(--black);
  align-items: stretch;
}

.our-products section p {
  padding: 1rem;
  text-align: center;
  color: #fff;
  font-size: var(--text-s);
  margin-bottom: 0;
}

.product a {
  border: 3px solid var(--gray-4);
  background: var(--gray-4);
  text-align: center;
  display: inline-block;
  text-decoration: none;
  transition: var(--transition);
}

.product a:hover {
  border-color: var(--black);
  background-color: var(--black);
}

.product a:hover h3 {
 color: var(--gray-2);
}

.product a:hover .sku {
  color: var(--gray-5);
}

.product--details {
  padding: var(--gap-half);
}

.product img {
  background: #fff;
  transition: var(--transition);
}

.product h3,
.dealer--archive h3,
.distributor--archive h3 {
  font-size: var(--text-xs);
  color: var(--black);
}

.product .sku {
  font-size: var(--text-xxxs);
  color: var(--gray-6);
}

.product a:hover img,
.product a:hover h3,
.product a:hover .sku {
  transition: var(--transition);
}

.product a:hover img {
  box-shadow: var(--drop-shadow--heavy);
}

#product-zoom,
.mz-figure {
  width: 100%;
}

#product-zoom > figure > .product--img {
  max-width: 100% !important;
  max-height: 100% !important;
}

.inspiration-gallery section {
  gap: calc(var(--gap) - 4px);
}

.inspiration-gallery img {
  transition: var(--transition);
  border: 2px solid transparent;
}

.inspiration-gallery img:hover {
  box-shadow: var(--drop-shadow--heavy);
  border-color: #fff;
}

.share-your-space {
  display: block !important;
  background: radial-gradient(123.36% 123.36% at 50% 50%, #FFF 5%, #FBFBFB 17.5%, #333 75%, #E1E1E1 95%, #1E1E1E);
  text-align: center;
  padding: var(--gap);
  margin-top: var(--gap);
}

@media screen and (min-width: 900px) {
  .share-your-space {
    padding: calc(2*var(--gap));
  } 
}

/* Shop */
#breadcrumb,
#breadcrumb a {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray-6);
  font-size: var(--text-xxs);
}

#breadcrumb {
  margin-top: var(--gap-half);
}

#breadcrumb a:hover {
  color: var(--primary);
}

@media screen and (min-width: 900px) {
  .archive--wrapper,
  .dealer--archive--wrapper > div,
  .distributor--archive--wrapper > div {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 275px 3fr;
  }
}

@media screen and (min-width: 1200px) {
  .archive--wrapper,
  .dealer--archive--wrapper > div,
  .distributor--archive--wrapper > div {
    grid-template-columns: 381px 3fr;
  }
}

#filter--toggle {
  margin-bottom: var(--gap-half);
  box-shadow: none;
}

@media screen and (min-width: 900px) {
  #filter--toggle {
    display: none; 
  } 
}

@media screen and (max-width: 899px) {
  #filters--wrapper,
  .callout-box--sidebar {
    display: none;
  }
  
  #filters--form {
    background: var(--gray-1);
    padding: var(--gap-half);
  }
}

@media screen and (max-width: 640px) {
  #filters--form {
    padding: var(--gap-quarter);
  }
}

#filters fieldset,
.doors-page--details fieldset {
  margin-top: calc(var(--gap)*1.5);
  padding: 0;
  border: none;
}

#filters fieldset:first-of-type {
  margin-top: 0;
}

#filters legend,
.filter--species legend,
.doors-page--details legend,
#dealer--location h2,
#distributor--location h2 {
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--text-m);
  color: var(--gray-6);
  margin-bottom: var(--gap-half);
  color: var(--black);
}

#filters legend a,
.doors-page--details legend a {
  text-decoration: none;
  color: var(--black);
}

#filters legend a:hover,
.doors-page--details legend a:hover {
  color: var(--secondary);
}

[class^="filter--"] > div,
.dealer--location--wrapper,
.distributor--location--wrapper,
.doors-page--details [class^="filter--"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-half);
  transition: var(--transition);
}

[class^="filter--"] > div.hidden {
  display: none;
}

#filters [type=checkbox],
.filter--species [type=checkbox],
.doors-page--details [type=checkbox],
.doors-page--details [type=radio],
#filters [type=radio] {
  position: absolute;
  left: -50vw;
}

#filters label:not(.label--custom-input),
.doors-page--details label:not(#quote--contact label):not(.label--custom-input),
.filter--species label,
#dealer--location a,
#distributor--location a,
.doors-page--details input[type="number"],
.doors-page--details input[type="text"] {
  background: var(--gray-1);
  color: #333;
  font-weight: 600;
  text-transform: uppercase;
  border: 2px solid var(--black);
  font-size: var(--text-xxxs);
}

#filters label:not(.label--custom-input),
.doors-page--details label:not(#quote--contact label):not(.label--custom-input),
.filter--species label,
#dealer--location a,
#distributor--location a,
.doors-page--details input[type="number"],
.doors-page--details input[type="text"],
.doors-page--details input[type="tel"],
.doors-page--details input[type="email"] {
  padding: .5rem 1rem;
}

.doors-page--details label:not(#quote--contact label):not(.label--custom-input)[for^="o_glass_options_"] {
	max-width: calc(19% - 8px);
	padding: 0 0 1em 0;
}

@media (max-width: 1162px) {
  .doors-page--details label:not(#quote--contact label):not(.label--custom-input)[for^="o_glass_options_"] {
    max-width: calc(33% - 9px);
  }
}

@media (max-width: 900px) {
  .doors-page--details label:not(#quote--contact label):not(.label--custom-input)[for^="o_glass_options_"] {
    max-width: calc(50% - 8px);
  }
}

@media (max-width: 547px) {
  .doors-page--details label:not(#quote--contact label):not(.label--custom-input)[for^="o_glass_options_"] {
    max-width: calc(50% - 8px);
  }
}

@media (max-width: 414px) {
  .doors-page--details label:not(#quote--contact label):not(.label--custom-input)[for^="o_glass_options_"] {
    max-width: 100%;
  }
}

#filters label,
.doors-page--details label:not(#quote--contact label):not(.filter--glass_options label),
.filter--species label,
#dealer--location a,
#distributor--location a {
  display: inline-block;
}

.doors-page--details .filter--species label {
  min-width: 120px;
  width: 100%;
  max-width: 150px;
  flex-grow: 1;
}

.doors-page--details label span,
.filter--glass_options label,
.filter--etched_glass_patterns label {
  padding: var(--gap-quarter);
}

.doors-page--details label img {
  width: 100%;
}

#filters label:not(.label--custom-input):hover,
.doors-page--details label:not(#quote--contact label):not(.label--custom-input):hover,
.filter--species label:hover,
#dealer--location a:hover,
#distributor--location a:hover {
  cursor: pointer;
  background: var(--gray-4);
}

#filters [type=checkbox]:checked + label,
.doors-page--details [type=checkbox]:checked + label,
.doors-page--details [type=radio]:checked + label,
.filter--species [type=checkbox]:checked + label {
  background: var(--black) !important;
  color: #fff !important;
  transition: 400ms;
}

@media screen and (max-width: 1199px) {
  #header .button--small.button--doors {
     background: var(--gray-8) !important;
     margin-bottom: var(--gap-half);
  }
}

[type=checkbox]:focus + label {
  background: #9cf;
  color: #000;
}

.filter--species,
.filter--design {
  margin-bottom: var(--gap);
}

.filter--species div,
.filter--design div {
  display: flex;
  gap: var(--gap-half);
}

.filter--species div {
  flex-wrap: wrap;
}

.filter--species label {
  padding: 0 !important;
  text-align: center;
  transition: var(--transition);
  max-width: 115px;
}

.filter--species label img,
.filter--design label img {
  margin-bottom: 8px;
}

.filter--species label div {
  display: flex;
  justify-content: space-around;
  margin-bottom: 8px;
}

.filter--species label div span {
  color: var(--gray-6);
}

.filter--species svg {
  transition: var(--transition);
}

.filter--species .species--hardness svg,
.price-and-hardness-scale svg,
.product-page .product--categories span div svg {
  margin-left: -6px;
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 0 #fff);
}

.filter--species .species--hardness svg:first-child,
.price-and-hardness-scale svg:first-child {
  margin-left: 0;
}

.filter--design label,
.filter--glass_options label,
.filter--etched_glass_patterns label {
  text-align: center;
}

#filters [type=checkbox]:checked + label div span,
.doors-page--details [type=checkbox]:checked + label div span,
.filter--species [type=checkbox]:checked + label div span {
  color: #fff;
}

#filters [type=checkbox]:checked + label svg,
.doors-page--details [type=checkbox]:checked + label svg,
.filter--species [type=checkbox]:checked + label svg {
  filter: drop-shadow(1px 0 0 var(--black)) drop-shadow(-1px 0 0 var(--black)) drop-shadow(0 -1px 0 var(--black)) drop-shadow(0 1px 0 var(--black));
}

#filter--submit {
  display: none;
}

#filters #filter--submit.is-filtered {
  display: block;
  text-align:center;
  position:sticky;
  bottom:0px;
  padding: 1rem 2rem;
  font-size: var(--text-m);
  letter-spacing: 1px;
  transition: var(--transition);
}


@media screen and (min-width: 900px) and (max-width: 1200px) {
  #filter--submit input {
    font-size: var(--text-xs);
  }
}

#filter--submit input:hover {
  cursor: pointer;
}

.note--sidebar {
  text-transform: uppercase;
  color: var(--secondary);
  font-weight: 600;
  margin-top: var(--gap);
}

.price-and-hardness-scale {
  display: flex;
  flex-basis: 100%;
  justify-content: space-between;
  margin-top: var(--gap);
}

.price-and-hardness-scale p {
  font-size: var(--text-xxs);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray-6);
}

#s_primed, 
#s_primed + label {
  display: none;
}

@media screen and (min-width: 376px) and (max-width: 719px) {
  .products--archive .col--4,
  .related-products .col--4,
  .recently-viewed-products .col--4 {
    display: grid;
    gap: var(--gap-half);
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 720px) and (max-width: 1200px) {
  .products--archive .col--4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

.products--sorting {
  margin-bottom: var(--gap);
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: var(--gap-half);
}

@media screen and (min-width: 900px) {
  .products--sorting {
    flex-direction: row;
    align-items: center;
  }
}

#products--sort-by {
  display: flex;
  align-items: flex-end;
  gap: var(--gap-half);
}

#products--sort-by span,
#products--sort-by fieldset select,
#filters--form .products--sorting span,
#filters--form fieldset select {
  text-transform: uppercase;
  color: var(--secondary);
  font-weight: 600;
}

#products--sort-by fieldset,
#filters--form fieldset,
.filter--species {
  padding: 0;
  border: none;
}

#products--sort-by fieldset select,
#filters--form fieldset select {
  border: 2px solid var(--secondary);
  background: #fff;
  padding: .5rem 1rem;
}

.pagination {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--gray-6);
  font-weight: 700;
  margin: var(--gap) auto;
}

.pagination a {
  color: var(--black);
}

.product--results {
  font-size: var(--text-s);
  font-weight: bold;
  flex-grow: 1;
}

.recently-viewed-products,
.related-products {
  margin-top: var(--gap-double);
}

.recently-viewed-products h2,
.product--specs h2,
.related-products h2,
.doors-page--details legend {
  font-size: var(--text-xm);
}

.recently-viewed-products h2 + div,
.product--specs h2 + div,
.related-products h2 + div {
  margin-top: var(--gap-half);
}

/* Product Page */

.product img,
.product--img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 1rem;
  background: #fff;
}

.product-page h1 {
  font-size: var(--text-xl);
}

.product-page .product--categories {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--gap-half);
}

.product--specs .product--categories > span,
.product--specs .product--categories > a {
  border: 2px solid var(--black);
  background-color:#fff;
  padding: 4px;
}

.product--specs .product--categories > span {
  max-width: 115px;
  padding: 0px;
}

@media (max-width: 490px) {
  .product-page .product--categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .product--specs .product--categories > span {
    max-width: unset;
  }
}

.doors-page--details .product--specs .product--categories > span { 
  padding: 0px;
}
.product--specs .product--categories > span:hover,
.product-page .product--categories > a:hover {
  background-color: var(--gray-4);
}
.product--specs .product--categories > span.current-product-category,
.product--specs .product--categories > a.current-product-category {
  background-color: #000;
} 
.product-page .product--categories span a {
  display: block;
  text-align: center;
}
.product-page .doors-page--details .product--categories span a {
  height: 100%;
}

.product-page .product--categories span a img {
  margin-bottom: 8px;
}
.product-page .product--categories span div {
  display: flex;
  justify-content: center;
  gap: var(--gap-half);
}

.product-page .product--categories span div {
  color: var(--gray-6);
}
.product-page .product--categories span div span {
  font-size: var(--text-xxxs);
      font-weight: 600;
}
.product-page .product--categories a,
.product--specs .product--categories > a {
  background: transparent;
  color: #333;
  font-weight: 600;
  text-transform: uppercase;  
  display: inline-block;
  font-size: var(--text-xxxs);
  text-decoration: none;
}


.product-page .product--categories span.current-product-category div, .product-page .product--categories span.current-product-category a,
.product--specs .product--categories > a.current-product-category {
  color: #fff;
}

.product-page--media > div {
  position: sticky;
  top: var(--gap);
}

.product-page--media figure,
.product-page--media img {
  box-shadow: var(--drop-shadow);
}
.product--image + .MagicScroll {
  max-height: 95px;
  margin-top: var(--gap-half);
}
.product--image + .MagicScroll .mcs-item {
  padding: 1px;
}
.product--image + .MagicScroll .mcs-item img {
  box-shadow: none;
}
.product--image + .MagicScroll .mcs-item a {
  text-decoration: none !important;
  border: 2px solid var(--black);;
  background-color: #fff;
}
.product--image + .MagicScroll .mcs-item a span.mcs-caption {
  text-transform: uppercase;
  font-family: gotham, 'Helvetica Neue', 'Arial Nova', Helvetica, Arial, sans-serif;
  background-color: #fff;
  font-weight: 600;
  color: var(--black);
  position: relative;
  display: block;
  transform: unset !important;
  -webkit-transform: unset !important;
  z-index: unset !important;
}
.product--image + .MagicScroll .mcs-item a:hover span.mcs-caption, .product--image + .MagicScroll .mcs-item a.mz-thumb-selected span.mcs-caption {
  background-color: var(--black);
  color: #fff;
}
.sl-wrapper .sl-close:before {
  display: block;
  position: static;
  height: 100%;
  transform: scale(.9);
  -webkit-transition: -webkit-transform .25s !important;
  transition: transform .25s !important;
  content: "" !important;
  background-color: currentColor;
  background-image: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yNS4zODQxIDI0LjcyNDFDMjQuOTkzNyAyNC4zMzM0IDI0Ljk5MzkgMjMuNzAwMiAyNS4zODQ3IDIzLjMwOThMMzcgMTEuNzA1MUwzNi4yOTQzIDExTDI0LjY3OTMgMjIuNjA0NEMyNC4yODg2IDIyLjk5NDcgMjMuNjU1NiAyMi45OTQ0IDIzLjI2NTIgMjIuNjAzOEwxMS43MDUyIDExLjAzNjZMMTEgMTEuNzQyMkwyMi41NTkzIDIzLjMwODdDMjIuOTQ5NyAyMy42OTk0IDIyLjk0OTUgMjQuMzMyNiAyMi41NTg4IDI0LjcyM0wxMS4wMzcgMzYuMjM0MkwxMS43NDI3IDM2LjkzOTNMMjMuMjY0MSAyNS40Mjg0QzIzLjY1NDggMjUuMDM4MSAyNC4yODc5IDI1LjAzODMgMjQuNjc4MiAyNS40Mjg5TDM2LjI0MjEgMzdMMzYuOTQ3MiAzNi4yOTQ0TDI1LjM4NDEgMjQuNzI0MVoiIGZpbGw9IiM5OTk5OTkiLz4KPHBhdGggZD0iTTI1LjM4NDEgMjQuNzI0MUMyNC45OTM3IDI0LjMzMzQgMjQuOTkzOSAyMy43MDAyIDI1LjM4NDcgMjMuMzA5OEwzNyAxMS43MDUxTDM2LjI5NDMgMTFMMjQuNjc5MyAyMi42MDQ0QzI0LjI4ODYgMjIuOTk0NyAyMy42NTU2IDIyLjk5NDQgMjMuMjY1MiAyMi42MDM4TDExLjcwNTIgMTEuMDM2NkwxMSAxMS43NDIyTDIyLjU1OTMgMjMuMzA4N0MyMi45NDk3IDIzLjY5OTQgMjIuOTQ5NSAyNC4zMzI2IDIyLjU1ODggMjQuNzIzTDExLjAzNyAzNi4yMzQyTDExLjc0MjcgMzYuOTM5M0wyMy4yNjQxIDI1LjQyODRDMjMuNjU0OCAyNS4wMzgxIDI0LjI4NzkgMjUuMDM4MyAyNC42NzgyIDI1LjQyODlMMzYuMjQyMSAzN0wzNi45NDcyIDM2LjI5NDRMMjUuMzg0MSAyNC43MjQxWiIgc3Ryb2tlPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yNS4zODQxIDI0LjcyNDFDMjQuOTkzNyAyNC4zMzM0IDI0Ljk5MzkgMjMuNzAwMiAyNS4zODQ3IDIzLjMwOThMMzcgMTEuNzA1MUwzNi4yOTQzIDExTDI0LjY3OTMgMjIuNjA0NEMyNC4yODg2IDIyLjk5NDcgMjMuNjU1NiAyMi45OTQ0IDIzLjI2NTIgMjIuNjAzOEwxMS43MDUyIDExLjAzNjZMMTEgMTEuNzQyMkwyMi41NTkzIDIzLjMwODdDMjIuOTQ5NyAyMy42OTk0IDIyLjk0OTUgMjQuMzMyNiAyMi41NTg4IDI0LjcyM0wxMS4wMzcgMzYuMjM0MkwxMS43NDI3IDM2LjkzOTNMMjMuMjY0MSAyNS40Mjg0QzIzLjY1NDggMjUuMDM4MSAyNC4yODc5IDI1LjAzODMgMjQuNjc4MiAyNS40Mjg5TDM2LjI0MjEgMzdMMzYuOTQ3MiAzNi4yOTQ0TDI1LjM4NDEgMjQuNzI0MVoiIGZpbGw9IiM5OTk5OTkiLz4KPHBhdGggZD0iTTI1LjM4NDEgMjQuNzI0MUMyNC45OTM3IDI0LjMzMzQgMjQuOTkzOSAyMy43MDAyIDI1LjM4NDcgMjMuMzA5OEwzNyAxMS43MDUxTDM2LjI5NDMgMTFMMjQuNjc5MyAyMi42MDQ0QzI0LjI4ODYgMjIuOTk0NyAyMy42NTU2IDIyLjk5NDQgMjMuMjY1MiAyMi42MDM4TDExLjcwNTIgMTEuMDM2NkwxMSAxMS43NDIyTDIyLjU1OTMgMjMuMzA4N0MyMi45NDk3IDIzLjY5OTQgMjIuOTQ5NSAyNC4zMzI2IDIyLjU1ODggMjQuNzIzTDExLjAzNyAzNi4yMzQyTDExLjc0MjcgMzYuOTM5M0wyMy4yNjQxIDI1LjQyODRDMjMuNjU0OCAyNS4wMzgxIDI0LjI4NzkgMjUuMDM4MyAyNC42NzgyIDI1LjQyODlMMzYuMjQyMSAzN0wzNi45NDcyIDM2LjI5NDRMMjUuMzg0MSAyNC43MjQxWiIgc3Ryb2tlPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=);
}
.sl-wrapper .sl-close:active:before {
    -webkit-transform: scale(.7) !important;
    transform: scale(.7) !important;
}
.sl-wrapper .sl-close {
  color: rgba(180, 180, 180, .6) !important;
    font-size: 0 !important;
    cursor: pointer;
    z-index: 2100000000 !important;
    background-color: transparent !important;
    border: 0 solid transparent !important;
    border-radius: 100% !important;
    box-shadow: none !important;
    text-transform: none !important;
    text-align: center;
    speak: none;
    width: 60px !important;
    height: 60px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    -webkit-transition: color .25s, background-color .25s !important;
    transition: color .25s, background-color .25s !important;
    overflow: hidden;
}      

    
.product--thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-half);
  margin-top: 1rem;
}

.product--thumbs .mz-thumb {
  opacity: .75;
  border-bottom: 5px solid transparent;
}

.product--thumbs .mz-thumb-selected {
  opacity: 1;
  border-bottom: 5px solid var(--gray-6);
}

.product--thumbs .mz-thumb:hover,
.product--thumbs .mz-thumb:focus {
  border-bottom: 5px solid var(--gray-6);
}

.product--thumbs .mz-thumb.mz-thumb-selected img,
.product--thumbs .mz-thumb:not(.mz-thumb-selected):hover img {
  border-bottom-color: transparent;
}

.mz-image-stage {
  background: #fff;
}

.product--note,
.table--products .s {
  font-size: var(--text-xxxs);
  color: var(--secondary);
  font-weight: 600;
  text-transform: uppercase;
}

.product--note {
  text-align: left;
  margin-top: var(--gap);
}

.product--specs,
.filter--glass_options {
  margin-top: var(--gap) !important;
}

.product--specs + div div {
  margin-top: 0;
}

.tech--specs {
  margin-top: 0;
}

.tech--specs div {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

@media screen and (min-width: 900px) {
  .tech--specs div {
    flex-direction: row;
  }  
}

.tech--specs div span {
  margin-top: 0.5rem;
}

.tech--specs div span a {
  color: var(--gray-6);
  font-size: var(--text-xs);
}

.tech--specs div a:hover {
  color: var(--primary);
}

.table--specs,
.pricing table {
 border-collapse: collapse;
}

.table--specs, 
.table--specs td {
  border: 2px solid var(--gray-5);
}

.table--specs tr,
.pricing table tr {
  background: var(--gray-1);
}

.table--specs tr:nth-child(even),
.pricing table tr:nth-child(even) {
  background: var(--gray-3);
}

.table--specs td,
.pricing table td,
.pricing table th {
  padding: 0.5rem 1rem;
}

.pricing table th {
  text-align: left;
  font-weight: 400;
}

.product--specs h2,
.related-products h2,
.doors-page--details legend {
  color: var(--secondary);
}

.pricing {
  position: sticky;
  top: var(--gap);
}

.pricing,
.pricing form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-half);
}

.pricing,
.mfg-details {
  box-shadow: var(--drop-shadow);
  background: #fff;
  padding: var(--gap);
}

.pricing .pricing--price {
  color: var(--black);
  font-size: var(--text-l);
  font-weight: 700;
}

.pricing .pricing--per,
.pricing .pricing--uom {
  color: var(--secondary);
  font-size: var(--text-m);
  font-weight: 500;
}

.pricing h2 {
  font-size: var(--text-m);
}

.pricing h2 a {
  color: var(--black);
}

.pricing h2 a:hover {
  color: var(--primary);
}

.pricing fieldset {
  display: flex;
  gap: var(--gap-quarter);
}

.pricing .button--small {
  padding: .5rem 1rem;
  font-size: var(--text-s);
}

.pricing .button--small + a {
  display: inline-block;
  color: var(--secondary);
}

.pricing .button--small + a:hover {
  color: var(--primary);
}

.mfg-details h2 {
  font-size: var(--text-xm);
}

.mfg-details p {
  margin-top: var(--gap-half);
  display: block;
  text-align: center;
  font-size: var(--text-xs);
  margin-bottom: 0;
}

.pricing p {
  margin-bottom: 0;
  font-size: var(--text-xs);
}

.mfg-details p,
.mfg-details p a {
  color: var(--gray-6);
}

.pricing p a:hover,
.mfg-details p a:hover {
  color: var(--black);
}

#add-to-order input[type="number"]::-webkit-outer-spin-button,
#add-to-order input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#add-to-order input[type="number"] {
  -moz-appearance: textfield;
  height: 40px;
  width: 72px;
  text-align: center;
  border: 2px solid var(--secondary);
}

#add-to-order .add-to-order--quantity {
  display: inline-block;
  background: var(--secondary);
  color: var(--gray-1);
  padding: 8px 12px;
}

#add-to-order .add-to-order--quantity:hover {
  background: var(--primary);
}

#add-to-order fieldset {
  padding: 0;
  border: none;
}

.table--products {
  width: 100%;
  border-spacing: 0 var(--gap);
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--text-s);
  background: var(--gray-1);
  padding: 0 1rem 1rem 1rem;
  margin-top: 2rem;
  box-shadow: var(--drop-shadow);
}

.table--products th {
  text-align: left;
  background: var(--gray-2);
  height: 70px;
}

.table--products th,
.table--products th a {
  color: var(--secondary);
  text-decoration: none;
}

.table--products th a:hover {
  color: var(--black);
}

@media screen and (max-width: 899px) {
   
  .table--products .table--products--product {
    min-width: 240px;
  }
  
  .table--products .table--products--width,
  .table--products .table--products--height,
  .table--products .table--products--qty {
    min-width: 155px;
  }
  
  .table--products--delete,
  .table--products--duplicate {
    width: 40px;
  }
  
  .table--products--img {
    min-width: 75px;
  }
  
}

.table--products td {
  padding: 1rem;
  margin-bottom: 1rem;
}

.table--products td.table--products--img {
  padding: 0;
}

.table--products--img img {
  box-shadow: var(--drop-shadow);
  background: #fff;
  padding: 1rem;
}

@media screen and (min-width: 900px) {
  .table--products--img {
    width: 144px;
    height: 144px;
    background-position: center center;
  }
}

.table--products--product .sku {
  display: block;
  color: var(--secondary);
  font-size: var(--text-xxs); 
}

.table--products a {
  color: var(--black);
}

.table--products a:hover {
  color: var(--primary);
}

/* Doors */
.doors--archive .filter--species {
  pointer-events: none;
}

/* Static Pages */

.page article {
  padding-bottom: 4rem;
}

.page-content {
  margin-top: 2rem;
}

.page h1,
.page h2, 
.page h3,
.page p {
  max-width: 1080px;
}

.page section h1,
.page section h2, 
.page section h3,
.page section p {
  max-width: 100%;
}

.page h1 {
  margin-bottom: 2rem;
}

.page p {
  margin-top: 1rem;
}

/* .page p:first-of-type {
  margin-top: 0;
} */

.page a {
  color: var(--black);
}

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

#form-contact,
#filters--form #quote--contact {
  background: var(--gray-4);
  padding: var(--gap);
  max-width: 640px;
}

#form-contact {
  margin: var(--gap) auto;
}

#quote--contact {
  margin-top: var(--gap-double);
}

#quote--contact h3 {
  font-size: var(--text-m);
}

#form-contact fieldset,
#quote--contact fieldset {
 border: none; 
}

.form-note {
  font-size: var(--text-s);
  line-height: 1.3;
  font-weight: 400;
  text-transform: initial;
  display: inline-block;
  margin-top: var(--gap-quarter);
}

#form-contact input[type="text"],
#form-contact input[type="tel"],
#form-contact input[type="email"],
#form-contact textarea,
.doors-page--details textarea,
#quote--contact input[type="text"],
#quote--contact input[type="tel"],
#quote--contact input[type="email"],
#quote--contact textarea {
  width: 100%;
  border: 2px solid var(--secondary);
  background: var(--gray-1);
}

#quote--contact .is-error {
  border-color: maroon !important;
}

#form-contact input[type="text"],
#form-contact input[type="tel"],
#form-contact input[type="email"],
#quote--contact input[type="text"],
#quote--contact input[type="tel"],
#quote--contact input[type="email"], {
  height: 43px;
}

#form-contact textarea,
#quote--contact textarea {
  height: 200px;
  display: block;
}

#form-contact input[type="file"],
#quote--contact input[type="file"] {
  border: 2px solid var(--secondary);
  padding: var(--gap-half);
  display: block;
  border-radius: var(--rounded);
  max-width: 100%;
}

#form-contact ul,
#quote--contact ul {
  list-style-type: none;
  padding-left: 0;
}

#form-contact li,
#quote--contact li {
  margin-bottom: var(--gap-half);
}

#form-contact label,
#quote--contact label {
  display: block;
  text-transform: uppercase;
  margin-top: var(--gap-half);
  color: #333;
  font-weight: 600;
  font-size: var(--text-xs);
}

/* Dealers Page */
#dealer--location .sticky,
#distributor--location .sticky {
  position: sticky;
  top: 1rem;
  margin-bottom: 2rem;
}

.dealer--location--wrapper {
  margin-bottom: 2rem;
}

#dealer--location a,
#distributor--location a {
  text-decoration: none;
}

.dealer--archive h2,
.distributor--archive h2 {
  font-size: var(--text-m);
  color: var(--secondary);
}

.dealer--archive h2:not(:first-child),
.distributor--archive h2:not(:first-child) {
  margin-top: 3rem;
}

.dealer--archive .grid,
.distributor--archive .grid {
  margin-top: 1rem;
}

.dealer--archive p,
.distributor--archive p {
  margin-bottom: 0;
  line-height: 1.6;
  font-size: var(--text-xs);
}

.dealer--archive p a:hover,
.distributor--archive p a:hover {
  color: var(--secondary);
}

.dealer--locator {
  margin-top: var(--gap-extra);
}

/* Manufacturer Portal */

.mfg footer {
  display: none;
}

.mfg.login,
.mfg.home,
dialog .login {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mfg.login .colophon,
.mfg.home .colophon {
  order: 5;
}

.mfg .log-in--form,
dialog .log-in--form {
  display: flex;
  gap: var(--gap);
  flex-direction: column;
}

.mfg .log-in--form input[type="text"],
dialog .log-in--form input[type="text"],
.mfg .log-in--form input[type="password"],
dialog .log-in--form input[type="password"] {
  width: 100%;
  padding: var(--gap-quarter);
}

.mfg .log-in--submit button,
dialog .log-in--submit button {
  display: block;
  width: 100%;
}

.mfg.login form,
.mfg.home form,
dialog .login form {
  background: var(--gray-2);
  padding: var(--gap);
  width: 544px;
  margin: 0 auto;
}

.mfg.home form fieldset,
dialog .home form fieldset {
  margin-top: var(--gap);
}

.visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

#mfg-search input,
#mfg-search button {
  border: 0;
  background: none;
}

#mfg-search fieldset {
  display: flex;
  border: 2px solid var(--secondary);
  background: var(--gray-1);
  height: 43px;
}

#mfg-search fieldset input {
  width: 95%;
}

.mfg #header nav ul,
.mfg #header nav aside > a,
.mfg #header .mobile-icon--cart,
.mfg #header .container > button,
.mfg #header #menu-toggle,
.mfg #header nav #logo-icon,
.mfg #header nav #menu-close,
.mfg #header .mobile-icon--cart {
  display: none;
}
.mfg #header {
  justify-content: flex-start;
}  
.mfg #header #logo {
  margin: 0;
  padding: 0;
}
.mfg #header nav {
  position: relative;
  display: flex;
  flex-direction: row;    
  background-color: transparent;
  opacity: 1;
  visibility: visible;    
  padding: 0;
  height: auto;
  overflow: initial;
  transition: none;    
}

.mfg #header aside {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-half);
  padding: var(--gap);
  margin-left: auto;
}

.species--examples {
  grid-column: 1 / -1;
}

.mfg-details p {
  color: unset;
  text-align: unset;
}

.mfg-details ul {
  padding-left: 0.5rem;
}

.mfg-details ul li:not(:last-child) {
  margin-bottom: var(--gap-half);
}

.mfg.login #header nav aside,
.mfg.home #header nav aside {
  display: none;
}

.mfg.login #header,
.mfg.home #header {
  height: 107px;
}


/* Doors */

.filter--design img,
.filter--glass_options img,
.filter--pattern img,
.filter--etched_glass_patterns img,
.filter--sticking img {
  width: 100%;
  object-fit: contain;
  margin: auto;
}

.filter--design img,
.filter--pattern img,
.filter--etched_glass_patterns img,
.filter--sticking img {
  max-width: 300px;
  aspect-ratio: 1/1;
}

.filter--glass_options img {
	aspect-ratio: unset;
	max-width: 100%;
}

.filter--glass_options label,
.filter--sticking label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-half);
  flex-grow: 1;
  flex-shrink: 1;
}

.product-page--details.doors-page--details input[type=radio]:hover,
.product-page--details.doors-page--details label:hover {
  cursor: pointer;
}

.product-page--details.doors-page--details .filter--thickness label,
.product-page--details.doors-page--details .filter--width label,
.product-page--details.doors-page--details .filter--height label,
.product-page--details.doors-page--details .filter--sticking label,
.product-page--details.doors-page--details .filter--door_shape label,
.product-page--details.doors-page--details .filter--top_rail_left__right_stiles label {
  display: flex !important;
  align-items: center;
}

.doors-page--details input[type="number"] {
  width: 90px;
  margin-right: 3px;
}

.doors-page--details:not(.doors-page--request) input[type="number"],
#sticking_custom,
#door_shape_custom,
#top_rail_options_custom {
  width: 145px;
  border-width: 0;
  background: var(--gray-3);
}

.doors-page--details input[type="text"] {
  width: 200px;
}

.filter--details > div {
  width: 100%;
}

.doors-page--details textarea {
  border: 2px solid var(--black);
  width: 100%;
  max-width: 480px;
}

.filter--glass_options label:last-of-type {
  flex-grow: 0;
}

.label--custom-input {
  padding: .5rem 0 .5rem 1rem;
  color: var(--secondary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--text-xxxs);
}

.doors-page--request .table--products td {
  vertical-align: top;
}

.table--products--width span,
.table--products--height span {
  margin-left: 4px;
}

.product--attributes li {
  color: var(--secondary);
}

.product--attributes li span {
  font-size:  var(--text-xxs);
  color: var(--gray-5);
}

.product--specs.tech--specs,
.filter--design_side {
  margin-top: var(--gap) !important;
}

/* Notices */
.success,
.warning,
.error{
  background: white;
  padding: 1rem;
  border-left: 6px solid var(--primary);
  box-shadow: var(--drop-shadow);
  font-weight: bold;
  text-transform: uppercase;
}

#panel_substitution,
#glass_options {
  margin-top: calc(var(--gap)*1.5) !important;
}
.wood-flex-item span {
  text-transform: uppercase;
}
.wood-flex-item .species--price, .wood-flex-item .species--hardness {
  color: var(--gray-6);
  font-weight: 600;
}

/* Dialogs */
dialog {
  border: 0px;
  box-shadow: var(--box-shadow);
  border-radius: var(--rounded);
  padding: var(--gap);
  width: 600px;
}

dialog #close--user, dialog #close--sku {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: var(--base);
  color: var(--secondary);
  display: inline-block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  padding: 0;
  line-height: 42px;
  border: none;
  transition: var(--transition);
}

dialog #close--user:hover, dialog #close--sku:hover {
  background-color: var(--primary);
  cursor: pointer;
}

dialog .svg-inline--fa {
  vertical-align: unset;
}

dialog:not([open]) {
  display: none; 
}
dialog#dialog--sku img {
  margin: 0 auto;
}
::backdrop {
  background: #1E1E1E;
  opacity: 0.9;
}

.user-name {
  margin: 0 auto;
  text-transform: uppercase;
  color: #fff;
  font-size: var(--text-s);
  font-weight: 700;
  max-width: 210px;
}

.user-name a {
  color: var(--gray-6);
}

.user-name a:hover {
  color: var(--primary) !important;
}
.canadian_block {
  text-align: center;
  padding: 20px;
  border: solid 3px var(--black);
  background: var(--gray-2);
}
@media screen and (min-width: 1200px) {
  .user-name {
    color: var(--black);
    font-size: var(--text-xxxs);
    font-weight: 600;
    text-align: right;
  }
}

/* ESTIMATOR PAGE */

.estimator h1 {
  font-size: var(--text-xl);
}
.estimator .estimator-estimate block,
.estimator #filters .estimator-filters legend,
.estimator .filter--species legend {
  color: var(--secondary);
}
.page.estimator article {
  padding-top: 0;
  padding-bottom: 0;
}
#mouldings--form {
  margin-bottom: var(--gap-double);
}
.estimator .filter--species legend {
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--text-m);
}
.estimator #filters fieldset {
  margin-top: 0;
}
.estimator .additional-info {
  grid-column: span 2;
}
.estimator .sub-legend {
  color: var(--secondary);
  margin-bottom: 8px;
  display: block;
  font-size: calc(var(--text-xs) * .7);
  text-transform: uppercase;
  margin-top: 6px;
  font-weight: bold;
}
.estimator .length-feet .sub-legend {
  margin-top: -20px;
}
.estimator .length-feet {
  position: relative;
}
.estimator .length-feet legend:before {
  content: "OR";
  position: absolute;
  top: -10;
  left: -100px;
  font-size: 25px;
  color: #d3d3d3;
}
.estimator .example-wrapper {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.estimator .example-wrapper img {
  aspect-ratio: 1;
  width: 100%;
  max-width: 60px;
}
.estimator .filter-repeater-buttons {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-top: 1rem;
}
.estimator .filter-repeater-buttons button {
  color: #fff;
  font-weight: bold;
  background-color: #000;
  padding: 4px 8px;
  border: 0;
}
.estimator .filter-repeater-buttons button:hover {
  cursor: pointer;
      background: var(--gray-8);
}
.estimator-estimate block {
  box-shadow: var(--drop-shadow);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  max-width: 400px;
  margin: 0 auto;
  position: sticky;
  top: var(--gap);
}
.estimator-estimate block h2 {
  font-size: 20px;
  font-weight: normal;
}
.estimator-estimate block h2 span {
  font-size: 30px;
}
.estimator-estimate block h2 span, .estimator-estimate block li span {
  color: #000;
  font-weight: bold;
}
.estimator-estimate block label {
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
}
.estimator #filters input[type="number"], .estimator-estimate block input {
  border-width: 0;
  background: var(--gray-3);
  width: 50px;
  padding: 4px;
}
.estimator #filters textarea {
  width: 100%;
  max-width: 500px;
  height: 200px;
}
.estimator-estimate ul li {
  margin-bottom: 0;
}
.estimator-estimate ul {
  margin-bottom: 1rem;
}
.estimator-estimate block .text-xs {
  font-size: calc(var(--text-xs) * .7);
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: bold;
}