/* ============================================================
   Szkoła AI — SZATA "BRUTAL" · warstwa site-wide (skins/brutal.css)
   Neobrutalizm: Archivo Black / Space Mono · radius 0 · ramki 3px
   · twarde cienie 6px 6px 0 · hover = natychmiastowa inwersja.
   KAŻDA reguła scoped: html[data-shool-skin="brutal"] — warstwa
   jest inertna, gdy szata nieaktywna. Kolory WYŁĄCZNIE var(--sa-*)
   + neutralne rgba/#fff/#000.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

/* ---------- 0. tokeny warstwy + przejęcie rodzin fontów stron ---------- */
html[data-shool-skin="brutal"]{
  --bru-disp:'Archivo Black',Impact,'Arial Black',sans-serif;
  --bru-mono:'Space Mono',ui-monospace,'Cascadia Mono',Menlo,Consolas,monospace;
  --bru-bd:3px solid var(--sa-txt);
  --bru-hard:6px 6px 0 rgba(0,0,0,.9);
  --bru-accsh:6px 6px 0 var(--sa-acc);
  --bru-hard-lg:8px 8px 0 rgba(0,0,0,.9);
  --bru-accsh-lg:8px 8px 0 var(--sa-acc);
  --bru-pop:10px 10px 0 var(--sa-acc);
  --bru-snap:steps(2,end);
  /* nadpisanie fontowych zmiennych :root podstron (wyższa specyficzność) */
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --sans:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --body:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --ss-mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --mk-mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --shool-mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
}

/* ---------- 1. global: fonty, radius 0, selekcja, focus ---------- */
html[data-shool-skin="brutal"] body{ font-family:var(--bru-mono); }
html[data-shool-skin="brutal"] *,
html[data-shool-skin="brutal"] *::before,
html[data-shool-skin="brutal"] *::after{ border-radius:0 !important; }
html[data-shool-skin="brutal"] ::selection{ background:var(--sa-acc); color:var(--sa-bg); }
html[data-shool-skin="brutal"] :focus-visible{ outline:3px solid var(--sa-acc2); outline-offset:2px; }

/* ---------- 2. tekstura: brutalna siatka (overlay, inertna dla klików) ---------- */
html[data-shool-skin="brutal"] body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(var(--sa-acc-rgb),.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(var(--sa-acc-rgb),.05) 0 1px, transparent 1px 48px);
}
/* miękkie glow/aurory OFF — brutalizm nie zna blur */
html[data-shool-skin="brutal"] .aurora,
html[data-shool-skin="brutal"] .tcrs-aurora,
html[data-shool-skin="brutal"] .mk-aurora,
html[data-shool-skin="brutal"] .ss-aurora,
html[data-shool-skin="brutal"] .ss-price-glow,
html[data-shool-skin="brutal"] .mk-box-glow,
html[data-shool-skin="brutal"] .mk-box-front::before{ display:none !important; }

/* ---------- 3. nagłówki: Archivo Black, uppercase 900 ---------- */
html[data-shool-skin="brutal"] h1,
html[data-shool-skin="brutal"] h2,
html[data-shool-skin="brutal"] h3,
html[data-shool-skin="brutal"] h4,
html[data-shool-skin="brutal"] .tcrs-name,
html[data-shool-skin="brutal"] .mk-box-title,
html[data-shool-skin="brutal"] .mk-state-h,
html[data-shool-skin="brutal"] .unlock-title{
  font-family:var(--bru-disp); font-weight:900; text-transform:uppercase;
  letter-spacing:.01em; line-height:1.08;
}
/* player: nagłówki mają gradient-clip → pełny kolor tuszu */
html[data-shool-skin="brutal"] .lesson-title,
html[data-shool-skin="brutal"] .lesson-body h2{
  background:none !important; background-image:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important; color:var(--sa-txt) !important;
}
/* kickery jako stemple na akcencie */
html[data-shool-skin="brutal"] .kicker,
html[data-shool-skin="brutal"] .lesson-kicker,
html[data-shool-skin="brutal"] .ss-eyebrow,
html[data-shool-skin="brutal"] .card-tag,
html[data-shool-skin="brutal"] .mk-box-eyebrow,
html[data-shool-skin="brutal"] .mk-course-tag{
  display:inline-block; font-family:var(--bru-mono); font-weight:700;
  background:var(--sa-acc); color:var(--sa-bg); padding:3px 10px; letter-spacing:.12em;
}
/* ceny — wielki display */
html[data-shool-skin="brutal"] .sat-buy .price,
html[data-shool-skin="brutal"] .tcrs-price,
html[data-shool-skin="brutal"] .ss-price-value{
  font-family:var(--bru-disp); color:var(--sa-acc); text-shadow:none;
}
html[data-shool-skin="brutal"] .sat-step .n{ color:var(--sa-acc); font-family:var(--bru-disp); }

