.fr-product__top{display:grid;grid-template-columns:1fr 1fr;gap:64px;
  align-items:start;padding-block:0 88px}
.fr-product__title{margin:0 0 14px;font-size:44px}
.fr-product__lead{font-size:18px;line-height:1.6;color:var(--muted);margin-bottom:20px}
.fr-product__lead p{margin:0}
.fr-product__price{font-family:var(--f-display);font-size:40px;margin-bottom:28px}
.fr-product__price del{font-size:26px;color:var(--muted);margin-right:10px}
/* Okruszki biora --muted, a nie --dim. --dim na kosci sloniowej
   daje kontrast 4,00, a to jest tekst 14 px, wiec norma wynosi 4,5.
   --muted daje 7,50 i wyglada tak samo spokojnie. */
.fr-crumbs{font-size:14px;color:var(--muted);margin-bottom:20px}
.fr-crumbs a{color:var(--muted)}

.fr-stock{font-size:15px;color:var(--muted);margin:0 0 8px}
.fr-product__unavailable{border:1px solid var(--line);background:#fff;padding:24px;margin-top:8px}
.fr-product__unavailable p{margin:0 0 16px;font-size:17px;line-height:1.65}

.fr-product .quantity{display:inline-flex;align-items:center;border:1px solid var(--line);background:#fff}
.fr-product .quantity input{width:56px;height:62px;border:0;text-align:center;font-size:18px;font-weight:700;background:transparent}
.fr-product form.cart{display:block;margin-bottom:18px}
/* Element w selektorze, bo WooCommerce maluje ten przycisk swoim
   firmowym fioletem #7F54B3 regula `.woocommerce button.button.alt`,
   czyli dwie klasy plus element. Samo `.fr-product
   .single_add_to_cart_button` to dwie klasy, wiec przegrywa, mimo ze
   nasz arkusz wchodzi pozniej. Przycisk dzialal, wygladal jak
   przycisk, tylko nie byl nasz: fiolet obok zlota na zrzucie ekranu
   wyglada po prostu jak decyzja projektowa. To samo zlapane 24.09
   w koszyku (patrz zamowienie.css), tu 28.09 na karcie produktu. */
.fr-product button.single_add_to_cart_button.button{height:64px;padding-inline:36px;
  background:var(--ink);color:var(--ivory);border:0;border-radius:0;
  font-family:var(--f-body);font-size:18px;font-weight:700;cursor:pointer}
/* Wcisniecie: przycisk ugina sie pod palcem. Bez efektu najechania. */
.fr-product button.single_add_to_cart_button.button,.fr-sticky__btn{transition:transform 160ms var(--fr-ease-out)}
@media (prefers-reduced-motion:no-preference){
  .fr-product button.single_add_to_cart_button.button:active:not(:disabled):not(.disabled),
  .fr-sticky__btn:active:not([disabled]){transform:scale(.97)}
}
.fr-product button.single_add_to_cart_button.button:hover{background:var(--muted);color:var(--ivory)}
.fr-product button.single_add_to_cart_button.button.disabled,
.fr-product button.single_add_to_cart_button.button:disabled{background:var(--ink);
  color:var(--ivory);opacity:.45;cursor:not-allowed}

@media (max-width:900px){
  .fr-product__top{grid-template-columns:1fr;gap:26px;padding-bottom:44px}
  .fr-product__title{font-size:30px}
  .fr-product__price{font-size:32px}
}

/* Personalizacja: kafelki nad polami wtyczki */
.fpf-fields{border:1px solid var(--line);background:#fff;padding:26px;margin-bottom:26px}
.fpf-field{margin-bottom:18px}
.fpf-field > label{display:block;font-size:17px;font-weight:700;margin-bottom:10px}
.fr-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.fr-tile{display:flex;flex-direction:column;gap:4px;text-align:left;padding:18px;background:var(--ivory);
  border:1px solid var(--line);font-family:var(--f-body);font-size:16px;
  font-weight:700;color:var(--ink);cursor:pointer}
.fr-tile.is-on{border:2px solid var(--ink);background:var(--tint)}
.fr-tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Oryginalny select znika DOPIERO, gdy kafelki naprawde powstaly.
   Gdyby ukryl go zwykly CSS, awaria JavaScriptu odebralaby mozliwosc wyboru. */
.fpf-fields[data-fr-enhanced] .fr-field--enhanced select{position:absolute;
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.fpf-file input[type="file"]{display:block;width:100%;padding:18px;
  border:1px dashed #C0B392;background:var(--ivory);font-size:15px}
#fpf_totals{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:15px;color:var(--muted)}
#fpf_totals dd{font-family:var(--f-display);font-size:30px;color:var(--ink);margin:4px 0 0}

@media (max-width:900px){ .fr-tiles{grid-template-columns:1fr} }

/* Rada o kolorze */
.fr-advice{background:var(--ink);color:var(--ivory);padding:24px 26px;margin-bottom:28px}
.fr-advice__eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-on-dark);margin-bottom:12px}
.fr-advice p{margin:0 0 10px;font-size:16px;line-height:1.6}
.fr-advice p:last-child{margin-bottom:0}
.fr-advice__no{color:#A89C84}
.fr-advice__no a{color:var(--accent-on-dark);font-weight:700}

/* Przyklejony pasek zakupu, tylko telefon */
.fr-sticky{display:none}
@media (max-width:900px){
  /* Pasek pokazuje sie dopiero, gdy JavaScript podpial go pod prawdziwy
     przycisk. Bez tego byloby to na dole ekranu coś, co wyglada jak zakup,
     a po kliknieciu nic nie robi. */
  .fr-sticky.is-ready{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    gap:12px;align-items:center;padding:12px 20px;background:var(--ivory);
    border-top:1px solid var(--line)}
  .fr-sticky__price{font-family:var(--f-display);font-size:22px;flex-shrink:0}
  .fr-sticky__btn{flex-grow:1;height:56px;background:var(--ink);color:var(--ivory);
    border:0;font-family:var(--f-body);font-size:17px;font-weight:700}
  .fr-sticky__btn[disabled]{opacity:.45;cursor:not-allowed}
  body.fr-sticky-on{padding-bottom:84px}
  /* Okragly przycisk CookieYes do zmiany zgody stoi w lewym dolnym rogu,
     czyli dokladnie na cenie w pasku. Usunac go nie wolno (to droga do
     wycofania zgody), wiec podnosimy go nad pasek. */
  body.fr-sticky-on .cky-btn-revisit-wrapper{bottom:96px}
}

/* Swatche wariantow */
.fr-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:10px}
.fr-swatch{height:56px;background:var(--ivory);border:1px solid var(--line);
  font-family:var(--f-body);font-size:16px;font-weight:700;color:var(--ink);cursor:pointer}
.fr-swatch.is-on{border:2px solid var(--ink);background:var(--tint)}
.fr-swatch.is-unavailable{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.fr-swatch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fr-attr--enhanced select{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.fr-product table.variations{width:100%;border-collapse:collapse}
.fr-product table.variations th.label{text-align:left;padding:0 0 10px;font-size:17px}
.fr-product table.variations td.value{padding:0 0 20px;position:relative}
@media (max-width:900px){ .fr-swatches{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* Sekcja wymiarow */
.fr-fit__dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:26px 0 0}
.fr-fit__dim{border-top:2px solid var(--ink);padding-top:14px}
.fr-fit__value{font-family:var(--f-display);font-size:30px;line-height:1.1;margin:0}
.fr-fit__label{margin:6px 0 0;font-size:15px;color:var(--muted)}

/* Odnosnik tekstowy z podkresleniem */

/* Inne kolory */
.fr-kolory__head{display:flex;align-items:baseline;justify-content:space-between;gap:30px;margin-bottom:26px}
.fr-kolory__head h2{margin:0;font-size:34px}
.fr-kolory__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.fr-kolory__link{display:block;text-decoration:none}
.fr-kolory__link img{display:block;width:100%;height:auto;background:var(--tint)}
.fr-kolory__name{display:block;margin-top:12px;font-size:16px;font-weight:700}
.fr-kolory__price{display:block;margin-top:4px;font-size:15px;color:var(--muted)}
@media (max-width:900px){
  .fr-fit__dims{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .fr-fit__value{font-size:22px}
  .fr-kolory__head{flex-direction:column;gap:12px}
  .fr-kolory__head h2{font-size:26px}
  .fr-kolory__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Pasek zaufania pod przyciskiem zakupu.
   Dwie linijki, nie cztery. Kadence pokazywal tu jeszcze
   „Satysfakcja gwarantowana” i „Bezpieczne platnosci”, ktore nic nie
   wnosza i rozcienczaja te, ktore cos mowia. */
.fr-zaufanie{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.fr-zaufanie__punkt{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:var(--muted)}
.fr-zaufanie__punkt::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.fr-zaufanie__punkt a{color:var(--ink);text-underline-offset:3px}

/* „Powiadom, gdy wroci” na karcie niedostepnego koloru. */
.fr-powiadom{margin:18px 0 22px}
.fr-powiadom__label{display:block;font-size:17px;font-weight:700;color:var(--ink);margin-bottom:10px}
.fr-powiadom__rzad{display:flex;gap:10px;flex-wrap:wrap}
.fr-powiadom__pole{flex:1 1 220px;min-width:0;height:54px;padding:0 16px;font-size:16px;
  border:1px solid var(--line);background:#fff;color:var(--ink)}
.fr-powiadom__pole:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.fr-powiadom button.fr-powiadom__btn{height:54px;padding-inline:26px;background:var(--ink);color:var(--ivory);
  border:0;border-radius:0;font-family:var(--f-body);font-size:16px;font-weight:700;cursor:pointer}
.fr-powiadom button.fr-powiadom__btn:hover{background:var(--muted)}
.fr-powiadom__blad{margin:0 0 10px;font-size:15px;color:#8A2B20}
.fr-powiadom__stopka{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.fr-powiadom__ok{margin:18px 0 22px;padding:16px 18px;border:1px solid var(--line);
  background:var(--tint,#F4EFE3);font-size:16px;color:var(--ink)}
/* Pulapka na roboty: poza ekranem, ale nadal w drzewie dostepnosci,
   zeby czytnik ekranu przeczytal etykiete „zostaw puste”. */
.fr-powiadom__pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* ---------------------------------------------------------------
   Okolice przycisku zakupu.

   Zlapane pomiarem 28.09.2026 na karcie „Maly czarny”, po tym jak
   Mariusz napisal, ze ta sekcja wyglada jak blad. Byly trzy usterki
   i zadna z nich nie dawala bledu: strona sie renderowala, tylko
   wygladala na zepsuta.
   --------------------------------------------------------------- */

/* Kwota doplaty na kafelku. Zrodlem jest konfiguracja wtyczki, nie
   nasze ustawienia, zeby kafelek nie obiecywal innej kwoty niz ta,
   ktora naprawde doliczy sie w koszyku. */
.fr-tile__napis{font-size:17px;font-weight:700;line-height:1.3}
.fr-tile__cena{font-size:14px;font-weight:400;color:var(--muted)}
.fr-tile.is-on .fr-tile__cena{color:var(--ink)}

/* USTERKA 1: pusty bialy pasek pod przyciskiem.
   Wtyczka zawsze rysuje pojemnik „after-add-to-cart”, nawet gdy nie
   ma w nim ani jednego pola. Nasza regula .fpf-fields malowala go
   na bialo z obramowaniem, wiec pod przyciskiem stala pusta ramka
   wysoka na 54 px, wygladajaca jak niedomalowany element. */
.fpf-fields.after-add-to-cart:not(:has(.fpf-field)){display:none}

/* USTERKA 2: pole ilosci i przycisk stoja jedno pod drugim, a pole
   ma 67 px szerokosci przy przycisku na 225. Wygladalo to jak mala
   bialy kwadrat obok czarnej belki. Teraz oba siedza w jednym
   rzedzie, o tej samej wysokosci, a przycisk zabiera reszte miejsca.
   Pola wtyczki dostaja cala szerokosc, zeby siatka ich nie sciskala. */
.fr-product form.cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-bottom:18px}
.fr-product form.cart > .fpf-fields,
.fr-product form.cart > .fpf-fields-config-wrapper,
.fr-product form.cart > .woocommerce-variation-add-to-cart,
.fr-product form.cart > table.variations{flex:1 0 100%}
.fr-product form.cart .quantity{flex:0 0 auto}
.fr-product form.cart .quantity input{width:76px}
.fr-product button.single_add_to_cart_button.button{flex:1 1 200px}

/* USTERKA 3: „Zapisz konfiguracje produktu” i zdanie nad nim to
   narzedzie wtyczki widoczne WYLACZNIE dla administratora sklepu.
   Stalo w srodku kolumny zakupu, w domyslnym szarym guziku
   przegladarki, i czytalo sie jak czesc karty. Klientka tego nie
   widzi, ale przy kazdym ogladaniu strony wyglada to na usterke.
   Zwijamy do przypisu na brzegu. */
.fr-product .fpf-fields-config-wrapper{padding:12px 14px;border:1px dashed var(--line);
  background:var(--tint,#F4EFE3);font-size:13px;line-height:1.5;color:var(--muted)}
.fr-product .fpf-fields-config-wrapper p{margin:0 0 8px;font-size:13px}
.fr-product button.fpf-fields-config{height:34px;padding-inline:14px;background:transparent;
  border:1px solid var(--line);border-radius:0;font-family:var(--f-body);font-size:13px;
  color:var(--muted);cursor:pointer}
.fr-product button.fpf-fields-config:hover{border-color:var(--ink);color:var(--ink)}

/* Lista zyczen. Wtyczka zostawia goly guzik przegladarki, szary,
   z obramowaniem „outset”, po angielsku. Wyglada jak formularz
   z 1998 roku wstawiony w srodek karty. */
.fr-product button.woosw-btn{display:inline-flex;align-items:center;gap:8px;height:44px;
  padding-inline:18px;background:transparent;border:1px solid var(--line);border-radius:0;
  font-family:var(--f-body);font-size:15px;color:var(--muted);cursor:pointer}
.fr-product button.woosw-btn:hover{border-color:var(--ink);color:var(--ink)}

/* Link do przebiegu nadruku pod polem „Dodać nadruk logo?” (proces.js). */
.fr-pn-link{display:inline-block;margin:4px 0 14px;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fr-pn-link[hidden]{display:none}

/* Podglad zawieszki pod polem graweru (grawer.js). */
.fr-grawer{display:flex;align-items:center;gap:18px;margin:14px 0 4px}
.fr-grawer__wahadlo{flex:none;width:112px;transform-origin:50% 0}
.fr-grawer__svg{display:block;width:100%;height:auto;overflow:visible}
.fr-grawer__lancuszek{fill:none;stroke:#B9A673;stroke-width:1.6;stroke-dasharray:2.4 1.6}
.fr-grawer__kolko{fill:none;stroke:#B9A673;stroke-width:2}
.fr-grawer__blaszka{stroke:#8A7442;stroke-width:.8}
.fr-grawer__rant{fill:none;stroke:#F3E6BC;stroke-opacity:.55;stroke-width:.8}
.fr-grawer__otwor{fill:var(--ivory);stroke:#8A7442;stroke-width:.8}
.fr-grawer__napis{font-family:var(--f-display);fill:#4F4020;letter-spacing:.02em}
.fr-grawer__napis.is-przyklad{fill-opacity:.45}
.fr-grawer__podpis{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .fr-grawer__wahadlo.is-kolysze{animation:fr-grawer-kolysz 1.1s cubic-bezier(0.77,0,0.175,1) both}
}
@keyframes fr-grawer-kolysz{
  0%{opacity:0;transform:rotate(-9deg)}
  20%{opacity:1}
  45%{transform:rotate(5deg)}
  72%{transform:rotate(-2deg)}
  100%{opacity:1;transform:rotate(0)}
}