/**
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://devdocs.prestashop.com/ for more information.
 *
 * @author    PrestaShop SA and Contributors <contact@prestashop.com>
 * @copyright Since 2007 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 */

/**
 *  Product comments CSS
 */

.product-comment-modal .material-icons[data-icon]:before,
.product-comment-list-item .material-icons[data-icon]:before,
.product-comments-additional-info .material-icons[data-icon]:before,
#product-comments-list-header .material-icons[data-icon]:before,
#product-comments-list-footer .material-icons[data-icon]:before {
  content: attr(data-icon);
}

.btn-comment,
.btn-comment-inverse {
  height: 36px;
  border-radius: 2px;
  background-color: #6b868f;
  color: #ffffff;
  font-size: 14px;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
  padding: 8px;
}
.btn-comment .material-icons,
.btn-comment-inverse .material-icons {
  font-size: 20px;
  margin-right: 7px;
}

.btn-comment:hover {
  background-color: #3c4d52;
}

.btn-comment-inverse {
  background-color: #ffffff;
  color: #363a41;
  border: 1px solid #979797;
}
.btn-comment-inverse:hover {
  background-color: #6b868f;
  border: 1px solid #6b868f;
  color: #ffffff;
}

.btn-comment-big {
  padding: 13px 16px;
  height: 45px;
}

.btn-comment-huge {
  padding: 13px 28px;
  height: 45px;
}

.link-comment {
  color: #232323;
}

.link-comment:hover,
.link-comment:active {
  text-decoration: underline;
  color: #232323;
}

/*
 * ------------------------------------- ocena na kafelku listingu, obok ceny
 *
 * ⚠ Znacznik jedzie od 2026-08-23 hookiem `displayProductPriceBlock` (typ `before_price`),
 * czyli WEWNATRZ `.product-miniature__prices` - a ten jest u motywu wierszem fleksowym
 * (`display:flex; flex-wrap:wrap; gap:8px`). Dzieki temu gwiazdki staja obok ceny
 * bez ani jednej reguly przestawiajacej uklad kafelka.
 *
 * ⚠ `order` jest tu JEDYNA droga na ustawienie kolejnosci. Motyw dokłada elementowi
 * klase `.d-flex` (`display:flex !important` w warstwie `utilities`), a nasz arkusz
 * jest POZA warstwami - przy deklaracjach `!important` warstwa wczesniejsza wygrywa,
 * wiec zadne `!important` po naszej stronie tego nie przebije (patrz CLAUDE.md,
 * "Front (Hummingbird)"). `order` nie jest przez motyw ustawiany, wiec nie ma tu walki:
 * cena i ewentualna cena przekreslona maja domyslne `order: 0`, my 1 - czyli na koncu.
 */
.product-miniature__prices .product-list-review {
  order: 1;
}

/*
 * ⚠ Szerokosci `.grade-stars` NIE zerujemy - `.star-content` jest pozycjonowane
 * absolutnie, wiec bez `min-width` gwiazdki nie zajmuja miejsca w wierszu fleksowym
 * i wchodza pod cene.
 */
.product-miniature__prices .product-list-review .grade-stars.small-stars {
  height: 16px;
}

/**
 * Additional product infos
 */

/*
 * ⚠ Blok stoi od 2026-08-23 W LINII CENY (hook displayProductPriceBlock, typ `price`),
 * a nie we wlasnym wierszu na dole kolumny produktu. Dlatego `inline-flex`, zerowy
 * margines i brak `space-between`: przy ukladzie blokowym ten sam blok dokladal
 * do karty produktu wlasny wiersz - zmierzone 40 px tresci plus 40 px marginesow,
 * czyli strona rosla zamiast sie skracac.
 */
.product-comments-additional-info {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0;
  font-weight: 300;
  font-size: 14px;
}

/*
 * ⚠ Odnosnik MUSI byc fleksem: w srodku stoi `div`, a `div` w zwyklym `<a>` robi
 * z niego pudelko blokowe - wtedy caly blok schodzi do wlasnego wiersza mimo
 * `inline-flex` na rodzicu.
 */
.product-comments-additional-info__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/*
 * ⚠ Marginesy 30/20 px opisywaly blok stojacy SAMODZIELNIE na dole kolumny.
 * W linii ceny rozpychaly ja o dwadziescia pikseli w dol - stad zerowanie tutaj.
 */
