/*
Theme Name: Kalium - Child Theme
Theme URI: https://kaliumtheme.com
Author: Laborator
Author URI: https://laborator.co
Description: Start creating that amazing website that you have always wanted, only with Kalium &mdash; Connect with Laborator on: <a href="https://twitter.com/thelaborator">Twitter X</a> &bull; <a href="https://www.facebook.com/laboratorcreative">Facebook</a> &bull; <a href="https://www.instagram.com/laboratorcreative">Instagram</a>
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: kalium
Text Domain: kalium
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@800&display=swap');

.itmfox-sign {
	text-decoration: none !important;
	color: var(--k-color-7) !important;
}

.itmfox-sign:hover {
	text-decoration: none !important;
	background: transparent !important;
	font-weight:700 !important
}

.itmfox-sign strong {
	color: var(--k-color-7) !important;
	text-decoration: none !important;
	transition: color .2s ease-out !important;
	font-family: 'Manrope', sans-serif !important
}

.itmfox-sign:hover {
	transition: color .2s ease-out !important;
	color: var(--k-color-7) !important;
	text-decoration: none !important;
}

.itmfox-sign:hover strong {
	color: #63AE24 !important;
	transition: color .2s ease-out !important
}

body {
	--k-border-radius: 0 !important;
	--k-ls-line-thickness-value: 1px; !important
}

.normal-text :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    margin-top: 1em;
}

.normal-text li:not(:last-child) {
    margin-bottom: 0.25em;
}

.woocommerce-page .site-main,
.search-results .site-main {
	padding-bottom: 60px
}

.shipping-icon {
  --icon-color: #000;        /* Domyślny kolor */
  --icon-stroke-width: 6px;     /* Domyślna grubość */
}

.shipping-icon svg {
	overflow: visible
}

.accordion--style-1 .accordion__item:last-child {
    border-bottom: 1px solid var(--k-accordion-border-color);
}

.single-product .accordion, .single-product .panels-stack, .single-product .tabs {
	margin-bottom: 20px
}

.single-product__summary-container .entry-summary ul,
.single-product__summary-container .entry-summary ol {
	padding-left: 1rem
}

.single-product__summary-container .entry-summary ul li,
.single-product__summary-container .entry-summary ol li {
	padding-bottom: 0.15rem
}

.single-product__summary-container .product_meta {
	display: none
}


.wpclv-attributes .wpclv-terms .wpclv-term,
.my-wc-color-dot-wrap {
	padding: 3px;
	height: 25px;
    min-width: 25px;
    line-height: 25px;
	border: solid 1px var(--k-color-7);
	background-color: transparent;
	-webkit-transition:all .15s ease; 
	-moz-transition:all .15s ease; 
	-o-transition:all .15s ease;
	-ms-transition:all .15s ease; 
	transition:all .15s ease;
	border-radius: 50%
}

.wpclv-attributes .wpclv-terms .wpclv-term.active,
.wc-block-product-filter-checkbox-list__item:has(.wc-block-product-filter-checkbox-list__input:checked) .my-wc-color-dot-wrap {
	border-color: var(--k-input-border-color);
	background-color: rgba(255,255,255,0.5);
}

/* Najechanie — jaśniejsze obramowanie niż przy zaznaczeniu.
   Wcześniej oba stany używały --k-input-border-color, więc nie dało się ich
   odróżnić. Zaznaczenie zostaje bez zmian. */
.wpclv-attributes .wpclv-terms .wpclv-term:hover,
.wc-block-product-filter-checkbox-list__item:hover .my-wc-color-dot-wrap {
	border-color: #c2a6a3;
	-webkit-transition:all .15s ease; 
	-moz-transition:all .15s ease; 
	-o-transition:all .15s ease;
	-ms-transition:all .15s ease; 
	transition:all .15s ease;
}

.wpclv-attributes .wpclv-terms .wpclv-term,
.wpclv-attributes .wpclv-terms .wpclv-term span, .wpclv-attributes .wpclv-terms .wpclv-term a {
	border-radius: 50%;
}

.wpclv-attributes .wpclv-terms .wpclv-term-color span, .wpclv-attributes .wpclv-terms .wpclv-term-color a,
.my-wc-color-dot {
	width: 100%;
	height: 100%;
	line-height: normal;
	border-radius: 50%;
	display: block
}

.wc-block-product-filter-checkbox-list__item:has(.my-wc-color-dot) .wc-block-product-filter-checkbox-list__input-wrapper,
.wc-block-product-filter-checkbox-list__item:has(.my-wc-image-swatch) .wc-block-product-filter-checkbox-list__input-wrapper {
    display: none;
}

.wc-block-product-filter-checkbox-list__item:has(.my-wc-color-dot) {
	margin-left: -3px
}

body [class*="hint--"]::after {
    background-color: #000 !important;
    color: #ffffff !important;
    text-shadow: none !important; 
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15) !important;
	font-family: 'Mulish';
	border-radius: 3px
}
body [class*="hint--top"]::before {
    border-top-color: #000 !important;
}

body [class*="hint--bottom"]::before {
    border-bottom-color: #000 !important;
}

body [class*="hint--left"]::before {
    border-left-color: #000 !important;
}

body [class*="hint--right"]::before {
    border-right-color: #000 !important;
}

.wpclv-attributes .wpclv-attribute-label {
	color: #000;
	font-weight: 500
}

/* Całkowite ukrycie dymków Hint.css (zarówno tła, jak i strzałki) */
body [class*="hint--"]::after,
body [class*="hint--"]::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.fancybox__nav {
    --f-button-svg-stroke-width: 1.5 !important
}

.mega-menu-item.widget_nav_menu ul {
	flex-direction: column;
	
}

.mega-menu-item.widget_nav_menu ul li a {
    color: var(--k-header-link-color);
	line-height: 1.5
}

.mega-menu-item.widget_nav_menu ul li a:hover {
	color: var(--k-header-link-hover-color);
}

#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu,
.mega-menu-item.widget_nav_menu ul {
    gap: 0.4em;
}

.mini-cart-drawer__subtotal__description {
	display: none
}

.woocommerce-cart h1.page-heading__title,
.woocommerce-checkout h1.page-heading__title {
	margin-bottom: 0.4em
}

.invoice-details {
	border-radius: 0
}

.woocommerce-checkout .optional {
	display: none
}

.payment_methods .wc_payment_method > label img {
    background-color: var(--k-body-bg);
    border-radius: var(--k-border-radius);
    display: block;
    margin-bottom: 0;
    margin-top: 0;
    max-width: 50%;
    width: 50px;
    height: 30px;
    padding: 5px !important;
    margin-left: auto;
    object-fit: contain;
}

.payment_methods li .paynow-payment-option-pbls input[type=radio] {
	display: none !important
}

.payment_methods li .paynow-payment-option-pbls img {
    padding: 7% !important;
    background-color: transparent;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain;
    display: block;
    max-height: none !important;
}

.payment_method_pay_by_paynow_pl_blik input[type=text], .paynow-blik-white-label #paynow_blik_code {
	width: 120px;
	text-align: center; 
}

 .mini-cart-drawer__items__item__image img {
    aspect-ratio: 0.75 !important;
}

.woocommerce-checkout .content-wrapper .woocommerce {
	position: relative
}

/* Zachęta do logowania jest teraz tekstowym CTA w nagłówku boksu konta,
   a nie osobnym pudełkiem. */
.custom-checkout-login-opener {
	font-size: 0.85em;
	line-height: 1.4;
}

.custom-checkout-login-opener a {
	text-decoration: underline;
}

/* ==========================================================================
   Kasa — boks konta: zachęta do logowania + e-mail + zakładanie konta
   w jednej ramce. Renderowany przez nadpisany szablon
   checkout/form-billing.php, PRZED .woocommerce-billing-fields__field-wrapper.
   ========================================================================== */

/* Wspólny wygląd obu boksów lewej kolumny: sekcji konta i pól adresowych.
   Jedno miejsce, żeby nie rozjechały się przy późniejszych zmianach. */
.checkout-account-box,
.checkout-fields-box {
	/* Ten sam token co padding panelu podsumowania (.invoice-details
	   używa --k-content-spacing-4 przez --k-padding-x/y), żeby obie kolumny
	   trzymały jedną wartość i nie rozjechały się przy zmianie skali odstępów. */
	padding: var(--k-content-spacing-4);
	/* Bez obramowania — boksy wydziela samo tło na tle strony.
	   Obramowania w kasie zostały wyłącznie na kartach wyboru, gdzie niosą
	   informację: jasne = dostępne, bordo = wybrane. */
	border: 0;
	background-color: var(--k-color-8);
	margin-bottom: 1.5rem;
	color: #000;
}

/* Nagłówek sekcji jest teraz pierwszym elementem w boksie, więc odstęp nad nim
   dawałby podwójny margines względem paddingu ramki.
   Ujemnych marginesów .woocommerce-billing-fields__field-wrapper nie ruszamy —
   kompensuje je padding pól, dzięki czemu treść wypada równo z paddingiem boksu. */
.checkout-fields-box #billing_dostawa_i_faktura_field {
	margin-top: 0;
}

/* UWAGA NA SPECYFICZNOŚĆ.
   Kalium stylizuje .woocommerce-account-fields selektorem
   `.checkout #customer_details :is(...)` — waga (1,2,0), bo zawiera ID.
   Ustawia tam display: flex oraz ujemne marginesy -0.75rem po bokach
   (kompensata siatki, której w tym boksie nie potrzebujemy).
   Selektor bez #customer_details ma wagę (0,2,0) i przegrywa — dlatego
   wszystkie reguły dotyczące tego kontenera muszą mieć ID w ścieżce.
   Bez tego kontener wyjeżdża 12px w lewo poza ramkę. */

.checkout #customer_details .checkout-account-box .woocommerce-account-fields {
	display: block;
	margin: 1rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

/* Nagłówek boksu: tytuł sekcji po lewej, tekstowe CTA logowania po prawej. */
.checkout-account-box__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.checkout-account-box__header .form-heading {
	margin: 0;
}

.checkout-account-box__header .custom-checkout-login-opener {
	margin: 0;
	margin-left: auto;
}

/* Pole e-mail nie jest już w siatce z ujemnymi marginesami, więc zerujemy
   kompensujący padding, który Kalium daje każdemu .form-row. */
.checkout #customer_details .checkout-account-box .form-row {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* Checkbox konta i notka pod nim — wspólna linia wcięcia.

   Korzystamy z natywnego wzorca Kalium: akapit ma klasę form-check, przez co
   base.min.css nadaje mu padding-left: 1.5em, a checkboxowi float: left
   i margin-left: -1.5em. Input wchodzi w padding i siada dokładnie na
   krawędzi treści, a tekst etykiety płynie od 1.5em — także przy zawijaniu.
   Nie nadpisuj tego flexem ani pozycjonowaniem absolutnym.

   Padding trzeba powtórzyć jawnie, bo reguła `> p` poniżej ma wyższą wagę
   niż samo .form-check.

   Notka dostaje 1.5rem, nie 1.5em — ma font-size 0.85em, więc em dałoby
   20,4px zamiast 24px i linia by się rozjechała. */

.checkout #customer_details .checkout-account-box .woocommerce-account-fields > p {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.checkout #customer_details .checkout-account-box .woocommerce-account-fields > p.create-account {
	padding-left: 1.5em;
}

/* Notka o linku aktywacyjnym — delikatny alert widoczny tylko wtedy,
   gdy checkbox jest zaznaczony. Pokazywaniem steruje sam WooCommerce
   (checkout.js → toggle_create_account na div.create-account), dlatego
   element ma obie klasy i jest <div>, a nie <p>. */
.checkout #customer_details .checkout-account-box .woocommerce-account-fields > .create-account-notice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 0.75em;
	padding: 10px;
	background-color: var(--k-color-7);
	font-size: 0.85em;
	line-height: 1.4;
}

.checkout #customer_details .checkout-account-box .create-account-notice__icon {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.1em;
}

/* Nagłówki sekcji z Flexible Checkout Fields (pola typu heading).
   Rozmiar, wagę i kolor bierze klasa h5 dopisana w ustawieniach pola,
   dzięki czemu idą za TypoLab. Tu tylko odstępy. */
#billing_dostawa_i_faktura_field {
	margin-top: 1.5rem;
}

.woocommerce-billing-fields__field-wrapper .form-heading {
	margin-bottom: 0.75rem;
}



/* Ukrycie starego przycisku logowania z nagłówka motywu Kalium */
.woocommerce-checkout .page-heading__action-container {
    display: none !important;
}

/* Przywrócenie domyślnego paddingu lewej kolumny (czyścimy pozostałości po eksperymentach) */
.checkout #customer_details .col-1 {
    padding-top: 0 !important;
}

/* Ekran nakładki (przyciemnienie tła) */
.checkout-login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--k-overlay-bg);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Okno modala */
.checkout-login-modal-box {
    background: var(--k-color-7);
    padding: 40px;
    width: 90%;
    max-width: 460px;
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}

/* Przycisk zamknięcia (X) */
.close-checkout-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #000;
	font-weight: 300;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}

.close-checkout-modal:hover {
    color: var(--k-color-2);
	box-shadow: none
}

/* Reset obramowań WooCommerce wewnątrz modala */
.checkout-login-modal-box form.login {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
	display: flex !important;
	flex-wrap: wrap
}

/* Dopasowanie marginesów pól formularza w modalu */
.checkout-login-modal-box .form-row-container {
    margin-top: 15px;
}

.checkout-login-modal-box .form-row-container {
	flex-basis: 100%;
    margin-bottom: 1em;
	gap: 10px
}

.checkout-login-modal-box .form-row-container .form-row-submit {
	margin-top: 10px
}

.checkout-login-modal-box .form-row-container .form-row {
	width: auto !important;
	flex-basis: 100%;
	margin-bottom: 0 !important
}

.checkout-login-modal-box .form-row-container .form-row-rememberme {
	margin-top: 1.5em
}

.checkout-login-modal-box .lost_password {
	margin-left: auto
}

.checkout-login-modal-title {
	font-size: 2rem
}

header,
.header-block {
	width: 100%
}

/* .single-product__summary-container .product-brand {
	object-fit: contain;
	object-position: center;
	position: relative;
	filter: brightness(0) saturate(100%) invert(69%) sepia(23%) saturate(275%) hue-rotate(351deg) brightness(93%) contrast(83%);
} */

.single-product__summary-container .product-brand a {
    text-decoration: none;
    color: var(--k-color-1);
    font-weight: 400;
    border: solid 1px var(--k-color-1);
    border-radius: 50px;
    padding: 3px 10px;
    font-size: 0.85rem;
}

.off-canvas-shop-filters-header .button  {
	--k-button-color: var(--k-heading-color)
}

.off-canvas-shop-filters-header .button:hover {
    color: var(--k-link-hover-color) !important
}

.wc-block-product-filter-price-slider .text input[type=text] {
	border-radius:0 !important;
	border-color: var(--k-color-5) !important;
	text-align: center
}

input[type=checkbox].wc-block-product-filter-checkbox-list__input {
	border-radius: 0 !important
}

.wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
}

.wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
}

.my-wc-image-swatch {
	width: 100%;
	height: 100% !important
	border-radius: 0;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(69%) sepia(23%) saturate(275%) hue-rotate(351deg) brightness(93%) contrast(83%);
}

