/* ================================================
   product.css — Product Detail Page Styles
   Details · Reviews · Star Bars · Review List
   ================================================ */

/* ── Product Detail Layout ────────────────── */
.product-detail__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: flex-start;
}
@media (min-width: 768px) { .product-detail__grid { grid-template-columns: repeat(2, 1fr); } }

.product-detail__img-wrap {
    aspect-ratio: 1/1;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
}
.product-detail__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); }
.product-detail__img-wrap:hover .product-detail__img { transform: scale(1.05); }

.product-detail__panel { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 0.5rem; }

.product-detail__name-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
[dir="rtl"] .product-detail__name-row { flex-direction: row-reverse; }
.product-detail__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.15em; }

.product-detail__rating { display: flex; align-items: center; gap: 0.5rem; }
.product-detail__rating-score { font-size: var(--fs-10); color: var(--clr-gray-5); letter-spacing: 0.05em; }
.product-detail__reviews-count { font-size: var(--fs-10); color: var(--clr-gray-6); }

.product-detail__price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.product-detail__price-currency { font-size: 1rem; }

.product-detail__desc { font-size: var(--fs-11); color: var(--clr-gray-5); line-height: 1.9; font-weight: 300; max-width: 22rem; }

.product-detail__size-label { font-size: var(--fs-10); text-transform: uppercase; letter-spacing: 0.3em; color: var(--clr-gray-5); font-weight: 600; margin-bottom: 0.75rem; }

.product-detail__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
[dir="rtl"] .product-detail__actions { flex-direction: row-reverse; }
.product-detail__add-to-cart {
    flex: 1;
    border: 1px solid var(--clr-border-lg);
    color: var(--clr-white);
    background: transparent;
    font-family: var(--font-primary);
    font-size: var(--fs-10);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color var(--t);
    min-width: 120px;
}
.product-detail__add-to-cart:hover { border-color: var(--clr-white); }

.product-detail__wish {
    color: var(--clr-gray-5);
    transition: color var(--t);
    padding: 0.5rem;
}
.product-detail__wish:hover, .product-detail__wish.is-wished { color: var(--clr-maroon); }
.product-detail__wish svg { width: 20px; height: 20px; }

.product-detail__share { display: flex; align-items: center; gap: 0.5rem; color: var(--clr-gray-6); cursor: pointer; transition: color var(--t); width: fit-content; }
.product-detail__share:hover { color: var(--clr-gray-4); }
.product-detail__share svg { width: 16px; height: 16px; }
.product-detail__share-label { font-size: var(--fs-9); text-transform: uppercase; letter-spacing: 0.2em; }

/* ── Reviews Summary ──────────────────────── */
.reviews-summary { border-top: 1px solid var(--clr-border); padding-block: 4rem; }
.reviews-summary__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 768px) { .reviews-summary__grid { grid-template-columns: repeat(2, 1fr); } }

.reviews-overall { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.reviews-overall__score { font-family: var(--font-display); font-size: 3rem; font-weight: 700; }
.reviews-overall__count { font-size: var(--fs-10); color: var(--clr-gray-5); }

.reviews-bars { display: flex; flex-direction: column; gap: 0.75rem; }
.reviews-bars__item { display: flex; align-items: center; gap: 1rem; }
.reviews-bars__label { font-size: var(--fs-10); color: var(--clr-gray-5); width: 3rem; flex-shrink: 0; }
.reviews-bars__track { flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.reviews-bars__fill { height: 100%; background: var(--clr-star); border-radius: 2px; transition: width 0.6s ease; }

/* ── Review List ──────────────────────────── */
.review-list__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
[dir="rtl"] .review-list__header { flex-direction: row-reverse; }
.review-list__title { font-family: var(--font-display); font-size: var(--fs-14); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.review-list__sort { display: flex; align-items: center; gap: 0.5rem; color: var(--clr-gray-5); cursor: pointer; transition: color var(--t); }
.review-list__sort:hover { color: var(--clr-white); }
.review-list__sort-label { font-size: var(--fs-10); text-transform: uppercase; letter-spacing: 0.2em; }
.review-list__sort svg { width: 14px; height: 14px; }

.review-items { display: flex; flex-direction: column; }
.review-item { padding-block: 2rem; border-bottom: 1px solid var(--clr-border); }
.review-item:last-child { border-bottom: none; }
.review-item__inner { display: flex; align-items: flex-start; gap: 1rem; }
[dir="rtl"] .review-item__inner { flex-direction: row-reverse; }

.review-item__avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--clr-gray-5);
}
.review-item__avatar svg { width: 16px; height: 16px; }
.review-item__body { flex: 1; }
.review-item__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
[dir="rtl"] .review-item__top { flex-direction: row-reverse; }
.review-item__name { font-size: var(--fs-11); font-weight: 600; letter-spacing: 0.05em; }
.review-item__date { font-size: var(--fs-9); color: var(--clr-gray-6); }
.review-item__ago  { font-size: var(--fs-9); color: var(--clr-gray-6); }
.review-item__stars { margin-block: 0.5rem; }
.review-item__stars .reviews-score { font-size: var(--fs-9); color: var(--clr-gray-5); margin-left: 0.25rem; }
.review-item__text { font-size: var(--fs-11); color: var(--clr-gray-5); line-height: 1.8; font-weight: 300; }