/* ============================================================
   ForNails — strona glowna: kafle kategorii + sekcja opinii
   Wlasny arkusz mu-pluginu fn-design-home.php. Celowo NIEZALEZNY
   od Woodmart Customizer Additional CSS (post 19068) — inne agenty
   pracuja tam rownolegle. Korzysta ze wspolnych zmiennych --fn-*
   (kolory/fonty marki) zdefiniowanych globalnie w Additional CSS;
   ponizej fallbacki na wypadek innej kolejnosci ladowania arkuszy.
   ============================================================ */

/* ------------------------------------------------------------
   Kafle kategorii — [fn_category_tiles]
   Wg makiety ForNails-Design22: 3 DUZE kafle ze zdjeciem (hero)
   + rzad lekkich PIGULEK z liczba dla pozostalych 12 kategorii.
   ------------------------------------------------------------ */

/* --- 3 duze kafle hero --- */
.fn-cat-hero{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 20px;
}

@media (max-width: 782px){
  .fn-cat-hero{ grid-template-columns: 1fr; gap: 14px; }
}

.fn-cat-hero-tile{
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--fn-secondary, #2E2321);
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(46, 35, 33, .10);
}

.fn-cat-hero-tile__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: transform .35s ease; /* TYLKO transform - bezpieczne przy ewentualnym zamrozeniu JS (np. petla GTM sgw.stape.bg): najgorszy stan to lekko powiekszone zdjecie, tresc zawsze czytelna */
}

.fn-cat-hero-tile:hover .fn-cat-hero-tile__img{
  transform: scale(1.045);
}

.fn-cat-hero-tile{
  transition: box-shadow .3s ease;
}

.fn-cat-hero-tile:hover{
  box-shadow: 0 14px 34px rgba(46,35,33,.28);
}

.fn-cat-hero-tile__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(46,35,33,0) 32%, rgba(46,35,33,.55) 62%, rgba(46,35,33,.9) 100%);
  pointer-events: none;
}