.wc-block-product-filter-checkbox-list__item .wc-block-product-filter-checkbox-list__label:hover {
	cursor: pointer
}

.wc-block-product-filter-checkbox-list__item:has(.my-wc-image-swatch) .wc-block-product-filter-checkbox-list__label:hover .my-wc-image-swatch {
	filter: none
}

.wc-block-product-filter-checkbox-list__item:has(.my-wc-image-swatch) .wc-block-product-filter-checkbox-list__label {
	border: solid 1px var(--k-color-5);
	padding: 10px;
	width: 80px;
	height: 30px !important;
}

.wc-block-product-filter-checkbox-list__item:has(.my-wc-image-swatch) .wc-block-product-filter-checkbox-list__text {
	display: none
}

.wc-block-product-filter-checkbox-list__items:has(.my-wc-image-swatch) {
	display: flex;
	flex-wrap: wrap;
	gap: 5px
}

.woocommerce-breadcrumb {
	font-size: 0.85em
}

body:not(.single-product) .site-main .woocommerce-breadcrumb {
	display: none
}

.shop-heading h1.page-title,
.page-heading__title-container.section-title .page-heading__title {
	font-size: 2.488em
}

:is(.sidebar,.site-footer,.sidebar-menu-wrapper,.top-menu-container) .widget :is(.wp-block-group>.wp-block-heading:first-child,.wp-block-heading:first-of-type,.widget-title) {
    font-size: inherit;
	margin-bottom: 1em
} 

/* Przycisk zbiorczego stosowania filtrów */
.my-apply-filters {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 10px 16px;
    cursor: pointer;
}

body .shop-heading .woocommerce-ordering .orderby {
    padding: 3px 10px;
    border: none;
    box-shadow: none !important
}

body .shop-heading .woocommerce-ordering .orderby:hover {
	background-color: #fff;
}

.shop-heading .term-description {
	margin-top: 0.5rem;
	font-size: 0.875em
}

.shop-heading .term-description p {
	max-width: 800px
}

/* Lista podkategorii w nagłówku kategorii */
.my-subcategories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
	color: var(--k-link-color);
}
.my-subcategories__link {
    display: inline-block;
    text-decoration: none;
	color: var(--k-body-color);
}

.my-subcategories__title {
	color: var(--k-body-color)
}

.my-subcategories__link:hover {
	color: var(--k-body-color);
}

.my-subcategories__item.my-subcategories__item--active a {
	--k-ls-hovered: var(--k-on);
	color: var(--k-color-2);
}

.my-subcategories__count {
    opacity: .6;
    font-size: .85em;
}

/* Nagłówek kategorii: tytuł + opis u góry, pod nimi w jednym wierszu
   podkategorie (lewo) i toolbar z filtrami/sortowaniem (prawo). */
.shop-heading .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Tytuł i opis – pełna szerokość, zostają w osobnym wierszu u góry */
.shop-heading .page-title,
.shop-heading .term-description {
    flex: 0 0 100%;
    width: 100%;
}

/* Podkategorie – po lewej */
.shop-heading .template-part {
    order: 1;
    flex: 1 1 auto;
    margin-right: auto;
}

/* Toolbar (filtry + sortowanie) – po prawej */
.shop-heading .shop-toolbar {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
}

/* Wyrównanie zawartości toolbara w pionie */
.shop-heading .shop-toolbar.row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
}

/* Lista podkategorii bez marginesu górnego, żeby siedziała w linii z toolbarem */
.shop-heading .template-part .my-subcategories {
    margin-top: 0;
}

.shop-toolbar {
	margin-bottom: 0;
	position: relative
}

.shop-heading .container {
	margin-bottom: 2em
}

.woocommerce-page.archive .shop-heading .container {
	position: relative
}

.woocommerce-page.archive .shop-heading .container:after,
.search-results .shop-heading .container:after {
	content: '';
	width: 100%;
	border-bottom: solid 1px var(--k-color-1);
	position: relative;
	bottom: 0;
	order: 3;
	margin-top: 1rem;
	margin-bottom: 1rem
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    color: var(--k-header-link-active-color);
}

.woocommerce-cart-form .shop_table .cart_item :is(td,th) {
	border-color: var(--k-color-1)
}

body .cky-btn {
	border-radius:100px !important;
	border-width: 1px !important;
	padding: 6px 10px !important;
}

body .cky-consent-container .cky-consent-bar,
body .cky-preference-center {
	border-radius: 0;
	box-shadow: none;
	border: 0 
}

body .cky-preference-center,
body .cky-footer-wrapper div:last-of-type {
	background-color: var(--k-color-7) !important
}

body .cky-footer-wrapper div:last-of-type {
	border-radius: 0 !important;
}

body .cky-footer-shadow {
	background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(240, 233, 225) 100%) !important
}

.cky-consent-bar .cky-notice-des p, .cky-gpc-wrapper .cky-gpc-desc p, .cky-preference-body-wrapper .cky-preference-content-wrapper p, .cky-accordion-header-wrapper .cky-accordion-header-des p, .cky-cookie-des-table li div:last-child p {
	line-height: 1.3rem
}

body .cky-notice .cky-title,
body .cky-preference-header .cky-preference-title {
	font-family: 'Lora';
	font-weight: 500
}

.cky-preference-header, .cky-preference-body-wrapper, .cky-preference-content-wrapper, .cky-accordion-wrapper, .cky-accordion, .cky-accordion-wrapper, .cky-footer-wrapper, .cky-prefrence-btn-wrapper {
	border-color: var(--k-color-1) !important
}

body button.cky-show-desc-btn:not(:hover):not(:active) {
	color: var(--k-color-1)
}

.cky-prefrence-btn-wrapper {
	position: relative;
	z-index: 2
}

.cky-preference-header .cky-btn-close img {
	filter: brightness(0) saturate(100%) invert(16%) sepia(25%) saturate(3901%) hue-rotate(347deg) brightness(91%) contrast(89%);
}

.footer-sign .wp-block-column:last-of-type {
	text-align: right
}

.footer-sign {
	font-size: 0.85em
}

.footer-column-1,
.footer-column-1 .lb-element {
	display: flex;
}

.footer-column-1 .lb-element {
	flex-direction: column
}

.footer-column-1 .lb-element  .widget:last-of-type {
	margin-top: auto;
	margin-bottom: 0.5em
}

.blog  .page-heading__description {
	width: 50%;
	padding-right: 25px;
	margin-top: 1em
}

/* Kolory stopki ustawia Personalizacja (Kolory → Stopka), ale nie dosięga
   dwóch przypadków: widżety menu redefiniują --k-link-color na czerń niżej
   w drzewie, a nagłówki bloków biorą barwę z --k-heading-color, nie
   z ustawienia stopki. Stąd te dwie reguły domykające. */
footer a {
	color: var(--k-color-7);
}

/* .site-footer zamiast footer: w arkuszu jest globalna reguła
   h2 { color: var(--k-color-5) }, a selektor z klasą wygrywa z nią wagą,
   niezależnie od kolejności w pliku. */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
	color: var(--k-color-7);
}

footer .widget ul li a,
footer .widget p {
	font-size: 0.85rem
}

footer .wpcf7 input[type="email"] {
	display: block;
    width: 100%;
    padding: var(--k-input-padding, .375rem .75rem);
    font-size: 0.85rem;
    font-weight: var(--k-input-font-weight, 400);
    line-height: var(--k-input-line-height, 1.5);
    color: var(--k-color-7);
    background-color: var(--k-color-1);
    background-clip: padding-box;
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    box-shadow: var(--k-input-shadow-size) var(--k-input-shadow-color);
    border-width: var(--k-input-border-width, var(--k-border-width));
    border-style: var(--k-input-border-style, var(--k-border-style));
    border-color: var(--k-color-7);
    appearance: none;
    border-radius: var(--k-input-border-radius);
    transition: all var(--k-transition-duration-1) ease-in-out, height 0s;
}

footer .wpcf7 input[type="email"]::placeholder {
    color: var(--k-color-7);
    opacity: 1;
}

footer .wpcf7 input.wpcf7-submit {
	padding: var(--k-button-padding);
    border-width: var(--k-button-border-width, var(--k-border-width));
    border-style: var(--k-button-border-style, var(--k-border-style));
    border-color: var(--k-color-7);
    background-color: var(--k-color-7);
    box-shadow: var(--k-button-shadow-size) var(--k-button-shadow-color);
    color: var(--k-color-1);
    font-size: 0.85rem;
    font-weight: var(--k-button-font-weight, 400);
    line-height: var(--k-button-line-height);
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    text-decoration: none;
    border-radius: var(--k-button-border-radius);
    transition: all var(--k-transition-duration-1) ease-in-out, height 0s;
}

/* Najechanie na przycisk zapisu do newslettera. Obramowanie idzie razem
   z tłem, żeby przycisk nie zmieniał przy tym swoich wymiarów ani rysunku
   krawędzi — w spoczynku obie wartości są takie same. */
footer .wpcf7 input.wpcf7-submit:hover,
footer .wpcf7 input.wpcf7-submit:focus-visible {
	border-color: #c2a6a3;
	background-color: #c2a6a3;
}

/* 1. Ustawienie wszystkich elementów w jednej linii */
footer .form-holder {
    display: flex;
    align-items: center;
    gap: 10px; /* Odstęp między polem, przyciskiem i spinnerem */
    width: 100%;
	position: relative
}

/* Pole e-mail rozpycha się na maksymalną wolną szerokość */
footer .form-holder .wpcf7-form-control-wrap {
    flex: 1;
}

footer .form-holder input[type="email"] {
    width: 100%;
    margin: 0;
}

/* Przycisk zachowuje swój rozmiar */
footer .form-holder input[type="submit"] {
    flex-shrink: 0;
    margin: 0;
}

/* 2. Spinner na środku przycisku — patrz blok "Spinner newslettera na przycisku"
   na końcu pliku. Wcześniej stał tu left: 100%, co wypychało go poza przycisk
   i poniżej ~640px rozpychało całą stronę w poziomie. */
footer .form-holder .wpcf7-spinner {
	position: absolute;
	flex-shrink: 0;
}

footer .form-holder .wpcf7-spinner {
    background-color: var(--k-color-7);
}

footer .form-holder .wpcf7-spinner::before {
    background-color: var(--k-color-1);
}

footer .wpcf7 form .wpcf7-response-output {
    margin-left:0;
	margin-right: 0;
    padding: 0.5rem 1rem;
    border: 1px solid var(--k-color-7) !important;
	font-size: 0.85rem
}

body .elementor-heading-title {
	line-height: 1.2em
}

.wpcf7-form .submit-holder {
	display: flex;
	align-items: center;
	gap: 10px
}

.wpcf7-form .submit-holder .wpcf7-spinner {
	position: relative;
	margin: 0
}

.wpcf7-form .submit-holder .wpcf7-spinner {
    background-color: var(--k-color-1);
}

.wpcf7-form .submit-holder .wpcf7-spinner::before {
    background-color: var(--k-color-7);
}

.wpcf7-form .wpcf7-response-output {
    border: 1px solid var(--k-color-1) !important;
}

.stock.in-stock {
	margin-bottom: 0
}

.shipping-method-description {
	font-size: 0.7em
}

/* ==========================================================================
   Kasa — metody wysyłki jako karty wyboru.
   Nagłówek kolumny usunięty w szablonie kalium-child/woocommerce/cart/
   cart-shipping.php, komórka rozciągnięta na obie kolumny tabeli.
   ========================================================================== */

/* WooCommerce ma `.woocommerce table.shop_table td { padding: 9px 12px }`
   o wadze (0,2,2). Selektor z dwiema klasami i jednym elementem — (0,2,1) —
   przegrywa mimo pozornie bardziej szczegółowego zapisu. Stąd table i tr
   w ścieżce: waga (0,3,3).
   Zdejmujemy tylko dół; padding boczny zostaje, żeby karty trzymały jedną
   linię z pozostałymi wierszami podsumowania. */
.woocommerce-checkout table.shop_table tr.woocommerce-shipping-totals > td {
	padding-bottom: 0;
	text-align: left;
}

.woocommerce-checkout .shop_table tr .shipping-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* UWAGA NA SPECYFICZNOŚĆ.
   WooCommerce ma `.woocommerce ul#shipping_method li label { display: inline }`
   — waga (1,1,3), bo lista ma ID. Kalium dokłada
   `.shop_table tr .woocommerce-shipping-methods input + label { display: inline }`.
   Selektor bez ID nie ma szans, dlatego reguły karty prowadzą przez
   ul#shipping_method. Nie skracaj ich do samego .shipping-option. */

.woocommerce-checkout ul#shipping_method.shipping-options {
	text-align: left;
}

.shipping-option {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--k-color-8-alt);
	cursor: pointer;
	transition: border-color var(--k-transition-duration-1) ease-in-out,
	            background-color var(--k-transition-duration-1) ease-in-out;
}

/* Stan wybrany oparty wyłącznie na :has(), nie na klasie z serwera.
   Klasa .shipping-option--selected zmienia się dopiero po przeliczeniu
   koszyka AJAX-em, więc przez ułamek sekundy dwie karty wyglądały na aktywne.
   :has() reaguje na sam stan radio, czyli natychmiast po kliknięciu.
   Klasa serwerowa zostaje wyłącznie jako zapas dla przeglądarek bez :has(). */
.shipping-option:has(input.shipping_method:checked) {
	border-color: var(--k-color-1);
}

@supports not selector(:has(*)) {
	.shipping-option--selected {
		border-color: var(--k-color-1);
		background-color: var(--k-color-7);
	}
}

.woocommerce-checkout ul#shipping_method li.shipping-option > input[type="radio"] {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	margin: 0;
	float: none;
}

.woocommerce-checkout ul#shipping_method li.shipping-option > label {
	grid-column: 2;
	grid-row: 1;
	display: block;
	width: 100%;
	margin: 0;
	text-align: left;
	cursor: pointer;
}

/* Klikalna cała karta, nie tylko tekst etykiety. Pseudoelement etykiety
   rozciąga się na cały kafel, więc padding i obszar ceny też przełączają
   metodę. Radio pozostaje fokusowalne klawiaturą. */
.woocommerce-checkout ul#shipping_method li.shipping-option > label::before {
	content: "";
	position: absolute;
	inset: 0;
}

.shipping-option__name {
	font-weight: 500;
}

/* Cena rozciągnięta na oba wiersze i wyśrodkowana — przy metodzie z opisem
   stoi na wysokości środka bloku tekstu, a nie przy pierwszej linii. */
.woocommerce-checkout ul#shipping_method li.shipping-option > .shipping-option__price {
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
	font-weight: 500;
	white-space: nowrap;
}

.woocommerce-checkout ul#shipping_method li.shipping-option > .shipping-method-description {
	grid-column: 2;
	grid-row: 2;
	margin: 2px 0 0;
	font-size: 0.8em;
	line-height: 1.4;
	color: var(--k-text-muted-color);
	text-align: left;
}

/* ==========================================================================
   Kasa — wybór paczkomatu jako box pod kartami metod wysyłki.
   Wtyczka InPost renderuje go w osobnym wierszu tabeli podsumowania:
   <tr class="shipping paczkomaty-shipping"><td colspan="2">.
   ========================================================================== */

