/**
 * Special-offer category layout (Keramika Outlet).
 * Loaded only on product_cat archives flagged with the special-offer checkbox.
 * Everything is scoped under .ko-so / body.ko-special-offer so no other archive
 * or the shared archive.css can be affected.
 *
 * Colours, radii and type weights follow the product page (the site's real design
 * system): sale red #E92727, 3–4px radii, uppercase primary CTA, bold spec labels,
 * green #019758 stock, light 300-weight price suffix.
 */

body.ko-special-offer {
	--ko-so-scroll-ms: 500;
	--ko-so-ink: #242424;
	--ko-so-ink-2: #5b5b5b;
	--ko-so-line: #eee;
	--ko-so-line-2: #d3d3d6;
	--ko-so-line-soft: #f7f4f4;
	--ko-so-surface: #fff;
	--ko-so-surface-2: #f4f4f5;
	--ko-so-sale: #e92727;
	--ko-so-sale-deep: #b81a1a;
	--ko-so-sale-tint: #fdecec;
	--ko-so-stock: #019758;
	--ko-so-muted: #b2adad;
	--ko-so-radius: 3px;
	--ko-so-radius-lg: 4px;
	--ko-so-ease: cubic-bezier(.22, 1, .36, 1);
	--ko-so-slide: min(1400px, 80vw);
	--ko-so-gap: 0px;
}

/* ---------- header ---------- */

.ko-so__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	flex-wrap: wrap;
}

.ko-so__headerMain {
	min-width: 0;
	flex: 1 1 420px;
}

.ko-so__title {
	letter-spacing: -.03em;
	text-wrap: balance;
	margin-bottom: 12px;
}

.ko-so__header .term-description,
.ko-so__header .woocommerce-product-details__short-description {
	max-width: 62ch;
	color: var(--ko-so-ink-2);
	text-wrap: pretty;
}

.ko-so__deadline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	white-space: nowrap;
	border: 1px solid var(--ko-so-sale);
	color: var(--ko-so-sale-deep);
	background: var(--ko-so-sale-tint);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: .875rem;
	font-weight: 600;
}

.ko-so__deadline i {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ko-so-sale);
}

/* Section label above the carousel — matches the product page's
   "LASTNOSTI PRODUKTA" tab title. */
.ko-so__sectionTitle {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ko-so-ink);
}

/* ---------- carousel track ---------- */

.ko-so__stage {
	padding: 32px 0 0;
}

.ko-so__track {
	display: flex;
	align-items: flex-start;
	gap: var(--ko-so-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding: 0 calc((100% - var(--ko-so-slide)) / 2) 8px;
	perspective: 1600px;
}
.ko-so__track::-webkit-scrollbar {
	display: none;
}

.ko-so__track:focus-visible {
	outline: 2px solid var(--ko-so-ink);
	outline-offset: 4px;
}

.ko-so__slide {
	flex: 0 0 var(--ko-so-slide);
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: var(--ko-so-surface);
	border: 1px solid var(--ko-so-line);
	border-radius: var(--ko-so-radius-lg);
	transform-origin: center center;
	/* No `will-change` here: it permanently promotes all 12 slides (clones included) to
	   compositing layers, and past Chrome's tile-memory cap they get evicted and
	   re-rasterised on demand — a blank card that fills in a split second every time
	   you scroll back to it. Let the browser promote only what is animating. */
	transition: transform .35s var(--ko-so-ease), opacity .35s var(--ko-so-ease);
	backface-visibility: hidden;
}

.ko-so__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
	gap: 40px;
	align-items: stretch;
}

/* Off-centre slides: click anywhere to bring them in, and their own controls
   are inert so a half-visible CTA can't be hit by accident. */
   .ko-so__slide[data-side] {
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}

.ko-so__track.ko-so--dragging,
.ko-so__track.ko-so--dragging .ko-so__slide[data-side] {
	cursor: grabbing;
}

.ko-so__slide[data-side] .ko-so__thumb,
.ko-so__slide[data-side] .ko-so__btn {
	pointer-events: none;
}

/* ---------- gallery ---------- */

.ko-so__gal {
	min-width: 0;
}

.ko-so__galMain {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--ko-so-radius);
	overflow: hidden;
	background: var(--ko-so-surface-2);
}

.ko-so__galMain img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .45s var(--ko-so-ease);
}

.ko-so__galMain img.is-active {
	opacity: 1;
}

.ko-so__badge {
	position: absolute;
	z-index: 2;
	padding: 8px 12px;
	border-radius: var(--ko-so-radius);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
	color: #fff;
	background: var(--ko-so-sale);
}

.ko-so__badge--disc {
	top: 12px;
	right: 12px;
}

.ko-so__badge--prop {
	bottom: 12px;
	right: 12px;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--ko-so-ink);
	background: #fff;
	border: 1px solid var(--ko-so-line-2);
}

.ko-so__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.ko-so__thumb {
	flex: 0 0 84px;
	aspect-ratio: 1;
	padding: 0;
	background: none;
	border: 1px solid var(--ko-so-line);
	border-radius: var(--ko-so-radius);
	overflow: hidden;
	cursor: pointer;
	transition: border-color .2s var(--ko-so-ease);
}

.ko-so__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ko-so__thumb:hover {
	border-color: var(--ko-so-ink-2);
}

.ko-so__thumb[aria-current="true"] {
	border-color: var(--ko-so-ink);
	border-width: 2px;
}

/* ---------- spec column ---------- */

.ko-so__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 16px;
	justify-content: space-between;
}

