/* ═══════════════════════════════════════════════════════════════════════
   Mark366 — układ sklepu i kursów.

   Tokeny, typografia, przyciski i pola siedzą w `marka.css`, który ładuje się
   przed tym plikiem. Tutaj jest wyłącznie to, czego marka.css nie zna:
   siatka katalogu, karta produktu, koszyk, konto i Tutor.
   ═══════════════════════════════════════════════════════════════════════ */

.m366-waski{max-width:70ch}
.m366-tresc{min-height:52vh; padding:clamp(28px,3.4vw,48px) 0 clamp(48px,6vw,88px)}
.m366-pomin{position:absolute; left:-9999px; top:0; background:var(--atrament); color:var(--papier);
  padding:12px 20px; z-index:200}
.m366-pomin:focus{left:12px; top:12px}

/* ── nagłówek ────────────────────────────────────────────────────────── */
.m366-pasek{position:sticky; top:0; z-index:80; height:var(--kol); display:flex; align-items:center;
  background:color-mix(in srgb,var(--papier) 92%,transparent); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--wlos)}
.m366-pasek .m366-srodek{display:flex; align-items:center; justify-content:space-between;
  gap:24px; width:100%}
.m366-znak{display:inline-flex; align-items:center; text-decoration:none; color:inherit; flex:none}
.m366-znak .s{font-family:var(--f-disp),sans-serif; font-weight:300; font-size:25px;
  letter-spacing:.05em; text-transform:uppercase; line-height:1}
.m366-znak .l{font-size:15px; line-height:1; margin-left:7px; padding:6px 8px 5px;
  border-radius:5px; background:currentColor}
.m366-znak .l b{color:var(--papier); font-weight:400}
.m366-menu{display:flex; gap:30px; font-size:15px}
.m366-menu a{text-decoration:none; opacity:.68; padding:6px 0; transition:opacity .25s}
.m366-menu a:hover,.m366-menu a:focus-visible{opacity:1}
.m366-akcje{display:flex; align-items:center; gap:14px; flex:none}
.m366-koszyk{text-decoration:none; font-size:15px; opacity:.68; display:inline-flex;
  align-items:center; gap:7px; padding:10px 0; transition:opacity .25s}
.m366-koszyk:hover{opacity:1}
.m366-licznik{background:var(--acc); color:var(--papier); font-size:12px; font-weight:600;
  min-width:20px; height:20px; border-radius:10px; display:inline-grid; place-items:center; padding:0 6px}
.m366-cta{display:inline-flex; align-items:center; justify-content:center; padding:15px 26px;
  font-size:15px; font-weight:600; text-decoration:none; border-radius:2px;
  border:1px solid var(--atrament); background:var(--atrament); color:var(--papier) !important;
  transition:background .22s var(--e), color .22s var(--e)}
.m366-cta:hover{background:transparent; color:var(--atrament) !important}

/* ── menu na wąskim ekranie ──────────────────────────────────────────── */
/* Poniżej 980 px w pasku zostawało samo logo i koszyk — reszty sklepu nie
   dało się dosięgnąć inaczej niż ze stopki. To jest tego naprawa; panel
   powtarza rozwiązanie z części w Next, żeby zachowanie było jednakowe. */
.m366-hamburger{display:none; width:46px; height:46px; padding:0; border:0; background:none;
  cursor:pointer; align-items:center; justify-content:center; color:inherit}
.m366-kreski{display:block; width:22px; height:14px; position:relative}
.m366-kreski i{position:absolute; left:0; width:100%; height:1.5px; background:currentColor;
  border-radius:1px; transition:transform .3s var(--e), opacity .2s var(--e)}
.m366-kreski i:nth-child(1){top:0}
.m366-kreski i:nth-child(2){top:6.25px}
.m366-kreski i:nth-child(3){top:12.5px}
.m366-kreski.krzyzyk i:nth-child(1){transform:translateY(6.25px) rotate(45deg)}
.m366-kreski.krzyzyk i:nth-child(2){opacity:0}
.m366-kreski.krzyzyk i:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}

.m366-panel{position:fixed; inset:0; z-index:79; display:none}
.m366-panel.widac{display:block}
.m366-zaslona{position:absolute; inset:0; background:color-mix(in srgb,var(--noc) 46%,transparent);
  backdrop-filter:blur(3px)}
.m366-panel-tresc{position:absolute; inset:var(--kol) 0 0 auto; width:min(100%,420px);
  background:var(--papier); border-left:1px solid var(--wlos);
  padding:clamp(22px,4vw,34px) clamp(20px,3vw,34px) 40px; overflow-y:auto;
  overscroll-behavior:contain; display:flex; flex-direction:column; gap:8px}