/* Ta sama pułapka co przy wierszu wysyłki: `.woocommerce table.shop_table td`
   ma wagę (0,2,2), więc ścieżka musi zawierać table i tr.
   Zdejmujemy górny padding (9px) i górną linię, żeby cały odstęp nad boksem
   wynikał z jego marginesu i równał się przerwie między kartami wysyłki. */
.woocommerce-checkout table.shop_table tr.paczkomaty-shipping > td {
	padding-top: 0;
	border-top: 0;
	text-align: left;
}

.woocommerce-checkout .paczkomat_id_wrapper {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	width: 100%;
	margin: 8px 0 10px;
	padding: 14px 16px;
	border: 1px solid var(--k-color-8-alt);
	text-align: left;
	transition: border-color var(--k-transition-duration-1) ease-in-out;
}

/* Pole wyboru zabiera całą wolną szerokość, przycisk tylko tyle, ile
   potrzebuje bez zawijania. min-width: 0 jest konieczne, żeby element flex
   mógł zejść poniżej swojej naturalnej szerokości. */
.woocommerce-checkout .paczkomat_id_wrapper > p.form-row {
	flex: 1 1 12rem;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout .paczkomat_id_wrapper > p.form-row.hidden {
	display: none;
}

.woocommerce-checkout .paczkomat_id_wrapper > #open-geowidget {
	flex: 0 0 auto;
	margin: 0;
	padding-left: 15px;
	padding-right: 15px;
	white-space: nowrap;
}

/* Wtyczka InPost daje wewnętrznemu opakowaniu pola margin-bottom: 10px
   (assets/dist/css/checkout.css, doładowywany JS-em PO style.css). Przez to
   dół akapitu wypadał 10px niżej niż dół selecta, a przycisk wyrównany do dna
   akapitu zjeżdżał pod pole. Waga (0,3,2) bije wtyczkowe (0,2,2). */
.woocommerce-checkout span.paczkomat_id_wrapper span.woocommerce-input-wrapper {
	margin-bottom: 0;
}

span.paczkomat_id_wrapper label {
	font-weight:400
}

.paczkomat_id_wrapper span.select2-container,
span.paczkomat_id_wrapper #paczkomat_id {
	width: 100% !important;
	max-width: 100% !important
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: rgba(0,0,0,0.6)
}

.woocommerce-Price-currencySymbol {
	position: relative
}

.woocommerce-Price-currencySymbol:before {
	content: ' '
}

.woocommerce-Price-amount bdi {
	white-space: nowrap
}

.free-shipping-bar__text {
	--k-font-size: 1rem !important
}

.woocommerce-terms-and-conditions-checkbox-text {
	font-size: 0.8rem
}

.woocommerce form .form-row .required {
    -webkit-text-decoration: none;
    text-decoration: none;
}

.product-badge {
	border-radius: 50px;
	background-color: var(--k-color-8) !important
}

.page-numbers:is(a):hover {
	color: #fff
}

.shipping-method-description {
	margin-bottom: 0
}

.woocommerce-checkout .woocommerce-shipping-methods {
	margin-bottom: 0
}

.widget-modal {
	max-height: none !important;
	max-width: none !important;
	padding: 40px;
	overflow: hidden
}

#widget-modal__map:not(.mobile) {
	overflow: hidden
}

/* ==========================================================================
   Akordeon Elementora (nested accordion) — ikona jak na karcie produktu.
   Kalium używa fontu KaliumIcons: \e901 = plus (zwinięty), \e902 = minus
   (rozwinięty), wstawiane pseudoelementem na .accordion__item-toggle.
   Elementor renderuje własne ikony Font Awesome w .e-opened / .e-closed —
   ukrywamy je i podstawiamy ten sam glif, żeby oba akordeony wyglądały tak samo.
   ========================================================================== */

.elementor-widget-n-accordion .e-n-accordion-item-title-icon > span > * {
	display: none;
}

.elementor-widget-n-accordion .e-n-accordion-item-title-icon > span::before {
	font-family: KaliumIcons;
	font-size: 1em;
	line-height: 1;
	color: var(--k-h3-color);
}

.elementor-widget-n-accordion .e-n-accordion-item-title-icon .e-closed::before {
	content: "\e901";
}

.elementor-widget-n-accordion .e-n-accordion-item-title-icon .e-opened::before {
	content: "\e902";
}


/* ==========================================================================
   Stopka — dwa wyjątki od kolorystyki ustawionej w Customizerze.
   ========================================================================== */

/* Hasło marki w kolumnie 1 to <h2>, więc Kalium koloruje je jak nagłówek
   kolumny (--k-footer-headings). Ma być w kolorze treści. */
.lb-element-footer-container-row .footer-column-1 :is(h1, h2, h3, h4, h5, h6) {
	color: var(--k-color-7);
}

/* Dolny pasek z podpisem zostaje w dotychczasowym kolorze. */
.lb-element-footer-container-row .footer-sign,
.lb-element-footer-container-row .footer-sign a {
	color: var(--k-color-7);
}



@media only screen and (max-width: 768px) {
	.shop-heading h1.page-title,
	.page-heading__title-container.section-title .page-heading__title {
		font-size: 1.990em
	}
}


/* ==========================================================================
   Kasa — uwagi do zamówienia zwinięte domyślnie (prawa kolumna).
   Element <details> ze snippetu WPCode 3257. Ikona plus/minus to te same
   glify KaliumIcons, których używa akordeon na karcie produktu i FAQ.
   ========================================================================== */

/* Wiersz tabeli niosący sekcję — zerujemy geometrię komórki, odstępy
   ustawia samo <details>. */
.order-notes-row > td {
	padding: 0;
	border: 0;
}

.order-notes-toggle {
	margin: 0;
	border-top: 1px solid var(--k-color-8-alt);
	border-bottom: 1px solid var(--k-color-8-alt);
}

.order-notes-toggle__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 0;
	cursor: pointer;
	list-style: none;
}

/* Domyślny trójkąt <details> — zdejmujemy w obu składniach. */
.order-notes-toggle__summary::-webkit-details-marker {
	display: none;
}

.order-notes-toggle__summary::marker {
	content: "";
}

.order-notes-toggle__summary::after {
	font-family: KaliumIcons;
	font-size: 1em;
	line-height: 1;
	content: "\e901";
	color: var(--k-h3-color);
}

.order-notes-toggle[open] .order-notes-toggle__summary::after {
	content: "\e902";
}

.order-notes-toggle__content {
	padding-bottom: 12px;
}

.order-notes-toggle__content .form-row {
	margin: 0;
	padding: 0;
}

.invoice-details__separator-dashed,
.invoice-details__separator {
	padding-bottom: 0
}


/* Kasa — etykiety metod płatności w rozmiarze metod wysyłki.
   Kalium ustawia płatnościom 1.125rem / line-height 1.40625rem, a metody
   wysyłki nie mają własnej reguły i dziedziczą 1rem z body. Zjazd do 1rem,
   interlinia przeskalowana w tej samej proporcji (1.25 × rozmiar).
   Wagę 500 zostawiamy — zmiana dotyczy tylko wielkości. */
.woocommerce-checkout .payment_methods li label,
.woocommerce-checkout .payment_methods li label a {
	font-size: 1rem;
	line-height: 1.25rem;
}


/* ==========================================================================
   Kasa — metody płatności jako karty wyboru, spójnie z metodami wysyłki.

   Wszystkie selektory prowadzą przez #payment, bo WooCommerce stylizuje
   .payment_box regułami z ID — bez niego nie da się ich przebić.
   ========================================================================== */

.woocommerce-checkout #payment ul.payment_methods {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--k-color-8-alt);
	cursor: pointer;
	transition: border-color var(--k-transition-duration-1) ease-in-out,
	            background-color var(--k-transition-duration-1) ease-in-out;
}

/* Kalium czyści floaty pseudoelementem (li:after). W siatce stałby się
   dodatkową komórką i rozbił układ, więc go gasimy. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::after {
	content: none;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--k-color-1);
}

/* Kalium wpuszcza radio w padding: float: left i ujemny margines przy
   padding-inline-start: 35px. W siatce jest zwykłą komórką. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input {
	grid-column: 1;
	grid-row: 1;
	position: static;
	top: auto;
	float: none;
	margin: 0;
	align-self: center;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	cursor: pointer;
}

/* Klikalna cała karta, nie tylko tekst etykiety. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label::before {
	content: "";
	position: absolute;
	inset: 0;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img {
	flex: 0 0 auto;
	margin: 0 0 0 auto;
	background: none;
	border-radius: 0;
	/* Kalium daje logo kafelek tła z paddingiem 5px zapisanym jako !important,
	   więc bez !important nie da się go zdjąć. Bez tła ten padding tylko
	   pomniejszałby logo. */
	padding: 0 !important;
}

/* Treść rozwijana pod wybraną metodą (kod BLIK, klauzula mBanku).
   z-index podnosi ją nad nakładkę etykiety — bez tego pole kodu BLIK
   byłoby zasłonięte i nie dałoby się w nie kliknąć. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > .payment_box {
	position: relative;
	z-index: 1;
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 12px 0 0;
	padding: 0;
	background: transparent;
	color: inherit;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > .payment_box::before {
	display: none;
}

.checkout-steps {
	margin-bottom: 0px
}

.checkout {
	margin-top: 0
}

.woocommerce-cart-form {
    margin-block-start: 0px;
}

.woocommerce-cart-form .shop_table {
	margin-block-end: 0
}

.woocommerce-cart-form__contents .actions {
	display: none
}

.invoice-details {
	margin-bottom: 0
}

.thankyou-wrapper .order-received__title:after {
	display: none
}

.thankyou-wrapper .order-received {
	padding-top: 40px;
	padding-bottom: 40px
}

.woocommerce-table--order-details tfoot tr:first-child td:after {
	display: none
}

:is(.woocommerce-MyAccount-content,.woocommerce-order-details,.yith-wcwl-form) .shop_table thead th {
	border: 0
}

.thankyou-wrapper .order-received {
	text-align: left
}

.woocommerce-order-received .checkout-steps {
	padding-top: 20px;
	padding-bottom: 20px
}

body.single-product .summary .product-header .price {
	margin: 0.5rem 0 1rem 0
}

.cart-empty__icon i {
	display: none
}

/* ==========================================================================
   Podział kolumn kasy — 57 / 43 z przerwą 50px.

   Kalium daje domyślnie 50% dla #customer_details oraz 41.67% + przesunięcie
   8.33% dla podsumowania, a odstęp buduje ujemnymi marginesami rzędu
   (--k-gutter-x: 1.5rem) kompensowanymi paddingiem kolumn.

   Tutaj zamiast tej mechaniki używamy column-gap: szerokości są wtedy dokładnie
   proporcją dostępnego miejsca po odjęciu przerwy, a nie procentem powiększonego
   rzędu. Stąd wyzerowane marginesy rzędu i paddingi kolumn.

   Całość w @media (min-width: 992px) — dokładnie tym samym, w którym Kalium
   trzyma swoje szerokości. Poza nim kolumny mają być pełnej szerokości
   i tego nie ruszamy.
   ========================================================================== */

@media (min-width: 992px) {

	.woocommerce-checkout form.checkout {
		column-gap: 50px;
		margin-right: 0;
		margin-left: 0;
	}

	.woocommerce-checkout form.checkout #customer_details {
		flex: 0 0 auto;
		width: calc(57% - 25px);
		padding-right: 0;
		padding-left: 0;
	}

	.woocommerce-checkout form.checkout .woocommerce-checkout-review-order {
		flex: 0 0 auto;
		width: calc(43% - 25px);
		margin-inline-start: 0;
		padding-right: 0;
		padding-left: 0;
	}

}


/* ==========================================================================
   Podział kolumn koszyka — 57 / 43 z przerwą 50px, tak jak w kasie.

   Koszyk ma inną konstrukcję niż kasa: .cart-wrapper > .row > .col, gdzie .row
   pochodzi z bootstrap.min.css. Odstęp buduje tam gutter (ujemne marginesy
   wiersza + padding kolumn z .row > *), domyślnie 1.5rem.

   Zastępujemy to jawnym column-gap — wtedy procenty odnoszą się do realnie
   dostępnej szerokości po odjęciu przerwy. Wymaga wyzerowania marginesów
   wiersza i paddingu kolumn, inaczej odstęp liczyłby się dwa razy.

   Wszystko w @media (min-width: 992px) — tym samym, w którym Kalium ustawia
   szerokość 58.33% dla lewej kolumny. Poniżej kolumny mają się układać
   jedna pod drugą i tego nie ruszamy.
   ========================================================================== */

@media (min-width: 992px) {

	.woocommerce-cart .cart-wrapper > .row {
		column-gap: 50px;
		margin-right: 0;
		margin-left: 0;
	}

	.woocommerce-cart .cart-wrapper > .row > .cart-wrapper__cart-form {
		flex: 0 0 auto;
		width: calc(57% - 25px);
		padding-right: 0;
		padding-left: 0;
	}

	.woocommerce-cart .cart-wrapper > .row > .cart-wrapper__cart-collaterals {
		flex: 0 0 auto;
		width: calc(43% - 25px);
		padding-right: 0;
		padding-left: 0;
	}

	/* Kalium dokłada tabeli koszyka 20px marginesu z prawej jako namiastkę
	   odstępu między kolumnami. Przy jawnej przerwie 50px liczyłoby się to
	   podwójnie i przerwa wyszłaby 70px. */
	.woocommerce-cart .cart-wrapper__cart-form .woocommerce-cart-form {
		margin-inline-end: 0;
	}

}


/* Lewa kolumna koszyka jako biały box — odpowiednik .invoice-details
   po prawej. Tło i padding z tych samych tokenów, więc oba panele zostaną
   spójne przy zmianie skali odstępów.

   box-sizing jawnie, bo padding jest tu na samej kolumnie, której szerokość
   liczymy przez calc() — przy content-box padding rozepchałby kolumnę
   i zjadł przerwę 50px. */
.woocommerce-cart .cart-wrapper__cart-form .woocommerce-cart-form {
	box-sizing: border-box;
	padding: var(--k-content-spacing-4);
	background-color: var(--k-color-8);
}

/* Pasek darmowej wysyłki — odtworzenie wyglądu po zmianie miejsca w drzewie.

   Kalium stylizuje go selektorem `.woocommerce-cart-form .free-shipping-bar`,
   a Dodatkowy CSS z Customizera nadpisuje tam grubość ramki na 1px i promień.
   Oba celują w pasek jako POTOMKA formularza, więc po przeniesieniu go
   hookiem (snippet WPCode 4358) nad box przestały pasować i pasek stracił
   padding, ramkę i margines. Poniżej ten sam zestaw dla nowej pozycji. */
.woocommerce-cart .cart-wrapper__cart-form > .free-shipping-bar {
	padding: var(--k-content-spacing-2);
	border: 1px solid var(--k-border-color);
	border-radius: var(--k-border-radius);
	margin-bottom: var(--k-content-spacing-2);
}

/* Kalium przesuwa tabelę koszyka o 2px w lewo; wewnątrz boksu rozjechałoby
   to jej lewą krawędź względem paddingu. */
.woocommerce-cart .cart-wrapper__cart-form .woocommerce-cart-form {
	margin-inline-start: 0;
}