.ko-so__brand {
	margin: 0 0 6px;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--ko-so-ink-2);
}

/* Uppercase, like the site's product titles — the names are already uppercase in
   the data, and 600 keeps it the anchor of the slide without shouting. */
.ko-so__name {
	margin: 0;
	font-size: 1.625rem;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--ko-so-ink);
	text-wrap: balance;
}

.ko-so__specs {
	margin: 20px 0 0;
	padding: 0;
	border-top: 1px solid var(--ko-so-line);
}

.ko-so__spec {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid var(--ko-so-line);
	font-size: .9375rem;
}

/* Bold label / regular value — same as .woocommerce-product-attributes. */
.ko-so__spec dt {
	margin: 0;
	color: var(--ko-so-ink);
	font-weight: 700;
}

.ko-so__spec dd {
	margin: 0;
	font-weight: 400;
	text-align: right;
	color: var(--ko-so-ink);
}

/* ---------- price ---------- */

.ko-so__priceRow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px 20px;
	margin-top: 0px;
}

.ko-so__price {
	/* Locked to the RIGHT edge whether or not a brand logo renders. The logo is
	   conditional in both templates, so with no logo the price is the only flex
	   child and space-between drops it at the START of the row — which is why an
	   unbranded card showed its price on the left. margin-left:auto pins it right
	   in both cases, without touching either template. */
	margin: 0 0 0 auto;
	min-width: 0;
	text-align: right;
}

.ko-so__price .ko-so__now {
	justify-content: flex-end;
	flex-wrap: wrap;
}

.ko-so__was {
	font-size: 1rem;
	color: #000;
	font-weight: 600;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.ko-so__was .woocommerce-Price-amount {
	color: #000;
	font-size: inherit;
	font-weight: 600;
}

.ko-so__now {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 2px;
	font-size: 2.25rem;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--ko-so-sale);
}

.ko-so__now .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* The site sets the price suffix large and light (300) — kept verbatim. */
.ko-so__unit {
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--ko-so-muted);
	text-decoration: none;
}

.ko-so__now .ko-so__unit {
	font-size: 1.4375rem;
	font-weight: 300;
}

.ko-so__save {
	display: inline-block;
	margin-top: 10px;
	padding: 7px 12px;
	border-radius: var(--ko-so-radius);
	font-size: .875rem;
	font-weight: 600;
	color: var(--ko-so-sale-deep);
	background: var(--ko-so-sale-tint);
}

.ko-so__save .woocommerce-Price-amount {
	color: inherit;
	font-weight: 700;
}

.ko-so__pack {
	margin: 12px 0 0;
	font-size: .875rem;
	color: var(--ko-so-ink-2);
}

.ko-so__pack b {
	font-weight: 600;
	color: var(--ko-so-ink);
}

.ko-so__pack .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

/* Stock line — the product page's .stock_container, condensed to one row.
   Proof of availability, not scarcity: the quantities are large and the honest
   argument (the series won't be reordered) lives in the FAQ. */
.ko-so__stock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 10px 16px;
	border: 1px solid var(--ko-so-line-soft);
	border-radius: var(--ko-so-radius-lg);
	font-size: 14px;
	color: var(--ko-so-ink);
}

.ko-so__stock b {
	font-weight: 700;
	color: var(--ko-so-stock);
}

/* ---------- CTAs ---------- */

.ko-so__cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ko-so__cta > .ko-so__btn {
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
}
.ko-so__btn {
	flex: 1 1 auto;
	min-width: 160px;
	padding: 14px 20px;
	border-radius: var(--ko-so-radius);
	font-size: .9375rem;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s var(--ko-so-ease), color .2s var(--ko-so-ease);
}

/* Same as .btn-primary.btn-lg on the product page. */
.ko-so__btn--primary {
	color: #fff;
	background: var(--ko-so-sale);
	border: 1px solid var(--ko-so-sale);
	font-weight: 500;
	text-transform: uppercase;
}

.ko-so__btn--primary:hover,
.ko-so__btn--primary:focus {
	color: #fff;
	background: #d31f1f;
	border-color: #d31f1f;
}

.ko-so__btn--ghost {
	color: var(--ko-so-ink);
	background: #fff;
	border: 1px solid var(--ko-so-ink);
	font-weight: 600;
}

.ko-so__btn--ghost:hover,
.ko-so__btn--ghost:focus {
	color: var(--ko-so-ink);
	background: var(--ko-so-surface-2);
}

.ko-so__btn--newsletter {
	color: #fff;
	background: var(--ko-so-ink);
	border: 1px solid var(--ko-so-ink);
	font-weight: 600;
	cursor: pointer;
}

.ko-so__btn--newsletter:hover,
.ko-so__btn--newsletter:focus {
	color: #fff;
	background: #000;
	border-color: #000;
}
/* ---------- nav + filmstrip ---------- */

.ko-so__nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 20px;
}

.ko-so__nav[hidden] {
	display: none;
}

.ko-so__count {
	font-size: .9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ko-so__count span {
	color: var(--ko-so-ink-2);
	font-weight: 500;
}

.ko-so__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--ko-so-line-2);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color .2s var(--ko-so-ease), background-color .2s var(--ko-so-ease);
}

.ko-so__arrow:hover {
	border-color: var(--ko-so-ink);
	background: var(--ko-so-surface-2);
}

.ko-so__arrow svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--ko-so-ink);
	stroke-width: 1.75;
}

.ko-so__strip {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	margin-top: 24px;
	padding: 24px 0 40px;
	border-top: 1px solid var(--ko-so-line);
	scrollbar-width: none;
}

