/* ==========================================================================
   MOTYW KOSARI - system wygladu (.hc): zmienne, typografia, przyciski, formularze,
   animacje, naglowek, menu konta, stopka i okienko newslettera.
   Kolory i fonty ida z Customizera (Wyglad -> Dostosuj): zmienne --brand, --dark, --bg...
   ustawia motyw w <head>; tutaj sa tylko wartosci zapasowe.
   Plik generowany z wzorca (build.js) - poprawki rob we wzorcu albo w sekcji "UZUPELNIENIA" na koncu.
   ========================================================================== */

@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 600; font-display: swap; src: url(../fonts/cormorant-garamond-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 600; font-display: swap; src: url(../fonts/cormorant-garamond-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(../fonts/cormorant-garamond-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(../fonts/cormorant-garamond-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/montserrat-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/montserrat-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.hc {
  --hc-braz: var(--dark, #311e17);
  --hc-braz-80: var(--text-light, #5a463d);
  --hc-ecru: var(--bg, #f6f2e8);
  --hc-ecru-2: var(--bg-alt, #efe6d4);
  --hc-zloto-1: var(--brand, #895e1a);
  --hc-zloto-2: var(--brand-light, #e7c880);
  --hc-zloto: linear-gradient(100deg, var(--hc-zloto-1) 0%, color-mix(in srgb, var(--hc-zloto-1) 45%, var(--hc-zloto-2)) 55%, var(--hc-zloto-2) 100%);
  --hc-zloto-btn: linear-gradient(100deg, color-mix(in srgb, var(--hc-zloto-1) 55%, var(--hc-zloto-2)) 0%, var(--hc-zloto-2) 100%);
  --hc-bordo: var(--accent-2, #551a25);
  --hc-fiolet: var(--accent, #592648);
  --hc-granat: var(--accent-3, #1b3266);
  --hc-linia: color-mix(in srgb, var(--hc-zloto-1) 30%, transparent);
  --hc-sygnet: none;
  --hc-wazka: var(--mk-znak-wodny, none);
  --hc-serif: var(--font-head, "Cormorant Garamond", Georgia, "Times New Roman", serif);
  --hc-sans: var(--font-body, "Montserrat", Arial, Helvetica, sans-serif);
  --hc-max: 1600px;
  --hc-pad: clamp(16px, 4vw, 72px);
  color: var(--hc-braz);
  font-family: var(--hc-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tlo ecru i stopka zawsze na dole (rozciagamy obszar tresci, nie tresc) */
body:has(> .hc-top) {
  margin: 0;
  background: var(--bg, #f6f2e8);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}
body:has(> .hc-top) > #kwt-canvas,
body:has(> .hc-top) > main { flex: 1 0 auto; width: 100%; min-height: 0 !important; }
body:has(> .hc-top) > #kwt-canvas { background: var(--bg, #f6f2e8); }
html.hc-bez-przewijania { overflow: hidden; }

/* Reset w obrebie .hc */
.hc, .hc *, .hc *::before, .hc *::after { box-sizing: border-box; }
.hc :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote) { margin: 0; padding: 0; }
.hc :where(ul, ol) { list-style: none; }
.hc :where(img, svg) { display: block; max-width: 100%; }
.hc img { height: auto; }
.hc a { color: inherit; text-decoration: none; }
.hc :where(button) { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
/* motyw Hello Elementor (reset.css) daje kazdemu przyciskowi rozowe tlo #c36 i bialy tekst na hover/focus - w .hc tlo i kolor zostaja nasze */
.hc button:hover, .hc button:focus { background-color: transparent; }
.hc .hc-burger:hover, .hc .hc-burger:focus, .hc .kh-acc-btn:focus { color: inherit; }
.hc :focus-visible { outline: 2px solid var(--hc-zloto-1); outline-offset: 4px; }

.hc-wrap { width: 100%; max-width: var(--hc-max); margin-left: auto; margin-right: auto; padding-left: var(--hc-pad); padding-right: var(--hc-pad); }

/* tekst tylko dla czytnikow i wyszukiwarek (np. nazwa w h1, gdy widac logo SVG) */
.hc-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Typografia marki */
.hc-podpis { font-family: var(--hc-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 1.4; letter-spacing: .3em; text-transform: uppercase; }
.hc-haslo { font-family: var(--hc-serif); font-style: normal; font-weight: 700; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; }

/* Przyciski (letter-spacing dokleja odstep za ostatnia litera - lewy padding go rownowazy) */
.hc .hc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 16px 30px 16px calc(30px + .3em);
  font-family: var(--hc-sans); font-weight: 500; font-size: 12px; line-height: 1.3;
  letter-spacing: .3em; text-transform: uppercase; text-align: center;
  color: var(--hc-ecru); background: var(--hc-braz); border: 1px solid var(--hc-braz);
  transition: background-color .3s, color .3s, border-color .3s, filter .3s;
}
.hc .hc-btn:hover { color: var(--hc-braz); background: transparent; }
.hc .hc-btn--zloto, .hc .hc-btn--zloto:hover { color: var(--hc-braz); background: var(--hc-zloto-btn); border-color: transparent; }
.hc .hc-btn--zloto:hover { filter: brightness(1.08); }
.hc .hc-btn--fiolet { color: var(--hc-ecru); background: var(--hc-fiolet); border-color: var(--hc-fiolet); }
.hc .hc-btn--fiolet:hover { color: var(--hc-fiolet); background: transparent; }
/* granat Hani - kolor Masterclass (Hania 02.10) */
.hc .hc-btn--granat { color: var(--hc-ecru); background: var(--hc-granat); border-color: var(--hc-granat); }
.hc .hc-btn--granat:hover { color: var(--hc-granat); background: transparent; }
@media (max-width: 400px) {
  .hc .hc-btn { padding: 16px 18px 16px calc(18px + .2em); letter-spacing: .2em; }
  .hc-podpis { letter-spacing: .2em; }
}
/* telefon: przyciski CTA na srodku (user 02.10) */
@media (max-width: 760px) {
  .hc a.hc-btn { display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
}

/* Zlote ramki zdjec (Hania 02.10: zamiast bialych delikatne zlote, nie na wszystkich)
   .hc-rama       - cienka zlota ramka przy samym zdjeciu
   .hc-rama-linia - zlota linia przesunieta za zdjeciem; --hc-rl-x / --hc-rl-y: przesuniecie w prawo / w gore (ujemne = w lewo / w dol) */
.hc-rama { padding: 2px; background: linear-gradient(135deg, var(--hc-zloto-2) 0%, color-mix(in srgb, var(--hc-zloto-1) 50%, var(--hc-zloto-2)) 35%, var(--hc-zloto-1) 60%, var(--hc-zloto-2) 100%); box-shadow: 0 22px 48px color-mix(in srgb, var(--hc-braz) 14%, transparent); }
.hc-rama img { width: 100%; }
.hc-rama-linia { position: relative; isolation: isolate; }
.hc-rama-linia::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: calc(-1 * var(--hc-rl-y, 22px)); right: calc(-1 * var(--hc-rl-x, 22px)); bottom: var(--hc-rl-y, 22px); left: var(--hc-rl-x, 22px);
  border: 1px solid color-mix(in srgb, var(--hc-zloto-1) 50%, var(--hc-zloto-2)); border-image: linear-gradient(135deg, var(--hc-zloto-2), var(--hc-zloto-1) 55%, var(--hc-zloto-2)) 1;
}
/* .hc-rama-luz - zlota linia odsunieta od zdjecia, zdjecie z cieniem (Hania 02.10: ramki "przyklejone do zdjec" wygladaly plasko); --hc-rl-luz: odstep */
.hc-rama-luz { outline: 1px solid color-mix(in srgb, var(--hc-zloto-1) 50%, var(--hc-zloto-2)); outline-offset: var(--hc-rl-luz, 10px); }
.hc-rama-luz img { width: 100%; box-shadow: 0 22px 48px color-mix(in srgb, var(--hc-braz) 16%, transparent); }

/* ==========================================================================
   HEADER - jasny ecru, logo brazowe (menu = WP "Glowne menu" #9, znacznik kwt_menu w HTML ponizej, lista ul.kwt-nav-list)
   ========================================================================== */
.hc-top {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 1000;
  color: var(--hc-braz); background: #fff;
  transition: box-shadow .3s, margin-bottom .3s;
}
/* margin-bottom = tyle, o ile header maleje (100 -> 82): miejsce zajmowane w ukladzie zostaje stale,
   wiec tresc pod spodem nie przesuwa sie przy skurczu (08.10: header pulsowal przy przewinieciu ok. 12-30 px) */
.hc-top.is-scrolled { box-shadow: 0 8px 28px color-mix(in srgb, var(--hc-braz) 7%, transparent); margin-bottom: 18px; }
.hc-top__in { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); min-height: 100px; transition: min-height .3s; }
.hc-top.is-scrolled .hc-top__in { min-height: 82px; }

.hc-top__nav { margin-left: 0; }
.hc-top__nav .kwt-nav-list { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 44px); margin: 0; padding: 0; list-style: none; }
.hc-top__nav .kwt-nav-list li { margin: 0; padding: 0; list-style: none; }
.hc-top__nav a { position: relative; display: block; padding: 10px 0; font-family: var(--hc-sans); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: var(--hc-braz); transition: color .25s; }
.hc-top__nav a::after { content: ""; position: absolute; left: 0; right: .3em; bottom: 4px; height: 1px; background: var(--hc-zloto); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.hc-top__nav a:hover { color: var(--hc-zloto-1); }
.hc-top__nav a:hover::after, .hc-top__nav .current-menu-item > a::after, .hc-top__nav .current-menu-ancestor > a::after { transform: scaleX(1); }
/* podmenu (06.10: Oferta > Expansion Identity, Masterclass Online): biala karta pod pozycja, pokazuje sie po najechaniu
   albo po wejsciu klawiatura (focus-within); ::before na liscie to niewidoczny mostek, zeby kursor nie gubil menu po drodze */
.hc-top__nav .kwt-nav-list > li { position: relative; }
.hc-top__nav .menu-item-has-children > a { padding-right: 16px; }
.hc-top__nav .menu-item-has-children > a::after { right: calc(16px + .3em); }
.hc-top__nav .menu-item-has-children > a::before { content: ""; position: absolute; right: 3px; top: 50%; width: 5px; height: 5px; margin-top: -5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .25s, margin-top .25s; }
.hc-top__nav .menu-item-has-children:hover > a::before, .hc-top__nav .menu-item-has-children:focus-within > a::before { margin-top: -1px; transform: rotate(225deg); }
.hc-top__nav .sub-menu { position: absolute; top: calc(100% + 10px); left: -26px; z-index: 20; min-width: 260px; margin: 0; padding: 12px 0; list-style: none; background: #fff; border-top: 1px solid var(--hc-zloto-2); box-shadow: 0 18px 40px color-mix(in srgb, var(--hc-braz) 13%, transparent); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; }
.hc-top__nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.hc-top__nav .menu-item-has-children:hover > .sub-menu, .hc-top__nav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.hc-top__nav .sub-menu a { padding: 11px 26px; letter-spacing: .22em; white-space: nowrap; }
.hc-top__nav .sub-menu a::after { display: none; }
.hc-top__nav .sub-menu .current-menu-item > a { color: var(--hc-zloto-1); }

/* logo w naglowku (obrazek z Customizera albo nazwa witryny) */
.hc .hc-top__logo { flex: none; display: block; color: var(--hc-braz); }
.hc-top__logo svg { width: auto; height: 60px; transition: height .3s; }
.hc-top.is-scrolled .hc-top__logo svg { height: 52px; padding: 2px 0; }
/* wazka obok menu (Hania 05.10: "fajnie jak wazka tez bedzie wystepowac subtelnie, moze gdzies obok menu") */
/* Hania 06.10: "ta wazka we wszystkich miejscach moze byc wieksza i brazowa" (bylo zloto, 22 px) */
.hc-top__wazka { flex: none; margin: 0 clamp(0px, .8vw, 14px); color: var(--hc-braz); }
.hc-top__wazka svg { width: auto; height: 32px; }

.hc-top__ikony { flex: none; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.hc .hc-ikona { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--hc-braz); transition: color .25s, background-color .25s; }
.hc .hc-ikona:hover { color: var(--hc-zloto-1); background: color-mix(in srgb, var(--hc-zloto-1) 8%, transparent); }
.hc-ikona svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hc-ikona--social svg { width: 18px; height: 18px; }
.hc-ikona--pelna svg { fill: currentColor; stroke: none; }
.hc-koszyk { margin-left: 0; }
.hc .kw-cart-count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hc-braz); color: var(--hc-ecru); font-family: var(--hc-sans); font-size: 11px; font-weight: 500; line-height: 18px; letter-spacing: 0; text-align: center; }
.hc .kw-cart-count--empty { display: none; }
/* Standard #144 (ludzik Moje konto, komponent kh-acc 1:1 z szablonu): odstep od ikon social i font menu jak w headerze */
.hc-top__ikony .kh-acc { margin-left: 10px; }
.hc-top .kh-acc-menu a { font-family: var(--hc-sans); }


.hc .hc-burger { display: none; flex-direction: column; }
.hc-burger span { display: block; width: 26px; height: 1.5px; background: currentColor; transition: transform .3s, opacity .2s; }
.hc-burger span + span { margin-top: 7px; }
.hc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.hc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

.hc-mobi { position: fixed; left: 0; right: 0; bottom: 0; top: 76px; z-index: 999; display: flex; flex-direction: column; gap: 36px; padding: 16px var(--hc-pad) 48px; overflow-y: auto; background: var(--hc-ecru); border-top: 1px solid var(--hc-linia); }
.hc-mobi[hidden] { display: none !important; }
.hc-mobi__nav .kwt-nav-list { margin: 0; padding: 0; list-style: none; }
.hc-mobi__nav .kwt-nav-list li { margin: 0; padding: 0; list-style: none; }
.hc-mobi__nav a { display: block; padding: 20px 0; border-bottom: 1px solid var(--hc-linia); font-family: var(--hc-serif); font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--hc-braz); }
.hc-mobi__nav .current-menu-item > a { color: var(--hc-zloto-1); }
/* podmenu w menu na telefonie: mniejsze pozycje z wcieciem pod "Oferta", zawsze widoczne */
.hc-mobi__nav .sub-menu { margin: 0; padding: 0; list-style: none; }
.hc-mobi__nav .sub-menu a { padding: 15px 0 15px 22px; font-family: var(--hc-sans); font-weight: 400; font-size: 13px; line-height: 1.5; letter-spacing: .26em; }
.hc-mobi__social { display: flex; gap: 8px; margin-left: -10px; }
.hc-mobi__wazka { margin: auto auto 0; color: var(--hc-braz); }
.hc-mobi__wazka svg { width: auto; height: 58px; }

/* waskie ekrany komputerow i tablety poziomo (961-1279 px): menu w jednym wierszu i bez wypychania koszyka poza ekran -
   najpierw znikaja ikony social (sa w stopce), potem wazka obok menu (06.10: pomiar 970 i 1024 px pokazal przewijanie w bok) */
@media (max-width: 1279px) {
  .hc .hc-top__ikony .hc-ikona--social { display: none; }
}
@media (max-width: 1100px) {
  .hc-top__wazka { display: none; }
  .hc-top__nav .kwt-nav-list { gap: 20px; }
}
@media (max-width: 960px) {
  .hc-top__in { min-height: 76px; gap: 12px; }
  .hc-top.is-scrolled .hc-top__in { min-height: 68px; }
  .hc-top.is-scrolled { margin-bottom: 8px; }
  .hc-top__nav { display: none; }
  .hc .hc-ikona--social { display: none; }
  .hc-top__ikony .kh-acc { margin-left: 0; }
  .hc .hc-burger { display: inline-flex; }
  .hc-top__logo svg { height: 50px; }
  .hc-top.is-scrolled .hc-top__logo svg { height: 46px; }
  .hc-top__wazka { display: none; }
}
@media (max-width: 600px) {
  .hc-top { top: 0; }
}

/* Formularze KWT (#141) w barwach marki - w kazdym kontenerze .hc (sekcja formularza na /kontakt,
   newsletter nad stopka). Style wtyczki laduja sie w stopce strony, czyli PO tym bloku -
   dlatego kazdy selektor ma min. dwie klasy. Bledy w bordo zamiast czerwieni wtyczki. */
.hc .kwt-form-fields { gap: 22px 20px; }
.hc .kwt-form-field { gap: 8px; }
.hc .kwt-label { font-family: var(--hc-sans); font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .24em; text-transform: uppercase; color: var(--hc-braz-80); }
.hc .kwt-req { color: var(--hc-zloto-1); }
.hc .kwt-input { min-height: 54px; padding: 14px 18px; font-family: var(--hc-sans); font-size: 15px; line-height: 1.5; letter-spacing: .02em; color: var(--hc-braz); background: #fff; border: 1px solid var(--hc-linia); border-radius: 0; box-shadow: none; transition: border-color .25s, box-shadow .25s; }
.hc .kwt-input::placeholder { color: var(--hc-braz-80); opacity: .6; }
.hc .kwt-input:focus { border-color: var(--hc-zloto-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc-zloto-1) 12%, transparent); outline: none; }
.hc textarea.kwt-input { min-height: 160px; }
.hc .kwt-choice-label { font-family: var(--hc-sans); font-size: 13px; font-weight: 400; line-height: 1.65; letter-spacing: .02em; color: var(--hc-braz-80); }
.hc .kwt-choice-single input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--hc-zloto-1); cursor: pointer; }
.hc .kwt-choice-label a { color: var(--hc-braz); font-weight: 600; text-decoration: none; transition: color .25s; }
.hc .kwt-choice-label a:hover { color: var(--hc-zloto-1); }
.hc .kwt-form .kwt-form-actions { margin-top: 28px; }
.hc .kwt-form .kwt-submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 16px 30px 16px calc(30px + .3em);
  font-family: var(--hc-sans); font-weight: 500; font-size: 12px; line-height: 1.3;
  letter-spacing: .3em; text-transform: uppercase; text-align: center;
  color: var(--hc-braz); background: #d8c4a0; border: 1px solid #d8c4a0; border-radius: 0;
  transition: background-color .3s, border-color .3s, color .3s, opacity .3s;
}
/* przycisk w odcieniu tla hero (#eee4d2), tylko ciemniejszy; hover jeszcze o ton ciemniej */
.hc .kwt-form .kwt-submit:hover { color: var(--hc-braz); background: #c8ad82; border-color: #c8ad82; opacity: 1; transform: none; }
.hc .kwt-form .kwt-submit:disabled { opacity: .55; cursor: not-allowed; }
.hc .kwt-form .kwt-form-msg { margin-top: 18px; padding: 14px 18px; font-family: var(--hc-sans); font-size: 14px; line-height: 1.6; letter-spacing: .02em; color: var(--hc-braz); background: #fff; border: 1px solid var(--hc-linia); border-radius: 0; }
.hc .kwt-form .kwt-form-msg.kwt-form-success { background: var(--hc-ecru-2); border-color: var(--hc-zloto-1); }
.hc .kwt-form .kwt-form-msg.kwt-form-error { color: var(--hc-bordo); background: #f8eeee; border-color: rgba(85, 26, 37, .35); }
.hc .kwt-form-field.kwt-field-error .kwt-input { border-color: var(--hc-bordo); box-shadow: 0 0 0 3px rgba(85, 26, 37, .1); }
.hc .kwt-form-field.kwt-field-error .kwt-label,
.hc .kwt-form-field.kwt-field-error .kwt-choice-single > span { color: var(--hc-bordo); }
.hc .kwt-form-field .kwt-field-err-msg { font-family: var(--hc-sans); font-size: 12px; font-weight: 500; color: var(--hc-bordo); background: #f8eeee; border: 1px solid rgba(85, 26, 37, .25); border-radius: 0; }

/* Kasa /zamowienie/ (#152, 02.10.2026) i koszyk przed nia. Komunikaty WooCommerce jak "Powracajacy klient?": bez szarego tla
   i bez czarnej ramki fokusa, ktora Woo zaklada po dodaniu do koszyka. Lista krajow (select2) jak pozostale pola.
   Na telefonie tresc 16 px od krawedzi (motyw i szablon zerowaly padding .site-main, zostawalo 5 px z body)
   i tabela zamowienia na cala szerokosc (szablon robil z niej blok, komorki nie siegaly prawej krawedzi).
   Kolory wpisane wprost: te elementy Woo sa poza .hc, wiec zmienne --hc-* tu nie dzialaja. */
html body .woocommerce-message { background: #efe6d4; border-top-width: 0; border-left: 2px solid var(--hc-zloto-1); }
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus { outline: none; }
.woocommerce-checkout .select2-container--default .select2-selection--single { display: flex; align-items: center; height: 42px; background: var(--hc-ecru); border: 1px solid #ddd0b8; border-radius: 0; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 14px; font-size: 14px; line-height: 1.4; color: var(--hc-braz); }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 6px; height: 40px; }
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--hc-zloto-1); }
@media (max-width: 768px) {
  html body.woocommerce-checkout .site-main, html body.woocommerce-cart .site-main { padding-left: 11px !important; padding-right: 11px !important; }
  html body .woocommerce-checkout-review-order-table, html body .cart_totals table.shop_table { display: table !important; overflow: visible !important; }
  /* koszyk: tabela pozycji jest blokiem (szablon), wiec tbody kurczyl sie do tresci - rozciagamy go na cala szerokosc */
  html body.woocommerce-cart table.shop_table.cart tbody { display: block; width: 100%; }
  /* koszyk: kupon jedno pod drugim - przycisk "Wykorzystaj kupon" wystawal poza ekran */
  html body.woocommerce-cart table.cart td.actions .coupon { display: flex; flex-direction: column; gap: 10px; float: none; }
  html body.woocommerce-cart table.cart td.actions .coupon .input-text,
  html body.woocommerce-cart table.cart td.actions .coupon .button { width: 100% !important; max-width: 100%; margin: 0 !important; float: none !important; }
}

/* Spokojne pojawianie sie przy przewijaniu (klasa hc-js dodawana skryptem naglowka; bez JS wszystko widac) */
html.hc-js .hc-anim { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.22, .61, .36, 1), transform 1s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--hc-d, 0s); }
html.hc-js .hc-anim--zoom { transform: scale(1.04); transition-duration: 1.4s, 1.8s; }
html.hc-js .hc-anim.is-in { opacity: 1; transform: none; }

/* Motyw daje stronom sklepu body { padding: 0 5px } - header i stopka dalej od krawedzi do krawedzi */
body.woocommerce-cart > .hc-top, body.woocommerce-checkout > .hc-top, body.woocommerce-account > .hc-top,
body.woocommerce-cart > .hc-stopka, body.woocommerce-checkout > .hc-stopka, body.woocommerce-account > .hc-stopka { margin-left: -5px; margin-right: -5px; }

/* Z poprzedniego naglowka szablonu: sklep i Complianz (bez odstepu 120 px - nowy header nie jest fixed) */
@media (max-width: 768px) {
  body.woocommerce-page .site-main, body.woocommerce-checkout .site-main, body.woocommerce-cart .site-main, body.woocommerce-account .site-main { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 900px) {
  body.woocommerce-checkout .site-main, body.woocommerce-cart .site-main { padding-left: 0 !important; padding-right: 0 !important; padding-inline-start: 0 !important; padding-inline-end: 0 !important; max-width: 100% !important; width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; }
}
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register { border: none !important; }
@media (max-width: 768px) {
  body.cmplz-marketing, body.cmplz-statistics, body.cmplz-preferences, body.cmplz-functional, body.cmplz-eu, body.cmplz-optin { margin-top: 0 !important; }
}
body.cmplz-functional, body.cmplz-eu, body.cmplz-optin { padding: 0; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .hc-top, .hc *, .hc *::before, .hc *::after { transition: none !important; }
  html.hc-js .hc-anim { opacity: 1; transform: none; }
}


/* ==========================================================================
   MENU KONTA (ikona w naglowku)
   ========================================================================== */
.kh-acc{position:relative;display:inline-flex;align-items:center}.kh-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:0;margin:0;border-radius:999px;color:var(--kh-ink)!important;background:none!important;border:0!important;padding:0!important;box-shadow:none!important;cursor:pointer;transition:color .2s,background .2s;-webkit-appearance:none;appearance:none}.kh-icon:hover,.kh-icon:focus-visible,.kh-acc.is-open>.kh-icon{color:var(--kh-accent)!important;background:color-mix(in srgb,var(--kh-accent) 10%,transparent)!important}.kh-icon svg{width:21px;height:21px;flex:0 0 21px;display:block;fill:none!important}.kh-acc-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:230px;max-width:calc(100vw - 32px);background:#fff;border:1px solid color-mix(in srgb,var(--kh-accent) 25%,transparent);border-radius:12px;box-shadow:0 12px 30px rgba(15,27,51,.10);padding:.4rem!important;display:none;z-index:1000000;text-align:left}.kh-acc.is-open .kh-acc-menu{display:block}.kh-acc-menu a{display:block!important;padding:.6rem .8rem!important;margin:0!important;border-radius:8px;font-size:13px;line-height:1.3;color:var(--kh-ink)!important;white-space:nowrap;text-decoration:none}.kh-acc-menu a:hover{background:color-mix(in srgb,var(--kh-accent) 10%,transparent);color:var(--kh-accent)!important}


/* Motyw Kosari: stopka jasna jak header, siatka 2 x 2 rozdzielona cienkimi zlotymi liniami:
     lewa kolumna:  logo + Social media      | prawa kolumna: newsletter (formularz z Customizera)
                    Dokumenty + Regulaminy   |                Dane firmy (+ (c))
   Cztery rowne kolumny siatki - Social media stoi nad Regulaminami, newsletter i Dane firmy zajmuja po dwie.
   W stopce KWT, na kazdej stronie. Zmienne .hc i wyglad pol/przycisku (blok "Formularze KWT") sa w naglowku. */
.hc-stopka { position: relative; color: var(--hc-braz); background: #fff; box-shadow: 0 -8px 28px color-mix(in srgb, var(--hc-braz) 7%, transparent); }
.hc-stopka__in {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "logo social nl nl" "dok reg firma firma";
  padding-top: 12px; padding-bottom: 8px;
}
.hc-stopka__cel { min-width: 0; padding: clamp(28px, 2.6vw, 40px) clamp(16px, 2vw, 32px) clamp(28px, 2.6vw, 40px) 0; }
.hc-stopka__cel--logo { grid-area: logo; }
.hc-stopka__cel--social { grid-area: social; }
.hc-stopka__cel--nl { grid-area: nl; }
.hc-stopka__cel--dok { grid-area: dok; }
.hc-stopka__cel--reg { grid-area: reg; }
.hc-stopka__cel--firma { grid-area: firma; }
/* linie: pionowa przed prawa kolumna, pozioma miedzy wierszami (ciagla, bo siatka nie ma odstepow) */
.hc-stopka__cel--nl, .hc-stopka__cel--firma { padding-left: clamp(28px, 2.5vw, 44px); padding-right: 0; border-left: 1px solid var(--hc-linia); }
.hc-stopka__cel--dok, .hc-stopka__cel--reg, .hc-stopka__cel--firma { border-top: 1px solid var(--hc-linia); }

.hc-stopka__logo { display: block; width: max-content; }
.hc-stopka__logo svg { width: auto; height: 130px; }
/* wazka po prawej od logo (user 05.10); 06.10: brazowa, 80 px, wysrodkowana w wolnej czesci komorki (miedzy logo a nastepna kolumna) */
.hc-stopka__cel--logo { display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); }
.hc-stopka__wazka { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; color: var(--hc-braz); }
.hc-stopka__wazka svg { width: auto; height: 80px; }
.hc-stopka__kol { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.hc-stopka__tyt { margin: 0 0 4px; color: var(--hc-zloto-1); }
.hc-stopka__ikony, .hc-stopka__linki { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.hc .hc-stopka__kol a, .hc .hc-stopka__poz { font-family: var(--hc-sans); font-style: normal; font-size: 13px; line-height: 1.5; letter-spacing: .06em; color: var(--hc-braz); transition: color .25s; }
.hc .hc-stopka__kol a.hc-stopka__social { display: inline-flex; align-items: center; gap: 12px; }
.hc-stopka__social svg { width: 17px; height: 17px; flex: none; }
.hc .hc-stopka__kol a:hover { color: var(--hc-zloto-1); }

/* Dane firmy: dwie grupy obok siebie, na waskim ekranie jedna pod druga */
.hc-stopka__firma-in { display: flex; flex-wrap: wrap; gap: 9px clamp(32px, 4vw, 72px); margin: 0; font-style: normal; }
.hc .hc-stopka__copy { color: var(--hc-braz-80); }

/* Newsletter: tytul jak naglowki kolumn, e-mail i przycisk w jednym rzedzie, zgoda i komunikat pod spodem */
.hc-stopka__nl { container-type: inline-size; }
.hc-stopka__nl-form { margin-top: 9px; }
.hc-stopka__nl .kwt-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "email btn" "ts ts" "zgoda zgoda" "msg msg"; align-items: start; }
.hc-stopka__nl .kwt-form .kwt-form-fields { display: contents; }
.hc-stopka__nl .kwt-form .kwt-field-type-email { grid-area: email; }
.hc-stopka__nl .kwt-form .kwt-field-type-checkbox-single { grid-area: zgoda; margin-top: 10px; }
/* KWT trzyma widzet Cloudflare i "Zapisz sie" w jednym bloku (widzet nad przyciskiem) - rozpuszczamy go w siatce formularza.
   Kolejnosc (user 02.10): e-mail, "Zapisz sie", Cloudflare. Gdy kolumna newslettera jest za waska na trzy w rzedzie
   (widzet ma 300 px), e-mail i przycisk zostaja w wierszu, a Cloudflare idzie pod nie. */
.hc .hc-stopka__nl .kwt-form .kwt-form-actions { display: contents; }
.hc-stopka__nl .kwt-form .kwt-submit { grid-area: btn; }
.hc-stopka__nl .kwt-form .kwt-turnstile { grid-area: ts; margin: 12px 0 0; }
@container (min-width: 620px) {
  .hc-stopka__nl .kwt-form { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "email btn ts" "zgoda zgoda zgoda" "msg msg msg"; }
  .hc-stopka__nl .kwt-form .kwt-turnstile { margin: 0 0 0 12px; }
}
.hc-stopka__nl .kwt-form .kwt-form-msg { grid-area: msg; }
.hc-stopka__nl .kwt-field-type-email .kwt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hc-stopka__nl .kwt-form .kwt-field-type-email .kwt-input { border-right-width: 0; }
.hc .hc-stopka__nl .kwt-form .kwt-input { min-height: 46px; padding: 10px 16px; font-size: 14px; }
.hc .hc-stopka__nl .kwt-form .kwt-submit { min-height: 46px; padding: 12px 22px 12px calc(22px + .3em); }
.hc .hc-stopka__nl .kwt-form .kwt-choice-label { font-size: 11px; line-height: 1.5; letter-spacing: 0; }
.hc .hc-stopka__nl .kwt-form .kwt-choice-single input { width: 15px; height: 15px; margin-top: 1px; }

/* ---------- Okienko zapisu na newsletter (mapa #28: "delikatne okienko"; user 06.10) ----------
   Mala biala karta w lewym dolnym rogu (baner cookies stoi w prawym), bez przyciemniania strony, z tym samym
   formularzem KWT co w stopce. Kiedy sie pokazuje i kiedy nie - skrypt okno.js. Schowana jest przesunieciem pod
   krawedz ekranu, nie przez display:none, bo w srodku siedzi widzet Cloudflare formularza.
   Telefon: najpierw waski pasek z przyciskiem "Zapisz sie", formularz rozwija sie po dotknieciu. */
.hc-okno { position: fixed; z-index: 990; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); width: min(372px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow-y: auto; padding: 22px 26px 24px; color: var(--hc-braz); background: #fff; border-top: 2px solid var(--hc-zloto-1); box-shadow: 0 18px 50px color-mix(in srgb, var(--hc-braz) 20%, transparent); opacity: 0; transform: translateY(calc(100% + 60px)); pointer-events: none; transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1); }
.hc-okno.is-widoczne { opacity: 1; transform: none; pointer-events: auto; }
.hc-okno__gora { display: flex; align-items: center; gap: 16px; }
.hc-okno__wazka { flex: none; color: var(--hc-braz); }
.hc-okno__wazka svg { width: auto; height: 40px; }
.hc-okno__tyt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hc-okno__tyt .hc-podpis { color: var(--hc-zloto-1); }
.hc-okno__tyt .hc-haslo { font-size: 24px; line-height: 1.15; }
.hc .hc-okno__otworz { display: none; }
.hc .hc-okno__zamknij { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px -14px -8px auto; color: var(--hc-braz-80); transition: color .25s; }
.hc .hc-okno__zamknij:hover, .hc .hc-okno__zamknij:focus { color: var(--hc-zloto-1); }
.hc-okno__zamknij svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.hc-okno__form { margin-top: 18px; }
/* formularz w okienku: e-mail, zgoda, "Zapisz sie", Cloudflare (kolejnosc jak w stopce na telefonie).
   Okienko samo ma klase .hc, wiec selektor to .hc.hc-okno (razem), nie ".hc .hc-okno". */
.hc.hc-okno .kwt-form-fields { display: flex; flex-direction: column; gap: 12px; }
.hc-okno .kwt-field-type-email .kwt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hc.hc-okno .kwt-form .kwt-input { min-height: 46px; padding: 10px 16px; font-size: 14px; }
.hc.hc-okno .kwt-form .kwt-choice-label { font-size: 11px; line-height: 1.5; letter-spacing: 0; }
.hc.hc-okno .kwt-form .kwt-choice-single input { width: 15px; height: 15px; margin-top: 1px; }
.hc.hc-okno .kwt-form .kwt-form-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.hc.hc-okno .kwt-form .kwt-submit { order: -1; width: 100%; min-height: 46px; padding: 12px 22px 12px calc(22px + .3em); }
.hc.hc-okno .kwt-form .kwt-form-msg { margin-top: 12px; padding: 12px 14px; font-size: 13px; }
@media (max-width: 560px) {
  .hc-okno { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 12px 16px 12px; }
  .hc-okno__gora { gap: 10px; }
  .hc-okno__wazka { display: none; }
  .hc-okno__tyt { gap: 3px; }
  .hc-okno__tyt .hc-podpis { font-size: 10px; letter-spacing: .2em; }
  .hc-okno__tyt .hc-haslo { font-size: 17px; letter-spacing: .14em; }
  .hc .hc-okno__otworz { display: inline-flex; flex: none; margin-left: auto; min-height: 40px; padding: 8px 14px 8px calc(14px + .18em); font-size: 11px; letter-spacing: .18em; }
  .hc .hc-okno__zamknij { width: 40px; height: 40px; margin: 0 -10px 0 0; }
  .hc-okno.is-otwarte .hc-okno__zamknij { margin-left: auto; }
  /* formularz zwiniety: przyciety do zera (nie display:none - widzet Cloudflare), rozwija sie po "Zapisz sie" */
  .hc-okno__form { margin-top: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s ease, opacity .4s ease, margin-top .4s ease; }
  .hc-okno.is-otwarte .hc-okno__form { margin-top: 14px; max-height: 560px; opacity: 1; }
  .hc.hc-okno.is-otwarte .hc-okno__otworz { display: none; }
}

/* tablet: jedna kolumna czterech pasow - logo | Social, newsletter, Dokumenty | Regulaminy, Dane firmy */
@media (max-width: 1023px) {
  .hc-stopka__in { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "logo social" "nl nl" "dok reg" "firma firma"; }
  .hc-stopka__cel--nl, .hc-stopka__cel--firma { padding-left: 0; border-left: 0; }
  .hc-stopka__cel--nl { border-top: 1px solid var(--hc-linia); }
}
@media (max-width: 560px) {
  .hc-stopka__in { padding-top: 4px; padding-bottom: 4px; }
  .hc-stopka__cel { padding-top: 26px; padding-bottom: 26px; }
  .hc-stopka__logo svg { height: 64px; }
  .hc-stopka__wazka svg { height: 40px; }
  .hc-stopka__kol, .hc-stopka__ikony, .hc-stopka__linki { gap: 10px; }
  .hc-stopka__tyt { margin-bottom: 2px; letter-spacing: .2em; }
  .hc .hc-stopka__kol a, .hc .hc-stopka__poz { font-size: 12.5px; letter-spacing: .03em; overflow-wrap: anywhere; }
  .hc-stopka__nl .kwt-form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "email" "zgoda" "btn" "ts" "msg"; }
  .hc-stopka__nl .kwt-form .kwt-field-type-email .kwt-input { border-right-width: 1px; }
  .hc-stopka__nl .kwt-form .kwt-submit { width: 100%; margin-top: 18px; }
}


/* ==========================================================================
   UZUPELNIENIA MOTYWU - elementy, ktore we wzorcu byly wpisane w HTML jako SVG klientki
   ========================================================================== */
/* logo jako obrazek (Wyglad -> Dostosuj -> Tozsamosc witryny) albo nazwa witryny tekstem */
.hc-top__logo img { display: block; width: auto; height: 60px; max-width: min(60vw, 320px); object-fit: contain; transition: height .3s; }
.hc-top.is-scrolled .hc-top__logo img { height: 52px; }
.hc-top__logo--tekst { font-family: var(--hc-serif); font-weight: 700; font-size: clamp(18px, 2vw, 26px); line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.hc-top__wazka img { display: block; width: auto; height: 34px; }
.hc-mobi__wazka img { display: block; width: auto; height: 60px; margin: 0 auto; }
.hc-stopka__logo img { display: block; width: auto; height: auto; max-height: 110px; max-width: 220px; object-fit: contain; }
.hc-stopka__logo--tekst { font-family: var(--hc-serif); font-weight: 700; font-size: 22px; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; }
.hc-stopka__wazka img { display: block; width: auto; height: 64px; }
.hc-okno__wazka img { display: block; width: auto; height: 30px; }
@media (max-width: 960px) {
  .hc-top__logo img { height: 50px; }
  .hc-top.is-scrolled .hc-top__logo img { height: 46px; }
  .hc-top__logo--tekst { font-size: 17px; letter-spacing: .14em; white-space: normal; }
}
/* tresc stron z szablonow motywu (nie KWT canvas) dziedziczy fonty i kolory marki */
body.motyw-kosari { color: var(--text, #311e17); font-family: var(--font-body, "Montserrat", Arial, sans-serif); }