/* Custom styles for Clopay collection page */

.product-info-tab-for-item .table-wrap .table-scroll .table-structure {
  overflow-x: scroll;
}

/* Tab Section */

.js-image-match-section {
  --bs-gutter-x: 19px;
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.js-image-match-section > * {
  box-sizing: border-box;
  flex-shrink: 0;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-bottom: 25px;
}

.design-option {
  margin-bottom: 85px;
  line-height: 1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.design-option img {
  width: auto;
  height: auto;
}

.js-product-image-gallery-nav[data-nav-slider-count="1"],
.by-clopay.no--image-by {
  display: none;
}

.js-image-match-section.image-section a {
  background: none;
}

.js-image-match-section.image-section a:hover {
  color: #000;
}

.js-image-match-section.image-section a span:hover {
  color: #fff;
  background: linear-gradient(to bottom, #84329b 0%, #84329b 100%);
}

.single-clopay-tabs {
  border: none;
}

.single-clopay-tabs .tab-accordion__tab {
  border: none;
  border-radius: 0;
  background: #fff;
}

.single-clopay-tabs .tab-accordion__tab:focus {
  border: none;
  border-radius: 0;
  background: linear-gradient(to bottom, #84329b 0%, #84329b 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 2px 2px;
  transition: background-size 0.2s;
}

.single-clopay-tabs .tab-accordion__tab.is-active {
  border: none;
  border-radius: 0;
  background: linear-gradient(to bottom, #84329b 0%, #84329b 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 2px 6px;
  transition: background-size 0.2s;
  color: #000;
}

.single-clopay-tabs .tab-accordion__tab:hover {
  color: #000;
}

.single-clopay-tabs .tab-accordion__tab {
  padding: 15px 30px;
  font-weight: 600;
  color: #7f8387;
}

.single-clopay-tabs table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

.single-clopay-tabs table thead,
.single-clopay-tabs table tbody,
.single-clopay-tabs table tfoot,
.single-clopay-tabs table tr,
.single-clopay-tabs table td,
.single-clopay-tabs table th {
  padding: 10px;
  border-right: 1px solid #ccc;
}

.single-clopay-tabs tr.spec-model-header {
  border: 1px solid #ccc;
}

.masthead  + .product-details{
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) {
  .js-image-match-section {
    --bs-gutter-x: 32px;
  }
}