.ko-so__strip::-webkit-scrollbar {
	display: none;
}

.ko-so__stripItem {
	flex: 0 0 200px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	text-align: left;
	background: #fff;
	border: 1px solid var(--ko-so-line);
	border-radius: var(--ko-so-radius);
	cursor: pointer;
	transition: border-color .2s var(--ko-so-ease), background-color .2s var(--ko-so-ease);
}

.ko-so__stripItem:hover {
	border-color: var(--ko-so-line-2);
	background: var(--ko-so-surface-2);
}

.ko-so__stripItem[aria-current="true"] {
	border-color: var(--ko-so-ink);
	background: var(--ko-so-surface-2);
}

.ko-so__stripItem img {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--ko-so-radius);
}

.ko-so__stripMeta {
	min-width: 0;
}

.ko-so__stripName {
	display: block;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ko-so-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ko-so__stripPrice {
	display: block;
	margin-top: 2px;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--ko-so-sale);
}

/* ---------- responsive ---------- */

@media (max-width: 991.98px) {
	body.ko-special-offer {
		--ko-so-slide: 88vw;
	}
	.ko-so__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ko-so__slide {
		padding: 16px;
	}
	.ko-so__now {
		font-size: 2rem;
	}

	.ko-so__nav {
		justify-content: space-between;
	}

	.ko-so__header {
		align-items: flex-start;
	}

	/* Smaller thumb rail — 84px of chrome above the fold is not worth it. */
	.ko-so__thumb {
		flex: 0 0 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Suppress MOTION only. `transform` and `opacity` are how the coverflow positions
	   and de-emphasises off-centre cards; zeroing them collapsed every slide to full
	   width, side by side. Killing the transition here, plus jump()'s instant
	   scrolling, is what honours the preference. */
	.ko-so__slide {
		transition: none !important;
	}

	.ko-so__galMain img {
		transition: none;
	}
}
/* ---------- secondary description (ACF, below the carousel) ----------
   Scoped to the special-offer page only. The block is wide enough for the
   house-style FAQ accordion; only the intro paragraphs are held to a readable
   measure. Inline styles inside the FAQ markup win by specificity, which is
   intended — the accordion stays identical to the other category pages. */

body.ko-special-offer .acf-secondary-description {
	max-width: 880px;
	margin: 8px auto 64px;
	padding-top: 40px;
	border-top: 1px solid var(--ko-so-line);
	color: var(--ko-so-ink-2);
	font-size: 1rem;
	line-height: 1.7;
	text-wrap: pretty;
}

body.ko-special-offer .acf-secondary-description > p {
	max-width: 68ch;
}

body.ko-special-offer .acf-secondary-description > *:first-child {
	margin-top: 0;
}

body.ko-special-offer .acf-secondary-description > *:last-child {
	margin-bottom: 0;
}

body.ko-special-offer .acf-secondary-description h2 {
	margin: 0 0 20px;
	font-size: 1.625rem;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--ko-so-ink);
	text-wrap: balance;
}

body.ko-special-offer .acf-secondary-description h3 {
	margin: 36px 0 10px;
	font-size: 1.125rem;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ko-so-ink);
}

body.ko-special-offer .acf-secondary-description h4 {
	margin: 28px 0 8px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ko-so-ink);
}

body.ko-special-offer .acf-secondary-description p {
	margin: 0 0 16px;
}

body.ko-special-offer .acf-secondary-description strong,
body.ko-special-offer .acf-secondary-description b {
	font-weight: 600;
	color: var(--ko-so-ink);
}

body.ko-special-offer .acf-secondary-description a {
	color: var(--ko-so-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--ko-so-line-2);
	transition: text-decoration-color .2s var(--ko-so-ease);
}

body.ko-special-offer .acf-secondary-description a:hover {
	text-decoration-color: var(--ko-so-ink);
}

body.ko-special-offer .acf-secondary-description ul,
body.ko-special-offer .acf-secondary-description ol {
	margin: 0 0 16px;
	padding-left: 1.25em;
}

body.ko-special-offer .acf-secondary-description li {
	margin-bottom: 6px;
}

body.ko-special-offer .acf-secondary-description li::marker {
	color: var(--ko-so-line-2);
}

@media (max-width: 991.98px) {
	body.ko-special-offer .acf-secondary-description {
		margin-bottom: 48px;
		padding-top: 32px;
	}

	body.ko-special-offer .acf-secondary-description h2 {
		font-size: 1.375rem;
	}
}

/* Deadline label on the featured image, bottom-left.
   Faithful to AWL 714945 on the product page — #e04141, white, square, tight —
   scaled up ~20% (10px → 12px) for the larger card. Overrides the base badge's
   size/weight/radius/padding so it reads as the discrete chip, not a big badge. */
   .ko-so__badge--deadline {
	top: auto;
	right: auto;
	bottom: 12px;
	left: 0;
	padding: 6px 11px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	border-radius: 0;
	color: #fff;
	background: #e04141;
}

/* ---------- P4: SKU, brand logo, stock split, add-to-list ---------- */

.ko-so__sku {
	margin: 0 0 8px;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--ko-so-ink-2);
}

.ko-so__brandLogo {
	flex: 0 0 auto;
	margin: 0;
}

.ko-so__brandLogo img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

/* Stock split — reuses the theme's .stock_container markup. Its bootstrap layout
   classes come from main.css (site-wide), but the colours/border are normally in
   single-product.css (product pages only), so they're scoped in here. */