.product-comments-additional-info .comments-note {
  margin: 0;
  display: inline-flex;
  align-items: center;
}

/*
 * ⚠ Szerokosci NIE zerujemy: `.star-content` jest pozycjonowane ABSOLUTNIE, wiec
 * `.grade-stars` nie ma z czego wziac szerokosci i przy `min-width: 0` gwiazdki
 * naklada sie na liczbe w nawiasie. 120 px to 5 x (20 px gwiazdki + 3 px odstepu)
 * plus 5 px wciecia `.star-content`.
 */
.product-comments-additional-info .comments-number {
  margin-left: 0.25rem;
}

/**
 *  Post comment modal
 */
.product-comment-modal .modal-header {
  border: none;
  padding: 30px 30px 15px;
}

.product-comment-modal .modal-body {
  padding: 15px 30px 30px;
}

.product-comment-modal .modal-header .h2 {
  float: left;
  font-size: 20px;
}

.product-comment-modal .modal-dialog {
  width: calc(100% - 30px);
  max-width: 774px;
}

.product-comment-modal .modal-dialog .h3 {
  font-size: 14px;
}

.product-comment-modal .modal-dialog .product-flag {
  display: none;
}

.product-comment-modal .modal-dialog .product-cover,
.product-comment-modal .modal-dialog .product-cover img {
  width: 99px;
  height: 99px;
}

.product-comment-modal label.form-label {
  font-size: 16px;
  margin: 10px 0;
}

.product-comment-modal input:not([type="checkbox"]):not([type="file"]) {
  width: 100%;
  height: 44px;
  border: 1px solid #bfbfbf;
  padding: 0 10px;
}

.product-comment-modal textarea {
  width: 100%;
  min-height: 80px;
  border: 1px solid #bfbfbf;
  margin-bottom: 10px;
  padding: 10px 10px;
}

.product-comment-modal .btn-comment,
.product-comment-modal .btn-comment-inverse {
  font-size: 16px;
  line-height: 16px;
  font-weight: bold;
}

.product-comment-modal .required {
  font-size: 12px;
  margin-left: 5px;
}

.product-comment-modal .post-comment-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.product-comment-modal .post-comment-buttons .btn-comment {
  margin-left: 15px;
}

#product-comment-posted-modal .post-comment-buttons,
#product-comment-post-error .post-comment-buttons,
#update-comment-usefulness-post-error .post-comment-buttons {
  margin-top: 30px;
}

.product-comment-modal .modal-header .material-icons {
  color: #40a85f;
  font-size: 30px;
  line-height: 25px;
}

.product-comment-modal .modal-header .material-icons.error {
  color: #a94442;
}

.product-comment-modal .modal-header .material-icons.feedback {
  color: #f39d72;
}

/**
 *  Star component
 */

