/* Base grid layout */
.product {
  --sticky-header-offset: calc(var(--header-height) - 1px);
  max-width: 192rem;
  margin-inline: auto;

  @media screen and (min-width: 750px) {
    padding-block: 1.6rem;
    padding-inline: var(--padding-inline);
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }
}

/* Desktop styles */
@media screen and (min-width: 750px) {
  .product {
    grid-column: 2;
  }

  /* Position when there is no media */
  .product.product--media-none,
  .product:has(.product__media:empty) {
    .product-details {
      width: var(--narrow-content-width);
      margin: 0 auto;
    }
  }

  /* Position when there is media */
  .product:not(:has(.product__media:empty)) {

    /* Media on the left side */
    &.product--media-left {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      gap: 1.2rem;

      &:has(.media-gallery--extend) {
        grid-column: 1 / 3;
      }
    }

    /* Media on the right side */
    &.product--media-right {
      grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

      .product__media {
        padding-left: calc(var(--gap, 0) / 2);
        order: 1;
      }

      .product-details {
        padding-right: calc(var(--gap, 0) / 2);
        order: 0;
      }

      &:has(.media-gallery--extend) {
        grid-column: 2 / -1;
      }
    }

    /* Equal width columns */
    &.product--half,
    &.product--half:has(.media-gallery--extend) {
      grid-column: 1 / -1;
      grid-template-columns:
        var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(var(--full-page-grid-central-column-width) / 2) var(--full-page-grid-margin);

      &.product--media-left {
        .product__media {
          grid-column: 2 / 3;

          &:has(.media-gallery--extend) {
            grid-column: 1 / 3;
          }
        }

        .product-details {
          grid-column: 3 / 4;
        }
      }

      &.product--media-right {
        .product__media {
          grid-column: 3 / 4;

          &:has(.media-gallery--extend) {
            grid-column: 3 / -1;
          }
        }

        .product-details {
          grid-column: 2 / 3;
        }
      }
    }
  }

  /* Handle full width section */
  .section--full-width {

    .product:not(:has(.product__media:empty)),
    .product:not(:has(.product__media:empty)) {

      &.product--media-left,
      &.product--media-right {
        grid-column: 1 / -1;
      }

      &.product--half.product--media-left {
        .product__media {
          grid-column: 1 / 3;
        }

        .product-details {
          grid-column: 3 / -1;
        }
      }

      &.product--half.product--media-right {
        .product__media {
          grid-column: 3 / -1;
        }

        .product-details {
          grid-column: 1 / 3;
        }
      }
    }
  }
}

.product__media-gallery {
  max-width: 100%;
}

.product__media-arrows {
  position: absolute;
  right: 3rem;
  bottom: 0rem;
  height: 3rem;
  width: 6rem;
}

/* Wider sidebar for large screens */
@media screen and (min-width: 1200px) {
  .product:not(.product--half, :has(.product__media:empty)).product--media-left {
    grid-template-columns: minmax(var(--sidebar-width), 25vw) auto minmax(var(--sidebar-width), 25vw);
    gap: 1.2rem;

    .product__media {
      grid-column: 1/3;
    }

    .media-gallery--grid {
      display: grid;
      grid-template-columns: minmax(var(--sidebar-width), 25vw) auto;
      gap: 1.2rem;
    }

    .product-details {
      min-width: 35rem;
      height: calc(100dvh - var(--header-height));
      grid-column: 3/4;
    }
  }

  .product:not(.product--half, :has(.product__media:empty)).product--media-right {
    grid-template-columns: 1fr 2fr;
  }
}

.product--limit-details .product-details>.group-block {
  max-width: var(--sidebar-width);
}

.product-description {
  padding-block: 1rem 5rem;

  @media screen and (min-width: 750px) {
    padding-block: 0 11rem;
  }
}

.product-details__size-guide {
  width: 100%;
}

.product-details__size-guide-toggle {
  width: 100%;
  padding-block: 0.5rem 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
  line-height: var(--line-height--body-loose);
  text-transform: uppercase;
  cursor: pointer;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.product-details__size-guide-header {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 0.8rem 0.4rem 0.3rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  z-index: 1;

  &::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--color-accent);
  }
}

.product-details__size-guide-heading {
  position: relative;
  padding-top: 5px;
  font-size: var(--menu-font-xs--size);
  line-height: var(--line-height--heading-tight);
  letter-spacing: var(--letter-spacing--body-tight);
  text-transform: uppercase;
  text-align: center;
}

.product-details__size-guide-close {
  width: 3.4rem;
  height: 3.4rem;
  margin-left: auto;
}

/* content */
.product-details__size-guide-content {
  & .container {
    padding: 0 1.2rem;
    overflow-x: scroll;

    /* pagina 'tabelle taglie' */
    &:has(.gender-section) {
      max-width: min(90svw, 1280px);
      padding: 2.4rem;
      margin: 0 auto;
      background-color: var(--color-white);
    }

    h2 {
      padding-bottom: 0.8rem;
      border-bottom: 2px solid var(--color-border);
    }

    table {
      width: 100%;
      margin: 0.8rem 0 0;
      border-collapse: collapse;
      background-color: var(--color-white);
    }
    
    caption {
      padding-bottom: 0.5rem;
      /* caption-side: bottom;  */
    }

    th {
      padding: 1.2rem 0.8rem;
      font-weight: bold;
      text-align: center;
      background-color: var(--color-foreground);
      color: var(--color-white);
    }
        
    td {
      padding: 1rem 0.8rem;
      text-align: center;
      border-bottom: 1px solid var(--color-border);
    }

    tr:nth-child(even) {
      background-color: var(--color-background);
    }

    tr:hover {
      background-color: var(--color-background);
    }

    .table-wrapper {
      overflow-x: auto;
      margin: 1rem 0;
    }

    .gender-section {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4rem 2.4rem;

      &:not(:first-child) {
        margin-block-start: 3.2rem;
      }
    }

    .gender-column h2 {
      margin-top: 0;
    }
  }

  @media (max-width: 768px) {
    .container .gender-section {
      grid-template-columns: 1fr;
      gap: 3.2rem;
    }
  }
}

.floating-button {
  width: 100%;
  padding-inline: var(--padding-inline);
  background-color: var(--color-background);

  &.is-fixed {
    position: fixed;
    top: calc(var(--header-height) - 2px);
    z-index: var(--layer-sticky);
  }

  .floating-button__wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .floating-button__title {
    width: calc(50% - 1.2rem);
    display: block;
    text-wrap: nowrap;
  }

  .buy-buttons-block--floating {
    width: 50%;
    max-width: 34.5rem;
    padding: 0;
    flex: 0 0 auto;

    .add-to-cart-button--floating {
      width: 100%;
    }
  }
}