.ko-so__stockbox {
	margin: 0px;
}

body.ko-special-offer .ko-so__stockbox .custom_stock_box {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ko-so-ink);
}

body.ko-special-offer .stock_container {
	padding: 10px 16px;
	margin: 0 0 8px;
	border: 1px solid var(--ko-so-line-soft);
	border-radius: 4px;
}

body.ko-special-offer .stock_container img {
	width: 31px;
	height: auto;
	flex: 0 0 auto;
}

body.ko-special-offer .stock_container .warehouse-name {
	font-weight: 500;
	color: var(--ko-so-ink);
}

body.ko-special-offer .stock_container .wh_instock {
	font-size: 14px;
	font-weight: 700;
	color: var(--ko-so-stock);
}

body.ko-special-offer .stock_container .wh_outofstock,
body.ko-special-offer .stock_container .donarocilo {
	font-size: 14px;
	font-weight: 600;
	color: var(--ko-so-ink-2);
}

body.ko-special-offer .stock_container a {
	font-size: 12px;
	font-weight: 500;
	color: #144196;
	text-decoration: underline;
}

/* Add-to-list — matches the product page's .single_add_to_cart_button exactly:
   no fill, no border, bold dark text with the clipboard icon, centered. Scoped to
   body.ko-special-offer so it beats the theme's .button / .add_to_cart_button styles. */
body.ko-special-offer .ko-so__btn--list {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	width: 100%;
	min-width: 0;
	padding: 8px 2px;
	background: none;
	border: 0;
	border-radius: 3px;
	color: var(--ko-so-ink);
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
}

body.ko-special-offer .ko-so__btn--list::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 27px;
	background: url("data:image/svg+xml,%3Csvg width='22' height='27' viewBox='0 0 22 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 16.9998C16 17.265 15.8946 17.5194 15.7071 17.7069C15.5196 17.8945 15.2652 17.9998 15 17.9998H7C6.73478 17.9998 6.48043 17.8945 6.29289 17.7069C6.10536 17.5194 6 17.265 6 16.9998C6 16.7346 6.10536 16.4802 6.29289 16.2927C6.48043 16.1052 6.73478 15.9998 7 15.9998H15C15.2652 15.9998 15.5196 16.1052 15.7071 16.2927C15.8946 16.4802 16 16.7346 16 16.9998ZM15 11.9998H7C6.73478 11.9998 6.48043 12.1052 6.29289 12.2927C6.10536 12.4802 6 12.7346 6 12.9998C6 13.265 6.10536 13.5194 6.29289 13.7069C6.48043 13.8945 6.73478 13.9998 7 13.9998H15C15.2652 13.9998 15.5196 13.8945 15.7071 13.7069C15.8946 13.5194 16 13.265 16 12.9998C16 12.7346 15.8946 12.4802 15.7071 12.2927C15.5196 12.1052 15.2652 11.9998 15 11.9998ZM22 3.99982V24.9998C22 25.5303 21.7893 26.039 21.4142 26.414C21.0391 26.7891 20.5304 26.9998 20 26.9998H2C1.46957 26.9998 0.960859 26.7891 0.585786 26.414C0.210714 26.039 0 25.5303 0 24.9998V3.99982C0 3.46939 0.210714 2.96068 0.585786 2.58561C0.960859 2.21053 1.46957 1.99982 2 1.99982H6.5325C7.09438 1.37072 7.78279 0.86739 8.55266 0.522767C9.32254 0.178143 10.1565 0 11 0C11.8435 0 12.6775 0.178143 13.4473 0.522767C14.2172 0.86739 14.9056 1.37072 15.4675 1.99982H20C20.5304 1.99982 21.0391 2.21053 21.4142 2.58561C21.7893 2.96068 22 3.46939 22 3.99982ZM7 5.99982H15C15 4.93895 14.5786 3.92154 13.8284 3.17139C13.0783 2.42125 12.0609 1.99982 11 1.99982C9.93913 1.99982 8.92172 2.42125 8.17157 3.17139C7.42143 3.92154 7 4.93895 7 5.99982ZM20 3.99982H16.6562C16.8837 4.64209 17 5.31846 17 5.99982V6.99982C17 7.26504 16.8946 7.51939 16.7071 7.70693C16.5196 7.89446 16.2652 7.99982 16 7.99982H6C5.73478 7.99982 5.48043 7.89446 5.29289 7.70693C5.10536 7.51939 5 7.26504 5 6.99982V5.99982C5.00002 5.31846 5.11627 4.64209 5.34375 3.99982H2V24.9998H20V3.99982Z' fill='%23242424'/%3E%3C/svg%3E%0A") no-repeat center / contain;
}

