/* 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;
}

.grid.col--3 {
  margin-bottom: var(--gap);
}

.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);
  margin-bottom: var(--gap);
}

.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);
  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;
}

/* .button/.button--small/input[type="submit"]'s own `display: inline-block` (an
   author-stylesheet rule) overrides the browser's default `[hidden] { display:
   none }` UA style regardless of selector specificity -- author rules always beat
   user-agent ones. Without this, a button's `hidden` attribute (e.g. btn-save-po,
   btn-continue-po) is silently ignored and it renders even while marked hidden. */
.button[hidden],
.button--small[hidden],
input[type="submit"][hidden] {
  display: 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;
}
/* .dropdown-list — shared by #main-menu-ul and the account dropdown's <ul>
   in <aside>. Both are a top-level <ul> of
   <li><a class="has-dropdown">...</a><ul>...</ul></li> items, so this one
   set of rules resets the list and styles both the top-level link and the
   dropdown-panel links identically for either container. */
#header .dropdown-list {
  list-style: none;
  padding-left: 0;
  text-align: center;
}
#header .dropdown-list ul {
  padding-left: 0;
  list-style-type: none;
}
#header .dropdown-list ul a {
  color: var(--gray-6);
  text-transform: uppercase;
  font-size: var(--text-s);
  text-decoration: none;
  font-weight: 700;
}
#header .dropdown-list > li i {
  display: none;
}

#header .dropdown-list a {
  color: var(--white);
  text-transform: uppercase;
  font-size: var(--text-s);
  text-decoration: none;
  font-weight: 700;
}

#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 .dropdown-list {
    text-align: left;
  }
  #header .dropdown-list > li {
    position: relative;
  }
  #header .dropdown-list > li i {
    display: inline-block;
  }
  #header .dropdown-list > li,
  #header .dropdown-list > 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 — shared by the main nav items and the account menu: both use
     the same <li><a class="has-dropdown">...</a><ul>...</ul></li> shape, so
     one set of rules opens/styles either dropdown panel on hover. */
  #header nav .has-dropdown:hover {
    cursor: pointer;
  }
  #header nav li:has(> .has-dropdown) > ul {
    display: none;
    position: absolute;
    z-index: 100;
    top: 100%;  
    width: 250px;      
    text-transform: uppercase;
  }
  #header nav li:has(> .has-dropdown):hover > ul {
    display: block;
  }
  #header nav li:has(> .has-dropdown) > ul > li {
    display: block;
    background-color: var(--white);
    padding: .5rem 2rem;
  }
  
  #header nav li:has(> .has-dropdown) > ul > li,
  #header nav li:has(> .has-dropdown) > 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;
    position: relative;
  }

  #header .button--small {
    margin-top: 0;
    background: var(--black);
    color: var(--gray-1);
    white-space: nowrap;
  }
  #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,
.icon--quote {
  position: relative;
  display: inline-flex;
  color: var(--black);
  text-decoration: none;
  transition: var(--transition);
  margin-left: 0.5rem;
}

@media screen and (max-width: 1199px) {
  .icon--cart,
  .icon--quote {
    color: var(--white);
    display: flex;
    width: fit-content;
    margin: var(--gap) auto;
  }
}

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

.icon--cart .cart-badge,
.icon--quote .cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: var(--text-xxxs);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* 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;
}

/* The browser's own `[hidden] { display: none }` comes from the user-agent
   stylesheet, which loses to any author `display` declaration regardless of
   specificity - and the rule above sets display:flex on every filter--* element.
   Without this, setting the hidden attribute on one has no visible effect. */
[class^="filter--"][hidden],
.doors-page--details [class^="filter--"][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;
}

/* Sticking and the glass patterns share tile width, breakpoints and padding.
  
   The sticking selector's own Custom option is a text field rather than a
   picture, so it is left to size itself.

   The pictures sit flush with the top of the label (see the margin reset further down),
   so the label's own top padding is what gives them room to breathe. Padding rather than
   a margin on the image: it is identical on every label, so it opens the gap
   and the label grows to suit. Matching the bottom leaves each picture sitting
   evenly in its tile. */
