[section="product-reviews"] {
  display: grid;
  gap: var(--spacing-12);
}

:is([section="product-reviews"] .section-head):has(ui-add-review) {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }

[section="product-reviews"]:has(.section-core > :last-child:is(template)) {
    gap: var(--spacing-0);
  }

[section="product-reviews"]:has(.section-core > :last-child:is(template)) .section-head {
      background-color: transparent;
    }

:is([section="product-reviews"]:has(.section-core > :last-child:is(template)) .section-head) h2 {
        display: none;
      }

[section="product-reviews"] .section-core {
    display: grid;
    gap: var(--spacing-12);
    grid-template-columns: repeat(4, 1fr);
  }

:is([section="product-reviews"] .section-core) [block="review"] {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--spacing-24);
      padding: var(--spacing-48);
      border-radius: var(--radius-md);
      background-color: var(--color-surface-container-low);
    }

:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .content) p {
          text-wrap: balance;
          word-break: break-all;
        }

:is(:is([section="product-reviews"] .section-core) [block="review"]) .author {
        display: grid;
        gap: var(--spacing-4);
      }

:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .author) .name {
          font: var(--font-title-md);
        }

:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .author) .rating {
          display: flex;
          align-items: center;
          gap: var(--spacing-8);
        }

:is(:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .author) .rating) .stars {
            display: flex;
            align-items: center;
            gap: var(--spacing-2);
            color: var(--color-star);
          }

:is(:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .author) .rating) .value {
            opacity: 0.8;
            font: var(--font-body-sm);
          }

:is(:is([section="product-reviews"] .section-core) [block="review"]) .images {
        display: flex;
        flex-wrap: wrap;
      }

:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .images) > img {
          cursor: pointer;
          border-radius: var(--radius-md);
          object-fit: cover;
          border: 2px solid var(--color-background);
          background-color: var(--color-surface-container-low);
          box-shadow: color-mix(in srgb, currentColor 10%, transparent) 0px 28px 50px 0px;
          transition: var(--transition-expressive-default-spatial);
        }

:is(:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .images) > img):nth-child(odd) {
            rotate: -3deg;
          }

:is(:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .images) > img):nth-child(even) {
            rotate: 3deg;
          }

:is(:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .images) > img):nth-child(2) {
            transform: translateX(-0.5em);
          }

:is(:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .images) > img):nth-child(2):dir(rtl) {
              transform: translateX(0.5em);
            }

:is(:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .images) > img):nth-child(3) {
            transform: translateX(-1em);
          }

:is(:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .images) > img):nth-child(3):dir(rtl) {
              transform: translateX(1em);
            }

:is(:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .images) > img):nth-child(4) {
            transform: translateX(-1.5em);
          }

:is(:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .images) > img):nth-child(4):dir(rtl) {
              transform: translateX(1.5em);
            }

:is(:is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .images) > img):hover {
            scale: 1.05;
            rotate: 0deg;
          }

.skeleton:is(:is([section="product-reviews"] .section-core) [block="review"]) {
        height: 208px;
      }

.skeleton:is(:is([section="product-reviews"] .section-core) [block="review"]) .sk {
          height: 50%;
          overflow: hidden;
          position: relative;
          border-radius: var(--radius-sm);
          background-color: var(--color-surface-container-high);
        }

:is(.skeleton:is(:is([section="product-reviews"] .section-core) [block="review"]) .sk)::before {
            content: "";
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            transform: translateX(-100%);
            background-image: linear-gradient(90deg, transparent, var(--color-surface-container-low), transparent);
            animation: skeleton-loading 1s infinite;

            @keyframes skeleton-loading {
              100% {
                transform: translateX(100%);
              }
            }
          }

.skeleton:is(:is([section="product-reviews"] .section-core) [block="review"]) .content {
          display: grid;
          gap: var(--spacing-4);
        }

:is(:is(.skeleton:is(:is([section="product-reviews"] .section-core) [block="review"]) .content) .sk):last-child {
              width: 70%;
            }

.skeleton:is(:is([section="product-reviews"] .section-core) [block="review"]) .author {
          width: 25%;
        }

:is(:is(.skeleton:is(:is([section="product-reviews"] .section-core) [block="review"]) .author) .rating) .stars {
              gap: var(--spacing-8);
            }

:is(:is(:is(.skeleton:is(:is([section="product-reviews"] .section-core) [block="review"]) .author) .rating) .stars) .sk {
                width: 15px;
                height: 15px;
              }