.m366-panel-tresc .m366-etykieta{margin:16px 0 4px}
.m366-panel-tresc .m366-etykieta:first-child{margin-top:0}
.m366-panel-tresc ul{list-style:none; margin:0; padding:0}
.m366-panel-tresc li a{display:block; padding:12px 0; text-decoration:none; font-size:17px;
  border-bottom:1px solid var(--wlos); transition:color .2s var(--e)}
.m366-panel-tresc li a:hover{color:var(--acc)}
.m366-panel-stopka{margin-top:22px; display:grid; gap:14px}
.m366-panel-stopka .m366-cta{width:100%}
html.m366-menu-otwarte{overflow:hidden}

@media (max-width:980px){
  .m366-menu{display:none}
  .m366-hamburger{display:inline-flex}
}
@media (max-width:620px){ .m366-pasek .m366-cta{display:none} }

.m366-okruszki{font-size:14px; color:var(--cichy); margin-bottom:22px}
.m366-okruszki a{color:var(--cichy); text-decoration:none}
.m366-okruszki a:hover{color:var(--atrament)}

/* ── czoło strony sklepowej ──────────────────────────────────────────── */
/* Katalog bez wprowadzenia zaczyna się od siatki kafelków i wygląda jak
   magazyn. Jedno zdanie kontekstu ustawia, po co tu ktoś przyszedł. */
.m366-czolo{margin:0 0 clamp(28px,3.4vw,48px); padding-bottom:clamp(22px,2.6vw,34px);
  border-bottom:1px solid var(--wlos)}
.m366-czolo h1{margin:10px 0 0}
.m366-czolo .m366-duzy{margin-top:14px; max-width:56ch}

/* ── katalog ─────────────────────────────────────────────────────────── */
.woocommerce ul.products{display:grid; gap:clamp(16px,2vw,26px); margin:0; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{width:auto !important; margin:0 !important; float:none !important;
  background:var(--karta); border:1px solid var(--kreska); border-radius:3px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .35s var(--e), box-shadow .4s var(--e)}
.woocommerce ul.products li.product:hover{border-color:var(--acc); box-shadow:var(--cien-1)}
.woocommerce ul.products li.product a img{margin:0; border-radius:0; aspect-ratio:4/3; object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--f-disp),sans-serif; font-size:21px !important; font-weight:400;
  letter-spacing:-.02em; padding:20px 20px 0 !important; margin:0 !important; line-height:1.2}
.woocommerce ul.products li.product .price{display:block; padding:8px 20px 0;
  color:var(--atrament) !important; font-family:var(--f-disp),sans-serif; font-size:20px;
  font-weight:400; font-variant-numeric:tabular-nums}
.woocommerce ul.products li.product .price del{color:var(--cichy); font-weight:300}
.woocommerce ul.products li.product .button{margin:18px 20px 20px !important; align-self:flex-start}
.woocommerce .woocommerce-result-count{color:var(--cichy); font-size:15px}
.woocommerce .woocommerce-ordering select{width:auto; font-size:15px; padding:10px 12px}

/* ── karta produktu ──────────────────────────────────────────────────── */
.woocommerce div.product{display:grid; gap:clamp(26px,4vw,56px)}
@media (min-width:900px){ .woocommerce div.product{grid-template-columns:5fr 6fr; align-items:start} }
/* ⚠️ woocommerce-layout.css trzyma na tych dwóch blokach `width:48%` i
   `float:left` z czasów układu pływającego. W siatce oznacza to, że każda
   kolumna zajmuje połowę przydzielonego miejsca — zdjęcie schodziło do 259 px
   przy kolumnie 539 px. Zerujemy jedno i drugie. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary{width:100% !important; float:none !important; margin:0}
.woocommerce div.product div.images img{border-radius:3px; width:100%}
.woocommerce div.product .product_title{font-size:clamp(30px,3.6vw,52px); margin-bottom:0}
.woocommerce div.product p.price{font-family:var(--f-disp),sans-serif;
  font-size:clamp(26px,2.8vw,38px); color:var(--atrament) !important;
  font-weight:300; letter-spacing:-.026em; margin:14px 0 22px; font-variant-numeric:tabular-nums}
.woocommerce div.product p.price small{font-family:var(--f-body),sans-serif; font-size:14px;
  color:var(--cichy); font-weight:400; display:block; margin-top:6px; letter-spacing:0}
.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:clamp(18px,1.7vw,21px); line-height:1.5; color:var(--tekst)}
.woocommerce div.product form.cart{margin:26px 0 0}
.woocommerce div.product .product_meta{margin-top:24px; padding-top:20px;
  border-top:1px solid var(--wlos); font-size:14px; color:var(--cichy)}
.woocommerce div.product .product_meta a{color:var(--tekst)}

/* Co klient dostaje i jak to przebiega — na karcie usługi to ważniejsze
   od galerii zdjęć, bo produktu nie da się obejrzeć. */