.doors-page--details label:not(#quote--contact label):not(.label--custom-input)[for^="o_glass_options_"],
.doors-page--details label:not(#quote--contact label):not([for$="_custom"])[for^="o_sticking_"],
.doors-page--details label:not(#quote--contact label):not([for$="_custom"])[for^="o_raised_panel_shape_"] {
	max-width: calc(19% - 8px);
	padding: 1em 0;
	overflow-wrap: break-word;
}

@media (max-width: 1162px) {
  .doors-page--details label:not(#quote--contact label):not(.label--custom-input)[for^="o_glass_options_"],
  .doors-page--details label:not(#quote--contact label):not([for$="_custom"])[for^="o_sticking_"],
  .doors-page--details label:not(#quote--contact label):not([for$="_custom"])[for^="o_raised_panel_shape_"] {
    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_"],
  .doors-page--details label:not(#quote--contact label):not([for$="_custom"])[for^="o_sticking_"],
  .doors-page--details label:not(#quote--contact label):not([for$="_custom"])[for^="o_raised_panel_shape_"] {
    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_"],
  .doors-page--details label:not(#quote--contact label):not([for$="_custom"])[for^="o_sticking_"],
  .doors-page--details label:not(#quote--contact label):not([for$="_custom"])[for^="o_raised_panel_shape_"] {
    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_"],
  .doors-page--details label:not(#quote--contact label):not([for$="_custom"])[for^="o_sticking_"],
  .doors-page--details label:not(#quote--contact label):not([for$="_custom"])[for^="o_raised_panel_shape_"] {
    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 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,
#filters [type=radio]: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,
.filter--raised_panel_shape label,
.filter--sticking label {
  text-align: center;
}

#filters [type=checkbox]:checked + label div span,
.doors-page--details [type=checkbox]:checked + label div span,
.doors-page--details [type=radio]: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,
.doors-page--details [type=radio]: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);
}

.pagination--pages {
  display: flex;
  flex-direction: row;
  gap: var(--gap-quarter);
}

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

.pagination .disabled {
  color: var(--gray-5);
}

.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;
}

.products--archive,
.product > a {
  min-width: 0;
}

.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;
}

/* This picker predates dimensionSelector()'s generic radio-tile look (border,
   background, padding on the label itself, shared by every other picker's
   labels) -- its card comes from the wrapping <span> instead (see
   ".product--specs .product--categories > span" above). The generic look's
   selectors carry ID-level specificity via ":not(#quote--contact label)", so
   beating it here needs the #species-cards id rather than more classes or
   !important -- and since no other picker ever renders inside that id, none
   of them can be affected by this. */
#species-cards .product--categories input.dimensionSelector[type=radio] + label {
  display: block;
  text-align: center;
  background: transparent;
  border: none;
  padding: 0;
}
#species-cards .product--categories label {
  height: 100%;
}
#species-cards .product--categories label img {
  margin-bottom: 8px;
}
#species-cards .product--categories label span {
  padding: 0;
}

/* The shared [type=radio] rule hides these off-screen via left:-50vw and
   leaves top unset, so the browser's static-position fallback pins every
   option to the first row once the list wraps -- clicking a later option
   then scrolls to the first row. Give each option its own containing block
   so its radio's position is always its own. */
#species-cards .product--categories > span {
  position: relative;
}
#species-cards .product--categories input[type=radio] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Barn Door's species picker needs the same fix, scoped to
   .doors-page--details since .filter--species is also reused, unrelated, by
   custom-moulding-estimator.inc.php's checkbox filter. */
.doors-page--details .filter--species > div > span {
  position: relative;
}
.doors-page--details .filter--species input[type=radio] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Move the card look (border/background) from the label onto the wrapping
   span so a two-line species name doesn't grow only that row's label out of
   sync with its siblings. The generic label look carries id-level
   specificity (via :not(#quote--contact label)), so !important is needed
   here rather than more classes. */
.doors-page--details .filter--species > div > span {
  border: 2px solid var(--black);
  background-color: #fff;
  padding: 4px;
  max-width: 115px;
}
.doors-page--details .filter--species > div > span:hover {
  background-color: var(--gray-4);
}
.doors-page--details .filter--species label {
  display: block !important;
  background: transparent !important;
  border: none !important;
  height: 100%;
}

/* The shared ".doors-page--details label span" padding is meant for other
   pickers' captions; at this card's narrower 115px width it's enough to
   push the price/hardness diamonds onto a second line, so cancel it. */
.doors-page--details .filter--species label span {
  padding: 0;
}


.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,
#add-to-quote input[type="number"]::-webkit-outer-spin-button,
#add-to-quote input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

/* The +1"/-1" buttons are the only supported way to step this field - the native
   spinner can't move a whole inch reliably (see adjustRailPosition() in products.inc.php). */
.rail-position-input::-webkit-outer-spin-button,
.rail-position-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rail-position-input {
  -moz-appearance: textfield;
}

/* Hides the native spinner on Width/Height/Thickness/Stiles custom fields -
   they use dedicated +/- buttons instead (see adjustCustomDimension()). */
.custom-dimension-input::-webkit-outer-spin-button,
.custom-dimension-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.custom-dimension-input {
  -moz-appearance: textfield;
}

/* Spaces out a Custom field's -/input/+ trio, keeping it one flex item so it
   doesn't wrap apart from the buttons that go with it. */
.custom-dimension-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-half);
}

/* Smaller than the site-wide .button--small - these sit right next to a
   compact number input, so full button padding reads oversized. */
.custom-dimension-controls .button--small,
.rail-position-button {
  padding: .25rem .5rem;
  font-size: var(--text-xxxs);
}

/* Forces the Custom option onto its own row regardless of how many presets
   precede it, without stretching the label itself to the row's full width. */
.dimension-custom-break {
  flex-basis: 100%;
  height: 0;
}

.dimension-range-warning {
  flex-basis: 100%;
}

/* .button--small is the same black as the selected-state label background
   (see the [type=radio]:checked + label rule), so without this the +/-
   buttons disappear into it once Custom is selected. */
.doors-page--details [type=radio]:checked + .label--custom-input .button--small {
  background: var(--gray-1);
  color: var(--black);
}

/* The sitewide :hover rule sets background !important, so it can't be
   overridden directly - an opaque inset shadow visually covers it instead,
   without needing !important ourselves. */
.custom-dimension-controls .button--small:hover {
  box-shadow: inset 0 0 0 100vw var(--gray-4);
  color: var(--black);
}

#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,
#add-to-quote 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;
  padding: 0 1rem;
}

.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);
}

