#youcan-section--product-reviews{
  --section-border:1px solid color-mix(in srgb, currentColor 8%, transparent);
}
#youcan-section--product-reviews:not(:first-of-type) yc-section{
  border-block-start:var(--section-border);
}
#youcan-section--product-reviews:first-of-type yc-section{
  border-block-end:var(--section-border);
}

yc-reviews{
  display:grid;
  grid-gap:var(--gap-xl);
  gap:var(--gap-xl);
}
yc-reviews .rating-area{
  display:grid;
  grid-gap:var(--gap-xl);
  gap:var(--gap-xl);
  width:50%;
}
yc-reviews .rating-area .total{
  display:flex;
  gap:var(--gap-2xl);
  align-items:center;
}
yc-reviews .rating-area .total .visual .average{
  text-align:center;
}
yc-reviews .rating-area .total .visual .count{
  display:flex;
  gap:var(--gap-sm);
  flex-direction:column;
}
yc-reviews .rating-area .total .visual .count .stars{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-yellow-500);
}
yc-reviews .rating-area .total .visual .count .nbr{
  display:flex;
  gap:var(--gap-xs);
  align-items:center;
  justify-content:center;
  font-size:var(--text-md);
  color:rgba(var(--section-text-color), 70%);
}
yc-reviews .rating-area .total .graph{
  width:100%;
  display:flex;
  gap:var(--gap-sm);
  flex-direction:column-reverse;
}
yc-reviews .rating-area .total .graph .bar{
  display:flex;
  align-items:center;
  gap:var(--gap-md);
  position:relative;
}
yc-reviews .rating-area .total .graph .bar svg{
  color:var(--color-yellow-500);
}
yc-reviews .rating-area .total .graph .bar span{
  width:12px;
  text-align:center;
  font-size:var(--text-sm);
}
yc-reviews .rating-area .total .graph .bar span:last-child{
  min-width:25px;
  font-size:var(--text-xs);
  color:rgba(var(--section-text-color), 70%);
}
yc-reviews .rating-area .total .graph .bar .process{
  height:3px;
  width:100%;
  display:block;
  position:relative;
  border-radius:var(--product-card-border-radius);
  background-color:rgba(var(--section-text-color), 8%);
}
yc-reviews .rating-area .total .graph .bar .process::before{
  content:"";
  inset:0;
  height:3px;
  position:absolute;
  border-radius:var(--product-card-border-radius);
  width:calc(0 * 1%);
  width:calc(var(--rating-count, 0) * 1%);
  background-color:rgb(var(--section-text-color));
  transition:var(--transition-duration-normal);
}
yc-reviews .rating-area .filter{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap-md);
  align-items:center;
}
yc-reviews .rating-area .filter label{
  cursor:pointer;
  padding:6px 12px;
  font-size:var(--text-sm);
  border-radius:calc(var(--button-border-radius) * 0.66);
}
yc-reviews .rating-area .filter label svg{
  color:var(--color-yellow-500);
}
yc-reviews .rating-area .filter label input[type=radio]{
  width:0;
  height:0;
  opacity:0;
  position:absolute;
}
yc-reviews .rating-area .filter label:has(input:disabled){
  opacity:0.5;
  cursor:not-allowed;
}
yc-reviews .rating-area .filter label:has(input:checked){
  color:var(--section-bg-color);
  border-color:rgb(var(--section-text-color));
  background-color:rgb(var(--section-text-color));
}
yc-reviews .reviews-area .review-card{
  min-width:0;
  padding:1.5em;
  display:flex;
  gap:var(--gap-lg);
  flex-direction:column;
  border-radius:var(--product-card-border-radius);
  border:1px solid rgba(var(--section-text-color), 8%);
}
yc-reviews .reviews-area .review-card .info{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
yc-reviews .reviews-area .review-card .info .author{
  display:grid;
  grid-gap:var(--gap-xs);
  gap:var(--gap-xs);
}
yc-reviews .reviews-area .review-card .info .author .name{
  display:flex;
  gap:var(--gap-sm);
  font-size:var(--text-md);
}
yc-reviews .reviews-area .review-card .info .author .date{
  font-size:var(--text-sm);
  color:rgba(var(--section-text-color), 70%);
}
yc-reviews .reviews-area .review-card .info .rate{
  display:flex;
  align-items:center;
  font-size:var(--text-sm);
}
yc-reviews .reviews-area .review-card .info .rate svg{
  color:var(--color-yellow-500);
}
yc-reviews .reviews-area .review-card .content{
  display:grid;
  grid-gap:var(--gap-lg);
  gap:var(--gap-lg);
}
yc-reviews .reviews-area .review-card .content p{
  width:100%;
  font-size:var(--text-sm);
  color:rgba(var(--section-text-color), 70%);
  word-break:break-all;
  white-space:normal;
}
yc-reviews .reviews-area .review-card .content .images{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--gap-md);
  padding-block-start:var(--gap-lg);
  border-block-start:1px solid rgba(var(--section-text-color), 8%);
}
yc-reviews .reviews-area .review-card .content .images button[data-image]{
  padding:2px;
  border-radius:calc(var(--button-border-radius) * 0.66);
}
yc-reviews .reviews-area .review-card .content .images button[data-image]:nth-child(n+4){
  display:none;
}
yc-reviews .reviews-area .review-card .content .images button[data-image] img{
  width:50px;
  height:50px;
  -o-object-fit:cover;
     object-fit:cover;
  border-radius:calc(var(--button-border-radius) * 0.66);
  transition:var(--transition-duration-normal);
}
yc-reviews .reviews-area .review-card .content .images button[data-image]:hover img{
  filter:blur(1px);
}
yc-reviews .reviews-area .review-card .content .images:not(:has(button:nth-child(n+4))) label{
  display:none;
}
yc-reviews .reviews-area .review-card .content .images label{
  width:56px;
  height:56px;
  cursor:pointer;
  font-size:var(--text-sm);
  border-radius:calc(var(--button-border-radius) * 0.66);
}
yc-reviews .reviews-area .review-card .content .images label input[type=checkbox]{
  width:0;
  height:0;
  opacity:0;
  position:absolute;
}
yc-reviews .reviews-area .review-card .content .images:has(label input:checked) label{
  display:none;
}
yc-reviews .reviews-area .review-card .content .images:has(label input:checked) button[data-image]:nth-child(n+4){
  display:flex;
}
yc-reviews .reviews-area .review-card .content .image-preview{
  padding:1em;
  display:grid;
  grid-gap:var(--gap-xl);
  gap:var(--gap-xl);
}
yc-reviews .reviews-area .review-card .content .image-preview button.icon{
  z-index:2;
  padding:8px;
  position:absolute;
  inset-inline-end:2em;
  inset-block-start:2em;
  background-color:var(--section-bg-color);
}
yc-reviews .reviews-area .review-card .content .image-preview .preview-core{
  height:400px;
  position:relative;
}
yc-reviews .reviews-area .review-card .content .image-preview .preview-core img{
  width:100%;
  -o-object-fit:cover;
     object-fit:cover;
  border-radius:calc(var(--product-card-border-radius) * 0.66);
}
yc-reviews .reviews-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
yc-reviews .reviews-actions button:only-child{
  margin:0 auto;
}
yc-reviews .reviews-actions button[data-show-more],
yc-reviews .reviews-actions .action button[data-trigger]{
  padding:8px 15px;
}
yc-reviews .reviews-actions:has(button[data-show-more][hidden]){
  justify-content:center;
}
yc-reviews:has(input[value="1"][name=rating-type]:checked) .reviews-area .review-card:not([data-ratings="1"]){
  display:none;
}
yc-reviews:has(input[value="2"][name=rating-type]:checked) .reviews-area .review-card:not([data-ratings="2"]){
  display:none;
}
yc-reviews:has(input[value="3"][name=rating-type]:checked) .reviews-area .review-card:not([data-ratings="3"]){
  display:none;
}
yc-reviews:has(input[value="4"][name=rating-type]:checked) .reviews-area .review-card:not([data-ratings="4"]){
  display:none;
}
yc-reviews:has(input[value="5"][name=rating-type]:checked) .reviews-area .review-card:not([data-ratings="5"]){
  display:none;
}

@media (max-width: 1024px){
  yc-reviews .rating-area{
    width:100%;
  }
}
@media (max-width: 768px){
  yc-reviews .rating-area .total{
    display:grid;
  }
  yc-reviews .rating-area .total .visual{
    display:flex;
    gap:var(--gap-md);
    align-items:center;
    justify-content:center;
  }
  yc-reviews .rating-area .total .visual .count .stars{
    justify-content:start;
  }
  yc-reviews .rating-area .total .visual .count .nbr{
    display:block;
  }
  yc-reviews .review-card .content .image-preview{
    padding-block-start:0 !important;
  }
  yc-reviews .review-card .content .image-preview button.icon{
    display:none;
  }
}