/* Dominer Redesign v1.0.0 — CSS only. Revert: delete the dominer-redesign mu-plugin folder and purge Varnish. */

/* 1. Header — solid dark on every page */
body header.mbf-header {
	background: #1e1e1e;
	color: #fff;
}

body header.mbf-header .mbf-header__nav-inner > li > a,
body header.mbf-header .mbf-col-right,
body header.mbf-header .mbf-col-right a,
body header.mbf-header .mbf-col-right button,
body header.mbf-header .mbf-header__inner-mobile a,
body header.mbf-header .mbf-header__inner-mobile button {
	color: #fff;
}

body header.mbf-header .mbf-header__nav-inner > li:hover > a > span,
body header.mbf-header .mbf-header__nav-inner > li > a:hover,
body header.mbf-header .mbf-col-right a:hover {
	color: #fff;
}

/* Header icons have fill="black" hard-coded in their SVGs */
body header.mbf-header svg [fill="black"] {
	fill: #fff;
}

body header.mbf-header svg [stroke="black"] {
	stroke: #fff;
}

body header.mbf-header .mbf-logo img {
	filter: brightness(0) invert(1);
}

/* The theme's slanted hover/current shape is replaced by the squircle in section 2 */
body header.mbf-header .mbf-header__nav-inner > li:hover > a,
body header.mbf-header .mbf-header__nav-inner > li.current-menu-item > a,
body header.mbf-header .mbf-header__nav-inner > li.current-menu-ancestor > a {
	background-image: none;
}

/* 2. Desktop navigation — liquid-glass on every page (mobile/tablet: section 2c).
      Two layouts, both exactly 102px tall so nothing jumps when switching:
        - homepage before scrolling: big floating logo on the left, glass panel with menu + icons on the right;
        - every other page, and any page once scrolled (.mbf-scroll-sticky): one centred glass island
          holding a small logo, the menu and the icons.
      The header is kept on screen at all times (the theme normally hides it while scrolling down). */