.page a.button,
.page a.button--small {
  color: var(--gray-1);
}

.page a.button:hover,
.page a.button--small:hover {
  color: #fff;
}

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

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

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

#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);
}

.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;
}

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

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

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

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

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

#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;
}

dialog#dialog--user #logo-icon {
  width: 220px;
  align-self: center;
}

.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 */

.cart-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gap) 0;
}

.cart-steps li {
  display: flex;
  align-items: center;
  gap: var(--gap-quarter);
  color: var(--gray-6);
  font-size: var(--text-xxs);
  font-weight: 700;
  text-transform: uppercase;
}

.cart-steps--number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid var(--gray-5);
  color: var(--gray-6);
}

.cart-steps li.is-active {
  color: var(--black);
}

.cart-steps li.is-active .cart-steps--number {
  border-color: var(--secondary);
  color: var(--black);
}

.cart-steps li.is-done .cart-steps--number {
  border-color: var(--secondary);
  background: var(--secondary);
  color: var(--white);
}

/* Order review/details accordion (order-cart.php) */

.order-panel {
  background: var(--gray-1);
  border: 1px solid var(--gray-4);
  border-radius: 4px;
  padding: var(--gap);
  margin-bottom: var(--gap);
}

.order-panel--header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-half);
}

.order-panel--header h3 {
  margin: 0;
}

.order-panel.is-collapsed {
  padding: var(--gap-half) var(--gap);
}

.order-panel.is-collapsed .order-panel--body {
  display: none;
}

.order-panel:not(.is-collapsed) .order-panel--summary {
  display: none;
}

.order-panel--summary {
  display: flex;
  align-items: center;
  gap: var(--gap-half);
  flex-wrap: wrap;
}

.order-panel--summary.is-confirmed-hidden {
  display: none !important;
}

.order-panel--summary-text {
  display: flex;
  align-items: center;
  gap: var(--gap-quarter);
  color: var(--gray-7);
  font-size: var(--text-xxs);
}

.order-panel--summary-text::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--white);
  font-size: var(--text-xxxs);
  flex-shrink: 0;
}