:is([section="product-reviews"] .section-core):has([block="review"] .images) [block="review"] {
        justify-content: flex-start;
      }

[section="product-reviews"] .show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16);
  }

:is([section="product-reviews"] .show-more) > [ui-link] {
      cursor: pointer;
      user-select: none;
      width: fit-content;
    }

:is([section="product-reviews"] [ui-show-images]):has(.show-content[data-state="open"])::before {
        content: "";
        inset: 0;
        cursor: auto;
        z-index: 9998;
        position: fixed;
        background-color: var(--color-overlay);
      }

:is([section="product-reviews"] [ui-show-images]) .show-content {
      z-index: 9999;
      position: fixed;
      translate: -50% -50%;
      left: 50%;
      inset-block-start: 50%;
      overflow: hidden;
      border-radius: var(--radius-md);
      background-color: var(--color-background);
      width: 500px;
      padding: var(--spacing-12);
      transition: var(--transition-expressive-slow-spatial);
      display: grid;
      gap: var(--spacing-12);
    }

[data-state="closed"]:is(:is([section="product-reviews"] [ui-show-images]) .show-content) {
        opacity: 0;
        visibility: hidden;
        inset-block-start: 55%;
      }

:is(:is([section="product-reviews"] [ui-show-images]) .show-content) .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-12);
        border-radius: var(--radius-md);
        background-color: var(--color-surface-container-low);
      }

:is(:is(:is([section="product-reviews"] [ui-show-images]) .show-content) .head) .title {
          font: var(--font-body-lg);
        }

:is(:is([section="product-reviews"] [ui-show-images]) .show-content) .core {
        display: grid;
        gap: var(--spacing-12);
        padding-block: var(--spacing-24) (--spacing-12);
        position: relative;
      }

:is(:is(:is([section="product-reviews"] [ui-show-images]) .show-content) .core) .images-wrapper {
          display: grid;
          align-items: center;
          gap: var(--spacing-12);
          grid-template-columns: auto 1fr auto;
        }

:is(:is(:is(:is([section="product-reviews"] [ui-show-images]) .show-content) .core) .images-wrapper):not(:has(.images img:nth-child(2))) {
            grid-template-columns: 1fr;
          }

:is(:is(:is(:is([section="product-reviews"] [ui-show-images]) .show-content) .core) .images-wrapper):not(:has(.images img:nth-child(2))) [ui-show-images="arrow"] {
              display: none;
            }

:is(:is(:is(:is([section="product-reviews"] [ui-show-images]) .show-content) .core) .images-wrapper) .images {
            display: flex;
            gap: var(--spacing-8);
            height: 40vh;
            overflow-x: scroll;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            -ms-overflow-style: none;
            -webkit-overflow-scrolling: touch;
          }

:is(:is(:is(:is(:is([section="product-reviews"] [ui-show-images]) .show-content) .core) .images-wrapper) .images) > img {
              min-width: 100%;
              object-fit: cover;
              scroll-snap-align: center;
              scroll-snap-stop: always;
              border-radius: var(--radius-md);
            }

:is(:is(:is(:is(:is([section="product-reviews"] [ui-show-images]) .show-content) .core) .images-wrapper) [ui-show-images="arrow"]):dir(rtl) [ui-icon] {
              rotate: -180deg;
            }

:is(:is(:is([section="product-reviews"] [ui-show-images]) .show-content) .core) .actions {
          display: flex;
          justify-content: center;
        }

/* Responsive */
@media (max-width: 1280px) {
    [section="product-reviews"] .section-core {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 769px) {
      :is([section="product-reviews"] .section-head):has(ui-add-review) {
        justify-content: space-between;
      }
      [section="product-reviews"]:has(.section-core > :last-child:is(template)) .section-head {
        justify-content: center;
      }

    [section="product-reviews"] .section-core {
      grid-template-columns: 1fr;
    }

      :is([section="product-reviews"] .section-core) [block="review"] {
        padding: calc(var(--spacing-24) + var(--spacing-8));
      }
          :is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .author) .name {
            font: var(--font-title-sm);
          }
          :is(:is(:is([section="product-reviews"] .section-core) [block="review"]) .images) > img {
            width: 60px;
            height: 60px;
            border-radius: var(--radius-sm);
          }
      :is([section="product-reviews"] [ui-show-images]) .show-content {
        width: calc(100% - var(--spacing-24));
      }
            :is(:is(:is(:is([section="product-reviews"] [ui-show-images]) .show-content) .core) .images-wrapper) .images {
              height: 35vh;
            }
}