/* Kasa — zgoda na regulamin: tekst nie podwija się pod checkboxem.

   Szablon WooCommerce (checkout/terms.php) renderuje input i tekst wewnątrz
   jednej etykiety, bez klasy form-check, której używa reszta motywu.
   Odtwarzamy więc ten sam wzorzec ręcznie: akapit dostaje wcięcie 1.5em,
   a checkbox jest w nie wciągany float-em i ujemnym marginesem. Dzięki temu
   każda linia tekstu — także zawinięta — zaczyna się w tym samym miejscu. */

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper > p.form-row {
	padding-left: 1.5em;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper > p.form-row input[type="checkbox"] {
	float: left;
	margin-top: 0.25em;
	margin-left: -1.5em;
	margin-inline-end: 0;
}


/* ==========================================================================
   Podsumowanie zamówienia — porządki na stronie order-received.
   ========================================================================== */

/* Tytuł w rozmiarze nagłówków Koszyka i Kasy (Kalium daje mu 3.5rem),
   opis w rozmiarze zwykłego akapitu (Kalium daje 1.5rem). */
body.woocommerce-order-received .order-received__title {
	font-size: 2.488em;
}

body.woocommerce-order-received .order-received__description {
	font-size: 1rem;
}

@media only screen and (max-width: 768px) {
	body.woocommerce-order-received .order-received__title {
		font-size: 1.990em;
	}
}

/* Ząbkowane ozdobniki nad i pod sekcją z podstawowymi informacjami.
   Kalium rysuje je pseudoelementami radialnym gradientem. */
.woocommerce-order-received .woocommerce-order-overview::before,
.woocommerce-order-received .woocommerce-order-overview::after {
	content: none;
}

/* Tabela szczegółów — tło na całości, nie tylko na nagłówku.
   Obramowania wierszy Kalium rysuje kolorem --k-color-8, czyli dokładnie tym,
   który staje się teraz tłem — stałyby się niewidoczne i tabela zlepiłaby się
   w jednolity blok. Przesuwamy je o stopień ciemniej. */
.woocommerce-order-received .woocommerce-order-details .shop_table {
	background-color: var(--k-color-8);
}

.woocommerce-order-received .woocommerce-order-details .shop_table tbody td,
.woocommerce-order-received .woocommerce-order-details .shop_table tfoot td,
.woocommerce-order-received .woocommerce-order-details .shop_table tfoot th {
	border-bottom-color: var(--k-color-8-alt);
}

/* Nagłówek Szczegóły zamówienia w rozmiarze H5 (TypoLab przypisuje h5 1.44em).
   Rozmiar podany dwiema drogami: zmienną, której używa Kalium, i wprost. */
.woocommerce-order-received .woocommerce-order-details h2.woocommerce-order-details__title {
	--k-font-size: 1.44em;
	font-size: 1.44em;
}

/* Informacje o przesyłce doklejone do wiersza Wysyłka przez snippet WPCode 4364:
   wybrany paczkomat i śledzenie przesyłki. Każdy blok od nowej linii. */
.woocommerce-order-received .order-shipment-info {
	display: block;
	margin-top: 6px;
	font-size: 0.85em;
	line-height: 1.4;
	color: var(--k-text-muted-color);
	word-break: break-word;
}

.woocommerce-order-received .order-shipment-info__label {
	display: block;
	font-weight: 500;
}

.woocommerce-order-received .order-shipment-info__value {
	display: block;
}

/* Adres rozliczeniowy — bez kreski pod nagłówkiem. */
.woocommerce-order-received .address-entry .woocommerce-column__title {
	border-bottom: 0;
}


/* Karta produktu — cena pod tytułem, nie obok.
   Kalium ustawia .product-header jako flex w poziomie z justify-content:
   space-between. Przy samym tytule nie miało to znaczenia, ale cena
   (snippet WPCode 4367) stała się drugim elementem wiersza i lądowała po prawej.
   Przełączamy blok na kolumnę. */
body.single-product .summary .product-header {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--k-content-spacing-1);
}

/* Odstęp buduje gap kontenera, więc własne marginesy ceny są tu zbędne. */
body.single-product .summary .product-header .price {
	margin: 0;
}


/* Wyszukiwarka w nagłówku — szersze pole.
   Szerokość pola wynika z min-width na <span>, bo to on rozpycha .search-field;
   input jest w środku pozycjonowany absolutnie i skaluje się do 80% szerokości.
   Kalium daje 200px. */
.site-header .header-search-input .search-field span {
	min-width: 300px;
}


/* ==========================================================================
   QI Product Slider — neutralizacja reguł Qi na kartach Kalium.

   Snippet WPCode 4448 podmienia zawartość slajdów na kafle z listingu, ale
   arkusze Qi nadal celują w klasy WooCommerce wewnątrz slidera. Sprawdzone
   w przeglądarce: dziewięć reguł Qi trafia w kartę, pięć ją psuje.

   Najgroźniejsza: Qi używa klasy woocommerce-LoopProduct-link jako nakładki
   na cały kafel i nadaje jej position: absolute oraz 100% wysokości. W karcie
   Kalium ta sama klasa siedzi na linku w TYTULE — przez co <h3> zapadał się
   do wysokości 0, a tytuł lądował na obrazku.

   Wartości poniżej odczytane z prawdziwego listingu, nie dobrane na oko.
   Zakres zawężony do .products, żeby natywne slidery Qi (bez podmiany kafli)
   działały dalej po swojemu.
   ========================================================================== */

.qodef-qi-woo-shortcode-product-slider .products .woocommerce-LoopProduct-link {
	position: static;
	width: auto;
	height: auto;
}

.qodef-addons-woo-shortcode .products span.price,
.qodef-qi-woo-shortcode-product-slider .products span.price,
.qodef-qi-woo-shortcode-product-slider.qodef-item-layout--info-below-swap .products span.price {
	display: inline-flex;
	position: static;
	justify-content: normal;
	align-items: normal;
	flex-shrink: 1;
	margin: 0;
}

.qodef-qi-woo-shortcode-product-slider .products .woocommerce-Price-currencySymbol {
	position: relative;
	top: 0;
	font-size: inherit;
}

/* Przycisk koszyka: Qi wymusza display: block na wszystkich <a> w slajdzie
   (.qodef-qi-swiper-container .swiper-slide a:not(...)), przez co ikona i tekst
   przestają leżeć obok siebie. Na listingu ten link ma inline-flex.
   Selektor Qi ma wagę (0,4,1) — dwa :not() liczą się jak klasy — więc tutaj
   potrzeba (0,5,2). */
.qodef-qi-woo-shortcode-product-slider .swiper-slide .products li.product a.add-to-cart {
	display: inline-flex;
	align-items: center;
}

/* Kalium ma własny efekt na obrazku (image-set); zoom Qi nakładał się na niego. */
.qodef-qi-woo-shortcode-product-slider.qodef-image--hover-zoom .products img {
	transform: none;
}


/* ==========================================================================
   Tekstowe przyciski na stronie głównej (widget Elementora z klasą button-link)
   — strzalka identyczna jak w nawigacji slidera Qi.

   Ikona Elementora to wypełniony <path> bez obrysu, więc jej grubości nie da
   się zmienić właściwością stroke-width. Podmieniamy ją na tę samą geometrię,
   której używa Qi: viewBox 34.2 x 32.3, trzy linie, stroke-width 2.
   Przy renderze 1em daje to kreskę ok. 0.94px — dokładnie tyle co w sliderze.

   Maska zamiast tła, żeby kolor nadal szedł z currentColor i strzałka
   reagowała na kolor tekstu przycisku.

   Animacja przepisana z Qi (helper-parts.min.css, .qodef-navigation--hover-move):
   translateX(4px) z przejściem 0.25s cubic-bezier(.37,.08,.02,.93).
   ========================================================================== */

.button-link .elementor-button-icon svg {
	display: none;
}

.button-link .elementor-button-icon::before {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.2 32.3' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='0' y1='16' x2='33' y2='16'/%3E%3Cline x1='17.3' y1='0.7' x2='33.2' y2='16.5'/%3E%3Cline x1='17.3' y1='31.6' x2='33.5' y2='15.4'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.2 32.3' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='0' y1='16' x2='33' y2='16'/%3E%3Cline x1='17.3' y1='0.7' x2='33.2' y2='16.5'/%3E%3Cline x1='17.3' y1='31.6' x2='33.5' y2='15.4'/%3E%3C/svg%3E") no-repeat center / contain;
	transform: translateX(0);
	will-change: transform;
	transition: transform 0.25s cubic-bezier(0.37, 0.08, 0.02, 0.93);
}

.button-link .elementor-button:hover .elementor-button-icon::before,
.button-link .elementor-button:focus-visible .elementor-button-icon::before {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.button-link .elementor-button-icon::before {
		transition: none;
	}
}


/* ==========================================================================
   Slider bloga (Qi Blog Carousel, układ Boxed) — tylko to, czego nie da się
   ustawić w widgecie. Reszta (kadr 1300x650, tło boksu, brak cienia, H5,
   data 0.8rem, wstęp, treść przycisku) siedzi w ustawieniach widgetu.
   ========================================================================== */

/* 2. Przycisk "Czytaj więcej" jak tekstowe CTA na stronie głównej.
      Widget nie wystawia opcji wyglądu przycisku — Qi renderuje go zawsze
      w wariancie filled (szare tło, padding 13px 46px). Zdejmujemy oprawię
      i doklejamy tę samą strzałkę co w przyciskach .button-link. */
/* 1a. Zewnętrzne pudełko kafla. Ustawienie tła w widgecie koloruje tylko
      .qodef-e-content; .qodef-e-inner Qi maluje na #fff własnym arkuszem
      i nie wystawia tego jako opcji. Wyrównujemy do tego samego tokenu. */
.qodef-addons-blog-slider.qodef-item-layout--boxed .qodef-e-inner {
	background-color: var(--k-color-8);
}

/* 1b. Jednolity kadr zdjęć niezależnie od źródła.
      Ustawienie Custom 600x800 (3:4, jak kafle produktów) kadruje tylko zdjęcia dostatecznie
      duże. Wpis ze zdjęciem szerokim na 960px dostał kadr 960x650 i jego kafel
      był o 70px wyższy. Za małego źródła nie naprawi żadne ustawienie, więc
      proporcję wymuszamy przy wyświetlaniu. */
.qodef-addons-blog-slider .qodef-e-media-image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.qodef-addons-blog-slider .qodef-e-read-more .qodef-qi-button {
	overflow: visible;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--k-color-3);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

/* Bez zmiany koloru na hover — przyciski CTA na tej stronie też go nie zmieniają.
   overflow: visible jest konieczne: Qi daje .qodef-qi-button overflow: hidden,
   przez co strzałka przesunięta o 4px była przycinana przy krawędzi. */
.qodef-addons-blog-slider .qodef-e-read-more .qodef-qi-button:hover {
	background: none;
	color: inherit;
}

.qodef-addons-blog-slider .qodef-e-read-more .qodef-qi-button::after {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.2 32.3' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='0' y1='16' x2='33' y2='16'/%3E%3Cline x1='17.3' y1='0.7' x2='33.2' y2='16.5'/%3E%3Cline x1='17.3' y1='31.6' x2='33.5' y2='15.4'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.2 32.3' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='0' y1='16' x2='33' y2='16'/%3E%3Cline x1='17.3' y1='0.7' x2='33.2' y2='16.5'/%3E%3Cline x1='17.3' y1='31.6' x2='33.5' y2='15.4'/%3E%3C/svg%3E") no-repeat center / contain;
	transform: translateX(0);
	will-change: transform;
	transition: transform 0.25s cubic-bezier(0.37, 0.08, 0.02, 0.93);
}

.qodef-addons-blog-slider .qodef-e-read-more .qodef-qi-button:hover::after,
.qodef-addons-blog-slider .qodef-e-read-more .qodef-qi-button:focus-visible::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.qodef-addons-blog-slider .qodef-e-read-more .qodef-qi-button::after {
		transition: none;
	}
}

/* Równa wysokość wszystkich kafli.
   Slajdy Swipera mają domyślnie wysokość własnej treści, więc dłuższy tytuł
   albo wstęp podnosił pojedyncze pudełko. Rozciągamy slajdy do najwyższego
   i pozwalamy treści wypełnić resztę, a przycisk dosuwamy do dna. */
.qodef-addons-blog-slider .swiper-wrapper {
	align-items: stretch;
}

.qodef-addons-blog-slider .qodef-blog-item {
	height: auto;
}

.qodef-addons-blog-slider.qodef-item-layout--boxed .qodef-e-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.qodef-addons-blog-slider.qodef-item-layout--boxed .qodef-e-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.qodef-addons-blog-slider.qodef-item-layout--boxed .qodef-e-info--bottom {
	margin-top: auto;
}


/* ==========================================================================
   Mega menu "Sklep" (pozycja menu 2981) — szerokości kolumn.

   Wtyczka daje pięć kolumn po span 2 w siatce 12-kolumnowej, czyli 10/12 =
   83,3% szerokości panelu. Przeliczamy siatkę na 18 torów: trzy kolumny
   z klasą col-26 dostają po 4 (razem 12/18 = 2/3), dwie kolumny z widgetami
   po 3 (razem 6/18 = 1/3). Suma 18 — panel wypełnia się w 100%.

   Tylko desktop: poniżej 769px wtyczka zwija panel do jednej kolumny własnym
   media query, a te selektory są od niej bardziej specyficzne i nadpisałyby to.

   UWAGA: skoro szerokościami steruje CSS, zmiana pola "span" w interfejsie
   Max Mega Menu dla tego panelu nie da efektu.

   Ten blok ginął już dwukrotnie przy zapisie pliku ze starszego bufora
   edytora (30.08 oraz wcześniej). Jeśli zniknie po raz trzeci — przyczyną
   jest zapis z zewnątrz, nie sama reguła.
   ========================================================================== */

/* Siatka 18 torów wspólna dla całego desktopu. */
@media only screen and (min-width: 769px) {

	#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-grid.mega-menu-item-2981 > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu {
		grid-template-columns: repeat(18, minmax(0, 1fr));
	}

}

/* 769-1023px: wszystkie kolumny po 1/3 szerokości (span 6 z 18).
   Trzy kategorie wypełniają pierwszy wiersz, dwa boksy graficzne schodzą
   do drugiego i mają tę samą szerokość co kolumny nad nimi — trzecia
   pozycja drugiego wiersza zostaje celowo pusta. */
@media only screen and (min-width: 769px) and (max-width: 1023.98px) {

	#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-grid.mega-menu-item-2981 > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column {
		grid-column: span 6;
	}

}

/* Od 1024px wszystko mieści się w jednym rzędzie:
   3 x 4 = 12 (2/3) plus 2 x 3 = 6 (1/3). */
@media only screen and (min-width: 1024px) {

	#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-grid.mega-menu-item-2981 > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column.col-26 {
		grid-column: span 4;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-grid.mega-menu-item-2981 > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column:not(.col-26) {
		grid-column: span 3;
	}

}

/* Boksy graficzne w mega menu nie mają podkreślenia linku.
   Motyw rysuje je gradientem w tle (background-size: 0% 1px rozsuwany
   na hover), nie borderem ani pseudoelementem — stąd czarna kreska
   przesuwająca się wzdłuż dolnej krawędzi kafla. */
#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-item-2981 .category-box a {
	background-image: none;
}