/* ---------- 4. PRZYCISKI: blokowe, ramka 3px, twardy cień, inwersja ---------- */
html[data-shool-skin="brutal"] .cta, html[data-shool-skin="brutal"] .ss-cta,
html[data-shool-skin="brutal"] .mk-cta, html[data-shool-skin="brutal"] .mk-mod-unlock,
html[data-shool-skin="brutal"] .mk-box-enter, html[data-shool-skin="brutal"] .tcrs-buy,
html[data-shool-skin="brutal"] .tcrs-more, html[data-shool-skin="brutal"] .ku-btn,
html[data-shool-skin="brutal"] .locked-btn, html[data-shool-skin="brutal"] .unlock-yes,
html[data-shool-skin="brutal"] .unlock-no, html[data-shool-skin="brutal"] .nav-btn,
html[data-shool-skin="brutal"] .complete-btn, html[data-shool-skin="brutal"] .cert-btn,
html[data-shool-skin="brutal"] .kc-toggle, html[data-shool-skin="brutal"] .drawer-toggle,
html[data-shool-skin="brutal"] .lms-link, html[data-shool-skin="brutal"] .theme-toggle,
html[data-shool-skin="brutal"] .f-go, html[data-shool-skin="brutal"] .cs-btn,
html[data-shool-skin="brutal"] .pc-btn, html[data-shool-skin="brutal"] .chip,
html[data-shool-skin="brutal"] .ai-demo-run{
  font-family:var(--bru-mono); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  border:var(--bru-bd); background:var(--sa-surface); color:var(--sa-txt);
  box-shadow:4px 4px 0 rgba(0,0,0,.9); text-decoration:none;
  transition:transform .12s var(--bru-snap), box-shadow .12s var(--bru-snap);
}
/* primary: pełny akcent + czarny twardy cień */
html[data-shool-skin="brutal"] .cta, html[data-shool-skin="brutal"] .ss-cta,
html[data-shool-skin="brutal"] .mk-cta, html[data-shool-skin="brutal"] .mk-mod-unlock,
html[data-shool-skin="brutal"] .mk-box-enter, html[data-shool-skin="brutal"] .tcrs-buy,
html[data-shool-skin="brutal"] .locked-btn, html[data-shool-skin="brutal"] .unlock-yes,
html[data-shool-skin="brutal"] .f-go, html[data-shool-skin="brutal"] .ai-demo-run,
html[data-shool-skin="brutal"] #op-card .ku-btn, html[data-shool-skin="brutal"] #cap-card .ku-btn{
  background:var(--sa-acc); color:var(--sa-bg); box-shadow:var(--bru-hard);
}
html[data-shool-skin="brutal"] .cta-ghost,
html[data-shool-skin="brutal"] #op-card .ku-btn[data-back]{
  background:var(--sa-surface); color:var(--sa-txt); border:var(--bru-bd);
}
/* hover: natychmiastowa inwersja bg↔txt (kolory bez transition = skok) */
html[data-shool-skin="brutal"] .cta:hover, html[data-shool-skin="brutal"] .ss-cta:hover,
html[data-shool-skin="brutal"] .mk-cta:hover, html[data-shool-skin="brutal"] .mk-mod-unlock:hover,
html[data-shool-skin="brutal"] .tcrs-buy:hover, html[data-shool-skin="brutal"] .tcrs-more:hover,
html[data-shool-skin="brutal"] .ku-btn:hover, html[data-shool-skin="brutal"] .locked-btn:hover,
html[data-shool-skin="brutal"] .unlock-yes:hover, html[data-shool-skin="brutal"] .unlock-no:hover,
html[data-shool-skin="brutal"] .nav-btn:hover:not(:disabled),
html[data-shool-skin="brutal"] .complete-btn:hover, html[data-shool-skin="brutal"] .cert-btn:hover,
html[data-shool-skin="brutal"] .kc-toggle:hover, html[data-shool-skin="brutal"] .drawer-toggle:hover,
html[data-shool-skin="brutal"] .lms-link:hover, html[data-shool-skin="brutal"] .theme-toggle:hover,
html[data-shool-skin="brutal"] .f-go:hover, html[data-shool-skin="brutal"] .cs-btn:hover,
html[data-shool-skin="brutal"] .pc-btn:hover, html[data-shool-skin="brutal"] .chip:hover,
html[data-shool-skin="brutal"] .ai-demo-run:hover:not(:disabled),
html[data-shool-skin="brutal"] #op-card .ku-btn:hover, html[data-shool-skin="brutal"] #cap-card .ku-btn:hover{
  background:var(--sa-txt); color:var(--sa-bg); border-color:var(--sa-txt);
  filter:none; transform:translate(-2px,-2px); box-shadow:var(--bru-accsh);
}
html[data-shool-skin="brutal"] .cta:active, html[data-shool-skin="brutal"] .ss-cta:active,
html[data-shool-skin="brutal"] .mk-cta:active, html[data-shool-skin="brutal"] .tcrs-buy:active,
html[data-shool-skin="brutal"] .ku-btn:active, html[data-shool-skin="brutal"] .nav-btn:active,
html[data-shool-skin="brutal"] .complete-btn:active, html[data-shool-skin="brutal"] .f-go:active,
html[data-shool-skin="brutal"] .cs-btn:active, html[data-shool-skin="brutal"] .chip:active{
  transform:translate(3px,3px); box-shadow:0 0 0 var(--sa-acc);
}