body.ko-special-offer .ko-so__btn--list:hover,
body.ko-special-offer .ko-so__btn--list:focus {
	background: none;
	color: var(--ko-so-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- P4: expandable details panel ---------- */

.ko-so__details {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .4s var(--ko-so-ease);
}

.ko-so__slide.is-details-open .ko-so__details {
	grid-template-rows: 1fr;
}

.ko-so__detailsInner {
	min-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .3s var(--ko-so-ease), transform .4s var(--ko-so-ease);
}

.ko-so__slide.is-details-open .ko-so__detailsInner {
	opacity: 1;
	transform: none;
}

.ko-so__detailsBody {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--ko-so-line);
}

/* Two-column spec table, reusing the .ko-so__spec row style; one column on narrow cards. */
.ko-so__specTable {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	margin: 16px 0 0;
}

.ko-so__specTable .ko-so__spec:first-child,
.ko-so__specTable .ko-so__spec:nth-child(2) {
	border-top: 1px solid var(--ko-so-line);
}

/* Toggle arrow on "Vsi podatki o izdelku". */
.ko-so__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ko-so__toggle::after {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .3s var(--ko-so-ease);
}

.ko-so__slide.is-details-open .ko-so__toggle::after {
	transform: translateY(2px) rotate(-135deg);
}

@media (max-width: 991.98px) {
	.ko-so__specTable {
		grid-template-columns: 1fr;
	}
}
/* ---------- Catalog-Mode enquiry popup ----------
   The popup markup is global (footer) but its form styling lives in
   single-product.css, which only loads on product pages. These rules are all
   scoped to the popup, so they fix the enquiry form on the category page without
   touching the card. Lifted verbatim from single-product.css. */

.woocommerce-catalog-mode-popup-container {
	max-width: 1280px !important;
}

.woocommerce-catalog-mode-popup input.ef_pn,
.woocommerce-catalog-mode-popup input.ef_sku,
.woocommerce-catalog-mode-popup .ef_attr_info {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	border: 0;
}

.woocommerce-catalog-mode-popup input.ef_sku {
	display: none !important;
	color: #7E7E7E;
}

.woocommerce-catalog-mode-popup textarea.wpcf7-form-control.wpcf7-textarea {
	font-size: 14px;
	background: #F7F4F4;
	outline: 0;
	border: 0;
	width: 100%;
	padding: 20px;
	border-radius: 2px;
}

.woocommerce-catalog-mode-popup input.ef_pn {
	font-weight: 700;
	font-size: 25px;
}

.woocommerce-catalog-mode-popup .form_sec_title {
	font-weight: 600;
	font-size: 20px;
}

.woocommerce-catalog-mode-popup .form_body input.wpcf7-text {
	border: 0;
	background: #F7F4F4;
	font-size: 14px;
	padding: 18px 20px;
	margin-bottom: 8px;
	width: 100%;
	border-radius: 2px;
}

.woocommerce-catalog-mode-popup .form_col_1,
.woocommerce-catalog-mode-popup .form_col_2 {
	width: 100%;
}

.woocommerce-catalog-mode-popup input.wpcf7-form-control.ef_attr_info,
.woocommerce-catalog-mode-popup input.wpcf7-form-control.ef_pn {
	width: 100% !important;
}

.woocommerce-catalog-mode-popup .wpcf7-form-control.wpcf7-radio {
	display: flex;
	flex-direction: column;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 16px;
}

.woocommerce-catalog-mode-popup .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.woocommerce-catalog-mode-popup .wpcf7-form-control.wpcf7-radio .wpcf7-list-item {
	margin-left: 0;
}

.woocommerce-catalog-mode-popup .wpcf7-form-control.wpcf7-acceptance span.wpcf7-list-item {
	margin: 10px 0 0;
}

.woocommerce-catalog-mode-popup input.wpcf7-form-control.wpcf7-submit {
	padding: 20px;
	background: #E92727;
	width: 100%;
	border: 0;
	border-radius: 2px;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
}

.woocommerce-catalog-mode-popup .wpcf7-acceptance input[type=checkbox],
.woocommerce-catalog-mode-popup input[type=radio] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	position: relative;
	background: #F7F4F4 !important;
	border-radius: 3px;
	cursor: pointer;
	width: 25px !important;
	height: 25px;
	margin: 0;
	padding: 8px;
	display: inline-block;
}

.woocommerce-catalog-mode-popup .wpcf7-acceptance input[type=checkbox]:checked::before,
.woocommerce-catalog-mode-popup input[type=radio]:checked::before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	content: '';
	width: 17px;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg width='17' height='14' viewBox='0 0 17 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.80013 11.3866L2.21063 7.39756L2.21061 7.39754C2.05367 7.22317 1.83483 7.11942 1.60031 7.11942C1.36578 7.11942 1.14694 7.22317 0.990005 7.39754C0.833851 7.57104 0.75 7.80121 0.75 8.03641C0.75 8.27161 0.83385 8.50179 0.990005 8.67529L5.18973 13.3415C5.26728 13.4278 5.36082 13.4978 5.46578 13.5461C5.57084 13.5945 5.68454 13.6199 5.80012 13.6199C5.9157 13.6199 6.0294 13.5945 6.13446 13.5461C6.23942 13.4978 6.33296 13.4278 6.41051 13.3415L16.01 2.67574C16.1661 2.50224 16.25 2.27206 16.25 2.03686C16.25 1.80166 16.1661 1.57148 16.01 1.39798C15.8531 1.22362 15.6342 1.11987 15.3997 1.11987C15.1652 1.11987 14.9463 1.22362 14.7894 1.39798L14.7894 1.39799L5.80013 11.3866Z' fill='%23FF4141' stroke='%23FF4141' stroke-width='0.5'/%3E%3C/svg%3E%0A") no-repeat center / contain;
}

.woocommerce-catalog-mode-popup {
	border-radius: 0;
}

#woocommerce-catalog-mode-enquiry-popup-container::-webkit-scrollbar {
	width: 5px;
}
#woocommerce-catalog-mode-enquiry-popup-container::-webkit-scrollbar-track {
	background: #f1f1f1;
}
#woocommerce-catalog-mode-enquiry-popup-container::-webkit-scrollbar-thumb,
#woocommerce-catalog-mode-enquiry-popup-container::-webkit-scrollbar-thumb:hover {
	background: #E92727;
}