/* ==========================================================================
   Nagłówek listingu na mobile (do 768px):
   wiersz podkategorii nad paskiem filtrów i sortowania.

   .shop-heading > .container jest flexem z zawijaniem, więc kolejność zmieniamy
   właściwością order — w HTML pasek narzędzi stoi przed listą podkategorii.
   ========================================================================== */

@media only screen and (max-width: 768px) {

	.shop-heading > .container > .my-subcategories {
		order: 1;
	}

	.shop-heading > .container > .wp-block-spacer {
		order: 2;
	}

	.shop-heading > .container > .shop-toolbar {
		order: 3;
	}

	/* Pasek podkategorii na pełną szerokość okna, przewijany palcem.

	   margin-inline: calc(50% - 50vw) wyprowadza listę poza padding kontenera
	   aż do krawędzi ekranu, a padding-inline: calc(50vw - 50%) wraca tę samą
	   wartość do środka — dzięki temu pierwszy element stoi w jednej linii
	   z tytułem, a przewijanie sięga krawędzi ekranu. Obie wartości wyliczają
	   się same, więc działa niezależnie od paddingu kontenera na danym ekranie. */
	.shop-heading .my-subcategories {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: calc(50vw - 50%);
		padding-right: calc(50vw - 50%);

		/* Pasek przewijania ukryty — przewijanie palcem zostaje. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.shop-heading .my-subcategories::-webkit-scrollbar {
		display: none;
	}

	/* Bez tego pozycje kurczyłyby się zamiast wychodzić poza widoczny obszar. */
	.shop-heading .my-subcategories > li {
		flex: 0 0 auto;
	}

	/* Filtry i sortowanie w jednym wierszu. Lewa kolumna paska jest pusta,
	   więc chowamy ją i rozkładamy oba elementy w prawej. */
	/* Bez bocznych marginesów rzędu i paddingu kolumn (gutter siatki),
	   żeby przycisk filtrów i pole sortowania stały równo z krawędzią treści
	   i z linią pod nimi. */
	.shop-heading .shop-toolbar {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.shop-heading .shop-toolbar__column {
		padding-left: 0;
		padding-right: 0;
	}

	.shop-heading .shop-toolbar__column--left {
		display: none;
	}

	.shop-heading .shop-toolbar__column--right {
		flex: 1 1 auto;
		width: 100%;
		justify-content: space-between;
	}

	.shop-heading .shop-toolbar__column--right .filters-toggle {
		order: 1;
	}

	.shop-heading .shop-toolbar__column--right .woocommerce-ordering {
		order: 2;
	}

}


/* ==========================================================================
   Filtry rozwinięte także na mobile.

   Blok WooCommerce "Product Filters" przełącza się na 601px: powyżej listy są
   wypisane wprost, poniżej zamieniają się w nakładkę (position: fixed,
   pointer-events: none) ukrytą za przyciskiem "Filtry". Na tej witrynie panel
   filtrów i tak otwiera się w bocznym pasku Kalium, więc druga warstwa
   otwierania jest zbędna — klient widział pusty pasek z jednym przyciskiem.

   Poniżej powielamy zestaw reguł, który WooCommerce stosuje od 601px, dla
   ekranów mniejszych. Selektory i wartości odczytane wprost z arkusza wtyczki,
   żeby zachowanie było identyczne jak na desktopie.
   ========================================================================== */

@media only screen and (max-width: 600px) {

	.wc-block-product-filters .wc-block-product-filters__open-overlay,
	.wc-block-product-filters .wc-block-product-filters__overlay-footer,
	.wc-block-product-filters .wc-block-product-filters__overlay-header,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__open-overlay,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-footer,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-header {
		display: none;
	}

	.wc-block-product-filters .wc-block-product-filters__overlay,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
		position: relative;
		inset: 0;
		background: inherit;
		color: inherit;
		pointer-events: auto;
		transition: none;
	}

	.wc-block-product-filters .wc-block-product-filters__overlay-wrapper,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-wrapper {
		width: auto;
		height: auto;
		background: inherit;
		color: inherit;
	}

	.wc-block-product-filters .wc-block-product-filters__overlay-dialog,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
		position: relative;
		transform: none;
		background: inherit;
		color: inherit;
	}

	.wc-block-product-filters .wc-block-product-filters__overlay-content,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-content {
		flex-grow: 1;
		overflow: visible;
		padding: 0;
		background: inherit;
		color: inherit;
	}

}


/* Plakietki na kaflach produktów (wyprzedaż, brak w magazynie) — mniejsze
   na wąskich ekranach. Domyślnie 0.75em, czyli 12px; przy szerokości kafla
   ok. połowy ekranu napis "Brak w magazynie" zajmował większość zdjęcia.

   Padding plakietki jest podany w em, więc kurczy się razem z tekstem —
   nie trzeba go osobno zmniejszać. Zakres ograniczony do kafli w pętli
   (ul.products), żeby nie ruszać plakietki na karcie produktu. */
@media only screen and (max-width: 480px) {

	ul.products li.product .product-badge {
		font-size: 0.65em;
	}

}


/* Większy odstęp między wierszami produktów na mobile.
   Siatka listingu używa jednej wartości w obu osiach (--k-grid-gap, domyślnie
   3em = 48px). Przy dwóch kolumnach na wąskim ekranie kafle zlewały się
   w pionie, więc podwajamy sam row-gap — odstęp między kolumnami zostaje.

   Wartość liczona z tej samej zmiennej, a nie wpisana liczbą: jeśli zmienisz
   skalę siatki w motywie, odstęp pionowy pójdzie za nią.

   :not(.shop-categories) wyłącza listy kategorii (m.in. w mega menu), które
   korzystają z tych samych klas, ale nie są listingiem produktów. */
@media only screen and (max-width: 768px) {

	ul.products.grid:not(.shop-categories) {
		row-gap: calc(var(--k-grid-gap, var(--k-grid-gutter-width)) * 2);
	}

}


/* ==========================================================================
   Stopka — układ kolumn na węższych ekranach.

   Builder nadaje kolumnom klasy siatki: pierwsza ma col-xl-w-40 / col-md-12,
   pozostałe col-xl-w-20 / col-md-6. Skutek: poniżej 1200px pierwsza kolumna
   dostaje pełną szerokość, a trzy kolejne spadają pod nią po połowie.

   Pierwszą kolumnę rozpoznajemy po klasie footer-column-1, pozostałe przez selektor
   rodzeństwa — dzięki temu reguły nie łapią kolumny w dolnym pasku stopki,
   który leży w osobnym wierszu.
   ========================================================================== */

/* 1024-1199px: cztery kolumny równej szerokości, z odstępem po pierwszej.
   4 x 23.5% + 6% marginesu = 100%, więc wszystko mieści się w jednym wierszu,
   a kolumna z logo i hasłem nie przylega do listy linków. */
@media only screen and (min-width: 1024px) and (max-width: 1199.98px) {

	.site-footer .footer-column-1,
	.site-footer .footer-column-1 ~ .lb-element-column {
		flex: 0 0 23.5%;
		max-width: 23.5%;
	}

	.site-footer .footer-column-1 {
		margin-right: 6%;
	}

}

/* 768-1023px: pierwsza kolumna sama w wierszu, pozostałe trzy po 1/3. */
@media only screen and (min-width: 768px) and (max-width: 1023.98px) {

	.site-footer .footer-column-1 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.site-footer .footer-column-1 ~ .lb-element-column {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}

}