/* ---------- 5. KARTY / PANELE: ramka 3px + twardy cień ---------- */
html[data-shool-skin="brutal"] .card, html[data-shool-skin="brutal"] .sat-step,
html[data-shool-skin="brutal"] .rung, html[data-shool-skin="brutal"] .j-step,
html[data-shool-skin="brutal"] .ex-card, html[data-shool-skin="brutal"] .quiz-box,
html[data-shool-skin="brutal"] .prompt-compare, html[data-shool-skin="brutal"] .demo-box,
html[data-shool-skin="brutal"] .video-ph .vp-frame, html[data-shool-skin="brutal"] .faq-list details,
html[data-shool-skin="brutal"] .article .note, html[data-shool-skin="brutal"] .ku-card,
html[data-shool-skin="brutal"] .tcrs-card, html[data-shool-skin="brutal"] .mk-course,
html[data-shool-skin="brutal"] .ss-feat, html[data-shool-skin="brutal"] .badges .badge,
html[data-shool-skin="brutal"] .price-card, html[data-shool-skin="brutal"] .locked-card,
html[data-shool-skin="brutal"] .b2b, html[data-shool-skin="brutal"] .local,
html[data-shool-skin="brutal"] .sat-buy, html[data-shool-skin="brutal"] .ss-price-card,
html[data-shool-skin="brutal"] .ss-reg, html[data-shool-skin="brutal"] .src-list li,
html[data-shool-skin="brutal"] .af-node{
  background:var(--sa-surface); border:var(--bru-bd); border-style:solid;
  box-shadow:var(--bru-hard);
}
/* wyróżnione — cień akcentowy */
html[data-shool-skin="brutal"] .price-card.featured,
html[data-shool-skin="brutal"] .tcrs-card.feat,
html[data-shool-skin="brutal"] .sat-buy,
html[data-shool-skin="brutal"] .ss-price-card,
html[data-shool-skin="brutal"] .lesson-body .challenge-card{
  border:var(--bru-bd); box-shadow:var(--bru-accsh-lg); background:var(--sa-surface);
}
html[data-shool-skin="brutal"] .local,
html[data-shool-skin="brutal"] .article .note{ border-left:10px solid var(--sa-acc); }
html[data-shool-skin="brutal"] .lesson-body blockquote{
  border-left:8px solid var(--sa-acc); font-style:normal;
  background:var(--sa-surface); padding:.7rem 0 .7rem 1.1rem;
}
/* hover kart — pop, bez zmiany layoutu */
html[data-shool-skin="brutal"] .tcrs-card:hover,
html[data-shool-skin="brutal"] .ss-feat:hover,
html[data-shool-skin="brutal"] .card:hover,
html[data-shool-skin="brutal"] .sat-step:hover{
  transform:translate(-4px,-4px); border-color:var(--sa-txt); box-shadow:var(--bru-pop);
}
html[data-shool-skin="brutal"] .tcrs-card.locked:hover{ transform:none; box-shadow:var(--bru-hard); }
/* bąbelki czatu / demka */
html[data-shool-skin="brutal"] .bubble{ border:2px solid var(--sa-txt); }
html[data-shool-skin="brutal"] .ex-prompt{ border:2px solid var(--sa-txt); }

