/*
 * _reviews.css - Opinie o produkcie (modul productcomments) na karcie produktu
 *
 * Markup renderuje hummingbird (themes/hummingbird/modules/productcomments/...),
 * JS = theme.js hummingbird + jquery.rating.plugin (gwiazdki .star / .star-on).
 * Przeniesione z Centrobruk (export-opinie-productcomments, 2026-09-03) i dostosowane
 * do tokenow tego projektu: interakcje = --wh-color-accent, gwiazdki = --wh-color-star,
 * radius/duration z tokenow. Ladowany w "all" (decyzja CCC w theme.yml) - kazdy
 * selektor z prefiksem #product (body id karty produktu), wiec nie wycieka.
 *
 * Co naprawia / dostosowuje:
 *  1. Gwiazdki: hummingbird uzywa sprite'a ../img-dist/*.png, ktorego nie ma w kopii
 *     assetow child theme (404) i ktory przy rem=10px i tak sie rozjezdza.
 *     Rysujemy gwiazdki maska SVG w kolorze tokenu (bez obrazkow).
 *  2. Typografia: hummingbird liczy .875rem przy 16px, u nas 1rem=10px -> mikro tekst.
 *  3. Karty opinii, przyciski, modal formularza -> spojne z reszta sklepu (_fashion.css).
 *  4. Paginacja: styl + wsparcie okna 1 2 3 ... 28 29 30 (JS: reviews-pagination.js).
 */

#product {
    --st-star-size: max(16px, 1.6rem);
    --st-star-gap: max(3px, 0.3rem);
    --st-star-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.6l2.85 6.05 6.65.8-4.9 4.6 1.3 6.6L12 17.4l-5.9 3.25 1.3-6.6-4.9-4.6 6.65-.8z'/></svg>");
    /* Kafelek do repeat-x: gwiazdka + odstep w jednym (24 * (1 + 3/16) = 28.5).
       Uzywany przez warstwy ulamkowe .st-stars-ready (reviews-stars.js). */
    --st-star-tile-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.5 24'><path d='M12 2.6l2.85 6.05 6.65.8-4.9 4.6 1.3 6.6L12 17.4l-5.9 3.25 1.3-6.6-4.9-4.6 6.65-.8z'/></svg>");
}

/* ============================================================
   1. Gwiazdki (jquery.rating: .grade-stars > .star-content > .star/.star-on)
   ============================================================ */
#product .grade-stars {
    position: relative;
    display: inline-block;
    height: var(--st-star-size);
    min-width: calc(5 * var(--st-star-size) + 4 * var(--st-star-gap));
    line-height: 0;
    vertical-align: middle;
}
#product .grade-stars .star-content {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    gap: var(--st-star-gap);
    margin: 0;
}
#product .star-content .star,
#product .star-content .star-on,
#product .star-content .star-hover {
    flex: none;
    width: var(--st-star-size);
    height: var(--st-star-size);
    margin: 0;
    background: none;
    background-color: var(--wh-color-border-subtle, #E0E0E0);
    -webkit-mask-image: var(--st-star-svg);
    mask-image: var(--st-star-svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
#product .star-content .star-on,
#product .star-content .star-hover {
    background-color: var(--wh-color-star, #FFC633);
}

/* --- Ulamkowe zamalowanie (zawsze 5 gwiazdek, np. 3.3 = 3 pelne + 1/3) ---
   Plugin jquery.rating robi gwiazdke czastkowa przez zwezony element + przesuniecie
   sprite'a - z maska SVG (mask-size: contain) wychodzi SKURCZONA gwiazdka zamiast
   przycietej. Zamiast walczyc z pluginem: reviews-stars.js czyta data-grade, ustawia
   --st-stars-full/--st-stars-frac i klase .st-stars-ready; wtedy dzieci pluginu sa
   ukryte, a gwiazdki rysuja DWIE warstwy pseudo z powtarzana maska kafelka
   (gwiazdka+odstep): ::before = 5 szarych (100%), ::after = zlota o szerokosci
   pelne*(rozmiar+odstep) + ulamek*rozmiar (crop od lewej = proporcjonalne wypelnienie).
   Bez JS klasa nie wchodzi -> zostaje render pluginu (graceful). */
#product .grade-stars.st-stars-ready {
    width: calc(5 * var(--st-star-size) + 4 * var(--st-star-gap));
}
#product .grade-stars.st-stars-ready .star-content { display: none; }
#product .grade-stars.st-stars-ready::before,
#product .grade-stars.st-stars-ready::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: var(--wh-color-border-subtle, #E0E0E0);
    -webkit-mask-image: var(--st-star-tile-svg);
    mask-image: var(--st-star-tile-svg);
    -webkit-mask-size: calc(var(--st-star-size) + var(--st-star-gap)) var(--st-star-size);
    mask-size: calc(var(--st-star-size) + var(--st-star-gap)) var(--st-star-size);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-position: left center;
    mask-position: left center;
}
#product .grade-stars.st-stars-ready::before { width: 100%; }
#product .grade-stars.st-stars-ready::after {
    width: calc(
        var(--st-stars-full, 0) * (var(--st-star-size) + var(--st-star-gap))
        + var(--st-stars-frac, 0) * var(--st-star-size)
    );
    background-color: var(--wh-color-star, #FFC633);
}

