/* Catalog phase. Load after the shared storefront styles. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.catalog-hub-hero {
  background: linear-gradient(115deg, #042d21 0%, #0a4834 62%, #80652e 140%);
}

.catalog-hub-section,
.catalog-seo {
  padding: clamp(3rem, 6vw, 6rem) 0;
}

.catalog-hub-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  align-items: end;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.catalog-hub-heading h2,
.catalog-list-hero h1,
.catalog-seo h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.catalog-hub-heading h2 {
  font-size: clamp(2.4rem, 4vw, 4rem);
}

.catalog-hub-heading > p {
  margin: 0;
  color: var(--muted);
}

.catalog-direction-card .storefront-card-media {
  min-height: 220px;
}

.catalog-direction-media {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .65rem;
  color: #fff;
  isolation: isolate;
}

.catalog-direction-media::after,
.catalog-card-placeholder::after,
.finish-swatch::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(135deg, rgba(255, 255, 255, .2), transparent 48%, rgba(0, 0, 0, .16));
}

.catalog-direction-media i {
  font-size: 3rem;
}

.catalog-direction-media span {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tone-oak { background: #9a7048; }
.tone-sand { background: #b7a381; }
.tone-green,
.tone-forest { background: #176149; }
.tone-anthracite { background: #515957; }
.tone-rust { background: #905848; }
.tone-navy { background: #405562; }
.tone-mist { background: #8b9b96; }
.tone-black { background: #252a28; }
.tone-cream { background: #c8b898; }
.tone-gold { background: #b7832e; }
.tone-clay { background: #a67560; }

.catalog-direction-footer {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin: .2rem 0 1rem;
  color: var(--muted);
}

.catalog-direction-footer strong {
  color: var(--green-900);
  font-size: 1.35rem;
}

.catalog-list-hero {
  padding: clamp(2rem, 5vw, 4.5rem) 0;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(3, 44, 32, .97), rgba(3, 44, 32, .76) 52%, rgba(3, 44, 32, .34)),
    url("../img/catalog-hero.jpg") center 48% / cover no-repeat;
  border-bottom: 1px solid #ddd5c9;
}

.catalog-list-hero .breadcrumb {
  margin-bottom: 2rem;
}

.catalog-list-hero .breadcrumb,
.catalog-list-hero .breadcrumb a,
.catalog-list-hero .breadcrumb-item.active,
.catalog-list-hero .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, .82);
}

.catalog-list-hero h1 {
  margin-bottom: .75rem;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
}

.catalog-list-hero .lead {
  max-width: 780px;
  margin: 0;
  color: rgba(255, 255, 255, .9);
}

.catalog-list-hero .btn-outline-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, .72);
}

.catalog-list-hero .btn-outline-dark:hover,
.catalog-list-hero .btn-outline-dark:focus-visible {
  color: var(--green-950);
  background: #fff;
  border-color: #fff;
}

.child-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 2rem;
}

.child-category-chips .chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: .55rem .9rem;
  color: var(--green-900);
  text-decoration: none;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #cfc5b5;
  border-radius: 99rem;
}

.child-category-chips .chip:visited {
  color: var(--green-900);
}

.child-category-chips .chip:hover,
.child-category-chips .chip:focus-visible {
  color: #fff;
  text-decoration: none;
  background: var(--green-900);
  border-color: var(--green-900);
}

.child-category-chips button {
  min-height: 42px;
  padding: .55rem .9rem;
  color: var(--green-900);
  white-space: nowrap;
  background: #fff;
  border: 1px solid #cfc5b5;
  border-radius: 99rem;
}

.child-category-chips button:hover {
  color: #fff;
  background: var(--green-900);
  border-color: var(--green-900);
}

.filter-accordion {
  max-height: none;
  overflow: visible;
}

.filter-check {
  grid-template-columns: 20px 1fr auto;
}

.catalog-card {
  position: relative;
}

.catalog-card-badges {
  position: absolute;
  top: .8rem;
  left: .8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}

.catalog-card-badges .product-catalog-badge {
  position: static;
}

.catalog-card-badges .badge-popular {
  color: #fff;
  background: var(--green-700);
}

.catalog-card-placeholder {
  position: relative;
  z-index: 0;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  align-content: center;
  gap: .5rem;
  overflow: hidden;
  color: rgba(255, 255, 255, .92);
  background: linear-gradient(145deg, #a69275, #56685d);
}

.catalog-card-placeholder i {
  font-size: 3.2rem;
}

.catalog-card-placeholder small {
  font-weight: 700;
}

.catalog-card-placeholder.tone-fire-doors { background: linear-gradient(145deg, #8c523d, #3f312e); }
.catalog-card-placeholder.tone-hidden-doors { background: linear-gradient(145deg, #c0ad8b, #6d746f); }
.catalog-card-placeholder.tone-loft-doors { background: linear-gradient(145deg, #48514e, #171b1a); }
.catalog-card-placeholder.tone-wood-windows { background: linear-gradient(145deg, #a67a48, #315b47); }

.product-sku {
  margin: -.55rem 0 .7rem;
  color: #79827e;
  font-size: .75rem;
  letter-spacing: .05em;
}

.catalog-summary {
  color: var(--muted);
  font-size: .92rem;
}

.catalog-price .old-price {
  color: #777;
  text-decoration: line-through;
}

.catalog-price[data-price-mode="request"] strong {
  color: var(--muted);
  font-size: .95rem;
}

.catalog-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
}

.catalog-card-actions .btn {
  min-width: auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

.btn-cart-small {
  color: #fff;
  background: var(--green-900);
  border-color: var(--green-900);
}

.btn-cart-small:hover {
  color: var(--green-900);
  background: transparent;
}

.catalog-seo {
  background: #fff;
  border-top: 1px solid #e0d8cb;
}

.catalog-seo-media {
  margin: 0;
  overflow: hidden;
  background: #ddd8ce;
  border: 1px solid #ddd5c9;
}

.catalog-seo-media img {
  display: block;
  width: 100%;
  height: clamp(240px, 32vw, 360px);
  object-fit: contain;
  background: #fff;
}

.catalog-seo h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 3vw, 3rem);
}

.catalog-seo p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.finishes-section {
  padding: clamp(2.5rem, 5vw, 5rem) 0;
}

.finish-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.finish-toolbar > p {
  margin: 0;
  white-space: nowrap;
}

.finish-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.finish-filters button {
  min-height: 42px;
  padding: .55rem .9rem;
  color: var(--green-900);
  background: transparent;
  border: 1px solid #bdb4a7;
  border-radius: 99rem;
}

.finish-filters button.active {
  color: #fff;
  background: var(--green-900);
  border-color: var(--green-900);
}

.finish-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: 1px solid #d9d0c3;
  border-radius: .25rem;
  transition: transform .2s ease, box-shadow .2s ease;
}

.finish-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 35px rgba(35, 45, 39, .12);
}

.finish-card > i {
  position: absolute;
  top: .8rem;
  right: .8rem;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--green-900);
  background: rgba(255, 255, 255, .9);
  border-radius: 50%;
}

.finish-swatch {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.finish-card-copy {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: 1rem;
}

.finish-card-copy strong,
.finish-card-copy small {
  display: block;
}

.finish-card-copy small {
  color: var(--muted);
}

.swatch-oak { background: repeating-linear-gradient(96deg, #a87849 0 7px, #bf9365 8px 11px, #8f623d 12px 14px); }
.swatch-oak-light { background: repeating-linear-gradient(94deg, #c39b6d 0 9px, #d7b487 10px 13px, #aa8054 14px 16px); }
.swatch-walnut { background: repeating-linear-gradient(98deg, #59402f 0 6px, #79543a 7px 12px, #422f25 13px 15px); }
.swatch-white { background: #f5f2e9; }
.swatch-warm-grey { background: #c8c4b8; }
.swatch-anthracite { background: #444b4d; }
.swatch-black { background: #1c211f; }
.swatch-concrete { background: radial-gradient(circle at 22% 35%, #b9b7b0 0 2px, transparent 3px), radial-gradient(circle at 72% 62%, #94938f 0 1px, transparent 2px), #aaa9a4; background-size: 28px 31px, 19px 23px; }
.swatch-linen { background: repeating-linear-gradient(0deg, rgba(112, 92, 66, .18) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(112, 92, 66, .14) 0 1px, transparent 1px 5px), #d5c8ad; }
.swatch-graphite-oak { background: repeating-linear-gradient(95deg, #3d4441 0 8px, #5d625d 9px 13px, #2f3532 14px 16px); }
.swatch-primer { background: linear-gradient(135deg, #e5e2da, #c9cbc7); }
.swatch-custom { background: conic-gradient(from 45deg, #815d46, #d9a64d, #176149, #586a7a, #815d46); }

.finish-swatch-large {
  height: min(62vh, 560px);
}

.finish-lightbox {
  width: min(92vw, 720px);
  overflow: hidden;
  background: #fff;
}

.finish-lightbox-copy {
  display: grid;
  gap: .35rem;
  padding: 1.1rem 1.25rem 1.35rem;
}

.finish-lightbox-copy strong {
  color: var(--green-950);
  font-size: 1.2rem;
}

.finish-lightbox-copy span {
  color: var(--muted);
  font-size: .92rem;
}

.finish-lightbox-copy small {
  color: #68736e;
  font-size: .82rem;
}

.finish-fancybox .fancybox__content {
  padding: 0;
  background: transparent;
}

.screen-disclaimer {
  display: flex;
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 1.25rem;
  background: #efe9de;
  border-left: 4px solid var(--gold-dark);
}

.screen-disclaimer > i {
  color: var(--green-700);
  font-size: 1.35rem;
}

.screen-disclaimer p {
  margin: .25rem 0 0;
  color: var(--muted);
}

@media (min-width: 1400px) {
  .catalog-grid.list-view .catalog-card {
    grid-template-columns: 300px 1fr;
  }
}

@media (max-width: 991.98px) {
  .catalog-filters .offcanvas-body {
    overflow-y: auto;
    scrollbar-width: none;
  }

  .catalog-filters .offcanvas-body::-webkit-scrollbar {
    display: none;
  }

  .filter-accordion {
    max-height: none;
    overflow: visible;
  }
}

@media (min-width: 992px) {
  .catalog-filters .offcanvas-body {
    overflow: visible;
  }
}

@media (max-width: 767.98px) {
  .catalog-hub-heading {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .catalog-card-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .catalog-card-actions {
    width: 100%;
    justify-content: stretch;
  }

  .catalog-card-actions .btn {
    flex: 1;
  }

  .finish-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .finish-filters {
    width: 100%;
  }

  .finish-swatch {
    height: 160px;
  }

  .finish-card-copy {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 389.98px) {
  .catalog-list-hero h1,
  .catalog-hero h1 {
    overflow-wrap: anywhere;
    font-size: 2.35rem;
  }

  .catalog-toolbar-actions {
    min-width: 0;
  }

  .catalog-card-body {
    padding: 1rem;
  }
}

/* mFilter2 integration */
#mse2_mfilter.loading {
  pointer-events: none;
}