.order-panel--edit {
  font-size: var(--text-xxs);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.order-panel.is-locked {
  opacity: 0.5;
  pointer-events: none;
}

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

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

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

/* Raised panel shapes aren't drawn at a common aspect ratio, so filling the
   tile width would render each at a different height. Scoop's ratio (the
   widest/shortest of the three) is used as the tile shape instead, so every
   shape fills the tile's height and the narrower ones letterbox horizontally.

   Sticking's PNGs carry an opaque white backing, so the checked tile's black
   fill (below) only ever shows around them. These SVGs are transparent, so
   the same backing is drawn in explicitly here to match. */
.filter--raised_panel_shape img {
  aspect-ratio: 208/338;
  background: var(--gray-1);
}

.filter--sticking img,
.filter--raised_panel_shape img {
  max-width: 100%;
}

/* Reset margin (from 'auto' above) so every picture sits at the top of its
   label regardless of caption wrapping and they line up across the row. */
.filter--glass_options img,
.filter--sticking img,
.filter--raised_panel_shape img {
  margin-top: 0;
  margin-bottom: 0;
}

/* Every label is stretched to the tallest in its row, so space-between would drop each
   caption to the bottom and leave a one-line caption floating clear of its own picture.
   Starting from the top keeps each caption directly under its picture and collects the
   row's slack harmlessly at the bottom: lining the pictures up takes priority over
   lining up the text. */
.filter--glass_options label,
.filter--sticking label,
.filter--raised_panel_shape label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  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 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 1rem;
  color: var(--black);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--text-xxxs);
  border: 2px solid var(--black);
}

.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;
}

/* Small inline notice under a qty input, deliberately lighter-weight than
   .error above -- that one's a boxed banner, this is just a line of text. */
.qty-warning {
  color: #b00020;
  font-size: var(--text-xxs);
  margin-top: 0.25rem;
}

.filter--panel_levels,
.filter--glass_options,
.filter--raised_panel_shape {
  margin-top: calc(var(--gap)*1.5) !important;
}

/* Per-panel-level style selectors. The nested fieldsets carry their own legends, so
   the wrapper stays borderless and only supplies spacing.

   [class^="filter--"] > div already makes this a wrapping flex row; the per-level
   selectors need to stack instead. Spacing comes from that rule's gap. */
#panel_levels {
  flex-direction: column;
}

/* "Apply to all panels" sits inline in the top level's legend, after its label. */
.panel-levels--apply-all {
  border: 0;
  margin-left: var(--gap-half);
  padding: .35rem .75rem;
  font-size: calc(var(--text-xxs) * .85);
  letter-spacing: 1px;
  vertical-align: middle;
}
.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;
  max-width: 210px;
}
.canadian_block {
  text-align: center;
  padding: 20px;
  border: solid 3px var(--black);
  background: var(--gray-2);
}
/* 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;
}

.table--products--width input,
.table--products--height input { width: 4rem; }
.js-row-price-error { font-size: 0.85em; margin-top: 0.25em; }

.order-history--order {
    background: var(--gray-1);
    border: 1px solid var(--gray-4);
    border-radius: 4px;
    padding: var(--gap);
    margin-bottom: var(--gap);
}

.order-history--order > summary {
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--text-xs);
    list-style: none;
}

/* Firefox still shows a default marker even with list-style:none on
   older versions -- ::marker covers it, ::-webkit-details-marker
   (already present above) covers Chrome/Safari */
.order-history--order > summary::marker {
    display: none;
    content: "";
}

.order-history--order > summary::-webkit-details-marker {
    display: none;
}

.order-history--order[open] > summary {
    margin-bottom: var(--gap);
    padding-bottom: var(--gap);
    border-bottom: 1px solid var(--gray-4);
}

.order-history--caret {
    transition: var(--transition);
    flex-shrink: 0;
    color: var(--secondary);
}

.order-history--order[open] > summary .order-history--caret {
    transform: rotate(90deg);
}

.contact-details-box {
  background: var(--gray-4);
  padding: var(--gap);
  max-width: 640px;
}

.contact-details-box h3 {
  font-size: var(--text-m);
}

.contact-details-box fieldset {
  border: none;
}

.contact-details-box ul {
  list-style-type: none;
  padding-left: 0;
}

.contact-details-box li {
  margin-bottom: var(--gap-half);
}

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

.input--text {
  width: 100%;
  height: 43px;
  border: 2px solid var(--secondary);
  background: var(--gray-1);
}

.input--textarea {
  width: 100%;
  height: 200px;
  display: block;
  border: 2px solid var(--secondary);
  background: var(--gray-1);
}

.input--file {
  border: 2px solid var(--secondary);
  padding: var(--gap-half);
  display: block;
  max-width: 100%;
}

/* .pricing's own `display: flex` (an author-stylesheet rule) overrides the
   browser's default `[hidden] { display: none }` UA style regardless of
   selector specificity -- author rules always beat user-agent ones. Without
   this, #add-to-quote-fallback's `hidden` attribute is silently ignored and
   it renders alongside #add-to-order-aside instead of only one showing at a
   time (toggled by getPrice() based on whether door-price.php returns a
   price or an error). */
.pricing[hidden] {
  display: none;
}