/* Poniżej 768px: każda kolumna na pełną szerokość, jedna pod drugą. */
@media only screen and (max-width: 767.98px) {

	/* Pierwsza kolumna i newsletter na całą szerokość, dwie kolumny
	   z linkami obok siebie po połowie. Numeracja liczona w wierszu:
	   1 = logo i ikony, 2 i 3 = listy linków, 4 = newsletter. */
	.site-footer .footer-column-1,
	.site-footer .footer-column-1 ~ .lb-element-column:nth-child(4) {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.site-footer .footer-column-1 ~ .lb-element-column:nth-child(2),
	.site-footer .footer-column-1 ~ .lb-element-column:nth-child(3) {
		flex: 0 0 50%;
		max-width: 50%;
	}

	/* Kolejność na mobile: logo z ikonami, newsletter, dopiero potem linki.
	   W HTML newsletter jest ostatni, więc przestawiamy właściwością order
	   zamiast ruszać szablonu. Obie kolumny z linkami mają tę samą wartość,
	   więc między sobą zachowują kolejność z HTML. */
	.site-footer .footer-column-1 {
		order: 1;
	}

	.site-footer .footer-column-1 ~ .lb-element-column:nth-child(4) {
		order: 2;
	}

	.site-footer .footer-column-1 ~ .lb-element-column:nth-child(2),
	.site-footer .footer-column-1 ~ .lb-element-column:nth-child(3) {
		order: 3;
	}

	/* Pierwsza kolumna: logo z hasłem po lewej, ikony społecznościowe
	   po prawej, dosunięte do dolnej krawędzi. Panel ma trzy widgety
	   (logo, hasło, ikony), więc układamy je siatką dwa na dwa. */
	.site-footer .footer-column-1 > [class*="lb-element-footer-sidebar"] {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: end;
		width: 100%;
		column-gap: 1rem;
	}

	.site-footer .footer-column-1 > [class*="lb-element-footer-sidebar"] > .widget:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	.site-footer .footer-column-1 > [class*="lb-element-footer-sidebar"] > .widget:nth-child(2) {
		grid-column: 1;
		grid-row: 2;
	}

	.site-footer .footer-column-1 > [class*="lb-element-footer-sidebar"] > .widget:nth-child(3) {
		grid-column: 2;
		grid-row: 1 / span 2;
		justify-self: end;
		align-self: end;
		margin-bottom: 1em;
	}

	/* Odstęp pod newsletterem, żeby nie przylegał do kolumn z linkami. */
	.site-footer .footer-column-1 ~ .lb-element-column:nth-child(4) {
		padding-bottom: 1em;
	}

	/* Dolny pasek (prawa zastrzeżone + itmfox): jedno pod drugim, wyśrodkowane.
	   Kolumny bloku mają flex-basis: 0 i flex-grow: 1, więc samo złamanie
	   kierunku nie wystarcza — trzeba też uwolnić ich szerokość. */
	.site-footer .footer-sign {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}

	.site-footer .footer-sign > .wp-block-column {
		flex-basis: auto;
		width: 100%;
		text-align: center;
	}

}


/* Ikona konta w nagłówku — rozmiar równy ikonom wyszukiwarki i koszyka.
   Motyw daje jej 1.222em (19,54px), a pozostałe dwie renderują się na 21,99px.
   1.375em przy bazie 16px daje dokładnie tę wartość. */
.site-header .header-block__item .woocommerce-account-link__icon {
	width: 1.375em;
	height: 1.375em;
}


/* Obszar widżetów na dole menu mobilnego (snippet WPCode 4556).
   .mobile-menu jest flexem w kolumnie, więc margin-top: auto dosuwa blok
   do dolnej krawędzi niezależnie od długości menu. */
.mobile-menu .mobile-menu__widgets {
	margin-top: auto;
	padding-top: 1.5rem;
	text-align: left;
}

.mobile-menu .mobile-menu__widget + .mobile-menu__widget {
	margin-top: 0.75rem;
}

/* Link do konta bez podkreślenia. Motyw rysuje je gradientem w tle
   (background-size: 0% 1px rozsuwany na hover), nie borderem, więc
   text-decoration nic by tu nie dało. */
.mobile-menu .mobile-menu-account-link {
	background-image: none;
	text-decoration: none;
}

/* Formularz logowania na stronie Moje konto — czytelna długość wiersza. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login {
	max-width: 500px;
}

/* Na mobile wejście do konta jest w menu, więc ikona w nagłówku znika. */
@media only screen and (max-width: 768px) {

	.site-header .header-block__item--type-woocommerce-my-account-link {
		display: none;
	}

}


/* ==========================================================================
   Karta produktu — poprawki mobilne.
   ========================================================================== */

/* Przycisk koszyka nigdy nie łamie tekstu. Formularz jest flexem, więc to pole
   ilości ma ustąpić — domyślne min-width: auto nie pozwala mu się zwęzić
   poniżej własnej treści, stąd jawne min-width: 0. */
.single-product form.cart .single_add_to_cart_button {
	white-space: nowrap;
	flex: 1 1 auto;
}

.single-product form.cart .quantity {
	flex: 0 1 auto;
	min-width: 0;
}

.single-product form.cart .quantity input.qty {
	min-width: 0;
}

/* Polecane "W tej samej kolekcji" — dwie kolumny jak na listingu.
   Motyw wypisuje tej liście tylko klasę columns-lg-4, bez odpowiedników
   responsywnych, które ma pętla sklepu (columns-md-3 columns-2). */
@media only screen and (max-width: 768px) {

	.up-sells ul.products.grid,
	.related ul.products.grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/* 769-1024px: trzy kolumny. Bez tego lista spada tu do jednej kolumny,
   bo klasa columns-lg-4 działa dopiero od dużych ekranów. */
@media only screen and (min-width: 769px) and (max-width: 1024px) {

	.up-sells ul.products.grid,
	.related ul.products.grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}




/* .single-product__summary-container — odstęp pod pierwszą sekcją karty produktu.
   Ustawiony na kontenerze, a nie w poszczególnych szablonach: dzięki temu każdy
   template part albo sekcja dodana pod galerią i opisem dostaje ten sam odstęp
   bez osobnej konfiguracji. Motyw daje tu domyślnie 40px. */
.single-product .single-product__summary-container {
	margin-bottom: 50px;
}

@media only screen and (max-width: 768px) {

	.single-product .single-product__summary-container {
		margin-bottom: 25px;
	}

}




/* Pole ilości ciasniejsze na wąskich ekranach, żeby przycisk koszyka miał
   więcej miejsca. Domyślnie padding 8px 12px plus przyciski +/- po 10px. */
@media only screen and (max-width: 480px) {

	.single-product form.cart .quantity {
		padding-right: 4px;
		padding-left: 4px;
	}

	.single-product form.cart .quantity .plusminus {
		padding: 10px 4px;
	}

	.single-product form.cart .quantity input.qty {
		width: 2.5em;
	}

	.single-product form.cart .single_add_to_cart_button {
		padding-right: 16px;
		padding-left: 16px;
	}

}

/* ==========================================================================
   Kasa — boks "Zapakuj na prezent" (snippet WPCode 4560).
   Siedzi w tabeli podsumowania, nad uwagami do zamówienia.
   Tło --k-color-7, czyli ciemniejszy odcień używany w kasie m.in. na
   zaznaczonej metodzie wysyłki i w boksie paczkomatu.
   ========================================================================== */

.woocommerce-checkout table.shop_table tr.gift-wrap-row > td {
	padding: 0;
	border-top: 0;
}

.woocommerce-checkout .gift-wrap {
	/* Komórka tabeli podsumowania ma text-align: end — bez tego etykieta
	   uciekałaby do prawej krawędzi, z dala od checkboxa. */
	text-align: left;
	padding: 14px 16px;
	border: 1px solid var(--k-color-8-alt);
	margin: 8px 0 10px;
	transition: border-color var(--k-transition-duration-1) ease-in-out;
}

/* Checkbox według natywnego wzorca Kalium: pole wypływa w lewo poza tekst,
   dzięki czemu druga linia etykiety nie podjeżdża pod kwadracik. */
.woocommerce-checkout .gift-wrap__toggle {
	display: block;
	margin: 0;
	padding-left: 1.5em;
}

.woocommerce-checkout .gift-wrap__toggle input.gift-wrap__checkbox {
	float: left;
	margin-top: 0.25em;
	margin-left: -1.5em;
}

.woocommerce-checkout .gift-wrap__toggle label {
	display: inline;
	margin: 0;
	cursor: pointer;
}

.woocommerce-checkout .gift-wrap__content {
	margin-top: 12px;
}

/* [hidden] samo w sobie ustawia display: none, ale motywy często nadpisują
   display na elementach formularza — stąd jawna reguła. */
.woocommerce-checkout .gift-wrap__content[hidden] {
	display: none;
}

.woocommerce-checkout .gift-wrap__content textarea {
	width: 100%;
	margin-bottom: 0;
}

.woocommerce-checkout .gift-wrap__counter {
	margin: 4px 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--k-text-muted-color);
	text-align: right;
}


/* ==========================================================================
   Strona główna — przezroczysty nagłówek wraca do zwykłych barw na czas
   otwartego mega menu.

   Przezroczysty nagłówek (Personalizacja → Header → Transparent Header)
   ustawia zmienne --k-header-link-* na :root, więc tutaj nadpisujemy je
   na tym samym poziomie — stąd selektor na html, a nie na .site-header.
   Max Mega Menu dodaje klasę mega-toggle-on na otwartej pozycji menu.
   ========================================================================== */

html:has(#mega-menu-main-menu li.mega-toggle-on) {
	--k-header-link-color: var(--k-color-3);
	--k-header-link-hover-color: var(--k-color-3);
	--k-header-link-active-color: var(--k-color-2);
	--k-header-menu-trigger-color: var(--k-color-3);
	--k-header-color: var(--k-color-3);
}

/* Tło nagłówka takie jak panel mega menu, żeby oba tworzyły jedną płaszczyznę. */
.header-absolute .site-header:has(#mega-menu-main-menu li.mega-toggle-on) {
	background-color: var(--k-color-7);
}

.header-absolute .site-header:has(#mega-menu-main-menu li.mega-toggle-on) .header-block__item {
	color: var(--k-color-3);
}


/* Przezroczysty nagłówek bez dolnej kreski.
   Motyw rysuje ją na .header-block przez zmienne --k-header-border-*,
   więc wystarczy je wyzerować — bez sięgania do samego border-bottom.
   Przy otwartym mega menu nagłówek przestaje być przezroczysty i dostaje tło,
   więc kreska tam wraca (stąd :not()). */
html:not(:has(#mega-menu-main-menu li.mega-toggle-on)):not(:has(.sticky-element-fixed)):not(:has(.sticky-element-active)) .header-absolute .site-header,
html:not(:has(#mega-menu-main-menu li.mega-toggle-on)):not(:has(.sticky-element-fixed)):not(:has(.sticky-element-active)).header-absolute .site-header {
	--k-header-border-width: 0;
	--k-header-border-style: none;
}


/* Cyfra w plakietce koszyka musi kontrastować z jej tłem, a tło bierze kolor
   elementów nagłówka. Na przezroczystym nagłówku tło jest jasne, więc cyfra
   musi być ciemna; gdy nagłówek dostaje tło (mega menu albo sticky), plakietka
   ciemnieje i cyfra wraca do jasnej. Zakres zawężony do .header-absolute,
   żeby nie ruszać pozostałych stron, gdzie plakietka jest ciemna od zawsze. */
.header-absolute .site-header .mini-cart-trigger .badge.items-count {
	color: var(--k-color-3);
}

/* Te same pięć klas co reguła wyżej plus selektor na html — inaczej stan
   przezroczysty (5 klas) wygrywałby wagą i cyfra zostawała czarna na czarnym. */
html:has(#mega-menu-main-menu li.mega-toggle-on) .site-header .mini-cart-trigger .badge.items-count,
html:has(.sticky-element-fixed) .site-header .mini-cart-trigger .badge.items-count,
html:has(.sticky-element-active) .site-header .mini-cart-trigger .badge.items-count {
	color: var(--k-color-8);
}

/* Zgranie przejść w nagłówku.
   Linki menu mają w motywie przejście 0.18s, a tło i kreska zmieniały się
   natychmiast — przy powrocie na górę strony tło znikało, zanim kolory zdążyły
   wrócić. Dajemy wszystkiemu tę samą wartość, więc nagłówek przełącza się
   jako całość. Wypisane właściwości zamiast all, żeby nie ruszać animacji
   wjazdu sticky (transform). */
.site-header,
.site-header .header-block {
	transition: background-color 0s, border-color 0s;
}

.site-header .woocommerce-account-link,
.site-header .woocommerce-account-link .inline-svg-icon,
.site-header .woocommerce-account-link svg,
.site-header .mini-cart-trigger,
.site-header .badge.items-count,
.site-header .main-logo,
.site-header #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
	transition: color 0s, background-color 0s, filter 0s;
}

/* Sticky nagłówek ma własne tło, więc elementy muszą na nim pozostać ciemne,
   także na stronie głównej z nagłówkiem przezroczystym. Klasy dodaje skrypt
   motywu (sticky-header.js): sticky-element-fixed oraz sticky-element-active.

   Selektor na html, a nie na .site-header — przezroczysty nagłówek definiuje
   te zmienne na :root, a arkusz Max Mega Menu czyta je selektorem z dwoma ID.
   Nadpisanie niżej w drzewie było przez to nieskuteczne. */
html:has(.sticky-element-fixed),
html:has(.sticky-element-active) {
	--k-header-link-color: var(--k-color-3);
	--k-header-link-hover-color: var(--k-color-3);
	--k-header-link-active-color: var(--k-color-2);
	--k-header-menu-trigger-color: var(--k-color-3);
	--k-header-color: var(--k-color-3);
}

html:has(.sticky-element-fixed) .site-header .header-block__item,
html:has(.sticky-element-active) .site-header .header-block__item {
	color: var(--k-color-3);
}


/* Logo na przezroczystym nagłówku — rozjaśnione filtrem zamiast drugiego pliku.
   brightness(0) sprowadza grafikę do czerni niezależnie od jej własnych barw,
   a invert(1) zamienia ją na biel. Logo jest wstawione jako <img src=...svg>,
   więc nie da się go pokolorować przez fill — filtr jest tu jedyną drogą
   bez wgrywania osobnego pliku.
   Zakres taki sam jak dla pozostałych elementów: tylko gdy nagłówek jest
   naprawdę przezroczysty, czyli poza mega menu i sticky. */
/* Kolor logo przez maskę, nie filtr.
   Łańcuch filtrów potrafi trafić tylko w przybliżenie — sepia daje
   (240,240,225) zamiast (240,233,225), czyli kanał zielony rozjeżdża się o 7.
   Maska wycina kształt logo z prostokąta wypełnionego zmienną motywu,
   więc kolor jest dokładnie --k-color-7 i podąża za ewentualną zmianą tokenu.
   Samo <img> chowamy przez visibility, żeby dalej wyznaczało wymiary linku.

   UWAGA: adres pliku wpisany na stałe — po podmianie logo trzeba go
   zaktualizować także tutaj.

   Poza warunkiem na html doszedł straznik na samym .site-header: skrypt sticky
   dopisuje swoje klasy do elementu-opakowania, którym bywa sam nagłówek,
   a wtedy :has() ich nie widzi. */
html:not(:has(#mega-menu-main-menu li.mega-toggle-on)):not(:has(.sticky-element-fixed)):not(:has(.sticky-element-active)) .header-absolute .site-header:not(.sticky-element-fixed):not(.sticky-element-active) .header-logo {
	background-color: var(--k-color-7);
	-webkit-mask: url("https://puesta.pl/wp-content/uploads/2026/03/puesta-logo.svg") no-repeat center / contain;
	mask: url("https://puesta.pl/wp-content/uploads/2026/03/puesta-logo.svg") no-repeat center / contain;
}

html:not(:has(#mega-menu-main-menu li.mega-toggle-on)):not(:has(.sticky-element-fixed)):not(:has(.sticky-element-active)) .header-absolute .site-header:not(.sticky-element-fixed):not(.sticky-element-active) .header-logo .main-logo {
	visibility: hidden;
}


/* Ikona lupy na przezroczystym nagłówku po rozwinięciu pola wyszukiwania.
   Rozwinięte pole (.search-field) ma własne jasne tło --k-color-8, a ikona
   dziedziczy jasny kolor elementów nagłówka — przez co znikała na tym tle.
   Klasę search-field-visible dodaje skrypt motywu do .header-search-input
   w momencie otwarcia pola. Uwaga: base.js zna też klasę
   header-search-input--input-visible, ale ta dotyczy wariantu wyszukiwarki
   w górnym pasku nagłówka i tutaj nigdy się nie pojawia. */
.header-absolute .site-header .header-search-input.search-field-visible .search-icon,
.header-absolute .site-header .header-search-input.search-field-visible .search-icon a,
.header-absolute .site-header .header-search-input.search-field-visible .search-icon .inline-svg-icon {
	color: var(--k-color-3);
}


/* ==========================================================================
   Kasa — wspólne stany obramowania boksów w prawej kolumnie:
   pakowanie na prezent, metody wysyłki, wybór paczkomatu, metody płatności.

   Wszystkie mają domyślnie tę samą ramkę (--k-color-8-alt) i przezroczyste tło.
   Różni je tylko to, co oznacza stan aktywny: dla wysyłki i płatności jest to
   zaznaczony radio, dla paczkomatu i prezentu — praca wewnątrz boksu.
   ========================================================================== */

/* Najechanie — wspólne dla wszystkich czterech. */
.woocommerce-checkout .gift-wrap:hover,
.woocommerce-checkout ul#shipping_method .shipping-option:hover,
.woocommerce-checkout .paczkomat_id_wrapper:hover,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover {
	border-color: #c2a6a3;
}

/* Stan aktywny boksów bez radio: :focus-within łapie moment, gdy klient pisze
   dedykację albo pracuje w polu.

   Dla paczkomatu to nie wystarcza: pole to Select2, który po otwarciu przenosi
   fokus do własnej wyszukiwarki renderowanej poza boksem — :focus-within
   natychmiast przestaje pasować. Kontener Select2 wewnątrz boksu dostaje
   wtedy klasę select2-container--open i to po niej rozpoznajemy stan. */
.woocommerce-checkout .paczkomat_id_wrapper:focus-within,
.woocommerce-checkout .paczkomat_id_wrapper:has(.select2-container--open),
/* Wybrany paczkomat trzyma obramowanie na stałe, tak jak zaznaczone radio
   przy wysyłce i płatności. Pusta opcja startowa ma value="", więc wystarczy
   sprawdzić, czy zaznaczona opcja ma jakąkolwiek wartość. */
.woocommerce-checkout .paczkomat_id_wrapper:has(#paczkomat_id option:checked:not([value=""])) {
	border-color: var(--k-color-1);
}

/* Zaznaczone pakowanie na prezent trzyma obramowanie na stałe, tak jak wybrana
   metoda wysyłki czy płatności — nie tylko na czas pracy w polu dedykacji.
   Reguła po :focus-within, żeby przy tej samej wadze wygrywała kolejnością. */
.woocommerce-checkout .gift-wrap:has(#gift_wrap:checked) {
	border-color: var(--k-color-1);
}


/* Hover na elemencie, który jest już aktywny — obramowanie jaśnieje z
   --k-color-1 do #a47a74, zamiast cofać się do barwy zwykłego hovera.
   Blok musi stać po regułach stanu aktywnego i po zwykłym hoverze:
   selektory mają wyższą wagę, ale kolejność zabezpiecza te przypadki,
   gdzie waga wychodzi na równo. */
.woocommerce-checkout ul#shipping_method .shipping-option:has(input.shipping_method:checked):hover,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked):hover,
.woocommerce-checkout .paczkomat_id_wrapper:focus-within:hover,
.woocommerce-checkout .paczkomat_id_wrapper:has(.select2-container--open):hover,
.woocommerce-checkout .paczkomat_id_wrapper:has(#paczkomat_id option:checked:not([value=""])):hover,
.woocommerce-checkout .gift-wrap:has(#gift_wrap:checked):hover {
	border-color: #a47a74;
}


/* Samo pole wyboru paczkomatu — reakcja na najechanie.
   W spoczynku ma obramowanie --k-color-1, tak jak pozostałe pola formularza
   w kasie, więc po najechaniu jaśnieje do #a47a74 — tego samego tonu,
   który dostają aktywne boksy pod kursorem. Dzięki temu pole i otaczający je
   boks reagują spójnie, zamiast żyć osobnym życiem. */
/* Stan spoczynku taki sam jak u pozostałych elementów kasy. Motyw daje polom
   formularza --k-color-1; tutaj pole ma wyglądać jak nieaktywny boks.

   Reguła obejmuje też surowy <select>, bo Select2 inicjuje się dopiero po
   załadowaniu strony. Przez tę chwilę widoczne jest oryginalne pole — bez tego
   obramowanie mrugało z ciemnego na jasne w momencie podmiany. */
.woocommerce-checkout .paczkomat_id_wrapper select#paczkomat_id,
.woocommerce-checkout .paczkomat_id_wrapper .select2-container .select2-selection {
	border-color: var(--k-color-8-alt);
}

.woocommerce-checkout .paczkomat_id_wrapper .select2-container .select2-selection:hover {
	border-color: #a47a74;
}

/* Otwarta lista — pole dostaje obramowanie stanu aktywnego, tak jak wybrana
   metoda wysyłki czy płatności. Bez tego pole przy rozwiniętej liście zostawało
   jasne i ginie na tle, przez co górna część kontrolki wyglądała na pozbawioną
   ramki względem listy poniżej. Klasę select2-container--open Select2 nadaje
   kontenerowi w boksie, więc dostęp do niej mamy bez sięgania do <body>. */
.woocommerce-checkout .paczkomat_id_wrapper .select2-container--open .select2-selection {
	border-color: var(--k-color-1);
}

/* Najechanie na pole z otwartą listą — ten sam ton co przy aktywnych boksach. */
.woocommerce-checkout .paczkomat_id_wrapper .select2-container--open .select2-selection:hover {
	border-color: #a47a74;
}


/* ==========================================================================
   Moje konto — tabela zamówień.
   ========================================================================== */

/* Komórka z numerem zamówienia jest w szablonie <th> (scope="row"), a nie <td>,
   więc omijała regułę motywu rysującą dolną kreskę na komórkach wiersza.
   Znacznika nie zmieniamy — jest poprawny dla czytników ekranu — tylko
   dopisujemy jej to samo obramowanie.

   Ostatni wiersz jest wyłączony: motyw zdejmuje tam kreskę ze wszystkich
   komórek, więc bez tego wyjątku zostawałaby widoczna tylko pod pierwszą. */
.woocommerce-orders-table tbody tr:not(:last-child) th.woocommerce-orders-table__cell-order-number {
	border-bottom: 1px solid var(--k-color-8);
}

/* Przyciski akcji: mniejsze i rozsunięte.
   Komórka zostaje komórką tabeli — zmiana na flex potrafi rozstroić szerokości
   kolumn — więc odstęp robimy marginesem między sąsiadującymi przyciskami.
   WooCommerce wypisuje ich tu kilka: Zapłać, Anuluj, Zobacz. */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
	padding: 5px 18px;
	font-size: 0.875rem;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button + .button {
	margin-left: 10px;
}


/* Plakietki statusu w tabeli zamówień — obramowanie w kolorze tekstu.
   currentColor zamiast konkretnych wartości: motyw nadaje każdemu statusowi
   własną barwę (zielona dla realizacji, czerwona dla nieudanych i tak dalej),
   więc ramka podąża za nią sama — także dla statusów, które dojdą później.

   Zakres zawężony do komórki statusu: klasy .badge używa też licznik koszyka
   w nagłówku. */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status .badge {
	border: 1px solid currentColor;
}


/* Moje konto — kółko z inicjałami zamiast awatara (snippet WPCode 4597).
   Wymiary 60px przejęte po awatarze, który tu był, żeby układ nagłówka
   pozostał bez zmian. */
.woocommerce-MyAccount-navigation-wrapper .user-profile__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--k-color-8);
}

/* Lora — ta sama rodzina co nagłówki motywu. */
.woocommerce-MyAccount-navigation-wrapper .user-profile__initials {
	font-family: "Lora", serif;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--k-color-1);
}

.woocommerce-MyAccount-navigation-wrapper .user-profile__email {
	display: block;
	word-break: break-word;
}


/* Rząd ikon atrybutów na karcie produktu (snippet WPCode).
   Każda ikona to osobny template part, więc bez tego kontenera ustawiałyby się
   pionowo. Odstępy przeniesione z dawnego jednego szablonu: 8% na desktopie,
   5% na tablecie, 3% na mobile. */
.single-product .product-attributes-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 8%;
	row-gap: 12px;
}

/* Odstępy liczą się względem odstępu kolumny .summary, która jest flexem
   z gap 20px — marginesy DODAJĄ się do niego, więc trzeba go odjąć.

   Rząd z ikonami: 20px (gap) + (2rem - 20px) = 2rem do tego, co pod nim.

   Rząd pusty zostaje w układzie jako element o zerowej wysokości — gdyby go
   ukryć przez display: none, przestałby być elementem flex i nie dałoby się
   wpłynąć na odstęp między opisem a przyciskiem. Wtedy w grę wchodzą dwa
   odstępy kolumny, stąd połowa wartości po każdej stronie:
   2 x 20px + 2 x (0.5rem - 20px) = 1rem łącznie. */
.single-product .summary {
	--k-summary-gap: 20px;
}

.single-product .product-attributes-row {
	margin-bottom: calc(2rem - var(--k-summary-gap));
}

.single-product .product-attributes-row:empty {
	margin-top: calc(0.5rem - var(--k-summary-gap));
	margin-bottom: calc(0.5rem - var(--k-summary-gap));
}

/* Kalium wypisuje template part jako <div class="elementor elementor-ID">,
   nie jako .template-part — ta druga klasa pojawia się tylko przy niektórych
   umiejscowieniach. Celujemy więc w bezpośrednie dzieci kontenera.

   margin-inline: 0 jest tu kluczowe. Kalium nadaje każdemu template partowi
   margin: 0 -64px, żeby mógł wyjść poza padding kolumny na pełną szerokość.
   Przy jednym szablonie to niegroźne, ale trzy takie elementy w jednym
   rzędzie robiły się każdy o 128px szerszy od kontenera i nachodziły na siebie.

   flex: 1 1 0 daje im równe udziały — tak jak trzy widgety w dawnym
   pojedynczym szablonie. */
.single-product .product-attributes-row > .elementor {
	flex: 1 1 0;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
}

.single-product .product-attributes-row .elementor-icon-box-wrapper {
	min-width: 0;
}

@media only screen and (max-width: 1024px) {
	.single-product .product-attributes-row {
		column-gap: 5%;
	}
}

@media only screen and (max-width: 767px) {
	.single-product .product-attributes-row {
		column-gap: 3%;
	}
}

.woocommerce-product-details__short-description p {
	margin-bottom: 1em !important
}

.woocommerce-product-details__short-description p:last-of-type {
	margin-bottom: 0 !important
}


/* Alert o braku wystarczającego stanu (snippet WPCode 4628).
   Wyśrodkowany u góry ekranu, nad nagłówkiem — stąd wysoki z-index.
   position: fixed z translate w osi X trzyma go na środku niezależnie
   od szerokości treści. Domyślnie odsunięty w górę i niewidoczny;
   klasa is-visible wsuwa go i wygasza po kilku sekundach. */
.stock-alert {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 100000;
	max-width: min(90vw, 520px);
	padding: 14px 22px;
	background-color: var(--k-color-8);
	color: var(--k-body-color);
	font-size: 0.9rem;
	line-height: 1.4;
	text-align: center;
	transform: translate(-50%, -120%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.stock-alert {
		transition: none;
	}
}


/* Komunikat o braku akceptacji regulaminu. Element generuje sama kasa
   (.checkout-inline-error-message w wierszu oznaczonym jako woocommerce-invalid);
   tutaj tylko go wyróżniamy. Zakres zawężony do boksu z regulaminem — ta sama
   klasa obsługuje wszystkie błędy pól w kasie i pozostałe mają zostać dyskretne. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .checkout-inline-error-message {
	display: block;
	margin: 10px 1.5rem 0 0;
	padding: 10px 14px;
	border: 1px solid var(--k-color-1);
	color: var(--k-color-1);
	font-size: 0.85rem;
	line-height: 1.4;
}


/* ==========================================================================
   Powiadomienia WooCommerce w stylu sklepu.

   Motyw steruje nimi zmiennymi --k-alert-*, więc nadpisujemy wartości,
   a nie całe reguły — padding, ikona i układ przycisku zostają nietknięte.

   Domyślnie tło brali z --k-danger-light i --k-success-light, czyli
   z color-mix na czerwieni i zieleni Bootstrapa — barwy spoza palety sklepu.
   Zamiast tego jedno spokojne tło --k-color-8 dla wszystkich, a rodzaj
   komunikatu odróżnia pasek po lewej i kolor ikony.
   ========================================================================== */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.woocommerce-notice {
	--k-alert-bg: var(--k-color-8);
	--k-alert-color: var(--k-body-color);
	--k-alert-border-radius: 0;

	/* Kolor ramki bierze się z tej samej zmiennej co ikona, więc każdy typ
	   ustawia go w jednym miejscu niżej. */
	--k-alert-akcent: var(--k-color-8-alt);
	border-color: var(--k-alert-akcent);
}

/* Błąd — czerwień marki. */
.woocommerce-error {
	--k-alert-akcent: var(--k-color-2);
}

.woocommerce-error::before {
	color: var(--k-alert-akcent);
}

/* Potwierdzenie — bordo, kolor podstawowy sklepu. */
.woocommerce-message {
	--k-alert-akcent: var(--k-color-1);
}

.woocommerce-message::before {
	color: var(--k-alert-akcent);
}

/* Informacja — piaskowy, najspokojniejszy z palety. */
.woocommerce-info,
.woocommerce-notice {
	--k-alert-akcent: var(--k-color-5);
}

.woocommerce-info::before,
.woocommerce-notice::before {
	color: var(--k-alert-akcent);
}


/* Ikony powiadomień w wersji konturowej.

   Font KaliumIcons ma tylko warianty wypełnione: zmierzone pokrycie glifu
   \e918 (info) to 55% powierzchni, a jego środek jest zapełniony w 67%.
   Jedyne puste kółko w tym foncie (\e93d) nie ma w środku żadnego symbolu,
   więc straciłoby znaczenie. Rysujemy więc własne ikony — kontur o grubości
   zbliżonej do reszty ikon na stronie.

   Glif fontu zastępujemy maską: background-color: currentColor sprawia,
   że ikona przejmuje kolor ustawiony niżej dla każdego typu. */
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-notice::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.2v5'/%3E%3Cpath d='M12 7.9h0'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.2v5'/%3E%3Cpath d='M12 7.9h0'/%3E%3C/svg%3E") no-repeat center / contain;
}

.woocommerce-error::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.4v5.4'/%3E%3Cpath d='M12 16.3h0'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.4v5.4'/%3E%3Cpath d='M12 16.3h0'/%3E%3C/svg%3E") no-repeat center / contain;
}

.woocommerce-message::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.1 12.3l2.6 2.6 5.2-5.5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.1 12.3l2.6 2.6 5.2-5.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.checkout #customer_details, .checkout .woocommerce-NoticeGroup {
	padding-left: 0;
	padding-right: 0
}


/* ==========================================================================
   Szczegóły zamówienia w koncie klienta.
   ========================================================================== */

/* Pasek ze statusem — obramowanie w barwie statusu, tak jak plakietki na liście
   zamówień. Motyw trzyma te barwy w zmiennych i przypisuje je plakietce przez
   --k-badge-outline-color; sięgamy po te same źródła. */
.order-info--processing {
	border-color: var(--k-info-dark);
}

.order-info--completed {
	border-color: var(--k-success-dark);
}

.order-info--on-hold,
.order-info--pending {
	border-color: var(--k-warning-dark);
}

.order-info--failed {
	border-color: var(--k-danger-dark);
}

.order-info--cancelled,
.order-info--refunded,
.order-info--checkout-draft {
	border-color: var(--k-body-color);
}

/* Informacje o przesyłce — każda w osobnym wierszu.
   Snippet 4364 składa tu wybrany paczkomat i dane śledzenia; domyślnie są to
   elementy liniowe, więc zlewały się w jeden ciąg. Kwota i nazwa metody
   (.shipped_via) zostają w pierwszym wierszu razem. */
.woocommerce-table--order-details .order-shipment-info,
.woocommerce-table--order-details .order-shipment-info__label,
.woocommerce-table--order-details .order-shipment-info__value {
	display: block;
}

.woocommerce-table--order-details .order-shipment-info {
	margin-top: 6px;
}

/* Metoda płatności — ten sam krój co pozostałe wiersze podsumowania.
   Motyw pogrubia ostatni wiersz stopki tabeli, zakładając, że jest nim suma;
   tutaj ostatnia jest metoda płatności, więc pogrubienie trafiało nie tam. */
/* Selektor musi odpowiadać temu z motywu:
   tfoot tr:last-child th[scope="row"] + td — atrybut i sąsiedztwo podnoszą wagę,
   więc prostsza wersja przegrywała. */
.woocommerce-table--order-details tfoot tr:last-child th[scope="row"],
.woocommerce-table--order-details tfoot tr:last-child th[scope="row"] + td {
	font-weight: 400;
}


/* Zamiana barw między statusami "W trakcie realizacji" i "Zrealizowane".
   Motyw przypisywał zielonię realizacji, a błękit ukończeniu; tutaj jest
   odwrotnie — zielony oznacza zamówienie dokończone.
   Zmieniamy komplet: plakietkę na liście zamówień, tło paska ze statusem,
   jego ikonę i plakietkę w środku paska. Ramki są zamienione wyżej. */

.woocommerce-orders-table .woocommerce-orders-table__row--status-processing .badge {
	--k-badge-bg: var(--k-info-light);
	--k-badge-color: var(--k-info-dark);
}

.woocommerce-orders-table .woocommerce-orders-table__row--status-completed .badge {
	--k-badge-bg: var(--k-success-light);
	--k-badge-color: var(--k-success-dark);
}

.order-info--processing {
	--k-alert-bg: var(--k-info-light);
}

.order-info--completed {
	--k-alert-bg: var(--k-success-light);
}

.order-info--processing .order-status {
	--k-badge-outline-color: var(--k-info-dark);
}

.order-info--completed .order-status {
	--k-badge-outline-color: var(--k-success-dark);
}

.order-info--processing::before {
	color: var(--k-info-dark);
}

.order-info--completed::before {
	color: var(--k-success-dark);
}


/* ==========================================================================
   Widok opłacenia zamówienia (order-pay).
   Motyw układa tu tabelę i płatności na float w proporcjach 65/30,
   podczas gdy kasa używa 55/41 z odstępem 50px. Przechodzimy na flex,
   żeby oba widoki miały ten sam rytm.
   ========================================================================== */

@media only screen and (min-width: 992px) {

	.woocommerce-order-pay form#order_review {
		display: flex;
		align-items: flex-start;
		column-gap: 50px;
	}

	/* 887/1600 i 663/1600 — dokładnie te same udziały co kolumny w kasie. */
	.woocommerce-order-pay form#order_review > .shop_table {
		float: none;
		flex: 0 0 55.4375%;
		min-width: 0;
	}

	.woocommerce-order-pay form#order_review > #payment {
		float: none;
		flex: 0 0 41.4375%;
		min-width: 0;
	}
}

