/*
Theme Name: Kadence Child
Description: Kadence child theme for claro24 customizations.
Template: kadence
Version: 1.3.8
Text Domain: kadence-child
*/

/* ==========================================================================
   Claro homepage design system
   Scoped to .claro-* classes used on the homepage blocks (page 9651 / Home).
   Brand: #2B6CB0 primary blue, #1A202C navy, #F7F7F7 surface, Montserrat.
   ========================================================================== */

:root {
	--claro-blue: #2B6CB0;
	--claro-blue-dark: #265E9A;
	--claro-navy: #1A202C;
	--claro-ink: #222222;
	--claro-muted: #515151;
	--claro-surface: #F7F7F7;
	--claro-radius: 6px;
	--claro-shadow: 0 10px 30px -12px rgba(26, 32, 44, 0.25);
}

/* --- Eyebrow labels --------------------------------------------------- */
.claro-eyebrow {
	font-family: var(--global-heading-font-family, 'Montserrat', sans-serif);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--claro-blue);
	margin-bottom: 0.75em;
}

.claro-eyebrow-light {
	color: #8FC1F2;
}

/* --- Section headings -------------------------------------------------- */
.claro-section-title {
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--claro-ink);
	margin-top: 0;
	margin-bottom: 0.5em;
	position: relative;
	padding-bottom: 0.55em;
}

.claro-section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--claro-blue), #8FC1F2);
}

.claro-title-light {
	color: #ffffff;
}

.claro-section-lead {
	max-width: 640px;
	color: var(--claro-muted);
	font-size: 1.05rem;
	line-height: 1.7;
	margin-bottom: 0;
}