/* ---------- 6. OKNA TERMINALOWE: gruba rama + cień akcentowy ---------- */
html[data-shool-skin="brutal"] .terminal, html[data-shool-skin="brutal"] .appwin,
html[data-shool-skin="brutal"] .term, html[data-shool-skin="brutal"] .lesson-body .term,
html[data-shool-skin="brutal"] .tcrs-term, html[data-shool-skin="brutal"] .mk-term,
html[data-shool-skin="brutal"] .ss-term, html[data-shool-skin="brutal"] .ai-demo--ready,
html[data-shool-skin="brutal"] .kc-panel, html[data-shool-skin="brutal"] .cert-box,
html[data-shool-skin="brutal"] .unlock-box{
  border:var(--bru-bd); box-shadow:var(--bru-accsh-lg); background:var(--sa-bg2);
}
html[data-shool-skin="brutal"] .terminal-bar, html[data-shool-skin="brutal"] .appwin-bar,
html[data-shool-skin="brutal"] .titlebar, html[data-shool-skin="brutal"] .tcrs-bar,
html[data-shool-skin="brutal"] .mk-titlebar, html[data-shool-skin="brutal"] .ss-titlebar,
html[data-shool-skin="brutal"] .ai-demo-bar, html[data-shool-skin="brutal"] .cert-bar{
  border-bottom:var(--bru-bd); background:var(--sa-surface2);
  text-transform:uppercase; letter-spacing:.06em;
}
html[data-shool-skin="brutal"] .lesson-body .term::before{ border-bottom:var(--bru-bd); }
/* lampki okien = twarde kwadraty (radius zerowany globalnie) */
html[data-shool-skin="brutal"] .t-dot, html[data-shool-skin="brutal"] .titlebar .dot,
html[data-shool-skin="brutal"] .mk-dot, html[data-shool-skin="brutal"] .ss-dot,
html[data-shool-skin="brutal"] .tcrs-bar i, html[data-shool-skin="brutal"] .ai-demo-dot,
html[data-shool-skin="brutal"] .cert-dot{ border:2px solid rgba(0,0,0,.9); box-shadow:none; }

/* ---------- 7. paski postępu: pełny akcent, ramka 2px ---------- */
html[data-shool-skin="brutal"] .progress-bar, html[data-shool-skin="brutal"] .read-progress-bar,
html[data-shool-skin="brutal"] .xp-bar-fill, html[data-shool-skin="brutal"] .ku-bar i,
html[data-shool-skin="brutal"] .mk-course-fill{
  background:var(--sa-acc); box-shadow:none;
}
html[data-shool-skin="brutal"] .xp-bar, html[data-shool-skin="brutal"] .ku-bar,
html[data-shool-skin="brutal"] .mk-course-bar{
  border:2px solid var(--sa-txt); background:var(--sa-bg2); height:12px;
}
html[data-shool-skin="brutal"] .read-progress{ height:5px; }

