/*! CU Mega Menu 1.0.5 – desktop only (≥ 993 px = Shoptimizer breakpoint). Below that the native theme menu is used. */

.cu-mm {
	display: none;
}

@media (min-width: 993px) {

	/*
	 * --- Theme integration (fail-safe). Active only when our markup sits inside the theme bar;
	 * otherwise it stays hidden and the theme menu remains. Without JS "Sklep" is a link to the shop.
	 */
	.col-full-nav .cu-mm {
		display: flex;
	}

	.col-full-nav:has(.cu-mm) .main-navigation,
	.col-full-nav:has(.cu-mm) .logo-mark {
		display: none;
	}

	.col-full-nav:has(.cu-mm) .shoptimizer-primary-navigation {
		display: flex;
		align-items: stretch;
		position: relative;
	}

	.col-full-nav:has(.cu-mm) .site-header-cart {
		flex: none;
		margin-left: 0;
	}

	/*
	 * Open panel must sit above product galleries, sliders and sticky widgets. z-index only works on a
	 * positioned element, and some templates (e.g. product page with sticky add-to-cart) un-stick the bar,
	 * so while open and not stuck the bar is made position:relative (visually identical in place).
	 */
	body .col-full-nav:has(.cu-mm.is-open) {
		z-index: 999;
	}

	body .col-full-nav:has(.cu-mm.is-open):not(.is_stuck) {
		position: relative;
	}

	.col-full-nav:has(.cu-mm.is-open) .site-header-cart {
		position: relative;
		z-index: 2;
	}

	/* --- Module. Values taken from the Shoptimizer customizer on centrumuszczelek.pl. --- */
	.cu-mm {
		--cu-pad: 2.617924em; /* = .col-full side padding; resolves against the inherited font size. */
		--cu-shop-w: 300px;
		--cu-in: 20px;
		--cu-h: 60px;
		--cu-accent: #65121a;
		--cu-accent-hover: #92353e;
		--cu-text: #323232;
		--cu-heading: #111;
		--cu-line: #eee;
		--cu-bg: #fff;

		flex: 1 1 auto;
		align-items: stretch;
		min-width: 0;
	}

	.cu-mm *,
	.cu-mm *::before {
		box-sizing: border-box;
	}

	.cu-mm [hidden] {
		display: none !important;
	}

	.cu-mm ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.cu-mm li {
		margin: 0;
	}

	.cu-mm svg {
		flex: none;
	}

	.cu-mm .screen-reader-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.cu-mm .cu-mm__nav {
		display: flex;
	}

	/* Trigger "Sklep" – shop button colours (#65121a / #92353e). */
	.cu-mm .cu-mm__shop {
		box-sizing: border-box;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 10px;
		width: var(--cu-shop-w);
		height: var(--cu-h);
		margin: 0;
		padding: 0 var(--cu-in);
		border: 0;
		border-radius: 0;
		background: var(--cu-accent);
		box-shadow: none;
		color: #fff;
		font-family: inherit;
		font-size: inherit;
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0;
		text-transform: none;
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.2s;
	}

	.cu-mm .cu-mm__shop:hover,
	.cu-mm .cu-mm__shop[aria-expanded="true"] {
		background: var(--cu-accent-hover);
		color: #fff;
	}

	.cu-mm .cu-mm__shop:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -6px;
	}

	.cu-mm .cu-mm__label {
		font-size: 15px;
	}

	.cu-mm .cu-mm__shop .cu-mm__caret {
		margin-left: auto;
		transform: rotate(90deg);
		transition: transform 0.4s;
	}

	.cu-mm .cu-mm__shop[aria-expanded="true"] .cu-mm__caret {
		transform: rotate(-90deg);
	}

	/* Links next to the cart – Shoptimizer top-level link style. */
	.cu-mm .cu-mm__links {
		position: relative;
		z-index: 2;
		display: flex;
		margin-left: auto;
	}

	.cu-mm .cu-mm__links-list {
		display: flex;
	}

	.cu-mm .cu-mm__links a {
		display: block;
		padding: 0 0.55em;
		color: #fff;
		font-size: 15px;
		line-height: var(--cu-h);
		letter-spacing: 0;
		text-decoration: none;
		transition: all 0.2s;
	}

	.cu-mm .cu-mm__links a:hover {
		color: #fff;
	}

	.cu-mm .cu-mm__links a > span {
		position: relative;
	}

	.cu-mm .cu-mm__links a > span::before {
		content: "";
		position: absolute;
		top: calc(100% + 2px);
		left: 0;
		width: 100%;
		border-bottom: 1px solid var(--cu-accent-hover);
		transform: scale(0, 1);
		transform-origin: right center;
		transition: transform 0.6s cubic-bezier(0.28, 0.75, 0.22, 0.95);
	}

	.cu-mm .cu-mm__links a:hover > span::before,
	.cu-mm .cu-mm__links a[aria-current] > span::before {
		transform: scale(1, 1);
		transform-origin: left center;
	}

	.cu-mm .cu-mm__links a:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -10px;
	}

	.cu-mm .cu-mm__sep {
		position: relative;
		z-index: 2;
		align-self: center;
		width: 1px;
		height: 24px;
		margin: 0 0.9em 0 auto;
		background: rgb(255 255 255 / 0.22);
	}

	.cu-mm .cu-mm__links + .cu-mm__sep {
		margin-left: 1.1em;
	}

	/* Panel – Shoptimizer sub-menu look. */
	.cu-mm .cu-mm__panel {
		position: absolute;
		top: 100%;
		left: var(--cu-pad); /* Aligned with the content edge (logo, hero), like the trigger. */
		z-index: 3;
		width: var(--cu-shop-w);
		background: var(--cu-bg);
		color: var(--cu-text);
		line-height: 1.4;
		text-align: left;
		box-shadow: 0 1px 15px rgb(0 0 0 / 0.08);
		animation: cu-mm-in 0.15s ease-in-out;
	}

	.cu-mm .cu-mm__panel.is-deep {
		right: var(--cu-pad);
		width: auto;
	}

	.cu-mm .cu-mm__level--root {
		max-height: calc(100vh - var(--cu-h) - 20px);
		overflow-y: auto;
		padding: 20px 12px;
	}

	.cu-mm .cu-mm__level--deep {
		display: flex;
		min-height: 320px;
		max-height: min(70vh, 640px);
		border-top: 1px solid var(--cu-line);
	}

	.cu-mm .cu-mm__list li {
		margin-bottom: 0.25rem;
		break-inside: avoid;
	}

	.cu-mm .cu-mm__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		min-height: 32px;
		margin: 0;
		padding: 0.3em 0.8em;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: var(--cu-text);
		font-family: inherit;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.4;
		letter-spacing: 0;
		text-align: left;
		text-transform: none;
		text-decoration: none;
		cursor: pointer;
	}

	.cu-mm .cu-mm__row .cu-mm__caret {
		opacity: 0.5;
		color: var(--cu-heading);
		transition: transform 0.2s;
	}

	.cu-mm .cu-mm__row:hover .cu-mm__caret,
	.cu-mm .cu-mm__row:focus-visible .cu-mm__caret {
		transform: translateX(3px);
	}

	.cu-mm .cu-mm__row:hover,
	.cu-mm .cu-mm__row[aria-current] {
		background: none;
		color: var(--cu-accent-hover);
	}

	.cu-mm .cu-mm__row:hover > span:first-child {
		text-decoration: underline;
		text-decoration-thickness: 0.5px;
		text-underline-offset: 0.18em;
	}

	.cu-mm .cu-mm__row:hover .cu-mm__caret {
		opacity: 1;
		color: var(--cu-accent-hover);
	}

	.cu-mm .cu-mm__row:focus-visible {
		outline: 2px solid var(--cu-accent-hover);
		outline-offset: -2px;
	}

	/* Left column: one link (name + product count, shared arrow), then secondary "Back". */
	.cu-mm .cu-mm__aside {
		box-sizing: border-box;
		flex: none;
		display: flex;
		flex-direction: column;
		gap: 16px;
		width: var(--cu-shop-w);
		padding: 40px var(--cu-in) 32px;
	}

	.cu-mm .cu-mm__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 4px 12px;
		align-items: center;
		color: var(--cu-heading);
		text-decoration: none;
	}

	.cu-mm .cu-mm__head:hover {
		color: var(--cu-heading);
	}

	.cu-mm .cu-mm__head:focus-visible {
		outline: 2px solid var(--cu-accent-hover);
		outline-offset: 6px;
	}

	.cu-mm .cu-mm__title {
		grid-column: 1;
		color: inherit;
		font-size: 20px;
		font-weight: 600;
		line-height: 1.3;
		text-wrap: balance;
		transition: color 0.2s;
	}

	.cu-mm .cu-mm__meta {
		grid-column: 1;
		color: var(--cu-accent);
		font-size: 15px;
		font-variant-numeric: tabular-nums;
	}

	.cu-mm .cu-mm__head .cu-mm__caret {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: 22px;
		height: 22px;
		color: var(--cu-accent-hover);
		transition: transform 0.2s;
	}

	.cu-mm a.cu-mm__head:hover .cu-mm__title {
		color: var(--cu-accent-hover);
	}

	.cu-mm a.cu-mm__head:hover .cu-mm__meta {
		text-decoration: underline;
		text-decoration-thickness: 0.5px;
		text-underline-offset: 0.18em;
	}

	.cu-mm a.cu-mm__head:hover .cu-mm__caret {
		transform: translateX(4px);
	}

	.cu-mm .cu-mm__back {
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 8px 0 0;
		padding: 0.7em 1.3em 0.7em 0.9em;
		border: 1px solid #ddd;
		border-radius: 4px;
		background: var(--cu-bg);
		box-shadow: none;
		color: var(--cu-text);
		font-family: inherit;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: 0;
		text-transform: none;
		cursor: pointer;
		transition: border-color 0.2s, color 0.2s;
	}

	.cu-mm .cu-mm__back .cu-mm__caret {
		opacity: 0.6;
		transform: rotate(180deg);
	}

	.cu-mm .cu-mm__back:hover {
		border-color: var(--cu-accent-hover);
		background: var(--cu-bg);
		color: var(--cu-accent-hover);
	}

	.cu-mm .cu-mm__back:hover .cu-mm__caret {
		opacity: 1;
	}

	.cu-mm .cu-mm__back:focus-visible {
		outline: 2px solid var(--cu-accent-hover);
		outline-offset: 2px;
	}

	.cu-mm .cu-mm__body {
		flex: 1;
		min-width: 0;
		overflow-y: auto;
		padding: 40px 25px;
		border-left: 1px solid var(--cu-line);
	}

	.cu-mm .cu-mm__list--cols-2,
	.cu-mm .cu-mm__list--cols-3 {
		column-gap: 50px;
		column-rule: 1px solid var(--cu-line);
	}

	.cu-mm .cu-mm__list--cols-2 {
		columns: 2;
	}

	.cu-mm .cu-mm__list--cols-3 {
		columns: 3;
	}

	.cu-mm .cu-mm__overlay {
		position: fixed;
		inset: 0;
		z-index: 1;
		background: rgb(0 0 0 / 0.25);
	}

	/* Top layer (Popover API): fixed to the trigger via JS-set custom properties; resets UA popover styles. */
	.cu-mm .cu-mm__panel:popover-open {
		position: fixed;
		inset: auto;
		top: var(--cu-top);
		left: var(--cu-left);
		margin: 0;
		padding: 0;
		border: 0;
		overflow: visible;
		background: var(--cu-bg);
		color: var(--cu-text);
	}

	.cu-mm .cu-mm__panel.is-deep:popover-open {
		right: auto;
		width: var(--cu-deep-w);
	}

	.cu-mm .cu-mm__panel:popover-open .cu-mm__level--root {
		max-height: calc(100vh - var(--cu-top) - 20px);
	}

	.cu-mm .cu-mm__overlay:popover-open {
		position: fixed;
		inset: var(--cu-top) 0 0 0;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		border: 0;
		background: rgb(0 0 0 / 0.25);
	}

	@keyframes cu-mm-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}

@media (min-width: 993px) and (max-width: 1199px) {

	.cu-mm .cu-mm__list--cols-3 {
		columns: 2;
	}
}

@media (prefers-reduced-motion: reduce) {

	.cu-mm *,
	.cu-mm *::before {
		animation: none !important;
		transition: none !important;
	}
}