.ef_info p {
	margin: 0 !important;
}
.ef_info br {
	display: none;
}

@media (min-width: 992px) {
	.woocommerce-catalog-mode-popup .ef_sku_wrap:after {
		content: "|";
		margin-left: 3px;
		margin-right: 3px;
	}
	.woocommerce-catalog-mode-popup .form_col_1 {
		width: 40%;
	}
	.woocommerce-catalog-mode-popup .form_col_2 {
		width: 60%;
	}
	.woocommerce-catalog-mode-popup input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.ef_pn {
		font-size: 44px;
	}
	.woocommerce-catalog-mode-popup {
		padding: 65px;
	}
}

/* Card enquiry shows only the SKU (no secondary attribute), so drop the "|". */
.woocommerce-catalog-mode-popup .ef_sku_wrap:after {
	content: none;
}

/* During instant repositions (loop teleport, initial anchor, resize) the slide
   transforms are swapped in place — the transition must be off so the swap stays
   invisible. jump() toggles this class around every instant scroll. */
.ko-so__track.ko-so--no-anim .ko-so__slide {
	transition: none;
}
.ko-so__slide img {
	-webkit-user-drag: none;
	
}

/* Front card's main image invites the lightbox */
.ko-so__slide:not([data-side]) .ko-so__galMain img {
	cursor: zoom-in;
}
/* Main-image prev/next arrows — mirrors the product-page gallery (woo-variation-gallery).
   Chevrons are CSS-drawn so they render without the Dashicons font. Shown only on the
   front card; side cards intercept the click to centre instead. */
.ko-so__galMain {
	position: relative;
}

.ko-so__galArrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity .15s ease;
	z-index: 3;
}

.ko-so__galArrow:hover,
.ko-so__galArrow:focus-visible {
	opacity: 1;
}

.ko-so__galArrow--prev {
	left: 0px;
}

.ko-so__galArrow--next {
	right: 0px;
}