/* ============================================================
   2. Podsumowanie w price boxie (override tpl: product-additional-info.tpl)
   ============================================================ */
/* Rzad "Udostepnij" nad podsumowaniem: oddech od "Dodaj do koszyka".
   Tu (nie w custom/_product.css), bo _product.css dowozi branza - jest poza repo,
   a ten plik jedzie deployem. */
.page-product .ps-sharebuttons {
    display: flex;
    align-items: center;
    gap: var(--wh-space-sm, 1.2rem);
    margin-top: max(12.5px, 1.25rem);
}
/* Kontener w hummingbird/starterpack = .product__additional-info (Centrobruk mial
   .single-product-price-box) */
#product .product__additional-info .product-comments-additional-info {
    display: flex;
    margin-top: max(18px, 1.8rem);
    padding-top: max(16px, 1.6rem);
    border-top: 1px solid var(--wh-color-border-light, #EEEEEE);
}
#product .st-reviews-summary__link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: max(10px, 1rem);
    color: var(--wh-color-text-primary, #333333);
    text-decoration: none;
    transition: color var(--wh-duration-fast, 0.2s) ease;
}
#product .st-reviews-summary__link:hover,
#product .st-reviews-summary__link:focus-visible {
    color: var(--wh-color-accent, #9e8264);
    text-decoration: none;
}
#product .st-reviews-summary__link .comments-note { gap: max(8px, 0.8rem); }
#product .st-reviews-summary__link .grade-stars { --st-star-size: max(15px, 1.5rem); }
#product .st-reviews-summary__link .average-grade {
    padding: 0;
    font-size: var(--wh-font-size-body, 1.4rem);
    font-weight: var(--wh-font-weight-semibold, 600);
    line-height: 1;
    color: inherit;
}
#product .st-reviews-summary__count {
    font-size: var(--wh-font-size-small, 1.3rem);
    color: var(--wh-color-text-muted, #7A7A7A);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
#product .st-reviews-summary__link:hover .st-reviews-summary__count { color: inherit; }

/* ============================================================
   3. Sekcja listy opinii (naglowek + przycisk w jednym wierszu)
   ============================================================ */
#product .product-comments-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: max(16px, 1.6rem) max(24px, 2.4rem);
    margin: max(60px, 6rem) 0 max(50px, 5rem);
    padding-top: max(40px, 4rem);
    border-top: 1px solid var(--wh-color-border-light, #EEEEEE);
}
#product #product-comments-list-header {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: max(12px, 1.2rem) max(20px, 2rem);
    margin: 0;
    padding: 0;
}
#product #product-comments-list-header .section-title {
    margin: 0 !important;
    font-size: max(26px, 2.6rem) !important;
    font-weight: var(--wh-font-weight-medium, 500) !important;
    line-height: 1.2 !important;
    color: var(--wh-color-text-primary, #333333) !important;
}
#product #product-comments-list-header .comments-note {
    display: inline-flex;
    align-items: center;
    gap: max(8px, 0.8rem);
    padding: max(6px, 0.6rem) max(12px, 1.2rem);
    border: 1px solid var(--wh-color-border-light, #EEEEEE);
    border-radius: var(--wh-radius-pill, 999px);
    background: var(--wh-color-bg-base, #ffffff);
}
#product #product-comments-list-header .average-grade {
    padding: 0;
    font-size: var(--wh-font-size-body, 1.4rem);
    font-weight: var(--wh-font-weight-semibold, 600);
    line-height: 1;
    color: var(--wh-color-text-primary, #333333);
}
#product #product-comments-list-btn-group {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
}
#product #product-comments-list,
#product #product-comments-list-footer,
#product #empty-product-comment {
    flex: 0 0 100%;
    width: 100%;
}

