/*
===================================
CUSTOM COLOR SAMPLES - CSS INDEX
===================================
1. General Configuration
2. Calculator
3. Responsive
==================================
*/

/*
==================================
1. GENERAL CONFIG
==================================
*/

#js-PROD .t-main-content-element {
    max-width: 60rem;
}

#js-PROD .o-layout--wide > .o-layout__item {
  padding-left: var(--default-spacing-unit);
}

#js-PROD .__pdf-icon {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 144-208 0c-35.3 0-64 28.7-64 64l0 144-48 0c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zM176 352l32 0c30.9 0 56 25.1 56 56s-25.1 56-56 56l-16 0 0 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48 0-80c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24l-16 0 0 48 16 0zm96-80l32 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-32 0c-8.8 0-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16l0-64c0-8.8-7.2-16-16-16l-16 0 0 96 16 0zm80-112c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32 32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-64 0-64z"/></svg>');
  background-size: 16px;
  background-repeat: no-repeat;
  display: inline-block;
  line-height: 1.2;
  margin: 0 0 0 2px;
  min-height: 16px;
  min-width: 16px;
  padding: 0 0 0 26px;
}

.x-product-layout-purchase {
  padding-left: var(--default-spacing-unit);
}

.x-product-layout-purchase__name {
  /* margin-bottom: 1rem; */
  margin-bottom: 1rem;
  color: var(--blue-400);
}

.x-product-layout-purchase__short-description {
  max-width: none;
  width: auto;
  padding: 1rem 0;
  border-top: 1px solid var(--gray-400);
  border-bottom: 1px solid var(--gray-400);
  margin-bottom: 1rem !important;
  margin-top: 1.25rem !important;
  /* margin-top: 0.25rem !important; */
}

.x-product-layout-purchase__option .c-form-label {
  font-weight: var(--font-bold);
}

.x-product-layout-purchase__cta .x-product-button__add .c-button {
  background-color: var(--red-400);
}

[data-tab-component] [role=tabpanel] {
  max-width: 60rem;
}

.x-product-layout-images {
  padding-left: 16px;
}

.x-product-layout-images__figure {
  border-radius: var(--default-border-radius);
  overflow: hidden;
}

.x-filmstrip-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.x-filmstrip__image {
  border-radius: var(--small-border-radius);
}

#js-short_description ul {
 font-size: 14px !important;
 margin-bottom: 0;
}

.x-quantify {
  width: 100%;
  border-radius: var(--small-border-radius);
}

[data-tab-component] [role=tab] {
  font-weight: var(--font-bold);
}

[data-filmstrip-controls] button {
  color: #575a5d;
  background-color: var(--white);
}

.x-photo-viewer {
  backdrop-filter: blur(0.25rem) !important;
}

.x-photo-viewer:before {
  background-color: rgb(255 255 255 / 20%) !important;
}

.x-photo-viewer__header, .x-photo-viewer__controls {
  background-color: var(--blue-400);
}

.x-photo-viewer__title {
  margin-bottom: 1rem !important;
}

.x-photo-viewer__close {
  margin: 1rem 2rem 1rem 0.5em !important;
}

.request-more-button {
  width: 100%;
  background-color: var(--red-400);
  font-size: 1rem;
}

.tab-techdata__container p, .tab-safetydata__container p {
  margin-top: 0 !important;
}

.tab-techdata__text, .tab-safetydata__text {
  margin-bottom: 2rem;
}

.x-product-layout-purchase__pricing-contact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.x-product-layout-purchase__pricing-contact:hover svg, .x-product-layout-purchase__pricing-contact:active svg, .x-product-layout-purchase__pricing-contact:focus svg {
  fill: var(--red-400);
}

.x-product-layout-purchase__pricing-contact-text {
  font-weight: var(--font-medium);
  font-size: var(--subheading-small);
}

.x-product-layout-purchase__pricing-contact svg {
  width: 0.75rem;
}

#js-PROD .x-product-layout-purchase__swatches {
  max-height: 380px;
  overflow-y: auto;
  height: 380px;
  margin-bottom: 24px;
}

#js-PROD ul.o-list-inline {
  display: flex;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  margin-bottom: 0 !important;
}

#js-PROD li.o-list-inline__item {
  margin-bottom: 1rem;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75px;
  gap: 10px;
}

.x-product-layout-purchase__swatches button {
  cursor: pointer;
}

.x-product-layout-purchase__swatches img {
  width: 72px;
  height: 72px;
  border-radius: var(--small-border-radius);
}

.x-product-layout-purchase__swatches--active {
  border-radius: var(--small-border-radius);
}

.dc_swatch_name {
  font-size: 10px;
  font-family: var(--primary-font-family);
  font-weight: 600;
  line-height: 1;
}

.special-note {
  border: 2px solid var(--red-400);
  background-color: #ffffff;
  color: var(--red-400);
  padding: 15px;
  margin-top: 24px !important;
  font-weight: bold;
  text-align: center;
}

.special-note p {
  margin: 0;
}

#quick-facts h2 {
  font-weight: 700;
  color: var(--blue-400);
  padding-top: 18px;
}

#quick-facts table {
  border-collapse: collapse;
}

#quick-facts table tr td {
  border: 1px solid rgb(204, 204, 204);
  padding: 16px 8px;
}

#product-discounts:empty {
  display: none;
}

.x-product-description {
  padding-top: calc(var(--default-spacing-unit)* 1);
}

/*
==================================
2. CALCULATOR
==================================
*/

.attr-calculator__lbs-needed {
    font-size: 1.75rem;
}

.attribute_calc_items input, .attribute_calc_items select{
  padding: 0.75rem !important;
}

.attribute_calc_items--select {
  display:block;
  width: 100%;
}

.attribute_calculator_submit {
  background-color: var(--red-400);
}

.attribute_calc {
  padding: 0;
}

.attribute_calculator_result {
  padding: 0;
  margin-top: 2rem !important;
}

.attribute_calc_title.c-heading-echo {
  font-size: 1.25rem;
}

.attr-calculator__image {
  width: 75px;
  height: 75px;
}

/*
==================================
3. RESPONSIVE
==================================
*/

@media (max-width: 40em) {
  .x-product-description {
    padding-top: calc(var(--default-spacing-unit)* 1);
  }

  [data-tab-component] [role=tab]::after {
    font-weight: var(--font-medium);
  }
}

@media only screen and (min-width: 29.999em) {
  #js-PROD .x-product-layout-purchase__swatches {
    margin-left: 0;
    margin-right: 0;
    width: 446px;
    max-width: 446px;
    margin-right: auto;
    margin-left: auto;
  }

  #js-PROD li.o-list-inline__item {
    width: 94px;
  }

  .x-product-layout-purchase__swatches img {
    width: 92px;
    height: 92px;
  }

  .dc_swatch_name {
    font-size: 11px;
  }
}

@media (min-width: 40em) {
  .attribute_calc_items--select {
    width: 80%;
  }
  .attribute_calculator_result {
    margin-top: 0 !important;
  }
  .attribute_calc_title.c-heading-echo {
    font-size: var(--title-three);
  }
}

@media (min-width: 75em) {
  .x-product-layout-purchase__options, .x-product-layout-purchase__cta {
    max-width: none;
    width: auto;
  }
}