.star-content {
  margin: 0 0 0 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.star-content div.star,
.star-content div.star-on,
.star-content div.star-hover {
  display: block;
  width: 20px;
  height: 20px;
  /* obrazek gwiazdek ustawiony nizej, w sekcji wektorowej */
  flex: auto;
  margin-left: 3px;
}

.small-stars .star-content div.star,
.small-stars .star-content div.star-on,
.small-stars .star-content div.star-hover {
  /* obrazek gwiazdek ustawiony nizej, w sekcji wektorowej */
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

.star-content div.star-hover {
  cursor: pointer;
}

.grade-stars {
  position: relative;
  height: 20px;
  min-width: 120px;
  display: inline-block;
}

/*
 * ⚠ 95 px to DOKLADNA szerokosc tresci: 5 x (16 px gwiazdki + 2 px odstepu) plus 5 px
 * wciecia `.star-content`. Wczesniejsze 100 px bylo zapasem bez pokrycia.
 * ⚠ Przy zmianie szerokosci gwiazdki albo odstepu trzeba te liczbe PRZELICZYC -
 * `.star-content` jest pozycjonowane absolutnie, wiec `.grade-stars` nie ma z czego
 * wziac szerokosci samo.
 *
 * ⚠ To NIE sprawia, ze ocena miesci sie obok ceny na telefonie, i nie ma sprawiac:
 * kafelek ma tam 155 px, a cena z odstepem i gwiazdkami potrzebuje 169 px. Wiersz
 * cen zawija sie wtedy (`flex-wrap: wrap` motywu) i tak ma byc - cena bywa dluzsza
 * ("1.299,00 lei"), wiec wymuszanie jednej linii konczyloby sie przycieciem.
 */
.grade-stars.small-stars {
  min-width: 95px;
}

/*
 * ⚠ `top: 0`, nie `3px` (zmiana 2026-08-23). `.star-content` jest pozycjonowane
 * absolutnie w `.grade-stars`, a oba maja te sama wysokosc - kazdy piksel `top`
 * to rozjazd rysunku wobec wlasnego pudelka. Pudelko motyw poziomuje poprawnie
 * (`align-items: center`), wiec gwiazdki wychodzily 3 px NIZEJ niz cena, liczba
 * w nawiasie i tytul opinii. Zmierzone przed zmiana: rozjazd srodkow 3,0 px
 * na kafelku listingu i tyle samo na karcie produktu.
 *
 * ⚠ Motyw sam probowal to naprawic (`.comment__infos .grade-stars .star-content
 * {top:0}`), ale jego regula siedzi w `@layer ps-modules`, a ta caly plik jest POZA
 * warstwami - przy zwyklych deklaracjach kod bez warstwy wygrywa z KAZDA warstwa,
 * niezaleznie od specyficznosci. Czyli poprawka motywu nie mogla zadzialac.
 */
.grade-stars .star-content {
  position: absolute;
  top: 0;
  left: 0;
}

.criterion-rating .grade-stars .star-content {
  top: 0;
}

#post-product-comment-modal .star-content div.star a {
  display: block;
  position: absolute;
  text-indent: -5000px;
}
#post-product-comment-modal .criterion-rating {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

#post-product-comment-modal .criterion-rating label {
  color: #363a41;
  font-size: 14px;
  font-weight: bold;
}

#ratingNotChosen {
  font-size: smaller;
  color: #ab4746;
  text-align: right;
}

#post-product-comment-form input.error,
#post-product-comment-form textarea.error {
  background-color: #f2dede;
  border: solid 1px #ebcccc;
}

#post-product-comment-form input.valid,
#post-product-comment-form textarea.valid {
  border: solid 1px #d0e9c6;
}

/**
 *  Product comments list
 */

/*
 * ⚠⚠ USUNIETE 2026-08-23 SIEDEM REGUL ZE STOCKOWEGO MODULU - i to one robily
 * "ogromne marginesy", na ktore skarzyl sie uzytkownik.
 *
 * Motyw ma dla tej listy wlasny, ZWARTY styl (`.page-product #product-comments-list
 * .comment {margin:0; padding:1rem 0}`, naglowek `padding:0`), ale trzyma go
 * w `@layer ps-modules`. Ten plik jest POZA warstwami, wiec jego zwykle deklaracje
 * biły styl motywu NIEZALEZNIE od specyficznosci - i przywracaly 20 px marginesu
 * pod kazdym wpisem, 40 px paddingu naglowka z 15 px wcieciem w bok (przez ktore
 * naglowek nie trzymal linii z opiniami) oraz 10 px pod gwiazdkami.
 *
 * ⚠ Trzy z tych regul byly przy tym MARTWE - celowaly w znaczniki Bootstrapa 4
 * (`.comment-infos`, `.comment-content .h4`, `.comments-nb`, `.btn-comment`),
 * ktorych nasze szablony nie maja od przerobki na Hummingbirda (sprawdzone grepem
 * po `views/templates`). Czyli plik przez caly czas walczyl z motywem o uklad,
 * ktorego sam juz nie opisywal.
 *
 * ⚠ Zniklo z nimi `background-color: #ffffff` na wpisie - twarda biel pod tresc,
 * ktora w trybie ciemnym bylaby bialym prostokatem.
 */

#empty-product-comment {
  text-align: center;
}

/* ---------------------------------------- wpis opinii: zwarty, bez martwego miejsca
 *
 * ⚠ Reguly celuja w `.product-comments-wrapper`, czyli obejmuja NARAZ opinie wlasne
 * produktu i sekcje opinii pozyczonych. Osobne zestawy dla obu rozjechalyby sie przy
 * pierwszej poprawce, a stoja jedna pod druga na tym samym ekranie.
 */