/* Przycisk "Napisz opinie" = wzorzec CTA _fashion.css (outline 2px accent, radius-md);
   nie mozemy dodac klasy w tpl hummingbird, wiec stylujemy po .post-product-comment.
   Tylko w sekcji opinii - w price boxie przy 0 opinii nic sie nie renderuje (override tpl). */
#product .product-comments-wrapper .post-product-comment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: max(9px, 0.9rem);
    padding: max(14px, 1.4rem) max(28px, 2.8rem);
    border: 2px solid var(--wh-color-accent, #9e8264);
    border-radius: var(--wh-radius-md, 0.8rem);
    background-color: transparent;
    color: var(--wh-color-accent, #9e8264);
    font-size: var(--wh-font-size-body, 1.4rem);
    font-weight: var(--wh-font-weight-medium, 500);
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--wh-duration-fast, 0.2s) ease, color var(--wh-duration-fast, 0.2s) ease;
}
#product .product-comments-wrapper .post-product-comment:hover,
#product .product-comments-wrapper .post-product-comment:focus-visible {
    background-color: var(--wh-color-accent, #9e8264);
    color: var(--wh-color-text-inverse, #ffffff);
}

/* Pusty stan (brak opinii): sam przycisk / tekst, bez ramki i paddingu */
#product #empty-product-comment {
    padding: 0 !important;
    margin: 0;
    border: 0;
    background: transparent;
    font-size: var(--wh-font-size-body, 1.4rem);
    color: var(--wh-color-text-muted, #7A7A7A);
    text-align: left;
}

/* ============================================================
   4. Karty opinii
   ============================================================ */
#product #product-comments-list {
    display: flex;
    flex-direction: column;
    gap: max(16px, 1.6rem);
    margin: 0;
}
#product #product-comments-list .comment {
    padding: max(24px, 2.4rem) max(28px, 2.8rem);
    margin: 0;
    border: 1px solid var(--wh-color-border-light, #EEEEEE);
    border-radius: var(--wh-radius-md, 0.8rem);
    background: var(--wh-color-bg-base, #ffffff);
}
#product #product-comments-list .comment__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: max(6px, 0.6rem) max(12px, 1.2rem);
    margin-bottom: max(10px, 1rem);
    font-size: var(--wh-font-size-body, 1.4rem);
}
#product #product-comments-list .comment__author {
    font-weight: var(--wh-font-weight-medium, 500);
    color: var(--wh-color-text-primary, #333333);
}
#product #product-comments-list .comment__date {
    font-size: var(--wh-font-size-small, 1.3rem);
    color: var(--wh-color-text-muted, #7A7A7A);
}
#product #product-comments-list .comment__infos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: max(6px, 0.6rem) max(12px, 1.2rem);
    height: auto;
    min-height: 0;
    margin-bottom: max(10px, 1rem);
}
#product #product-comments-list .comment__infos .grade-stars { margin: 0; }
#product #product-comments-list .comment__title {
    margin: 0;
    font-size: max(15px, 1.5rem);
    font-weight: var(--wh-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--wh-color-text-primary, #333333);
}
#product #product-comments-list .comment__content { margin-bottom: max(16px, 1.6rem); }
#product #product-comments-list .comment__text {
    margin: 0;
    font-size: var(--wh-font-size-body, 1.4rem);
    line-height: 1.7;
    letter-spacing: 0;
    color: var(--wh-color-text-muted, #7A7A7A);
}
#product #product-comments-list .comment__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: max(8px, 0.8rem);
}
#product #product-comments-list .comment__buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: max(6px, 0.6rem);
    padding: max(7px, 0.7rem) max(12px, 1.2rem);
    border: 1px solid var(--wh-color-border-light, #EEEEEE);
    border-radius: var(--wh-radius-md, 0.8rem);
    background: var(--wh-color-bg-base, #ffffff);
    color: var(--wh-color-text-muted, #7A7A7A);
    font-size: var(--wh-font-size-small, 1.3rem);
    font-weight: var(--wh-font-weight-medium, 500);
    line-height: 1;
    transition: border-color var(--wh-duration-fast, 0.2s) ease, color var(--wh-duration-fast, 0.2s) ease;
}
#product #product-comments-list .comment__buttons .btn:hover,
#product #product-comments-list .comment__buttons .btn:focus-visible {
    border-color: var(--wh-color-accent, #9e8264);
    background: var(--wh-color-bg-base, #ffffff);
    color: var(--wh-color-accent, #9e8264);
}
#product #product-comments-list .comment__buttons .report-abuse {
    margin-left: auto;
    border-color: transparent;
}
#product #product-comments-list .comment__buttons .btn .material-icons {
    line-height: 1;
    color: inherit;
}
/* .fs-6 hummingbird = 1rem (10px u nas) i siedzi w @layer utilities z !important,
   wiec podbijamy w tej samej warstwie (pulapka warstw z CLAUDE.md). */
@layer utilities {
    #product #product-comments-list .comment__buttons .btn .material-icons.fs-6 {
        font-size: max(16px, 1.6rem) !important;
    }
    #product #post-product-comment-modal .modal-body .col-sm-2.mb-4 {
        margin-bottom: 0 !important;
    }
}