/* ---------- 8. strony miast + baza wiedzy ---------- */
html[data-shool-skin="brutal"] .progress-track{
  border-bottom:var(--bru-bd); background:var(--sa-bg); backdrop-filter:none;
}
html[data-shool-skin="brutal"] .sat-badges span{
  border:2px solid var(--sa-txt); background:var(--sa-surface); color:var(--sa-txt);
}
html[data-shool-skin="brutal"] .sat-buy .price{ color:var(--sa-acc); }
html[data-shool-skin="brutal"] .faq-list summary{
  text-transform:uppercase; font-weight:700; padding:6px 8px;
}
html[data-shool-skin="brutal"] .faq-list summary:hover{
  background:var(--sa-txt); color:var(--sa-bg);
}
html[data-shool-skin="brutal"] .faq-list summary::after{ color:inherit; }
html[data-shool-skin="brutal"] .footer{ border-top:var(--bru-bd); }
html[data-shool-skin="brutal"] .sat-links a:hover,
html[data-shool-skin="brutal"] .article .crumbs a:hover,
html[data-shool-skin="brutal"] .tcrs-foot a:hover,
html[data-shool-skin="brutal"] .footer a:hover{
  background:var(--sa-txt); color:var(--sa-bg); text-decoration:none;
}

/* ---------- 9. PLAYER KURSU (kurs.html / css/kurs.css) ---------- */
html[data-shool-skin="brutal"] .kurs-topbar{
  background:var(--sa-bg); border-bottom:var(--bru-bd); backdrop-filter:none;
}
html[data-shool-skin="brutal"] .kurs-topbar .brand:hover{ background:var(--sa-txt); color:var(--sa-bg); }
html[data-shool-skin="brutal"] .kurs-sidebar{
  border-right:var(--bru-bd); background:var(--sa-bg2);
}
html[data-shool-skin="brutal"] .sidebar-head{ border-bottom:var(--bru-bd); }
html[data-shool-skin="brutal"] .module-link{
  border:2px solid var(--sa-txt); background:var(--sa-surface);
  box-shadow:3px 3px 0 rgba(0,0,0,.9); color:var(--sa-muted);
}
html[data-shool-skin="brutal"] .module-link:hover{
  background:var(--sa-txt); color:var(--sa-bg); transform:none;
}
html[data-shool-skin="brutal"] .module-link:hover .m-num,
html[data-shool-skin="brutal"] .module-link:hover .m-title{ color:var(--sa-bg); }
html[data-shool-skin="brutal"] .module-link.active{
  background:var(--sa-acc); color:var(--sa-bg); border-color:var(--sa-txt);
  box-shadow:3px 3px 0 rgba(0,0,0,.9);
}
html[data-shool-skin="brutal"] .module-link.active .m-num,
html[data-shool-skin="brutal"] .module-link.active .m-title{ color:var(--sa-bg); }
html[data-shool-skin="brutal"] .module-link.is-locked{ border-style:dashed; }
html[data-shool-skin="brutal"] .lesson-body table{ border:var(--bru-bd); }
html[data-shool-skin="brutal"] .lesson-body th{
  background:var(--sa-txt); color:var(--sa-bg); border-bottom:0;
  text-transform:uppercase; letter-spacing:.04em;
}
html[data-shool-skin="brutal"] .levelup-badge, html[data-shool-skin="brutal"] .badge-toast{
  background:var(--sa-surface); color:var(--sa-txt); border:var(--bru-bd);
  box-shadow:var(--bru-hard); backdrop-filter:none;
}
html[data-shool-skin="brutal"] .kc-panel{ backdrop-filter:none; }
html[data-shool-skin="brutal"] .unlock-box{ background:var(--sa-bg2); }
html[data-shool-skin="brutal"] .ai-demo-box{ border:2px solid var(--sa-txt); }
html[data-shool-skin="brutal"] .ai-demo-promptbox{ border-left:8px solid var(--sa-acc); }