@media (min-width: 992px) {
	body header.mbf-header {
		background: transparent;
		border-bottom-color: transparent;
	}

	body.mbf-navbar-smart-enabled header.mbf-header {
		top: var(--mbf-wpadminbar-height, 0px);
	}

	/* Shared grid; the glass is drawn by ::before so it can span exactly the columns it should */
	body header.mbf-header .mbf-header__inner-desktop {
		display: grid;
		grid-template-rows: 62px;
		align-items: center;
		height: auto;
		min-height: 0;
	}

	body header.mbf-header .mbf-header__inner-desktop::before {
		content: "";
		grid-row: 1;
		align-self: stretch;
		z-index: 0;
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 18px;
		background:
			linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 35%, rgba(255, 255, 255, 0.02) 65%, rgba(255, 255, 255, 0.12) 100%),
			rgba(14, 14, 14, 0.56);
		-webkit-backdrop-filter: blur(32px) saturate(170%) brightness(0.85);
		backdrop-filter: blur(32px) saturate(170%) brightness(0.85);
		box-shadow:
			inset 0 1px 1px rgba(255, 255, 255, 0.55),
			inset 0 -1px 1px rgba(255, 255, 255, 0.12),
			inset 0 0 28px rgba(255, 255, 255, 0.08),
			0 14px 40px rgba(0, 0, 0, 0.4);
	}

	body header.mbf-header .mbf-col-left,
	body header.mbf-header .mbf-col-center,
	body header.mbf-header .mbf-col-right {
		grid-row: 1;
	}

	body header.mbf-header .mbf-col-center {
		grid-column: 2;
		z-index: 1;
		height: 100%;
		padding: 0 0 0 8px;
	}

	body header.mbf-header .mbf-header__nav,
	body header.mbf-header .mbf-header__nav-inner {
		height: 100%;
	}

	/* Icons, with a short divider line on their left */
	body header.mbf-header .mbf-col-right {
		grid-column: 3;
		z-index: 1;
		height: 100%;
		margin-left: 8px;
		padding: 0 22px 0 20px;
		background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)) left center / 1px 26px no-repeat;
	}

	/* Menu items sit exactly in the vertical middle of the glass bar */
	body header.mbf-header .mbf-header__nav-inner > li {
		display: flex;
		align-items: center;
		height: 100%;
	}

	body header.mbf-header .mbf-header__nav-inner > li > a {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		height: 52px;
		padding: 0 16px;
		border-bottom-width: 0;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	}

	/* Customize item: Additional CSS gives it a slanted gradient (clip-path) and a 7px bottom border, both
	   !important. On desktop it keeps its gradient but in the same squircle as the other items; the more
	   specific selectors here win over Additional CSS even though it loads later. */
	body header.mbf-header .mbf-header__nav-inner > li.menu-item-14001 > a {
		border-bottom: 0 !important;
		clip-path: none !important;
	}

	body header.mbf-header .mbf-header__nav-inner > li.menu-item-14001:hover > a,
	body header.mbf-header .mbf-header__nav-inner > li.menu-item-14001.current-menu-item > a,
	body header.mbf-header .mbf-header__nav-inner > li.menu-item-14001.current_page_item > a {
		background: linear-gradient(135deg, #4facfe 0%, #a259ff 50%, #ff6b6b 100%) !important;
		box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 4px 14px rgba(162, 89, 255, 0.35);
	}

	/* No green underline */
	body header.mbf-header .mbf-header__nav-inner > li > a:before {
		display: none;
	}

	/* Current page: a frosted squircle centred in the glass bar with an even 4px gap all round, its corners
	   following the bar's own curve (18px outer radius - 1px border - 4px gap). Hover shows a fainter one. */
	body header.mbf-header .mbf-header__nav-inner > li > a {
		border-radius: 13px;
		transition: background-color 0.25s ease, box-shadow 0.25s ease;
	}

	@supports (corner-shape: squircle) {
		body header.mbf-header .mbf-header__nav-inner > li > a {
			border-radius: 20px;
			corner-shape: squircle;
		}
	}

	body header.mbf-header .mbf-header__nav-inner > li:hover > a {
		background-color: rgba(255, 255, 255, 0.08);
	}

	body header.mbf-header .mbf-header__nav-inner > li.current-menu-item > a,
	body header.mbf-header .mbf-header__nav-inner > li.current-menu-ancestor > a {
		background-color: rgba(255, 255, 255, 0.3);
		box-shadow:
			inset 0 1px 1px rgba(255, 255, 255, 0.6),
			inset 0 0 0 1px rgba(255, 255, 255, 0.28),
			0 4px 14px rgba(0, 0, 0, 0.25);
	}

	/* Dropdowns match the glass (darker tint so text stays readable over white sections) */
	body header.mbf-header .mbf-header__nav-inner .sub-menu {
		border: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 14px;
		background: rgba(14, 14, 14, 0.8);
		-webkit-backdrop-filter: blur(32px) saturate(170%);
		backdrop-filter: blur(32px) saturate(170%);
		box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 12px 32px rgba(0, 0, 0, 0.35);
	}

	body header.mbf-header .mbf-header__nav-inner .sub-menu a,
	body header.mbf-header .mbf-header__nav-inner .sub-menu > li a:hover {
		color: #fff;
	}

	body header.mbf-header .mbf-header__nav-inner .sub-menu > li:hover > a {
		background-color: rgba(255, 255, 255, 0.1);
	}

	/* Main dropdowns "leak" out of the bar: same glass tint where they meet it (darkening further down for
	   readability), square top edge tucked over the bar's bottom border, curved fillets joining the two,
	   and a quick downward pour when opening. Nested flyouts (e.g. Accessories) keep the panel style above. */
	body header.mbf-header .mbf-header__nav-inner > li:hover > .sub-menu,
	body header.mbf-header .mbf-header__nav-inner > li:focus-within > .sub-menu {
		top: calc(100% - 1px);
	}

	body header.mbf-header .mbf-header__nav-inner > li > .sub-menu {
		padding: 6px 0 10px;
		border: 0;
		border-radius: 0 0 18px 18px;
		background: linear-gradient(180deg, rgba(14, 14, 14, 0.56) 0, rgba(14, 14, 14, 0.78) 90px);
		box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.14), 0 18px 32px rgba(0, 0, 0, 0.3);
	}

	/* One curved join, on the right; the left edge drops straight down from the menu item */
	body header.mbf-header .mbf-header__nav-inner > li > .sub-menu::after {
		content: "";
		position: absolute;
		top: 0;
		width: 16px;
		height: 16px;
		pointer-events: none;
		left: 100%;
		background: radial-gradient(circle 16px at 100% 100%, transparent 15.5px, rgba(14, 14, 14, 0.56) 16px);
	}

	body header.mbf-header .mbf-header__nav-inner > li:hover > .sub-menu {
		/* backwards (not both): no clip-path is left behind, so nested flyouts aren't cut off */
		animation: dr-menu-pour 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
	}

	@keyframes dr-menu-pour {
		from { clip-path: inset(0 -20px 100% -20px); }
		to   { clip-path: inset(0 -20px -40px -20px); }
	}

	body header.mbf-header .mbf-header__nav-inner .sub-menu > li > a {
		border-radius: 10px;
		margin: 0 6px;
	}

	/* --- Homepage before scrolling: big floating logo | glass panel (menu + icons) --- */
	body.home header.mbf-header:not(.mbf-scroll-sticky) .mbf-header__inner-desktop {
		grid-template-columns: 1fr auto auto;
		/* 24 + 62 + 15 + 1px border = 102px */
		padding: 24px 0 15px;
	}

	body.home header.mbf-header:not(.mbf-scroll-sticky) .mbf-header__inner-desktop::before {
		grid-column: 2 / 4;
		background:
			linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 35%, rgba(255, 255, 255, 0.02) 65%, rgba(255, 255, 255, 0.1) 100%),
			rgba(14, 14, 14, 0.34);
		-webkit-backdrop-filter: blur(28px) saturate(170%);
		backdrop-filter: blur(28px) saturate(170%);
	}

	body.home header.mbf-header:not(.mbf-scroll-sticky) .mbf-col-left {
		grid-column: 1;
		align-self: start;
		margin-top: -6px;
		padding: 0;
	}

	body.home header.mbf-header:not(.mbf-scroll-sticky) .mbf-logo img {
		width: 96px;
		height: auto;
		max-height: none;
		filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
	}

	/* --- Centred island: other pages, and every page once scrolled --- */
	body:not(.home) header.mbf-header .mbf-header__inner-desktop,
	body header.mbf-header.mbf-scroll-sticky .mbf-header__inner-desktop {
		grid-template-columns: auto auto auto;
		justify-content: center;
		/* 19 + 62 + 20 + 1px border = 102px */
		padding: 19px 0 20px;
	}

	body:not(.home) header.mbf-header .mbf-header__inner-desktop::before,
	body header.mbf-header.mbf-scroll-sticky .mbf-header__inner-desktop::before {
		grid-column: 1 / 4;
	}

	body:not(.home) header.mbf-header .mbf-col-left,
	body header.mbf-header.mbf-scroll-sticky .mbf-col-left {
		grid-column: 1;
		z-index: 1;
		align-self: stretch;
		display: flex;
		align-items: center;
		padding: 0 18px 0 22px;
		background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)) right center / 1px 26px no-repeat;
	}

	body:not(.home) header.mbf-header .mbf-logo img,
	body header.mbf-header.mbf-scroll-sticky .mbf-logo img {
		width: 40px;
		height: auto;
		max-height: none;
	}

	/* Smooth switch between the two layouts: dominer-redesign.js glides the logo and menu from their
	   old to their new positions and adds .dr-morph for a moment, while the glass reshapes here.
	   The theme's own 0.3s transition on this row is turned off so it doesn't fight the glide. */
	body header.mbf-header .mbf-header__inner-desktop,
	body header.mbf-header .mbf-logo img {
		transition: none;
	}

	body header.mbf-header.dr-morph .mbf-header__inner-desktop::before {
		animation: dr-glass-morph 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	@keyframes dr-glass-morph {
		from { opacity: 0.15; transform: scaleX(0.94); }
		to   { opacity: 1; transform: none; }
	}

	body.home header.mbf-header + .home-slider-container {
		margin-top: -102px;
	}

	/* The header never hides now, so sticky columns (product details, sidebars) must always sit below it.
	   The theme's script writes these tops inline assuming the header can hide, hence !important;
	   the value is exactly what the script itself uses while the header is showing (header + 20px). */
	body.mbf-navbar-smart-enabled.mbf-stick-to-top .mbf-single-product .entry-summary,
	body.mbf-sticky-sidebar-enabled.mbf-navbar-smart-enabled.mbf-stick-to-top .mbf-sidebar__inner,
	body.mbf-sticky-sidebar-enabled.mbf-navbar-smart-enabled.mbf-stick-last .mbf-sidebar__inner .widget:last-child {
		top: calc(102px + var(--mbf-wpadminbar-height, 0px) + 20px) !important;
	}

	body.mbf-navbar-smart-enabled .woocommerce-products-wrap__sidebar-inner {
		top: calc(102px + var(--mbf-wpadminbar-height, 0px) + 3rem);
	}

	/* Scroll-down nudge at the bottom of the hero */
	body.home .home-slider-container:not(:has(.slider-right)) {
		position: relative;
	}

	body.home .home-slider-container:not(:has(.slider-right))::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 34px;
		z-index: 5;
		width: 16px;
		height: 16px;
		margin-left: -8px;
		border-right: 2px solid rgba(255, 255, 255, 0.9);
		border-bottom: 2px solid rgba(255, 255, 255, 0.9);
		pointer-events: none;
		filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
		animation:
			dr-nudge-in 0.8s ease-out 3.2s both,
			dr-nudge-bob 2.2s ease-in-out 4s infinite;
	}

	@keyframes dr-nudge-in {
		from { opacity: 0; transform: translateY(-8px) rotate(45deg); }
		to   { opacity: 1; transform: translateY(0) rotate(45deg); }
	}

	@keyframes dr-nudge-bob {
		0%, 100% { transform: translateY(0) rotate(45deg); opacity: 1; }
		50%      { transform: translateY(9px) rotate(45deg); opacity: 0.55; }
	}
}