.m366-pewnosc{margin-top:26px; padding-top:24px; border-top:1px solid var(--wlos)}
.m366-pewnosc ul{margin:0; padding:0; display:grid; gap:14px; list-style:none}
/* Punkt nie może być kontenerem giętkim: tekst wewnątrz jest mieszanką <b>
   i węzłów tekstowych, a każdy z nich stałby się osobną kolumną. Znacznik
   idzie więc na pozycjonowanie bezwzględne, a treść płynie normalnie. */
.m366-pewnosc li{position:relative; padding-left:18px; list-style:none;
  font-size:15.5px; line-height:1.55; color:var(--tekst)}
.m366-pewnosc li::before{content:""; position:absolute; left:0; top:.6em;
  width:6px; height:6px; background:var(--acc); border-radius:1px}
.m366-pewnosc li b{color:var(--atrament); font-weight:600}
.m366-pewnosc li a{color:var(--atrament); text-decoration:underline; text-underline-offset:3px}

.woocommerce div.product .woocommerce-tabs{grid-column:1/-1; margin-top:clamp(24px,3vw,48px)}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0; margin:0 0 26px;
  border-bottom:1px solid var(--kreska)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none !important; border:0 !important;
  border-radius:0 !important; margin:0 22px 0 0 !important; padding:0 !important}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none !important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:12px 0 !important; font-weight:600;
  font-size:15px; color:var(--cichy) !important; text-transform:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--atrament) !important;
  box-shadow:inset 0 -2px 0 var(--acc)}
/* Zakładka już nazywa sekcję — powtórzony nagłówek nad treścią był zbędny. */
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child{display:none}
.woocommerce div.product .woocommerce-tabs .panel{max-width:74ch; font-size:17px}
.woocommerce table.shop_attributes{border:0; width:100%; max-width:74ch}
.woocommerce table.shop_attributes th,.woocommerce table.shop_attributes td{border:0;
  border-bottom:1px solid var(--kreska); padding:13px 0; font-style:normal; font-size:16px}
.woocommerce table.shop_attributes th{color:var(--cichy); font-weight:600; width:34%}

/* powiązane produkty */
.woocommerce .related, .woocommerce .upsells{grid-column:1/-1; margin-top:clamp(40px,5vw,72px);
  padding-top:clamp(28px,3vw,44px); border-top:1px solid var(--wlos)}
.woocommerce .related > h2, .woocommerce .upsells > h2{margin-bottom:26px}

/* ── koszyk, kasa, konto ─────────────────────────────────────────────── */
.woocommerce table.shop_table{border:1px solid var(--kreska); border-radius:3px;
  background:var(--karta); border-collapse:separate; border-spacing:0}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:var(--kreska);
  padding:15px 16px; font-size:16px}
.woocommerce table.shop_table th{font-family:var(--f-body),sans-serif; font-weight:600; font-size:14px;
  color:var(--cichy); text-transform:none}
.woocommerce .cart_totals h2, .woocommerce-checkout h3{font-size:24px; margin-bottom:16px}
.woocommerce-info,.woocommerce-message,.woocommerce-error{border-top-color:var(--acc) !important;
  background:var(--karta); border-radius:3px; font-size:16px}
.woocommerce-info::before,.woocommerce-message::before{color:var(--acc) !important}
.woocommerce-MyAccount-navigation ul{list-style:none; padding:0; margin:0}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--kreska)}
.woocommerce-MyAccount-navigation li a{display:block; padding:13px 0; text-decoration:none;
  color:var(--tekst)}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--atrament); font-weight:600}

/* ── kursy (Tutor) ───────────────────────────────────────────────────── */
/* Tutor przynosi własny arkusz z zaokrągleniami i cieniami. Sprowadzamy go
   do tej samej płaskiej, papierowej estetyki co reszta serwisu. */