/* ⚠ Puste `.comment__buttons` zostaje w drzewie zawsze (prototyp motywu), a przy
 * wylaczonej przydatnosci opinii nie ma w nim nic - flex o zerowej wysokosci, ktory
 * i tak lapal odstep z gory. */
.product-comments-wrapper .comment__buttons:empty {
  display: none;
}

/* ⚠ Tresc opinii NIE niesie odstepu na dole; przynosi go to, co po niej stoi.
 * Odwrotnie (margines pod trescia) zostawia 16 px pustki pod KAZDA opinia, ktora
 * nie ma ani zdjecia, ani odpowiedzi sklepu - czyli pod wiekszoscia. */
.product-comments-wrapper .comment__text {
  margin-bottom: 0;
}

.product-comments-wrapper .comment__media,
.product-comments-wrapper .comment__respond,
.product-comments-wrapper .comment__buttons {
  margin-top: 0.5rem;
}

.product-comments-wrapper .comment__infos {
  margin-bottom: 0.375rem;
}

.product-comments-wrapper .product-comment-list-item,
.product-comments-wrapper .comment {
  padding: 0.75rem 0;
  margin: 0;
}

/* ------------------------------- opinie pozyczone: ten sam uklad co opinie wlasne
 *
 * ⚠ Motyw ma te reguly, ale zawezone do `#product-comments-list` - a nasza sekcja
 * stoi POZA tym elementem i nie da sie tego obejsc, bo to identyfikator. Bez nich
 * imie, data, gwiazdki i tytul schodzily kazde do wlasnego wiersza, wiec pozyczona
 * opinia byla o polowe wyzsza od wlasnej i wygladala jak inny rodzaj tresci.
 * ⚠ Przy zmianie ukladu opinii w motywie trzeba przejrzec TAKZE te reguly.
 */
.product-comments-borrowed .comment__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.product-comments-borrowed .comment__date {
  color: var(--bs-secondary-color);
}