.ko-so__galArrowIcon {
	display: block;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

.ko-so__galArrow--prev .ko-so__galArrowIcon {
	position: relative;
	left: 2px;
	transform: rotate(135deg);
}

.ko-so__galArrow--next .ko-so__galArrowIcon {
	position: relative;
	right: 2px;
	transform: rotate(-45deg);
}

/* Front card only */
.ko-so__slide[data-side] .ko-so__galArrow {
	display: none;
}

/* Light band behind the whole carousel stage. The stage is already full-bleed and
   runs from just under the category divider to the end of the filmstrip, so colouring
   it needs no measurements; the secondary description below is a separate block and
   stays white. padding-bottom adds breathing room between the strip and the band edge. */
.ko-so__stage {
	background: #fafafa;
	padding-bottom: 32px;
}

/* Selected filmstrip item: white tile with a red ring, so it stands out from the light
   band (its previous ~#f4f4f5 fill blended in). The ring is an inset shadow rather than
   a wider border, so the strip doesn't reflow by 1px as the selection moves. */
.ko-so__stripItem[aria-current="true"] {
	background: #fff;
	border-color: #e92727;
	box-shadow: inset 0 0 0 1px #e92727;
}

/* Light band behind the whole carousel stage — full-bleed, from just under the
   category divider to just after the filmstrip. Stage is already the full-width
   wrapper, so no magic numbers; the secondary description below stays white. */
.ko-so__stage {
	background: #fafafa;
}

/* Let the band hug the filmstrip instead of trailing a large gap below it. */
.ko-so__strip {
	padding-bottom: 16px;
}

/* Selected filmstrip item: white tile with a red ring, so it stands out from the
   light band (its previous ~#f4f4f5 fill blended in). Inset shadow rather than a
   wider border, so the strip doesn't reflow as the selection moves. */
.ko-so__stripItem[aria-current="true"] {
	background: #fff;
	border-color: #e92727;
	box-shadow: inset 0 0 0 1px #e92727;
}

/* Drop the secondary description's 8px top margin so "Razprodaja" sits flush under
   the band without an unnatural gap. Scoped to the special-offer body class so
   product pages and ordinary categories keep their spacing. */
body.ko-special-offer .acf-secondary-description {
	margin-top: 0;
}

/* Producer logo: tidy bordered chip, linked to the brand archive (/znamka/{slug}/). */
.ko-so__brandLogo img {
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	padding: 6px;
	background: #fff;
	box-sizing: content-box;
}

.ko-so__brandLink {
	display: inline-block;
	line-height: 0;
}

.ko-so__brandLink:hover img,
.ko-so__brandLink:focus-visible img {
	border-color: #242424;
}
/* Many-image safety: let the thumbnail row scroll rather than overflow the card. */
.ko-so__thumbs {
	overflow-x: auto;
}

/* ── Pre-launch a11y + polish batch ────────────────────────────────────────── */

/* #35 Visible focus rings on akcija controls (keyboard a11y). Scoped to our
   elements; !important keeps them reliable against the theme's focus resets. */
.ko-so__btn:focus-visible,
.ko-so__arrow:focus-visible,
.ko-so__galArrow:focus-visible,
.ko-so__toggle:focus-visible,
.ko-so__stripItem:focus-visible,
.ko-so__thumb:focus-visible,
.ko-so__brandLink:focus-visible,
.ko-so__edge:focus-visible {
	outline: 2px solid #242424 !important;
	outline-offset: 2px;
}

/* #36 Gallery arrows → 44px touch target on touch devices (mouse keeps 40px). */
@media (pointer: coarse) {
	.ko-so__galArrow {
		width: 44px;
		height: 44px;
	}
}

/* #37 Stock row: give the store name and "Pokaži pot" breathing room so they never
   crowd on narrow widths (the link wraps below the name). Scoped to our stock box. */
.ko-so__stockbox .stock_container .d-flex.justify-content-between {
	gap: 8px;
	flex-wrap: wrap;
}

/* #38 Polish */
.ko-so__sku {
	font-size: 14px;
}
.ko-so__badge--deadline {
	background: #d32f2f;   /* AA-safe red (~5:1 on white), in-brand; matches the FAQ divider */
}
.ko-so__btn--list {
	min-height: 44px;
}
/* Card depth: subtle shadow at rest, larger lift on hover of the front card.
   The track clips vertically (overflow-x:auto forces overflow-y to auto), so it
   gets top/bottom padding to give the shadow room instead of cutting it at the nav. */
.ko-so__track {
	padding-top: 22px;
	padding-bottom: 32px;
}

.ko-so__track .ko-so__slide {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
	transition: transform .35s var(--ko-so-ease), opacity .35s var(--ko-so-ease), box-shadow .3s var(--ko-so-ease);
}
.ko-so__track .ko-so__slide:not([data-side]):hover {
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}
/* Pull the nav/filmstrip back up by the extra padding added to the track for the
   shadow, so their spacing is unchanged (the shadow lives in that padding). */
.ko-so__stage > .container {
	margin-top: -24px;
}
/* ---------- edge overlay arrows ----------
   Always-reachable prev/next for small/medium laptop widths, where the side cards
   sit too far off-screen to grab. JS wraps the track in .ko-so__viewport (the
   positioning context) and appends these; they take no layout space and reuse go().
   Hidden by default; shown only in the band below (keep it in sync with the slide band). */
.ko-so__viewport {
	position: relative;
}

.ko-so__edge {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity .15s ease;
}

.ko-so__edge:hover,
.ko-so__edge:focus-visible {
	opacity: 1;
}

.ko-so__edge--prev {
	left: 8px;
}

.ko-so__edge--next {
	right: 8px;
}

.ko-so__edgeIcon {
	display: block;
	width: 11px;
	height: 11px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

.ko-so__edge--prev .ko-so__edgeIcon {
	position: relative;
	left: 3px;
	transform: rotate(135deg);
}

.ko-so__edge--next .ko-so__edgeIcon {
	position: relative;
	right: 3px;
	transform: rotate(-45deg);
}

/* Show the edge arrows only on small/medium laptop widths (above mobile, below the
   width where neighbours peek enough on their own). Keep in sync with the slide band. */
@media (min-width: 992px) and (max-width: 1399.98px) {
	.ko-so__edge {
		display: flex;
	}
}

/* Pre-first-render mask. The coverflow transforms are measured in JS after the clone
   sets exist, so the untransformed flat row would otherwise paint first and visibly
   correct itself. Hide the track until render() has run once. The animation is a
   safety net, not the mechanism: if JS never runs or throws, the track reveals itself
   after 1.2s so the stage can never be left blank. */
.ko-so__track.ko-so--init {
	opacity: 0;
	animation: ko-so-reveal 0s linear 1.2s forwards;
}

@keyframes ko-so-reveal {
	to { opacity: 1; }
}

/* ── Critique 2026-10-09 (operator: the cards stay a visual clone of the product page) ──
   Report: woocommerce/docs/reports/special-offer-critique-2026-10-09.md. Nothing here changes
   how a card looks; colours, sizes and order stay as on the product page. */

/* Targets ≥ 44×44 (AGENTS §6). The front card's buttons already measure 44–49 px; this only
   guarantees it. */
body.ko-special-offer .ko-so__btn {
	min-height: 44px;
}

/* "Pokaži pot" is 12 px text (45×16 / 60×15 px). The hit area grows with an invisible
   ::after instead of padding, so the stock row looks and measures the same. */
body.ko-special-offer .stock_container a {
	position: relative;
}

body.ko-special-offer .stock_container a::after {
	content: "";
	position: absolute;
	inset: -15px -8px;
}

/* Send label "Pošljite povpraševanje za ta izdelek" — " za ta izdelek" hidden on phones so the
   capitals stay on one line; the product page does the same (inquiry-drawer.css). */
@media (max-width: 575.98px) {
	body.ko-special-offer .ko-so__ctaMore {
		display: none;
	}
}

/* ── Critique 2026-10-09, round 3 (operator: the card takes over the product page's labels, price
   line, stock rows and bulk-purchase box; the technical spec section stays the card's own) ──────
   Lifted from single-product.css (product pages only) and scoped here, with the AA text colours
   that single-product.css gets in the same release:
   - "/ m²" #b2adad 2.22:1 → #6b6b6b 5.33:1 (#fafafa 5.11:1)
   - "Na zalogi" #019758 3.77:1 → #017a48 5.41:1; on the box's #e9eedd 3.19:1 → 4.57:1
   - "Ni na zalogi" #ff4141 3.45:1 → #d32f2f 4.98:1
   - "Na voljo po naročilu" #eabb55 1.79:1 → #8a6500 5.33:1
   The status dots keep their colours (graphics, the text carries the state). */
body.ko-special-offer {
	--ko-so-unit-aa: #6b6b6b;
	--ko-so-stock-aa: #017a48;
	--ko-so-out-aa: #d32f2f;
	--ko-so-order-aa: #8a6500;
	--ko-so-notice-bg: #e9eedd;
}

/* Price line — matched to the product page's COMPUTED values (measured live 2026-10-09 at 1920 and 390
   px: single-product.css l.58–61 forces 24px, so its ≥992px 30px rule never applies; the old
   price shows at opacity .7 and every amount at 700). The card's price HTML has no <bdi> (wp_kses_post
   drops it), so the 700 sits on .woocommerce-Price-amount. */
body.ko-special-offer .ko-so__pprice {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: 5px;
	margin: 0;
	font-size: 24px;
	line-height: normal;
	color: var(--ko-so-sale);
}

body.ko-special-offer .ko-so__pprice del {
	color: #000;
	opacity: .7;
	font-size: 16px;
	font-weight: 600;
}

body.ko-special-offer .ko-so__pprice ins {
	color: var(--ko-so-sale);
	font-weight: 700;
	text-decoration: none;
}

body.ko-special-offer .ko-so__pprice .woocommerce-Price-amount {
	font-weight: 700;
}

body.ko-special-offer .ko-so__pprice .price-suffix {
	color: var(--ko-so-unit-aa);
	font-size: 23px;
	font-weight: 300;
}

/* Stock rows — single-product.css l.155–198, 905–908, 927–929, 1164–1170. */
body.ko-special-offer .stock_container .wh_stock {
	font-size: 14px;
	font-weight: 700;
	line-height: 2;
}

body.ko-special-offer .stock_container .wh_stock::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 5px;
	border-radius: 50%;
	background: #ff4141;
}

body.ko-special-offer .stock_container .wh_instock {
	color: var(--ko-so-stock-aa);
}

body.ko-special-offer .stock_container .wh_stock.wh_instock::before {
	background: #019758;
}

body.ko-special-offer .stock_container .wh_outofstock {
	color: var(--ko-so-out-aa);
}

body.ko-special-offer .stock_container .donarocilo.wh_stock {
	color: var(--ko-so-order-aa);
}

body.ko-special-offer .stock_container .donarocilo.wh_stock::before {
	background: #eabb55;
}

/* "Pokaži pot" stays on the store-name row, on the right, as on the product page. */
body.ko-special-offer .ko-so__stockbox .stock_container .d-flex.justify-content-between {
	flex-wrap: nowrap;
}

body.ko-special-offer .stock_container a {
	white-space: nowrap;
}

@media (max-width: 767px) {
	body.ko-special-offer .stock_container {
		padding-left: 10px;
	}

	body.ko-special-offer .stock_container .wh_stock {
		line-height: 1.4;
	}
}

/* "Dodaj na seznam povpraševanj" underlined — button.single_add_to_cart_button, l.242–255. */
body.ko-special-offer .ko-so__btn--list {
	text-decoration: underline;
}

/* Bulk-purchase box — .stock_notice, l.210–217; text that fits the offer is in the template. */
body.ko-special-offer .ko-so__notice {
	padding: 16px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 400;
	color: var(--ko-so-stock-aa);
	background: var(--ko-so-notice-bg);
}

body.ko-special-offer .ko-so__notice img {
	flex: 0 0 auto;
}

/* ── 13 Oct 2026: Nielsen fixes (woocommerce/docs/specs/2026-10-13-special-offer-nielsen-fixes-design.md) ── */

/* 1d — "Prikaži košarico" after "Dodaj na seznam povpraševanj" stays hidden, as on the product page
   (single-product.css: .woocommerce a.added_to_cart). */
body.ko-special-offer .ko-so__cta a.added_to_cart {
	display: none;
}

/* 1a — the ad's product is no longer in the offer (notice above the carousel, special-offer.js). */
body.ko-special-offer .ko-so__miss {
	margin-bottom: 16px;
}

body.ko-special-offer .ko-so__missText {
	margin: 0;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 15px;
	color: var(--ko-so-ink);
	background: var(--ko-so-notice-bg);
}

/* 1b — the featured product, for screen readers only. */
.ko-so__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* 7b — the product name links to the product page; same look, underline on hover and focus. */
.ko-so__nameLink,
.ko-so__nameLink:hover,
.ko-so__nameLink:focus {
	color: inherit;
	text-decoration: none;
}

.ko-so__nameLink:hover,
.ko-so__nameLink:focus-visible {
	text-decoration: underline;
}

.ko-so__nameLink:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* 9 — the page's own empty state (no products in the offer). */
.ko-so__empty {
	max-width: 640px;
	margin: 24px auto 48px;
	text-align: center;
}

.ko-so__emptyTitle {
	margin: 0 0 12px;
	font-size: 1.625rem;
	line-height: 1.2;
	font-weight: 600;
	color: var(--ko-so-ink);
}

.ko-so__emptyText {
	margin: 0 0 24px;
	font-size: 1rem;
	color: var(--ko-so-ink);
}

.ko-so__emptyCta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* r4b (13 Oct 2026) — the product name = the product page's h1.product_title: theme.css h1 44px,
   bootstrap h1 weight 500 / line-height 1.2, no uppercase; single-product.css at max-width 767px: 20px.
   Measured on /izdelek/carpenter-grey-30x60/ at 1440 and 390. */
.ko-so__name {
	font-size: 35px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
}

@media (max-width: 767px) {
	.ko-so__name {
		font-size: 20px;
	}
}


/* Helper section + FAQ on the special-offer page: one divider, not two.
   Both blocks carry .acf-secondary-description, so the FAQ block lost its own
   border-top/padding-top when it follows the helper. */
body.ko-special-offer .acf-helper-description + .acf-secondary-description {
	border-top: 0;
	padding-top: 0;
}