/* --- Hero --------------------------------------------------------------- */
.claro-hero {
	background: linear-gradient(135deg, #131924 0%, #1A202C 45%, #234E7D 100%);
	overflow: hidden;
}

.claro-hero > .kt-row-column-wrap {
	padding-top: clamp(3rem, 4vw, 4rem) !important;
	padding-bottom: clamp(3rem, 4vw, 4rem) !important;
}

.claro-hero-title {
	color: #ffffff;
	font-size: clamp(2.1rem, 4.5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 0.45em !important;
}

.claro-hero .claro-hero-lead {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.12rem;
	line-height: 1.7;
	max-width: 520px;
	margin-top: 0.4em;
	margin-bottom: 2.2em;
}

.claro-hero-img img {
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}

/* Hero product image melts into the navy banner (mockup look): the photo
   full-bleeds to the section's top/right/bottom edges and only its left and
   bottom edges fade to transparent, so the gradient background shows through
   instead of a hard photo rectangle. */
.claro-hero-media figure.wp-block-image {
	background: transparent;
	box-shadow: none;
	margin: 0;
}

.claro-hero-media img {
	filter: none;
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, #000 34%),
		linear-gradient(to bottom, #000 84%, transparent 100%);
	mask-image:
		linear-gradient(to right, transparent 0%, #000 34%),
		linear-gradient(to bottom, #000 84%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

@media (min-width: 992px) {
	.claro-hero-text {
		position: relative;
		z-index: 2;
	}

	/* Neutralise Kadence's positioned wrappers so the figure anchors to the
	   full-width .claro-hero section (and can bleed to the viewport edge). */
	.claro-hero > .kt-row-column-wrap,
	.claro-hero .claro-hero-media,
	.claro-hero .claro-hero-media .kt-inside-inner-col {
		position: static !important;
	}

	.claro-hero-media figure.wp-block-image {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 58%;
		height: 100%;
		z-index: 0;
	}

	.claro-hero-media figure.wp-block-image a {
		display: block;
		width: 100%;
		height: 100%;
	}

	.claro-hero-media figure.wp-block-image img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center 45% !important;
	}
}

/* --- Buttons ------------------------------------------------------------ */
.claro-hero-buttons {
	gap: clamp(0.75rem, 1.1vw, 1rem) !important;
}

.claro-btn-primary .wp-block-button__link {
	background: var(--claro-blue);
	color: #ffffff;
	border-radius: var(--claro-radius);
	font-weight: 600;
	padding: 0.85em 1.9em;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 6px 18px -6px rgba(43, 108, 176, 0.55);
}

.claro-btn-primary .wp-block-button__link:hover {
	background: var(--claro-blue-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -6px rgba(43, 108, 176, 0.65);
}

.claro-btn-ghost .wp-block-button__link {
	background: transparent;
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--claro-radius);
	font-weight: 600;
	padding: 0.78em 1.7em;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.claro-btn-ghost .wp-block-button__link:hover {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.claro-btn-invert .wp-block-button__link {
	background: #ffffff;
	color: var(--claro-blue);
	border-radius: var(--claro-radius);
	font-weight: 700;
	padding: 0.85em 2em;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.claro-btn-invert .wp-block-button__link:hover {
	color: var(--claro-blue-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35);
}

/* --- Trust bar ----------------------------------------------------------- */
.claro-trustbar {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.claro-trust-item {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.92rem;
	font-weight: 500;
	text-align: center;
	margin: 0;
}

/* --- Value cards ---------------------------------------------------------- */
.claro-card > .kt-inside-inner-col {
	background: #ffffff;
	border: 1px solid #ECECEC;
	border-top: 4px solid var(--claro-blue);
	border-radius: var(--claro-radius);
	padding: 2rem 1.75rem;
	height: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.claro-card:hover > .kt-inside-inner-col {
	transform: translateY(-6px);
	box-shadow: var(--claro-shadow);
}

.claro-card-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--claro-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.1rem;
}

.claro-card-icon svg {
	width: 26px;
	height: 26px;
	stroke: #ffffff;
}

.claro-card-num {
	font-family: var(--global-heading-font-family, 'Montserrat', sans-serif);
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--claro-blue);
	margin-bottom: 1rem;
}

.claro-card-title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--claro-ink);
	margin: 0 0 0.6em;
}

.claro-card-text {
	color: var(--claro-muted);
	line-height: 1.7;
	margin: 0;
}

/* --- Category cards -------------------------------------------------------- */
.claro-cat-card figure.wp-block-image {
	position: relative;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	background: var(--claro-navy);
	box-shadow: 0 12px 30px -18px rgba(26, 32, 44, 0.5);
	transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.claro-cat-card figure.wp-block-image:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 42px -20px rgba(26, 32, 44, 0.58);
}

.claro-cat-card figure.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1.6 / 1;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 0.7s ease-out;
}

.claro-cat-card figure.wp-block-image:hover img {
	transform: scale(1.1);
}

.claro-cat-card figcaption.wp-element-caption {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 1.25rem 1.5rem;
	display: flex;
	align-items: flex-end;
	text-align: left;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 6rem),
		linear-gradient(0deg, rgba(13, 19, 28, 0.95) 0%, rgba(26, 32, 44, 0.25) 55%, rgba(26, 32, 44, 0) 100%);
	transition: background 0.5s ease;
}

.claro-cat-card figure.wp-block-image:hover figcaption.wp-element-caption {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 6rem),
		linear-gradient(0deg, rgba(13, 19, 28, 1) 0%, rgba(26, 32, 44, 0.35) 55%, rgba(26, 32, 44, 0) 100%);
}

.claro-cat-card figcaption.wp-element-caption a {
	display: block;
	width: 100%;
	padding-right: 3.4rem;
	color: #ffffff;
	text-decoration: none;
}

.claro-cat-eyebrow {
	display: block;
	font-family: var(--global-heading-font-family, 'Montserrat', sans-serif);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 0.3em;
}

.claro-cat-card figcaption.wp-element-caption a strong {
	display: block;
	font-family: var(--global-heading-font-family, 'Montserrat', sans-serif);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* Circular arrow button, bottom-right */
.claro-cat-card figcaption.wp-element-caption a::after {
	content: "↗";
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #ffffff;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1;
	transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.claro-cat-card figure.wp-block-image:hover figcaption.wp-element-caption a::after {
	transform: rotate(45deg);
	background: #ffffff;
	border-color: #ffffff;
	color: var(--claro-navy);
}

/* Featured badge (Promocje) */
.claro-cat-featured figure.wp-block-image::before {
	content: "Promocja";
	position: absolute;
	left: 1rem;
	top: 1rem;
	z-index: 2;
	padding: 0.45rem 0.8rem;
	border-radius: 999px;
	background: #E5C965;
	color: #233238;
	font-family: var(--global-heading-font-family, 'Montserrat', sans-serif);
	font-size: 0.63rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	box-shadow: 0 1px 3px rgba(26, 32, 44, 0.25);
}

/* --- Brand band (marka Claro) --------------------------------------------- */
.claro-brand-band {
	background: linear-gradient(120deg, #1A202C 0%, #234E7D 100%);
}

.claro-band-text {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.08rem;
	line-height: 1.7;
	max-width: 480px;
	margin-bottom: 1.6em;
}

.claro-brand-img img {
	border-radius: var(--claro-radius);
	box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.45);
}

/* --- Partner logo strip ------------------------------------------------------ */
.claro-logo-strip img {
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter 0.25s ease, opacity 0.25s ease;
	margin: 0 auto;
	display: block;
	max-width: 140px;
}

.claro-logo-strip img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* --- B2B CTA card ---------------------------------------------------------------- */
.claro-b2b-cta {
	display: flex;
	border-radius: 18px;
	overflow: hidden;
	background: linear-gradient(135deg, #1A4E82 0%, var(--claro-blue) 50%, #2C5282 100%);
	box-shadow: 0 25px 50px -12px rgba(26, 32, 44, 0.35);
	min-height: 420px;
}

.claro-b2b-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 3.5rem 3rem;
	position: relative;
	z-index: 1;
}

.claro-b2b-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 1rem;
	margin-bottom: 1.8rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #DBEAFE;
	font-family: var(--global-heading-font-family, 'Montserrat', sans-serif);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.claro-b2b-pill svg {
	width: 14px;
	height: 14px;
	stroke: #BFDBFE;
}

.claro-b2b-title {
	color: #ffffff;
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 0.6em;
}

.claro-b2b-text {
	color: #DBEAFE;
	font-size: 1rem;
	line-height: 1.7;
	max-width: 440px;
	margin: 0 0 1.8em;
}

.claro-b2b-cta ul.claro-b2b-benefits {
	list-style: none;
	margin: 0 0 2.2em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.claro-b2b-benefits li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.92rem;
}

.claro-b2b-benefits svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	stroke: #93C5FD;
}

.claro-b2b-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.95em 1.9em;
	border-radius: 8px;
	background: #ffffff;
	color: #1A4E82;
	font-family: var(--global-heading-font-family, 'Montserrat', sans-serif);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.4);
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.claro-b2b-btn:hover {
	background: #EFF6FF;
	color: #1A4E82;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.45);
}

.claro-b2b-btn svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
}

.claro-b2b-media {
	position: relative;
	width: 38%;
	flex-shrink: 0;
	overflow: hidden;
}

.claro-b2b-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.claro-b2b-media-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, var(--claro-blue) 0%, rgba(43, 108, 176, 0) 30%),
		linear-gradient(to top, rgba(26, 78, 130, 0.75) 0%, rgba(26, 78, 130, 0) 55%);
}