/* Ikona nożyczek przy przerywanej linii nad podsumowaniem.
   Motyw wypisuje ją na pierwszym wierszu stopki tabeli, nie przy pozycji
   produktu — stąd oba selektory dla pewności. */
.woocommerce-order-pay #order_review .shop_table tfoot tr:first-child td::after,
.woocommerce-order-pay #order_review .shop_table td.product-total::after {
	content: none;
}

/* Tabela jak w szczegółach zamówienia: jasna kreska pod każdym wierszem
   oprócz ostatniego i taki sam oddech w komórkach. */
.woocommerce-order-pay .shop_table thead th,
.woocommerce-order-pay .shop_table tbody td,
.woocommerce-order-pay .shop_table tbody th,
.woocommerce-order-pay .shop_table tfoot td,
.woocommerce-order-pay .shop_table tfoot th {
	padding: 15px 20px;
}

/* Kreska pod każdym wierszem oprócz ostatniego — jak w szczegółach zamówienia.
   Motyw celuje w te komórki selektorami z #order_review i dodatkowo zdejmuje
   kreskę z ostatniego wiersza tbody, zakładając, że niżej nic już nie ma.
   Tutaj pod spodem jest jeszcze podsumowanie, więc kreskę przywracamy. */
.woocommerce-order-pay #order_review .shop_table thead th,
.woocommerce-order-pay #order_review .shop_table tbody tr td,
.woocommerce-order-pay #order_review .shop_table tbody tr th,
.woocommerce-order-pay #order_review .shop_table tbody tr:last-child td,
.woocommerce-order-pay #order_review .shop_table tfoot tr:not(:last-child) td,
.woocommerce-order-pay #order_review .shop_table tfoot tr:not(:last-child) th {
	border-bottom: 1px solid var(--k-color-8);
}

/* Odstęp nad stopką — treść kończyła się dokładnie na jej krawędzi. */
.woocommerce-order-pay form#order_review {
	margin-bottom: 60px;
}


/* ==========================================================================
   Podsumowanie zamówienia odrzuconego przez operatora płatności.

   WooCommerce wypisuje tu dwa osobne powiadomienia: jedno z treścią błędu
   i drugie zawierające wyłącznie przyciski "Zapłać" i "Moje konto".
   Po naszej stylizacji powiadomień to drugie wyglądało jak pusty alert z ikoną.

   Ukrywamy je w całości. Nic się przez to nie traci: obie akcje są dostępne
   niżej, w wierszu "Działania" tabeli ze szczegółami zamówienia.
   ========================================================================== */

.woocommerce-thankyou-order-failed-actions {
	display: none;
}

/* Wiersz "Działania" w tabeli szczegółów — odstęp i rozmiar przycisków
   taki sam jak w tabeli zamówień w koncie (5px 18px, 0.875rem). */