.fn-cat-hero-tile__body{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 24px;
  color: var(--fn-bg, #FBF7F5);
}

.fn-cat-hero-tile__name{
  position: relative;
  display: block;
  font-family: var(--fn-font-heading, 'Playfair Display', Georgia, serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  color: #FFFFFF;
  margin-bottom: 4px;
  padding-bottom: 11px;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* Zlota kreska pod tytulem, ukryta w spoczynku, wysuwa sie na hover kafla */
.fn-cat-hero-tile__name::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #C9A15A;
  transition: width .3s ease;
}

.fn-cat-hero-tile:hover .fn-cat-hero-tile__name::after{
  width: 40px;
}

.fn-cat-hero-tile__count{
  display: block;
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-size: 13.5px;
  letter-spacing: .3px;
  color: var(--fn-accent-light, #E4C989);
}

@media (max-width: 600px){
  .fn-cat-hero-tile__name{ font-size: 22px; }
  .fn-cat-hero-tile__body{ padding: 16px 18px; }
}

/* --- 12 lekkich pigulek z liczba --- */
.fn-cat-pills{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: 0 0 8px;
}

@media (max-width: 1024px){
  .fn-cat-pills{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px){
  .fn-cat-pills{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.fn-cat-pill{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #E7DAD4;
  border-radius: 12px;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

.fn-cat-pill:hover{
  background: #FBF4F1;
  border-color: #A34B65;
  box-shadow: 0 6px 16px rgba(163, 75, 101, .12);
  transform: translateY(-1px);
}

.fn-cat-pill__name{
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.25;
  color: var(--fn-secondary, #2E2321);
}

.fn-cat-pill__count{
  flex: 0 0 auto;
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 13px;
  color: #C9A15A;
}

/* ------------------------------------------------------------
   Opinie klientek — [fn_testimonials]
   ------------------------------------------------------------ */
.fn-testi-section{
  max-width: 1240px;
  margin: 0 auto;
}

.fn-testi-head{
  text-align: center;
  margin-bottom: 30px;
}

.fn-testi-eyebrow{
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--fn-primary, #A34B65);
  font-weight: 600;
  margin-bottom: 10px;
}

.fn-testi-title{
  font-family: var(--fn-font-heading, 'Playfair Display', Georgia, serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--fn-text, #2E2321);
  margin: 0;
}

.fn-testi-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 800px){
  .fn-testi-grid{ grid-template-columns: 1fr; }
}

.fn-testi-card{
  background: var(--fn-white, #FFFFFF);
  border: 1px solid var(--fn-border, #DDD0CB);
  border-radius: 6px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}

.fn-testi-stars{
  color: var(--fn-accent, #C9A15A);
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.fn-testi-text{
  font-family: var(--fn-font-heading, 'Playfair Display', Georgia, serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fn-text, #2E2321);
  margin: 0 0 20px;
  flex: 1;
}

.fn-testi-foot{
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--fn-bg-soft, #F3E9E5);
  padding-top: 16px;
}

.fn-testi-avatar{
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fn-primary, #A34B65);
  color: var(--fn-white, #FFFFFF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fn-font-heading, 'Playfair Display', Georgia, serif);
  font-size: 16px;
}

.fn-testi-who{
  display: flex;
  flex-direction: column;
}

.fn-testi-name{
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fn-text, #2E2321);
}

.fn-testi-role{
  font-size: 12px;
  color: var(--fn-muted, #8B7D77);
}

/* Neutralny pusty stan — brak opinii, zero zmyslonych recenzji */
.fn-testi-empty{
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  background: var(--fn-white, #FFFFFF);
  border: 1px solid var(--fn-border, #DDD0CB);
  border-radius: 6px;
  padding: 40px 32px;
}

.fn-testi-empty-stars{
  color: var(--fn-border, #DDD0CB);
  font-size: 20px;
  letter-spacing: 4px;
  margin-bottom: 16px;
}

.fn-testi-empty-title{
  font-family: var(--fn-font-heading, 'Playfair Display', Georgia, serif);
  font-weight: 600;
  font-size: 19px;
  color: var(--fn-text, #2E2321);
  margin: 0 0 10px;
}

.fn-testi-empty-text{
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fn-muted, #8B7D77);
  margin: 0;
}

/* ------------------------------------------------------------
   Blok Trusted Shops — REALNA ocena sklepu (4,89/5, ~150 opinii)
   pobierana na zywo z API TS. Prowadzi sekcje "Opinie klientek".
   ------------------------------------------------------------ */
.fn-ts-block{
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: 760px;
  margin: 0 auto 8px;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid var(--fn-border, #DDD0CB);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(46, 35, 33, .08);
}

@media (max-width: 600px){
  .fn-ts-block{ flex-direction: column; text-align: center; gap: 16px; padding: 22px 18px; }
}

.fn-ts-seal{ flex: 0 0 auto; line-height: 0; }

.fn-ts-main{ flex: 1 1 auto; min-width: 0; }

.fn-ts-rating-row{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 600px){ .fn-ts-rating-row{ justify-content: center; } }

.fn-ts-score{
  font-family: var(--fn-font-heading, 'Playfair Display', Georgia, serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--fn-text, #2E2321);
}

.fn-ts-stars{
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--fn-accent, #C9A15A);
}

.fn-ts-outof{
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-size: 15px;
  color: var(--fn-muted, #756A65);
}

.fn-ts-badge-label{
  display: inline-block;
  margin-left: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--fn-bg-soft, #F3E9E5);
  color: var(--fn-primary, #A34B65);
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
}

.fn-ts-meta{
  margin-top: 8px;
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fn-muted, #756A65);
}
.fn-ts-meta strong{ color: var(--fn-text, #2E2321); font-weight: 600; }

.fn-ts-breakdown{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
}
@media (max-width: 600px){ .fn-ts-breakdown{ justify-content: center; } }

.fn-ts-break-item{
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-size: 12.5px;
  color: var(--fn-muted, #756A65);
}
.fn-ts-break-val{ color: var(--fn-text, #2E2321); font-weight: 600; }

.fn-ts-link{
  display: inline-block;
  margin-top: 14px;
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fn-primary, #A34B65);
  text-decoration: none;
}
.fn-ts-link:hover{ color: var(--fn-primary-dark, #7E3A4F); text-decoration: underline; }
/* =====================================================================
   OPINIE KLIENTEK - 3 karty Trusted Shops wg makiety Design22 (2026-07-18)
   DOPISAC NA KONCU wp-content/mu-plugins/fn-design-home.css.
   Wszystkie reguly kart zescope'owane pod .fn-testi-grid--ts, zeby wygrac
   z ewentualnymi resztkami starych regul .fn-testi-card (wyzsza specyficznosc).
   Sekcja + naglowek (.fn-testi-section/.fn-testi-head/.fn-testi-eyebrow/
   .fn-testi-title) zostaja jak sa - nie ruszamy.
   ===================================================================== */

.fn-testi-grid--ts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 0 auto;
	max-width: 1240px;
}

.fn-testi-grid--ts .fn-testi-card {
	background: #fff;
	border: 1px solid #E7DAD4;
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	text-align: left;
	border-radius: 0;
}

.fn-testi-grid--ts .fn-testi-stars {
	color: #C9A15A;
	font-size: 18px;
	letter-spacing: 3px;
	margin-bottom: 12px;
	line-height: 1;
}

.fn-testi-grid--ts .fn-testi-scorebig {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1;
	color: #2E2321;
}

.fn-testi-grid--ts .fn-testi-scoreout {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: #8B7D77;
	margin-left: 6px;
}

.fn-testi-grid--ts .fn-testi-badge {
	display: inline-block;
	align-self: flex-start;
	margin-top: 12px;
	background: #F3E9E5;
	color: #A34B65;
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 999px;
}

.fn-testi-grid--ts .fn-testi-cardtitle {
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: 19px;
	color: #2E2321;
	margin: 0 0 14px;
}

.fn-testi-grid--ts .fn-testi-critlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fn-testi-grid--ts .fn-testi-critlist li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 9px 0;
	border-bottom: 1px solid #F0E6E1;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: #3a2d29;
}

.fn-testi-grid--ts .fn-testi-critlist li:last-child { border-bottom: 0; }

.fn-testi-grid--ts .fn-testi-critlist b {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: #C9A15A;
	font-size: 16px;
}

.fn-testi-grid--ts .fn-testi-cardnote {
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	color: #8B7D77;
	line-height: 1.55;
	margin: 14px 0 0;
}

.fn-testi-grid--ts .fn-testi-cardnote b { color: #A34B65; }

.fn-testi-grid--ts .fn-testi-card--ts { align-items: flex-start; }

.fn-testi-grid--ts .fn-testi-seal {
	display: block;
	line-height: 0;
	margin-bottom: 14px;
}

.fn-testi-grid--ts .fn-testi-cta {
	margin-top: auto;
	padding-top: 18px;
	display: inline-block;
	color: #A34B65;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.fn-testi-grid--ts .fn-testi-cta:hover {
	color: #7E3A4F;
	text-decoration: underline;
}

.fn-testi-section .fn-testi-foot-note {
	text-align: center;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	color: #9E8F89;
	margin: 26px auto 0;
	max-width: 720px;
}

@media (max-width: 900px) {
	.fn-testi-grid--ts { grid-template-columns: 1fr; gap: 14px; }
	.fn-testi-grid--ts .fn-testi-scorebig { font-size: 42px; }
}

/* =====================================================================
   NEWSLETTER - uklad 2-kolumnowy wg makiety Design22 (copy z lewej, formularz
   z prawej) BEZ ruszania bloku Gutenberg. Celuje w grupe zawierajaca formularz
   przez :has() (wsparcie przegladarek 2023+, pewne w 2026). Tylko desktop -
   na mobile zostaje naturalny stack (jedna kolumna, wysrodkowany).

   >>> Jesli po wdrozeniu na 1280px cokolwiek wyglada zle: usun/wykomentuj CALY
       ten blok @media - reszta (forma + karty opinii) dziala niezaleznie. <<<
   Struktura potwierdzona z zywego HTML 2026-07-18: grupa #2e2321 ma dzieci
   w kolejnosci: p(eyebrow) -> h2 -> p(podtytul) -> form.fn-newsletter-form.
   ===================================================================== */
@media (min-width: 900px) {
	.wp-block-group.has-background:has(> .fn-newsletter-form) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: center;
		max-width: 1240px;
		margin-left: auto;
		margin-right: auto;
	}
	.wp-block-group:has(> .fn-newsletter-form) > p,
	.wp-block-group:has(> .fn-newsletter-form) > h2 {
		grid-column: 1;
		text-align: left !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 480px;
	}
	.wp-block-group:has(> .fn-newsletter-form) > p:first-of-type { grid-row: 1; align-self: end; }
	.wp-block-group:has(> .fn-newsletter-form) > h2               { grid-row: 2; }
	.wp-block-group:has(> .fn-newsletter-form) > p:nth-of-type(2) { grid-row: 3; align-self: start; }
	.wp-block-group:has(> .fn-newsletter-form) > .fn-newsletter-form {
		grid-column: 2;
		grid-row: 1 / 4;
		align-self: center;
		margin: 0;
		max-width: 460px;
	}
	/* komunikat po zapisie (rzadki, tylko po submit) - nie lamie ukladu */
	.wp-block-group:has(> .fn-newsletter-form) > .fn-newsletter-message {
		grid-column: 2;
		text-align: left;
		margin: 8px 0 0;
	}
}

/* --- Rozklad ocen w karcie opinii (Trusted Shops, realne dane) 2026-07-19 --- */
.fn-testi-dist{ display:flex; flex-direction:column; gap:8px; margin:0 0 16px; }
.fn-testi-distrow{ display:flex; align-items:center; gap:10px; }
.fn-testi-distlabel{ flex:0 0 30px; font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:600; color:#2E2321; white-space:nowrap; }
.fn-testi-distlabel span{ color:#C9A15A; margin-left:1px; }
.fn-testi-disttrack{ flex:1 1 auto; height:8px; background:#F0E7E2; border-radius:6px; overflow:hidden; }
.fn-testi-distfill{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#C9A15A,#A34B65); }
.fn-testi-distpct{ flex:0 0 44px; text-align:right; font-family:'Poppins',sans-serif; font-size:12px; font-weight:600; color:#2E2321; }
.fn-testi-card--crit .fn-testi-critlist{ margin-top:2px; padding-top:14px; border-top:1px solid #EFE6E1; }


/* ---------------------------------------------------------------------------
   2026-07-25: pozostale 12 kategorii jako male kafle ze zdjeciem
   (wczesniej tekstowe pigulki). Ten sam jezyk wizualny co kafle hero:
   zdjecie + przyciemnienie + biala nazwa + zloty licznik, tylko mniejsze.
   Stare reguly .fn-cat-pill zostawione celowo - nic ich juz nie renderuje,
   ale nie usuwam cudzego kodu bez potrzeby.
--------------------------------------------------------------------------- */
/* ZMIANA 13.08.2026 - z grid na flex-wrap z wysrodkowaniem ostatniego rzedu.
   Powod: siatka miala 6 / 4 / 2 kolumny, wiec dzialala ladnie wylacznie przy
   liczbie kafli podzielnej przez 12. Po dodaniu kategorii "Lakiery klasyczne"
   kafli jest 13 i na KAZDEJ szerokosci zostawal samotny kafel dosuniety do
   lewej (zmierzone: 6+6+1, 4+4+4+1, 2x6+1) - wygladalo na niedokonczone.
   Flex z justify-content:center nie zmienia nic dla rzedow pelnych (kafle i tak
   wypelniaja 100% szerokosci), a niepelny ostatni rzad centruje. Szerokosci
   liczone tym samym wzorem co wczesniejsze kolumny, wiec rozmiar kafla
   pozostaje bez zmian. Dzieki temu sekcja zniesie tez kazda kolejna kategorie,
   ktora doda Adrian, bez wracania do CSS. */
.fn-cat-tiles{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.fn-cat-tiles > .fn-cat-tile{ flex: 0 0 calc((100% - 5 * 14px) / 6); }
@media (max-width: 1024px){
  .fn-cat-tiles{ gap: 12px; }
  .fn-cat-tiles > .fn-cat-tile{ flex: 0 0 calc((100% - 3 * 12px) / 4); }
}
@media (max-width: 767px){
  .fn-cat-tiles{ gap: 10px; }
  .fn-cat-tiles > .fn-cat-tile{ flex: 0 0 calc((100% - 10px) / 2); }
}

.fn-cat-tile{
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #E7DAD4;
  background: #F3E9E5;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fn-cat-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(46, 35, 33, .16);
}
.fn-cat-tile__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.fn-cat-tile:hover .fn-cat-tile__img{ transform: scale(1.06); }

.fn-cat-tile__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(46,35,33,0) 38%, rgba(46,35,33,.78) 100%);
}
.fn-cat-tile__body{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fn-cat-tile__name{
  font-family: var(--fn-font-heading, 'Playfair Display', Georgia, serif);
  font-size: 15px;
  line-height: 1.22;
  color: #FBF7F5;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.fn-cat-tile__count{
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-size: 11.5px;
  color: var(--fn-gold, #C9A15A);
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
@media (max-width: 767px){
  .fn-cat-tile__name{ font-size: 13.5px; }
  .fn-cat-tile__count{ font-size: 11px; }
}
@media (prefers-reduced-motion: reduce){
  .fn-cat-tile, .fn-cat-tile__img{ transition: none; }
  .fn-cat-tile:hover{ transform: none; }
  .fn-cat-tile:hover .fn-cat-tile__img{ transform: none; }
}

/* ==========================================================================
   2026-08-20 — REALNE OPINIE Z TRESCIA (Trusted Shops / eTrusted).
   Cytaty renderowane po stronie serwera (fn_design_home_get_ts_quotes),
   we wlasnej marce: Playfair na tytulach, roz #A34B65, zloto #C9A15A.
   UWAGA: ZADNYCH transition na opacity/visibility — kontener GTM klienta
   (petla 404 na sgw.stape.bg) potrafi zamrozic przejscia CSS na wartosci
   startowej i element zostaje niewidoczny. Wylacznie transform/box-shadow.
   ========================================================================== */

.fn-testi-quotes { margin-top: 34px; }

.fn-testi-quotes-head { text-align: center; margin: 0 0 20px; }

.fn-testi-quotes-title {
  font-family: var(--fn-font-heading, 'Playfair Display', Georgia, serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fn-text, #2E2321);
  margin: 0 0 6px;
}

.fn-testi-quotes-sub {
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-size: 13.5px;
  line-height: 1.6;
  color: #756A65;
  margin: 0;
}

/* Scroller: tor + dwie strzalki POD torem (nie po bokach - zaden ujemny offset,
   wiec nie ma jak wypchnac strony w poziomie). Strzalki odslania JS. */
.fn-testi-quotes-scroller {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Natywny kontener przewijany: dziala palcem, gladzikiem i strzalkami klawiatury
   TAKZE bez JavaScriptu. Nic nie startuje ukryte - karty poza kadrem sa po prostu
   przewiniete, nie schowane, wiec czytnik ekranu widzi wszystkie. */
.fn-testi-quotes-grid {
  order: 1;
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  gap: 18px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* zapas, bo overflow-y jest przyciety: miejsce na uniesienie karty i jej cien */
  padding: 6px 2px 14px;
  scrollbar-width: thin;
  scrollbar-color: #DDD0CB transparent;
}

.fn-testi-quotes-grid:focus-visible {
  outline: 2px solid var(--fn-primary, #A34B65);
  outline-offset: 3px;
  border-radius: 16px;
}

.fn-testi-quotes-grid::-webkit-scrollbar { height: 8px; }
.fn-testi-quotes-grid::-webkit-scrollbar-track { background: #F3E9E5; border-radius: 6px; }
.fn-testi-quotes-grid::-webkit-scrollbar-thumb { background: #DDD0CB; border-radius: 6px; }
.fn-testi-quotes-grid::-webkit-scrollbar-thumb:hover { background: var(--fn-accent, #C9A15A); }

/* 3 karty widoczne na desktopie, reszta na wyciagniecie przewiniecia.
   box-sizing jawnie: szerokosc liczymy calc-iem, wiec padding i ramka MUSZA sie
   miescic w tej wartosci - inaczej karty wyszlyby szersze niz 1/3 toru. */
.fn-testi-quotes-grid .fn-testi-quote {
  box-sizing: border-box;
  flex: 0 0 calc((100% - 36px) / 3);
  scroll-snap-align: start;
}

/* Strzalki. Zaden transition na opacity/visibility - tylko transform i kolory. */
.fn-testi-nav {
  order: 2;
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-size: 24px;
  line-height: 1;
  color: var(--fn-secondary, #2E2321);
  background: var(--fn-white, #FFFFFF);
  border: 1px solid var(--fn-border, #DDD0CB);
  border-radius: 50%;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.fn-testi-nav--next { order: 3; }

/* WAZNE: .fn-testi-nav ustawia display:flex, wiec samo [hidden] z przegladarki
   by przegralo i strzalki pokazalyby sie mimo braku JS. Stad jawna regula. */
.fn-testi-nav[hidden] { display: none; }

.fn-testi-nav:hover {
  background: var(--fn-primary, #A34B65);
  border-color: var(--fn-primary, #A34B65);
  color: #FFFFFF;
  transform: scale(1.06);
}

.fn-testi-nav:focus-visible {
  outline: 2px solid var(--fn-primary, #A34B65);
  outline-offset: 2px;
}

.fn-testi-nav[disabled] {
  color: #C4B7B1;
  background: #FBF7F5;
  border-color: #EFE6E1;
  cursor: default;
}

.fn-testi-nav[disabled]:hover {
  background: #FBF7F5;
  border-color: #EFE6E1;
  color: #C4B7B1;
  transform: none;
}

.fn-testi-quote {
  position: relative;
  margin: 0;
  padding: 22px 22px 18px;
  background: var(--fn-white, #FFFFFF);
  border: 1px solid var(--fn-border, #DDD0CB);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.fn-testi-quote::before {
  content: "\201D";
  position: absolute;
  top: 2px;
  right: 16px;
  font-family: var(--fn-font-heading, 'Playfair Display', Georgia, serif);
  font-size: 58px;
  line-height: 1;
  color: #F3E9E5;
  pointer-events: none;
}

.fn-testi-quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(46, 35, 33, .09);
}

.fn-testi-quote-stars {
  position: relative;
  z-index: 1;
  font-size: 15px;
  letter-spacing: 1.5px;
  line-height: 1;
  color: var(--fn-accent, #C9A15A);
}

.fn-testi-quote-title {
  position: relative;
  z-index: 1;
  font-family: var(--fn-font-heading, 'Playfair Display', Georgia, serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fn-text, #2E2321);
}

/* blockquote: twardy reset, motyw lubi doklejac ramki i wlasne cudzyslowy */
.fn-testi-quote-text {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  quotes: none;
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-size: 13.5px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  color: #4A3F3A;
}

.fn-testi-quote-text::before,
.fn-testi-quote-text::after { content: none; }

.fn-testi-quote-meta {
  position: relative;
  z-index: 1;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid #F0E7E2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-size: 11.5px;
  color: #756A65;
}

.fn-testi-quote-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--fn-primary, #A34B65);
}

.fn-testi-quote-verified svg {
  width: 13px;
  height: 13px;
  min-width: 13px;
  max-width: 13px;
  flex: 0 0 13px;
  display: block;
}

.fn-testi-quote-meta time { white-space: nowrap; }

.fn-testi-quotes-more {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--fn-font-body, 'Poppins', sans-serif);
  font-size: 13px;
}

.fn-testi-quotes-more a {
  color: var(--fn-primary, #A34B65);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(163, 75, 101, .35);
}

.fn-testi-quotes-more a:hover {
  color: #7E3A4F;
  border-bottom-color: #7E3A4F;
}

@media (max-width: 1024px) {
  .fn-testi-quotes-grid .fn-testi-quote { flex: 0 0 calc((100% - 18px) / 2); }
}

@media (max-width: 640px) {
  .fn-testi-quotes { margin-top: 26px; }
  .fn-testi-quotes-grid { gap: 14px; }
  .fn-testi-quotes-grid .fn-testi-quote { flex: 0 0 86%; }
  .fn-testi-quotes-title { font-size: 22px; }
  .fn-testi-quote { padding: 18px 18px 15px; }
  .fn-testi-quote::before { font-size: 48px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .fn-testi-quote { transition: none; }
  .fn-testi-quote:hover { transform: none; }
  .fn-testi-nav { transition: none; }
  .fn-testi-nav:hover { transform: none; }
  .fn-testi-quotes-grid { scroll-behavior: auto; }
}