.claro-b2b-stats {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	gap: 0.8rem;
	padding: 1.1rem 1.25rem;
}

.claro-b2b-stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0.7rem 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.claro-b2b-stat svg {
	width: 16px;
	height: 16px;
	stroke: #BFDBFE;
	margin-bottom: 0.3rem;
}

.claro-b2b-stat strong {
	color: #ffffff;
	font-family: var(--global-heading-font-family, 'Montserrat', sans-serif);
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1;
}

.claro-b2b-stat span {
	color: #BFDBFE;
	font-size: 0.62rem;
	line-height: 1.3;
	margin-top: 0.25rem;
}

@media (max-width: 1024px) {
	.claro-b2b-cta {
		flex-direction: column;
		min-height: 0;
	}

	.claro-b2b-content {
		padding: 2.5rem 1.75rem;
	}

	.claro-b2b-media {
		width: 100%;
		min-height: 300px;
	}

	.claro-b2b-media-overlay {
		background:
			linear-gradient(to bottom, var(--claro-blue) 0%, rgba(43, 108, 176, 0) 25%),
			linear-gradient(to top, rgba(26, 78, 130, 0.75) 0%, rgba(26, 78, 130, 0) 55%);
	}
}

/* --- Products bands ------------------------------------------------------------- */
.claro-products-band .woocommerce ul.products {
	margin-top: 1.5rem;
}

.claro-products-band .woocommerce ul.products li.product {
	background: #ffffff;
	border: 1px solid #ECECEC;
	border-radius: var(--claro-radius);
	padding: 1.1rem 1.1rem 1.25rem;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.claro-products-band .woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--claro-shadow);
	border-color: #DCE6F2;
}

.claro-products-band .woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	margin-bottom: 0.9rem;
}

.claro-products-band .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--claro-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(3 * 1.45em);
}

.claro-products-band .woocommerce ul.products li.product .price {
	margin-top: auto;
	padding-top: 0.6rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--claro-blue);
}

/* --- Mobile: compact single-line trust bar ------------------------------------------ */
@media (max-width: 767px) {
	.claro-trustbar > .kt-row-column-wrap {
		display: flex !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 1.5rem;
	}

	.claro-trustbar > .kt-row-column-wrap::-webkit-scrollbar {
		display: none;
	}

	.claro-trustbar .wp-block-kadence-column {
		flex: 0 0 auto;
	}

	.claro-trust-item {
		white-space: nowrap;
		font-size: 0.85rem;
	}
}

/* --- Mobile: horizontal product scroller (shortcode class="mobile-scroll") -------- */
@media (max-width: 767px) {
	.claro-products-band .woocommerce.mobile-scroll ul.products {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 12px;
		padding-bottom: 0.75rem;
		scrollbar-width: thin;
	}

	.claro-products-band .woocommerce.mobile-scroll ul.products li.product {
		flex: 0 0 68%;
		max-width: 68%;
		margin: 0;
		scroll-snap-align: start;
	}
}

