/* =========================================
   FABRIC CONFIG OFFCANVAS
   Shared by the PDP and free fabric samples page.
========================================= */

.fufu-fabric-config__panel {
  width: min(100%, 40rem);
}

.fufu-fabric-config__body {
  padding: 1.5rem;
  overflow-y: auto;
}

.fufu-fabric-config__footer .fufu-button-green {
  width: 100%;
}

.fufu-fabric-config__footer {
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 2rem 2rem;
}

.fufu-fabric-config__help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--c-turquoise-03);
  text-align: center;
  text-decoration: none;
}

.fufu-fabric-config__help-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
}

.fufu-fabric-config__help-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fufu-fabric-config__help strong {
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.fufu-fabric-config.is-detail-open .fufu-fabric-config__footer {
  display: none;
}

.fufu-fabric-config__group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fufu-fabric-config__group + .fufu-fabric-config__group {
  margin-top: 2rem;
}

.fufu-fabric-config__group-title {
  color: var(--c-turquoise-03);
}

.fufu-fabric-config__group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fufu-fabric-config__head-back {
  display: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-turquoise-03);
  cursor: pointer;
}

.fufu-fabric-config__head-back:hover,
.fufu-fabric-config__head-back:focus {
  background: transparent;
  color: var(--c-turquoise-03);
}

.fufu-fabric-config.is-detail-open .fufu-fabric-config__head {
  justify-content: flex-start;
}

.fufu-fabric-config.is-detail-open .fufu-fabric-config__head-back {
  display: inline-flex;
}

.fufu-fabric-config.is-detail-open .fufu-fabric-config__title,
.fufu-fabric-config.is-detail-open .fufu-fabric-config__close {
  display: none;
}

.fufu-fabric-config__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
}

.fufu-fabric-config__swatch {
  position: relative;
  height: 120px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}

.fufu-fabric-config__swatch:hover,
.fufu-fabric-config__swatch.is-active {
  background: transparent;
  transition:
    inset 350ms ease,
    border-color 350ms ease;
}

.fufu-fabric-config__swatch-border {
  position: absolute;
  inset: 0.25rem;
  z-index: 1;
  border: 1px solid transparent;
  transition:
    inset 350ms ease,
    border-color 350ms ease;
  pointer-events: none;
}

.fufu-fabric-config__swatch:hover .fufu-fabric-config__swatch-border,
.fufu-fabric-config__swatch.is-active .fufu-fabric-config__swatch-border {
  inset: 0;
  border-color: var(--c-turquoise-03);
  padding: 4px;
  background: transparent;
  transition:
    inset 350ms ease,
    border-color 350ms ease;
}

.fufu-fabric-config__swatch-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 4px;
}

.fufu-fabric-config__info {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.fufu-fabric-config__info:hover {
  background: transparent !important;
}

.fufu-fabric-config__info::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z' fill='%23E3E0D6'/%3E%3Cpath d='M9.68457 9.68565C9.9215 8.66452 10.8515 7.95651 11.8989 7.99998C13.0711 7.93506 14.0759 8.82828 14.1489 9.99998C14.1489 11.5039 11.9989 12 11.9989 13M11.9991 16.0015C11.9662 16.0015 11.9346 16.0146 11.9113 16.0379C11.888 16.0612 11.8749 16.0928 11.8749 16.1257V16.1273C11.8753 16.152 11.8831 16.1759 11.8971 16.1962C11.9112 16.2165 11.9309 16.2321 11.9538 16.2412C11.9767 16.2503 12.0018 16.2524 12.0259 16.2472C12.0501 16.2421 12.0721 16.2299 12.0893 16.2123C12.1065 16.1946 12.1182 16.1723 12.1227 16.1481C12.1273 16.1238 12.1245 16.0988 12.1149 16.0761C12.1053 16.0534 12.0891 16.0341 12.0685 16.0205C12.0479 16.007 12.0238 15.9998 11.9991 16' stroke='%23020A0A' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.fufu-fabric-config__body.is-detail-open .fufu-fabric-config__group {
  display: none;
}

.fufu-fabric-config__detail {
  display: block;
}

.fufu-fabric-config__detail[hidden] {
  display: none !important;
}

.fufu-fabric-detail__param {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0;
  border-top: 1px solid var(--c-turquoise-additional-03);
}

.fufu-fabric-detail__param strong {
  text-align: right;
}

.fufu-fabric-detail__params div:last-child {
  border-bottom: 1px solid var(--c-turquoise-additional-03);
}

.data-fabric-detail-content-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.fufu-fabric-detail__params {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.fufu-fabric-detail__param-heading,
.fufu-fabric-detail__description {
  margin-bottom: 0.75rem;
}

.fufu-fabric-detail__type {
  text-transform: uppercase;
}

.fufu-fabric-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.fufu-fabric-detail__image img {
  width: 600px;
  height: 300px;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .fufu-fabric-detail__image img {
    max-height: 200px;
  }

  .fufu-fabric-config__swatch {
    height: unset;
    max-height: 120px;
    aspect-ratio: 1 / 1;
  }

  .fufu-fabric-config__swatch img {
    aspect-ratio: 1 / 1;
  }
}