.tutor-course-list,.tutor-courses{gap:clamp(16px,2vw,26px)}
.tutor-card,.tutor-course-card{border:1px solid var(--kreska) !important; border-radius:3px !important;
  box-shadow:none !important; background:var(--karta) !important; overflow:hidden}
.tutor-card:hover,.tutor-course-card:hover{border-color:var(--acc) !important}
.tutor-course-name,.tutor-course-card-title,.tutor-course-details-title{
  font-family:var(--f-disp),sans-serif !important; font-weight:400 !important;
  letter-spacing:-.02em !important}
/* ⚠️ Klasy `.tutor-btn` Tutor używa również dla zwykłych odnośników tekstowych
   („Nie pamiętasz hasła?"). Nadanie jej tła przycisku zamienia link w czarny
   prostokąt w środku zdania — dlatego stylujemy wyłącznie warianty. */
.tutor-btn-primary,.tutor-btn.tutor-btn-primary{
  background:var(--atrament) !important; border:1px solid var(--atrament) !important;
  color:var(--papier) !important; border-radius:2px !important;
  font-family:var(--f-body),sans-serif !important; font-weight:600 !important;
  padding:15px 26px !important; text-transform:none !important}
.tutor-btn-primary:hover{background:transparent !important; color:var(--atrament) !important}
.tutor-btn-outline-primary,.tutor-btn-secondary{
  border:1px solid var(--atrament) !important; color:var(--atrament) !important;
  border-radius:2px !important; background:transparent !important;
  font-family:var(--f-body),sans-serif !important; font-weight:600 !important}
.tutor-btn-outline-primary:hover{background:var(--atrament) !important; color:var(--papier) !important}
/* odnośniki-nie-przyciski wracają do wyglądu odnośnika */
.tutor-btn-ghost,.tutor-btn-link{background:none !important; border:0 !important; padding:0 !important;
  color:var(--tekst) !important; font-weight:600 !important; text-decoration:underline !important;
  text-underline-offset:3px}
.tutor-btn-ghost:hover,.tutor-btn-link:hover{color:var(--atrament) !important}

/* Panel logowania renderuje Tutor, nie WooCommerce — stąd własne klasy. */
.tutor-login-wrap,.tutor-login-form-wrapper{max-width:460px; margin:0 auto;
  background:var(--karta); border:1px solid var(--kreska); border-radius:3px;
  padding:clamp(26px,3vw,40px)}
.tutor-color-primary,.tutor-color-primary a{color:var(--acc) !important}
.tutor-ratio,.tutor-course-thumbnail img{border-radius:0 !important}
/* Pasek postępu i akcenty — wszystko schodzi na kolor marki. */
.tutor-progress-bar .tutor-progress-value,.tutor-progress-filled{background:var(--acc) !important}
.tutor-form-control:focus{border-color:var(--atrament) !important; box-shadow:none !important}