/* --- Mobile: compact 2-col category tiles ------------------------------------------ */
@media (max-width: 767px) {
	.claro-cat-grid > .kt-row-column-wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: 12px !important;
		row-gap: 12px !important;
	}

	.claro-cat-card figcaption.wp-element-caption {
		padding: 0.75rem 0.85rem;
	}

	.claro-cat-card figcaption.wp-element-caption a {
		padding-right: 2.4rem;
	}

	.claro-cat-card figcaption.wp-element-caption a strong {
		font-size: 0.95rem;
	}

	.claro-cat-eyebrow {
		font-size: 0.55rem;
	}

	.claro-cat-card figcaption.wp-element-caption a::after {
		width: 28px;
		height: 28px;
		right: 0.75rem;
		bottom: 0.75rem;
		font-size: 0.85rem;
	}

	.claro-cat-featured figure.wp-block-image::before {
		left: 0.6rem;
		top: 0.6rem;
		padding: 0.3rem 0.6rem;
		font-size: 0.55rem;
	}
}

/* --- Footer ------------------------------------------------------------------------ */
.site-footer {
	position: relative;
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--claro-blue), #8FC1F2);
}

.site-footer .site-top-footer-wrap {
	padding-top: 1.5rem;
	padding-bottom: 1rem;
}

#colophon .widget-title,
#colophon .footer-social-wrap .widget-title {
	font-family: var(--global-heading-font-family, 'Montserrat', sans-serif);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8FC1F2;
	margin-bottom: 1.1em;
}

.site-footer .textwidget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .textwidget ul li {
	margin-bottom: 0.55em;
}

#colophon .textwidget a,
#colophon .footer-html a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: color 0.2s ease;
}

#colophon .textwidget a:hover,
#colophon .footer-html a:hover {
	color: #8FC1F2;
}

.claro-ft-tagline {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.92rem;
	line-height: 1.65;
	max-width: 320px;
}

.claro-ft-contact li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	line-height: 1.45;
	margin-bottom: 0.7rem !important;
}

.claro-ft-contact li::before {
	content: "";
	display: block;
	flex: 0 0 1rem;
	width: 1rem;
	height: 1rem;
	background-color: rgba(255, 255, 255, 0.78);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.claro-ft-contact li:nth-child(1)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.claro-ft-contact li:nth-child(2)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

.claro-ft-contact li:nth-child(3)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

.claro-ft-contact .claro-ft-ico {
	flex: 0 0 auto;
}

.claro-ft-contact span {
	color: rgba(255, 255, 255, 0.78);
}

.claro-ft-b2b {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.92rem;
	line-height: 1.65;
	margin-bottom: 0.9em;
}

#colophon .textwidget a.claro-ft-b2b-link {
	color: #8FC1F2;
	font-weight: 600;
}

#colophon .textwidget a.claro-ft-b2b-link:hover {
	color: #ffffff;
}

.site-footer .footer-social-wrap {
	margin-top: 1.4rem;
}

#colophon .footer-social-inner-wrap .social-button {
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--claro-radius);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

#colophon .footer-social-inner-wrap .social-button:hover {
	background: var(--claro-blue);
	transform: translateY(-2px);
}

.claro-ft-payments {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.claro-ft-payment-zone {
	margin-top: 0.7rem;
}

#colophon .claro-ft-payment-label {
	margin: 0 0 0.55rem;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.7);
}

.claro-flux-payment-footer {
	padding: 1rem 1.5rem;
	border-top: 1px solid #e1e1e1;
	background: #f7f7f7;
	text-align: center;
}

.claro-flux-payment-footer .claro-ft-payment-zone {
	margin: 0;
}

.claro-flux-payment-footer .claro-ft-payment-label {
	margin: 0 0 0.55rem;
	font-size: 0.8rem;
	color: #515151;
}

.claro-flux-payment-footer .claro-ft-payments {
	justify-content: center;
}

/* #colophon beats .woocommerce-page img { height: auto } on shop/archive pages */
#colophon .claro-ft-payments img,
.claro-ft-payments img {
	height: 26px;
	width: auto;
	opacity: 0.9;
	border-radius: 3px;
}

.site-footer .site-bottom-footer-wrap {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#colophon .footer-html p {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.55);
	margin: 0;
}

@media (max-width: 767px) {
	.claro-ft-payments {
		justify-content: center;
	}

	.claro-ft-payment-zone {
		text-align: center;
	}

	.site-footer .footer-html p {
		text-align: center;
	}
}