.product-comments-borrowed .comment__infos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-comments-borrowed .comment__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.product-comments-borrowed .comment {
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

/* ⚠ Ostatnia opinia bez linii - pod sekcja nie ma juz nic, wiec linia wisialaby
 * w powietrzu jako zapowiedz tresci, ktorej nie ma. */
.product-comments-borrowed .comment:last-of-type {
  border-bottom: 0;
}

.product-comment-list-item .comment-content p {
  color: #363a42;
  font-size: 14px;
  letter-spacing: -0.28px;
  line-height: 19px;
  word-break: break-word;
  white-space: pre-wrap;
}

.product-comment-list-item .comment-content .comment-buttons a {
  color: #6b868f;
  font-size: 14px;
  letter-spacing: -0.28px;
  line-height: 19px;
  margin-right: 8px;
}

.product-comment-list-item .comment-content .comment-buttons a .material-icons {
  font-size: 18px;
  cursor: pointer;
}

/*
** Quickview style
*/

.product-quickview-review {
  display: flex;
  flex-direction: row;
}

.product-quickview-review .grade-stars .star-content {
  margin: 0 0 0 0;
  top: 0;
}

/*
** Product list override
*/

#products .thumbnail-container.has-reviews:hover .highlighted-informations,
#products .thumbnail-container.has-reviews:focus .highlighted-informations,
.featured-products
  .thumbnail-container.has-reviews:hover
  .highlighted-informations,
.featured-products
  .thumbnail-container.has-reviews:focus
  .highlighted-informations,
.product-accessories
  .thumbnail-container.has-reviews:hover
  .highlighted-informations,
.featured-products
  .thumbnail-container.has-reviews:focus
  .highlighted-informations,
.product-miniature
  .thumbnail-container.has-reviews:hover
  .highlighted-informations,
.product-miniature
  .thumbnail-container.has-reviews:focus
  .highlighted-informations {
  height: 4.5rem;
}

#products
  .thumbnail-container.has-reviews:hover
  .highlighted-informations
  .variant-links,
#products
  .thumbnail-container.has-reviews:focus
  .highlighted-informations
  .variant-links,
.featured-products
  .thumbnail-container.has-reviews:hover
  .highlighted-informations
  .variant-links,
.featured-products
  .thumbnail-container.has-reviews:focus
  .highlighted-informations
  .variant-links,
.product-accessories
  .thumbnail-container.has-reviews:hover
  .highlighted-informations
  .variant-links,
.featured-products
  .thumbnail-container.has-reviews:focus
  .highlighted-informations
  .variant-links,
.product-miniature
  .thumbnail-container.has-reviews:hover
  .highlighted-informations
  .variant-links,
.product-miniature
  .thumbnail-container.has-reviews:focus
  .highlighted-informations
  .variant-links {
  min-height: 3.7rem;
}

#products
  .thumbnail-container.has-reviews:hover
  .highlighted-informations.no-variants,
#products
  .thumbnail-container.has-reviews:focus
  .highlighted-informations.no-variants,
.featured-products
  .thumbnail-container.has-reviews:hover
  .highlighted-informations.no-variants,
.featured-products
  .thumbnail-container.has-reviews:focus
  .highlighted-informations.no-variants,
.product-accessories
  .thumbnail-container.has-reviews:hover
  .highlighted-informations.no-variants,
.featured-products
  .thumbnail-container.has-reviews:focus
  .highlighted-informations.no-variants,
.product-miniature
  .thumbnail-container.has-reviews:hover
  .highlighted-informations.no-variants,
.product-miniature
  .thumbnail-container.has-reviews:focus
  .highlighted-informations.no-variants {
  height: 4.125rem;
}

#products
  .product-miniature
  .thumbnail-container.has-reviews
  .discount-amount.online-only,
#products
  .product-miniature
  .thumbnail-container.has-reviews
  .discount-percentage.online-only,
#products
  .product-miniature
  .thumbnail-container.has-reviews
  .on-sale.online-only,
#products
  .product-miniature
  .thumbnail-container.has-reviews
  .online-only.online-only,
#products .product-miniature .thumbnail-container.has-reviews .pack.online-only,
#products
  .product-miniature
  .thumbnail-container.has-reviews
  .product-flags
  .new.online-only,
.featured-products
  .product-miniature
  .thumbnail-container.has-reviews
  .discount-amount.online-only,
.featured-products
  .product-miniature
  .thumbnail-container.has-reviews
  .discount-percentage.online-only,
.featured-products
  .product-miniature
  .thumbnail-container.has-reviews
  .on-sale.online-only,
.featured-products
  .product-miniature
  .thumbnail-container.has-reviews
  .online-only.online-only,
.featured-products
  .product-miniature
  .thumbnail-container.has-reviews
  .pack.online-only,
.featured-products
  .product-miniature
  .thumbnail-container.has-reviews
  .product-flags
  .new.online-only,
.product-accessories
  .product-miniature
  .thumbnail-container.has-reviews
  .discount-amount.online-only,
.product-accessories
  .product-miniature
  .thumbnail-container.has-reviews
  .discount-percentage.online-only,
.product-accessories
  .product-miniature
  .thumbnail-container.has-reviews
  .on-sale.online-only,
.product-accessories
  .product-miniature
  .thumbnail-container.has-reviews
  .online-only.online-only,
.product-accessories
  .product-miniature
  .thumbnail-container.has-reviews
  .pack.online-only,
.product-accessories
  .product-miniature
  .thumbnail-container.has-reviews
  .product-flags
  .new.online-only {
  top: 11.5rem;
}

.product-list-reviews {
  position: absolute;
  top: -26px;
  left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  padding: 4px 0;
  visibility: hidden;
}

.product-list-reviews .grade-stars .star-content {
  top: 1px;
}

.product-list-reviews .comments-nb {
  margin-left: 5px;
  font-size: 13px;
}

@media (min-width: 960px) {
  #product-comments-list-footer {
    position: relative;
    min-height: 45px;
  }

  #product-comments-list-footer .post-product-comment {
    margin: 0 auto;
    display: block;
  }

  #product-comments-list-pagination {
    position: absolute;
    right: 0;
    top: 5px;
  }
}

@media (max-width: 960px) {
  #product-comments-list-footer {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  #product-comments-list-footer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }

  #product-comments-list-pagination {
    margin-bottom: 10px;
  }
}

#product-comments-list-pagination {
  height: 32px;
}

