/* ==========================================================================
   Typografia
   Zeszlismy z webfontow: LCP strony glownej to napis w naglowku, wiec dopoki
   czekal na pobranie kroju, dopoty nie dalo sie zejsc ponizej ~3 s. `system-ui`
   to krój interfejsu systemu - SF Pro na iPhonie i Macu, Roboto na Androidzie,
   Segoe UI na Windowsie. Wszystkie sa neogroteskami z tej samej polki co Inter,
   wiec strona wyglada podobnie, a nie pobiera ani jednego bajta fontow.
   ========================================================================== */

/*
 * `body.hdk-strona-glowna` - uklad strony glownej.
 *
 * Klase dostaje strona glowna ORAZ kazda strona wariantu (`/intencja/<slug>/`),
 * bo wariant to ta sama strona glowna opowiedziana inaczej: ma miec ten sam
 * naglowek, ten sam przezroczysty header nad hero, to samo logo i te sama
 * szuflade menu. Wczesniej te reguly wisialy na klasie konkretnego szablonu
 * (`page-template-template-strona-glowna-shopify`), przez co wariant dostawal
 * domyslny naglowek motywu. Klase dokleja `hdk_klasa_ukladu()` w inc/wersje.php.
 */


:root {
	--hdk-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/*
 * Style dla sekcji strony glownej odtwarzanych z eksportu motywu Shopify.
 *
 * Fonty wg config/settings_data.json:
 *   type_heading_font  = inter_n6            -> Inter 600
 *   type_subheading_font / type_body_font    -> Instrument Sans 400
 * Presety typografii (Shopify "Horizon"):
 *   h1  -> font Inter 600, clamp(3rem, 7.2vw, 4.5rem), line-height 1.1
 *   h4  -> font Instrument Sans 400, 1.5rem, line-height 1.1
 *   rte -> font Instrument Sans 400, 0.875rem, line-height 1.4
 * (ustawienia "font"/"font_size" w index.json dzialaja tylko przy presecie
 * "custom" - dlatego np. font_size 2.5rem przy presecie h1 jest ignorowany.)
 *
 * Skala odstepow Shopify: wartosci > 20px sa mnozone przez --spacing-scale
 * (0.7 ponizej 990px, 1.0 powyzej); wartosci <= 20px zostaja bez zmian.
 */

/* ==========================================================================
   Szablon strony glownej - hero ma byc na pelna szerokosc okna
   ========================================================================== */

body.hdk-strona-glowna .site-content {
	padding-top: 0;
}

body.hdk-strona-glowna .shoptimizer-archive {
	overflow-x: clip;
}

/* ==========================================================================
   Hero (index.json -> sections.hero_iLBwPd)
   ========================================================================== */

.hdk-hero {
	/* page-width: kolumna tresci 1120px + marginesy strony 16px / 40px */
	--hdk-page-margin: 16px;
	--hdk-content-width: 1120px;
	/* section_height: "large" */
	--hdk-section-height: 35rem;
	--hdk-spacing-scale: 0.7;

	position: relative;
	display: grid;
	grid-template-columns:
		minmax(var(--hdk-page-margin), 1fr)
		minmax(0, var(--hdk-content-width))
		minmax(var(--hdk-page-margin), 1fr);
	align-items: center;
	min-height: calc(var(--hdk-section-height) - var(--hdk-header-offset, 0px));
	/* padding-block-start: 90, padding-block-end: 31 (skalowane) */
	padding-block:
		calc(max(20px, calc(var(--hdk-spacing-scale) * 90px)) + var(--hdk-section-top-offset, 0px))
		max(20px, calc(var(--hdk-spacing-scale) * 31px));
	padding-inline: 0;

	/* wyjscie na pelna szerokosc z kontenera .col-full motywu Shoptimizer */
	width: 100vw;
	margin-inline: calc(50% - 50vw);

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	overflow: hidden;
}

@media (min-width: 40em) {
	.hdk-hero {
		--hdk-section-height: 70svh;
	}
}

@media (min-width: 750px) {
	.hdk-hero {
		--hdk-page-margin: 40px;
	}
}

@media (min-width: 60em) {
	.hdk-hero {
		--hdk-section-height: 80svh;
	}
}

@media (min-width: 990px) {
	.hdk-hero {
		--hdk-spacing-scale: 1;
	}
}

/* toggle_overlay: true, overlay_style "solid", overlay_color #06050540 */
.hdk-hero .hdk-hero__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(6, 5, 5, 0.25);
	pointer-events: none;
}

/* hero__content-wrapper: kolumna, gap 15px, wyrownanie do lewej */
.hdk-hero .hdk-hero__inner {
	position: relative;
	z-index: 1;
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 15px;
	width: 100%;
}

/* group_mATTUY: kolumna, gap 12px */
.hdk-hero .hdk-hero__group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	width: 100%;
}

/* group_U86Qji: kolumna, gap 0, padding 0 30px 15px */
.hdk-hero .hdk-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	width: 100%;
	padding: 0 max(20px, calc(var(--hdk-spacing-scale) * 30px)) 15px;
}

/* text_nptTQe: preset h1 */
.hdk-hero .hdk-hero__title {
	width: 100%;
	margin: 0;
	font-family: var(--hdk-font);
	font-weight: 600;
	font-size: clamp(3rem, 7.2vw, 4.5rem);
	line-height: 1.1;
	letter-spacing: 0;
	color: #fff;
	text-wrap: balance;
}

.hdk-hero .hdk-hero__title em {
	font-style: italic;
}

/* text_m9AcWC: preset h4 */
.hdk-hero .hdk-hero__subtitle {
	width: 100%;
	margin: 0;
	font-family: var(--hdk-font);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.1;
	letter-spacing: 0;
	color: #fff;
	text-wrap: balance;
}

/* text_zwDYPb: preset rte, padding 10px 0 */
.hdk-hero .hdk-hero__tagline {
	margin: 0;
	padding: 10px 0;
	font-family: var(--hdk-font);
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.4;
	color: #fff;
}

/* group_MqGhVH: wiersz 3 kolumn, szerokosc 52%, gap 12px (takze na mobile) */
.hdk-hero .hdk-hero__usp {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
	width: 52%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* group_Gx7Xam / group_AxadyX / group_YVNxzL: kolumna 30%, gap 12px */
.hdk-hero .hdk-hero__usp > li {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 30%;
	min-width: 0;
}

/* image_*: szerokosc 60% kolumny, kwadrat, promien 100% */
.hdk-hero .hdk-hero__usp img {
	display: block;
	width: 60%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 100%;
}

/* text_qXDqPq / text_jMzpd7 / text_dRn476: preset rte, wysrodkowane */
.hdk-hero .hdk-hero__usp p {
	margin: 0;
	font-family: var(--hdk-font);
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.4;
	text-align: center;
	color: #fff;
	text-wrap: pretty;
}

@media (max-width: 749px) {
	.hdk-hero .hdk-hero__usp {
		width: 100%;
	}

	/* width_mobile: "fill" */
	.hdk-hero .hdk-hero__usp img {
		width: 100%;
	}
}

/* group_M8fzCD: wiersz na pelna szerokosc, tresc wysrodkowana */
.hdk-hero .hdk-hero__cta-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
}

/* ai_gen_block_8aaf3cf "Strzalka w dol": tekst + animowana strzalka pod nim */
.hdk-hero .hdk-hero__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	padding: 20px;
	color: #fff;
	text-decoration: none;
}

.hdk-hero .hdk-hero__cta:hover,
.hdk-hero .hdk-hero__cta:focus {
	color: #fff;
	text-decoration: none;
}

.hdk-hero .hdk-hero__cta-text {
	font-family: var(--hdk-font);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	color: #fff;
}

.hdk-hero .hdk-hero__cta-arrow {
	display: block;
	width: 48px;
	height: 48px;
	animation: hdk-hero-arrow-bounce 2s ease-in-out infinite;
}

.hdk-hero .hdk-hero__cta-arrow svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: #fff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@keyframes hdk-hero-arrow-bounce {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(10px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hdk-hero .hdk-hero__cta-arrow {
		animation: none;
	}
}

/* Shopify skaluje ten blok na mobile o 0.85 */
@media (max-width: 749px) {
	.hdk-hero .hdk-hero__cta-text {
		font-size: 22.1px;
	}

	.hdk-hero .hdk-hero__cta-arrow {
		width: 40.8px;
		height: 40.8px;
	}
}

/* ==========================================================================
   Header + pasek ogloszen (sections/header-group.json z eksportu Shopify)
   Tylko szablon strony glownej. Uklad na Shopify:
     - pasek ogloszen 44px (padding 15px, tlo color9 #a452f6, tekst 14px bialy)
     - PRZEZROCZYSTY header 66px (enable_transparent_header_home: true,
       home_inverse_logo: true, text_color bialy)
     - oba leza NA hero - sekcja hero zaczyna sie od samej gory strony
     - logo 213x36 (166x28 mobile) po lewej, menu obok niego, ikony po prawej
   W Shoptimizerze pasek "Below Header" jest pod headerem - stad zmiana
   kolejnosci przez flex/order.

   Reguly motywu Shoptimizer maja wyzsza specyficznosc (np.
   `.sticky-d.header-4 .header-4-container`), stad miejscami !important.

   UWAGA: wszystko co dotyczy poziomego menu musi byc zamkniete w
   @media (min-width: 993px) - ponizej tego progu `.primary-navigation`
   jest wysuwanym menu mobilnym i te same reguly by je rozwalily.
   ========================================================================== */

/*
 * Wysokosc paska ogloszen jest potrzebna takze poza strona glowna - pasek jest
 * na kazdej stronie, a od niej zalezy pozycja przycisku zamkniecia szuflady.
 */
:root {
	--hdk-announcement-height: 44px;
}

body.hdk-strona-glowna {
	--hdk-header-height: 66px;
}