/* ── stopka ──────────────────────────────────────────────────────────── */
.m366-stopka{padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px); border-top:1px solid var(--wlos)}
.m366-kolumny{display:grid; gap:clamp(24px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.m366-kolumny p{color:var(--tekst); font-size:14px; max-width:32ch; margin:14px 0 0}
.m366-kolumny h4{font-family:var(--f-disp),sans-serif; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cichy); font-weight:500; margin:0 0 12px}
.m366-kolumny a{display:block; padding:6px 0; text-decoration:none; color:var(--tekst);
  font-size:14px; transition:color .25s}
.m366-kolumny a:hover{color:var(--atrament)}
.m366-dol{grid-column:1/-1; margin-top:clamp(28px,3.4vw,44px); padding-top:20px;
  border-top:1px solid var(--wlos); display:flex; flex-wrap:wrap; gap:12px 26px;
  align-items:baseline; justify-content:space-between; font-size:14px; color:var(--cichy)}
.m366-praw{display:flex; flex-wrap:wrap; gap:12px 22px}
.m366-praw a{display:inline-block; padding:0}
@media (max-width:760px){ .m366-kolumny a,.m366-praw a{padding:10px 0} }

/* ── pola dotykowe na telefonie ──────────────────────────────────────── */
/* Minimum 44 px na palec. Na komputerze te odnośniki są w porządku. */
@media (max-width:760px){
  .m366-znak{padding:8px 0}
  .m366-okruszki{line-height:2.2}
  .m366-okruszki a{display:inline-block; padding:7px 0}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{padding-top:22px !important}
  .woocommerce-MyAccount-navigation li a{padding:15px 0}
}

/* ── dane do przelewu na potwierdzeniu ───────────────────────────────── */
.m366-przelew{margin:clamp(26px,3vw,44px) 0; padding:clamp(22px,2.6vw,32px);
  background:var(--karta); border:1px solid var(--kreska); border-left:3px solid var(--acc);
  border-radius:3px}
.m366-przelew h2{font-size:24px; margin-bottom:10px}
.m366-przelew p{max-width:62ch}
.m366-przelew dl{display:grid; grid-template-columns:auto 1fr; gap:10px 22px; margin:18px 0 0}
.m366-przelew dt{font-family:var(--f-disp),sans-serif; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cichy); padding-top:5px}
.m366-przelew dd{margin:0; font-size:17px; font-weight:500;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
@media (max-width:560px){ .m366-przelew dl{grid-template-columns:1fr; gap:2px 0}
  .m366-przelew dd{margin-bottom:12px} }

/* ── komunikaty ──────────────────────────────────────────────────────── */
/* Blokowa część WooCommerce rysuje własne powiadomienia w firmowym błękicie
   (#1e85be). Na papierowym tle wyglądają jak wstawka z innego serwisu. */
.wc-block-components-notice-banner{border:1px solid var(--kreska) !important;
  border-left:3px solid var(--acc) !important; border-radius:3px !important;
  background:var(--karta) !important; color:var(--atrament) !important;
  font-family:var(--f-body),sans-serif}
.wc-block-components-notice-banner.is-success{border-left-color:var(--acc) !important}
.wc-block-components-notice-banner.is-error{border-left-color:#9c5b4a !important}
.wc-block-components-notice-banner > svg{fill:var(--acc) !important}
.wc-block-components-notice-banner .wc-block-components-button{flex:none}
.woocommerce-message,.woocommerce-info{border-top:0 !important;
  border-left:3px solid var(--acc) !important; border:1px solid var(--kreska);
  border-left-width:3px}
.woocommerce-error{border-top:0 !important; border:1px solid var(--kreska);
  border-left:3px solid #9c5b4a !important}

/* ── podsumowanie zamówienia w kasie ─────────────────────────────────── */
.wc-block-components-totals-item__label,.wc-block-components-totals-item__value{
  font-family:var(--f-body),sans-serif}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--f-disp),sans-serif; font-weight:400; letter-spacing:-.02em}
.wc-block-components-title,.wp-block-woocommerce-checkout-order-summary-block{
  font-family:var(--f-disp),sans-serif}

/* ── barwa wiodąca Tutora ────────────────────────────────────────────── */
/* Tutor trzyma cały swój akcent w jednej zmiennej. Podmiana tu przestawia
   od razu zakładki, punktory, paski postępu i odnośniki — bez gonienia
   pojedynczych selektorów przy każdej aktualizacji wtyczki. */
:root{
  --tutor-color-primary:#7d8b9c;
  --tutor-color-primary-rgb:125,139,156;
  --tutor-color-primary-hover:#101014;
  --tutor-color-black:#101014;
  --tutor-color-secondary:#101014;
  --tutor-body-color:#4a4a52;
  --tutor-border-radius-6:2px;
  --tutor-border-radius-10:3px;
}
.tutor-course-details-page,.tutor-wrap{font-family:var(--f-body),sans-serif}
.tutor-nav-link.is-active,.tutor-nav-link:hover{color:var(--atrament) !important}
.tutor-nav-link.is-active::after{background:var(--acc) !important}
/* boczna karta z ceną — Tutor daje jej własny błękitny odcień tła */
.tutor-course-sidebar .tutor-card,.tutor-course-details-widget{
  background:var(--karta) !important; border:1px solid var(--kreska) !important;
  border-radius:3px !important; box-shadow:none !important}
.tutor-course-price,.tutor-course-details-widget .tutor-fs-4{
  font-family:var(--f-disp),sans-serif !important; font-weight:300 !important;
  letter-spacing:-.026em !important; color:var(--atrament) !important}

/* Tytuł kursu — Tutor renderuje stronę bez <h1>. */
.m366-tytul-kursu{margin:0 0 clamp(20px,2.4vw,32px)}
.m366-tytul-kursu .m366-etykieta{margin-bottom:10px}
/* Wnętrze karty z ceną ma u Tutora osobny, chłodny odcień (#f4f6f9), przez co
   na papierowym tle świeciło niebieskawo. Zrównujemy je z kartą. */
.tutor-card,.tutor-sidebar-card{background:var(--karta) !important;
  border:1px solid var(--kreska) !important; border-radius:3px !important;
  box-shadow:none !important}
.tutor-card-body,.tutor-card-footer{background:transparent !important}
.tutor-card-footer{border-top:1px solid var(--kreska) !important}

/* Tytuł nad zdjęciem. Szablon Tutora nie ma punktu zaczepienia przed miniaturą,
   a nadpisywanie szablonu w motywie trzeba by pilnować przy każdej aktualizacji.
   Kolejność wizualna załatwia to samo bez dotykania wtyczki. */
main.tutor-col-xl-8{display:flex; flex-direction:column}
main.tutor-col-xl-8 > .m366-tytul-kursu{order:-1}

/* ── pola formularzy Tutora ──────────────────────────────────────────── */
/* Tutor stawia własne `.tutor-form-control` z obramowaniem #e3e5eb — wobec
   papierowego tła daje to 1,25:1, a krawędź pola potrzebuje 3:1. Selektor musi
   być mocniejszy od wtyczkowego, stąd doklejony znacznik. */
input.tutor-form-control,textarea.tutor-form-control,select.tutor-form-control,
.tutor-form-control,.tutor-login-form-wrapper input{
  border:1px solid var(--obrys-pola) !important; border-radius:2px !important;
  background:var(--karta) !important; color:var(--atrament) !important;
  font-family:var(--f-body),sans-serif !important; font-size:16px !important;
  padding:13px 15px !important}
.tutor-form-control::placeholder,.tutor-login-form-wrapper input::placeholder{
  color:var(--cichy) !important; opacity:1}
.tutor-form-control:focus,.tutor-login-form-wrapper input:focus{
  border-color:var(--atrament) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent) !important}