/* ---------- 10. WP: terminal logowania + panel kursu ---------- */
html[data-shool-skin="brutal"] .denied-block{ box-shadow:var(--bru-hard); }
html[data-shool-skin="brutal"] .hint-home{ border-bottom-style:solid; }
html[data-shool-skin="brutal"] .hint-home:hover{ background:var(--sa-txt); color:var(--sa-bg) !important; }
html[data-shool-skin="brutal"] .topbar{ border-bottom:var(--bru-bd); background:var(--sa-bg3); }
html[data-shool-skin="brutal"] .cs-btn.is-active{
  background:var(--sa-acc); color:var(--sa-bg); border-color:var(--sa-txt);
  box-shadow:3px 3px 0 rgba(0,0,0,.9);
}
html[data-shool-skin="brutal"] .cs-btn.cs-admin{ background:var(--sa-surface); color:var(--sa-txt); }
html[data-shool-skin="brutal"] .topbar a.logout:hover{
  background:var(--sa-txt); color:var(--sa-bg); text-decoration:none;
}

/* ---------- 11. WP: /courses/ (tcrs) + konto (ku) ---------- */
html[data-shool-skin="brutal"] .tcrs-img{ border-bottom:var(--bru-bd); }
html[data-shool-skin="brutal"] .tcrs-buy{ background:var(--sa-acc); color:var(--sa-bg); }
html[data-shool-skin="brutal"] .ku-top{ border-bottom:var(--bru-bd); }
html[data-shool-skin="brutal"] .badges .badge.on{
  border-color:var(--sa-txt); background:var(--sa-surface); box-shadow:4px 4px 0 var(--sa-acc);
}

/* ---------- 12. WP: /moje-kursy/ (mk) ---------- */
html[data-shool-skin="brutal"] .mk-box, html[data-shool-skin="brutal"] .mk-box-shadow{ animation:none; }
html[data-shool-skin="brutal"] .mk-box-front{
  border:var(--bru-bd); background:var(--sa-surface);
  box-shadow:var(--bru-hard);
}
html[data-shool-skin="brutal"] .mk-box-side, html[data-shool-skin="brutal"] .mk-box-top{
  border:2px solid var(--sa-txt); background:var(--sa-bg2);
}
html[data-shool-skin="brutal"] .mk-box-badge{
  background:var(--sa-acc); border:var(--bru-bd); box-shadow:3px 3px 0 rgba(0,0,0,.9);
}
html[data-shool-skin="brutal"] .mk-box-enter{ animation:none; box-shadow:var(--bru-hard); }
html[data-shool-skin="brutal"] .mk-mod{ border:2px solid var(--sa-txt); }
html[data-shool-skin="brutal"] .mk-mod.is-off{ border-style:dashed; }
html[data-shool-skin="brutal"] .mk-cta-alt{ border-bottom:2px solid var(--sa-txt); }

/* ---------- 13. WP: sklep terminalowy (ss) ---------- */
html[data-shool-skin="brutal"] .ss-item{ border:2px solid transparent; }
html[data-shool-skin="brutal"] .ss-item:hover,
html[data-shool-skin="brutal"] .ss-item.is-active{
  background:var(--sa-txt); color:var(--sa-bg); border-color:var(--sa-txt);
}
html[data-shool-skin="brutal"] .ss-item:hover .ss-caret,
html[data-shool-skin="brutal"] .ss-item.is-active .ss-caret{ color:var(--sa-acc); }
html[data-shool-skin="brutal"] .ss-feat:hover{ transform:translate(-4px,-4px); }
html[data-shool-skin="brutal"] .ss-reg{ font-family:var(--bru-mono); }
html[data-shool-skin="brutal"] .ss-reveal{ transition:opacity .3s steps(4,end), transform .3s steps(4,end); }