#product-comments-list-pagination ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

#product-comments-list-pagination ul li span {
  height: 32px;
  width: 24px;
  margin: 0 5px;
  cursor: pointer;
  display: block;
  text-align: center;
  font-size: 20px;
  line-height: 32px;
  color: #6b868f;
}

#product-comments-list-pagination ul li.active span,
#product-comments-list-pagination ul li span.next i,
#product-comments-list-pagination ul li span.prev i {
  font-weight: bold;
}

#product-comments-list-pagination ul li.disabled span {
  opacity: 0.3;
  cursor: not-allowed;
}

#product-comments-list-pagination ul li.active span {
  cursor: not-allowed;
}

#product-comments-list-pagination ul li.hidden {
  display: none;
}

/* ------------------------------------------------- gwiazdki ocen (wektor) */

/*
 * Motyw Hummingbird rysuje gwiazdki BITMAPA - sprite 44x20 px
 * (themes/hummingbird/assets/img-dist/*.png), czyli 20 px na gwiazdke bez wersji 2x.
 * Na telefonie i na ekranach retina wychodzi z tego rozmycie, a koloru nie da sie
 * zmienic z CSS-a.
 *
 * Gwiazdka to dzis MASKA w ksztalcie gwiazdki na tle w kolorze `--bs-primary`
 * motywu - obrys dla zgaszonej, pelny ksztalt dla zapalonej.
 *
 * ⚠⚠ KOLOR IDZIE Z MOTYWU, NIE Z TEGO PLIKU (zmiana 2026-09-21). Do tego dnia sprite
 * mial wpisany bez z logo Garibalda (#D8D3C3 z obrysem #A99C7E) - na tSK, ktory stoi
 * na motywie `koszulkowy`, gwiazdki przy cenie wychodzily blade i obce, a kilka
 * centymetrow nizej na tej samej stronie glownej `ababinkhome` rysowal gwiazdki
 * opinii kolorem motywu. To ta sama klasa bledu, co kolor marki wpisany w szablon
 * maila modulu: prawdziwy na jednej marce, falszywy na drugiej, i milczy.
 * Kolor marki w kodzie platformy bierzemy wylacznie ze zmiennych motywu.
 *
 * ⚠ Rozroznienie zapalona/zgaszona niesie KSZTALT (pelna kontra obrys), nie odcien -
 * ta sama zasada, co wczesniej przy bezu: dwa podobne tony obok siebie sprawialy,
 * ze 4/5 wygladalo jak 5/5.
 *
 * ⚠ Czesciowa gwiazdke (srednia 4,3/5) jquery.rating.plugin.js przycina przez
 * `width` i przesuniecie - dlatego wtyczka ustawia dzis `mask-position` razem
 * z `background-position`. Bez tego widoczna reszta zgaszonej gwiazdki pokazywalaby
 * LEWY kawalek obrysu zamiast prawego.
 *
 * ⚠ Maska ma jedna komorke, a nie sprite - wiec reguly motywu przesuwajace tlo
 * (`background-position:-1.5rem 0`, `-19px 0`, `100% 0` w selektorze ocen) nie
 * maja juz na co dzialac i nie trzeba ich lustrzanie powtarzac.
 *
 * Font ikon odpada tak jak wczesniej: glifu nie da sie przyciac przesunieciem,
 * a Font Awesome na froncie nie ma.
 *
 * Reguly sa BEZ warstwy kaskady i BEZ !important - motyw trzyma swoje
 * w `@layer`, a kod poza warstwami wygrywa dla zwyklych deklaracji
 * (patrz CLAUDE.md, "Front (Hummingbird)").
 *
 * ⚠ `stroke-linejoin='round'` jest konieczny: domyslny `miter` na ostrych czubkach
 * gwiazdki przekracza `miterlimit` i przegladarka scina je do bevela - czubki
 * wygladaja wtedy na ulamane.
 */