/* ── przełącznik trybu ───────────────────────────────────────────────── */
.m366-motyw{width:42px; height:42px; flex:none; display:inline-grid; place-items:center;
  padding:0; border:1px solid transparent; border-radius:2px; background:none;
  color:inherit; cursor:pointer; transition:border-color .22s var(--e)}
.m366-motyw:hover{border-color:var(--kreska)}
.m366-motyw-ikony{position:relative; width:20px; height:20px; display:block}
.m366-motyw-ikony svg{position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transform:scale(.72) rotate(-24deg);
  transition:opacity .24s var(--e), transform .28s var(--e)}
.m366-motyw-ikony[data-wybor="system"] .i-system,
.m366-motyw-ikony[data-wybor="jasny"] .i-jasny,
.m366-motyw-ikony[data-wybor="ciemny"] .i-ciemny{opacity:1; transform:none}
@media (max-width:620px){ .m366-motyw{width:38px; height:38px} }

/* Tutor w trybie ciemnym: jego własne szarości (#9197a4, #v41…) schodzą wobec
   ciemnego tła poniżej 3:1. Przypinamy je do tokenów marki, które już mają
   policzony kontrast w obu trybach. */
:root{ --tutor-color-muted:var(--cichy); --tutor-color-hints:var(--cichy);
  --tutor-color-subdued:var(--tekst); --tutor-color-gray:var(--tekst);
  --tutor-color-white:var(--karta); }
.tutor-color-muted,.tutor-color-hints,.tutor-color-subdued{color:var(--cichy) !important}
.tutor-color-black{color:var(--atrament) !important}

/* ── baner zgody ─────────────────────────────────────────────────────── */
/* Wygląd i zachowanie takie samo jak w części ofertowej — klient nie ma
   powodu domyślać się, że przeszedł na inny silnik. */
.zgoda{position:fixed; inset:auto 0 0 0; z-index:100; background:var(--karta);
  border-top:1px solid var(--kreska); box-shadow:var(--cien-2);
  animation:zgoda-wjazd .5s var(--e) both}
@keyframes zgoda-wjazd{ from{transform:translateY(100%)} to{transform:none} }
@media (prefers-reduced-motion:reduce){ .zgoda{animation:none} }
.zgoda-tresc{max-width:1320px; margin:0 auto; padding:20px clamp(20px,3vw,40px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 30px}
.zgoda-tresc p{font-size:15px; line-height:1.5; max-width:68ch; margin:8px 0 0}
.zgoda-tresc a{color:var(--atrament); text-decoration:underline; text-underline-offset:3px}
.zgoda-akcje{display:flex; gap:12px; flex-wrap:wrap}
.zgoda-akcje .m366-przycisk{padding:13px 22px; font-size:14px}
@media (max-width:760px){
  .zgoda-tresc{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .zgoda-akcje{width:100%}
  .zgoda-akcje .m366-przycisk{flex:1}
}