[section="single-product"] {
  display: grid;
  gap: var(--spacing-12);
  grid-template-columns: 60% auto;

  /* Content */
}

[section="single-product"] [block="pd-content"] {
    display: flex;
    gap: var(--spacing-12);
    flex-direction: column;
  }

:is([section="single-product"] [block="pd-content"]) .general-info {
      padding: var(--spacing-48);
      border-radius: var(--radius-md);
      background-color: var(--color-surface-container-low);
      display: grid;
      gap: calc(var(--spacing-48) - var(--spacing-8));
    }

:is(:is([section="single-product"] [block="pd-content"]) .general-info) .price {
        display: flex;
        align-items: center;
        gap: var(--spacing-8);
        font: var(--font-body-lg);
      }

:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .price) .compare-at-price {
          opacity: 0.8;
          text-decoration: line-through;
        }

:is(:is([section="single-product"] [block="pd-content"]) .general-info) .about {
        display: grid;
        gap: var(--spacing-8);
      }

:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .about) .title {
          font: var(--font-display-sm);
        }

:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .about) .subtitle {
          opacity: 0.8;
          font: var(--font-body-lg);
        }

:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .about) * {
          max-width: 100%;
        }

:is(:is([section="single-product"] [block="pd-content"]) .general-info) .inventory {
        display: flex;
        align-items: center;
        gap: var(--spacing-8);
        margin-block-start: calc((var(--spacing-48) - var(--spacing-8)) * -1);
      }

[data-inventory="out-of-stock"]:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .inventory) [ui-icon] {
          color: var(--color-outline);
        }

[data-inventory="low-stock"]:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .inventory) [ui-icon] {
          color: var(--color-error);
        }

[data-inventory="in-stock"]:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .inventory) [ui-icon] {
          color: var(--color-success);
        }

:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .inventory) [data-status] {
          font: var(--font-body-sm);
        }

:is(:is([section="single-product"] [block="pd-content"]) .general-info) .cta {
        display: grid;
        gap: var(--spacing-12);
        grid-template-columns: 165px auto;
      }

:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .cta) .quantity {
          display: flex;
          gap: var(--spacing-8);
        }

:is(:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .cta) .quantity) .value {
            flex: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            background-color: var(--color-background);
            font: var(--font-body-lg);
          }

:is(:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .cta) ui-product-button) [ui-button] {
            width: 100%;
          }

:is(:is(:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .cta) ui-product-button) [ui-button]):empty::before {
              content: attr(data-cta);
            }

:is([not-available]:is(:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .cta) ui-product-button):has([ui-button]:empty) [ui-button])::before {
                content: attr(data-out-of-stock);
              }

:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) article) img,:is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) article) iframe {
          max-width: 100%;
        }

:is([section="single-product"] [block="pd-content"]) .social-info {
      display: grid;
      gap: var(--spacing-12);
      grid-template-columns: repeat(2, 1fr);
    }

@media (min-width: 769px) {
          :is(:is([section="single-product"] [block="pd-content"]) .social-info):not(:has(li:last-child:is(:nth-child(even)))) > li:last-child {
            grid-column: 1 / 3;
          }
      }

/* Media */

[section="single-product"] [block="pd-media"] {
    position: sticky;
    inset-block-start: var(--spacing-12);
    border-radius: var(--radius-md);
    overflow: hidden scroll;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    height: 85vh;
    background-color: var(--color-surface-container);
  }

:is([section="single-product"] [block="pd-media"]):not(:has(.images img:nth-child(2))) {
      overflow: hidden;
    }

:is(:is([section="single-product"] [block="pd-media"]) .images) img {
        width: 100%;
        height: 85vh;
        object-fit: cover;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        border: 1px solid var(--color-surface-container);
      }

:is(:is([section="single-product"] [block="pd-media"]) .images) > [ui-icon] {
        opacity: 0.3;
        position: absolute;
        translate: -50% -50%;
        left: 50%;
        inset-block-start: 50%;
      }

:is([section="single-product"] [block="pd-media"]) .controller {
      position: sticky;
      inset-block-end: var(--spacing-24);
      display: flex;
      justify-content: center;
    }

:is(:is([section="single-product"] [block="pd-media"]) .controller) .controller-wrapper {
        width: fit-content;
        padding: var(--spacing-8);
        border-radius: var(--radius-md);
        background-color: var(--color-background);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-4);
        box-shadow:
          0 4px 6px -1px #0000001a,
          0 2px 4px -2px #0000001a;
      }

:is(:is(:is([section="single-product"] [block="pd-media"]) .controller) .controller-wrapper) > button {
          border: 0;
          outline: 0;
          width: 60px;
          height: 60px;
          cursor: pointer;
          overflow: hidden;
          border-radius: var(--radius-sm);
          box-shadow: inset 0 3px 3px #0000001a;
          transition: var(--transition-standard-default-effects);
        }

:is(:is(:is(:is([section="single-product"] [block="pd-media"]) .controller) .controller-wrapper) > button) img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

[aria-selected="false"]:is(:is(:is(:is([section="single-product"] [block="pd-media"]) .controller) .controller-wrapper) > button) {
            opacity: 0.5;
          }

:is(:is(:is(:is([section="single-product"] [block="pd-media"]) .controller) .controller-wrapper) > button):hover {
            opacity: 1;
          }

:is([section="single-product"] [block="pd-media"]) .pagination {
      position: absolute;
      translate: -50% -50%;
      left: 50%;
      inset-block-end: var(--spacing-16);
      display: none;
      align-items: center;
      gap: var(--spacing-8);
      justify-content: center;
    }

:is(:is([section="single-product"] [block="pd-media"]) .pagination) .page {
        width: 6px;
        height: 6px;
        border: none;
        outline: none;
        cursor: pointer;
        filter: contrast(0);
        border-radius: var(--radius-rounded);
        background-color: var(--color-on-background);
        transition: var(--transition-standard-default-effects);
      }

[aria-selected="true"]:is(:is(:is([section="single-product"] [block="pd-media"]) .pagination) .page) {
          width: 24px;
          filter: contrast(1);
        }

/* Responsive */
@media (max-width: 1024px) {
  [section="single-product"] {
    grid-template-columns: 1fr;
  }

    [section="single-product"] [block="pd-media"] {
      position: relative;
      inset-block-start: auto;
    }
}

@media (max-width: 769px) {
    [section="single-product"] [block="pd-media"] {
      height: 38vh;
    }

      :is([section="single-product"] [block="pd-media"]) .images {
        display: flex;
        overflow: scroll hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
      }

        :is(:is([section="single-product"] [block="pd-media"]) .images) img {
          height: 38vh;
          min-width: 100%;
        }

      :is([section="single-product"] [block="pd-media"]) .controller {
        display: none;
      }

      :is([section="single-product"] [block="pd-media"]) .pagination {
        display: flex;
      }
      :is([section="single-product"] [block="pd-content"]) .general-info {
        padding: calc(var(--spacing-24) + var(--spacing-8));
      }
          :is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .about) .title {
            font: var(--font-title-lg);
          }

          :is(:is(:is([section="single-product"] [block="pd-content"]) .general-info) .about) .subtitle {
            font: var(--font-body-md);
          }

        :is(:is([section="single-product"] [block="pd-content"]) .general-info) .cta {
          display: flex;
          flex-direction: column;
        }

        :is(:is([section="single-product"] [block="pd-content"]) .general-info) [ui-whatsapp] {
          justify-content: center;
        }

      :is([section="single-product"] [block="pd-content"]) .social-info {
        grid-template-columns: 1fr;
      }
}