/* --- Motion safety ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.claro-card > .kt-inside-inner-col,
	.claro-cat-card figure.wp-block-image,
	.claro-cat-card figure.wp-block-image img,
	.claro-cat-card figcaption.wp-element-caption,
	.claro-cat-card figcaption.wp-element-caption a::after,
	.claro-btn-primary .wp-block-button__link,
	.claro-btn-invert .wp-block-button__link {
		transition: none;
	}
}


/* ==========================================================================
   FacetWP filter sidebar (product category archives)
   One bordered card: all facet widgets inside .sidebar-slug-sidebar-secondary
   merge into a single panel with internal dividers. Empty facets hidden by
   js/claro-facet-sidebar.js on the facetwp-loaded event.
   ========================================================================== */

.sidebar-slug-sidebar-secondary .sidebar-inner-wrap {
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(26, 32, 44, 0.04);
}

/* Panel header */
.sidebar-slug-sidebar-secondary .sidebar-inner-wrap::before {
	content: "Filtry";
	display: block;
	padding: 1rem 1.25rem;
	font-family: var(--global-heading-font-family, 'Montserrat', sans-serif);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--claro-navy);
	border-bottom: 1px solid #E2E8F0;
	background: var(--claro-surface);
}

/* Each facet group: flat section with divider, no gaps between widgets */
.sidebar-slug-sidebar-secondary .sidebar-inner-wrap .widget {
	margin: 0;
	padding: 1rem 1.25rem 1.15rem;
}

.sidebar-slug-sidebar-secondary .sidebar-inner-wrap .widget + .widget {
	border-top: 1px solid #EDF2F7;
}

.primary-sidebar.widget-area.sidebar-slug-sidebar-secondary .widget-title {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--claro-navy);
	margin: 0 0 0.7em;
	padding: 0;
	border: none;
}

/* FacetWP ships 40px margin-bottom per facet — kill it inside the card */
.sidebar-slug-sidebar-secondary .facetwp-facet,
.sidebar-slug-sidebar-secondary .textwidget > :last-child {
	margin-bottom: 0;
}

/* --- Checkbox choices --------------------------------------------------- */
.sidebar-slug-sidebar-secondary .facetwp-checkbox {
	background-image: none !important;
	padding: 0.28em 0 0.28em 1.7em;
	position: relative;
	font-size: 0.92rem;
	color: var(--claro-ink);
	line-height: 1.45;
	transition: color 0.15s ease;
}

.sidebar-slug-sidebar-secondary .facetwp-checkbox:hover {
	color: var(--claro-blue);
}

.sidebar-slug-sidebar-secondary .facetwp-checkbox::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 17px;
	height: 17px;
	border: 1.5px solid #CBD5E0;
	border-radius: 4px;
	background: #ffffff;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sidebar-slug-sidebar-secondary .facetwp-checkbox:hover::before {
	border-color: var(--claro-blue);
}