@media (min-width: 992px) and (max-width: 1280px) {
	body header.mbf-header .mbf-header__nav-inner > li > a {
		padding: 0 11px;
	}

	body header.mbf-header .mbf-header__nav-inner > li > a:before {
		left: 11px;
		right: 11px;
	}

	body header.mbf-header .mbf-col-right {
		padding-left: 14px;
	}
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
	body header.mbf-header.dr-morph .mbf-header__inner-desktop::before,
	body.home .home-slider-container:not(:has(.slider-right))::after {
		animation: none;
	}

	body.home .home-slider-container:not(:has(.slider-right))::after {
		transform: rotate(45deg);
	}
}

/* 2c. Mobile & tablet navigation (below 992px) — the original full-width bar, always on screen,
       with a liquid-glass background instead of the solid grey: lighter over the homepage hero,
       darker once scrolled and on other pages. Layout, logo size and height (74px) are unchanged. */
@media (max-width: 991px) {
	body header.mbf-header {
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%),
			rgba(14, 14, 14, 0.68);
		-webkit-backdrop-filter: blur(32px) saturate(170%) brightness(0.85);
		backdrop-filter: blur(32px) saturate(170%) brightness(0.85);
		border-bottom-color: rgba(255, 255, 255, 0.14);
		box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.25);
	}

	body.home header.mbf-header:not(.mbf-scroll-sticky) {
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%),
			rgba(14, 14, 14, 0.35);
		-webkit-backdrop-filter: blur(28px) saturate(170%);
		backdrop-filter: blur(28px) saturate(170%);
		box-shadow: none;
	}

	body.mbf-navbar-smart-enabled header.mbf-header {
		top: var(--mbf-wpadminbar-height, 0px);
	}

	/* Homepage hero fills the phone screen below the promo bar; the header floats on top.
	   --dr-promo-h is the promo bar's real height, set by dominer-redesign.js (71px fallback). */
	body.home header.mbf-header + .home-slider-container {
		margin-top: -74px;
	}

	body.home .home-slider-container:not(:has(.slider-right)) .banner-image-mobile,
	body.home .home-slider-container:not(:has(.slider-right)) .video-container {
		height: max(420px, calc(100svh - var(--dr-promo-h, 71px)));
		width: 100%;
		object-fit: cover;
		object-position: 66% center;
	}

	body.home .home-slider-container:has(img[src*="go-ahead-hero-"]) .left::after {
		font-size: min(19vw, 150px);
	}

	/* Scroll-down nudge */
	body.home .home-slider-container:not(:has(.slider-right)) {
		position: relative;
	}

	body.home .home-slider-container:not(:has(.slider-right))::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 28px;
		z-index: 5;
		width: 14px;
		height: 14px;
		margin-left: -7px;
		border-right: 2px solid rgba(255, 255, 255, 0.9);
		border-bottom: 2px solid rgba(255, 255, 255, 0.9);
		pointer-events: none;
		filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
		animation:
			dr-nudge-in 0.8s ease-out 3.2s both,
			dr-nudge-bob 2.2s ease-in-out 4s infinite;
	}

	/* Hamburger menu panel: dark liquid glass, white text, headings-style menu items */
	body .mbf-offcanvas {
		background:
			linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 40%),
			rgba(14, 14, 14, 0.78);
		-webkit-backdrop-filter: blur(32px) saturate(170%);
		backdrop-filter: blur(32px) saturate(170%);
		color: #fff;
	}

	body .mbf-offcanvas,
	body .mbf-offcanvas a,
	body .mbf-offcanvas .mbf-icon,
	body .mbf-offcanvas__search-toggle,
	body .mbf-offcanvas__toggle,
	body .mbf-offcanvas__main-menu li > span {
		color: #fff;
	}

	body .mbf-offcanvas .mbf-logo img {
		filter: brightness(0) invert(1);
	}

	body .mbf-offcanvas__header,
	body .mbf-offcanvas__main-menu li {
		border-color: rgba(255, 255, 255, 0.14);
	}

	body .mbf-offcanvas__main-menu ul.menu > li > a {
		font-family: "Barlow Condensed", "Archivo", sans-serif;
		font-weight: 700;
		font-size: 26px;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

	body .mbf-offcanvas__main-menu .sub-menu a {
		color: rgba(255, 255, 255, 0.8);
	}

	body .mbf-offcanvas__my-account {
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.14);
	}

	/* The navbar steps aside while the filters panel (theme sidebar or WooCommerce's filter overlay) is open */
	body.mbf-shop-sidebar-active header.mbf-header,
	body:has(.wc-block-product-filters.is-overlay-opened) header.mbf-header {
		transform: translateY(-110%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
	}
}