.woocommerce-table--order-details tfoot td .button {
	padding: 5px 18px;
	font-size: 0.875rem;
}

.woocommerce-table--order-details tfoot td .button + .button,
.woocommerce-table--order-details tfoot td a.button + a.button {
	margin-left: 10px;
}

/* Odstęp nad stopką — tak jak na widoku opłacenia zamówienia. */
.woocommerce-order-received .woocommerce-order {
	margin-bottom: 60px;
}


/* ==========================================================================
   Sekcja "Sklep" na stronie głównej — kafle jako przewijany pas.
   Klasa shop-tiles-scroll na kontenerze siatki (Elementor, strona 4392).
   Dla pewności reguły łapią też stałą klasę identyfikatora kontenera
   (.elementor-element-f934670) — klasa własna jest zapisana w danych, ale front
   podaje na razie sam identyfikator.

   Do 1024px pięć kafli w rzędzie robi się za ciasne, więc zamieniamy siatkę
   na poziomy pas: dwa kafle w całości i połowa trzeciego, z przewijaniem.
   Widoczny skrawek trzeciego kafla jest tu celowy — to on mówi klientowi,
   że jest co przewijać.
   ========================================================================== */

@media only screen and (max-width: 1024px) {

	.shop-tiles-scroll.e-con.e-grid,
	.elementor-element-f934670.e-con.e-grid {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;

		/* Pasek przewijania chowamy — rolę wskazówki pełni ucięty kafel. */
		scrollbar-width: none;
	}

	.shop-tiles-scroll.e-con.e-grid::-webkit-scrollbar,
	.elementor-element-f934670.e-con.e-grid::-webkit-scrollbar {
		display: none;
	}

	/* Szerokość kafla: z widocznej szerokości odejmujemy dwa odstępy
	   (między trzema kaflami w polu widzenia) i dzielimy przez 2,5. */
	.shop-tiles-scroll.e-con.e-grid > .elementor-element,
	.elementor-element-f934670.e-con.e-grid > .elementor-element {
		flex: 0 0 calc((100% - 2 * var(--grid-column-gap, 20px)) / 2.5);
		min-width: 0;
		scroll-snap-align: start;
	}
	
	.blog  .page-heading__description {
		width: 100%;
		padding-right: 0;
	}
	
	.blog .blog-posts--grid .post:first-child .post-item {
		flex-direction: column !important;
		flex-wrap: wrap !important;
		margin-bottom: 50px
	}
	
}

/* Na telefonie wężej: półtora kafla. W polu widzenia są wtedy dwa kafle,
   czyli jeden odstęp między nimi — stąd mnożnik 1 zamiast 2.
   Pozostałe właściwości pasa (flex, przewijanie, snap) dziedziczą z zakresu
   do 1024px, który obejmuje również tę szerokość. */
@media only screen and (max-width: 767px) {

	.shop-tiles-scroll.e-con.e-grid > .elementor-element,
	.elementor-element-f934670.e-con.e-grid > .elementor-element {
		flex: 0 0 calc((100% - var(--grid-column-gap, 20px)) / 1.5);
	}
	
	.cky-btn-revisit-wrapper {
		display: none !important
	}
	
	.blog .blog-posts--grid .post:first-child .post-item {
		gap: 25px !important;
		margin-bottom: 0 !important
	}
	
	.single-post .related-posts__title {
		margin-bottom: 25px !important
	}
	
	.content-wrapper.blog, 
	.single-post .related-posts {
		margin-bottom: 50px !important
	}
}


/* ==========================================================================
   Spinner newslettera na przycisku.

   Contact Form 7 stawia spinner jako osobny element ZA przyciskiem. Jest
   niewidoczny (visibility: hidden), ale zajmuje miejsce: 24px szerokości
   plus 7px marginesu. Poniżej ~640px formularz przestaje się mieścić
   i te 31px rozpychało całą stronę w poziomie.

   Przenosimy go na środek przycisku i na czas wysyłki chowamy jego napis.
   ========================================================================== */

.site-footer .form-holder {
	position: relative;
}

.site-footer .form-holder .wpcf7-spinner {
	position: absolute;
	top: 50%;
	/* Przycisk jest ostatnim elementem w rzędzie, więc jego prawa krawędź
	   pokrywa się z prawą krawędzią .form-holder. Środek przycisku wypada
	   o połowę jego szerokości dalej; odejmujemy jeszcze połowę spinnera.
	   Wartości opisane zmiennymi, żeby zmiana napisu na przycisku wymagała
	   poprawki w jednym miejscu. */
	--k-newsletter-btn-width: 104px;
	--k-newsletter-spinner-size: 24px;
	left: auto;
	right: calc((var(--k-newsletter-btn-width) - var(--k-newsletter-spinner-size)) / 2);
	transform: translateY(-50%);
	margin: 0;
	background-color: transparent;
	pointer-events: none;
}

/* Kropka spinnera w kolorze napisu przycisku. */
.site-footer .form-holder .wpcf7-spinner::before {
	background-color: var(--k-color-1);
}

/* Na czas wysyłki napis znika, zostaje sam spinner.
   Klasę submitting dodaje Contact Form 7 do formularza. */
.site-footer form.submitting input.wpcf7-submit[type="submit"] {
	color: transparent;
}


/* Boksy promocyjne w menu mobilnym.
   To te same shortcode'y, które budują dwie ostatnie kolumny mega menu "Sklep"
   — na mobile tamte są ukryte, więc powielamy je w kotwicy widżetów menu,
   nad odnośnikiem "Moje konto". Dwa boksy obok siebie, równej szerokości. */
.mobile-menu .mobile-menu-promo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 1.5em;
}

/* Kafle wewnątrz mają własne siatki z listingu sklepu — tutaj każdy ma
   wypełnić swą połówkę, więc zdejmujemy im wielokolumnowość. */
.mobile-menu .mobile-menu-promo > * {
	min-width: 0;
	margin: 0;
}

.mobile-menu .mobile-menu-promo ul.products {
	grid-template-columns: 1fr;
	margin: 0;
}

/* Widżet tekstowy przepuszcza treść przez wpautop, który dokleja pusty
   akapit na końcu — jako trzeci element siatki zajmowałby komórkę. */
.mobile-menu .mobile-menu-promo > p:empty {
	display: none;
}

/* Zdjęcie ma wypełnić całą wysokość kafla.
   Kolumny siatki rozciągają się do równej wysokości, ale kafle w środku
   zachowywały własną (niższą), zostawiając pasek tła pod obrazkiem.
   Prowadzimy 100% wysokości przez cały łańcuch aż do <img>. */
.mobile-menu .mobile-menu-promo > *,
.mobile-menu .mobile-menu-promo .woocommerce,
.mobile-menu .mobile-menu-promo ul.products,
.mobile-menu .mobile-menu-promo li.product,
.mobile-menu .mobile-menu-promo .category-box,
.mobile-menu .mobile-menu-promo .image-placeholder,
.mobile-menu .mobile-menu-promo .image-placeholder img {
	height: 100%;
}

/* Listing sklepu dokłada tu własne odstępy — w kaflu są zbędne. */
.mobile-menu .mobile-menu-promo ul.products,
.mobile-menu .mobile-menu-promo li.product {
	margin: 0;
	padding: 0;
	row-gap: 0;
}

/* Teksty widżetów w menu mobilnym — wszystkie, nie tylko kafle. */
@media only screen and (max-width: 767px) {

	/* Baza w tym obszarze to 18px (korzeń dokumentu ma 16px), więc 1.25em
	   dawało 22,5px — powiększenie zamiast zmniejszenia. Ustawiamy 1rem,
	   czyli 16px: tyle samo co podpozycje menu (Tekstylia, Serwetki). */
	.mobile-menu .mobile-menu__widgets {
		font-size: 1rem;
	}

	/* Elementy w środku mają własne rozmiary z motywu — sprowadzamy je do
	   dziedziczenia, zamiast nakładać 1.25em drugi raz. Dwie warstwy dawały
	   iloczyn: 18 → 22,5 → 35px. */
	.mobile-menu .mobile-menu__widgets .widget,
	.mobile-menu .mobile-menu__widgets .category-box__title,
	.mobile-menu .mobile-menu__widgets .mobile-menu-account-link {
		font-size: inherit;
	}
	
	.content-wrapper.blog,
	.single-post .related-posts {
		margin-bottom: 50px
	}
	
	.single-post .related-posts__title {
		margin-bottom: 25px
	}
	
}


/* Przycisk "Czytaj więcej" w kaflu wpisu (snippet WPCode).
   Rozmiar taki sam jak małe przyciski w koncie klienta. */
.blog-posts .blog-read-more {
	margin: 12px 0 0;
}

.blog-posts .blog-read-more__link {
	display: inline-block;
	padding: 5px 18px;
	font-size: 0.875rem;
}

.blog .blog-posts--grid .post:first-child .post-details {
	padding: 0 !important
}

.blog .blog-posts--grid .post:first-child .post-item{
	gap: 50px
}

.blog .page-heading {
    margin-bottom: 50px
}

.content-wrapper.blog,
.single-post .related-posts {
	margin-bottom: 100px
}

.single-post .related-posts__title {
	margin-bottom: 50px
}

/* ==========================================================================
   Powiadom o dostępności — przycisk na karcie produktu i modal (snippet WPCode).
   Formularz wtyczki Back In Stock Notifier jest przenoszony do modala;
   modal korzysta z klas modala logowania (.checkout-login-modal-*),
   więc tło, cień, wymiary i przycisk zamknięcia są wspólne.
   ========================================================================== */

/* Przycisk w miejscu formularza — jak Dodaj do koszyka. */
/* Komunikat i przycisk bez własnych marginesów — odstęp daje odstęp kolumny .summary. */
.single-product .summary p.stock.out-of-stock {
	margin-bottom: 0;
}

.single-product .summary .bis-open-modal {
	display: block;
	width: 100%;
	margin: 0;
}

/* Formularz wtyczki przed przeniesieniem do modala — bez mignięcia na stronie. */
.single-product .summary .cwginstock-subscribe-form {
	display: none;
}

.bis-modal-intro {
	margin: 0 0 20px;
}

/* Zdejmujemy oprawkę Bootstrapa: panel, nagłówek i siatkę kolumn. */
.bis-modal-form .cwginstock-subscribe-form,
.bis-modal-form .cwginstock-subscribe-form .panel {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.bis-modal-form .cwginstock-subscribe-form .panel-heading {
	display: none;
}

.bis-modal-form .cwginstock-subscribe-form .panel-body,
.bis-modal-form .cwginstock-subscribe-form .row,
.bis-modal-form .cwginstock-subscribe-form [class*="col-"] {
	margin: 0;
	padding: 0;
}

.bis-modal-form .cwginstock-subscribe-form .cwgstock_email {
	width: 100%;
	margin: 0 0 16px;
	/* Wymiary jak w pozostałych polach sklepu: 41px wysokości, padding 8px 12px.
	   height: auto zdejmuje stałą wysokość, którą Bootstrap nadaje .form-control. */
	height: auto;
	padding: 8px 12px;
	font-size: 1rem;
	line-height: 24px;
	border-radius: 0;
	box-shadow: none;
	/* Wtyczka wpisuje text-align:center stylem inline w znaczniku pola —
	   przebija go wyłącznie !important. */
	text-align: left !important;
}

.bis-modal-form .cwginstock-subscribe-form .cwgstock_button {
	display: block;
	width: 100%;
	padding: 8px 30px;
	border: 0;
	border-radius: 50px;
	background: var(--k-color-1);
	color: var(--k-color-6);
	font-size: 1rem;
	transition: background-color 0.18s ease-in-out;
}

.bis-modal-form .cwginstock-subscribe-form .cwgstock_button:hover,
.bis-modal-form .cwginstock-subscribe-form .cwgstock_button:focus-visible {
	background: #a47a74;
	color: var(--k-color-6);
}

/* Komunikat po zapisie — w palecie sklepu zamiast kolorów Bootstrapa. */
.bis-modal-form .cwgstock_output:not(:empty) {
	margin: 16px 0 0;
	padding: 10px 14px;
	border: 1px solid var(--k-color-1);
	font-size: 0.9rem;
}

.bis-modal-form .cwgstock_output .cwginstocksuccess,
.bis-modal-form .cwgstock_output .cwginstockerror {
	color: var(--k-body-color) !important;
}

.bis-modal-info {
	margin: 20px 0 0;
	font-size: 0.85rem;
	line-height: 1.5;
}

.bis-modal-info p {
	margin: 0 0 10px;
}

.bis-modal-info p:last-child {
	margin-bottom: 0;
}

/* Rezygnacja z powiadomienia o dostępności — boks potwierdzenia nad kartą
   produktu (po wejściu z linku w mailu). Oprawa jak powiadomienia WooCommerce. */
.bis-rezygnacja-box {
	margin: 0 0 2rem;
	padding: 16px 20px;
	border: 1px solid var(--k-color-1);
	background-color: var(--k-color-8);
}

.bis-rezygnacja-box p {
	margin: 0;
}

.bis-rezygnacja-box form {
	margin: 12px 0 0;
}

.bis-rezygnacja-box .button {
	padding: 5px 18px;
	font-size: 0.875rem;
}

/* Strona 404 — template part Kalium typu Page (ID 5083).
   Elementor liczy szerokość kontenerów z --container-max-width (domyślnie 1140px),
   a motyw ustawia ją na szerokość kontenera sklepu tylko wewnątrz treści strony.
   Template part renderuje się poza nią, więc przekazujemy zmienną motywu jawnie
   — szerokość będzie taka jak na stronie O nas i pójdzie za zmianami w motywie. */
.error404 .template-part {
	--container-max-width: var(--k-container-max-width);
}

/* ==========================================================================
   Pasek informacyjny na górze sklepu — template part "Pasek informacyjny (topbar)".
   Tło, kolory i tekst ustawia się w Elementorze; tu tylko układ X i animacja.
   Zachowanie (zamykanie, zapamiętywanie) — snippet WPCode.
   ========================================================================== */

.puesta-topbar {
	position: relative;
	overflow: hidden;
	transition: height 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
}

/* Zwijanie: wysokość animuje JS, tu zerujemy padding i wygaszamy treść. */
.puesta-topbar.is-zwijany {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	opacity: 0;
}

.puesta-topbar .puesta-topbar__tekst p {
	margin: 0;
}

/* X przy prawej krawędzi, wyłączony z układu — tekst zostaje wyśrodkowany
   względem całego paska, nie względem miejsca pomniejszonego o ikonę. */
.puesta-topbar .puesta-topbar__zamknij {
	position: absolute;
	top: 50%;
	right: 16px;
	width: auto;
	margin: 0;
	transform: translateY(-50%);
	line-height: 0;
	cursor: pointer;
	transition: opacity 0.18s ease-in-out;
}

.puesta-topbar .puesta-topbar__zamknij:hover {
	opacity: 0.7;
}

.puesta-topbar .puesta-topbar__zamknij:focus-visible {
	outline: 1px solid var(--k-color-7);
	outline-offset: 4px;
}

/* Zamknięty wcześniej — klasę dodaje skrypt w <head>, zanim strona się narysuje. */
.puesta-topbar-zamkniety .puesta-topbar {
	display: none;
}