.sidebar-slug-sidebar-secondary .facetwp-checkbox.checked::before {
	background-color: var(--claro-blue);
	border-color: var(--claro-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 12px 12px;
	background-position: center;
	background-repeat: no-repeat;
}

.sidebar-slug-sidebar-secondary .facetwp-counter {
	color: #94A3B8;
	font-size: 0.85em;
}

/* Soft-limit "toggle more" link */
.sidebar-slug-sidebar-secondary .facetwp-toggle {
	color: var(--claro-blue);
	font-size: 0.85rem;
	margin-top: 0.35em;
}

/* --- Hierarchy facet (Kategoria) ---------------------------------------- */
.sidebar-slug-sidebar-secondary .facetwp-type-hierarchy .facetwp-link {
	padding: 0.28em 0;
	font-size: 0.92rem;
	color: var(--claro-ink);
	cursor: pointer;
	transition: color 0.15s ease;
}

.sidebar-slug-sidebar-secondary .facetwp-type-hierarchy .facetwp-link:hover {
	color: var(--claro-blue);
}

.sidebar-slug-sidebar-secondary .facetwp-type-hierarchy .facetwp-link.checked {
	color: var(--claro-blue);
	font-weight: 600;
}

/* --- Sliders (Cena, Pojemność) ------------------------------------------ */
.sidebar-slug-sidebar-secondary .facetwp-slider-wrap {
	padding: 0.5em 0.25em 0.25em;
}

.sidebar-slug-sidebar-secondary .facetwp-slider .noUi-connect {
	background: var(--claro-blue);
}

.sidebar-slug-sidebar-secondary .facetwp-slider.noUi-target {
	border: none;
	box-shadow: none;
	background: #E2E8F0;
	height: 5px;
}

.sidebar-slug-sidebar-secondary .facetwp-slider .noUi-handle {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid var(--claro-blue);
	box-shadow: 0 1px 3px rgba(26, 32, 44, 0.2);
	cursor: grab;
	top: -7px;
	right: -9px;
}

.sidebar-slug-sidebar-secondary .facetwp-slider .noUi-handle::before,
.sidebar-slug-sidebar-secondary .facetwp-slider .noUi-handle::after {
	display: none;
}

.sidebar-slug-sidebar-secondary .facetwp-slider-label {
	font-size: 0.88rem;
	color: var(--claro-muted);
	margin-top: 0.5em;
	display: block;
}

/* --- Buttons: ghost style, never the red CTA color ----------------------- */
.sidebar-slug-sidebar-secondary .facetwp-slider-reset,
.sidebar-slug-sidebar-secondary .facetwp-reset,
.sidebar-slug-sidebar-secondary input[type="button"],
.sidebar-slug-sidebar-secondary button {
	background: #ffffff;
	color: var(--claro-muted);
	border: 1px solid #CBD5E0;
	border-radius: 6px;
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1;
	padding: 0.55em 1.1em;
	margin-top: 0.75em;
	box-shadow: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.sidebar-slug-sidebar-secondary .facetwp-slider-reset:hover,
.sidebar-slug-sidebar-secondary .facetwp-reset:hover,
.sidebar-slug-sidebar-secondary input[type="button"]:hover,
.sidebar-slug-sidebar-secondary button:hover {
	background: #ffffff;
	color: var(--claro-blue);
	border-color: var(--claro-blue);
}

@media (prefers-reduced-motion: reduce) {
	.sidebar-slug-sidebar-secondary .facetwp-checkbox,
	.sidebar-slug-sidebar-secondary .facetwp-checkbox::before,
	.sidebar-slug-sidebar-secondary .facetwp-type-hierarchy .facetwp-link,
	.sidebar-slug-sidebar-secondary .facetwp-slider-reset,
	.sidebar-slug-sidebar-secondary .facetwp-reset {
		transition: none;
	}
}

/* ============================================================
   B2B landing page (page 9796)
   ============================================================ */
.claro-b2b-hero .claro-hero-title {
	max-width: 16ch;
}
.claro-b2b-mark .kt-inside-inner-col {
	display: flex;
	justify-content: center;
}
.claro-b2b-mark svg {
	width: min(240px, 55%);
	height: auto;
	opacity: 0.9;
}
.claro-b2b-contact {
	scroll-margin-top: 120px;
}
.claro-b2b-offer-link a {
	color: #2B6CB0;
	font-weight: 600;
	text-decoration: none;
}
.claro-b2b-offer-link a:hover {
	text-decoration: underline;
}
.claro-b2b-contact .claro-trust-item {
	color: #2D3748;
	text-align: left;
}
.claro-b2b-form-card .kt-inside-inner-col {
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 10px 30px rgba(26, 32, 44, 0.08);
}
@media (max-width: 767px) {
	.claro-b2b-hero .claro-b2b-mark {
		display: none;
	}
	.claro-b2b-form-card .kt-inside-inner-col {
		padding: 24px 20px;
	}
}

/* ==========================================================================
   Info pages (Kontakt, Pomoc, Koszty dostawy, Zwroty, Regulamin, O nas,
   Polityka prywatności/cookies) — shared brandbook-exact styling.
   Brand: #5BC5F2 primary, #004070 navy, Montserrat. Scoped to
   .claro-info-page so it never touches homepage/theme tokens above.
   ========================================================================== */

.claro-info-page {
	max-width: 72ch;
	margin: 0 auto;
	color: #1A1A1A;
}

.claro-info-page :is(h1, h2, h3, h4) {
	font-family: var(--global-heading-font-family, 'Montserrat', sans-serif);
	line-height: 1.25;
	font-weight: 700;
	color: #004070;
}

.claro-info-page h2 {
	font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
	margin: 2rem 0 0.75rem;
}

.claro-info-page h3 {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	margin: 1.5rem 0 0.5rem;
}

.claro-info-page h4 {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	margin: 1.25rem 0 0.5rem;
}

.claro-info-page p {
	margin: 0.75rem 0;
	color: #1A1A1A;
	line-height: 1.7;
}

.claro-info-page ul,
.claro-info-page ol {
	margin: 0.75rem 0 0.75rem 1.25rem;
}

.claro-info-page li {
	margin: 0.35rem 0;
}

.claro-info-page a {
	color: #5BC5F2;
	text-decoration: underline;
}

.claro-info-page a:hover {
	color: #004070;
}

/* Table of contents / nav (Regulamin, Zwroty) */
.claro-info-page nav ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25em;
	display: grid;
	gap: 0.25em;
}

.claro-info-page nav a {
	text-decoration: none;
	color: #004070;
}

.claro-info-page nav a:hover {
	color: #5BC5F2;
}

/* wp:details FAQ blocks (Pomoc) */
.claro-info-page details.wp-block-details {
	border: 1px solid #E2E8F0;
	border-radius: var(--claro-radius, 6px);
	padding: 0.9rem 1.1rem;
	margin-bottom: 0.75rem;
}

.claro-info-page details.wp-block-details summary {
	font-weight: 600;
	color: #004070;
	cursor: pointer;
}

/* ==========================================================================
   Product loop quantity stepper — adds the same +/- quantity control used
   on the single product page to shop/category/search product cards, next
   to the AJAX add-to-cart button. See woocommerce/loop/add-to-cart.php and
   js/claro-loop-quantity.js.

   Layout: cards leave only ~155–225px for the action row (4-col grid on
   desktop, ~68%-wide cards in the homepage mobile scroller) — too narrow
   for the 115px button label to sit next to the stepper. So the two always
   stack, at every width: the stepper takes a full-width row (qty input
   stretches between the 24px −/+ buttons) and the button takes the next
   full-width row, both 40px tall, so they read as one tidy block with the
   full label visible. The only other row allowed is the "Zobacz koszyk"
   link WooCommerce injects after a successful AJAX add (see rules below).

   No mobile exception: product archives drop to one column on phones
   (Kadence's "Mobile Columns Layout" = One Column), and the homepage
   [products class="mobile-scroll"] bands become a horizontal scroller with
   ~68%-wide cards, so both leave plenty of room for the stacked rows.
   ========================================================================== */

.claro-loop-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5em;
	width: 100%;
}