/* Paginacja (gdy > 5 opinii); okno 1 2 3 ... 28 29 30 robi reviews-pagination.js */
#product #product-comments-list-footer { min-height: 0; margin: 0; }
#product #product-comments-list-pagination .pagination {
    flex-wrap: wrap;
    gap: max(6px, 0.6rem);
    margin: 0;
}
#product #product-comments-list-pagination .page-link {
    min-width: max(36px, 3.6rem);
    height: max(36px, 3.6rem);
    padding: 0 max(10px, 1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wh-color-border-light, #EEEEEE);
    border-radius: var(--wh-radius-md, 0.8rem);
    background: var(--wh-color-bg-base, #ffffff);
    color: var(--wh-color-text-primary, #333333);
    font-size: var(--wh-font-size-small, 1.3rem);
    box-shadow: none;
}
#product #product-comments-list-pagination .page-item.active .page-link,
#product #product-comments-list-pagination .page-link:hover {
    border-color: var(--wh-color-accent, #9e8264);
    background: var(--wh-color-bg-base, #ffffff);
    color: var(--wh-color-accent, #9e8264);
}
#product #product-comments-list-pagination .page-item.disabled .page-link { opacity: 0.4; }
/* Elementy ukryte przez okno paginacji (bootstrap reboot ma [hidden], ale pewniej jawnie) */
#product #product-comments-list-pagination .page-item[hidden] { display: none !important; }
/* Wstawiany przez JS separator "..." - nieklikalny, bez ramki */
#product #product-comments-list-pagination .st-page-ellipsis .page-link {
    border-color: transparent;
    background: transparent;
    color: var(--wh-color-text-muted, #7A7A7A);
    pointer-events: none;
}

/* ============================================================
   5. Modale (formularz opinii + alerty + potwierdzenie zgloszenia)
   Spojne z .modal w _fashion.css (btn-primary solid accent, hover ciemny)
   ============================================================ */
#product .product-comment-modal .modal-dialog { max-width: max(680px, 68rem); }
#product .product-comment-modal .modal-content {
    border: 0;
    border-radius: var(--wh-radius-lg, 1.6rem);
    overflow: hidden;
    background-color: var(--wh-color-bg-base, #ffffff);
    box-shadow: var(--wh-shadow-lg, 0 1rem 4rem rgba(0, 0, 0, 0.18));
}
#product .product-comment-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: max(16px, 1.6rem);
    padding: max(24px, 2.4rem) max(30px, 3rem) max(16px, 1.6rem);
    border-bottom: 1px solid var(--wh-color-border-subtle, #E0E0E0);
}
#product .product-comment-modal .modal-title {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--wh-font-heading, var(--wh-font-body, inherit));
    font-size: max(20px, 2rem);
    font-weight: var(--wh-font-weight-medium, 500);
    line-height: 1.2;
    color: var(--wh-color-text-primary, #333333);
}
#product .product-comment-modal .btn-close {
    width: max(36px, 3.6rem);
    height: max(36px, 3.6rem);
    margin: 0;
    padding: 0;
    background-color: var(--wh-color-bg-subtle, #F8F8F8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%23333333' stroke-width='1.6' stroke-linecap='round' d='M4 4 12 12M12 4 4 12'/%3E%3C/svg%3E") !important;
    background-size: max(14px, 1.4rem) max(14px, 1.4rem);
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--wh-color-border-subtle, #E0E0E0);
    border-radius: 50%;
    opacity: 1;
    flex-shrink: 0;
    transition: background-color var(--wh-duration-fast, 0.2s) ease, border-color var(--wh-duration-fast, 0.2s) ease, transform var(--wh-duration-fast, 0.2s) ease;
}
#product .product-comment-modal .btn-close:hover,
#product .product-comment-modal .btn-close:focus-visible {
    background-color: var(--wh-color-accent, #9e8264);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' d='M4 4 12 12M12 4 4 12'/%3E%3C/svg%3E") !important;
    border-color: var(--wh-color-accent, #9e8264);
    transform: scale(1.08);
    box-shadow: none;
}
#product .product-comment-modal .modal-body {
    padding: max(24px, 2.4rem) max(30px, 3rem);
    font-size: var(--wh-font-size-body, 1.4rem);
    line-height: 1.6;
    color: var(--wh-color-text-muted, #7A7A7A);
}
#product .product-comment-modal .modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: max(12px, 1.2rem);
    padding: max(16px, 1.6rem) max(30px, 3rem) max(24px, 2.4rem);
    border-top: 0;
}
/* Modale alertow/potwierdzen maja tylko przyciski -> do prawej */
#product .product-comment-modal .modal-footer.post-comment-buttons,
#product .product-comment-modal .modal-footer > .post-comment-buttons:only-child {
    justify-content: flex-end;
    margin-left: auto;
}
#product .product-comment-modal .modal-footer .required {
    margin: 0;
    font-size: var(--wh-font-size-small, 1.3rem);
    color: var(--wh-color-text-muted, #7A7A7A);
}
#product .product-comment-modal .modal-footer .required sup { color: var(--wh-color-accent, #9e8264); }

/* Przyciski w modalu -> wzorzec .modal _fashion.css (solid = Wyslij/OK/Tak, outline = Anuluj/Nie) */
#product .product-comment-modal .btn:not(.btn-close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: max(15px, 1.5rem) max(24px, 2.4rem);
    border: 1.5px solid transparent;
    border-radius: var(--wh-radius-md, 0.8rem);
    font-size: var(--wh-font-size-body, 1.4rem);
    font-weight: var(--wh-font-weight-medium, 500);
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--wh-duration-fast, 0.2s) ease, color var(--wh-duration-fast, 0.2s) ease, border-color var(--wh-duration-fast, 0.2s) ease;
}
#product .product-comment-modal .btn-primary {
    background-color: var(--wh-color-accent, #9e8264);
    border-color: var(--wh-color-accent, #9e8264);
    color: var(--wh-color-text-inverse, #ffffff);
}
#product .product-comment-modal .btn-primary:hover,
#product .product-comment-modal .btn-primary:focus-visible {
    background-color: var(--wh-color-text-primary, #40362e);
    border-color: var(--wh-color-text-primary, #40362e);
    color: var(--wh-color-text-inverse, #ffffff);
}
#product .product-comment-modal .btn-outline-primary {
    background-color: transparent;
    border-color: var(--wh-color-border-subtle, #E0E0E0);
    color: var(--wh-color-text-primary, #333333);
}
#product .product-comment-modal .btn-outline-primary:hover,
#product .product-comment-modal .btn-outline-primary:focus-visible {
    background-color: var(--wh-color-bg-subtle, #F8F8F8);
    border-color: var(--wh-color-text-primary, #333333);
    color: var(--wh-color-text-primary, #333333);
}

/* --- Formularz opinii: produkt (miniatura + nazwa), kryteria, pola --- */
#product #post-product-comment-modal .product-cover img {
    width: 100%;
    height: auto;
    border: 1px solid var(--wh-color-border-subtle, #E0E0E0);
    border-radius: var(--wh-radius-md, 0.8rem);
}
#product #post-product-comment-modal .modal-body .h5 {
    margin: 0;
    font-size: max(15px, 1.5rem);
    font-weight: var(--wh-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--wh-color-text-primary, #333333);
}
/* Krotki opis produktu w modalu = szum, klient go zna (jest nad formularzem) */
#product #post-product-comment-modal .modal-body [itemprop="description"] { display: none; }
#product #post-product-comment-modal .modal-body .col-sm-10 {
    display: flex;
    align-items: center;
}
/* Ramki w modalu: --wh-color-border-subtle jak separator naglowka. #EEEEEE przy 1px
   i skalowaniu ekranu (125%) wyglada jak linia przerywana (antyaliasing). */
#product #criterions_list {
    list-style: none;
    margin: max(24px, 2.4rem) 0 max(32px, 3.2rem);
    padding: max(16px, 1.6rem) max(20px, 2rem);
    border: 1px solid var(--wh-color-border-subtle, #E0E0E0);
    border-radius: var(--wh-radius-md, 0.8rem);
}
#product #criterions_list .star-rating-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: max(8px, 0.8rem) max(16px, 1.6rem);
    margin: 0;
    padding: 0;
    border: 0;
}
#product #criterions_list .star-rating-group legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: var(--wh-font-size-body, 1.4rem);
    font-weight: var(--wh-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--wh-color-text-primary, #333333);
}
#product #criterions_list .stars-selector {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: max(4px, 0.4rem);
    min-height: 0;
    margin: 0;
    padding: 0;
}
#product #criterions_list .stars-selector .invalid-feedback {
    flex: 0 0 100%;
    font-size: var(--wh-font-size-small, 1.3rem);
}
/* Wybor oceny: label = gwiazdka (maska SVG). Domyslnie szare; po zaznaczeniu
   gwiazdki do wybranej sa w kolorze --wh-color-star, dalsze szare; hover = podglad. */
#product #criterions_list .stars-selector__input-label {
    width: max(26px, 2.6rem);
    height: max(26px, 2.6rem);
    background: none;
    background-color: var(--wh-color-border-subtle, #E0E0E0);
    -webkit-mask-image: var(--st-star-svg);
    mask-image: var(--st-star-svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    cursor: pointer;
    transition: background-color var(--wh-duration-fast, 0.15s) ease, transform var(--wh-duration-fast, 0.15s) ease;
}
#product #criterions_list .stars-selector:has(.stars-selector__input:checked) .stars-selector__input-label {
    background-color: var(--wh-color-star, #FFC633);
}
#product #criterions_list .stars-selector .stars-selector__input:checked + .stars-selector__input-label ~ .stars-selector__input-label {
    background-color: var(--wh-color-border-subtle, #E0E0E0);
}
#product #criterions_list .stars-selector:hover .stars-selector__input-label {
    background-color: var(--wh-color-star, #FFC633);
}
#product #criterions_list .stars-selector .stars-selector__input-label:hover ~ .stars-selector__input-label {
    background-color: var(--wh-color-border-subtle, #E0E0E0);
}
#product #criterions_list .stars-selector .stars-selector__input-label:hover { transform: scale(1.12); }
#product #criterions_list .stars-selector .stars-selector__input:focus-visible + .stars-selector__input-label {
    outline: 2px solid var(--wh-color-accent, #9e8264);
    outline-offset: 2px;
    border-radius: var(--wh-radius-sm, 4px);
}
#product #criterions_list .stars-selector:has(.stars-selector__input:focus-visible) { box-shadow: none; }

/* Pola tekstowe: styl .form-control z motywu; tu tylko odstepy i kolory ramek */
#product #post-product-comment-modal .form-label,
#product #post-product-comment-modal .form-label.required {
    margin-bottom: max(6px, 0.6rem);
}
#product #post-product-comment-modal .form-control {
    padding-top: max(6px, 0.6rem);
    border-bottom-color: var(--wh-color-border-subtle, #E0E0E0);
}
#product #post-product-comment-modal .form-control:focus {
    border-bottom-color: var(--wh-color-accent, #9e8264);
}
#product #post-product-comment-modal .modal-body > .row + .row { margin-top: max(8px, 0.8rem); }
/* Bez gutterow BS: pola w .row (tytul + imie) wyrownane do textarea "Tresc opinii" */
#product #post-product-comment-modal .modal-body > .row { --bs-gutter-x: 0; }
#product #post-product-comment-modal .modal-body > .row > .col-sm-4,
#product #post-product-comment-modal .modal-body > .row > .col-sm-10 { padding-left: max(24px, 2.4rem); }
#product #post-product-comment-modal textarea.form-control {
    min-height: max(110px, 11rem);
    resize: vertical;
    line-height: 1.6;
}
#product #post-product-comment-modal .mb-3 { margin-bottom: max(20px, 2rem) !important; }

/* ============================================================
   6. Responsywnosc
   ============================================================ */
@media screen and (max-width: 767px) {
    #product .product-comments-wrapper {
        margin-top: max(40px, 4rem);
        padding-top: max(30px, 3rem);
    }
    #product #product-comments-list-header .section-title { font-size: max(22px, 2.2rem) !important; }
    #product #product-comments-list-btn-group { flex: 0 0 100%; margin: 0; }
    #product .product-comments-wrapper .post-product-comment { width: 100%; }
    #product #product-comments-list .comment { padding: max(18px, 1.8rem) max(18px, 1.8rem); }
    #product #product-comments-list .comment__buttons .report-abuse { margin-left: 0; }
    #product .product-comment-modal .modal-header,
    #product .product-comment-modal .modal-body { padding-left: max(20px, 2rem); padding-right: max(20px, 2rem); }
    #product .product-comment-modal .modal-footer { padding: max(12px, 1.2rem) max(20px, 2rem) max(20px, 2rem); }
    #product .product-comment-modal .modal-footer .post-comment-buttons { width: 100%; }
    #product .product-comment-modal .modal-footer .btn:not(.btn-close) { flex: 1 1 auto; }
    #product #criterions_list .star-rating-group { justify-content: flex-start; }
}