#mse2_mfilter .catalog-filters fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

#mse2_mfilter .filter-check.disabled,
#mse2_mfilter .disabled_fieldsets {
  opacity: .45;
  pointer-events: none;
}

#mse2_mfilter .mse2_number_slider {
  margin: .35rem .35rem 1rem;
}

#mse2_mfilter .ui-slider {
  height: .35rem;
  border: 0;
  background: #d9d1c4;
  border-radius: 50rem;
}

#mse2_mfilter .ui-slider .ui-slider-range {
  background: var(--green-900);
}

#mse2_mfilter .ui-slider .ui-slider-handle {
  width: 1.1rem;
  height: 1.1rem;
  top: 50%;
  margin-top: -.55rem;
  border: 2px solid var(--green-900);
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

#mse2_selected:empty {
  display: none;
}

#mse2_selected a.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
}

#mse2_selected a.active-filter-chip em {
  font-style: normal;
}

.catalog-pagination.mse2_pagination .pagination {
  margin: 2rem 0 0;
  gap: .35rem;
}

.catalog-pagination.mse2_pagination .page-link {
  color: var(--green-900);
  border-color: #d9d1c4;
}

.catalog-pagination.mse2_pagination .active .page-link,
.catalog-pagination.mse2_pagination .page-item.active .page-link {
  color: #fff;
  background: var(--green-900);
  border-color: var(--green-900);
}

#mse2_results.list-view {
  display: block;
}

#mse2_results.list-view > .col {
  width: 100%;
  margin-bottom: 1rem;
}

#mse2_results.list-view > .col > .catalog-card {
  height: 100%;
}