.star-content .star,
.star-content .star-on,
.star-content .star-hover,
.stars-selector .stars-selector__input-label {
  background: var(--bs-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='10.00,1.00 12.35,7.26 19.04,7.56 13.80,11.74 15.58,18.19 10.00,14.50 4.42,18.19 6.20,11.74 0.96,7.56 7.65,7.26' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / 1.25rem 1.25rem;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='10.00,1.00 12.35,7.26 19.04,7.56 13.80,11.74 15.58,18.19 10.00,14.50 4.42,18.19 6.20,11.74 0.96,7.56 7.65,7.26' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / 1.25rem 1.25rem;
}

.star-content .star-on,
.star-content .star-hover,
.stars-selector .stars-selector__input-label {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='10.00,1.00 12.35,7.26 19.04,7.56 13.80,11.74 15.58,18.19 10.00,14.50 4.42,18.19 6.20,11.74 0.96,7.56 7.65,7.26' fill='%23000' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='10.00,1.00 12.35,7.26 19.04,7.56 13.80,11.74 15.58,18.19 10.00,14.50 4.42,18.19 6.20,11.74 0.96,7.56 7.65,7.26' fill='%23000' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*
 * Selektor ocen w formularzu opinii: motyw pokazuje zapalone wszystkie gwiazdki
 * do zaznaczonej wlacznie, a zgaszone - te za nia i wszystkie, gdy nic nie wybrano.
 * Te same dwa warunki co w motywie, tylko przelaczaja maske zamiast przesuwac tlo.
 */
.stars-selector:not(:has(.stars-selector__input:checked)) .stars-selector__input-label,
.stars-selector .stars-selector__input:checked + .stars-selector__input-label ~ .stars-selector__input-label {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='10.00,1.00 12.35,7.26 19.04,7.56 13.80,11.74 15.58,18.19 10.00,14.50 4.42,18.19 6.20,11.74 0.96,7.56 7.65,7.26' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='10.00,1.00 12.35,7.26 19.04,7.56 13.80,11.74 15.58,18.19 10.00,14.50 4.42,18.19 6.20,11.74 0.96,7.56 7.65,7.26' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*
 * ⚠ MALE GWIAZDKI MUSZA MIEC WLASNY ROZMIAR MASKI - bez niego sa PRZYCIETE.
 * Pudelko malej gwiazdki ma 16 px, a maska 20 px bylaby obcinana po prawej i u dolu
 * (tak wychodzily polowki gwiazdek przy dawnym sprite bez `background-size`).
 */
.small-stars .star-content .star,
.small-stars .star-content .star-on,
.small-stars .star-content .star-hover {
  -webkit-mask-size: 1rem 1rem;
  mask-size: 1rem 1rem;
}

/* ------------------------------------- opinie pozyczone z innych produktow */

/*
 * ⚠ Ta sekcja MA wygladac inaczej niz wlasne opinie produktu i to nie jest wybor
 * estetyczny: klient musi widziec na pierwszy rzut oka, ze czyta o czyms innym.
 * Stad odsuniecie, linia u gory, wlasny naglowek i zdanie wyjasniajace.
 * Patrz classes/AbabinkReviewShowcase.php.
 *
 * Same opinie zostaja przy klasach `.comment*` motywu - dzieki temu nie powielamy
 * jego typografii i odstepow, a rozjazd miedzy dwiema sekcjami nie ma jak powstac.
 */

/*
 * ⚠ BEZ wlasnej linii u gory. Ostatnia opinia wlasna konczy sie juz linia (motyw
 * daje ja kazdemu wpisowi), wiec obrys sekcji rysowal DRUGA linie kilkadziesiat
 * pikseli nizej - dwie kreski z pustka miedzy nimi czytaly sie jak zgubiona tresc.
 * Sekcje oddziela dzis odstep i wlasny naglowek, czyli to, co i tak musi tam byc.
 */
.product-comments-borrowed {
  margin-top: 1.5rem;
}

/* ⚠ Owijka `__head` i zdanie `__note` zniknely razem ze zdaniem wyjasniajacym
 * (decyzja uzytkownika 2026-08-23) - naglowek zostal sam, wiec odstep pod nim
 * nalezy juz do niego. */
.product-comments-borrowed__title {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.comment--borrowed .comment__for-product {
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  opacity: 0.85;
}

/*
 * ⚠ Odnosnik do produktu musi byc widoczny jako odnosnik. To on jest tym, co
 * odroznia uczciwe pokazanie cudzej opinii od podszycia sie pod nia.
 */
.comment--borrowed .comment__for-product-link {
  text-decoration: underline;
}