.claro-loop-add-to-cart .quantity,
.claro-loop-add-to-cart .quantity.spinners-added {
	display: flex;
	align-items: stretch;
	width: 100% !important;
	flex: 0 0 100%;
	margin: 0;
	border: 1px solid #E2E8F0;
	border-radius: var(--claro-radius);
	overflow: hidden;
}

.claro-loop-add-to-cart .quantity .qty,
.claro-loop-add-to-cart .quantity.spinners-added .qty {
	width: 32px !important;
	flex: 1 1 auto;
	min-width: 32px;
	height: 38px;
	padding: 0;
	margin: 0;
	text-align: center;
	border: 0;
	border-left: 1px solid #E2E8F0;
	border-right: 1px solid #E2E8F0;
	border-radius: 0;
}

.claro-loop-add-to-cart .quantity.spinners-added input.plus,
.claro-loop-add-to-cart .quantity.spinners-added input.minus {
	background: transparent;
	color: var(--claro-muted);
	border: 0;
	box-shadow: none;
	width: 24px;
	min-width: 24px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.claro-loop-add-to-cart .quantity.spinners-added input.plus:hover,
.claro-loop-add-to-cart .quantity.spinners-added input.minus:hover {
	color: var(--claro-blue);
	background: transparent;
}

.woocommerce ul.products li.product .claro-loop-add-to-cart a.add_to_cart_button {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.9em;
	line-height: 1.2;
	margin: 0;
	border-radius: var(--claro-radius);
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 10px;
	padding-right: 10px;
}

/* The button is a flex box, so text-overflow on it has no effect and a
   centred, nowrap label that is too long gets clipped on both sides (cards
   ~153px wide on a 320px phone). The template wraps the label in
   .claro-atc-label so it can shrink and end with an ellipsis; Kadence's
   spinner/check icons stay full size next to it. */
.woocommerce ul.products li.product .claro-loop-add-to-cart a.add_to_cart_button .claro-atc-label {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.woocommerce ul.products li.product .claro-loop-add-to-cart a.add_to_cart_button .kadence-svg-iconset {
	flex: 0 0 auto;
}

/* After a successful AJAX add, WooCommerce injects a "Zobacz koszyk"
   (.added_to_cart) link into the row and Kadence collapses the button to
   zero height. Hand the whole row to that link, mirroring stock Kadence
   behaviour instead of squeezing three items into one line. */
.woocommerce ul.products li.product .claro-loop-add-to-cart a.add_to_cart_button.added {
	display: none;
}

.claro-loop-add-to-cart:has(.added_to_cart) .quantity,
.claro-loop-add-to-cart:has(.added_to_cart) .quantity.spinners-added {
	display: none;
}

.woocommerce ul.products li.product .claro-loop-add-to-cart .added_to_cart {
	flex: 0 0 100%;
	margin: 0;
}

/* Keep the tax suffix legible in Kadence's sticky product cart only. */
.kadence-sticky-add-to-cart .woocommerce-price-suffix {
	margin-inline-start: 0.25em;
}

/* ==========================================================================
   Bottom nav row — paint the desktop wrapper full-bleed Claro blue while
   leaving Kadence's inner .site-container untouched, so menu positioning
   stays the same both before and after the row becomes sticky.
   ========================================================================== */

@media (min-width: 1025px) {
	.site-bottom-header-wrap {
		width: 100% !important;
		max-width: none !important;
		background-color: var(--global-palette12);
	}
}

.site-bottom-header-wrap.kadence-sticky-header.item-is-stuck {
	width: 100% !important;
	max-width: none !important;
	background-color: var(--global-palette12);
	box-shadow: 0 1px 0 rgba(45, 62, 80, 0.1);
}

/* Nine top-level items must fit in one row. Kadence pads each link by
   1.89em per side and the menu is stretched with space-between, so trimming
   the padding only changes where wrapping starts, not the wide-screen look.
   Below 1280px the labels also drop to 14px to stay on one row down to 1025px.
   Widths leave room for a classic ~17px scrollbar, which media queries count. */
@media (min-width: 1025px) {
	.main-navigation .primary-menu-container > ul > li.menu-item > a {
		padding-left: 0.75em;
		padding-right: 0.75em;
	}
}

@media (min-width: 1025px) and (max-width: 1439px) {
	.main-navigation .primary-menu-container > ul > li.menu-item > a {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
}

@media (min-width: 1025px) and (max-width: 1279px) {
	.main-navigation .primary-menu-container > ul > li.menu-item > a {
		padding-left: 0.2em;
		padding-right: 0.2em;
		font-size: 14px;
	}
}

/* ==========================================================================
   Wishlisty (moduł Wishlists w Kadence Shop Kit)
   Na kartach produktów i w pasku sticky add-to-cart zostaje samo serduszko —
   etykieta tekstowa jest chowana. Na stronie produktu przycisk zostaje z
   tekstem, tylko wyrównany do reszty.

   Ikona: .iconic-ww-icon ma w wtyczce height:4px, a <svg> jest w niej
   pozycjonowany absolutnie z translateY(-50%). Dlatego w kontenerach flex
   zerujemy wysokość spana — wtedy środek ikony pokrywa się ze środkiem
   przycisku.
   ========================================================================== */

/* --- karta produktu w listingu: serduszko nad zdjęciem --------------------- */

.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
}

li.product > .iconic-ww-button--add-to-wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	color: var(--claro-muted, #515151);
	transition: color 0.15s ease-out, background-color 0.15s ease-out;
}

li.product > .iconic-ww-button--add-to-wishlist:hover,
li.product > .iconic-ww-button--add-to-wishlist:focus {
	color: #e53e3e;
	background: #fff;
}

/* --- wspólne: sama ikona, bez etykiety ------------------------------------ */

li.product > .iconic-ww-button--add-to-wishlist .iconic-ww-button__label {
	display: none;
}

li.product > .iconic-ww-button--add-to-wishlist .iconic-ww-icon {
	width: 18px;
	height: 0;
	margin: 0;
}

/* --- strona produktu: przycisk z tekstem, pod formularzem koszyka ---------
   Selektor celuje w .entry-summary, a nie w body.single-product, żeby nie
   nadpisywał reguł paska sticky (też renderowanego na stronie produktu). */

.entry-summary > .iconic-ww-button--add-to-wishlist {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 1.5em;
	color: var(--claro-muted, #515151);
}

.entry-summary > .iconic-ww-button--add-to-wishlist:hover,
.entry-summary > .iconic-ww-button--add-to-wishlist:focus {
	color: #e53e3e;
}

.entry-summary > .iconic-ww-button--add-to-wishlist .iconic-ww-icon {
	width: 16px;
	height: 0;
	margin: 0;
}

/* --- ikona listy życzeń w nagłówku (obok koszyka) ------------------------- */

/* Licznik kopiuje wygląd .header-cart-total, ale ma własną klasę — .header-cart-total
   jest selektorem fragmentu WooCommerce i AJAX koszyka nadpisałby jego treść. */
.claro-header-wishlist .header-cart-button {
	display: flex;
	align-items: center;
}

.claro-header-wishlist .claro-wishlist-count {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	margin-left: 0.1em;
	border-radius: 50%;
	background: var(--global-palette7);
	color: var(--global-palette4);
	font-size: 0.65em;
	line-height: 1;
	text-align: center;
	transition: all 0.2s ease;
}

.claro-header-wishlist .claro-wishlist-count.claro-wishlist-is-empty-true {
	display: none;
}

.claro-header-wishlist .header-cart-button:hover .claro-wishlist-svg,
.claro-header-wishlist .header-cart-button:focus .claro-wishlist-svg {
	color: #e53e3e;
}