/* ---------- 14. WooCommerce (koszyk / checkout) ---------- */
html[data-shool-skin="brutal"] .wc-block-components-button,
html[data-shool-skin="brutal"] .woocommerce a.button,
html[data-shool-skin="brutal"] .woocommerce button.button,
html[data-shool-skin="brutal"] a.add_to_cart_button,
html[data-shool-skin="brutal"] .wp-element-button{
  font-family:var(--bru-mono) !important; font-weight:700; text-transform:uppercase;
  border:var(--bru-bd) !important; box-shadow:var(--bru-hard);
  transition:transform .12s var(--bru-snap), box-shadow .12s var(--bru-snap);
}
html[data-shool-skin="brutal"] .wc-block-components-button:hover,
html[data-shool-skin="brutal"] .woocommerce a.button:hover,
html[data-shool-skin="brutal"] .woocommerce button.button:hover,
html[data-shool-skin="brutal"] a.add_to_cart_button:hover,
html[data-shool-skin="brutal"] .wp-element-button:hover{
  background:var(--sa-txt) !important; color:var(--sa-bg) !important;
  border-color:var(--sa-txt) !important; transform:translate(-2px,-2px);
  box-shadow:var(--bru-accsh);
}
html[data-shool-skin="brutal"] body.woocommerce-cart .wc-block-cart-item__image img{
  border:var(--bru-bd); box-shadow:var(--bru-accsh-lg);
}
html[data-shool-skin="brutal"] .wc-block-components-text-input input,
html[data-shool-skin="brutal"] .wc-block-components-text-input textarea,
html[data-shool-skin="brutal"] .wc-block-components-select select,
html[data-shool-skin="brutal"] .demo-input input{
  border:var(--bru-bd) !important; background:var(--sa-bg2); font-family:var(--bru-mono);
}
html[data-shool-skin="brutal"] .wc-block-components-totals-footer-item{
  border-top:var(--bru-bd);
}

/* ============================================================
   15. ANIMACJE SYGNATUROWE — twarde steps(4), zero ease.
   Klasy stanu ukrytego (.bru-slam/.bru-stamp) dodaje DOPIERO
   skins/brutal.js tuż przed obserwacją → bez JS wszystko widoczne.
   ============================================================ */
html[data-shool-skin="brutal"] .bru-slam{
  opacity:0; transform:translate(-16px,20px);
}
html[data-shool-skin="brutal"] .bru-slam.bru-in{
  opacity:1; transform:none;
  transition:transform .3s steps(4,end), opacity .3s steps(4,end);
  transition-delay:var(--bru-d,0s);
}
html[data-shool-skin="brutal"] .bru-stamp{ opacity:0; }
html[data-shool-skin="brutal"] .bru-stamp.bru-in{
  animation:bruStamp .32s steps(4,end) both;
  animation-delay:var(--bru-d,0s);
}
@keyframes bruStamp{
  0%{ opacity:0; transform:scale(1.12); }
  55%{ opacity:1; transform:scale(1); }
  75%{ transform:translate(-2px,2px); }
  90%{ transform:translate(2px,-1px); }
  100%{ opacity:1; transform:none; }
}

/* ---------- 16. reduced motion: tylko stan końcowy ---------- */
@media (prefers-reduced-motion: reduce){
  html[data-shool-skin="brutal"] .bru-slam,
  html[data-shool-skin="brutal"] .bru-stamp{
    opacity:1 !important; transform:none !important;
    animation:none !important; transition:none !important;
  }
  html[data-shool-skin="brutal"] .cta:hover,
  html[data-shool-skin="brutal"] .tcrs-card:hover,
  html[data-shool-skin="brutal"] .card:hover,
  html[data-shool-skin="brutal"] .ss-feat:hover{ transform:none; }
}

/* ---------- 17. mobile: mniejsze offsety cieni ---------- */
@media (max-width:640px){
  html[data-shool-skin="brutal"]{
    --bru-hard:4px 4px 0 rgba(0,0,0,.9);
    --bru-accsh:4px 4px 0 var(--sa-acc);
    --bru-hard-lg:5px 5px 0 rgba(0,0,0,.9);
    --bru-accsh-lg:5px 5px 0 var(--sa-acc);
    --bru-pop:6px 6px 0 var(--sa-acc);
  }
  html[data-shool-skin="brutal"] body::before{
    background-image:
      repeating-linear-gradient(0deg, rgba(var(--sa-acc-rgb),.04) 0 1px, transparent 1px 40px),
      repeating-linear-gradient(90deg, rgba(var(--sa-acc-rgb),.04) 0 1px, transparent 1px 40px);
  }
}