/* Tablets (768–991px): the product details column is sticky here too; keep it below the header */
@media (min-width: 768px) and (max-width: 991px) {
	body.mbf-navbar-smart-enabled .mbf-single-product .entry-summary {
		top: calc(74px + var(--mbf-wpadminbar-height, 0px) + 20px);
	}
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
	body header.mbf-header.dr-morph .mbf-header__inner-mobile::before,
	body.home .home-slider-container:not(:has(.slider-right))::after {
		animation: none;
	}

	body.home .home-slider-container:not(:has(.slider-right))::after {
		transform: rotate(45deg);
	}
}

/* Shared animations (defined at top level so every screen size can use them) */
@keyframes dr-glass-morph {
	from { opacity: 0.15; transform: scaleX(0.94); }
	to   { opacity: 1; transform: none; }
}

@keyframes dr-nudge-in {
	from { opacity: 0; transform: translateY(-8px) rotate(45deg); }
	to   { opacity: 1; transform: translateY(0) rotate(45deg); }
}

@keyframes dr-nudge-bob {
	0%, 100% { transform: translateY(0) rotate(45deg); opacity: 1; }
	50%      { transform: translateY(9px) rotate(45deg); opacity: 0.55; }
}

/* 3. Homepage hero — full width when the right slider is left empty in ACF */
body.home .home-slider-container:not(:has(.slider-right)) .left {
	width: 100%;
	padding-bottom: 0;
}

