/*
Theme Name: Kadence Child
Description: Kadence child theme for claro24 customizations.
Template: kadence
Version: 1.2.2
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-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;
}

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

.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-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.6em;
}

.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-end;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* #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;
}

.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;
	}

	.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;
}

/* ==========================================================================
   Header search bar (FiboSearch / dgwt-wcas) — align field styling with the
   site's brand radius/border-color language instead of the plugin default.
   ========================================================================== */

.dgwt-wcas-search-form .dgwt-wcas-search-input {
	border: 1px solid #E2E8F0 !important;
	border-radius: var(--claro-radius, 6px) !important;
	background: #ffffff !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dgwt-wcas-search-form .dgwt-wcas-search-input:focus {
	border-color: var(--claro-blue, #2B6CB0) !important;
	box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.15) !important;
	outline: none;
}

.dgwt-wcas-search-form .dgwt-wcas-search-submit {
	color: var(--claro-muted, #515151);
	transition: color 0.2s ease;
}

.dgwt-wcas-search-form .dgwt-wcas-search-submit:hover,
.dgwt-wcas-search-form .dgwt-wcas-search-submit:focus {
	color: var(--claro-blue, #2B6CB0);
}

.dgwt-wcas-search-form .dgwt-wcas-ico-magnifier path {
	fill: currentColor;
}

/* ==========================================================================
   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: homepage/category cards leave only ~155–215px for the action row
   (4-col grid, card + content padding) — too narrow for the 115px button
   label to sit next to the stepper. So on ≥768px the two stack: 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). On ≤767px the stepper is
   hidden and the button spans the row alone.
   ========================================================================== */

.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;
}

.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;
	padding-left: 10px;
	padding-right: 10px;
}

/* 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;
}

/* Narrow phone cards (mobile-scroll row is ~153px inside): the compact
   stepper + gap would leave the button under 65px, truncating the label to
   a few characters. Give the button the full row instead; quantity stays
   adjustable in the cart. */
@media (max-width: 767px) {
	.claro-loop-add-to-cart .quantity,
	.claro-loop-add-to-cart .quantity.spinners-added {
		display: none;
	}
}

/* ==========================================================================
   Sticky bottom nav row — Kadence keeps it "contained" (max-width 1200px)
   even when position:fixed on scroll, so the row itself has no background
   and page content scrolls visibly through the left/right gutters. Paint a
   full-bleed white backdrop behind it so it reads as one solid bar.
   ========================================================================== */

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