[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;
        }

: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);
          }

.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;
              }

[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;
    }

/* 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);
          }
}