/* The empty right column must not take space, or the slider measures itself too narrow on load */
body.home .home-slider-container:not(:has(.slider-right)) .right {
	display: none;
}

/* Desktop hero fills the whole visible window below the promo bar (the header floats on top of it),
   on any screen size; 520px minimum for very short windows. */
@media (min-width: 992px) {
	body.home .home-slider-container:not(:has(.slider-right)) .banner-image-desktop,
	body.home .home-slider-container:not(:has(.slider-right)) .video-container {
		height: max(520px, calc(100vh - 50px));
		width: 100%;
		object-fit: cover;
		object-position: center;
	}

	body.home:not(:has(.mbf-notification-bar)) .home-slider-container:not(:has(.slider-right)) .banner-image-desktop,
	body.home:not(:has(.mbf-notification-bar)) .home-slider-container:not(:has(.slider-right)) .video-container {
		height: max(520px, 100vh);
	}
}

body.home .home-slider-container:not(:has(.slider-right)) .swiper-pagination-bullet {
	border-color: #fff;
}

body.home .home-slider-container:not(:has(.slider-right)) .swiper-pagination-bullet-active {
	background-color: #fff;
}

/* 3b. Homepage hero — luxury cinematic motion + "GO AHEAD!" title.
       Active only while a text-free hero photo named go-ahead-hero-<something> is the slide image
       (the old go-ahead-hero.webp with baked-in text never matches), so changing the slide in ACF
       switches this off automatically. */
