:root{
--ko-op-zloto:        #b08a3e;
--ko-op-zloto-ciemne: #8a6d2f;
--ko-op-zloto-jasne:  #e7c874;
--ko-op-gwiazda:      #c9a24b;
--ko-op-gwiazda-tlo:  rgba(168,132,68,.22);
--ko-op-tekst:        #3a3128;
--ko-op-ciemny:       #1f1a14;
--ko-op-wyciszony:    #8a7a5f;
--ko-op-ramka:        rgba(168,132,68,.35);
--ko-op-ramka-lekka:  rgba(168,132,68,.22);
--ko-op-tlo:          linear-gradient(180deg, #fbf7ef 0%, #f3ecdf 100%);
--ko-op-karta:        rgba(255,255,255,.62);
--ko-op-serif:        "Playfair Display", Georgia, serif;
} .ko-gwiazdki{
position: relative;
display: inline-block;
line-height: 0;
font-size: 18px;
white-space: nowrap;
vertical-align: middle;
}
.ko-gwiazdki svg{
width: 1em;
height: 1em;
margin-right: .12em;
display: inline-block;
vertical-align: top;
}
.ko-gwiazdki svg:last-child{ margin-right: 0; }
.ko-gwiazdki__tlo svg{ fill: var(--ko-op-gwiazda-tlo); }
.ko-gwiazdki__zloto{
position: absolute;
left: 0; top: 0;
overflow: hidden;
white-space: nowrap;
}
.ko-gwiazdki__zloto svg{
fill: var(--ko-op-gwiazda);
filter: drop-shadow(0 1px 0 rgba(255,255,255,.6));
}
.ko-gwiazdki--ocena{ font-size: 18px; }
.ko-gwiazdki--karta{ font-size: 16px; }
.ko-gwiazdki--duze{  font-size: 26px; } .ko-ocena{
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 10px;
margin: 2px 0 6px;
color: var(--ko-op-tekst);
text-decoration: none !important;
border: 0;
transition: color .18s ease;
}
.ko-ocena__wartosc{
font-family: var(--ko-op-serif);
font-size: 19px;
font-weight: 700;
line-height: 1;
color: var(--ko-op-zloto-ciemne);
}
.ko-ocena__liczba{
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ko-op-wyciszony);
border-bottom: 1px solid var(--ko-op-ramka-lekka);
line-height: 1.4;
transition: color .18s ease, border-color .18s ease;
}
.ko-ocena:hover .ko-ocena__liczba,
.ko-ocena:focus-visible .ko-ocena__liczba{
color: var(--ko-op-zloto-ciemne);
border-color: var(--ko-op-zloto);
}
.ko-ocena__etykieta{
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--ko-op-ramka);
background: rgba(255,255,255,.55);
font-family: var(--ko-op-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1;
color: var(--ko-op-wyciszony);
} .ko-opinie{
position: relative;
margin: 8px 0 24px;
padding: 34px 36px 32px;
border-radius: 22px;
border: 1px solid var(--ko-op-ramka);
background: var(--ko-op-tlo);
color: var(--ko-op-tekst);
box-shadow:
0 10px 28px rgba(40,30,15,.10),
0 1px 0 rgba(255,255,255,.65) inset;
overflow: hidden;
scroll-margin-top: 120px;
}
.ko-opinie::before{
content: "";
position: absolute;
inset: 10px;
border-radius: 16px;
border: 1px solid rgba(168,132,68,.30);
pointer-events: none;
}
.ko-opinie::after{
content: "";
position: absolute;
right: -25%;
top: -45%;
width: 70%;
height: 120%;
background: radial-gradient(closest-side, rgba(212,175,55,.16), transparent 68%);
transform: rotate(-8deg);
pointer-events: none;
}
.ko-opinie > *{
position: relative;
z-index: 1;
}
.ko-opinie__naglowek{ max-width: 720px; }
.ko-opinie__nadtytul{
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ko-op-zloto-ciemne);
}
.ko-opinie__nadtytul::before{
content: "";
width: 28px;
height: 1px;
background: linear-gradient(90deg, var(--ko-op-zloto), var(--ko-op-zloto-jasne));
}
.ko-opinie__tytul{
margin: 8px 0 0 !important;
font-family: var(--ko-op-serif) !important;
font-size: 30px;
font-weight: 700;
line-height: 1.2;
color: var(--ko-op-ciemny);
}
.ko-opinie__wstep{
margin: 10px 0 0;
font-size: 15px;
line-height: 1.6;
color: var(--ko-op-wyciszony);
}
.ko-opinie__uklad{
display: grid;
grid-template-columns: 290px minmax(0, 1fr);
gap: 28px;
align-items: start;
margin-top: 26px;
} .ko-opinie__panel{
padding: 24px 22px 20px;
border-radius: 16px;
border: 1px solid var(--ko-op-ramka);
background: var(--ko-op-karta);
text-align: center;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.ko-opinie__srednia{
font-family: var(--ko-op-serif);
font-size: 58px;
font-weight: 700;
line-height: 1;
color: var(--ko-op-ciemny);
letter-spacing: -.01em;
}
.ko-opinie__z5{
font-size: 20px;
font-weight: 600;
color: var(--ko-op-wyciszony);
margin-left: 2px;
}
.ko-opinie__panel .ko-gwiazdki--duze{ margin-top: 10px; }
.ko-opinie__liczba{
margin-top: 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ko-op-wyciszony);
}
.ko-opinie__rozklad{
list-style: none !important;
margin: 18px 0 0 !important;
padding: 0 !important;
text-align: left;
}
.ko-opinie__pasek{
display: grid;
grid-template-columns: 34px minmax(0,1fr) 22px;
align-items: center;
gap: 10px;
margin: 0 0 7px !important;
padding: 0 !important;
font-size: 13px;
color: var(--ko-op-tekst);
}
.ko-opinie__pasek-etykieta{
display: inline-flex;
align-items: center;
gap: 3px;
font-weight: 600;
}
.ko-opinie__pasek-etykieta svg{
width: 12px;
height: 12px;
fill: var(--ko-op-gwiazda);
}
.ko-opinie__pasek-tor{
display: block;
height: 8px;
border-radius: 999px;
background: var(--ko-op-gwiazda-tlo);
overflow: hidden;
}
.ko-opinie__pasek-wypelnienie{
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #d4a94f 0%, var(--ko-op-zloto) 100%);
}
.ko-opinie__pasek-ile{
text-align: right;
font-size: 12px;
color: var(--ko-op-wyciszony);
}
.ko-opinie__nota{
margin: 16px 0 0;
font-size: 12px;
line-height: 1.5;
color: var(--ko-op-wyciszony);
} .ko-opinie__lista{
display: grid;
gap: 16px;
align-content: start;
}
.ko-opinia{
padding: 20px 22px;
border-radius: 16px;
border: 1px solid var(--ko-op-ramka-lekka);
background: var(--ko-op-karta);
box-shadow: 0 6px 18px rgba(40,30,15,.06), 0 1px 0 rgba(255,255,255,.8) inset;
scroll-margin-top: 120px;
}
.ko-opinia__naglowek{
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.ko-opinia__awatar{
flex: 0 0 auto;
width: 46px;
height: 46px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--ko-op-zloto-jasne) 0%, var(--ko-op-zloto) 100%);
color: #fff;
font-family: var(--ko-op-serif);
font-size: 20px;
font-weight: 700;
box-shadow: 0 2px 6px rgba(138,109,47,.35), 0 1px 0 rgba(255,255,255,.5) inset;
}
.ko-opinia__meta{
flex: 1 1 200px;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 12px;
}
.ko-opinia__autor{
font-family: var(--ko-op-serif);
font-size: 17px;
font-weight: 700;
color: var(--ko-op-ciemny);
}
.ko-opinia__weryfikacja{
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ko-op-zloto-ciemne);
}
.ko-opinia__weryfikacja svg{
width: 14px;
height: 14px;
fill: currentColor;
}
.ko-opinia__data{
flex-basis: 100%;
font-size: 12px;
color: var(--ko-op-wyciszony);
}
.ko-opinia__naglowek .ko-gwiazdki--karta{ margin-left: auto; }
.ko-opinia__tresc{
margin: 14px 0 0;
font-size: 15px;
line-height: 1.65;
color: var(--ko-op-tekst);
}
.ko-opinia__tresc p{ margin: 0 0 10px; }
.ko-opinia__tresc p:last-child{ margin-bottom: 0; }
.ko-opinia__tresc--brak{
font-style: italic;
color: var(--ko-op-wyciszony);
} .ko-opinie__sklep{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--ko-op-ramka-lekka);
}
.ko-opinie__sklep-etykieta{
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ko-op-wyciszony);
}
.ko-opinie__sklep-wartosc{
font-family: var(--ko-op-serif);
font-size: 19px;
font-weight: 700;
line-height: 1;
color: var(--ko-op-zloto-ciemne);
}
.ko-opinie__sklep-liczba{
font-size: 13px;
color: var(--ko-op-wyciszony);
} @media (max-width: 980px){
.ko-opinie__uklad{ grid-template-columns: 1fr; gap: 20px; }
.ko-opinie__panel{ max-width: 420px; }
}
@media (max-width: 640px){
.ko-opinie{ padding: 24px 18px 22px; border-radius: 18px; }
.ko-opinie::before{ inset: 7px; border-radius: 13px; }
.ko-opinie__tytul{ font-size: 24px; }
.ko-opinie__srednia{ font-size: 46px; }
.ko-opinie__panel{ max-width: none; padding: 20px 16px 16px; }
.ko-opinia{ padding: 16px 16px; }
.ko-opinia__naglowek .ko-gwiazdki--karta{ margin-left: 60px; }
.ko-ocena__wartosc{ font-size: 17px; }
}