/* Knobs - dostepnosc (skip-link + pasek preferencji + tryby). Zewnetrzny plik (bez inline). */

/* ---------------- Skip-link "Przejdz do tresci" (WCAG 2.4.1) ---------------- */
.knobs-skip{
  position:fixed; top:-60px; left:12px; z-index:100000;
  background:var(--k-ink,#1b1a18); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 8px 8px;
  font-size:.95rem; font-weight:600; text-decoration:none; transition:top .15s ease;
}
.knobs-skip:focus{ top:0; outline:3px solid var(--k-brass,#b08d57); outline-offset:2px }
/* fokus na landmarku po skoku - bez widocznego outline (to nie kontrolka), ale focusowalny */
#knobs-main:focus{ outline:none }

/* ============================================================================
 * Pasek preferencji dostepnosci (natywny, nasz kod). Bottom-LEFT.
 * ========================================================================== */
.knobs-a11y{ position:fixed; left:16px; bottom:16px; z-index:99990; }

.knobs-a11y__toggle{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--k-line,#e6e2da);
  background:var(--k-ink,#1b1a18); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 16px rgba(27,26,24,.22); transition:transform .15s ease, background .15s ease;
}
.knobs-a11y__toggle:hover{ transform:translateY(-2px); background:#000 }
.knobs-a11y__toggle:focus-visible{ outline:3px solid var(--k-brass,#b08d57); outline-offset:3px }

.knobs-a11y__panel{
  position:absolute; left:0; bottom:60px; width:min(90vw,300px);
  background:#fff; border:1px solid var(--k-line,#e6e2da); border-radius:14px;
  box-shadow:0 10px 40px rgba(27,26,24,.18); padding:.9rem; display:flex; flex-direction:column; gap:.55rem;
}
.knobs-a11y__panel[hidden]{ display:none }

.knobs-a11y__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.15rem }
.knobs-a11y__title{ font-size:1.02rem; font-weight:700; color:var(--k-ink,#1b1a18) }
.knobs-a11y__close{
  width:30px; height:30px; border:0; background:transparent; color:var(--k-ink-soft,#3d3b37);
  font-size:1.5rem; line-height:1; cursor:pointer; border-radius:6px;
}
.knobs-a11y__close:hover{ background:var(--k-surface,#f7f6f3) }
.knobs-a11y__close:focus-visible{ outline:2px solid var(--k-brass,#b08d57); outline-offset:2px }

.knobs-a11y__group{ display:flex; flex-direction:column; gap:.4rem }
.knobs-a11y__label{ font-size:.82rem; font-weight:600; color:var(--k-ink-soft,#3d3b37) }
.knobs-a11y__seg{ display:flex; gap:.35rem }
.knobs-a11y__seg button{
  flex:1; padding:.5rem .2rem; border:1px solid var(--k-line,#e6e2da); background:#fff;
  border-radius:9px; cursor:pointer; color:var(--k-ink,#1b1a18); font-weight:600;
}
.knobs-a11y__seg button:nth-child(1){ font-size:.92rem }
.knobs-a11y__seg button:nth-child(2){ font-size:1.02rem }
.knobs-a11y__seg button:nth-child(3){ font-size:1.14rem }
.knobs-a11y__seg button[aria-pressed="true"]{ background:var(--k-ink,#1b1a18); color:#fff; border-color:var(--k-ink,#1b1a18) }
.knobs-a11y__seg button:focus-visible{ outline:2px solid var(--k-brass,#b08d57); outline-offset:2px }

.knobs-a11y__opt{
  display:flex; align-items:center; justify-content:space-between; gap:.7rem;
  padding:.6rem .7rem; border:1px solid var(--k-line,#e6e2da); background:#fff;
  border-radius:10px; cursor:pointer; text-align:left; color:var(--k-ink,#1b1a18);
}
.knobs-a11y__opt:hover{ border-color:var(--k-brass,#b08d57) }
.knobs-a11y__opt:focus-visible{ outline:2px solid var(--k-brass,#b08d57); outline-offset:2px }
.knobs-a11y__opt-t{ font-size:.92rem; font-weight:500 }
/* switch (wizualny stan aria-pressed) */
.knobs-a11y__sw{ position:relative; width:38px; height:22px; flex:0 0 auto; background:var(--k-line,#e6e2da); border-radius:22px; transition:background .15s ease }
.knobs-a11y__sw::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .15s ease }
.knobs-a11y__opt[aria-pressed="true"] .knobs-a11y__sw{ background:var(--k-brass,#b08d57) }
.knobs-a11y__opt[aria-pressed="true"] .knobs-a11y__sw::after{ left:18px }

.knobs-a11y__reset{
  margin-top:.15rem; padding:.55rem; border:1px solid var(--k-line,#e6e2da); background:var(--k-surface,#f7f6f3);
  border-radius:10px; cursor:pointer; color:var(--k-ink-soft,#3d3b37); font-size:.86rem; font-weight:600;
}
.knobs-a11y__reset:hover{ background:var(--k-surface-2,#efece6) }
.knobs-a11y__reset:focus-visible{ outline:2px solid var(--k-brass,#b08d57); outline-offset:2px }
.knobs-a11y__foot{ margin:.15rem 0 0; font-size:.74rem; line-height:1.45; color:var(--k-muted-text,#6f6a61) }
.knobs-a11y__foot a{ color:var(--k-brass-text,#8a6b3d); text-decoration:underline }

/* Nie zaslaniaj sie z mobilnym bottombar (ktory jest na dole, pelna szerokosc <=900px):
   podnies przycisk nad pasek. */
/* mobile: a11y idzie do gornego paska (launcher na lewo od serduszka); panel = dropdown pod naglowkiem.
   Plywajacy przycisk chowamy - dolny lewy rog przejmuje Chwytek. */
.knobs-a11y-hdr{ display:none; background:none; border:0; cursor:pointer; padding:.2rem; color:var(--k-ink,#1b1a18); line-height:0 }
.knobs-a11y-hdr svg{ width:24px; height:24px }
@media(max-width:900px){
  .knobs-a11y-hdr{ display:inline-flex; align-items:center }
  .knobs-a11y__toggle{ display:none }
  .knobs-a11y__panel{ position:fixed; top:64px; right:8px; left:auto; bottom:auto;
    width:min(92vw,300px); max-height:calc(100vh - 120px); overflow:auto }
}
@media(prefers-reduced-motion:reduce){ .knobs-a11y__toggle, .knobs-a11y__sw, .knobs-a11y__sw::after{ transition:none } }

/* ============================================================================
 * Punktowe fixy kontrastu wtyczek (WCAG 1.4.3) - karta produktu
 * ========================================================================== */
/* przycisk ulubionych na karcie produktu (plugin TI daje #8d8d8c/#9e9d9b ~2,7-3,3:1 na bialym).
   Obejmujemy caly przycisk (tekst + ikona), NIE ruszajac stanu "na liscie" (--k-sale nizej w kaskadzie plugina). */
.knobs-single .tinv-wraper a.tinvwl_add_to_wishlist_button,
.knobs-single .tinv-wraper a.tinvwl_add_to_wishlist_button *,
.woocommerce-variation-add-to-cart .tinv-wraper a.tinvwl_add_to_wishlist_button,
.woocommerce-variation-add-to-cart .tinv-wraper a.tinvwl_add_to_wishlist_button *{ color:var(--k-ink-soft) !important }
/* "dodaj do koszyka" w stanie disabled (wariant niewybrany) - to nie [disabled], wiec
   nie jest zwolniony z kontrastu; ciemniejsze tlo -> bialy tekst >=4.5:1 */
.knobs-single .single_add_to_cart_button.disabled,
.knobs-single .single_add_to_cart_button:disabled{ background:#6f6f6f !important; color:#fff !important; opacity:1 !important }

/* ============================================================================
 * TRYBY (klasy nakladane na <html> przez knobs-a11y.js)
 * ========================================================================== */

/* Rozmiar tekstu - skalujemy root (typografia oparta o rem). */
html.knobs-a11y-fs-1{ font-size:112.5% }
html.knobs-a11y-fs-2{ font-size:125% }

/* Podkreslenie wszystkich linkow tresci. */
html.knobs-a11y-links a{ text-decoration:underline !important; text-underline-offset:2px }

/* Czytelna czcionka - systemowy, bardziej czytelny stack + luzniejsza typografia. */
html.knobs-a11y-readable, html.knobs-a11y-readable body,
html.knobs-a11y-readable :where(p,li,a,span,h1,h2,h3,h4,button,input,label,td,th,dd,dt){
  font-family:"Atkinson Hyperlegible","Verdana","Tahoma","Trebuchet MS",sans-serif !important;
  letter-spacing:.01em; word-spacing:.06em;
}
html.knobs-a11y-readable :where(p,li){ line-height:1.75 !important }

/* Zatrzymaj animacje (wymus zachowanie prefers-reduced-motion). */
html.knobs-a11y-still *, html.knobs-a11y-still *::before, html.knobs-a11y-still *::after{
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}

/* Wysoki kontrast - wzmocnienie tekstu/linkow/obramowan. Nadpisujemy zmienne motywu
   (uzywane w kolorach tekstu) + wymuszamy kontrastowe linki i widoczne obramowania pol. */
html.knobs-a11y-contrast{
  --k-ink:#000; --k-ink-soft:#000; --k-muted:#1a1a1a; --k-muted-text:#1a1a1a;
  --k-brass-text:#5c3f12; --k-line:#767676;
}
html.knobs-a11y-contrast body{ color:#000 }
html.knobs-a11y-contrast a{ color:#0b3d91 !important; text-decoration:underline !important }
html.knobs-a11y-contrast :where(input,select,textarea){ border:2px solid #000 !important }
html.knobs-a11y-contrast :where(.knobs-topbar, .has-muted-color){ color:#000 !important }
/* przywroc czytelny kolor tekstu paska w kontrascie (panel jest bialy) */
html.knobs-a11y-contrast .knobs-a11y__toggle{ background:#000; border-color:#000 }