body.home .home-slider-container:has(img[src*="go-ahead-hero-"]) .left {
	position: relative;
	overflow: hidden;
}

/* Slow camera: opens slightly close, settles, then drifts */
body.home .home-slider-container:has(img[src*="go-ahead-hero-"]) .swiper-slide img {
	animation:
		dr-lux-settle 3.6s cubic-bezier(0.16, 1, 0.3, 1) both,
		dr-lux-drift 30s ease-in-out 3.6s infinite alternate;
	transform-origin: 62% 60%;
	will-change: transform, filter;
}

/* Vignette + top/bottom darkening so the white title reads against the bright clouds */
body.home .home-slider-container:has(img[src*="go-ahead-hero-"]) .left::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 70%),
		radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.35) 100%);
	animation: dr-lux-fade 2.4s ease-out both;
}

/* The title: tall bold condensed, silver-white with a moving sheen, revealed by a feathered wipe */
body.home .home-slider-container:has(img[src*="go-ahead-hero-"]) .left::after {
	content: "GO AHEAD!";
	position: absolute;
	top: 47%;
	left: 50%;
	z-index: 3;
	pointer-events: none;
	white-space: nowrap;
	font-family: "Barlow Condensed", "Archivo", sans-serif;
	font-weight: 800;
	font-size: clamp(56px, 15vw, 290px);
	line-height: 0.9;
	letter-spacing: 0.01em;
	color: transparent;
	background: linear-gradient(100deg, #ececec 0%, #ececec 40%, #ffffff 47%, #ffffff 53%, #ececec 60%, #ececec 100%);
	background-size: 260% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	/* No filter and no mask at rest: the drop-shadow + mask + text-clipped gradient combination is what
	   produced the halo/smudge around the letters. The wipe mask exists only during the reveal. */
	transform: translate(-50%, -50%);
	animation:
		dr-lux-reveal 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.7s backwards,
		dr-lux-sheen 2.8s ease-in-out 3.4s 1 both,
		dr-lux-sheen-loop 10s ease-in-out 6.2s infinite;
}

@keyframes dr-lux-settle {
	from { transform: scale(1.14); filter: brightness(0.55) saturate(0.85); }
	to   { transform: scale(1.04); filter: brightness(1) saturate(1); }
}

@keyframes dr-lux-drift {
	from { transform: scale(1.04) translate3d(0, 0, 0); }
	to   { transform: scale(1.12) translate3d(-1.2%, -0.8%, 0); }
}

@keyframes dr-lux-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes dr-lux-reveal {
	from {
		-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%);
		-webkit-mask-size: 300% 100%;
		mask-size: 300% 100%;
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
		letter-spacing: 0.14em;
		transform: translate(-50%, -46%) scale(1.03);
	}
	to {
		-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%);
		-webkit-mask-size: 300% 100%;
		mask-size: 300% 100%;
		-webkit-mask-position: 0% 0;
		mask-position: 0% 0;
		letter-spacing: 0.01em;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes dr-lux-sheen {
	from { background-position: 100% 0; }
	to   { background-position: 0% 0; }
}

/* A slow sweep, then a long rest (the sweep takes the first 28% of each 10s cycle) */
@keyframes dr-lux-sheen-loop {
	0%   { background-position: 100% 0; }
	28%  { background-position: 0% 0; }
	100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
	body.home .home-slider-container:has(img[src*="go-ahead-hero-"]) .swiper-slide img,
	body.home .home-slider-container:has(img[src*="go-ahead-hero-"]) .left::before,
	body.home .home-slider-container:has(img[src*="go-ahead-hero-"]) .left::after {
		animation: none;
	}
}

/* 4. Headings — bold condensed (products, cart, checkout untouched) */
body.home .entry-content .wp-block-heading,
body .woocommerce-products-header__title,
body.page:not(.woocommerce-page) .mbf-entry__title {
	font-family: "Barlow Condensed", "Archivo", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1;
}

/* !important only because these headings carry inline size/weight from the block editor */
body.home .entry-content .wp-block-heading {
	font-size: clamp(34px, 4.2vw, 56px) !important;
	font-weight: 800 !important;
}

/* 5. Promo bar */
body .mbf-notification-bar__inner {
	letter-spacing: 0.06em;
}

/* 6. Customize page (Kit Builder) — hovering a sport card turns the others black & white and blurred.
      Desktop / mouse only; phones and tablets are untouched. */
@media (hover: hover) and (min-width: 769px) {
	body .kb-wrapper .kb-categories .kb-category {
		transition: box-shadow 0.2s ease-in-out, filter 0.3s ease, transform 0.3s ease;
	}

	body .kb-wrapper .kb-categories:has(.kb-category:hover) .kb-category:not(:hover) {
		filter: grayscale(100%) blur(2px);
	}
}

/* 7. Customize page (Kit Builder) — Squad Stores call-to-action above the sport cards.
      !important is needed only where the Additional CSS already uses !important on these elements. */
body.page-id-13998 .kb-wrapper .kb-page-content > .kb-home-navigation-options:first-of-type {
	order: 0;
	justify-content: stretch !important;
	align-items: stretch;
	margin-top: 110px;
	margin-bottom: 0 !important;
	padding: 0 !important;
}

body.page-id-13998 .kb-wrapper .kb-page-content > ul.kb-categories {
	margin-top: 28px !important;
}

body.page-id-13998 .kb-wrapper .kb-page-content > .kb-home-navigation-options .kb-team-stores-home-button {
	flex: 1 1 auto;
	box-sizing: border-box;
	width: 100%;
	justify-content: flex-start;
	align-items: center;
	gap: 18px !important;
	min-height: 88px;
	padding: 0 36px !important;
	border: 2px solid transparent !important;
	border-radius: 0 !important;
	background:
		linear-gradient(#1e1e1e, #1e1e1e) padding-box,
		linear-gradient(100deg, #4facfe 0%, #a259ff 50%, #ff6b6b 100%) border-box !important;
	color: #fff !important;
	font-family: "Barlow Condensed", "Archivo", sans-serif !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	text-decoration: none;
	transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* The icon is a font ligature ("storefront"); it only renders in lowercase with its own font */
body.page-id-13998 .kb-wrapper .kb-page-content > .kb-home-navigation-options .kb-team-stores-home-button::before {
	font-size: 34px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

body.page-id-13998 .kb-wrapper .kb-page-content > .kb-home-navigation-options .kb-team-stores-home-button::after {
	content: "\2192";
	margin-left: auto;
	font-size: 36px;
	line-height: 1;
	transition: transform 0.3s ease;
}

body.page-id-13998 .kb-wrapper .kb-page-content > .kb-home-navigation-options .kb-team-stores-home-button:hover {
	background:
		linear-gradient(100deg, #4facfe 0%, #a259ff 50%, #ff6b6b 100%) padding-box,
		linear-gradient(100deg, #4facfe 0%, #a259ff 50%, #ff6b6b 100%) border-box !important;
	box-shadow: 0 12px 30px rgba(162, 89, 255, 0.35) !important;
	transform: translateY(-2px);
}

body.page-id-13998 .kb-wrapper .kb-page-content > .kb-home-navigation-options .kb-team-stores-home-button:hover::after {
	transform: translateX(8px);
}

/* My Designs stays in its original spot below the cards. Kit Builder renders a second copy of the
   button row after the cards (normally hidden); show that row only when My Designs is visible,
   with only My Designs in it, and hide My Designs in the top row. */
body.page-id-13998 .kb-wrapper .kb-page-content > .kb-home-navigation-options:first-of-type .kb-my-designs-home-button {
	display: none !important;
}

body.page-id-13998 .kb-wrapper .kb-page-content > .kb-home-navigation-options:last-of-type:has(.kb-my-designs-home-button:not(.ng-hide)) {
	display: flex !important;
}

body.page-id-13998 .kb-wrapper .kb-page-content > .kb-home-navigation-options:last-of-type .kb-button:not(.kb-my-designs-home-button) {
	display: none !important;
}

/* Tablet: the single card column otherwise shrinks to its content and ends up narrower than the button */
@media (min-width: 769px) and (max-width: 1024px) {
	body.page-id-13998 .kb-wrapper .kb-page-content > ul.kb-categories {
		width: 100%;
	}
}

@media (max-width: 768px) {
	body.page-id-13998 .kb-wrapper .kb-page-content > .kb-home-navigation-options:first-of-type {
		margin-top: 50px;
		padding: 0 10px !important;
	}

	body.page-id-13998 .kb-wrapper .kb-page-content > .kb-home-navigation-options .kb-team-stores-home-button {
		min-height: 64px;
		gap: 12px !important;
		padding: 0 20px !important;
		font-size: 22px !important;
	}

	body.page-id-13998 .kb-wrapper .kb-page-content > .kb-home-navigation-options .kb-team-stores-home-button::before {
		font-size: 26px !important;
	}

	body.page-id-13998 .kb-wrapper .kb-page-content > .kb-home-navigation-options .kb-team-stores-home-button::after {
		font-size: 28px;
	}
}

/* 8. Shop filters sidebar — calmer typography, collapsible sections (toggled by dominer-redesign.js)
      and its own scroll area on desktop so every option can be reached while the sidebar stays pinned. */
@media (min-width: 992px) {
	.woocommerce-products-wrap__sidebar-inner:has(.wc-block-product-filters) {
		max-height: calc(100vh - 170px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: 14px;
		scrollbar-width: thin;
		scrollbar-color: rgba(30, 30, 30, 0.25) transparent;
	}

	.woocommerce-products-wrap__sidebar-inner:has(.wc-block-product-filters)::-webkit-scrollbar {
		width: 6px;
	}

	.woocommerce-products-wrap__sidebar-inner:has(.wc-block-product-filters)::-webkit-scrollbar-thumb {
		background: rgba(30, 30, 30, 0.25);
		border-radius: 3px;
	}
}

.wc-block-product-filters h2.wp-block-heading {
	font-family: "Barlow Condensed", "Archivo", sans-serif;
	font-weight: 800;
	font-size: 30px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 8px !important;
}

/* Each filter group: a thin divider and a clickable title row with a chevron */
.wc-block-product-filters [class*="wp-block-woocommerce-product-filter-"]:has(> h3.wp-block-heading) {
	border-top: 1px solid rgba(30, 30, 30, 0.12);
	padding: 14px 0;
	margin: 0 !important;
}

.wc-block-product-filters [class*="wp-block-woocommerce-product-filter-"] > h3.wp-block-heading {
	position: relative;
	margin: 0 !important;
	padding-right: 28px;
	font-family: "Barlow Condensed", "Archivo", sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #1e1e1e;
	cursor: pointer;
	user-select: none;
}

.wc-block-product-filters [class*="wp-block-woocommerce-product-filter-"] > h3.wp-block-heading::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-50%) rotate(225deg);
	transition: transform 0.25s ease;
}

.wc-block-product-filters [class*="wp-block-woocommerce-product-filter-"] > h3.wp-block-heading:focus-visible {
	outline: 2px solid #64c846;
	outline-offset: 4px;
}

.wc-block-product-filters [class*="wp-block-woocommerce-product-filter-"] > h3.wp-block-heading ~ * {
	margin-top: 12px;
}

/* Collapsed */
.wc-block-product-filters .dr-filter-collapsed > h3.wp-block-heading::after {
	transform: translateY(-50%) rotate(45deg);
	margin-top: -1px;
}

.wc-block-product-filters .dr-filter-collapsed > :not(h3) {
	display: none !important;
}

/* Options: airy rows, muted counts */
.wc-block-product-filters .wc-block-product-filter-checkbox-list__label {
	font-size: 15px;
	line-height: 1.35;
	color: #3a3a3a;
	padding: 6px 0;
	gap: 12px;
	cursor: pointer;
}

/* Bigger, softer checkboxes: 20px rounded square, black with a white tick when selected */
.wc-block-product-filters .wc-block-product-filter-checkbox-list__input-wrapper {
	position: relative;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

/* WooCommerce's own 15px grey square layer; the 20px box below replaces it */
.wc-block-product-filters .wc-block-product-filter-checkbox-list__input-wrapper::before {
	display: none !important;
}

.wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid #8f8f8f !important;
	border-radius: 6px;
	background: #fff !important;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__label:hover input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	border-color: #1e1e1e !important;
}

.wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	border-color: #1e1e1e !important;
	background: #1e1e1e !important;
}

.wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:focus-visible {
	outline: 2px solid #64c846;
	outline-offset: 2px;
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__mark {
	top: 50%;
	left: 50%;
	width: 11px;
	height: auto;
	margin: 0;
	transform: translate(-50%, -50%);
	color: #fff !important;
	pointer-events: none;
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__label:hover {
	color: #000;
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__text-wrapper span:last-child:not(:first-child),
.wc-block-product-filters .wc-block-product-filter-checkbox-list__count {
	color: #9a9a9a;
	font-size: 12px;
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__show-more-button {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #1e1e1e;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-top: 6px;
}