body.hdk-strona-glowna .hfeed.site {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* pasek ogloszen nad headerem (reszta elementow zostaje w kolejnosci z DOM) */
body.hdk-strona-glowna .header-widget-region {
	position: relative;
	z-index: 31;
	order: -2;
	padding: 15px 0;
	/* Przyciemnione z #a452f6: bialy tekst 14px mial na tamtym tle kontrast 4,1:1,
	   czyli ponizej progu WCAG AA (4,5:1). Ten sam odcien, nizsza jasnosc. */
	background-color: #9a3ff5;
	border: 0;
}

body.hdk-strona-glowna .header-4-container {
	order: -1;
}

body.hdk-strona-glowna .header-widget-region .widget {
	margin: 0;
	padding: 0;
}

body.hdk-strona-glowna .header-widget-region p {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	color: #fff;
}

body.hdk-strona-glowna .header-widget-region a {
	color: #fff;
	text-decoration: none;
}

/*
 * Header: przezroczysty i WYJETY Z UKLADU (na Shopify jest `position: absolute`),
 * dzieki czemu przejscie w stan przypiety nie przesuwa reszty strony.
 */
body.hdk-strona-glowna .header-4-container {
	position: absolute !important;
	top: var(--hdk-announcement-height) !important;
	left: 0;
	right: 0;
	z-index: 30;
	height: var(--hdk-header-height) !important;
	min-height: var(--hdk-header-height) !important;
	padding: 0;
	background: transparent !important;
	border: 0;
	box-shadow: none !important;
}

/* stan przypiety: wjezdza z gory, biale tlo, ciemne logo i menu */
body.hdk-strona-glowna.hdk-header-stuck .header-4-container {
	position: fixed !important;
	top: 0 !important;
	background: #fff !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) !important;
	animation: hdk-header-slide-in 0.25s ease;
}

@keyframes hdk-header-slide-in {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.hdk-strona-glowna.hdk-header-stuck .header-4-container {
		animation: none;
	}
}

/* header rozciagniety na cala szerokosc okna, tylko z marginesem strony */
body.hdk-strona-glowna .header-4-inner {
	width: 100%;
	max-width: none;
	height: var(--hdk-header-height);
	min-height: var(--hdk-header-height);
	margin: 0;
	padding: 0 40px;
	align-items: center;
}

/* logo: 36px / 28px na mobile; biale u gory, ciemne po przypieciu headera */
body.hdk-strona-glowna .site-header .custom-logo-link img,
body.hdk-strona-glowna .site-header .custom-logo {
	width: auto !important;
	height: 36px !important;
	max-height: 36px !important;
}

body.hdk-strona-glowna .hdk-logo__img--original {
	display: none;
}

body.hdk-strona-glowna.hdk-header-stuck .hdk-logo__img--inverse {
	display: none;
}

body.hdk-strona-glowna.hdk-header-stuck .hdk-logo__img--original {
	display: block;
}

@media (max-width: 992px) {
	body.hdk-strona-glowna .site-header .custom-logo-link img,
	body.hdk-strona-glowna .site-header .custom-logo {
		height: 28px !important;
		max-height: 28px !important;
	}
}

/* ikony po prawej - biale, licznik w kolorze bubble_background_color #470886 */
body.hdk-strona-glowna .site-header-cart .cart-contents,
body.hdk-strona-glowna .site-header-cart .amount,
body.hdk-strona-glowna .site-header-cart .woocommerce-Price-amount,
body.hdk-strona-glowna .site-header-cart .woocommerce-Price-currencySymbol {
	color: #fff;
}

body.hdk-strona-glowna .site-header-cart .count {
	background-color: #470886;
	color: #fff;
}

/* --- poziome menu: TYLKO desktop (ponizej 993px to menu wysuwane) --- */
@media (min-width: 993px) {
	/*
	 * W Shoptimizerze .primary-navigation jest absolutne na calej szerokosci
	 * headera, a lista wysrodkowana - przez co pierwsza pozycja wchodzi pod logo.
	 * Na Shopify menu zaczyna sie tuz za logo (x=383 przy kolumnie 160..1280),
	 * czyli 213px logo + 10px odstepu.
	 */
	body.hdk-strona-glowna .primary-navigation {
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		height: var(--hdk-header-height);
		margin: 0;
		padding: 0 40px;
	}

	body.hdk-strona-glowna .primary-navigation .menu-primary-menu-container,
	body.hdk-strona-glowna .primary-navigation ul.menu {
		height: var(--hdk-header-height);
	}

	body.hdk-strona-glowna .primary-navigation ul.menu {
		padding-left: 223px;
		text-align: left;
	}

	body.hdk-strona-glowna .main-navigation ul.menu > li {
		line-height: var(--hdk-header-height);
	}

	body.hdk-strona-glowna .main-navigation ul.menu > li > a,
	body.hdk-strona-glowna .main-navigation ul.menu > li > a span {
		font-family: var(--hdk-font);
		font-size: 14px;
		font-weight: 400;
		line-height: var(--hdk-header-height);
		color: #fff;
		text-transform: none;
	}

	body.hdk-strona-glowna .main-navigation ul.menu > li > a {
		padding-left: 12px;
		padding-right: 12px;
	}

	body.hdk-strona-glowna .main-navigation ul.menu > li > a:hover,
	body.hdk-strona-glowna .main-navigation ul.menu > li > a:hover span {
		color: #fff;
		opacity: 0.75;
	}
}

/* tresc startuje od gory strony - hero wchodzi pod pasek ogloszen i header */
body.hdk-strona-glowna .site-content {
	padding-top: 0 !important;
}

body.hdk-strona-glowna .hdk-hero {
	/* `--hero-height-offset` = wysokosc paska ogloszen (--header-group-height) */
	--hdk-header-offset: var(--hdk-announcement-height);
	/* `--section-top-offset` dodawane przez przezroczysty header */
	--hdk-section-top-offset: 66px;

	margin-top: calc(var(--hdk-announcement-height) * -1);
}

@media (min-width: 990px) {
	body.hdk-strona-glowna .hdk-hero {
		--hdk-section-top-offset: 60px;
	}
}

/* hamburger na mobile: przezroczysty, biale paski (header jest przezroczysty) */
body.hdk-strona-glowna .menu-toggle {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

body.hdk-strona-glowna .menu-toggle .bar {
	background-color: #fff !important;
}

body.hdk-strona-glowna .menu-toggle .bar-text {
	color: #fff !important;
}

/* ==========================================================================
   Mobile: header na pelna szerokosc, ikona koszyka i szuflada menu jak Shopify
   Wzorzec (390px): hamburger na x=16, koszyk konczy sie na ~377, logo na srodku.
   Szuflada: panel ~371px, pozycje 28px Instrument Sans 400, wysokosc 47px.
   ========================================================================== */

@media (max-width: 992px) {
	/* pelna szerokosc zamiast kolumny tresci - hamburger i koszyk maja byc szerzej */
	body.hdk-strona-glowna .header-4-inner {
		max-width: none;
		padding: 0 16px;
	}

	body.hdk-strona-glowna .header-4-container {
		padding: 0;
	}
}

/* --- ikona koszyka: kontur torby jak na Shopify (bez wypelnienia) --- */
body.hdk-strona-glowna .site-header-cart .cart-contents {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #fff;
}

/* Shoptimizer pokazuje obok ikony kwote - na Shopify jej nie ma */
body.hdk-strona-glowna .site-header-cart .cart-contents .amount,
body.hdk-strona-glowna .site-header-cart .cart-contents .woocommerce-Price-amount {
	display: none;
}

/*
 * Ikona jako maska - dzieki temu bierze kolor z `background-color`, wiec jest
 * biala tak jak reszta przezroczystego headera. Sciezka 1:1 z ikony Shopify
 * (viewBox 0 0 20 20, fill none, stroke 1.5, zaokraglone laczenia).
 */
body.hdk-strona-glowna .site-header-cart .cart-contents::before {
	content: '';
	display: block;
	width: 22px;
	height: 22px;
	background-color: #fff;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3.392 6.875h13.216v8.016c0 .567-.224 1.112-.624 1.513-.4.402-.941.627-1.506.627H5.522a2.13 2.13 0 0 1-1.506-.627 2.15 2.15 0 0 1-.624-1.513zM8.818 2.969h2.333c.618 0 1.211.247 1.649.686a2.35 2.35 0 0 1 .683 1.658v1.562H6.486V5.313c0-.622.246-1.218.683-1.658a2.33 2.33 0 0 1 1.65-.686'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3.392 6.875h13.216v8.016c0 .567-.224 1.112-.624 1.513-.4.402-.941.627-1.506.627H5.522a2.13 2.13 0 0 1-1.506-.627 2.15 2.15 0 0 1-.624-1.513zM8.818 2.969h2.333c.618 0 1.211.247 1.649.686a2.35 2.35 0 0 1 .683 1.658v1.562H6.486V5.313c0-.622.246-1.218.683-1.658a2.33 2.33 0 0 1 1.65-.686'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* licznik: mala kropka w rogu (bubble_background_color #470886), nie "torba" */
body.hdk-strona-glowna .site-header-cart .count {
	position: absolute !important;
	top: 3px !important;
	right: 1px !important;
	bottom: auto !important;
	left: auto !important;
	min-width: 17px !important;
	width: auto !important;
	height: 17px !important;
	padding: 0 4px !important;
	border: 0 !important;
	border-radius: 100px !important;
	background-color: #470886 !important;
	box-sizing: border-box;
	font-family: var(--hdk-font);
	font-size: 10px !important;
	font-weight: 600;
	line-height: 17px !important;
	text-align: center;
	color: #fff !important;
}

/* pusty koszyk - Shopify pokazuje sam kontur (klasa z shopify-header.js) */
body.hdk-strona-glowna /* motyw ustawia `display: block` z wyzsza specyficznoscia */
.site-header-cart.hdk-cart-empty .count {
	display: none !important;
}

/* --- szuflada menu mobilnego (wszystkie strony) --- */
/*
 * Szuflada wyglada tak samo w calym sklepie. Reguly powstaly przy odtwarzaniu
 * strony glownej z Shopify, ale naglowek i menu mobilne sa wszedzie te same -
 * ograniczone do jednego szablonu dawaly w sklepie i na blogu inna szuflade
 * (300px zamiast 95vw, 15px zamiast 28px w pozycjach).
 */
@media (max-width: 992px) {
	body .col-full-nav {
		padding: 0;
	}

	body .primary-navigation {
		padding: 64px 19px 19px;
	}

	body .primary-navigation ul.menu > li > a,
	body .primary-navigation ul.menu > li > a span {
		font-family: var(--hdk-font);
		font-size: 28px;
		font-weight: 400;
		line-height: 1.35;
		color: #000;
	}

	body .primary-navigation ul.menu > li > a {
		display: block;
		padding: 4px 0;
		min-height: 47px;
	}

	body .primary-navigation ul.menu > li {
		margin-bottom: 12px;
		line-height: normal;
	}

	/*
	 * Przycisk zamkniecia w rogu szuflady, nie obok niej. Szuflada zaczyna sie
	 * pod paskiem ogloszen, wiec X musi zejsc nizej - inaczej ladowal na fiolecie.
	 */
	body .mobile-menu.close-drawer {
		top: calc(var(--hdk-announcement-height, 44px) + 14px);
		left: auto;
		right: auto;
		inset-inline-start: calc(min(371px, 92vw) - 54px);
		width: 40px;
		height: 40px;
		color: #000;
	}
}

/* --- stan przypiety: ciemne menu, ikony i hamburger na bialym tle --- */
body.hdk-strona-glowna.hdk-header-stuck .main-navigation ul.menu > li > a,
body.hdk-strona-glowna.hdk-header-stuck .main-navigation ul.menu > li > a span {
	color: #323232;
}

body.hdk-strona-glowna.hdk-header-stuck .main-navigation ul.menu > li > a:hover,
body.hdk-strona-glowna.hdk-header-stuck .main-navigation ul.menu > li > a:hover span {
	color: #323232;
}

body.hdk-strona-glowna.hdk-header-stuck .site-header-cart .cart-contents::before {
	background-color: #323232;
}

body.hdk-strona-glowna.hdk-header-stuck .menu-toggle .bar {
	background-color: #111 !important;
}

/* --- mobile: hamburger i koszyk maja siedziec przy samych krawedziach --- */
@media (max-width: 992px) {
	/* Shoptimizer trzyma tu 15px paddingu i `right: 15px` na koszyku */
	body.hdk-strona-glowna .main-header.col-full {
		padding-left: 0;
		padding-right: 0;
	}

	body.hdk-strona-glowna .site-header-cart {
		right: 0;
	}

	/* szuflada jak na Shopify: ~95% szerokosci okna */
	body .col-full-nav {
		width: min(371px, 95vw);
	}

	/*
	 * Pozycje zamknieta ustawiamy TYLKO poza stanem otwarcia. Motyw otwiera
	 * szuflade regula `.mobile-toggled .col-full-nav { left: 0 }` (0,2,0) -
	 * bezwarunkowy `left` z naszej strony (0,2,1) blokowal jej otwieranie.
	 */
	body:not(.mobile-toggled) .col-full-nav {
		left: calc(min(371px, 95vw) * -1);
	}

	body .mobile-menu.close-drawer {
		inset-inline-start: calc(min(371px, 95vw) - 54px);
	}
}

@media (max-width: 992px) {
	/*
	 * .site-branding jest flexem z `justify-content: center`, wiec hamburger
	 * i logo sa centrowane jako para - hamburger ladowal 15px od krawedzi.
	 * Wyjmujemy go z ukladu: hamburger do lewej, logo zostaje na srodku
	 * (tak jak na Shopify).
	 */
	body.hdk-strona-glowna .main-header.col-full {
		position: relative;
	}

	body.hdk-strona-glowna .menu-toggle {
		position: absolute;
		top: 50%;
		/* motyw trzyma tu `left: 15px` z wyzsza specyficznoscia */
		left: 0 !important;
		right: auto;
		transform: translateY(-50%);
		margin: 0;
	}
}

/* ==========================================================================
   Rowne ustawienie elementow headera w pionie
   Logo, hamburger i koszyk maja lezec na jednej osi - Shoptimizer ustawia je
   roznymi mechanizmami (flex, absolute z wlasnym `top`), przez co koszyk
   siedzial ~8px nizej niz reszta.
   ========================================================================== */

body.hdk-strona-glowna .site-header,
body.hdk-strona-glowna .main-header.col-full,
body.hdk-strona-glowna .site-branding {
	display: flex;
	align-items: center;
	height: var(--hdk-header-height);
	min-height: var(--hdk-header-height);
}

/*
 * UWAGA: `.site-header` ma z-index 20, a menu siedzi w absolutnym
 * `.primary-navigation` bez z-indeksu - jesli pasek z logo rozciagnie sie
 * na cala szerokosc, przykrywa menu i linkow nie da sie kliknac.
 * Dlatego na desktopie pasek ma szerokosc samego logo, a koszyk wypycha
 * w prawo `margin-left: auto` na `.col-full-nav`.
 */
@media (max-width: 992px) {
	/* na mobile pasek musi byc pelnej szerokosci, zeby logo wyszlo na srodek */
	body.hdk-strona-glowna .site-header {
		flex: 1 1 auto;
	}

	body.hdk-strona-glowna .main-header.col-full {
		width: 100%;
	}
}

@media (min-width: 993px) {
	body.hdk-strona-glowna .site-header {
		flex: 0 0 auto;
	}

	body.hdk-strona-glowna .main-header.col-full {
		width: auto;
	}
}

/* logo nie moze sie sciskac, gdy menu jest szerokie */
body.hdk-strona-glowna .custom-logo-link {
	flex: 0 0 auto;
}

/* logo po lewej, ikony dosuniete do prawej krawedzi */
body.hdk-strona-glowna .header-4-inner {
	display: flex;
}

body.hdk-strona-glowna .site-header {
	min-width: 0;
}

@media (min-width: 993px) {
	body.hdk-strona-glowna .col-full-nav {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		height: var(--hdk-header-height);
		margin-left: auto;
	}
}

/*
 * Bez ustawiania `display` - Shoptimizer trzyma drugi, ukryty egzemplarz
 * koszyka w .site-header i wymuszenie `display: flex` go odslanialo.
 */
body.hdk-strona-glowna .col-full-nav .site-header-cart,
body.hdk-strona-glowna .col-full-nav .shoptimizer-cart {
	display: flex;
	align-items: center;
	margin: 0;
}

body.hdk-strona-glowna .site-header-cart {
	align-items: center;
	margin: 0;
}

body.hdk-strona-glowna .site-header-cart .cart-contents {
	margin: 0;
}

@media (max-width: 992px) {
	body.hdk-strona-glowna .site-branding {
		width: 100%;
	}

	/* na mobile koszyk jest absolutny - centrujemy go wzgledem wysokosci headera */
	body.hdk-strona-glowna .site-header-cart {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		margin: 0;
	}

	/* na tablecie i telefonie margines strony 16px, tak jak na Shopify */
	body.hdk-strona-glowna .header-4-inner {
		padding: 0 16px;
	}
}

@media (min-width: 993px) {
	/*
	 * Shoptimizer centruje zawartosc .site-branding - na mobile tak ma byc
	 * (logo na srodku), ale na desktopie logo idzie do lewej krawedzi.
	 */
	body.hdk-strona-glowna .site-branding,
	body.hdk-strona-glowna .main-header.col-full {
		justify-content: flex-start;
	}
}

/*
 * Waskie desktopy (993-1279px): 7 pozycji menu nie miesci sie miedzy logo
 * a koszykiem. Zmniejszamy logo i odstepy, zeby menu nie wchodzilo na ikone.
 * Dotyczy wszystkich stron - naglowek jest wszedzie ten sam, a po zwezeniu
 * paska nawigacji menu lamalo sie na dwie linie takze w sklepie i na blogu.
 */
@media (min-width: 993px) and (max-width: 1279px) {
	body .site-header .custom-logo-link img,
	body .site-header .custom-logo {
		height: 28px !important;
		max-height: 28px !important;
	}

	/* Ciasniej przy koszyku, zeby menu zmiescilo sie miedzy logo a ikona. */
	body .site-header-cart {
		margin-left: 16px;
	}

	body .main-navigation ul.menu > li > a,
	body .main-navigation ul.menu > li > a span {
		font-size: 13px;
	}

	/* 4px zamiast 6px: przy 1000px menu stykalo sie z logo o 10px. */
	body .main-navigation ul.menu > li > a {
		padding-left: 4px;
		padding-right: 4px;
	}
}

/*
 * Uklad listy na waskim desktopie (993-1198px): pasek nawigacji jest tu zwyklym
 * elementem flex i konczy sie tuz przed koszykiem, wiec wystarczy dosunac liste
 * do prawej. Bez rezerwy na logo - wciecie 175px pochodzilo z czasow, gdy pasek
 * rozciagal sie na cala szerokosc; odkad jest elastyczny, wciecie tylko
 * odbieralo miejsce i menu lamalo sie na dwie linie.
 *
 * Granica 1198px, bo od 1199px Shoptimizer przestawia pasek na pozycjonowanie
 * absolutne - patrz blok nizej.
 */
@media (min-width: 993px) and (max-width: 1198px) {
	body .primary-navigation ul.menu {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		padding-left: 0;
	}

	body .primary-navigation ul.menu > li {
		flex: 0 0 auto;
	}
}

/*
 * Od 1199px Shoptimizer rozciaga pasek nawigacji na cala szerokosc naglowka
 * (`.header-4 .primary-navigation { position: absolute; width: 100%;
 * text-align: center }`). Pasek nie ma wtedy rezerwy ani na logo, ani na
 * koszyk, wiec na podstronach menu wchodzilo na sasiadow:
 *   - 1199-1279px: lista dosunieta do prawej wchodzila pod ikone koszyka (~74px),
 *   - od 1280px: lista wysrodkowana wchodzila pod logo (~6px) - ucinalo "S"
 *     w "Strona glowna" i zabieralo tej pozycji klikalnosc, bo `.site-header`
 *     ma `z-index: 20`, a pasek nawigacji zadnego.
 * Zdejmujemy pozycjonowanie absolutne: naglowek wraca do ukladu flex, tego
 * samego, ktory ponizej 1199px ustawia menu dokladnie miedzy logo a koszykiem.
 *
 * Strona glowna ma wlasny uklad (absolutny pasek z wcieciem 223px na logo,
 * patrz blok "poziome menu: TYLKO desktop") i jest z tej poprawki wylaczona -
 * dlatego tez powyzszy blok flex konczy sie na 1198px, inaczej `flex-end`
 * dosuwalby jej menu pod koszyk.
 */
@media (min-width: 1199px) {
	body.header-4:not(.hdk-strona-glowna) .primary-navigation {
		position: static;
		width: auto;
		text-align: left;
	}

	body.header-4:not(.hdk-strona-glowna) .primary-navigation ul.menu {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		padding-left: 0;
	}

	body.header-4:not(.hdk-strona-glowna) .primary-navigation ul.menu > li {
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   Szuflada mobilna: bez obszaru "Mobile Extra", z danymi firmowymi pod menu
   ========================================================================== */

/* obszar widgetow "Mobile Extra" - usuniety z szuflady */
body .col-full-nav .mobile-extra {
	display: none !important;
}

/* koszyk w szufladzie jest zbedny - jest juz w headerze */
@media (max-width: 992px) {
	body .col-full-nav > .site-header-cart {
		display: none !important;
	}
}

/* dane firmowe: tylko w szufladzie (w headerze desktopowym to ten sam znacznik) */
.hdk-drawer-info {
	display: none;
}

@media (max-width: 992px) {
	body .hdk-drawer-info {
		display: block;
		margin-top: 28px;
		padding-top: 24px;
		border-top: 1px solid rgba(0, 0, 0, 0.12);
		font-family: var(--hdk-font);
		font-size: 14px;
		line-height: 1.5;
		color: #000;
	}

	body .hdk-drawer-info__heading {
		margin: 0 0 8px;
		font-size: 16px;
		font-weight: 600;
	}

	body .hdk-drawer-info__line {
		margin: 0;
	}

	body .hdk-drawer-info a {
		color: inherit;
		text-decoration: underline;
	}
}

/* ==========================================================================
   Wspolna "skorupa" sekcji strony glownej
   Sekcje Shopify sa na pelna szerokosc okna, a tresc siedzi w kolumnie
   1120px z marginesem 16px / 40px - dokladnie jak hero.
   ========================================================================== */

.hdk-section {
	--hdk-page-margin: 16px;
	--hdk-content-width: 1120px;
	--hdk-spacing-scale: 0.7;

	position: relative;
	display: grid;
	grid-template-columns:
		minmax(var(--hdk-page-margin), 1fr)
		minmax(0, var(--hdk-content-width))
		minmax(var(--hdk-page-margin), 1fr);

	/* wyjscie z kontenera .col-full motywu Shoptimizer */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

@media (min-width: 750px) {
	.hdk-section {
		--hdk-page-margin: 40px;
	}
}

@media (min-width: 990px) {
	.hdk-section {
		--hdk-spacing-scale: 1;
	}
}

.hdk-section > .hdk-section__inner {
	grid-column: 2;
	width: 100%;
}

/* ==========================================================================
   Sekcja 2: nieskonczona karuzela zdjec
   index.json -> sections["1780996780322b5a97"] / ai_gen_block_813b267
   ========================================================================== */

.hdk-karuzela {
	/* padding-block-start: 15, padding-block-end: 0 (15 <= 20, wiec bez skalowania) */
	padding-block: 15px 0;
	background-color: #fff;
}

.hdk-karuzela .hdk-karuzela__viewport {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.hdk-karuzela .hdk-karuzela__track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: hdk-karuzela-scroll 30s linear infinite;
}

/* pauza przy najechaniu (CSS) i przy dotknieciu (klasa z shopify-sections.js) */
.hdk-karuzela .hdk-karuzela__viewport:hover .hdk-karuzela__track,
.hdk-karuzela .hdk-karuzela__viewport.is-paused .hdk-karuzela__track {
	animation-play-state: paused;
}

.hdk-karuzela .hdk-karuzela__item {
	flex-shrink: 0;
	width: 300px;
	aspect-ratio: 4 / 5;
	border-radius: 8px;
	overflow: hidden;
}

.hdk-karuzela .hdk-karuzela__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes hdk-karuzela-scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hdk-karuzela .hdk-karuzela__track {
		animation: none;
	}

	.hdk-karuzela .hdk-karuzela__viewport {
		overflow-x: auto;
	}
}

/* wzorzec skaluje szerokosc zdjecia o 0.7 */
@media (max-width: 749px) {
	.hdk-karuzela .hdk-karuzela__item {
		width: 210px;
	}
}

/* ==========================================================================
   Galeria produktow (blok ai_gen_block_59c6961)
   Sekcje 6, 7 i 9 - rozni je tylko naglowek, kolekcja i limit.
   Wymiary z pomiaru zywej strony (1440px).
   ========================================================================== */

.hdk-galeria {
	/* padding-block: 15 / 15 (<= 20, wiec bez skalowania) */
	padding-block: 15px;
	background-color: #fff;
}

.hdk-galeria .hdk-section__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.hdk-galeria .hdk-galeria__naglowek {
	width: 100%;
	margin: 0;
	font-family: var(--hdk-font);
	font-size: clamp(2.25rem, 4.8vw, 3rem);
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	color: #000;
	text-wrap: balance;
}

.hdk-galeria .hdk-galeria__opis {
	max-width: 32.5em;
	margin: 0;
	font-family: var(--hdk-font);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	color: #000;
}

.hdk-galeria .hdk-galeria__siatka {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	margin-top: 12px;
}

/*
 * Wzorzec ma na mobile jedna kolumne, ale przy naszej liczbie produktow
 * strona glowna rosla do ~23 000 px. Dwie kolumny skracaja ja o polowe.
 */
@media (max-width: 749px) {
	.hdk-galeria .hdk-galeria__siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* --- karta produktu --- */

.hdk-produkt.hdk-produkt {
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	background: transparent;
	/*
	 * ⚠️ To `position` nie jest ozdobnikiem - bez niego strona przewija sie
	 * w bok na telefonie. W karcie siedzi `.screen-reader-text` (tekst dla
	 * czytnikow ekranu) z `position: absolute`. Gdy karta jest `static`,
	 * blokiem zawierajacym staje sie odlegly przodek NAD karuzela, wiec
	 * `overflow: auto` paska karuzeli go nie przycina - i element rozpycha
	 * dokument do ponad 1000 px przy ekranie 375 px. Karta jako blok
	 * zawierajacy zamyka go w srodku, razem z reszta zawartosci kafelka.
	 */
	position: relative;
}

.hdk-produkt .hdk-produkt__media {
	position: relative;
	overflow: hidden;
	border-radius: 8px 8px 0 0;
}

.hdk-produkt .hdk-produkt__link {
	display: block;
}

.hdk-produkt .hdk-produkt__zdjecie {
	display: block;
	width: 100%;
	height: 270px;
	object-fit: cover;
}

/*
 * Na dwoch kolumnach karta ma ~167px szerokosci, wiec zdjecie 220px bylo
 * mocno pionowe i podbijalo cala karte - 180px zostawia proporcje bliskie
 * kwadratu i skraca kazdy rzad kart o 40px.
 */
@media (max-width: 749px) {
	.hdk-produkt .hdk-produkt__zdjecie {
		height: 180px;
	}
}

/*
 * Skladniki glowne w lewym dolnym rogu zdjecia - w miejscu, gdzie wczesniej
 * byly okragle ikony (Kapiel / Stopy / Dodatek). Leza na zdjeciu, wiec nie
 * dokladaja nic do wysokosci karty.
 */
.hdk-produkt .hdk-produkt__skladniki {
	position: absolute;
	right: 8px;
	bottom: 8px;
	left: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdk-produkt .hdk-produkt__skladnik {
	margin: 0;
	padding: 3px 8px;
	border-radius: 999px;
	background-color: rgba(0, 0, 0, 0.55);
	font-family: var(--hdk-font);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	white-space: nowrap;
}

/* --- tresc karty --- */

.hdk-produkt .hdk-produkt__tresc {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 10px 10px;
}

/*
 * Tagi jada w jednym rzedzie w kolko - zawijanie rozciagalo karte na kazdej
 * szerokosci (na mobile o 134-235px, na desktopie o ~134px). Zapetlenie
 * i automatyczne przesuwanie robi shopify-sections.js; tu tylko rzad, ktory
 * sie nie zawija i przewija w poziomie. Bez JS zostaje zwykly pasek.
 */
.hdk-produkt .hdk-produkt__tagi {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.hdk-produkt .hdk-produkt__tagi::-webkit-scrollbar {
	display: none;
}

.hdk-produkt .hdk-produkt__tag {
	flex: 0 0 auto;
	padding: 4px 8px;
	border-radius: 20px;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	white-space: nowrap;
}

.hdk-produkt .hdk-produkt__tytul {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: #000;
}

.hdk-produkt .hdk-produkt__tytul a {
	color: inherit;
	text-decoration: none;
}

.hdk-produkt .hdk-produkt__tytul a:hover {
	text-decoration: underline;
}

.hdk-produkt .hdk-produkt__cena {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.25;
	color: #43224f;
}

.hdk-produkt .hdk-produkt__cena .woocommerce-Price-amount,
.hdk-produkt .hdk-produkt__cena bdi {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.hdk-produkt .hdk-produkt__aktywnosc {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: #666;
}

.hdk-produkt .hdk-produkt__aktywnosc strong {
	font-weight: 700;
}

/* przycisk "Dodaj do koszyka" - nadpisuje styl Shoptimizera */
.hdk-produkt .hdk-produkt__cta .button {
	display: block;
	width: 100%;
	padding: 12px;
	border: 0;
	border-radius: 40px;
	background-color: #43224f;
	font-family: var(--hdk-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	text-transform: none;
	color: #fff;
}

.hdk-produkt .hdk-produkt__cta .button:hover,
.hdk-produkt .hdk-produkt__cta .button:focus {
	background-color: #2f1738;
	color: #fff;
}

/* Woo dokleja "Wyświetl koszyk" po dodaniu - nie chcemy tego w karcie */
.hdk-produkt .hdk-produkt__cta .added_to_cart {
	display: none;
}

/* CommerceGurus wstrzykuje wlasny `.price-tag` zamiast zwyklej ceny */
.hdk-produkt .hdk-produkt__cena .price-tag,
.hdk-produkt .hdk-produkt__cena .price {
	display: block;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.hdk-produkt .hdk-produkt__cena del,
.hdk-produkt .hdk-produkt__cena del .woocommerce-Price-amount {
	font-size: 15px;
	font-weight: 400;
}

.hdk-produkt .hdk-produkt__cena .vat-text,
.hdk-produkt .hdk-produkt__cena small {
	font-size: 12px;
	font-weight: 400;
	opacity: 0.7;
}

/* ==========================================================================
   Sekcja 11: HDK pionowe wideo (sections/hdk-video-hero.liquid)
   Ta sekcja ma w Shopify wlasne, kompletne style - przenosimy je 1:1.
   Ustawienia z index.json: tlo #111 + zdjecie (przyciemnienie 55%),
   padding 40/40, max-width 1200, side-padding 20, siatka 1fr 0.8fr,
   tytul 38-52px, podtytul 15-18px, przycisk gradient, wideo 9:16 r=18.
   ========================================================================== */

.hdk-video-hero {
	position: relative;
	overflow: hidden;
	padding-block: 40px;
	background-color: #111;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #f2f2f9;

	/* wyjscie z kontenera .col-full motywu Shoptimizer */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.hdk-video-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(0, 0, 0, 0.55);
	pointer-events: none;
}

.hdk-video-hero .hdk-video-hero__wrap {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 0.8fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding-inline: 20px;
}

.hdk-video-hero .hdk-video-hero__title {
	margin: 0 0 10px;
	font-family: var(--hdk-font);
	font-size: clamp(38px, 3.5vw, 52px);
	font-weight: 600;
	line-height: 1.08;
	color: #faf9ff;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.hdk-video-hero .hdk-video-hero__subtitle {
	margin: 0 0 16px;
	font-family: var(--hdk-font);
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.45;
	color: #d2ccff;
}

.hdk-video-hero .hdk-video-hero__subtitle p {
	margin: 0 0 10px;
}

.hdk-video-hero .hdk-video-hero__subtitle p:last-child {
	margin-bottom: 0;
}

.hdk-video-hero .hdk-video-hero__button {
	display: inline-block;
	padding: 12px 18px;
	border-radius: 12px;
	background: linear-gradient(135deg, #a28aff, #6e56e0);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	color: #fff;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.hdk-video-hero .hdk-video-hero__button:hover,
.hdk-video-hero .hdk-video-hero__button:focus {
	transform: translateY(-1px);
	opacity: 0.92;
	color: #fff;
	text-decoration: none;
}

.hdk-video-hero .hdk-video-hero__video-wrap {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
	background: rgba(255, 255, 255, 0.05);
}

.hdk-video-hero .hdk-video-hero__video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border-radius: 18px;
}

.hdk-video-hero .hdk-video-hero__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 9 / 16;
	padding: 24px;
	text-align: center;
	color: #d2ccff;
	background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 980px) {
	.hdk-video-hero .hdk-video-hero__wrap {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hdk-video-hero .hdk-video-hero__video-wrap {
		max-width: 80vw;
		margin: 20px auto 0;
	}
}

/*
 * Sekcja 12 (section_PYhPQj): ta sama karuzela, ale z `section_height: "small"`
 * i paddingiem 15/15. Tresc wysrodkowana w pionie w minimalnej wysokosci.
 */
.hdk-karuzela--mala {
	padding-block: 15px;
	align-items: center;
	min-height: 15rem;
}

@media (min-width: 40em) {
	.hdk-karuzela--mala {
		min-height: 40svh;
	}
}

@media (min-width: 60em) {
	.hdk-karuzela--mala {
		min-height: 50svh;
	}
}

/* ==========================================================================
   Sekcje 13 i 14: pictures-hints ("Czym sie roznimy", "Jak przygotowac rytual")
   sections/pictures-hints.liquid - sekcja ma wlasne, kompletne style.
   Wariant ciemny ma zdjecie w tle (::before) + przyciemnienie 65% (::after).
   ========================================================================== */

.hdk-roznice {
	position: relative;
	overflow: hidden;
	padding-block: 52px;
	background-color: #f6f2f8;

	/* wyjscie z kontenera .col-full motywu Shoptimizer */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

@media (min-width: 750px) {
	.hdk-roznice {
		padding-block: 80px;
	}
}

/* wariant ciemny: zdjecie w tle + przyciemnienie */
.hdk-roznice--ciemna::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--hdk-roznice-tlo);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hdk-roznice--ciemna::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(16, 11, 22, 0.65);
}

/*
 * We wzorcu kontener ma DOKLADNIE 1200px tresci (bez paddingu), stad kolumny
 * 386.664px. Zeby na waskich ekranach karty nie dotykaly krawedzi, dokladamy
 * 20px paddingu i o tyle samo powiekszamy max-width.
 */
.hdk-roznice .hdk-roznice__kontener {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: calc(1200px + 40px);
	margin: 0 auto;
	padding-inline: 20px;
}

/* --- naglowek sekcji --- */

/* max-width 820px sprawia, ze naglowek lamie sie tak jak we wzorcu */
.hdk-roznice .hdk-roznice__header {
	max-width: 820px;
	margin: 0 auto 28px;
	text-align: center;
}

@media (min-width: 750px) {
	.hdk-roznice .hdk-roznice__header {
		margin-bottom: 42px;
	}
}

.hdk-roznice .hdk-roznice__eyebrow {
	display: inline-flex;
	align-items: center;
	margin-bottom: 14px;
	padding: 8px 14px;
	border-radius: 999px;
	background-color: #e9e2f2;
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6f3f91;
}

.hdk-roznice .hdk-roznice__naglowek {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 750;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.hdk-roznice--ciemna .hdk-roznice__naglowek {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hdk-roznice .hdk-roznice__opis {
	max-width: 720px;
	margin: 14px auto 0;
	font-family: var(--hdk-font);
	font-size: 18px;
	line-height: 1.55;
	opacity: 0.78;
}

@media (min-width: 750px) {
	.hdk-roznice .hdk-roznice__opis {
		margin-top: 16px;
	}
}

.hdk-roznice .hdk-roznice__opis p {
	margin: 0;
}

.hdk-roznice--ciemna .hdk-roznice__naglowek,
.hdk-roznice--ciemna .hdk-roznice__opis,
.hdk-roznice--ciemna .hdk-roznice__cta-tekst {
	color: #fff;
}

.hdk-roznice--jasna .hdk-roznice__naglowek {
	color: #17131e;
}

.hdk-roznice--jasna .hdk-roznice__opis,
.hdk-roznice--jasna .hdk-roznice__cta-tekst {
	color: #332c39;
}

/* --- siatka kart --- */

.hdk-roznice .hdk-roznice__siatka {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

@media (max-width: 989px) {
	.hdk-roznice .hdk-roznice__siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 749px) {
	.hdk-roznice .hdk-roznice__siatka {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hdk-roznice .hdk-roznice__karta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 24px;
	background-color: #34273d;
	box-shadow: 0 20px 50px rgba(30, 19, 42, 0.14);
}

.hdk-roznice .hdk-roznice__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* przyciemnienie zdjecia (image_overlay_opacity: 15) */
.hdk-roznice .hdk-roznice__karta::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(16, 11, 22, 0.15);
}

/* gradient pod tekstem, zeby byl czytelny */
.hdk-roznice .hdk-roznice__karta::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image: linear-gradient(
		rgba(10, 7, 13, 0.04) 12%,
		rgba(10, 7, 13, 0.18) 40%,
		rgba(10, 7, 13, 0.94) 100%
	);
}

.hdk-roznice .hdk-roznice__tresc {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px;
	color: #fff;
}

@media (min-width: 750px) {
	.hdk-roznice .hdk-roznice__tresc {
		padding: 28px;
	}
}

.hdk-roznice .hdk-roznice__numer {
	position: absolute;
	top: 28px;
	left: 28px;
	display: flex;
	padding: 0 12px;
	border-radius: 999px;
	background-color: rgba(16, 10, 22, 0.42);
	font-family: var(--hdk-font);
	font-size: 13px;
	font-weight: 750;
	line-height: 1.9;
	letter-spacing: 0.05em;
	color: #fff;
}

.hdk-roznice .hdk-roznice__etykieta {
	margin-bottom: 8px;
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.085em;
	text-transform: uppercase;
	color: #e9d59b;
}

.hdk-roznice .hdk-roznice__karta-naglowek {
	margin: 0 0 12px;
	font-family: var(--hdk-font);
	font-size: 26px;
	font-weight: 750;
	line-height: 1.12;
	color: #fff;
}

.hdk-roznice .hdk-roznice__karta-tekst {
	font-family: var(--hdk-font);
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}

.hdk-roznice .hdk-roznice__karta-tekst p {
	margin: 0;
}

/* --- wezwanie do dzialania --- */

.hdk-roznice .hdk-roznice__cta {
	max-width: 820px;
	margin: 36px auto 0;
	text-align: center;
}

.hdk-roznice .hdk-roznice__cta-tekst {
	margin-bottom: 18px;
	font-family: var(--hdk-font);
	font-size: 16px;
	line-height: 1.5;
}

.hdk-roznice .hdk-roznice__cta-tekst p {
	margin: 0;
}

.hdk-roznice .hdk-roznice__przycisk {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 28px;
	background-color: #6f3f91;
	font-family: var(--hdk-font);
	font-size: 16px;
	font-weight: 750;
	line-height: 1.6;
	text-decoration: none;
	color: #fff;
}

.hdk-roznice .hdk-roznice__przycisk:hover,
.hdk-roznice .hdk-roznice__przycisk:focus {
	background-color: #5b3277;
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   Sekcja 15: rytual manifestacji (sections/glass-morph.liquid)
   Szklane karty na ciemnym zdjeciu + pasek CTA.
   ========================================================================== */

.hdk-manifestacja {
	position: relative;
	overflow: hidden;
	padding-block: 48px;
	background-color: #15101d;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

	/* wyjscie z kontenera .col-full motywu Shoptimizer */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

@media (min-width: 750px) {
	.hdk-manifestacja {
		padding-block: 80px;
	}
}

/* przyciemnienie zdjecia */
.hdk-manifestacja::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(16, 11, 22, 0.5);
}

/* dwie ciepłe poswiaty w rogach */
.hdk-manifestacja::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		radial-gradient(circle at 12% 16%, rgba(200, 163, 92, 0.18), rgba(0, 0, 0, 0) 34%),
		radial-gradient(circle at 88% 82%, rgba(105, 151, 104, 0.15), rgba(0, 0, 0, 0) 36%);
	pointer-events: none;
}

.hdk-manifestacja .hdk-manifestacja__kontener {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: calc(1200px + 40px);
	margin: 0 auto;
	padding-inline: 20px;
	color: #fff;
}

/* --- naglowek sekcji --- */

.hdk-manifestacja .hdk-manifestacja__header {
	max-width: 880px;
	margin: 0 auto 42px;
	text-align: center;
}

/* eyebrow to "pigulka" ze szkla, nie sam tekst */
.hdk-manifestacja .hdk-manifestacja__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-bottom: 18px;
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	font-family: var(--hdk-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #b88cff;
}

.hdk-manifestacja .hdk-manifestacja__kropka {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #b88cff;
}

.hdk-manifestacja .hdk-manifestacja__naglowek {
	max-width: 780px;
	margin: 0 auto;
	font-family: var(--hdk-font);
	font-size: clamp(34px, 4.4vw, 52px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.035em;
	color: #fff;
}

.hdk-manifestacja .hdk-manifestacja__opis {
	max-width: 720px;
	margin: 18px auto 0;
	font-family: var(--hdk-font);
	font-size: 19px;
	line-height: 1.58;
	opacity: 0.84;
}

.hdk-manifestacja .hdk-manifestacja__opis p {
	margin: 0;
}

/* --- karty krokow --- */

.hdk-manifestacja .hdk-manifestacja__siatka {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

@media (max-width: 989px) {
	.hdk-manifestacja .hdk-manifestacja__siatka {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hdk-manifestacja .hdk-manifestacja__karta {
	min-height: 290px;
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 22px;
	background-color: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(18px) saturate(1.25);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		0 22px 60px rgba(0, 0, 0, 0.2);
}

.hdk-manifestacja .hdk-manifestacja__topline {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
}

.hdk-manifestacja .hdk-manifestacja__numer {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background-color: rgba(116, 70, 200, 0.92);
	font-family: var(--hdk-font);
	font-size: 20px;
	font-weight: 800;
	color: #fff;
}

.hdk-manifestacja .hdk-manifestacja__etap {
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #b88cff;
}

.hdk-manifestacja .hdk-manifestacja__karta-naglowek {
	margin: 0 0 12px;
	font-family: var(--hdk-font);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.15;
	color: #fff;
}

.hdk-manifestacja .hdk-manifestacja__karta-tekst {
	font-family: var(--hdk-font);
	font-size: 16px;
	line-height: 1.58;
	opacity: 0.86;
}

.hdk-manifestacja .hdk-manifestacja__karta-tekst p {
	margin: 0;
}

/* --- pasek CTA --- */

.hdk-manifestacja .hdk-manifestacja__cta {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 30px;
	margin-top: 24px;
	padding: 26px 30px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 22px;
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

@media (max-width: 749px) {
	.hdk-manifestacja .hdk-manifestacja__cta {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
		justify-items: center;
	}
}

.hdk-manifestacja .hdk-manifestacja__cta-naglowek {
	margin: 0 0 6px;
	font-family: var(--hdk-font);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}

.hdk-manifestacja .hdk-manifestacja__cta-tekst {
	font-family: var(--hdk-font);
	font-size: 15px;
	line-height: 1.5;
	opacity: 0.78;
}

.hdk-manifestacja .hdk-manifestacja__cta-tekst p {
	margin: 0;
}

.hdk-manifestacja .hdk-manifestacja__przycisk {
	display: inline-block;
	padding: 14px 24px;
	border-radius: 28px;
	background-color: #6f3f91;
	font-family: var(--hdk-font);
	font-size: 16px;
	font-weight: 750;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	color: #fff;
}

.hdk-manifestacja .hdk-manifestacja__przycisk:hover,
.hdk-manifestacja .hdk-manifestacja__przycisk:focus {
	background-color: #5b3277;
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   Sekcja 16: gabka ziolowa (sections/new-product.liquid)
   Zdjecie 4:5 obok kolumny z trescia, na rozmytym ciemnym tle.
   ========================================================================== */

.hdk-gabka {
	position: relative;
	overflow: hidden;
	padding-block: 52px;
	background-color: #1b1122;

	/* wyjscie z kontenera .col-full motywu Shoptimizer */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

@media (min-width: 750px) {
	.hdk-gabka {
		padding-block: 88px;
	}
}

/* rozmyte zdjecie w tle */
.hdk-gabka::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--hdk-gabka-tlo);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(2px);
}

.hdk-gabka::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(22, 13, 30, 0.7);
}

/* fioletowa poswiata w lewym dolnym rogu */
.hdk-gabka .hdk-gabka__poswiata {
	position: absolute;
	bottom: -220px;
	left: -170px;
	z-index: 1;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: #9e67d2;
	opacity: 0.28;
	filter: blur(110px);
	pointer-events: none;
}

.hdk-gabka .hdk-gabka__kontener {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: calc(1240px + 40px);
	margin: 0 auto;
	padding-inline: 20px;
}

/* image_column_width: 9 -> kolumny 9fr / 10fr */
.hdk-gabka .hdk-gabka__main {
	display: grid;
	grid-template-columns: 9fr 10fr;
	gap: 84px;
	align-items: center;
}

@media (max-width: 989px) {
	.hdk-gabka .hdk-gabka__main {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

/* --- zdjecie --- */

.hdk-gabka .hdk-gabka__ramka {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 28px;
	background-color: #34223f;
	box-shadow: 0 30px 80px rgba(16, 9, 22, 0.28);
}

.hdk-gabka .hdk-gabka__obraz {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hdk-gabka .hdk-gabka__etykieta {
	position: absolute;
	bottom: 20px;
	left: 22px;
	padding: 9px 13px;
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: 999px;
	background-color: rgba(20, 12, 27, 0.48);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

/* --- tresc --- */

.hdk-gabka .hdk-gabka__eyebrow {
	display: inline-block;
	margin-bottom: 16px;
	padding: 8px 14px;
	border: 1px solid #79508f;
	border-radius: 999px;
	background-color: #392347;
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #e9d8f4;
}

.hdk-gabka .hdk-gabka__naglowek {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: clamp(37px, 4.4vw, 56px);
	font-weight: 760;
	line-height: 1.03;
	letter-spacing: -0.04em;
	color: #fff;
}

.hdk-gabka .hdk-gabka__lead {
	margin-top: 20px;
	font-family: var(--hdk-font);
	font-size: 18px;
	line-height: 1.62;
	color: #fff;
	opacity: 0.88;
}

.hdk-gabka .hdk-gabka__lead p {
	margin: 0;
}

.hdk-gabka .hdk-gabka__tagi {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.hdk-gabka .hdk-gabka__tag {
	padding: 7px 12px;
	border: 1px solid #684377;
	border-radius: 999px;
	background-color: #2d1c37;
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: #f5eafe;
}

/* --- dwie sciezki uzycia --- */

.hdk-gabka .hdk-gabka__sciezki {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 28px;
}

@media (max-width: 749px) {
	.hdk-gabka .hdk-gabka__sciezki {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hdk-gabka .hdk-gabka__sciezka {
	padding: 18px;
	border: 1px solid #654174;
	border-radius: 18px;
	background-color: #2a1934;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.hdk-gabka .hdk-gabka__sciezka-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.hdk-gabka .hdk-gabka__ikona {
	display: inline-flex;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #7d4ca2;
	color: #fff;
}

.hdk-gabka .hdk-gabka__ikona svg {
	width: 20px;
	height: 20px;
}

.hdk-gabka .hdk-gabka__sciezka-naglowek {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: 16px;
	font-weight: 750;
	line-height: 1.2;
	color: #fff;
}

.hdk-gabka .hdk-gabka__sciezka-tekst {
	font-family: var(--hdk-font);
	font-size: 13px;
	line-height: 1.48;
	color: #fff;
	opacity: 0.76;
}

.hdk-gabka .hdk-gabka__sciezka-tekst p {
	margin: 0;
}

/* --- wezwanie do dzialania --- */

.hdk-gabka .hdk-gabka__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
}

.hdk-gabka .hdk-gabka__przycisk {
	display: inline-block;
	padding: 15px 27px;
	border-radius: 28px;
	background-color: #8f55b7;
	font-family: var(--hdk-font);
	font-size: 16px;
	font-weight: 750;
	line-height: 1.6;
	text-decoration: none;
	color: #fff;
}

.hdk-gabka .hdk-gabka__przycisk:hover,
.hdk-gabka .hdk-gabka__przycisk:focus {
	background-color: #7c46a1;
	color: #fff;
	text-decoration: none;
}

.hdk-gabka .hdk-gabka__microcopy {
	font-family: var(--hdk-font);
	font-size: 12px;
	line-height: 1.4;
	color: #fff;
	opacity: 0.62;
}

/* ==========================================================================
   Sekcja 17: skladniki rytualow (sections/ingredients-carousel.liquid)
   Pigulki z nazwami roslin + panel ze szczegolami wybranej.
   ========================================================================== */

.hdk-skladniki {
	padding-block: 52px;
	background-color: #f6f2f8;

	/* wyjscie z kontenera .col-full motywu Shoptimizer */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

@media (min-width: 750px) {
	.hdk-skladniki {
		padding-block: 80px;
	}
}

.hdk-skladniki .hdk-skladniki__kontener {
	width: 100%;
	max-width: calc(1240px + 40px);
	margin: 0 auto;
	padding-inline: 20px;
}

.hdk-skladniki .hdk-skladniki__header {
	max-width: 840px;
	margin: 0 auto 30px;
	text-align: center;
}

.hdk-skladniki .hdk-skladniki__eyebrow {
	display: inline-block;
	margin-bottom: 13px;
	padding: 8px 14px;
	border-radius: 999px;
	background-color: #e9e2f2;
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: 0.075em;
	text-transform: uppercase;
	color: #69408d;
}

.hdk-skladniki .hdk-skladniki__naglowek {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 750;
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: #17131e;
}

.hdk-skladniki .hdk-skladniki__opis {
	max-width: 720px;
	margin: 16px auto 0;
	font-family: var(--hdk-font);
	font-size: 18px;
	line-height: 1.55;
	color: #332c39;
	opacity: 0.78;
}

.hdk-skladniki .hdk-skladniki__opis p {
	margin: 0;
}

/* --- pigulki z nazwami roslin --- */

/*
 * Wzorzec trzyma pigulki w jednym rzedzie (flex-wrap: nowrap) i pozwala im
 * wyjechac poza kontener - przewija sie je w poziomie. Przy zawijaniu rzad
 * rosl do dwoch linii i cala sekcja byla o ~38px wyzsza.
 */
.hdk-skladniki .hdk-skladniki__pigulki {
	display: flex;
	flex-wrap: nowrap;
	gap: 9px;
	margin-bottom: 16px;
	/* zapas na obwodke focusu i cien przy przewijaniu - jak we wzorcu */
	padding: 4px 3px 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.hdk-skladniki .hdk-skladniki__pigulki::-webkit-scrollbar {
	display: none;
}

/*
 * Rzad pigulek jest szerszy niz ekran, a bez paska przewijania nic tego nie
 * zapowiadalo. Cieniowanie przy prawej krawedzi pokazuje, ze lista idzie dalej.
 */
.hdk-skladniki .hdk-skladniki__pigulki-otoczka {
	position: relative;
}

.hdk-skladniki .hdk-skladniki__pigulki-otoczka::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 8px;
	width: 56px;
	background: linear-gradient(to right, rgba(246, 242, 248, 0), #f6f2f8 75%);
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.hdk-skladniki .hdk-skladniki__pigulki-otoczka.is-koniec::after {
	opacity: 0;
}

.hdk-skladniki .hdk-skladniki__pigulka {
	flex: 0 0 auto;
}

.hdk-skladniki .hdk-skladniki__pigulka {
	padding: 10px 17px;
	border: 1px solid #dcd2e2;
	border-radius: 999px;
	background-color: #fff;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 750;
	line-height: 1.4;
	color: #332c39;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hdk-skladniki .hdk-skladniki__pigulka:hover {
	border-color: #7446c8;
	color: #7446c8;
}

.hdk-skladniki .hdk-skladniki__pigulka.is-active {
	border-color: #7446c8;
	background-color: #7446c8;
	color: #fff;
}

/* --- panel ze szczegolami --- */

.hdk-skladniki .hdk-skladniki__panel {
	display: grid;
	grid-template-columns: 274px minmax(0, 1fr);
	gap: 64px;
	max-width: 1012px;
	padding: 44px;
	border: 1px solid #e4dce8;
	border-radius: 24px;
	background-color: #fff;
	box-shadow: 0 20px 55px rgba(37, 23, 47, 0.1);
}

.hdk-skladniki .hdk-skladniki__panel[hidden] {
	display: none;
}

@media (max-width: 989px) {
	.hdk-skladniki .hdk-skladniki__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 24px;
	}
}

.hdk-skladniki .hdk-skladniki__panel-obraz {
	overflow: hidden;
	border-radius: 16px;
	background-color: #e9e2f2;
}

.hdk-skladniki .hdk-skladniki__panel-obraz img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
}

.hdk-skladniki .hdk-skladniki__kicker {
	margin-bottom: 8px;
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7446c8;
}

.hdk-skladniki .hdk-skladniki__panel-naglowek {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: clamp(32px, 3.2vw, 46px);
	font-weight: 750;
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: #17131e;
}

.hdk-skladniki .hdk-skladniki__lacina {
	margin: 7px 0 24px;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-style: italic;
	color: #332c39;
	opacity: 0.72;
}

.hdk-skladniki .hdk-skladniki__kolumny {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 749px) {
	.hdk-skladniki .hdk-skladniki__kolumny {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hdk-skladniki .hdk-skladniki__box {
	padding: 18px;
	border-radius: 16px;
	background-color: #f4eff6;
}

.hdk-skladniki .hdk-skladniki__box-tytul {
	margin-bottom: 8px;
	font-family: var(--hdk-font);
	font-size: 15px;
	font-weight: 750;
	line-height: 1.3;
	color: #17131e;
}

.hdk-skladniki .hdk-skladniki__box-tekst {
	font-family: var(--hdk-font);
	font-size: 15px;
	line-height: 1.55;
	color: #332c39;
	opacity: 0.82;
}

.hdk-skladniki .hdk-skladniki__box-tekst p {
	margin: 0;
}

.hdk-skladniki .hdk-skladniki__rytualy-tytul {
	margin: 22px 0 10px;
	font-family: var(--hdk-font);
	font-size: 13px;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #17131e;
}

.hdk-skladniki .hdk-skladniki__linki {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hdk-skladniki .hdk-skladniki__link {
	padding: 9px 13px;
	border: 1px solid #dcd2e2;
	border-radius: 999px;
	background-color: #fff;
	font-family: var(--hdk-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	color: #17131e;
}

.hdk-skladniki .hdk-skladniki__link:hover,
.hdk-skladniki .hdk-skladniki__link:focus {
	border-color: #7446c8;
	color: #7446c8;
	text-decoration: none;
}

.hdk-skladniki .hdk-skladniki__note {
	max-width: 900px;
	margin: 22px auto 0;
	font-family: var(--hdk-font);
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	color: #332c39;
	opacity: 0.7;
}

/* ==========================================================================
   Sekcje 18 i 19: picture-description (cytat + "Tak dziala rytual")
   Jeden uklad w dwoch wariantach: jasny z kolumna zdjecia i ciemny na
   rozmytym tle, bez zdjecia.
   ========================================================================== */

.hdk-obraz-tekst {
	position: relative;
	overflow: hidden;
	padding-block: 40px;

	/* wyjscie z kontenera .col-full motywu Shoptimizer */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

@media (min-width: 750px) {
	.hdk-obraz-tekst {
		padding-block: 72px;
	}
}

.hdk-obraz-tekst--jasna {
	background-color: #f7f4fb;
}

.hdk-obraz-tekst--ciemna {
	background-color: #3c1f47;
}

/* wariant ciemny: rozmyte zdjecie + przyciemnienie */
.hdk-obraz-tekst--ciemna::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--hdk-obraz-tekst-tlo);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(3px);
}

.hdk-obraz-tekst--ciemna::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(16, 11, 22, 0.65);
}

.hdk-obraz-tekst .hdk-obraz-tekst__kontener {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 72px;
	align-items: center;
	width: 100%;
	max-width: calc(1200px + 40px);
	margin: 0 auto;
	padding-inline: 20px;
}

.hdk-obraz-tekst--jedna-kolumna .hdk-obraz-tekst__kontener {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

@media (max-width: 989px) {
	.hdk-obraz-tekst .hdk-obraz-tekst__kontener {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

/* --- zdjecie --- */

.hdk-obraz-tekst .hdk-obraz-tekst__ramka {
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 20px;
	background-color: #e9e2f2;
	box-shadow: 0 18px 50px rgba(31, 16, 60, 0.08);
}

.hdk-obraz-tekst .hdk-obraz-tekst__obraz {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* --- tresc --- */

.hdk-obraz-tekst .hdk-obraz-tekst__tresc {
	max-width: 680px;
}

.hdk-obraz-tekst--jedna-kolumna .hdk-obraz-tekst__tresc {
	max-width: 900px;
}

.hdk-obraz-tekst .hdk-obraz-tekst__naglowek {
	margin: 0 0 20px;
	font-family: var(--hdk-font);
	font-size: clamp(24px, 3.3vw, 52px);
	font-weight: 750;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.hdk-obraz-tekst--jedna-kolumna .hdk-obraz-tekst__naglowek {
	font-size: clamp(34px, 3.3vw, 52px);
}

.hdk-obraz-tekst .hdk-obraz-tekst__lead {
	margin: 0 0 28px;
	font-family: var(--hdk-font);
	font-size: clamp(17px, 1.6vw, 25px);
	line-height: 1.48;
}

.hdk-obraz-tekst--jedna-kolumna .hdk-obraz-tekst__lead {
	font-size: clamp(19px, 1.6vw, 25px);
}

.hdk-obraz-tekst .hdk-obraz-tekst__lead p,
.hdk-obraz-tekst .hdk-obraz-tekst__highlight p {
	margin: 0;
}

/* wyrozniony akapit z pionowa kreska po lewej */
.hdk-obraz-tekst .hdk-obraz-tekst__highlight {
	position: relative;
	margin: 0;
	padding-left: 22px;
	font-family: var(--hdk-font);
	font-size: clamp(16px, 1.55vw, 23px);
	font-weight: 600;
	line-height: 1.5;
}

.hdk-obraz-tekst--jedna-kolumna .hdk-obraz-tekst__highlight {
	font-size: clamp(18px, 1.55vw, 23px);
}

.hdk-obraz-tekst .hdk-obraz-tekst__highlight::before {
	content: '';
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;
	width: 4px;
	border-radius: 999px;
}

.hdk-obraz-tekst .hdk-obraz-tekst__podpis {
	margin-top: 18px;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-style: italic;
	line-height: 1.5;
	opacity: 0.88;
}

.hdk-obraz-tekst .hdk-obraz-tekst__przycisk {
	display: inline-block;
	margin-top: 26px;
	padding: 14px 26px;
	border-radius: 12px;
	background-color: #7446c8;
	font-family: var(--hdk-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: #fff;
}

.hdk-obraz-tekst .hdk-obraz-tekst__przycisk:hover,
.hdk-obraz-tekst .hdk-obraz-tekst__przycisk:focus {
	background-color: #5f38a6;
	color: #fff;
	text-decoration: none;
}

/* --- kolory wariantow --- */

.hdk-obraz-tekst--jasna .hdk-obraz-tekst__naglowek {
	color: #17131e;
}

.hdk-obraz-tekst--jasna .hdk-obraz-tekst__lead {
	color: #292331;
}

.hdk-obraz-tekst--jasna .hdk-obraz-tekst__highlight {
	color: #7446c8;
}

.hdk-obraz-tekst--jasna .hdk-obraz-tekst__highlight::before {
	background-color: #7446c8;
}

.hdk-obraz-tekst--jasna .hdk-obraz-tekst__podpis {
	color: #625b6b;
}

.hdk-obraz-tekst--ciemna .hdk-obraz-tekst__naglowek {
	color: #f7f4fb;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.hdk-obraz-tekst--ciemna .hdk-obraz-tekst__lead {
	color: #fff;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.hdk-obraz-tekst--ciemna .hdk-obraz-tekst__highlight {
	color: #dcbaff;
}

.hdk-obraz-tekst--ciemna .hdk-obraz-tekst__highlight::before {
	background-color: #dcbaff;
}

/* ==========================================================================
   Sekcja 22: pytania i odpowiedzi (sections/hdk-faq.liquid)
   Akordeon w trybie `single` - otwarte tylko jedno pytanie naraz.
   ========================================================================== */

.hdk-faq {
	background-color: #fff;

	/* wyjscie z kontenera .col-full motywu Shoptimizer */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.hdk-faq .hdk-faq__wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 56px 20px;
}

.hdk-faq .hdk-faq__tytul {
	margin: 0 0 18px;
	font-family: var(--hdk-font);
	font-size: clamp(34px, 3.2vw, 48px);
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	color: #222;
}

/* Prawdziwa lista (ul/li), nie div z `role="list"` - `role="listitem"` na
   <article> jest niedozwolone i wywalalo audyt dostepnosci. */
.hdk-faq .hdk-faq__lista {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdk-faq .hdk-faq__item {
	overflow: hidden;
	border: 1px solid #ece9f9;
	border-radius: 16px;
	background-color: #fff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.hdk-faq .hdk-faq__pytanie {
	margin: 0;
}

.hdk-faq .hdk-faq__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 18px;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

.hdk-faq .hdk-faq__toggle:hover {
	background-color: #fbfaff;
}

.hdk-faq .hdk-faq__qtext {
	font-family: var(--hdk-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: #2d224e;
}

@media (max-width: 749px) {
	.hdk-faq .hdk-faq__qtext {
		font-size: 17px;
	}
}

.hdk-faq .hdk-faq__prefix {
	color: #5a3fb0;
	font-weight: 700;
}

.hdk-faq .hdk-faq__ikona {
	display: grid;
	flex: 0 0 36px;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background-color: #f2efff;
	color: #5a3fb0;
	transition: transform 0.25s ease;
}

.hdk-faq .hdk-faq__ikona svg {
	width: 22px;
	height: 22px;
}

.hdk-faq .hdk-faq__toggle[aria-expanded='true'] .hdk-faq__ikona {
	transform: rotate(180deg);
}

.hdk-faq .hdk-faq__odpowiedz {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, opacity 0.25s ease;
	opacity: 0;
}

.hdk-faq .hdk-faq__odpowiedz.is-open {
	opacity: 1;
}

.hdk-faq .hdk-faq__odpowiedz-inner {
	margin: 14px 0 18px;
	padding: 0 18px;
	font-family: var(--hdk-font);
	font-size: 16px;
	line-height: 1.65;
	color: #2a2a2a;
}

@media (max-width: 749px) {
	.hdk-faq .hdk-faq__odpowiedz-inner {
		font-size: 15px;
	}
}

.hdk-faq .hdk-faq__odpowiedz-prefix {
	margin-right: 6px;
	font-weight: 700;
	color: #5a3fb0;
}

@media (prefers-reduced-motion: reduce) {
	.hdk-faq .hdk-faq__odpowiedz,
	.hdk-faq .hdk-faq__ikona {
		transition: none;
	}
}

/* ==========================================================================
   Sekcja 23: opinie klientow (sections/hdk-infinity-loop.liquid)
   Siatka kart, 10 widocznych naraz, kolejne doladowuja sie przy przewijaniu.
   ========================================================================== */

.hdk-opinie {
	/* wyjscie z kontenera .col-full motywu Shoptimizer */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.hdk-opinie .hdk-opinie__wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 20px;
}

.hdk-opinie .hdk-opinie__siatka {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

@media (max-width: 989px) {
	.hdk-opinie .hdk-opinie__siatka {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 749px) {
	.hdk-opinie .hdk-opinie__siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hdk-opinie .hdk-opinie__karta {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background-color: #f4f4f4;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	transition: box-shadow 0.25s ease;
}

.hdk-opinie .hdk-opinie__karta[hidden] {
	display: none;
}

.hdk-opinie .hdk-opinie__karta:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

.hdk-opinie .hdk-opinie__obraz {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	object-position: center center;
}

@media (max-width: 749px) {
	.hdk-opinie .hdk-opinie__obraz {
		height: 320px;
	}
}

.hdk-opinie .hdk-opinie__overlay {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 16px;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.05));
}

.hdk-opinie .hdk-opinie__autor {
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}

.hdk-opinie .hdk-opinie__krotki {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-family: var(--hdk-font);
	font-size: 14px;
	line-height: 1.45;
	color: #fff;
}

/* --- karta bez zdjecia --- */

.hdk-opinie .hdk-opinie__karta--bez-obrazu {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 220px;
	padding: 20px;
	background-color: #fff;
}

.hdk-opinie .hdk-opinie__top {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hdk-opinie .hdk-opinie__awatar {
	display: flex;
	flex: 0 0 52px;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #e9ddcf;
	font-family: var(--hdk-font);
	font-size: 22px;
	font-weight: 700;
	color: #6f4e37;
}

.hdk-opinie .hdk-opinie__autor--ciemny {
	font-size: 15px;
	color: #111;
}

.hdk-opinie .hdk-opinie__tekst {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	font-family: var(--hdk-font);
	font-size: 15px;
	line-height: 1.5;
	color: #222;
}

.hdk-opinie .hdk-opinie__loader {
	padding: 20px;
	font-family: var(--hdk-font);
	font-size: 15px;
	text-align: center;
	color: #666;
}

.hdk-opinie .hdk-opinie__loader[hidden] {
	display: none;
}

/* --- okno z pelna trescia --- */

.hdk-opinie .hdk-opinie__modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 20px;
}

.hdk-opinie .hdk-opinie__modal[hidden] {
	display: none;
}

.hdk-opinie .hdk-opinie__modal-tlo {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.75);
}

.hdk-opinie .hdk-opinie__modal-okno {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	width: 100%;
	max-width: 1100px;
	max-height: 90vh;
	overflow: hidden;
	border-radius: 22px;
	background-color: #fff;
}

.hdk-opinie .hdk-opinie__modal-okno:has(.hdk-opinie__modal-obraz[hidden]) {
	grid-template-columns: minmax(0, 1fr);
	max-width: 640px;
}

@media (max-width: 749px) {
	.hdk-opinie .hdk-opinie__modal-okno {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hdk-opinie .hdk-opinie__modal-obraz {
	display: block;
	width: 100%;
	max-height: 90vh;
	object-fit: contain;
	background-color: #f4f4f4;
}

.hdk-opinie .hdk-opinie__modal-obraz[hidden] {
	display: none;
}

.hdk-opinie .hdk-opinie__modal-tresc {
	overflow-y: auto;
	padding: 28px;
}

.hdk-opinie .hdk-opinie__modal-autor {
	margin-bottom: 10px;
	font-family: var(--hdk-font);
	font-size: 20px;
	font-weight: 700;
	color: #111;
}

.hdk-opinie .hdk-opinie__modal-tekst {
	font-family: var(--hdk-font);
	font-size: 16px;
	line-height: 1.6;
	white-space: pre-line;
	color: #222;
}

.hdk-opinie .hdk-opinie__modal-x {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 1;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	font-size: 26px;
	line-height: 1;
	color: #111;
	cursor: pointer;
}

/* ==========================================================================
   Sekcja 24: plywajace przyciski nawigacji (sections/floating-buttons.liquid)
   Prawy dolny rog, pokazuja sie po przewinieciu 300px.
   ========================================================================== */

.hdk-przyciski {
	position: fixed;
	right: 15px;
	bottom: 20px;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

@media (min-width: 750px) {
	.hdk-przyciski {
		right: 30px;
		bottom: 30px;
	}
}

.hdk-przyciski.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hdk-przyciski .hdk-przyciski__lista {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.hdk-przyciski .hdk-przyciski__przycisk {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 14px;
	border: 1px solid #d9e2d7;
	border-radius: 22px;
	background-color: #fff;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	color: #2d382e;
	transition: background-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 750px) {
	.hdk-przyciski .hdk-przyciski__przycisk {
		font-size: 14px;
	}
}

.hdk-przyciski .hdk-przyciski__przycisk:hover,
.hdk-przyciski .hdk-przyciski__przycisk:focus {
	background-color: #2d382e;
	color: #fff;
	text-decoration: none;
}

.hdk-przyciski .hdk-przyciski__przycisk svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

@media (min-width: 750px) {
	.hdk-przyciski .hdk-przyciski__przycisk svg {
		width: 20px;
		height: 20px;
	}
}

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

/* ==========================================================================
   Karty produktow w listingach WooCommerce (sklep, kategoria, wyszukiwanie)
   Ten sam wyglad co w galeriach na stronie glownej - patrz
   woocommerce/content-product.php.
   ========================================================================== */

/*
 * Shoptimizer daje `ul.products` szerokosc `calc(100% + 30px)` z ujemnymi
 * marginesami (rynny miedzy kolumnami) - przy naszej siatce grid to tylko
 * wypychalo liste 30px poza kolumne tresci.
 */
.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 749px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/*
 * Sekcja "Sprawdz cala kolekcje": Shoptimizer robi z niej karuzele przewijana
 * w poziomie (`display: flex` + `overflow-x: scroll`), a wzorzec ma tam zwykla
 * siatke - 4 kolumny, na mobile 2 (`carousel_on_mobile: false`).
 *
 * To nie kosmetyka: w karuzeli karta nie ma od czego liczyc szerokosci, bo
 * Shoptimizer ustawia ja na `li.product`, a nasz szablon renderuje
 * `article.hdk-produkt`. Karta rozpychala sie wiec do szerokosci min-content
 * rzedu tagow (484px w oknie 408px) i cala strona dostawala poziomy suwak.
 */
.woocommerce .related.products ul.products,
.related.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: visible;
}

@media (max-width: 749px) {
	.woocommerce .related.products ul.products,
	.related.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Rzad tagow sie nie zawija, wiec jego szerokosc min-content jest ogromna.
 * Bez `min-width: 0` karta w kazdym ukladzie flex/grid probuje ja pomiescic
 * zamiast przyciac - a tagi i tak maja wlasne przewijanie.
 */
.hdk-produkt.hdk-produkt,
.hdk-produkt .hdk-produkt__tresc,
.hdk-produkt .hdk-produkt__tagi {
	min-width: 0;
}

/* Shoptimizer ustawia szerokosci i marginesy na li.product - zerujemy */
.woocommerce ul.products li.product,
ul.products li.product {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
}

/*
 * Ikony ze snippetu WPCode w listingu - snippet jest wylaczony, ale gdyby
 * ktos go wskrzesil, karta ma wlasne skladniki na zdjeciu i nie ma tam
 * miejsca na drugi komplet.
 */
.hdk-produkt .toka-icons-overlay,
.hdk-produkt .product-badges,
.hdk-produkt .hdk-cart-heat {
	display: none;
}

/* ==========================================================================
   Ikona koszyka poza strona glowna: ten sam kontur torby, ale fioletowy
   ========================================================================== */

.site-header-cart .cart-contents {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #7446c8;
}

.site-header-cart .cart-contents .amount,
.site-header-cart .cart-contents .woocommerce-Price-amount {
	display: none;
}

.site-header-cart .cart-contents::before {
	content: '';
	display: block;
	width: 22px;
	height: 22px;
	background-color: #7446c8;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3.392 6.875h13.216v8.016c0 .567-.224 1.112-.624 1.513-.4.402-.941.627-1.506.627H5.522a2.13 2.13 0 0 1-1.506-.627 2.15 2.15 0 0 1-.624-1.513zM8.818 2.969h2.333c.618 0 1.211.247 1.649.686a2.35 2.35 0 0 1 .683 1.658v1.562H6.486V5.313c0-.622.246-1.218.683-1.658a2.33 2.33 0 0 1 1.65-.686'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3.392 6.875h13.216v8.016c0 .567-.224 1.112-.624 1.513-.4.402-.941.627-1.506.627H5.522a2.13 2.13 0 0 1-1.506-.627 2.15 2.15 0 0 1-.624-1.513zM8.818 2.969h2.333c.618 0 1.211.247 1.649.686a2.35 2.35 0 0 1 .683 1.658v1.562H6.486V5.313c0-.622.246-1.218.683-1.658a2.33 2.33 0 0 1 1.65-.686'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.site-header-cart .count {
	position: absolute !important;
	top: 3px !important;
	right: 1px !important;
	bottom: auto !important;
	left: auto !important;
	min-width: 17px !important;
	width: auto !important;
	height: 17px !important;
	padding: 0 4px !important;
	border: 0 !important;
	border-radius: 100px !important;
	background-color: #7446c8 !important;
	box-sizing: border-box;
	font-family: var(--hdk-font);
	font-size: 10px !important;
	font-weight: 600;
	line-height: 17px !important;
	text-align: center;
	color: #fff !important;
}

/* motyw ustawia `display: block` z wyzsza specyficznoscia */
.site-header-cart.hdk-cart-empty .count {
	display: none !important;
}

/*
 * Shoptimizer dorysowuje nad licznikiem "uchwyt" torby (`.count:after`:
 * luk z pomaranczowa ramka). Przy naszej ikonie koszyka to luzny artefakt
 * obok liczby (zgloszenie wlascicielki 11.09.2026). Specyficznosc wyzsza
 * niz w main.min.css, bo nasz arkusz laduje sie przed arkuszem motywu.
 */
.site-header .shoptimizer-cart a.cart-contents .count::after,
.site-header .shoptimizer-cart a.cart-contents:hover .count::after,
.site-header-cart a.cart-contents .count::after {
	display: none !important;
	content: none !important;
}

/* Archiwum WooCommerce bez widgetow w sidebarze - tresc na pelna szerokosc */
@media (min-width: 993px) {
	body.hdk-bez-sidebara .content-area {
		width: 100%;
		float: none;
	}
}

/* ==========================================================================
   Strona "O nas" (templates/page.o-nas.json -> hdk-about-us)
   ========================================================================== */

.hdk-o-nas {
	padding: 44px 20px;
	background-color: #fff;

	/* wyjscie z kontenera .col-full motywu Shoptimizer */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

@media (min-width: 750px) {
	.hdk-o-nas {
		padding-block: 72px;
	}
}

.hdk-o-nas .hdk-o-nas__wrap {
	max-width: 1180px;
	margin: 0 auto;
}

/* --- naglowek strony --- */

.hdk-o-nas .hdk-o-nas__hero {
	margin-bottom: 56px;
	text-align: center;
}

.hdk-o-nas .hdk-o-nas__eyebrow {
	display: inline-block;
	margin-bottom: 12px;
	padding: 7px 14px;
	border-radius: 999px;
	background-color: #a25ebb;
	font-family: var(--hdk-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.hdk-o-nas .hdk-o-nas__tytul {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: clamp(34px, 4vw, 60px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: #2a211c;
}

.hdk-o-nas .hdk-o-nas__podtytul {
	max-width: 760px;
	margin: 18px auto 0;
	font-family: var(--hdk-font);
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.65;
	color: #43224f;
}

.hdk-o-nas .hdk-o-nas__podtytul p {
	margin: 0;
}

/* --- bloki tresci --- */

.hdk-o-nas .hdk-o-nas__bloki {
	display: grid;
	gap: 56px;
}

.hdk-o-nas .hdk-o-nas__blok {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: center;
}

/* zdjecie raz z prawej, raz z lewej - jak we wzorcu */
.hdk-o-nas .hdk-o-nas__blok--obraz-lewo .hdk-o-nas__tresc {
	order: 2;
}

@media (max-width: 989px) {
	.hdk-o-nas .hdk-o-nas__blok {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.hdk-o-nas .hdk-o-nas__blok--obraz-lewo .hdk-o-nas__tresc {
		order: 0;
	}
}

.hdk-o-nas .hdk-o-nas__zrodlo {
	display: block;
	margin-bottom: 10px;
	font-family: var(--hdk-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	color: #43224f;
}

.hdk-o-nas .hdk-o-nas__zrodlo:hover {
	text-decoration: underline;
}

.hdk-o-nas .hdk-o-nas__blok-tytul {
	margin: 0 0 14px;
	font-family: var(--hdk-font);
	font-size: clamp(26px, 2.6vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	color: #2a211c;
}

.hdk-o-nas .hdk-o-nas__tekst {
	font-family: var(--hdk-font);
	font-size: 16px;
	line-height: 1.7;
	color: #332821;
}

.hdk-o-nas .hdk-o-nas__tekst p {
	margin: 0 0 12px;
}

.hdk-o-nas .hdk-o-nas__tekst p:last-child {
	margin-bottom: 0;
}

.hdk-o-nas .hdk-o-nas__tekst ul {
	margin: 0 0 12px;
	padding-left: 1.3em;
}

.hdk-o-nas .hdk-o-nas__tekst li {
	margin-bottom: 4px;
}

.hdk-o-nas .hdk-o-nas__obraz-wrap {
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 26px;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

.hdk-o-nas .hdk-o-nas__obraz {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- blok CTA --- */

.hdk-o-nas .hdk-o-nas__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 64px;
	padding: 34px;
	border-radius: 26px;
	background-color: #a25ebb;
}

.hdk-o-nas .hdk-o-nas__cta-tytul {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
}

.hdk-o-nas .hdk-o-nas__cta-tekst {
	margin-top: 6px;
	font-family: var(--hdk-font);
	font-size: 17px;
	line-height: 1.5;
	color: #fff;
}

.hdk-o-nas .hdk-o-nas__cta-tekst p {
	margin: 0;
}

.hdk-o-nas .hdk-o-nas__przycisk {
	display: inline-block;
	padding: 14px 24px;
	border-radius: 999px;
	background-color: #e8bbfb;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	color: #1f1f1f;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hdk-o-nas .hdk-o-nas__przycisk:hover,
.hdk-o-nas .hdk-o-nas__przycisk:focus {
	background-color: #1f1f1f;
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   Strona "Kontakt" (templates/page.contact.json)
   ========================================================================== */

.hdk-strona {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 20px 0;
	text-align: center;
}

.hdk-strona .hdk-strona__tytul {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: clamp(32px, 3.4vw, 48px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #000;
}

.hdk-strona .hdk-strona__tresc {
	margin-top: 24px;
	font-family: var(--hdk-font);
	font-size: 16px;
	line-height: 1.6;
	color: #332c39;
}

.hdk-kontakt {
	padding: 32px 20px 56px;
}

.hdk-kontakt .hdk-kontakt__karta {
	display: grid;
	gap: 16px;
	max-width: 426px;
	margin: 0 auto;
}

.hdk-kontakt .hdk-kontakt__naglowek {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: #000;
}

.hdk-kontakt .hdk-kontakt__pozycja {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
	background-color: #f7f7f7;
}

.hdk-kontakt .hdk-kontakt__ikona {
	flex: 0 0 24px;
	color: #43224f;
}

.hdk-kontakt .hdk-kontakt__ikona svg {
	display: block;
	width: 24px;
	height: 24px;
}

.hdk-kontakt .hdk-kontakt__etykieta {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #000;
}

.hdk-kontakt .hdk-kontakt__wartosc {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: 16px;
	line-height: 1.5;
	color: #000;
}

.hdk-kontakt .hdk-kontakt__link {
	font-family: var(--hdk-font);
	font-size: 16px;
	line-height: 1.5;
	color: #43224f;
	overflow-wrap: anywhere;
}

.hdk-kontakt .hdk-kontakt__link:hover {
	color: #a25ebb;
}

.hdk-kontakt .hdk-kontakt__przycisk {
	display: inline-block;
	margin-top: 10px;
	padding: 10px 20px;
	border-radius: 6px;
	background-color: #43224f;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	color: #fff;
}

.hdk-kontakt .hdk-kontakt__przycisk:hover,
.hdk-kontakt .hdk-kontakt__przycisk:focus {
	background-color: #a25ebb;
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   Spojnosc przyciskow: glowny "Dodaj do koszyka" na stronie produktu
   mial zaokraglenie 4px, a te same przyciski na kartach 40px (pigulka).
   ========================================================================== */

.single_add_to_cart_button.button,
.woocommerce div.product form.cart .button {
	border-radius: 40px;
}

/* dopisek w sufiksie ceny WooCommerce - rowna sie do `hdk-produkt__cena-dopisek` */
.hdk-produkt .hdk-produkt__cena .after-price {
	font-size: 14px;
	font-weight: 400;
	opacity: 0.75;
}

/* na waskiej karcie (dwie kolumny na mobile) cena z dlugim sufiksem lamala sie na 3 linie */
@media (max-width: 749px) {
	.hdk-produkt .hdk-produkt__cena {
		font-size: 18px;
	}

	.hdk-produkt .hdk-produkt__tytul {
		font-size: 16px;
	}

	/*
	 * Dopisek przy cenie idzie z sufiksu ceny WooCommerce (`.after-price`),
	 * wiec dziedziczyl 18px i sam zajmowal dwie linie. Rownamy go do
	 * `hdk-produkt__cena-dopisek`, ktory niesie dokladnie ten sam rodzaj tresci.
	 */
	.hdk-produkt .hdk-produkt__cena .after-price {
		font-size: 12px;
	}

	/* na karcie szerokiej 167px trzy nazwy zawijaja sie na dwie linie */
	.hdk-produkt .hdk-produkt__skladnik {
		padding: 2px 6px;
		font-size: 10px;
	}

	/*
	 * Pigulki mniejsze niz na desktopie: rzad przesuwa sie sam, wiec nie musi
	 * byc duzym celem dla palca, a na karcie szerokiej 167px mniejszy napis
	 * pozwala zobaczyc wiecej tagu naraz.
	 */
	.hdk-produkt .hdk-produkt__tagi {
		gap: 5px;
	}

	.hdk-produkt .hdk-produkt__tag {
		padding: 4px 9px;
		font-size: 12px;
	}

	.hdk-produkt .hdk-produkt__tresc {
		gap: 8px;
	}
}

/* ==========================================================================
   Strona produktu (inc/strona-produktu.php)
   Wymiary z wzorca: bloki `product-ingredients-tags` i `upsell-products`
   w `shopify theme/templates/product.json`.
   ========================================================================== */

/* --- tagi wlasciwosci nad tytulem --- */

/*
 * Tagi nad tytulem jada w jednym rzedzie jak na kafelkach w katalogu:
 * automat przesuwa je co kilka sekund, palcem przewija sie bez konca
 * (skrypt karuzeli tagow w shopify-sections.js obejmuje tez ten rzad).
 */
.single-product .hdk-single-tagi {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.single-product .hdk-single-tagi::-webkit-scrollbar {
	display: none;
}

.single-product .hdk-single-tag {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	margin: 0;
	padding: 0 13px;
	border-radius: 18px;
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.1;
	color: #fff;
	white-space: nowrap;
}

/* --- skladniki glowne pod tytulem --- */

.single-product .hdk-single-skladniki {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 4px 0 0;
}

.single-product .hdk-single-skladniki__etykieta {
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 500;
	color: #666;
}

.single-product .hdk-single-skladniki__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ta sama pigulka co w karuzeli skladnikow, tylko mniejsza */
.single-product .hdk-single-skladnik {
	margin: 0;
	padding: 5px 12px;
	border: 1px solid #dcd2e2;
	border-radius: 999px;
	background-color: #fff;
	font-family: var(--hdk-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: #43224f;
}

/* --- cena, licznik, informacje zakupowe --- */

/*
 * Uzytkownik chce duza cene - wzorzec ma tu 1rem, my 30px. Selektory musza
 * brac tylko bezposrednie dziecko `.summary`: CommerceKit opakowuje w
 * `.price-tag` takze ceny w upsellu, ktory siedzi w tej samej kolumnie.
 */
.single-product div.product .summary > p.price,
.single-product div.product .summary > .price-tag {
	margin: 4px 0 0;
	font-family: var(--hdk-font);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: #43224f;
}

.single-product div.product .summary > .price .woocommerce-Price-amount,
.single-product div.product .summary > .price-tag .woocommerce-Price-amount,
.single-product div.product .summary > .price bdi,
.single-product div.product .summary > .price-tag bdi {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.single-product div.product .summary > .price del,
.single-product div.product .summary > .price-tag del {
	font-size: 20px;
	font-weight: 400;
}

.single-product div.product .summary > .price .after-price,
.single-product div.product .summary > .price-tag .after-price,
.single-product div.product .summary > .price small,
.single-product div.product .summary > .price-tag small {
	font-size: 14px;
	font-weight: 400;
	opacity: 0.75;
}

.single-product .hdk-single-licznik {
	margin: 10px 0 0;
	font-family: var(--hdk-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: #666;
}

.single-product .hdk-single-licznik strong {
	font-weight: 700;
	color: #43224f;
}

/* wymiary z bloku `product-sale-points`: ikona 20, odstepy 6 i 8, tekst 14/1.4 */
.single-product .hdk-single-informacje {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.single-product .hdk-single-informacja {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #1a1a1a;
}

.single-product .hdk-single-informacja .hdk-ikona {
	flex: 0 0 auto;
	color: #1a1a1a;
}

/* --- cztery kafelki (grupa "Values" ze wzorca) --- */

.single-product .hdk-single-kafelki {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Wzorzec daje kafelkom #f7f7f7, ale u nas cala kolumna z opisem siedzi na
 * mobile na `col-full` w kolorze #f8f8f8 - kafelki znikaly w tle. Stad jasny
 * liliowy odcien i obwodka, te same, ktore niosa pigulki skladnikow.
 */
.single-product .hdk-single-kafelek {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 28px 12px;
	border: 1px solid #e6dceb;
	border-radius: 12px;
	background-color: #f6f2f8;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: #1a1a1a;
}

.single-product .hdk-single-kafelek .hdk-ikona {
	color: #43224f;
}

/* --- rozwijane sekcje (blok `accordion` ze wzorca) --- */

.single-product .hdk-akordeon {
	margin: 20px 0 0;
	border-top: 1px solid #e6e0ea;
}

.single-product .hdk-akordeon__wiersz {
	border-bottom: 1px solid #e6e0ea;
}

.single-product .hdk-akordeon__naglowek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	cursor: pointer;
	font-family: var(--hdk-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	color: #1a1a1a;
	list-style: none;
}

/* Safari rysuje wlasny trojkat na <summary> - chowamy go i dajemy swoj plus */
.single-product .hdk-akordeon__naglowek::-webkit-details-marker {
	display: none;
}

.single-product .hdk-akordeon__naglowek::after {
	content: '';
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(#1a1a1a, #1a1a1a) center/14px 1.5px no-repeat,
		linear-gradient(#1a1a1a, #1a1a1a) center/1.5px 14px no-repeat;
	-webkit-mask-image: none;
	mask-image: none;
	transition: transform 0.2s ease;
}

.single-product .hdk-akordeon__wiersz[open] .hdk-akordeon__naglowek::after {
	transform: rotate(45deg);
}

.single-product .hdk-akordeon__tresc {
	padding: 0 0 16px;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #333;
}

.single-product .hdk-akordeon__tresc p {
	margin: 0 0 8px;
}

.single-product .hdk-akordeon__tresc p:last-child {
	margin-bottom: 0;
}

/* domyslny link jest niebieski - w tresci sekcji ma byc kolor marki */
.single-product .hdk-akordeon__tresc a {
	color: #43224f;
	text-decoration: underline;
}

/* --- upsell "Dobierz dodatki (opcjonalnie)" --- */

.single-product .hdk-upsell {
	width: 100%;
	margin: 20px 0;
}

.single-product .hdk-upsell__naglowek {
	margin: 0 0 10px;
	font-family: var(--hdk-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	color: #1e1e1e;
}

.single-product .hdk-upsell__siatka {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.single-product .hdk-upsell__karta {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.single-product .hdk-upsell__media {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 14px;
	background: #f4f4f4;
	aspect-ratio: 1 / 1;
}

.single-product .hdk-upsell__link {
	display: block;
	width: 100%;
	height: 100%;
}

.single-product .hdk-upsell__zdjecie {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.single-product .hdk-upsell__karta:hover .hdk-upsell__zdjecie {
	transform: scale(1.04);
}

/*
 * Plus jest guzikiem "dodaj do koszyka", wiec ma klasy Woo i lapie na siebie
 * caly styl przyciskow Shoptimizera - stad tyle nadpisan.
 */
.single-product .hdk-upsell__plus.button {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	min-width: 0;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #43224f;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
	color: #fff;
	font-size: 0;
	line-height: 1;
	transition: transform 0.22s ease, background 0.22s ease;
}

.single-product .hdk-upsell__plus.button:hover,
.single-product .hdk-upsell__plus.button:focus {
	background: #43224f;
	color: #fff;
	transform: scale(1.06);
}

.single-product .hdk-upsell__plus svg {
	display: block;
	width: 22px;
	height: 22px;
}

/* po dodaniu Woo dokleja link "Wyswietl koszyk" - nie w tym rogu */
.single-product .hdk-upsell__media .added_to_cart {
	display: none;
}

.single-product .hdk-upsell__cena {
	font-family: var(--hdk-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: #1e1e1e;
}

.single-product .hdk-upsell__cena .price-tag,
.single-product .hdk-upsell__cena .woocommerce-Price-amount,
.single-product .hdk-upsell__cena bdi {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.single-product .hdk-upsell__cena .after-price,
.single-product .hdk-upsell__cena small {
	display: none;
}

@media (max-width: 749px) {
	.single-product .hdk-single-skladnik {
		padding: 4px 10px;
		font-size: 12px;
	}

	.single-product .hdk-single-kafelek {
		padding: 22px 10px;
		font-size: 13px;
	}

	.single-product div.product .summary > p.price,
	.single-product div.product .summary > .price-tag {
		font-size: 26px;
	}
}

/* ==========================================================================
   Koszyk: sekcja zaufania w mini-koszyku i przecena przy paczkomacie.
   Przeniesione ze snippetow WPCode 7715 i 8321 (JS w shopify-sections.js).
   ========================================================================== */

.mini-cart-trust {
	margin: 8px 0 10px;
	padding: 8px 10px;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	background: #f7f7f7;
}

.mini-cart-trust .trust-item {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 3px 0;
}

.mini-cart-trust .trust-icon {
	font-size: 14px;
	line-height: 1;
	color: #4caf50;
}

.mini-cart-trust .trust-text {
	font-size: 12px;
	line-height: 1.4;
	color: #444;
}

.mini-cart-trust .trust-text strong {
	font-weight: 600;
	color: #e6007e;
}

.mini-cart-company {
	margin: 8px 0 0;
	font-size: 11px;
	text-align: center;
	color: #999;
}

.hdk-przecena__stara {
	margin-right: 6px;
	opacity: 0.6;
}

.hdk-przecena__odznaka {
	margin-right: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	background: #4caf50;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}

/* ==========================================================================
   Etykieta promocji na zdjeciu produktu (CommerceKit `.ckit-badge`).
   Domyslnie zaokraglenie 3px i przezroczystosc 0.8 - nie z tej samej rodziny
   co reszta strony. Tu ksztalt i typografia; kolory ida z ustawien wtyczki
   (CommerceKit → Badges) inline na elemencie, wiec `background-color` ponizej
   jest tylko zapasem dla etykiet bez ustawionego koloru.
   ========================================================================== */

.ckit-badge_wrapper .ckit-badge,
.ckit-badge {
	padding: 5px 12px;
	border-radius: 999px;
	opacity: 1;
	background-color: #43224f;
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}

/* ==========================================================================
   "Promocja!" (`span.onsale`) na stronie produktu.
   Shoptimizer renderuje to jako goly zielony tekst 14px, w tym samym miejscu,
   w ktorym u nas leza tagi wlasciwosci (nad tytulem) - stad ta sama pigulka,
   w rozowej czerwieni z palety tagow. W listingach etykieta sie nie pojawia:
   nasza karta nie wywoluje `woocommerce_show_product_sale_flash`.
   ========================================================================== */

.single-product div.product .summary > span.onsale,
.single-product div.product .summary > .onsale {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	margin: 0 0 4px;
	padding: 0 13px;
	border-radius: 18px;
	background-color: #c93756;
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.1;
	text-transform: none;
	color: #fff;
	white-space: nowrap;
}

/* ==========================================================================
   Przyklejony pasek "Dodaj do koszyka" na stronie produktu.
   Odpowiednik `sticky-add-to-cart` ze wzorca: miniatura, nazwa, cena, przycisk.
   ========================================================================== */

/*
 * Ukrycie robi `visibility`, nie `display`/`hidden` - dzieki temu pasek
 * moze zjechac w dol animacja, a schowany nie jest czytany przez czytniki
 * ekranu ani klikalny.
 */
.hdk-pasek {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	border-top: 1px solid #e6e0ea;
	background: #fff;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
	visibility: hidden;
	transform: translateY(100%);
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.hdk-pasek.is-widoczny {
	visibility: visible;
	transform: translateY(0);
	transition: transform 0.25s ease, visibility 0s linear 0s;
}

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

.hdk-pasek .hdk-pasek__srodek {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1170px;
	margin: 0 auto;
	padding: 10px 16px;
}

.hdk-pasek .hdk-pasek__media {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 8px;
	background: #f4f4f4;
}

.hdk-pasek .hdk-pasek__zdjecie {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hdk-pasek .hdk-pasek__opis {
	flex: 1 1 auto;
	min-width: 0;
}

.hdk-pasek .hdk-pasek__tytul {
	margin: 0;
	overflow: hidden;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #1a1a1a;
}

.hdk-pasek .hdk-pasek__cena {
	font-family: var(--hdk-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #43224f;
}

/* dopisek i "z VAT" rozbijaly pasek na dwie linie */
.hdk-pasek .hdk-pasek__cena .after-price,
.hdk-pasek .hdk-pasek__cena small,
.hdk-pasek .hdk-pasek__cena del {
	display: none;
}

.hdk-pasek .hdk-pasek__cena .price-tag,
.hdk-pasek .hdk-pasek__cena .woocommerce-Price-amount,
.hdk-pasek .hdk-pasek__cena bdi {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.hdk-pasek .hdk-pasek__przycisk.button {
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 24px;
	border: 0;
	border-radius: 40px;
	background-color: #43224f;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: none;
	color: #fff;
}

.hdk-pasek .hdk-pasek__przycisk.button:hover,
.hdk-pasek .hdk-pasek__przycisk.button:focus {
	background-color: #2f1738;
	color: #fff;
}

/* Woo dokleja po dodaniu link "Wyswietl koszyk" - w pasku nie ma na niego miejsca */
.hdk-pasek .added_to_cart {
	display: none;
}

/* "Kup i zaplac" - tylko na telefonie (patrz blok mobilny nizej). */
.hdk-pasek .hdk-pasek__kup.button {
	display: none;
}

@media (max-width: 749px) {
	.hdk-pasek .hdk-pasek__srodek {
		gap: 10px;
		padding: 8px 12px;
	}

	.hdk-pasek .hdk-pasek__media {
		width: 42px;
		height: 42px;
	}

	.hdk-pasek .hdk-pasek__tytul {
		font-size: 13px;
	}

	/*
	 * Telefon: zamiast miniatury, nazwy i ceny dwa rowne przyciski -
	 * "Kup i zaplac" (kasa) po lewej i "Dodaj do koszyka" po prawej.
	 * Pasek o ~10% wyzszy niz poprzednio (59 -> ~65px): wiekszy padding.
	 */
	.hdk-pasek .hdk-pasek__media,
	.hdk-pasek .hdk-pasek__opis {
		display: none;
	}

	.hdk-pasek .hdk-pasek__srodek {
		gap: 10px;
		padding: 11px 12px;
	}

	.hdk-pasek .hdk-pasek__kup.button,
	.hdk-pasek .hdk-pasek__przycisk.button {
		display: block;
		flex: 1 1 0;
		margin: 0;
		padding: 13px 12px;
		border-radius: 3px;
		font-family: var(--hdk-font);
		font-size: 14px;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
		text-transform: none;
		white-space: nowrap;
	}

	.hdk-pasek .hdk-pasek__kup.button {
		border: 1px solid #43224f;
		background: #fff;
		color: #43224f;
	}

	.hdk-pasek .hdk-pasek__kup.button:hover,
	.hdk-pasek .hdk-pasek__kup.button:focus {
		background: #f4eef7;
		color: #43224f;
	}

	/*
	 * Telefon: pasek widoczny od wejscia, bez czekania na przewiniecie
	 * (decyzja wlascicielki 8.09.2026). Skrypt nadal przelacza `is-widoczny`,
	 * ale tu ta klasa nie ma znaczenia. Zeby pasek nie zaslanial stopki
	 * i przelacznika wersji na samym dole, strona dostaje dolny margines
	 * o wysokosci paska - dokladna wartosc wpisuje skrypt do zmiennej
	 * `--hdk-pasek-wysokosc`, 68px to zapas na czas przed jego startem.
	 */
	.hdk-pasek {
		visibility: visible;
		transform: none;
		transition: none;
	}

	body.single-product {
		padding-bottom: var(--hdk-pasek-wysokosc, 68px);
	}
}

/* ==========================================================================
   Tla sekcji w dwoch rozmiarach (patrz inc/tla-sekcji.php).
   Sekcje wypisuja `--nazwa` (pelny plik) i `--nazwa-m` (800px). Ponizej 750px
   podmieniamy zmienna, wiec telefon pobiera tylko mniejszy plik - hero schodzi
   ze 153 kB do 46 kB, tlo manifestacji z 357 kB do 179 kB.
   ========================================================================== */

.hdk-hero {
	background-image: var(--hdk-hero-tlo);
}

.hdk-video-hero {
	background-image: var(--hdk-video-tlo);
}

.hdk-manifestacja {
	background-image: var(--hdk-manifestacja-tlo);
}

@media (max-width: 749px) {
	.hdk-hero {
		background-image: var(--hdk-hero-tlo-m);
	}

	.hdk-video-hero {
		background-image: var(--hdk-video-tlo-m);
	}

	.hdk-manifestacja {
		background-image: var(--hdk-manifestacja-tlo-m);
	}

	.hdk-roznice--ciemna::before {
		background-image: var(--hdk-roznice-tlo-m);
	}

	.hdk-gabka::before {
		background-image: var(--hdk-gabka-tlo-m);
	}

	.hdk-obraz-tekst--ciemna::before {
		background-image: var(--hdk-obraz-tekst-tlo-m);
	}
}


/* Krycie na drugoplanowych tekstach podniesione do progu WCAG (4,5:1 na bialym):
   nota pod skladnikami 0,58 -> 0,7, lacinska nazwa 0,6 -> 0,72, podpis przy
   zdjeciu 0,65 -> 0,88. Teksty nadal czytaja sie jako drugoplanowe. */

/* ==========================================================================
   Przekreslona cena - krycie tylko raz.
   Krycie ustawione i na <del>, i na spanie w srodku mnozy sie (0,7 x 0,7 = 0,49),
   przez co stara cena schodzila do kontrastu 3,4:1 - ponizej progu WCAG.
   Teraz jedna regula na samym <del>: 0,7 to 5,3:1, a cena nadal czyta sie
   jako drugoplanowa.
   ========================================================================== */

.hdk-produkt .hdk-produkt__cena del,
.single-product div.product .summary > .price del,
.single-product div.product .summary > .price-tag del {
	opacity: 0.7;
}

/* ==========================================================================
   Kasa: pole daty urodzin.
   Motyw stylizuje `input[type=text]`, `email` i `tel`, ale nie `date` - bez tego
   pole ma domyslna ramke przegladarki i jest o 15px nizsze od sasiadow.
   ========================================================================== */

.woocommerce form .form-row.hdk-urodziny input[type="date"] {
	width: 100%;
	height: 40px;
	padding: 0 11px;
	border: 1px solid #d2d6dc;
	border-radius: 5px;
	background-color: #fff;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: #444;
}

.woocommerce form .form-row.hdk-urodziny input[type="date"]:focus {
	border-color: #43224f;
	outline: 0;
}

.woocommerce form .form-row.hdk-urodziny .description {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.45;
	color: #666;
}

/* Zgody i checkboxy w kasie: WooCommerce nie stylizuje wlasnych pol typu checkbox
   inaczej niz motyw swoich, wiec ustawiamy odstepy i wielkosc klikalna sami. */
.woocommerce form .form-row.hdk-zgoda-newsletter,
.woocommerce form .form-row.hdk-faktura {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 18px;
}

.woocommerce form .form-row.hdk-zgoda-newsletter label,
.woocommerce form .form-row.hdk-faktura label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-weight: 400;
	line-height: 1.45;
	cursor: pointer;
}

.woocommerce form .form-row.hdk-zgoda-newsletter input[type="checkbox"],
.woocommerce form .form-row.hdk-faktura input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: #43224f;
}

/* Przy checkboxach dopisek "(opcjonalne)" tylko przeszkadza - zgoda z definicji
   jest dobrowolna, a przy "Chcę fakturę" brzmi jak czesc pytania. */
.woocommerce form .form-row.hdk-zgoda-newsletter .optional,
.woocommerce form .form-row.hdk-faktura .optional {
	display: none;
}

/* Nazwa firmy i NIP tylko dla tych, ktore chca fakture. Chowamy stylem, a nie
   skryptem, zeby pola nie mrugnely przy wczytywaniu strony. */
.woocommerce form .form-row.hdk-blok-firmowy {
	display: none;
}

.woocommerce form.hdk-faktura-tak .form-row.hdk-blok-firmowy {
	display: block;
}

/* ==========================================================================
   Kasa: wybor paczkomatu (wtyczka inpost-for-woocommerce).
   Wtyczka wstawia przycisk w osobny wiersz tabeli podsumowania, w prawa kolumne,
   przez co lądował jako waski zolty prostokat obok pustego pola - z bialym
   tekstem na zoltym tle (kontrast 1,7:1) i bez kursora wskazujacego.
   Przenosimy go skryptem pod liste metod wysylki, czyli tam, gdzie nalezy,
   i ubieramy jak kazdy inny przycisk sklepu.
   ========================================================================== */

.hdk-paczkomat {
	margin-top: 14px;
}

.hdk-paczkomat #easypack_show_geowidget {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: none;
	min-height: 46px;
	margin: 0;
	padding: 12px 20px;
	border-radius: 40px;
	background-color: #43224f !important;
	color: #fff;
	font-family: var(--hdk-font);
	/* Wtyczka wymusza 19px i cien - stad `!important` po naszej stronie. */
	font-size: 15px !important;
	font-weight: 700;
	line-height: 1.3;
	box-shadow: none !important;
	cursor: pointer;
}

.hdk-paczkomat #easypack_show_geowidget:hover,
.hdk-paczkomat #easypack_show_geowidget:focus-visible {
	background-color: #5a3268 !important;
}

.hdk-paczkomat #easypack_show_geowidget:focus-visible {
	outline: 2px solid #43224f;
	outline-offset: 2px;
}

/* Blok z wybranym punktem - domyslnie ma zolta ramke 3px i wlasne marginesy. */
.hdk-paczkomat #selected-parcel-machine,
.hdk-paczkomat #easypack_selected_point_data {
	min-width: 0;
	margin: 12px 0 0;
	padding: 12px 14px;
	border: 1px solid #ece9f9;
	border-radius: 12px;
	background-color: #faf8fc;
	font-size: 14px;
	line-height: 1.45;
}

/* ==========================================================================
   Stopka: logotypy metod platnosci (widget text-13 "Platnosci obsluguje")
   Google Merchant Center wymaga, zeby metody platnosci byly widoczne przed
   kasa - takze jako tekst dla robotow (alt + podpis). Wczesniej siedzial tu
   jeden obrazek bez alt. Kafelki sa biale na ciemnej stopce; znaki Visa,
   Mastercard, Maestro i Autopay to oryginalne pliki z wtyczek, reszta to
   plakietki tekstowe (assets/images/platnosci/).
   ========================================================================== */

.hdk-platnosci {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdk-platnosci li {
	margin: 0;
	padding: 0;
}

.hdk-platnosci img {
	display: block;
	height: 32px;
	width: auto;
	padding: 4px 8px;
	border-radius: 6px;
	background: #fff;
	box-sizing: border-box;
}

.hdk-platnosci .hdk-platnosci__lista {
	flex: 1 0 100%;
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	opacity: .8;
}

/* ==========================================================================
   Kasa: podpowiedz o pobraniu (inc/kasa-platnosc.php)
   Ostatnia pozycja listy metod platnosci, gdy wybrana wysylka nie dopuszcza
   pobrania. Jedno zdanie, bez radia i bez znaku, tlo #f8f8f8, wygaszony tekst.
   ========================================================================== */

.woocommerce-checkout #payment ul.wc_payment_methods li.hdk-pobranie-podpowiedz {
	display: block;
	padding: 14px 16px;
	background: #f8f8f8;
	color: #5a5566;
	font-size: .92rem;
	line-height: 1.5;
	cursor: default;
}

/* ==========================================================================
   Kasa: lista kanalow platnosci Autopay (wtyczka platnosci-online-blue-media).
   Dwa problemy naraz:
   1. Wtyczka nadaje swojej liscie klase `woocommerce-shipping-methods`, wiec
      motyw maluje jej swoje kolko od metod wysylki - obok prawdziwego radia.
      Stad dwie kropki przy kazdym kanale.
   2. Wlasny CSS wtyczki ustawia `min-height: 100px` na etykiecie i `height: 80px`
      na logo, przez co jeden kanal zajmowal 158px i lista rozjezdzala sie
      na pol ekranu, bez zadnego separatora.
   Selektory musza byc rownie mocne co jej wlasne (`#payment ul.wc_payment_methods
   > li.wc_payment_method.payment_method_bluemedia`), stad ta dlugosc i `!important`
   tam, gdzie wtyczka tez go uzywa.
   ========================================================================== */

#payment ul.wc_payment_methods li.payment_method_bluemedia .woocommerce-shipping-methods label::before,
#payment ul.wc_payment_methods li.payment_method_bluemedia .woocommerce-shipping-methods label::after {
	content: none !important;
}

#payment ul.wc_payment_methods li.payment_method_bluemedia .woocommerce-shipping-methods label,
#payment ul.wc_payment_methods li.payment_method_bluemedia .bm-payment-channel-label {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 0 !important;
	margin: 0;
	padding: 10px 4px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

#payment ul.wc_payment_methods li.payment_method_bluemedia .woocommerce-shipping-methods ul,
#payment ul.wc_payment_methods li.payment_method_bluemedia .woocommerce-shipping-methods li,
#payment ul.wc_payment_methods li.payment_method_bluemedia .bm-payment-channel-item {
	margin: 0;
	padding: 0 !important;
	list-style: none;
}

#payment ul.wc_payment_methods li.payment_method_bluemedia .woocommerce-shipping-methods > div {
	margin: 0 !important;
}

/* Separator miedzy kanalami. Grupy ukryte (np. Apple Pay poza Safari) maja
   `display: none`, wiec nie zostawiaja po sobie kreski. */
#payment ul.wc_payment_methods li.payment_method_bluemedia .woocommerce-shipping-methods > * + * {
	border-top: 1px solid #eee;
}

#payment ul.wc_payment_methods li.payment_method_bluemedia .woocommerce-shipping-methods input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #43224f;
}

#payment ul.wc_payment_methods li.payment_method_bluemedia .bm-payment-channel-method-logo {
	flex: none;
	width: auto !important;
	height: 28px !important;
	max-height: 28px !important;
}

#payment ul.wc_payment_methods li.payment_method_bluemedia .bm-payment-channel-method-name {
	margin: 0;
	font-size: 15px;
}

/* ==========================================================================
   Pasek zapisu na newsletter z kodem rabatowym.
   Siada pod naglowkiem po przewinieciu kawalka strony. `top` liczy skrypt,
   bo naglowek jest przyklejony na podstronach, a na stronie glownej odjezdza -
   na sztywno wpisana wartosc raz zaslanialaby menu, raz wisiala w powietrzu.
   ========================================================================== */

.hdk-newsletter {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	/* Wyzej niz naglowek (9), jego kontener (30) i pasek ogloszen (31): gdyby
	   kiedykolwiek doszlo do zachodzenia, lepiej zeby pasek byl widoczny niz
	   zeby zniknal pod naglowkiem w trakcie wpisywania adresu. */
	z-index: 32;
	color: #fff;
	/* Sama ramka jest przezroczysta i nieklikalna - tlo niesie panel i uchwyt,
	   dzieki czemu po zwinieciu zostaje na ekranie tylko waski uchwyt, a reszta
	   szerokosci nie lapie klikniec w tresc strony pod spodem. */
	pointer-events: none;
	/* Chowamy przesunieciem i widocznoscia, nie `display`, zeby wjezdzalo
	   plynnie i nie liczylo sie jako przesuniecie ukladu (CLS). */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.hdk-newsletter--widoczny {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.hdk-newsletter[hidden] {
	display: none;
}

.hdk-newsletter__srodek {
	max-width: 1120px;
	margin: 0 auto;
	padding: 10px 16px;
	background-color: #43224f;
	pointer-events: auto;
}

/* Panel na pelnej szerokosci ekranu, a tresc wysrodkowana do kolumny 1120px. */
.hdk-newsletter::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 100%;
	background-color: #43224f;
	pointer-events: none;
}

.hdk-newsletter--zwiniety::before {
	display: none;
}

.hdk-newsletter__srodek {
	position: relative;
	z-index: 1;
}

.hdk-newsletter--zwiniety .hdk-newsletter__srodek {
	display: none;
}

.hdk-newsletter__zacheta {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.35;
}

.hdk-newsletter__zacheta strong {
	font-weight: 700;
}

.hdk-newsletter__pola {
	display: flex;
	gap: 8px;
}

.hdk-newsletter__etykieta {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.hdk-newsletter__email {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: 40px;
	background-color: #fff;
	font-family: var(--hdk-font);
	font-size: 16px;
	color: #222;
}

/*
 * Selektory z rodzicem (0,3,0), bo Kirki wstrzykuje w <head> regule
 * `[type="submit"]:hover { background-color: #43224f }` z ustawien motywu.
 * Ma ona (0,2,0) - tyle samo co sama klasa z pseudoklasa - a blok Kirki
 * siedzi w dokumencie PO naszym arkuszu, wiec wygrywal kolejnoscia
 * i przycisk robil sie na hover ciemnofioletowy.
 */
.hdk-newsletter .hdk-newsletter__cta {
	flex: none;
	height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 40px;
	background-color: #ffb483;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 700;
	color: #2b1436;
	cursor: pointer;
}

/*
 * Po najechaniu przycisk ma sie lekko przyciemnic. Wczesniej jasnial
 * (#ffc9a3) i na fiolecie wygladalo to jak zanikanie.
 */
.hdk-newsletter .hdk-newsletter__cta:hover,
.hdk-newsletter .hdk-newsletter__cta:focus-visible {
	background-color: #f0a373;
}

/*
 * Otwarta szuflada menu przykrywa cala strone, wiec pasek nie ma tam czego
 * szukac. Sam z-index nie wystarczy: szuflada siedzi w `.header-4-container`,
 * ktory ma `position: absolute; z-index: 30` i tworzy wlasny kontekst
 * nakladania - jej `z-index: 102` liczy sie WEWNATRZ niego, wiec wobec paska
 * (32) cala szuflada wystepuje jako 30 i pasek ja przykrywal.
 */
body.mobile-toggled .hdk-newsletter {
	visibility: hidden;
	pointer-events: none;
}

/* Pulapka na boty - poza ekranem, ale nie `display: none`, bo tego czesc
   automatow nie wypelnia i pulapka przestaje dzialac. */
.hdk-newsletter__pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hdk-newsletter__zgoda {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.4;
	cursor: pointer;
}

.hdk-newsletter__zgoda[hidden] {
	display: none;
}

.hdk-newsletter__zgoda input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: #ffb483;
}

.hdk-newsletter__zgoda a {
	color: #fff;
	text-decoration: underline;
}

.hdk-newsletter__blad {
	margin: 8px 0 0;
	font-size: 13px;
	color: #ffd2c2;
}

.hdk-newsletter__blad[hidden] {
	display: none;
}

.hdk-newsletter__sukces[hidden] {
	display: none;
}

.hdk-newsletter__sukces-tekst {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
}

.hdk-newsletter__sukces-opis {
	font-size: 14px;
}

.hdk-newsletter__kod {
	padding: 6px 14px;
	border: 1px dashed rgba(255, 255, 255, .6);
	border-radius: 8px;
	background: none;
	font-family: var(--hdk-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #ffb483;
	cursor: pointer;
}

.hdk-newsletter__wazny {
	font-size: 12px;
	opacity: .85;
}

@media (min-width: 700px) {
	.hdk-newsletter__wiersz {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 16px;
	}

	.hdk-newsletter__zacheta {
		margin: 0;
		flex: 1 1 240px;
	}

	.hdk-newsletter__pola {
		flex: 1 1 320px;
	}

	.hdk-newsletter__zgoda {
		flex: 1 1 100%;
		margin-top: 0;
	}
}

/* Uchwyt zwijania. Duzy cel dotykowy, slowo obok strzalki i tlo tego samego
   koloru co pasek, zeby czytal sie jako jego czesc, a nie osobny element. */
.hdk-newsletter__uchwyt {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	margin: 0 auto;
	padding: 8px 18px;
	border: 0;
	border-radius: 0 0 14px 14px;
	background-color: #43224f;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

.hdk-newsletter__uchwyt:hover,
.hdk-newsletter__uchwyt:focus-visible {
	background-color: #562f66;
}

.hdk-newsletter__uchwyt:focus-visible {
	outline: 2px solid #ffb483;
	outline-offset: 2px;
}

.hdk-newsletter__strzalka {
	flex: none;
	transition: transform .18s ease;
}

/* Po zwinieciu strzalka pokazuje w dol: "rozwinie sie w tym kierunku". */
.hdk-newsletter--zwiniety .hdk-newsletter__strzalka {
	transform: rotate(180deg);
}

.hdk-newsletter--zwiniety .hdk-newsletter__uchwyt {
	max-width: calc(100% - 24px);
	border-radius: 0 0 14px 14px;
}

.hdk-newsletter__uchwyt-tekst {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Przypomnienie o kodzie rabatowym w kasie. Pasek newslettera sie tam nie
   pokazuje, wiec kod bylby niewidoczny akurat wtedy, gdy jest potrzebny. */
.hdk-kod-w-kasie[hidden] {
	display: none;
}

.hdk-kod-w-kasie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	padding: 14px 16px;
	border: 1px dashed #c9b4d6;
	border-radius: 14px;
	background-color: #faf8fc;
}

.hdk-kod-w-kasie__tekst {
	flex: 1 1 220px;
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #43224f;
}

.hdk-kod-w-kasie__kod {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 6px;
	background-color: #43224f;
	font-weight: 700;
	letter-spacing: .05em;
	color: #fff;
}

.hdk-kod-w-kasie__wazny {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #6b5b74;
}

.hdk-kod-w-kasie__uzyj {
	flex: none;
	min-height: 42px;
	padding: 10px 22px;
	border: 0;
	border-radius: 40px;
	background-color: #43224f;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

.hdk-kod-w-kasie__uzyj:hover,
.hdk-kod-w-kasie__uzyj:focus-visible {
	background-color: #5a3268;
}

/* ==========================================================================
   Naglowek na posrednich szerokosciach desktopu (993-1240 px).
   Pasek nawigacji mial `flex: 0 0 auto` - czyli "nie kurcz sie" - a jego
   szerokosc wewnetrzna jest wymuszona przez rozwijane podmenu, nie przez same
   pozycje menu. Efekt: przy 1024 px pasek zajmowal 1005 px zaczynajac od 235 px,
   wiec ikona koszyka ladowala 172 px poza ekranem, a strona przewijala sie
   w bok. Miejsca w rzeczywistosci wystarcza - tresc potrzebuje 889 px.
   ========================================================================== */

@media (min-width: 993px) {
	body.hdk-strona-glowna .col-full-nav,
	.header-4 .col-full-nav {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: flex-end;
	}

	.header-4 .main-navigation {
		flex: 0 1 auto;
		min-width: 0;
	}

	.header-4 .menu-primary-menu-container {
		min-width: 0;
	}
}

/* ==========================================================================
   Pasek newslettera na desktopie.
   Przy `flex: 1 1 320px` pole e-mail rozciagalo sie do 440 px i pasek wygladal
   jak powiekszona wersja mobilnej, a uchwyt zwijania wisial posrodku ekranu.
   Na duzym ekranie: tekst po lewej, staly formularz po prawej, uchwyt przy
   prawej krawedzi kolumny tresci.
   ========================================================================== */

@media (min-width: 993px) {
	.hdk-newsletter__srodek {
		padding: 12px 20px;
	}

	.hdk-newsletter__wiersz {
		gap: 28px;
		justify-content: space-between;
	}

	.hdk-newsletter__zacheta {
		flex: 0 1 auto;
		font-size: 15px;
	}

	.hdk-newsletter__pola {
		flex: 0 0 auto;
		gap: 10px;
	}

	.hdk-newsletter__email {
		flex: 0 0 300px;
		width: 300px;
	}

	.hdk-newsletter__zgoda {
		flex: 0 0 100%;
		margin-top: 10px;
		font-size: 13px;
	}

	.hdk-newsletter__uchwyt {
		margin-left: auto;
		margin-right: max(16px, calc((100% - 1120px) / 2 + 20px));
		min-height: 34px;
		padding: 6px 16px;
		font-size: 13px;
	}
}

/* ==========================================================================
   Blog — lista wpisow i pojedynczy wpis dopasowane do reszty marki.
   Domyslnie byl tu goly uklad Shoptimizera (czarny naglowek "Blog", karty
   bez cienia) plus sidebar z nieusunietymi demo-danymi motywu (zdjecie
   i podpis z themedemo.commercegurus.com) - sidebar chowa filtr w
   functions.php (`hdk_blog_bez_sidebara`), tutaj tylko wyglad kart i naglowka.
   ========================================================================== */

.blog header.entry-header.title,
.category header.entry-header.title,
.tag header.entry-header.title {
	padding: 32px 0 8px;
	text-align: center;
}

.blog header.entry-header.title h1.blog-title,
.category header.entry-header.title h1.blog-title,
.tag header.entry-header.title h1.blog-title {
	position: relative;
	display: inline-block;
	margin: 0 auto 28px;
	padding-bottom: 14px;
	font-family: var(--hdk-font);
	font-size: 34px;
	font-weight: 700;
	color: #1a1a1a;
}

.blog header.entry-header.title h1.blog-title::after,
.category header.entry-header.title h1.blog-title::after,
.tag header.entry-header.title h1.blog-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 56px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, #7446c8, #c93756);
	transform: translateX(-50%);
}

/*
 * Pojedynczy wpis: `content-single.php` nie ma wrappera `.title` z listy
 * (inny szablon), tytul to `h1.entry-title` w zwyklym `.entry-header`.
 * Sidebar chowa `hdk_blog_bez_sidebara_wpis()` w functions.php, ale motyw
 * nie ma wlasnej reguly na pelna szerokosc dla tego wariantu (ma ja tylko
 * dla listy - `.blog.no-archives-sidebar`) - stad rozszerzenie tu.
 */
@media (min-width: 993px) {
	.single-post .content-area {
		float: none;
		width: 100%;
	}
}

.single-post .content-area .post {
	max-width: 760px;
	margin: 0 auto;
}

.single-post .entry-header h1.entry-title {
	font-family: var(--hdk-font);
	font-size: 32px;
	font-weight: 700;
	color: #1a1a1a;
}

.single-post .entry-header .posted-on {
	display: inline-block;
	margin: 8px 0 24px;
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #7446c8;
}

.single-post .entry-content {
	font-family: var(--hdk-font);
	font-size: 16px;
	line-height: 1.75;
	color: #333;
}

.blog .site-main.grid,
.category .site-main.grid,
.tag .site-main.grid {
	gap: 32px;
}

.blog article.post,
.category article.post,
.tag article.post {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 16px rgba(67, 34, 79, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog article.post:hover,
.category article.post:hover,
.tag article.post:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(67, 34, 79, 0.14);
}

.blog article.post a.post-thumbnail,
.category article.post a.post-thumbnail,
.tag article.post a.post-thumbnail {
	display: block;
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.blog article.post a.post-thumbnail img,
.category article.post a.post-thumbnail img,
.tag article.post a.post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.blog article.post:hover a.post-thumbnail img,
.category article.post:hover a.post-thumbnail img,
.tag article.post:hover a.post-thumbnail img {
	transform: scale(1.04);
}

.blog article.post .blog-loop-content-wrapper,
.category article.post .blog-loop-content-wrapper,
.tag article.post .blog-loop-content-wrapper {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 22px 24px;
}

.blog article.post .posted-on,
.category article.post .posted-on,
.tag article.post .posted-on {
	order: -1;
	margin-bottom: 8px;
	font-family: var(--hdk-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #7446c8;
}

.blog article.post .entry-title,
.category article.post .entry-title,
.tag article.post .entry-title {
	margin: 0 0 10px;
	font-family: var(--hdk-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.blog article.post .entry-title a,
.category article.post .entry-title a,
.tag article.post .entry-title a {
	color: #1a1a1a;
}

.blog article.post .entry-title a:hover,
.category article.post .entry-title a:hover,
.tag article.post .entry-title a:hover {
	color: #7446c8;
}

.blog article.post .entry-content,
.category article.post .entry-content,
.tag article.post .entry-content {
	flex: 1;
	font-family: var(--hdk-font);
	font-size: 15px;
	line-height: 1.6;
	color: #555;
}

.blog .navigation.pagination .page-numbers,
.category .navigation.pagination .page-numbers,
.tag .navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	margin: 0 4px;
	padding: 0 6px;
	border-radius: 999px;
	font-family: var(--hdk-font);
	font-weight: 600;
	color: #43224f;
	background: #f4eef8;
}

.blog .navigation.pagination .page-numbers.current,
.category .navigation.pagination .page-numbers.current,
.tag .navigation.pagination .page-numbers.current {
	background: #43224f;
	color: #fff;
}

@media (max-width: 768px) {
	.blog article.post .blog-loop-content-wrapper,
	.category article.post .blog-loop-content-wrapper,
	.tag article.post .blog-loop-content-wrapper {
		padding: 16px 18px 20px;
	}
}

/* ==========================================================================
   Wyszukiwarka — nad siatka produktow (sklep/kategorie) i nad lista wpisow
   (blog). Swiadomie nie ma jej w headerze (patrz przeglad ulepszen).
   ========================================================================== */

.hdk-szukaj {
	display: flex;
	align-items: center;
	max-width: 420px;
	margin: 0 auto 32px;
	border: 1px solid #e6e0ea;
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}

.hdk-szukaj--blog {
	grid-column: 1 / -1;
}

/*
 * Motyw ma `input[type="search"]` (0,1,1) z wlasna ramka, przez co w pigulce
 * robila sie druga, szara ramka. Sama klasa (0,1,0) przegrywa specyficznoscia,
 * a `input.hdk-szukaj__input` (0,1,1) przegrywa kolejnoscia - `main.min.css`
 * motywu laduje sie PO naszym arkuszu. Stad selektor z rodzicem (0,2,1).
 */
.hdk-szukaj input.hdk-szukaj__input {
	flex: 1;
	min-width: 0;
	border: 0;
	box-shadow: none;
	padding: 12px 18px;
	font-family: var(--hdk-font);
	font-size: 15px;
	color: #1a1a1a;
	background: transparent;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.hdk-szukaj__input::placeholder {
	color: #9a8fa3;
}

.hdk-szukaj__submit {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: #43224f;
	color: #fff;
	cursor: pointer;
}

.hdk-szukaj__submit svg {
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   Wybor wersji strony (/intencja/)
   Prosta lista - ma byc czytelna i klikalna, nie efektowna. Sluzy zarowno
   uzytkownikowi, jak i robotom, ktore stad trafiaja do wariantow.
   ========================================================================== */

.hdk-intencje {
	padding: 64px 20px 96px;
	background: #fff;
}

.hdk-intencje__wrap {
	max-width: 760px;
	margin: 0 auto;
}

.hdk-intencje__tytul {
	margin: 0 0 8px;
	font-family: var(--hdk-font);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: #1a1a1a;
}

.hdk-intencje__opis {
	margin: 0 0 32px;
	font-family: var(--hdk-font);
	font-size: 17px;
	color: #55495e;
}

.hdk-intencje__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.hdk-intencje__link {
	display: block;
	padding: 20px 24px;
	border: 1px solid #e6e0ea;
	border-radius: 16px;
	text-decoration: none;
	transition: border-color .18s ease, background-color .18s ease;
}

.hdk-intencje__link:hover,
.hdk-intencje__link:focus-visible {
	border-color: #43224f;
	background-color: #faf7fb;
}

.hdk-intencje__nazwa {
	display: block;
	font-family: var(--hdk-font);
	font-size: 20px;
	font-weight: 700;
	color: #2b1436;
}

.hdk-intencje__tekst {
	display: block;
	margin-top: 4px;
	font-family: var(--hdk-font);
	font-size: 15px;
	line-height: 1.5;
	color: #55495e;
}

@media (max-width: 600px) {
	.hdk-intencje {
		padding: 40px 16px 64px;
	}

	.hdk-intencje__tytul {
		font-size: 30px;
	}
}

/* ==========================================================================
   Przelacznik wersji strony
   Cichy pasek na samym dole - ma byc dostepny, ale nie zabierac uwagi.
   Napis wypelnia JavaScript, bo strona idzie z cache'u; do tego czasu
   element ma atrybut `hidden`.
   ========================================================================== */

.hdk-przelacznik {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: center;
	justify-content: center;
	padding: 14px 20px;
	border-top: 1px solid #e6e0ea;
	background: #faf7fb;
	font-family: var(--hdk-font);
	font-size: 14px;
	color: #55495e;
}

.hdk-przelacznik[hidden] {
	display: none;
}

.hdk-przelacznik__nazwa {
	font-weight: 700;
	color: #2b1436;
}

.hdk-przelacznik__link {
	color: #43224f;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hdk-przelacznik__link:hover,
.hdk-przelacznik__link:focus-visible {
	color: #2b1436;
}

/* Informacja o automatycznej zmianie wersji - musi byc widoczna, zeby
   uzytkownik wiedzial, ze cos sie przestawilo, i mogl to cofnac. */
.hdk-przelacznik__info {
	flex-basis: 100%;
	text-align: center;
	font-size: 13px;
	color: #6b5f74;
}

.hdk-przelacznik__info[hidden] {
	display: none;
}

/* Sekcja opisu zalezna od wersji - doklejana pod wspolnym opisem produktu.
   Pusta u odwiedzajacego w wersji podstawowej, wiec bez marginesu na zapas. */
.hdk-opis-wersji:not(:empty) {
	margin-top: 20px;
}

/* ==========================================================================
   Postacie tego samego rytualu (swatche na stronie produktu)
   Miniatury z podpisem - klikniecie prowadzi do innego produktu. Aktywna ma
   ciemna obwodke, zeby bylo widac, gdzie sie jest, takze bez kolorow.
   ========================================================================== */

.hdk-postacie {
	margin: 20px 0 24px;
}

/* Dwa rzedy pod rzad: drugi bez powtarzania calego odstepu. */
.hdk-postacie + .hdk-postacie {
	margin-top: -8px;
}

/* Etykieta osi - jak przy zwyklych wariantach w sklepie ("Rozmiar", "Kolor"). */
/*
 * Podsumowanie wyboru nad kafelkami.
 *
 * Zaznaczenie w rzedach to obwodka na miniaturze - przy przewijaniu w poziomie
 * latwo ja przeoczyc. To zdanie nazywa wybor slowami, wiec klient wie, co
 * wlozy do koszyka, bez wracania wzrokiem do kafelkow.
 */
.hdk-wybor {
	margin: 0 0 14px;
	font-family: var(--hdk-font);
	font-size: 15px;
	line-height: 1.45;
	color: #2f2438;
}

.hdk-wybor__etykieta {
	color: #6b5f74;
}

.hdk-wybor__typ,
.hdk-wybor__produkt {
	font-weight: 700;
}

.hdk-postacie__naglowek {
	margin: 0 0 10px;
	font-family: var(--hdk-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6b5f74;
}

/*
 * Jeden rzad, przewijany w poziomie. Zawijanie spychalo przycisk zakupu
 * daleko w dol juz przy czterech pozycjach, a rytualow ma byc wiecej.
 */
.hdk-postacie__lista {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	margin: 0;
	padding: 0 0 6px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

/* `display: flex` na pozycji, zeby kafelki mialy rowna wysokosc niezaleznie
   od tego, czy podpis zajmuje jedna linie czy dwie. */
.hdk-postacie__pozycja {
	display: flex;
	scroll-snap-align: start;
}

.hdk-postacie__link {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: 96px;
	padding: 6px 6px 8px;
	border: 2px solid #e6e0ea;
	border-radius: 12px;
	text-decoration: none;
	transition: border-color .18s ease, background-color .18s ease;
}

.hdk-postacie__link:hover,
.hdk-postacie__link:focus-visible {
	border-color: #b9a7c2;
	background-color: #faf7fb;
}

/* Aktywna postac: sama obwodka, bez zmiany rozmiaru - inaczej rzad skakalby
   przy przechodzeniu miedzy produktami. */
.hdk-postacie__link--aktywny {
	border-color: #43224f;
	background-color: #faf7fb;
	cursor: default;
}

.hdk-postacie__obraz {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
}

.hdk-postacie__podpis {
	display: block;
	margin-top: 6px;
	font-family: var(--hdk-font);
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
	color: #55495e;
	/*
	 * Motyw lamie dlugie slowa w dowolnym miejscu ("prezentow|y"). Tu wolimy
	 * przenies cale slowo, a gdy naprawde sie nie miesci - podzielic je
	 * z myslnikiem (strona ma lang="pl-PL", wiec dzielenie jest poprawne).
	 */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
}

.hdk-postacie__link--aktywny .hdk-postacie__podpis {
	font-weight: 700;
	color: #2b1436;
}

@media (max-width: 480px) {
	/* 96px, a nie mniej: "Zapakowanie" ma 74px i przy weszszym kafelku
	   dzielilo sie myslnikiem, mimo ze to jedno slowo. */
	.hdk-postacie__link {
		width: 96px;
	}
}

/* ==========================================================================
   Wideo w tle sekcji hero
   Obraz tla zostaje pod spodem jako plakat - pierwszy ekran rysuje sie
   natychmiast, a wideo dochodzi dopiero, gdy sie wczyta.
   ========================================================================== */

.hdk-hero__wideo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bez tego wideo lapie zdarzenia myszy i blokuje klikanie w tresc. */
	pointer-events: none;
}

/* Tresc i przyciemnienie muszą byc nad wideo. */
.hdk-hero--wideo .hdk-hero__overlay,
.hdk-hero--wideo .hdk-hero__inner {
	position: relative;
	z-index: 1;
}

/*
 * Kto prosil system o ograniczenie animacji, ten dostaje sam obraz.
 * Wideo w tle to ruch, ktorego nie da sie zatrzymac - dla czesci osob
 * jest po prostu meczace.
 */
@media (prefers-reduced-motion: reduce) {
	.hdk-hero__wideo {
		display: none;
	}
}

/* ==========================================================================
   Czytelnosc tekstu na wideo w tle

   Nagranie z ogniskiem ma jasne rozblyski dochodzace do bieli - zmierzony
   kontrast bialego tekstu spadal tam do 1,86:1 przy wymaganych 4,5:1.
   Rownomierne przyciemnienie calego kadru musialoby siegnac 60%, zeby to
   naprawic, i zabiloby zdjecie. Zamiast tego kladziemy gradient: mocny tam,
   gdzie stoi tekst, slabnacy tam, gdzie wideo ma byc widoczne. Do tego cien
   pod literami, ktory ratuje sytuacje w chwili rozblysku.
   ========================================================================== */

.hdk-hero--wideo .hdk-hero__overlay {
	background-color: transparent;
	/*
	 * Wartosci nie sa "na oko": przy .42 w pasie ikon kontrast bialego tekstu
	 * spadal do 3,07:1. Rozblysk ognia dochodzi tam do 249/255, a zeby biel
	 * miala 4,5:1, tlo po przyciemnieniu nie moze przekroczyc 119/255 -
	 * stad minimum .56 wszedzie, gdzie stoi tekst.
	 */
	background-image: linear-gradient(
		180deg,
		rgba(6, 5, 5, .70) 0%,
		rgba(6, 5, 5, .64) 45%,
		rgba(6, 5, 5, .58) 72%,
		rgba(6, 5, 5, .64) 100%
	);
}

.hdk-hero--wideo .hdk-hero__title,
.hdk-hero--wideo .hdk-hero__subtitle,
.hdk-hero--wideo .hdk-hero__tagline,
.hdk-hero--wideo .hdk-hero__usp p,
.hdk-hero--wideo .hdk-hero__cta-text {
	text-shadow: 0 2px 10px rgba(6, 5, 5, .75);
}

@media (min-width: 993px) {
	/*
	 * Na desktopie tekst stoi po lewej, a wideo ma oddychac po prawej -
	 * gradient idzie wiec w poziomie, nie w pionie.
	 */
	.hdk-hero--wideo .hdk-hero__overlay {
		background-image: linear-gradient(
			90deg,
			rgba(6, 5, 5, .74) 0%,
			rgba(6, 5, 5, .62) 46%,
			rgba(6, 5, 5, .34) 72%,
			rgba(6, 5, 5, .24) 100%
		);
	}
}

/* ==========================================================================
   Przycisk hero prowadzacy do produktu
   Wariant bez strzalki: pelnoprawny przycisk, a nie odnosnik przewijajacy
   strone. Wyglada jak "Dodaj do koszyka", bo prowadzi do tej samej sciezki.
   ========================================================================== */

.hdk-hero .hdk-hero__cta--przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 32px;
	border-radius: 40px;
	background-color: #43224f;
	box-shadow: 0 6px 18px rgba(6, 5, 5, .28);
	text-decoration: none;
	transition: background-color .18s ease, transform .18s ease;
}

.hdk-hero .hdk-hero__cta--przycisk:hover,
.hdk-hero .hdk-hero__cta--przycisk:focus-visible {
	background-color: #2f1738;
	transform: translateY(-1px);
}

.hdk-hero .hdk-hero__cta--przycisk .hdk-hero__cta-text {
	font-weight: 700;
	color: #fff;
	/* Na jednolitym tle przycisku cien pod litermi jest zbedny. */
	text-shadow: none;
}

/* ==========================================================================
   Hero z wideo na telefonie: prawie caly ekran w pionie

   Nagranie jest pionowe (9:16), wiec dopiero wysoki kadr pokazuje je tak,
   jak zostalo nakrecone - przy niskiej sekcji widac sam srodkowy pas.
   `svh` zamiast `vh`, bo `vh` na telefonach liczy ekran BEZ paska adresu
   i sekcja podskakuje przy przewijaniu.
   ========================================================================== */

@media (max-width: 992px) {
	.hdk-hero--wideo {
		min-height: 90vh;
		min-height: 90svh;
	}
}

/* ==========================================================================
   Rzad kwadratowych kafli
   Kwadraty dzielace szerokosc po rowno, bez marginesow bocznych - maja
   wypelniac ekran od krawedzi do krawedzi.
   ========================================================================== */

.hdk-kafle {
	display: grid;
	/* Dwie kolumny, kolejne zdjecia schodza do nastepnego rzedu. */
	grid-template-columns: repeat(2, 1fr);
	/* Bez odstepow - kafle maja sie stykac. */
	gap: 0;
	/*
	 * Wyjscie poza padding kontenera `.col-full` (15px z kazdej strony) -
	 * kafle maja siegac krawedzi ekranu. `100vw` z ujemnym marginesem
	 * liczonym od srodka dziala niezaleznie od tego, ile ten padding wynosi.
	 */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.hdk-kafle__obraz {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Na szerokim ekranie kafle mieszcza sie w jednym rzedzie. */
@media (min-width: 993px) {
	.hdk-kafle {
		grid-template-columns: repeat(4, 1fr);
	}

	.hdk-kafle--tylko-mobile {
		display: none;
	}
}

@media (max-width: 992px) {
	.hdk-karuzela--bez-mobile {
		display: none;
	}
}

/* Kafel jako odnosnik - bez zmiany ukladu, z widocznym stanem dotyku. */
.hdk-kafle__link {
	display: block;
	position: relative;
	line-height: 0;
}

.hdk-kafle__link:hover .hdk-kafle__obraz,
.hdk-kafle__link:focus-visible .hdk-kafle__obraz {
	filter: brightness(.92);
}

.hdk-kafle__link:focus-visible {
	outline: 3px solid #43224f;
	outline-offset: -3px;
}

.hdk-kafle__obraz {
	transition: filter .18s ease;
}

/* ==========================================================================
   Landing bez stopki
   Chowamy stopke motywu, ale NIE odnosniki formalne - te przenosza sie do
   waskiego paska na dole. Regulamin, polityka prywatnosci i wycofanie zgody
   musza byc dostepne z kazdej strony sklepu.
   ========================================================================== */

body.hdk-bez-stopki .site-footer,
body.hdk-bez-stopki footer.copyright {
	display: none;
}

/*
 * Pasek wjezdza na dolne zdjecia zamiast zajmowac wlasny kawalek strony.
 * Ujemny margines wciaga go nad kafle - dziala, bo przy ukrytej stopce
 * motywu to pierwsza rzecz pod trescia. Gradient od dolu daje literom tlo
 * bez zaslaniania zdjecia.
 */
/* Sekcja kafli jest ukladem odniesienia dla paska lezacego na zdjeciach. */
.hdk-kafle {
	position: relative;
}

/*
 * Landing konczy sie zdjeciami. Poza paddingiem kontenera pusty pas robil tez
 * obszar widgetow - motyw renderuje go nawet wtedy, gdy nie ma w nim niczego.
 */
body.hdk-bez-stopki .site-content .col-full {
	padding-bottom: 0;
}

body.hdk-bez-stopki .widget-area {
	display: none;
}

.hdk-pasek-prawny {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	align-items: center;
	justify-content: center;
	padding: 44px 20px 14px;
	/*
	 * Gradient musi byc mocny juz przy GORNEJ linii odnosnikow - tam wypadal
	 * najslabiej (3,27:1) i to ona byla nieczytelna, mimo ze na oko wydawalo
	 * sie odwrotnie. Zanik do zera dopiero nad tekstem, zeby nie bylo widac
	 * krawedzi paska na zdjeciu.
	 */
	background-image: linear-gradient(
		to top,
		rgba(6, 5, 5, .82) 0%,
		rgba(6, 5, 5, .68) 55%,
		rgba(6, 5, 5, .30) 85%,
		rgba(6, 5, 5, 0) 100%
	);
	flex-direction: column;
	font-family: var(--hdk-font);
	font-size: 13px;
	/*
	 * Kolor na pasku, nie tylko na odnosnikach: przycisk ustawien ciasteczek
	 * ma z modulu zgod `color: inherit`, wiec bez tego dziedziczyl ciemny
	 * kolor strony i jako jedyny nie byl bialy.
	 */
	color: #fff;
}

/* Kategorie: nawigacja, wiec wyrazniej niz drobny druk pod nimi. */
.hdk-pasek-prawny__dzialy,
.hdk-pasek-prawny__formalne {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	align-items: center;
	justify-content: center;
}

.hdk-pasek-prawny__link--dzial {
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.hdk-pasek-prawny__link--dzial:hover,
.hdk-pasek-prawny__link--dzial:focus-visible {
	text-decoration: underline;
}

.hdk-pasek-prawny__formalne {
	font-size: 12px;
	opacity: .88;
}

.hdk-pasek-prawny__link {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: inherit;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-shadow: 0 1px 6px rgba(6, 5, 5, .8);
	cursor: pointer;
}

.hdk-pasek-prawny__link:hover,
.hdk-pasek-prawny__link:focus-visible {
	color: #f0e6f5;
}

/* ==========================================================================
   Landing na komputerze: wideo po lewej, zdjecia po prawej

   Hero i kafle sa rodzenstwem w tym samym kontenerze, wiec wystarczy zrobic
   z niego siatke - bez dokladania opakowan w PHP. Na telefonie zostaje uklad
   jeden pod drugim, bo pionowe wideo i kwadraty potrzebuja calej szerokosci.
   ========================================================================== */

@media (min-width: 993px) {
	/*
	 * Pusty naglowek archiwum - motyw wstawia go nad trescia i ma wlasny
	 * `.col-full`, przez ktory uklad liczyl sie dwa razy i strona byla
	 * dwukrotnie wyzsza od ekranu.
	 */
	body.hdk-bez-stopki .archive-header {
		display: none;
	}

	/*
	 * `:has()` celuje w TEN kontener, ktory zawiera nasze sekcje - bez tego
	 * regula lapala takze inne `.col-full` na stronie.
	 */
	body.hdk-bez-stopki .site-content .col-full:has(> .hdk-hero) {
		display: grid;
		/*
		 * Lewa kolumna ma proporcje nagrania (9:16), wiec wideo jest pionowe
		 * i nic sie z niego nie traci. Ograniczenie do 42vw pilnuje, zeby na
		 * bardzo wysokich oknach nie zjadlo polowy ekranu. Reszta idzie na
		 * zdjecia.
		 */
		grid-template-columns: min(42vw, calc((100svh - var(--hdk-announcement-height, 44px)) * 9 / 16)) 1fr;
		/*
		 * Wiersz ma dokladnie wysokosc kontenera. Bez tego jest liczony
		 * z tresci - zdjecia narzucaly swoja proporcje i uklad wystawal
		 * poza ekran, mimo ze sam kontener mial poprawna wysokosc.
		 */
		grid-template-rows: 100%;
		align-items: stretch;
		gap: 0;
		/* Uklad wypelnia ekran i siega jego krawedzi. */
		height: calc(100svh - var(--hdk-announcement-height, 44px));
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}

	/*
	 * W ukladzie dwukolumnowym kafle nie wychodza juz na cala szerokosc -
	 * zajmuja swoja polowe i ukladaja sie 2x2, zeby zostac kwadratami.
	 */
	body.hdk-bez-stopki .hdk-kafle {
		width: 100%;
		max-width: none;
		height: 100%;
		/* Bez tego element flex/grid nie skurczy sie ponizej swojej tresci. */
		min-height: 0;
		overflow: hidden;
		margin-inline: 0;
		/* Dwa rzedy po polowie wysokosci - zdjecia wypelniaja kolumne. */
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}

	/*
	 * Kafel wypelnia swoja komorke, a nie narzuca wysokosci calemu rzedowi.
	 * `min-height: 0` jest tu konieczne: elementy siatki maja domyslnie
	 * `min-height: auto`, wiec wiersze `1fr` nie mogly zejsc ponizej
	 * wysokosci zdjecia i uklad wystawal poza ekran.
	 */
	body.hdk-bez-stopki .hdk-kafle__link,
	body.hdk-bez-stopki .hdk-kafle__obraz {
		height: 100%;
		min-height: 0;
	}

	body.hdk-bez-stopki .hdk-kafle__obraz {
		aspect-ratio: auto;
	}

	/*
	 * Hero zajmuje lewa polowe i dorownuje wysokoscia zdjeciom obok.
	 * Trzeba mu odebrac wyjscie na pelna szerokosc okna (`width: 100vw`
	 * i ujemny margines) - w ukladzie dwukolumnowym rozlewalo sie na cala
	 * strone i wchodzilo pod zdjecia.
	 */
	/*
	 * Odnosniki na dole ida przez cala szerokosc ekranu i sa wysrodkowane
	 * wzgledem niego, a nie wzgledem kolumny ze zdjeciami. Landing nie
	 * przewija sie na komputerze, wiec `fixed` zachowuje sie tu tak samo
	 * jak przypiecie do dolu strony.
	 */
	body.hdk-bez-stopki .hdk-pasek-prawny {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
	}

	body.hdk-bez-stopki .hdk-hero {
		width: 100%;
		margin-inline: 0;
		/*
		 * Zerujemy ujemny margines z ukladu jednokolumnowego (hero wsuwa sie
		 * tam pod pasek ogloszen). Tutaj przez niego konczyl sie 44px nad
		 * dolem ekranu, podczas gdy zdjecia obok siegaly krawedzi.
		 */
		margin-top: 0;
		min-height: 0;
		height: 100%;
		overflow: hidden;
		/* Tresc trzyma sie lewej krawedzi kolumny, a nie srodka strony. */
		--hdk-content-width: 100%;
		--hdk-page-margin: 40px;
	}

	/* Przycisk na srodku kolumny z wideo. */
	body.hdk-bez-stopki .hdk-hero .hdk-hero__cta-row {
		justify-content: center;
		/* Te same 30px co blok tekstu obok - inaczej przycisk wystawal w lewo. */
		padding-inline: 30px;
	}

	/*
	 * Typografia hero jest skrojona pod sekcje na cala szerokosc. W kolumnie
	 * 425px tytul przy 72px lamal sie w srodku wyrazu ("przodko|wie"), a cala
	 * tresc byla o 61px wyzsza niz kolumna - przycisk wychodzil poza kadr.
	 * Skala plynna: rosnie z szerokoscia kolumny, ale nie przekracza wartosci
	 * z ukladu jednokolumnowego.
	 */
	body.hdk-bez-stopki .hdk-hero .hdk-hero__title {
		/*
		 * Gorna granica z pomiaru, nie z oka: przy 56px najdluzszy wyraz
		 * ("przodkowie.") potrzebowal 304px, a kolumna daje 285px - i lamal
		 * sie w srodku. Przy 50px mieści sie z zapasem.
		 */
		font-size: clamp(28px, 3.9vw, 50px);
		line-height: 1.08;
		/* Gdyby kiedys trafil sie dluzszy wyraz - z myslnikiem, nie w srodku. */
		hyphens: auto;
	}

	body.hdk-bez-stopki .hdk-hero .hdk-hero__subtitle {
		font-size: clamp(17px, 1.7vw, 22px);
		line-height: 1.25;
	}

	body.hdk-bez-stopki .hdk-hero .hdk-hero__tagline {
		font-size: clamp(13px, 1.1vw, 15px);
	}
}

/*
 * Szary pasek nad galeria produktu.
 *
 * Motyw daje `main.site-main` 32 px odstepu u gory, a tlo strony produktu
 * jest szare (#f8f8f8 z Customizera). Miedzy paskiem wysylki a zdjeciem
 * powstawal przez to szary prostokat wygladajacy na pomylke. Tlo zostaje -
 * jest widoczne miedzy sekcjami nizej i tak ma byc - znika sam odstep.
 *
 * Klasa `.site-main` jest powtorzona celowo. Motyw ustawia ten odstep
 * dwiema regulami o wysokiej specyficznosci:
 *   body.single-product:has(:not(.woocommerce-breadcrumb)) .site-main  (2rem)
 *   .single-product:has(:not(.woocommerce-breadcrumb)) .site-main      (1em, <=992px)
 * Pojedyncze `.single-product main.site-main` przegrywalo z obiema, wiec
 * regula wygladala na wdrozona, a pasek dalej byl widoczny. Podwojenie
 * klasy podnosi specyficznosc ponad regule motywu bez `!important`.
 *
 * Tylko do 992 px. Tam uklad jest jednokolumnowy, galeria idzie przez cala
 * szerokosc i odstep czytalo sie jako szary pasek doklejony pod paskiem
 * wysylki. Na szerszych ekranach galeria i opis stoja obok siebie w ramce
 * tresci, wiec ten sam odstep jest zwyklym marginesem u gory strony i
 * zostaje taki, jaki daje motyw.
 */
@media (max-width: 992px) {

	body.single-product main.site-main.site-main {
		padding-top: 0;
	}
}

/*
 * Adnotacja przy opiniach wspolnych dla wersji.
 *
 * Musi byc czytelna, a nie schowana drobnym drukiem - mowi klientowi, ze
 * opinie napisano o tym samym produkcie sprzedawanym pod inna nazwa.
 */
.hdk-opinie-adnotacja {
	display: block;
	margin-top: 6px;
	font-family: var(--hdk-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	color: #6b5f74;
}

/*
 * Rzad rodzajow jako pigulki tekstowe.
 *
 * Zdjecia zostaly tylko przy typach - tam obrazek koduje roznice. Przy
 * rodzajach wszystkie miniatury byly podobnymi lnianymi woreczkami, wiec
 * zabieraly 80 px wysokosci, nie mowiac nic. Pigulki mieszcza sie w calosci
 * bez przewijania (przy zdjeciach widac bylo 3 z 4 opcji, bez zadnej
 * wskazowki, ze rzad sie przewija) i pokazuja sklad, ktory faktycznie
 * odroznia rytualy.
 *
 * Inny ksztalt niz kafelki typow to takze sygnal: te dwa rzedy zachowuja
 * sie inaczej - typ tylko przelacza liste, rytual przenosi na produkt.
 */
.hdk-postacie--rodzaj .hdk-postacie__lista {
	flex-wrap: wrap;
	overflow-x: visible;
	gap: 8px;
}

.hdk-postacie--rodzaj .hdk-postacie__pozycja {
	width: auto;
	scroll-snap-align: none;
}

.hdk-postacie--rodzaj .hdk-postacie__link {
	display: flex;
	flex-direction: column;
	gap: 1px;
	width: auto;
	padding: 8px 14px;
	border: 1px solid #e4dfe8;
	border-radius: 999px;
	background: #fff;
}

.hdk-postacie--rodzaj .hdk-postacie__link--aktywny {
	border-color: #43224f;
	background: #f7f3f9;
}

.hdk-postacie--rodzaj .hdk-postacie__podpis {
	margin-top: 0;
	font-size: 14px;
	font-weight: 700;
	color: #2f2438;
	hyphens: none;
}

.hdk-postacie__sklad {
	display: block;
	font-family: var(--hdk-font);
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
	color: #6b5f74;
}

/* =========================================================================
   Opis produktu
   ========================================================================= */

/*
 * Panel opisu ma 1196 px szerokosci. Wiersz tekstu tak dlugi jest meczacy -
 * oko gubi poczatek nastepnej linii. Ograniczamy dlugosc wiersza, zdjeciom
 * i wyroznieniom pozwalajac wyjsc szerzej.
 */
.woocommerce-Tabs-panel--description {
	font-family: var(--hdk-font);
	font-size: 17px;
	line-height: 1.7;
	color: #3a3040;
}

.woocommerce-Tabs-panel--description > * {
	max-width: 44rem;
	margin-inline: auto;
}

.woocommerce-Tabs-panel--description h2 {
	margin: 44px auto 14px;
	font-size: 25px;
	line-height: 1.25;
	color: #2b1436;
}

.woocommerce-Tabs-panel--description h2:first-child {
	margin-top: 0;
}

.woocommerce-Tabs-panel--description p {
	margin: 0 auto 16px;
}

/* Pierwsze zdanie opisu - trzy krotkie polecenia, warte wiekszego glosu. */
.hdk-opis__lead {
	font-size: 21px;
	line-height: 1.5;
	color: #2b1436;
}

/* Zdania domykajace sekcje: wyrozniamy je, zeby nie ginely miedzy akapitami. */
.hdk-opis__mocne {
	font-weight: 600;
	color: #2b1436;
}

.woocommerce-Tabs-panel--description ul,
.woocommerce-Tabs-panel--description ol {
	margin: 0 auto 20px;
	padding-left: 22px;
}

.woocommerce-Tabs-panel--description li {
	margin-bottom: 8px;
}

/*
 * Kroki przygotowania - numer ma byc widoczny, bo to instrukcja.
 *
 * Selektory scalone z klasa panelu: motyw ma `.entry-content ol li`
 * i `.woocommerce-Tabs-panel--description ol`, ktore wygrywaly z samymi
 * klasami. Bez tego numer w kolku wchodzil na tekst kroku.
 */
.woocommerce-Tabs-panel--description .hdk-opis__kroki {
	counter-reset: hdk-krok;
	padding-left: 0;
	list-style: none;
}

.woocommerce-Tabs-panel--description .hdk-opis__kroki > li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 46px;
	list-style: none;
}

.hdk-opis__kroki > li::before {
	counter-increment: hdk-krok;
	content: counter(hdk-krok);
	position: absolute;
	top: 2px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #43224f;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/*
 * Zdjecia trzymaja te sama kolumne co tekst.
 *
 * Bez ograniczenia figura rozciagala sie na cala szerokosc panelu (1112 px)
 * przy tekscie szerokim na 704 px - obraz wychodzil poza os czytania,
 * a przy okazji byl rozciagany ponad swoja rozdzielczosc (1024 px), wiec
 * tracil ostrosc.
 *
 * Selektor zawiera `figure`, bo motyw ma `.woocommerce-tabs .wp-block-image`
 * o tej samej specyficznosci co sam panel z klasa - a nasz arkusz laduje sie
 * PRZED arkuszami motywu, wiec przy remisie zawsze przegrywa. Nazwa elementu
 * przewaza szale bez `!important`.
 */
.woocommerce-Tabs-panel--description figure.hdk-opis__foto {
	max-width: 44rem;
	margin: 28px auto 32px;
}

.hdk-opis__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.hdk-opis__foto figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	color: #6b5f74;
}

/* Gwarancja: ramka, bo to obietnica handlowa, a nie ciag dalszy opowiesci. */
.woocommerce-Tabs-panel--description .hdk-opis__gwarancja {
	margin: 36px auto;
	padding: 22px 26px;
	border: 1px solid #e0d6e6;
	border-radius: 14px;
	background: #faf7fb;
}

.hdk-opis__gwarancja h2 {
	margin-top: 0;
	font-size: 20px;
}

.hdk-opis__gwarancja p:last-child {
	margin-bottom: 0;
}

/* Zastrzezenie prawne - czytelne, ale wyraznie inne niz tresc sprzedazowa. */
.hdk-opis__zastrzezenie {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid #ece7ef;
	font-size: 14px;
	line-height: 1.6;
	color: #6b5f74;
}

@media (max-width: 767px) {

	.woocommerce-Tabs-panel--description {
		font-size: 16px;
	}

	.woocommerce-Tabs-panel--description h2 {
		margin-top: 34px;
		font-size: 22px;
	}

	.hdk-opis__lead {
		font-size: 19px;
	}
}

/* ==========================================================================
   Karuzela produktow we wpisach bloga (inc/karuzela-produktow.php)
   --------------------------------------------------------------------------
   Ten sam kafelek co w galeriach, ale w jednym rzedzie przewijanym w poziomie.
   We wpisie produkty wchodza trzy razy (gora, srodek, dol), wiec siatka
   rozpychalaby tekst na kilka ekranow.

   Przewijanie jest natywne (`overflow-x` + `scroll-snap`) - dziala palcem,
   kolkiem i klawiatura bez JS. Strzalki to wylacznie udogodnienie: sa
   `hidden` w znaczniku i odslania je skrypt, zeby bez JS nie wisialy martwe.
   ========================================================================== */

.hdk-karuzela-produktow {
	/* Szerokosc kafelka steruje i pasem, i przewinieciem strzalki (JS czyta te zmienna). */
	--hdk-karuzela-kafelek: 300px;
	--hdk-karuzela-przerwa: 16px;

	margin: 40px 0;
}

.hdk-karuzela-produktow__gora {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.hdk-karuzela-produktow__opisy {
	min-width: 0;
}

/*
 * Naglowek karuzeli jest mniejszy od galeryjnego: we wpisie konkuruje
 * z H2 samego tekstu i nie moze go przekrzykiwac.
 */
.hdk-karuzela-produktow .hdk-karuzela-produktow__naglowek {
	margin: 0;
	font-family: var(--hdk-font);
	font-size: clamp(1.35rem, 2.6vw, 1.75rem);
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	color: #000;
	text-wrap: balance;
}

.hdk-karuzela-produktow .hdk-karuzela-produktow__opis {
	margin: 6px 0 0;
	font-size: .95rem;
	line-height: 1.5;
	color: #666;
}

.hdk-karuzela-produktow__strzalki {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

.hdk-karuzela-produktow__strzalki[hidden] {
	display: none;
}

.hdk-karuzela-produktow__strzalka {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	color: #43224f;
	background: #fff;
	border: 1px solid #e6e0ea;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.hdk-karuzela-produktow__strzalka:hover {
	background: #f4f0f6;
	border-color: #43224f;
}

/* Koniec pasa: strzalka zostaje widoczna, ale przestaje zapraszac do klikania. */
.hdk-karuzela-produktow__strzalka[disabled] {
	opacity: .35;
	cursor: default;
}

.hdk-karuzela-produktow__pas {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--hdk-karuzela-przerwa);
	/*
	 * Ujemny margines z rownowazacym paddingiem wypuszcza pas na marginesy
	 * kolumny tekstu, zeby na telefonie kafelek nie byl waski, a przy okazji
	 * bylo widac, ze rzad idzie dalej.
	 */
	margin: 0 -16px;
	padding: 4px 16px 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	/*
	 * Bez `scroll-behavior: smooth` w CSS. Razem ze scroll-snapem psulo
	 * programowe przewijanie: strzalka ruszala pas o kilka pikseli zamiast
	 * o kafelek. Plynnosc wlacza JS przez `behavior: "smooth"` przy kliknieciu,
	 * a wtedy dziala poprawnie.
	 */
	scrollbar-width: thin;
}

.hdk-karuzela-produktow__pas:focus-visible {
	outline: 2px solid #43224f;
	outline-offset: 2px;
}

.hdk-karuzela-produktow__pozycja {
	display: flex;
	flex: 0 0 var(--hdk-karuzela-kafelek);
	max-width: var(--hdk-karuzela-kafelek);
	scroll-snap-align: start;
}

/* Kafelek dostaje pelna szerokosc pozycji - inaczej karta trzyma sie tresci. */
.hdk-karuzela-produktow__pozycja > .hdk-produkt {
	width: 100%;
}

/*
 * Jeden produkt: bez przewijania i bez ujemnych marginesow, zeby kafelek
 * stanal w kolumnie tekstu jak zwykly blok.
 */
.hdk-karuzela-produktow--statyczna .hdk-karuzela-produktow__pas {
	margin: 0;
	padding: 0;
	overflow-x: visible;
}

@media (max-width: 749px) {
	.hdk-karuzela-produktow {
		/* Kafelek wezszy niz ekran - wystajacy sasiad mowi, ze da sie przewinac. */
		--hdk-karuzela-kafelek: 76vw;
		--hdk-karuzela-przerwa: 12px;

		margin: 32px 0;
	}

	.hdk-karuzela-produktow__gora {
		align-items: flex-start;
	}

	/* Na dotyku przewija sie palcem, strzalki tylko zabieraja miejsce. */
	.hdk-karuzela-produktow__strzalki {
		display: none;
	}
}

@media (min-width: 1200px) {
	.hdk-karuzela-produktow {
		--hdk-karuzela-kafelek: 320px;
	}
}

/* ==========================================================================
   Uklad wpisu z notkami na marginesie (inc/notka-boczna.php)
   --------------------------------------------------------------------------
   Wzor: culture.pl - waska kolumna tekstu po lewej, odnosniki do powiazanych
   artykulow po prawej, na wysokosci akapitu, oddzielone wlosowa linia.

   Wlacza sie TYLKO na wpisach, ktore maja notki (klasa `hdk-wpis-z-notkami`
   na <body>). Wpisy bez notek zostaja przy dotychczasowej, wysrodkowanej
   kolumnie - inaczej tekst przykleilby sie do lewej i zostawil pusty pas.

   Miary z pomiaru wzorca (1440px): tekst 606px przy 20/38, margines 291px.
   U nas kolumna tresci ma 1170px, wiec: tekst 660px, margines 300px,
   przerwa 60px, razem 1020px + luz.
   ========================================================================== */

/*
 * Szerokosc wpisu ogranicza `.single-post .content-area .post` (760px, nasza
 * wlasna regula wyzej), a NIE `.entry-content`. Poszerzanie samej tresci nic
 * nie dawalo: `width: 100%` liczy sie od rodzica, ktory dalej mial 760px,
 * wiec notki oplywaly do krawedzi tej waskiej kolumny, a wlosowa linia -
 * liczona od prawej - ladowala w SRODKU tekstu. Tak powstala „dziwna pionowa
 * kreska przez caly wpis".
 *
 * Dlatego zdejmujemy ograniczenie z opakowania wpisu; `.entry-content`
 * dostaje wtedy pelne 1170px kolumny tresci.
 */
.single-post.hdk-wpis-z-notkami .content-area .post {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.hdk-wpis-z-notkami .entry-content {
	--hdk-wpis-tekst: 660px;
	--hdk-wpis-notka: 340px;
	/* Wciecie kropki - wchodzi w szerokosc calkowita notki, wiec liczy sie
	   przy ustawianiu wlosowej linii. */
	--hdk-wpis-kropka: 22px;
	--hdk-wpis-przerwa: 60px;

	position: relative;
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/*
 * Wlosowa linia miedzy kolumna tekstu a marginesem. Rysujemy ja tlem
 * kontenera, a nie obramowaniem notki: ma biec przez CALA wysokosc wpisu,
 * takze tam, gdzie akurat zadnej notki nie ma - tak jest we wzorcu.
 */
.hdk-wpis-z-notkami .entry-content::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc( var(--hdk-wpis-notka) + var(--hdk-wpis-kropka) + 74px );
	width: 1px;
	background: #e6e0ea;
	pointer-events: none;
}

/*
 * Miara tekstu. Wyliczamy ja wszystkim blokom tresci z osobna, zamiast
 * zwezac kontener - kontener musi zostac szeroki, zeby bylo gdzie oplynac
 * notke. Bloki pelnowymiarowe (karuzele, tabele) sa wyjete nizej.
 */
.hdk-wpis-z-notkami .entry-content > p,
.hdk-wpis-z-notkami .entry-content > h2,
.hdk-wpis-z-notkami .entry-content > h3,
.hdk-wpis-z-notkami .entry-content > h4,
.hdk-wpis-z-notkami .entry-content > ul,
.hdk-wpis-z-notkami .entry-content > ol,
.hdk-wpis-z-notkami .entry-content > blockquote,
.hdk-wpis-z-notkami .entry-content > .hdk-gaweda,
.hdk-wpis-z-notkami .entry-content > figure.wp-block-image {
	max-width: var(--hdk-wpis-tekst);
	margin-right: 0;
}

/*
 * Dluzszy tekst potrzebuje luzniejszej interlinii - wzorzec ma 1.9.
 * Zostajemy przy naszym kroju, zmieniamy tylko rytm.
 */
.hdk-wpis-z-notkami .entry-content > p {
	line-height: 1.7;
}

/*
 * Tabela i karuzela ida na pelna szerokosc kolumny tekstu, ale musza
 * ZEJSC PONIZEJ notki - inaczej weszlyby jej pod spod.
 */
.hdk-wpis-z-notkami .entry-content > figure.wp-block-table,
.hdk-wpis-z-notkami .entry-content > .hdk-gaweda,
.hdk-wpis-z-notkami .entry-content > .hdk-karuzela-produktow {
	clear: right;
}

/*
 * Karuzela i tabela trzymaja sie MIARY TEKSTU, nie calej kolumny. Bez tego
 * karuzela szla przez pelne 1170px i wchodzila pod pas notek - a ma byc
 * elementem tresci, czytanym w tym samym rytmie co akapity.
 *
 * Selektor potomka, nie dziecka: blok shortcode'u bywa opakowany, wiec
 * `>` potrafi nie trafic.
 */
.hdk-wpis-z-notkami .entry-content figure.wp-block-table,
.hdk-wpis-z-notkami .entry-content .hdk-karuzela-produktow {
	max-width: var(--hdk-wpis-tekst);
}

/* --------------------------------------------------------------------------
   Sama notka
   -------------------------------------------------------------------------- */

.hdk-notka {
	float: right;
	clear: right;
	width: var(--hdk-wpis-notka, 300px);
	/*
	 * Ujemny prawy margines wypycha notke poza kolumne tekstu az na margines
	 * strony. Gorny margines rowna ja z pierwsza linia sasiedniego akapitu.
	 */
	margin: 6px 0 32px var(--hdk-wpis-przerwa, 60px);
	padding-left: var(--hdk-wpis-kropka, 22px);
	position: relative;
}

/* Czerwona kropka - we wzorcu jest znacznikiem notki, wychodzi poza tekst. */
.hdk-notka::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #43224f;
}

.hdk-notka .hdk-notka__tytul {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
}

.hdk-notka .hdk-notka__tytul a {
	color: #111;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.hdk-notka .hdk-notka__tytul a:hover {
	color: #43224f;
}

.hdk-notka .hdk-notka__tekst {
	margin: 12px 0 0;
	font-size: .95rem;
	line-height: 1.6;
	color: #555;
}

.hdk-notka .hdk-notka__tag {
	margin: 16px 0 0;
}

.hdk-notka .hdk-notka__tag span {
	display: inline-block;
	padding: 8px 16px;
	font-size: .85rem;
	line-height: 1.2;
	color: #43224f;
	border: 1px solid #e6e0ea;
	border-radius: 40px;
}

/* --------------------------------------------------------------------------
   Waskie ekrany: notka wraca do kolumny jako zwykly blok
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	/* Bez marginesu na notki wracamy do zwyklej, czytelnej szerokosci -
	   przywracajac ograniczenie tam, skad je zdjelismy. */
	.single-post.hdk-wpis-z-notkami .content-area .post {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}

	.hdk-wpis-z-notkami .entry-content {
		max-width: none;
	}

	.hdk-wpis-z-notkami .entry-content::before {
		display: none;
	}

	.hdk-wpis-z-notkami .entry-content > p,
	.hdk-wpis-z-notkami .entry-content > h2,
	.hdk-wpis-z-notkami .entry-content > h3,
	.hdk-wpis-z-notkami .entry-content > h4,
	.hdk-wpis-z-notkami .entry-content > ul,
	.hdk-wpis-z-notkami .entry-content > ol,
	.hdk-wpis-z-notkami .entry-content > blockquote,
	.hdk-wpis-z-notkami .entry-content > figure.wp-block-image,
	.hdk-wpis-z-notkami .entry-content > figure.wp-block-table {
		max-width: none;
	}

	.hdk-notka {
		float: none;
		width: auto;
		margin: 28px 0;
		padding: 20px 20px 20px 42px;
		background: #faf8fb;
		border-radius: 10px;
	}

	.hdk-notka::before {
		top: 29px;
		left: 20px;
	}
}

/*
 * Notka informacyjna - bez odnosnika. Samodzielna tresc na marginesie:
 * mini podsumowanie sekcji, data, liczba, ciekawostka. Odrozniamy ja
 * subtelnie: pusta kropka zamiast wypelnionej i tytul bez podkreslenia,
 * zeby czytelnik od razu widzial, ze nie ma tu dokad kliknac.
 */
.hdk-notka--info::before {
	background: transparent;
	border: 2px solid #43224f;
	/* Obramowanie dokłada 2px z każdej strony - zmniejszamy, żeby kropka
	   informacyjna miała tę samą średnicę co odnośnikowa. */
	width: 3px;
	height: 3px;
}

.hdk-notka--info .hdk-notka__tytul {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6b5f74;
}

.hdk-notka--info .hdk-notka__tekst {
	margin-top: 8px;
	font-size: 1rem;
	color: #333;
}

/* ==========================================================================
   Gaweda - fragment JAWNIE ZMYSLONY (wzorzec „Gaweda - fragment zmyslony")
   Wzorzec redakcyjny: seria rozdziela zapis od rekonstrukcji, wiec kiedy
   pozwalamy sobie na wymyslanie, czytelnik musi to widziec bez czytania.

   ⚠️ ETYKIETE RYSUJE CSS, NIE AUTOR. Napis „Zmyslone" siedzi w ::before
   opakowania, wiec nie da sie go pominac ani skasowac z poziomu edytora.
   To jest cala idea tego elementu - podpis nie moze zalezec od pamieci
   piszacego. Nie usuwac ::before i nie zastepowac go recznym akapitem.

   Kolor jest znaczacy: fiolet w calym wpisie oznacza ZRODLO (notki, tagi),
   ochra oznacza WYMYSL. Te dwie rodziny nie moga sie nigdzie zmieszac.
   ========================================================================== */

.hdk-gaweda {
	position: relative;
	margin: 38px 0;
	padding: 32px 26px 26px;
	background: #fdf8ef;
	border: 1px solid #eddfc5;
	border-left: 3px solid #b07f2c;
	border-radius: 4px;
	clear: right;
}

.hdk-gaweda::before {
	content: "Zmyślone";
	position: absolute;
	top: -10px;
	left: 22px;
	padding: 3px 11px;
	background: #b07f2c;
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: 2px;
}

/* Tytul gawedy - opcjonalny, mowi CO wymyslilismy. */
.hdk-gaweda .hdk-gaweda__tytul {
	margin: 0 0 14px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: #7a5719;
}

.hdk-gaweda p {
	margin: 0 0 14px;
	line-height: 1.7;
}

.hdk-gaweda p:last-child {
	margin-bottom: 0;
}

/* Stopka gawedy - na czym oparlismy wymysl. Nie jest obowiazkowa,
   ale przy dluzszym fragmencie warto powiedziec, skad wzielismy klocki. */
.hdk-gaweda .hdk-gaweda__oparte {
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid #eddfc5;
	font-size: .85rem;
	line-height: 1.6;
	color: #8a6a2e;
}

@media (max-width: 767px) {

	.hdk-gaweda {
		padding: 30px 18px 22px;
	}
}

/* ==========================================================================
   Naglowek wpisu bloga (inc/szablon-wpisu.php)
   Wzor: culture.pl - etykieta serii, duzy wysrodkowany tytul, lead,
   metryczka, zdjecie otwierajace z podpisem.
   ========================================================================== */

.hdk-wpis-naglowek {
	max-width: 780px;
	margin: 0 auto 36px;
	padding: 0 16px;
	text-align: center;
}

/* Etykieta serii - wersaliki ze strzalka, jak „SERIA: …" we wzorcu. */
.hdk-wpis-naglowek__seria {
	margin: 0 0 20px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hdk-wpis-naglowek__seria a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #6b5f74;
	text-decoration: none;
}

.hdk-wpis-naglowek__seria a:hover {
	color: #43224f;
}

.hdk-wpis-naglowek__strzalka {
	display: block;
	width: 34px;
	height: 1px;
	background: currentColor;
	position: relative;
}

.hdk-wpis-naglowek__strzalka::before {
	content: "";
	position: absolute;
	top: -3px;
	left: 0;
	width: 7px;
	height: 7px;
	border-left: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
}

.hdk-wpis .hdk-wpis-naglowek__tytul {
	margin: 0;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.hdk-wpis-naglowek__lead {
	max-width: 640px;
	margin: 22px auto 0;
	font-size: 1.15rem;
	line-height: 1.6;
	color: #444;
}

.hdk-wpis-naglowek__metryczka {
	margin: 26px 0 0;
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6b5f74;
}

.hdk-wpis-naglowek__kropka {
	margin: 0 10px;
}

/* --------------------------------------------------------------------------
   Zdjecie otwierajace
   -------------------------------------------------------------------------- */

.hdk-wpis-hero {
	margin: 0 0 44px;
}

.hdk-wpis-hero__obraz {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.hdk-wpis-hero__podpis {
	margin: 12px auto 0;
	max-width: 780px;
	font-size: .82rem;
	line-height: 1.5;
	color: #6b5f74;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Tresc wpisu - wspolny rytm dla wszystkich wpisow, takze bez notek
   -------------------------------------------------------------------------- */

.hdk-wpis .entry-content > h2 {
	margin-top: 2.2em;
	margin-bottom: .5em;
	line-height: 1.25;
}

.hdk-wpis .entry-content > h3 {
	margin-top: 1.8em;
	margin-bottom: .4em;
}

.hdk-wpis .entry-content > figure.wp-block-image {
	margin-top: 2em;
	margin-bottom: 2em;
}

.hdk-wpis .entry-content figure.wp-block-image img {
	border-radius: 10px;
}

.hdk-wpis .entry-content .wp-element-caption {
	margin-top: 10px;
	font-size: .85rem;
	line-height: 1.5;
	color: #6b5f74;
}

@media (max-width: 782px) {
	.hdk-wpis-naglowek {
		margin-bottom: 28px;
	}

	.hdk-wpis-hero {
		margin-bottom: 32px;
	}

	.hdk-wpis-hero__obraz {
		border-radius: 0;
	}
}

/* ----------------------------------------------------------------------
 * Omnibus - najnizsza cena z 30 dni przed obnizka (inc/omnibus.php).
 * Dopisek stoi pod przekreslona cena wszedzie, gdzie WooCommerce ja rysuje:
 * strona produktu, kafelki list, cross-selle, pasek koszyka.
 * -------------------------------------------------------------------- */
.hdk-omnibus {
	display: block;
	width: 100%;
	flex-basis: 100%;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 400;
	color: #6b6b6b;
	text-decoration: none;
}

.hdk-omnibus .amount,
.hdk-omnibus bdi {
	font-size: inherit;
	font-weight: 500;
	color: inherit;
}

.single-product div.product .summary > .price .hdk-omnibus,
.single-product div.product .summary > .price-tag .hdk-omnibus {
	font-size: 14px;
	opacity: 0.85;
}

/* ----------------------------------------------------------------------
 * Opis kategorii produktow (inc/opis-kategorii.php).
 * Lead stoi nad siatka i jest celowo krotki - dwa-trzy zdania, zeby nie
 * spychac produktow pod ekran. Rozwiniecie z naglowkami H2 idzie pod
 * siatke, gdzie moze byc dluzsze.
 * -------------------------------------------------------------------- */
.hdk-opis-kategorii {
	max-width: 760px;
	margin-inline: auto;
	font-size: 16px;
	line-height: 1.65;
	color: #3f3f3f;
}

.hdk-opis-kategorii p {
	margin: 0 0 1em;
}

.hdk-opis-kategorii p:last-child {
	margin-bottom: 0;
}

.hdk-opis-kategorii a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hdk-opis-kategorii a:hover,
.hdk-opis-kategorii a:focus-visible {
	text-decoration-thickness: 2px;
}

.hdk-opis-kategorii--lead {
	margin-bottom: 32px;
	font-size: 17px;
	text-align: center;
}

.hdk-opis-kategorii--rozwiniecie {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid #e6e2dc;
}

.hdk-opis-kategorii--rozwiniecie h2 {
	margin: 32px 0 12px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
}

.hdk-opis-kategorii--rozwiniecie h2:first-child {
	margin-top: 0;
}

@media (max-width: 767px) {
	.hdk-opis-kategorii--lead {
		font-size: 16px;
		text-align: left;
		margin-bottom: 24px;
	}

	.hdk-opis-kategorii--rozwiniecie {
		margin-top: 40px;
		padding-top: 32px;
	}

	.hdk-opis-kategorii--rozwiniecie h2 {
		font-size: 20px;
		margin-top: 28px;
	}
}

/* ----------------------------------------------------------------------
 * Sekcja: wpisy z bloga na stronie glownej (inc/sekcja-blog.php).
 * Uklad i typografia jak w sekcji FAQ, ktora stoi zaraz pod nia - trzy
 * karty w rzedzie na desktopie, jedna pod druga na telefonie.
 * -------------------------------------------------------------------- */
.hdk-blog {
	background-color: #faf8f5;

	/* wyjscie z kontenera .col-full motywu Shoptimizer */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.hdk-blog .hdk-blog__wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 56px 20px;
}

.hdk-blog .hdk-blog__tytul {
	margin: 0 0 14px;
	font-family: var(--hdk-font);
	font-size: clamp(34px, 3.2vw, 48px);
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	color: #222;
}

.hdk-blog .hdk-blog__opis {
	max-width: 640px;
	margin: 0 auto 36px;
	font-size: 17px;
	line-height: 1.6;
	text-align: center;
	color: #5c5c5c;
}

.hdk-blog .hdk-blog__lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdk-blog .hdk-blog__karta {
	display: flex;
}

.hdk-blog .hdk-blog__link {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 100%;
	border: 1px solid #ece9f9;
	border-radius: 16px;
	background-color: #fff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hdk-blog .hdk-blog__link:hover,
.hdk-blog .hdk-blog__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.hdk-blog .hdk-blog__obraz {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: #efeae3;
}

.hdk-blog .hdk-blog__obraz img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hdk-blog .hdk-blog__tresc {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
}

.hdk-blog .hdk-blog__naglowek {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: #222;
}

.hdk-blog .hdk-blog__lead {
	font-size: 15px;
	line-height: 1.55;
	color: #5c5c5c;
}

.hdk-blog .hdk-blog__wiecej {
	margin: 36px 0 0;
	text-align: center;
}

.hdk-blog .hdk-blog__przycisk {
	display: inline-block;
	padding: 13px 28px;
	border-radius: 3px;
	background-color: #222;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.hdk-blog .hdk-blog__przycisk:hover,
.hdk-blog .hdk-blog__przycisk:focus-visible {
	background-color: #000;
	color: #fff;
}

@media (max-width: 991px) {
	.hdk-blog .hdk-blog__lista {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.hdk-blog .hdk-blog__wrap {
		padding: 40px 20px;
	}

	.hdk-blog .hdk-blog__opis {
		margin-bottom: 24px;
		font-size: 16px;
	}
}


/* ---------------------------------------------------------------------------
   BLOK IMIENINOWY nad zdjeciem wpisu (inc/blok-imieninowy.php)

   Dwie kolumny: daty i karta produktu. Karta to ten sam `.hdk-produkt` co
   w karuzeli, wiec dostaje tu tylko szerokosc - reszte ma z wlasnych regul.
   Arkusz wersji chrzescijanskiej NIE laduje sie na wpisach bloga, dlatego
   kolory sa tutaj, w arkuszu globalnym.
--------------------------------------------------------------------------- */
.hdk-imieniny {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 28px;
	align-items: start;
	/*
	 * ⚠️ Wlasne wyrownanie i szerokosc, bo blok siedzi WEWNATRZ
	 * `.hdk-wpis-naglowek` - a ten ma `text-align: center` i `max-width: 780px`.
	 * Bez tego lista dat czytala sie jak cytat, a karta obok nie miala miejsca.
	 */
	text-align: left;
	max-width: 1040px;
	margin: 0 auto 36px;
	padding: 26px 28px;
	border: 1px solid #231F1A;
	background: #F4F1E6;
	color: #231F1A;
}

.hdk-imieniny--bez-karty {
	grid-template-columns: minmax(0, 1fr);
}

.hdk-imieniny .hdk-imieniny__tytul {
	margin: 0 0 16px;
	font-size: 1.5rem;
	line-height: 1.25;
}

.hdk-imieniny .hdk-imieniny__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hdk-imieniny;
}

.hdk-imieniny .hdk-imieniny__pozycja {
	position: relative;
	margin: 0 0 14px;
	padding: 0 0 14px 42px;
	border-bottom: 1px solid rgba(35, 31, 26, .14);
	counter-increment: hdk-imieniny;
}

.hdk-imieniny .hdk-imieniny__pozycja:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.hdk-imieniny .hdk-imieniny__pozycja::before {
	content: counter(hdk-imieniny);
	position: absolute;
	top: 1px;
	left: 0;
	display: flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #2F5D3A;
	color: #F6F2E4;
	font-size: .95rem;
	font-weight: 600;
}

.hdk-imieniny .hdk-imieniny__data {
	display: block;
	font-size: 1.15rem;
	font-weight: 600;
}

.hdk-imieniny .hdk-imieniny__opis {
	display: block;
	margin-top: 3px;
	color: #4A443C;
	line-height: 1.5;
}

.hdk-imieniny .hdk-imieniny__produkt > .hdk-produkt {
	width: 100%;
}

/*
 * Zdjecie kwadratowe - w karuzeli kafelek ma staly slup 270px, ale tutaj
 * karta stoi obok listy dat i prostokat rozjezdzal sie z jej wysokoscia.
 */
.hdk-imieniny .hdk-produkt__zdjecie {
	height: auto;
	aspect-ratio: 1 / 1;
}

.hdk-imieniny .hdk-imieniny__pod {
	margin: 10px 0 0;
	font-size: .9rem;
	line-height: 1.45;
	color: #6B6358;
}

@media (max-width: 900px) {
	.hdk-imieniny {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		padding: 22px 20px;
	}
}