@layer sections{
  [ui-section=reviews]{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--spacing-32);
  }
  [ui-section=reviews] .items{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    width:100%;
    grid-gap:var(--spacing-24);
    gap:var(--spacing-24);
  }
  [ui-section=reviews] .items [ui-block=review],
  [ui-section=reviews] .items .skeleton-item{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    overflow:hidden;
    border-radius:var(--radius-review);
  }
  [ui-section=reviews] .items [ui-block=review] .media,
  [ui-section=reviews] .items .skeleton-item .media{
    height:100%;
    aspect-ratio:1/1;
  }
  [ui-section=reviews] .items [ui-block=review] .media > img,
  [ui-section=reviews] .items .skeleton-item .media > img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  [ui-section=reviews] .items [ui-block=review] .content,
  [ui-section=reviews] .items .skeleton-item .content{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:var(--spacing-24);
    gap:var(--spacing-16);
  }
  [ui-section=reviews] .items [ui-block=review] .content .core,
  [ui-section=reviews] .items .skeleton-item .content .core{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-16);
  }
  [ui-section=reviews] .items [ui-block=review] .content .core article,
  [ui-section=reviews] .items .skeleton-item .content .core article{
    display:-webkit-box;
    overflow:hidden;
    color:var(--color-on-surface-variant);
    word-break:break-all;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:8;
    line-clamp:8;
  }
  [ui-section=reviews] .items [ui-block=review] .content .core .images,
  [ui-section=reviews] .items .skeleton-item .content .core .images{
    display:flex;
    flex-wrap:wrap;
    gap:var(--spacing-8);
  }
  [ui-section=reviews] .items [ui-block=review] .content .core .images .image,
  [ui-section=reviews] .items .skeleton-item .content .core .images .image{
    width:var(--spacing-48);
    height:var(--spacing-48);
    overflow:hidden;
    border-radius:calc(var(--radius-testimonial) * 0.6);
  }
  [ui-section=reviews] .items [ui-block=review] .content .core .images .image > img,
  [ui-section=reviews] .items .skeleton-item .content .core .images .image > img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  [ui-section=reviews] .items [ui-block=review] .content .author,
  [ui-section=reviews] .items .skeleton-item .content .author{
    padding-block-start:var(--spacing-16);
    border-block-start:1px solid var(--color-surface-variant);
  }
  [ui-section=reviews] .items [ui-block=review][ui-block=review] .content,
  [ui-section=reviews] .items .skeleton-item[ui-block=review] .content{
    background-color:var(--color-surface-container-low);
  }
  [ui-section=reviews] [ui-slot=head]{
    width:100%;
  }
  [ui-section=reviews] [ui-slot=head] .overview{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--spacing-16);
    margin-block-start:var(--spacing-16);
  }
  [ui-section=reviews] [ui-slot=head] .overview .rating .total{
    font:var(--font-display-md);
  }
  [ui-section=reviews] [ui-slot=head] .overview .rating .stars{
    display:grid;
    grid-gap:var(--spacing-4);
    gap:var(--spacing-4);
  }
  [ui-section=reviews] [ui-slot=head] .overview .states{
    display:flex;
    flex-direction:column-reverse;
    gap:var(--spacing-8);
    width:380px;
  }
  [ui-section=reviews] [ui-slot=head] .overview .states .state{
    display:flex;
    align-items:center;
    gap:var(--spacing-8);
  }
  [ui-section=reviews] [ui-slot=head] .overview .states .state svg{
    color:#f6b51e;
  }
  [ui-section=reviews] [ui-slot=head] .overview .states .state span{
    width:10px;
  }
  [ui-section=reviews] [ui-slot=head] .overview .states .state progress{
    width:100%;
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body]{
    display:grid;
    grid-gap:var(--spacing-16);
    gap:var(--spacing-16);
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .field{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--spacing-8);
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .field [ui-slot=input],
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .field [ui-slot=textarea]{
    width:100%;
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields{
    display:grid;
    grid-gap:var(--spacing-16);
    gap:var(--spacing-16);
    grid-template-columns:repeat(2, 1fr);
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field:last-child, [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field:nth-last-child(2), [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field:nth-last-child(3){
    grid-column:1/3;
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field .images{
    display:flex;
    flex-wrap:wrap;
    gap:var(--spacing-8);
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field .images .upload{
    position:relative;
    width:60px;
    height:60px !important;
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field .images .upload > input[type=file]{
    position:absolute;
    border-radius:var(--radius-sm);
    opacity:0;
    scale:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field .images .image{
    position:relative;
    height:60px;
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field .images .image > img{
    border-radius:var(--radius-button);
    -o-object-fit:cover;
       object-fit:cover;
    box-shadow:var(--shadow-lg);
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field .images .image > button{
    position:absolute;
    z-index:2;
    inset-inline-end:calc(var(--spacing-4) * -1);
    inset-block-start:calc(var(--spacing-4) * -1);
    background-color:color-mix(in srgb, currentcolor 15%, transparent) !important;
  }
  @media (max-width: 1280px){
    [ui-section=reviews] .items{
      grid-template-columns:1fr;
    }
  }
  @media (max-width: 769px){
    [ui-section=reviews] [ui-slot=head] .overview{
      width:100%;
    }
    [ui-section=reviews] [ui-slot=head] .overview .states{
      width:100%;
    }
    [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields{
      display:flex;
      flex-direction:column;
    }
    [ui-section=reviews] .items .skeleton-item,
    [ui-section=reviews] .items [ui-block=review]{
      display:flex;
      flex-direction:column-reverse;
    }
  }
}

@layer sections {
  [ui-section=reviews] { max-width: 1380px; margin-inline: auto; padding-inline: 20px; }
  [ui-section=reviews] .items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  [ui-section=reviews] .items [ui-block=review],
  [ui-section=reviews] .items .skeleton-item { display: flex; flex-direction: column; min-width: 0; border: 1px solid #f5d8e5; border-radius: 16px; background: #fff6f9; box-shadow: 0 10px 28px rgba(91, 29, 57, .05); }
  [ui-section=reviews] .items [ui-block=review] .media,
  [ui-section=reviews] .items .skeleton-item .media { order: -1; width: calc(100% - 24px); height: auto; aspect-ratio: 1; margin: 12px 12px 0; overflow: hidden; border-radius: 9px; }
  [ui-section=reviews] .items [ui-block=review] .media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  [ui-section=reviews] .items [ui-block=review] .content,
  [ui-section=reviews] .items .skeleton-item .content { flex: 1; padding: 16px; gap: 14px; background: #fff6f9; }
  [ui-section=reviews] .items [ui-block=review] .content .core article { display: block; overflow: visible; color: #332631; font-size: .9rem; line-height: 1.65; word-break: normal; overflow-wrap: anywhere; text-align: start; }
  [ui-section=reviews] .items [ui-block=review] .content [ui-reviews=item-rating] { display: flex; gap: 2px; color: #e64687; }
  [ui-section=reviews] .items [ui-block=review] .content [ui-reviews=item-rating] svg { width: 16px; height: 16px; }
  [ui-section=reviews] .items [ui-block=review] .content .author { margin-top: auto; padding-top: 12px; border-top: 1px solid #f0dce5; color: #84214f; font-size: .82rem; font-weight: 700; text-align: start; }
  [ui-section=reviews] .items [ui-block=review] .content .core .images .image { width: 46px; height: 46px; border-radius: 7px; }
  @media (max-width: 1100px) { [ui-section=reviews] .items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 580px) {
    [ui-section=reviews] { padding-inline: 0; }
    [ui-section=reviews] [ui-slot=head] { padding-inline: 16px; }
    [ui-section=reviews] .items { display: flex; width: 100%; gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 2px 16px 16px; scrollbar-width: none; }
    [ui-section=reviews] .items::-webkit-scrollbar { display: none; }
    [ui-section=reviews] .items [ui-block=review],
    [ui-section=reviews] .items .skeleton-item { flex: 0 0 min(82vw, 320px); scroll-snap-align: start; }
  }
}