/*!
 * NC Mega Menu — v1.0.0
 * assets/nc-mega-menu.css
 *
 * Every selector is scoped under .nc-mm or .nc-brands so nothing leaks into
 * XStore / Elementor.
 *
 * RTL: layout uses logical properties ONLY (margin-inline-*, padding-inline-*,
 * inset-inline-*, border-inline-*, text-align:start/end). The Arabic site is a
 * true mirror with no extra layout rules. The only direction-aware hooks are:
 *   1. --nc-mm-dir (+1 ltr / -1 rtl) used by the slide keyframes, because
 *      transforms are physical by nature.
 *   2. transform: scaleX(-1) on directional chevrons (rail arrow, back, group).
 * Symmetric glyphs (the accordion down-chevron) intentionally do NOT mirror and
 * therefore use physical border-bottom/border-right.
 *
 * Breakpoint: 1024px. >=1024 desktop (rail + flyout grid), <1024 mobile drawer.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.nc-mm,
.nc-brands {
	--nc-mm-bg: #ffffff;
	--nc-mm-fg: #1d1e22;
	--nc-mm-muted: #6c7079;
	--nc-mm-accent: #e91e63;
	--nc-mm-border: #ececf1;
	--nc-mm-rail-bg: #fafafb;
	--nc-mm-rail-active-bg: #ffffff;
	--nc-mm-radius: 14px;
	--nc-mm-shadow: 0 24px 60px rgba(17, 17, 26, 0.12), 0 6px 18px rgba(17, 17, 26, 0.06);
	--nc-mm-rail-w: 260px;
	--nc-mm-panel-h: 520px;
	--nc-mm-panel-max-h: min(78vh, 640px);
	--nc-mm-z: 9999;

	/* internal, not part of the public token contract */
	--nc-mm-tab-w: 120px;
	--nc-mm-aside-w: 320px;
	--nc-mm-pad: 26px;
	--nc-mm-dir: 1;

	box-sizing: border-box;
	color: var(--nc-mm-fg);
}

.nc-mm *,
.nc-mm *::before,
.nc-mm *::after,
.nc-brands *,
.nc-brands *::before,
.nc-brands *::after {
	box-sizing: border-box;
}

/* Direction flag for the (necessarily physical) slide transforms. */
[dir="rtl"] .nc-mm,
[dir="rtl"] .nc-brands,
.nc-mm[dir="rtl"],
.nc-brands[dir="rtl"] {
	--nc-mm-dir: -1;
}

/* The [hidden] attribute must always win over our display rules. */
.nc-mm [hidden],
.nc-brands [hidden] {
	display: none !important;
}

/* ==========================================================================
   2. Shared primitives
   ========================================================================== */

.nc-mm {
	position: relative;
	display: inline-block;
	max-width: 100%;
	font-size: 14px;
	line-height: 1.45;
	text-align: start;
}

.nc-mm button,
.nc-brands button {
	margin: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.nc-mm a,
.nc-brands a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.nc-mm ul,
.nc-brands ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nc-mm img,
.nc-brands img {
	max-width: 100%;
	height: auto;
}

.nc-mm svg,
.nc-brands svg {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	pointer-events: none;
}

.nc-mm :focus-visible,
.nc-brands :focus-visible {
	outline: 2px solid var(--nc-mm-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   3. Toggle button
   ========================================================================== */

.nc-mm__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	padding-block: 11px;
	padding-inline: 18px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--nc-mm-accent);
	border-radius: calc(var(--nc-mm-radius) - 4px);
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.nc-mm__toggle:hover,
.nc-mm.is-open .nc-mm__toggle {
	background: color-mix(in srgb, var(--nc-mm-accent) 86%, #000);
}

.nc-mm__toggle-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Every icon form — burger, preset SVG, font glyph, uploaded image — answers to
   the same size and colour, so switching between them never changes the button. */
/* Scoped through .nc-mm on purpose: the base `.nc-mm svg { width: 1em }` in §2
   is (0,1,1) and would otherwise out-specify a bare `.nc-mm__icon`, pinning
   every preset to the button's font size and making the size control do
   nothing to them while still working on the burger. */
.nc-mm .nc-mm__burger,
.nc-mm .nc-mm__icon {
	flex: 0 0 auto;
	width: var(--nc-mm-icon-size, 16px);
	height: var(--nc-mm-icon-size, 16px);
	color: var(--nc-mm-icon-color, currentColor);
}

.nc-mm.is-open .nc-mm__burger,
.nc-mm.is-open .nc-mm__icon {
	color: var(--nc-mm-icon-color-open, var(--nc-mm-icon-color, currentColor));
}

.nc-mm__icon--font {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--nc-mm-icon-size, 16px);
	line-height: 1;
}

.nc-mm__icon--svg {
	display: block;
}

/* A raster upload carries its own colours, so it is only sized, never tinted. */
.nc-mm__icon--img {
	object-fit: contain;
}

.nc-mm .nc-mm__burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	/* The bars need to read as a burger, not a square. */
	height: calc(var(--nc-mm-icon-size, 16px) * 0.75);
}

.nc-mm__burger > span {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Half the bar span, less half a bar — derived from the size token so the X
   still closes cleanly when the icon is scaled up. */
.nc-mm.is-open .nc-mm__burger > span:nth-child(1) {
	transform: translateY(calc(var(--nc-mm-icon-size, 16px) * 0.375 - 1px)) rotate(45deg);
}

.nc-mm.is-open .nc-mm__burger > span:nth-child(2) {
	opacity: 0;
}

.nc-mm.is-open .nc-mm__burger > span:nth-child(3) {
	transform: translateY(calc(var(--nc-mm-icon-size, 16px) * -0.375 + 1px)) rotate(-45deg);
}

.nc-mm__caret {
	width: 12px;
	height: 12px;
	margin-inline-start: auto;
	opacity: 0.85;
	transition: transform 0.2s ease;
}

.nc-mm.is-open .nc-mm__caret {
	transform: rotate(180deg);
}

/* --- inline bar ----------------------------------------------------------
   The top-level categories laid out like a theme nav instead of behind one
   button. Desktop only: on a phone there is nowhere to put a horizontal bar,
   so the toggle and drawer come back. */

.nc-mm__bar {
	display: none;
	gap: var(--nc-mm-bar-gap, 4px);
	align-items: center;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

.nc-mm__bar::-webkit-scrollbar {
	display: none;
}

@media (min-width: 1024px) {
	.nc-mm--inline {
		display: block;
		width: 100%;
	}

	.nc-mm--inline .nc-mm__bar {
		display: flex;
	}

	/* The bar replaces the button rather than sitting next to it. */
	.nc-mm--inline .nc-mm__toggle {
		display: none;
	}

	/* Bar tabs are nav links, not rail rows: no full-width block, no arrow. */
	.nc-mm--inline .nc-mm__bar .nc-mm__rail-item {
		width: auto;
		padding-block: var(--nc-mm-bar-pad-y, 12px);
		padding-inline: var(--nc-mm-bar-pad-x, 14px);
		font-size: var(--nc-mm-bar-size, 14px);
		font-weight: 500;
		white-space: nowrap;
		background: none;
	}

	.nc-mm--inline .nc-mm__bar .nc-mm__rail-item::before {
		display: none;
	}

	.nc-mm--inline .nc-mm__bar .nc-mm__rail-arrow {
		display: none;
	}

	.nc-mm--inline .nc-mm__bar .nc-mm__rail-label {
		white-space: nowrap;
	}

	/* An underline reads as a nav bar; the rail's left bar reads as a sidebar. */
	.nc-mm--inline .nc-mm__bar .nc-mm__rail-item.is-active,
	.nc-mm--inline .nc-mm__bar .nc-mm__rail-item:hover {
		color: var(--nc-mm-accent);
		background: none;
		box-shadow: inset 0 -2px 0 0 var(--nc-mm-accent);
	}

	/* The panel hangs off the bar, so it spans it rather than one tab. */
	.nc-mm--inline .nc-mm__panel {
		inset-inline-start: 0;
	}
}

/* --- inside a WordPress nav menu ----------------------------------------- */

/* The li is the theme's; only the button inside it is ours, so it has to stop
   looking like a standalone pink button and start looking like a menu link. */
.nc-mm--in-menu {
	display: inline-flex;
	vertical-align: middle;
}

.nc-mm--in-menu .nc-mm__toggle {
	padding-block: 0;
	padding-inline: 0;
	font: inherit;
	color: inherit;
	background: none;
	border-radius: 0;
}

.nc-mm--in-menu .nc-mm__toggle:hover,
.nc-mm--in-menu.is-open .nc-mm__toggle {
	background: none;
	opacity: 0.75;
}

/* Taken out of flow entirely: somewhere in a theme's nav there is nearly always
   an `overflow` or a stacking context that would clip or bury an absolutely
   positioned panel. The script sets top/left from the button's own rect. */
.nc-mm--fixed .nc-mm__panel {
	position: fixed;
	inset-block-start: var(--nc-mm-panel-top, 0px);
	inset-inline-start: auto;
	left: var(--nc-mm-panel-left, 0px);
}

/* ==========================================================================
   4. Overlay
   ========================================================================== */

.nc-mm__overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--nc-mm-z) - 1);
	background: rgba(15, 16, 20, 0.45);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	animation: nc-mm-fade 0.2s ease both;
}

/* ==========================================================================
   5. Panel — desktop base
   ========================================================================== */

.nc-mm__panel {
	position: absolute;
	inset-block-start: calc(100% + 10px);
	inset-inline-start: 0;
	z-index: var(--nc-mm-z);
	display: grid;
	grid-template-columns: var(--nc-mm-rail-w) minmax(0, 1fr);
	/* The row MUST be capped, not just clipped. Left as `auto` it sizes to the
	   tallest flyout (10,032px with the brands grid loaded); max-height then
	   merely clips it, so the rail and flyouts inherit that full height and
	   their own `overflow-y: auto` never has anything to scroll. */
	grid-template-rows: minmax(0, 1fr);
	width: min(1440px, calc(100vw - 32px));
	min-height: min(var(--nc-mm-panel-h), 78vh);
	max-height: var(--nc-mm-panel-max-h);
	overflow: hidden;
	background: var(--nc-mm-bg);
	border: 1px solid var(--nc-mm-border);
	border-radius: var(--nc-mm-radius);
	box-shadow: var(--nc-mm-shadow);
	animation: nc-mm-pop 0.18s ease both;
}

.nc-mm__mobile-head,
.nc-mm__back {
	display: none;
}

/* --- Rail ---------------------------------------------------------------- */

.nc-mm__rail {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-block: 10px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--nc-mm-rail-bg);
	border-inline-end: 1px solid var(--nc-mm-border);
	scrollbar-width: thin;
}

.nc-mm__rail-item {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding-block: 10px;
	padding-inline: 18px 14px;
	font-size: 14px;
	color: var(--nc-mm-fg);
	text-align: start;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nc-mm__rail-item::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 3px;
	background: transparent;
	transition: background-color 0.15s ease;
}

.nc-mm__rail-item:hover,
.nc-mm__rail-item:focus-visible {
	color: var(--nc-mm-accent);
	background: var(--nc-mm-rail-active-bg);
}

.nc-mm__rail-item.is-active {
	font-weight: 600;
	color: var(--nc-mm-accent);
	background: var(--nc-mm-rail-active-bg);
}

.nc-mm__rail-item.is-active::before {
	background: var(--nc-mm-accent);
}

.nc-mm__rail-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	object-fit: contain;
	border-radius: 6px;
}

.nc-mm__rail-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-align: start;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nc-mm__rail-arrow {
	width: 13px;
	height: 13px;
	opacity: 0.45;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.nc-mm__rail-item.is-active .nc-mm__rail-arrow,
.nc-mm__rail-item:hover .nc-mm__rail-arrow {
	opacity: 1;
}

/* --- Flyouts ------------------------------------------------------------- */

.nc-mm__flyouts {
	position: relative;
	min-width: 0;
	min-height: 0;
	background: var(--nc-mm-bg);
}

.nc-mm__flyout {
	display: none;
	grid-template-columns: minmax(0, 1fr) var(--nc-mm-aside-w);
	gap: 28px;
	width: 100%;
	height: 100%;
	padding: var(--nc-mm-pad);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.nc-mm__flyout.is-active {
	display: grid;
	animation: nc-mm-fade 0.18s ease both;
}

/* --- Columns / groups ---------------------------------------------------- */

.nc-mm__cols {
	min-width: 0;
	columns: 3;
	column-gap: 32px;
}

.nc-mm__col {
	min-width: 0;
}

.nc-mm__group {
	position: relative;
	margin-block-end: 22px;
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.nc-mm__group-title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-block-end: 10px;
	color: var(--nc-mm-fg);
	text-align: start;
	transition: color 0.15s ease;
}

.nc-mm__group-title:hover {
	color: var(--nc-mm-accent);
}

/* Carries the group-title typography. */
.nc-mm__group-label {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: inherit;
	text-align: start;
}

/* Desktop: the group title is itself a link, so the explicit
   "view all" affordance is mobile-only. */
.nc-mm__group-viewall {
	display: none;
}

.nc-mm__group-arrow {
	width: 11px;
	height: 11px;
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.nc-mm__group-title:hover .nc-mm__group-arrow {
	opacity: 0.7;
	transform: translateX(2px);
}

.nc-mm__group-toggle {
	display: none;
}

.nc-mm__items {
	display: block;
}

.nc-mm__items > li {
	margin-block-end: 7px;
}

.nc-mm__item {
	display: block;
	font-size: 13.5px;
	color: var(--nc-mm-muted);
	text-align: start;
	transition: color 0.15s ease, transform 0.15s ease;
}

.nc-mm__item:hover,
.nc-mm__item:focus-visible {
	color: var(--nc-mm-accent);
}

/* Desktop is a pure multi-column text list — thumbnails would break the
   3-column balance, so the (optional) item icon is suppressed here and
   only appears in the mobile tile grid. */
.nc-mm__item-icon {
	display: none;
}

.nc-mm__item-label {
	display: inline;
}

/* --- Aside --------------------------------------------------------------- */

.nc-mm__aside {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding-inline-start: 26px;
	border-inline-start: 1px solid var(--nc-mm-border);
}

.nc-mm__banners {
	position: relative;
	overflow: hidden;
	background: var(--nc-mm-rail-bg);
	border-radius: calc(var(--nc-mm-radius) - 2px);
}

.nc-mm__banner {
	display: none;
}

.nc-mm__banner.is-active {
	display: block;
	animation: nc-mm-fade 0.35s ease both;
}

.nc-mm__banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: inherit;
}

.nc-mm__banner-dots {
	position: absolute;
	inset-block-end: 10px;
	inset-inline: 0;
	display: flex;
	gap: 6px;
	justify-content: center;
}

.nc-mm__banner-dot {
	width: 7px;
	height: 7px;
	padding: 0;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.nc-mm__banner-dot.is-active {
	background: var(--nc-mm-accent);
	border-color: var(--nc-mm-accent);
	transform: scale(1.25);
}

.nc-mm__brands-title {
	display: block;
	margin-block-end: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--nc-mm-fg);
	text-align: start;
}

.nc-mm__brands-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.nc-mm__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: 6px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--nc-mm-border);
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nc-mm__brand:hover,
.nc-mm__brand:focus-visible {
	border-color: var(--nc-mm-accent);
	box-shadow: 0 4px 14px rgba(17, 17, 26, 0.08);
	transform: translateY(-1px);
}

.nc-mm__brand img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* Text fallback for a featured brand with no logo. Must fill the same tile
   footprint as the <img> so the featured grid never goes ragged — the parent
   .nc-mm__brand already supplies the aspect-ratio and centring. */
.nc-mm__brand-text {
	display: -webkit-box;
	width: 100%;
	overflow: hidden;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--nc-mm-muted);
	text-align: center;
	word-break: break-word;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ==========================================================================
   6. Brands grid (.nc-brands) — standalone and inside .nc-mm__flyout--brands
   ========================================================================== */

.nc-brands {
	font-size: 14px;
	line-height: 1.45;
	text-align: start;
}

.nc-brands__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 18px;
	align-items: start;
}

.nc-brands__letters {
	min-width: 0;
}

.nc-brands__letter {
	margin-block-end: 26px;
	scroll-margin-block-start: 12px;
}

.nc-brands__letter-title {
	margin: 0 0 12px;
	padding-block-end: 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--nc-mm-accent);
	text-align: start;
	border-block-end: 1px solid var(--nc-mm-border);
}

.nc-brands__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
}

.nc-brands__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: 8px;
	overflow: hidden;
	text-align: center;
	background: #fff;
	border: 1px solid var(--nc-mm-border);
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nc-brands__brand:hover,
.nc-brands__brand:focus-visible {
	border-color: var(--nc-mm-accent);
	box-shadow: 0 4px 14px rgba(17, 17, 26, 0.08);
	transform: translateY(-1px);
}

.nc-brands__brand img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.nc-brands__brand-text {
	display: block;
	overflow: hidden;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--nc-mm-muted);
	line-height: 1.3;
	word-break: break-word;
}

.nc-brands__index {
	position: sticky;
	top: 8px;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 2px;
	max-height: 80vh;
	padding: 6px 4px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--nc-mm-rail-bg);
	border: 1px solid var(--nc-mm-border);
	border-radius: 999px;
	scrollbar-width: none;
}

.nc-brands__index::-webkit-scrollbar {
	display: none;
}

.nc-brands__index-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 22px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--nc-mm-muted);
	border-radius: 999px;
	transition: color 0.12s ease, background-color 0.12s ease;
}

.nc-brands__index-link:hover,
.nc-brands__index-link:focus-visible,
.nc-brands__index-link.is-active {
	color: #fff;
	background: var(--nc-mm-accent);
}

/* Brands flyout inside the mega menu */
.nc-mm__flyout--brands {
	grid-template-columns: minmax(0, 1fr);
}

.nc-mm__flyout--brands .nc-brands {
	width: 100%;
}

/* Inside the menu the scrollport is the flyout, not the viewport, so the
   standalone 80vh overshoots it and pushes the last letters (Z, #, and the
   whole Arabic run) below the clip edge where nothing can reach them. */
.nc-mm__flyout--brands .nc-brands__index {
	max-height: calc(var(--nc-mm-panel-max-h) - (var(--nc-mm-pad) * 2) - 16px);
}

/* --- lazy-load states (placeholder / error) ------------------------------ */

.nc-mm__brands-loading,
.nc-mm__brands-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	min-height: 240px;
	margin: auto;
	padding-block: 48px;
	padding-inline: 24px;
	text-align: center;
}

.nc-mm__loading-text,
.nc-mm__brands-error-text {
	font-size: 13.5px;
	color: var(--nc-mm-muted);
}

.nc-mm__spinner {
	display: block;
	width: 26px;
	height: 26px;
	border: 2px solid var(--nc-mm-border);
	border-block-start-color: var(--nc-mm-accent);
	border-radius: 50%;
	animation: nc-mm-spin 0.7s linear infinite;
}

.nc-mm__brands-retry {
	padding-block: 8px;
	padding-inline: 18px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: var(--nc-mm-accent);
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.nc-mm__brands-retry:hover {
	background: color-mix(in srgb, var(--nc-mm-accent) 86%, #000);
}

/* Only ever seen by a no-JS visitor (rendered inside <noscript>). */
.nc-mm__brands-fallback {
	display: inline-block;
	padding: 24px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--nc-mm-accent);
	text-decoration: underline;
}

/* ==========================================================================
   7. Directional icon mirroring (RTL)
   ========================================================================== */

[dir="rtl"] .nc-mm__rail-arrow,
[dir="rtl"] .nc-mm__group-arrow,
[dir="rtl"] .nc-mm__back-icon,
[dir="rtl"] .nc-mm__back > svg,
.nc-mm[dir="rtl"] .nc-mm__rail-arrow,
.nc-mm[dir="rtl"] .nc-mm__group-arrow,
.nc-mm[dir="rtl"] .nc-mm__back-icon,
.nc-mm[dir="rtl"] .nc-mm__back > svg {
	transform: scaleX(-1);
}

[dir="rtl"] .nc-mm__group-title:hover .nc-mm__group-arrow,
.nc-mm[dir="rtl"] .nc-mm__group-title:hover .nc-mm__group-arrow {
	transform: scaleX(-1) translateX(2px);
}

/* ==========================================================================
   8. Mobile (<1024px) — full-screen drawer
   ========================================================================== */

@media (max-width: 1023.98px) {
	.nc-mm {
		display: block;
	}

	.nc-mm__toggle {
		width: 100%;
		justify-content: flex-start;
	}

	.nc-mm__panel {
		position: fixed;
		inset: 0;
		inset-inline-start: 0;
		z-index: var(--nc-mm-z);
		display: grid;
		grid-template-columns: var(--nc-mm-tab-w) minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		width: 100%;
		max-width: 100%;
		height: 100%;
		height: 100dvh;
		min-height: 0;
		max-height: none;
		border: 0;
		border-radius: 0;
		animation: nc-mm-drawer-in 0.24s ease both;
	}

	/* --- mobile head --- */
	.nc-mm__mobile-head {
		display: flex;
		grid-column: 1 / -1;
		grid-row: 1;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding-block: 14px;
		padding-inline: 16px;
		background: var(--nc-mm-bg);
		border-block-end: 1px solid var(--nc-mm-border);
	}

	.nc-mm__mobile-title {
		font-size: 16px;
		font-weight: 700;
		text-align: start;
	}

	.nc-mm__close {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		color: var(--nc-mm-fg);
		background: var(--nc-mm-rail-bg);
		border-radius: 50%;
	}

	.nc-mm__close svg {
		width: 16px;
		height: 16px;
	}

	/* Works whether Agent A emits this as an <svg> or a glyph <span>. */
	.nc-mm__close-icon {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 16px;
		height: 16px;
		line-height: 1;
	}

	/* --- narrow tab strip --- */
	.nc-mm__rail {
		grid-column: 1;
		grid-row: 2;
		padding-block: 6px;
		background: var(--nc-mm-rail-bg);
	}

	.nc-mm__rail-item {
		flex-direction: column;
		gap: 5px;
		padding-block: 12px;
		padding-inline: 6px;
		font-size: 11.5px;
		line-height: 1.25;
		text-align: center;
	}

	.nc-mm__rail-item::before {
		inset-inline-start: 0;
		width: 3px;
	}

	.nc-mm__rail-icon {
		width: 20px;
		height: 20px;
	}

	.nc-mm__rail-label {
		flex: 0 0 auto;
		width: 100%;
		overflow: hidden;
		text-align: center;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.nc-mm__rail-arrow {
		display: none;
	}

	.nc-mm__rail-item.is-active {
		background: var(--nc-mm-rail-active-bg);
		color: var(--nc-mm-accent);
	}

	/* --- flyouts slide over the rail --- */
	.nc-mm__flyouts {
		grid-column: 2;
		grid-row: 2;
		min-height: 0;
	}

	.nc-mm.is-flyout-open .nc-mm__flyouts {
		grid-column: 1 / -1;
		z-index: 2;
		animation: nc-mm-flyout-in 0.24s ease both;
	}

	.nc-mm__flyout {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 14px 16px 28px;
	}

	.nc-mm__flyout.is-active {
		display: flex;
		flex-direction: column;
	}

	/* The aside dissolves so the banner can sit above the columns
	   and the featured brands below them (screenshot 3 order). */
	.nc-mm__aside {
		display: contents;
	}

	.nc-mm__back {
		display: inline-flex;
		order: 0;
		align-self: flex-start;
		align-items: center;
		gap: 8px;
		margin-block-end: 12px;
		padding-block: 7px;
		padding-inline: 12px;
		font-size: 13px;
		font-weight: 600;
		color: var(--nc-mm-fg);
		background: var(--nc-mm-rail-bg);
		border: 1px solid var(--nc-mm-border);
		border-radius: 999px;
	}

	.nc-mm__back svg {
		width: 13px;
		height: 13px;
	}

	/* Inherits the pill's typography; only needs to resist wrapping. */
	.nc-mm__back-label {
		white-space: nowrap;
	}

	.nc-mm__banners {
		order: 1;
		width: 100%;
		margin-block-end: 16px;
	}

	.nc-mm__cols {
		order: 2;
		columns: 1;
		column-gap: 0;
	}

	.nc-mm__brands {
		order: 3;
		margin-block-start: 18px;
		padding-block-start: 16px;
		border-block-start: 1px solid var(--nc-mm-border);
	}

	.nc-mm__brands-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* --- accordion --- */
	.nc-mm__group {
		margin-block-end: 0;
		border-block-end: 1px solid var(--nc-mm-border);
	}

	.nc-mm__group-title {
		margin-block-end: 0;
		padding-block: 14px;
		padding-inline-end: 44px;
		gap: 10px;
	}

	.nc-mm__group-label {
		font-size: 14.5px;
	}

	/* Sits on the inline-end side of the title, just before the chevron. */
	.nc-mm__group-viewall {
		display: block;
		flex: 0 0 auto;
		margin-inline-start: auto;
		font-size: 11.5px;
		font-weight: 600;
		color: var(--nc-mm-accent);
		white-space: nowrap;
		opacity: 0.9;
	}

	.nc-mm__group-arrow {
		display: none;
	}

	.nc-mm__group-toggle {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 48px;
		color: var(--nc-mm-muted);
	}

	/* Symmetric down-chevron: must NOT mirror, so physical borders are correct. */
	.nc-mm__group-toggle::before {
		content: "";
		width: 8px;
		height: 8px;
		margin-block-start: -4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		border-radius: 1px;
		transform: rotate(45deg);
		transition: transform 0.2s ease, margin 0.2s ease;
	}

	.nc-mm__group.is-open .nc-mm__group-toggle::before {
		margin-block-start: 4px;
		transform: rotate(225deg);
	}

	.nc-mm__group.is-open .nc-mm__group-toggle {
		color: var(--nc-mm-accent);
	}

	/* --- sub-category tile grid --- */
	.nc-mm__items {
		display: none;
		margin: 0;
		padding: 0 0 14px;
		list-style: none;
	}

	.nc-mm__group.is-open .nc-mm__items {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
		gap: 10px;
		animation: nc-mm-fade 0.18s ease both;
	}

	.nc-mm__items > li {
		min-width: 0;
		margin-block-end: 0;
	}

	.nc-mm__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 7px;
		height: 100%;
		padding-block: 8px;
		padding-inline: 4px;
		font-size: 12px;
		color: var(--nc-mm-fg);
		text-align: center;
		border-radius: 12px;
	}

	.nc-mm__item:hover,
	.nc-mm__item:focus-visible {
		background: var(--nc-mm-rail-bg);
	}

	.nc-mm__item-icon {
		display: block;
		flex: 0 0 auto;
		width: 64px;
		height: 64px;
		aspect-ratio: 1;
		object-fit: cover;
		background: #f4f4f6;
		border: 1px solid var(--nc-mm-border);
		border-radius: 50%;
	}

	/* Baseline (also the no-:has() fallback): with or without an icon the
	   tile keeps its shape and the label stays centred and 2-line clamped. */
	.nc-mm__item-label {
		display: -webkit-box;
		width: 100%;
		overflow: hidden;
		font-size: 12px;
		line-height: 1.3;
		color: inherit;
		text-align: center;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/* Progressive enhancement: where :has() is supported, an item with no
	   thumbnail becomes a plain full-width text row instead of an empty tile. */
	@supports selector(:has(*)) {
		.nc-mm__items > li:not(:has(.nc-mm__item-icon)) {
			grid-column: 1 / -1;
		}

		.nc-mm__item:not(:has(.nc-mm__item-icon)) {
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			gap: 0;
			padding-block: 11px;
			padding-inline: 6px;
			text-align: start;
		}

		.nc-mm__item:not(:has(.nc-mm__item-icon)) .nc-mm__item-label {
			display: block;
			overflow: visible;
			font-size: 13.5px;
			text-align: start;
			-webkit-line-clamp: none;
			line-clamp: none;
		}
	}

	/* --- brands panel on mobile (screenshot 2) --- */
	.nc-brands__body {
		grid-template-columns: minmax(0, 1fr) 26px;
		gap: 8px;
	}

	.nc-brands__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.nc-brands__index {
		top: 4px;
		max-height: 70vh;
		padding: 4px 2px;
		background: rgba(250, 250, 251, 0.94);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}

	.nc-brands__index-link {
		width: 20px;
		height: 19px;
		font-size: 10.5px;
	}

	.nc-brands__letter {
		margin-block-end: 20px;
		scroll-margin-block-start: 8px;
	}
}

/* Body scroll lock while the mobile drawer is open. */
html.nc-mm-locked,
html.nc-mm-locked body {
	overflow: hidden !important;
	overscroll-behavior: none;
}

/* ==========================================================================
   9. Desktop refinements (>=1024px)
   ========================================================================== */

@media (min-width: 1024px) {
	.nc-mm__overlay {
		display: none;
	}

	.nc-mm__panel {
		inset-inline-start: 0;
	}

	/* Keep a very wide panel from escaping a narrow container. */
	.nc-mm__rail {
		max-height: 100%;
	}
}

/* ==========================================================================
   10. Animations
   ========================================================================== */

@keyframes nc-mm-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes nc-mm-pop {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* --nc-mm-dir flips the physical axis so RTL slides from the mirrored edge. */
@keyframes nc-mm-drawer-in {
	from {
		opacity: 0.6;
		transform: translateX(calc(var(--nc-mm-dir) * -100%));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes nc-mm-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes nc-mm-flyout-in {
	from {
		opacity: 0.5;
		transform: translateX(calc(var(--nc-mm-dir) * 40%));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   11. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.nc-mm,
	.nc-mm *,
	.nc-mm *::before,
	.nc-mm *::after,
	.nc-brands,
	.nc-brands *,
	.nc-brands *::before,
	.nc-brands *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}

	/* The rule above kills the spin, which would leave a lopsided ring.
	   Swap the spinner for a static accent dot instead. */
	.nc-mm__spinner {
		width: 10px;
		height: 10px;
		border: 0;
		background: var(--nc-mm-accent);
	}
}

/* ==========================================================================
   12. Print
   ========================================================================== */

@media print {
	.nc-mm__panel,
	.nc-mm__overlay,
	.nc-mm__toggle {
		display: none !important;
	}

	.nc-brands__index {
		display: none !important;
	}
}

/* ==========================================================================
   13. Term cards (.nc-cards) and term hero (.nc-hero)
   ========================================================================== */

/* --- width: boxed / full ---------------------------------------------------
   `full` breaks the block out of whatever container Elementor put it in and
   runs it to the viewport edge.

   Doubled class on purpose: the base `.nc-cards { width: 100% }` further down
   is the same specificity and would win on order alone, capping a full-bleed
   block at its container — measured 1400px against the 1440px viewport.

   The obvious `width: 100vw` is also wrong on desktop: 100vw counts the
   scrollbar, so the block ends up wider than the visible page and the whole
   document scrolls sideways. --nc-sbw is the measured scrollbar width, written
   to <html> by the script; the fallback of 0 is correct for the overlay
   scrollbars phones and macOS use. */

.nc-cards.nc-cards--w-full,
.nc-hero.nc-hero--w-full {
	width: calc(100vw - var(--nc-sbw, 0px));
	max-width: calc(100vw - var(--nc-sbw, 0px));
	margin-inline-start: calc(50% - ((100vw - var(--nc-sbw, 0px)) / 2));
	margin-inline-end: calc(50% - ((100vw - var(--nc-sbw, 0px)) / 2));
}

.nc-cards.nc-cards--w-boxed {
	max-width: var(--nc-cards-boxed, 1200px);
	margin-inline: auto;
}

.nc-hero.nc-hero--w-boxed {
	max-width: var(--nc-hero-boxed, 1200px);
	margin-inline: auto;
}

/* Full-bleed with a boxed interior: the background runs edge to edge, the
   content still lines up with the rest of the page. */
.nc-cards--w-full .nc-cards__list,
.nc-cards--w-full .nc-cards__heading {
	max-width: var(--nc-cards-boxed, 1200px);
	margin-inline: auto;
}

.nc-hero.nc-hero--w-full {
	padding-inline: max(36px, calc((100vw - var(--nc-sbw, 0px) - var(--nc-hero-boxed, 1200px)) / 2));
}

.nc-cards {
	--nc-cards-cols: 6;
	--nc-cards-cols-tablet: 4;
	--nc-cards-cols-mobile: 2;
	--nc-cards-gap: 16px;
	--nc-cards-radius: 16px;
	--nc-cards-pad: 12px;
	--nc-cards-overlap: 0px;
	--nc-cards-panel-radius: 18px;
	--nc-cards-panel-pad: 18px;
	--nc-cards-boxed: 1200px;

	/* Overridable per card by the `extra` repeater. */
	--nc-cards-item-bg: #ffffff;
	--nc-cards-item-fg: #1d1e22;
	--nc-cards-border: #ececf1;
	--nc-cards-accent: #e91e63;
	--nc-cards-title: #1d1e22;
	--nc-cards-title-size: 13.5px;
	--nc-cards-ratio: 1;
	/* Headroom for the hover lift + its shadow inside a scroll container. */
	--nc-cards-lift: 14px;

	box-sizing: border-box;
	width: 100%;
	font-size: 14px;
	line-height: 1.45;
	text-align: start;
}

.nc-cards *,
.nc-cards *::before,
.nc-cards *::after {
	box-sizing: inherit;
}

.nc-cards__heading {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	color: var(--nc-cards-title);
	text-align: center;
}

.nc-cards__list {
	display: grid;
	grid-template-columns: repeat(var(--nc-cards-cols), minmax(0, 1fr));
	gap: var(--nc-cards-gap);
	align-items: start;
}

/* Multi-row grid: the row count is explicit and the items wrap into it. */
.nc-cards__list {
	grid-template-rows: repeat(var(--nc-cards-rows, 1), auto);
	grid-auto-rows: auto;
}

/* Horizontal rail. The column count becomes "how many fit on screen", so the
   same setting reads the same way in both layouts. `grid-auto-flow: column`
   fills top-to-bottom down each column first, which is what makes a two-row
   carousel advance a column at a time instead of a whole screen. */
.nc-cards--scroll .nc-cards__list {
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--nc-cards-gap) * (var(--nc-cards-cols) - 1))) / var(--nc-cards-cols)
	);
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	/* Setting overflow on one axis makes the other compute to `auto` too, so the
	   hover lift and its shadow get sliced off at the top edge. Reserve the room
	   and pull it back out with a matching negative margin, so the block still
	   occupies exactly the space it did before. */
	padding-block: var(--nc-cards-lift);
	margin-block: calc(var(--nc-cards-lift) * -1);
	scrollbar-width: thin;
}

.nc-cards--scroll .nc-cards__item {
	scroll-snap-align: start;
}

/* Desktop drag-to-scroll. Snap has to come off — even `proximity` re-snaps on
   every programmatic scrollLeft write, so each step of the drag is yanked back
   before the next one lands and the track never moves at all. The script turns
   it off inline for the duration, settles the track on a card boundary itself,
   and only then hands snapping back. */
.nc-cards--scroll .nc-cards__list.is-dragging {
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

.nc-cards--scroll .nc-cards__list.is-dragging img {
	pointer-events: none;
}

/* WebKit ignores a preventDefault()ed dragstart in some cases, so the images
   and links inside a draggable track opt out of the native drag directly. */
.nc-cards--scroll .nc-cards__list img,
.nc-cards--scroll .nc-cards__list a {
	-webkit-user-drag: none;
}

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

.nc-cards__viewport {
	position: relative;
}

.nc-cards__list:focus-visible {
	outline: 2px solid var(--nc-cards-accent);
	outline-offset: 4px;
}

.nc-cards__arrow {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	color: var(--nc-cards-title);
	background: #fff;
	border: 1px solid var(--nc-cards-border);
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(17, 17, 26, 0.1);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

/* A percentage in the block direction resolves against the container's HEIGHT,
   never its width — so the card width cannot be reconstructed here. Centre on
   the viewport instead, then lift by half the label block so the arrow lands on
   the image rather than between image and label. On a multi-row carousel the
   midpoint already falls between rows, so leave it centred. */
.nc-cards--rows-1.nc-cards--title-below .nc-cards__arrow {
	transform: translateY(calc(-50% - ((var(--nc-cards-title-size) * 1.3 + 8px) / 2)));
}

/* --- nav style: chevrons (bare glyph, no button chrome) ------------------- */

.nc-cards--nav-chevrons .nc-cards__arrow {
	width: 30px;
	height: 44px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.nc-cards--nav-chevrons .nc-cards__arrow:hover,
.nc-cards--nav-chevrons .nc-cards__arrow:focus-visible {
	color: var(--nc-cards-accent);
	background: none;
}

.nc-cards--nav-chevrons .nc-cards__chevron {
	width: 12px;
	height: 12px;
	border-width: 3px;
}

/* --- nav position -------------------------------------------------------- */

.nc-cards--nav-inside .nc-cards__arrow--prev {
	inset-inline-start: 6px;
}

.nc-cards--nav-inside .nc-cards__arrow--next {
	inset-inline-end: 6px;
}

/* Outside needs room to sit in, or it overlaps the first and last card. */
@media (min-width: 768px) {
	.nc-cards--nav-outside .nc-cards__viewport {
		margin-inline: 26px;
	}

	.nc-cards--nav-outside .nc-cards__arrow--prev {
		inset-inline-start: -26px;
	}

	.nc-cards--nav-outside .nc-cards__arrow--next {
		inset-inline-end: -26px;
	}
}

/* Below that there is no margin to spare, so outside falls back to inside. */
@media (max-width: 767.98px) {
	.nc-cards--nav-outside .nc-cards__arrow--prev {
		inset-inline-start: 2px;
	}

	.nc-cards--nav-outside .nc-cards__arrow--next {
		inset-inline-end: 2px;
	}
}

/* --- nav style: dots ----------------------------------------------------- */

.nc-cards__dots {
	display: flex;
	gap: 7px;
	align-items: center;
	justify-content: center;
	margin-block-start: 14px;
}

.nc-cards__dots:empty {
	display: none;
}

.nc-cards__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: var(--nc-cards-border);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: width 0.15s ease, background-color 0.15s ease;
}

.nc-cards__dot.is-active {
	width: 22px;
	background: var(--nc-cards-accent);
}

/* --- panel --------------------------------------------------------------- */

.nc-cards--panel {
	padding: var(--nc-cards-panel-pad);
	background: var(--nc-cards-panel-bg, #fff);
	border-radius: var(--nc-cards-panel-radius);
	box-shadow: 0 10px 30px rgba(17, 17, 26, 0.08);
}

/* --- overlap the section above ------------------------------------------- */

.nc-cards--overlap {
	position: relative;
	z-index: 1;
	margin-block-start: calc(var(--nc-cards-overlap) * -1);
}

/* On a phone the block is nearly full-width and the section above is short, so
   a desktop-sized overlap swallows it. */
@media (max-width: 767.98px) {
	.nc-cards--overlap {
		margin-block-start: calc(var(--nc-cards-overlap) / -2);
	}
}

.nc-cards__arrow[hidden] {
	display: none;
}

.nc-cards__arrow:hover,
.nc-cards__arrow:focus-visible {
	color: #fff;
	background: var(--nc-cards-accent);
	border-color: var(--nc-cards-accent);
}

.nc-cards__arrow--prev {
	inset-inline-start: -8px;
}

.nc-cards__arrow--next {
	inset-inline-end: -8px;
}

/* Drawn from borders rather than a glyph so it mirrors with the writing
   direction on its own — same trick as the menu's rail arrow. */
.nc-cards__chevron {
	width: 8px;
	height: 8px;
	border-block-start: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
}

.nc-cards__arrow--prev .nc-cards__chevron {
	transform: rotate(-135deg);
}

[dir="rtl"] .nc-cards__arrow--next .nc-cards__chevron {
	transform: rotate(-135deg);
}

[dir="rtl"] .nc-cards__arrow--prev .nc-cards__chevron {
	transform: rotate(45deg);
}

/* --- the card ------------------------------------------------------------ */

.nc-cards__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

.nc-cards__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: var(--nc-cards-pad);
	background: var(--nc-cards-item-bg);
	border: 1px solid var(--nc-cards-border);
	border-radius: var(--nc-cards-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nc-cards--ratio-1 .nc-cards__media {
	aspect-ratio: 1 / 1;
}

.nc-cards--ratio-3-2 .nc-cards__media {
	aspect-ratio: 3 / 2;
}

.nc-cards--ratio-4-3 .nc-cards__media {
	aspect-ratio: 4 / 3;
}

.nc-cards--ratio-16-9 .nc-cards__media {
	aspect-ratio: 16 / 9;
}

/* A circle is only a circle at 1:1, so the shape wins over whatever ratio
   was left selected. */
.nc-cards--circle .nc-cards__media {
	aspect-ratio: 1 / 1;
}

/* Shape decides the radius; the slider only has a say under `rounded`.
   This mapping used to live in PHP, where it was applied while composing the
   inline custom property — so the moment the widgets stopped writing inline
   vars it stopped running, and circle and square both silently inherited the
   slider's value. Belongs in CSS, where both the widget and the shortcode
   paths meet. */
.nc-cards--circle .nc-cards__media {
	border-radius: 999px;
}

.nc-cards--square .nc-cards__media {
	border-radius: 0;
}

.nc-cards--square .nc-cards--title-overlay .nc-cards__title,
.nc-cards--square .nc-cards__title {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.nc-cards--circle .nc-cards__title {
	border-end-start-radius: 999px;
	border-end-end-radius: 999px;
}

.nc-cards__item:hover .nc-cards__media,
.nc-cards__item:focus-visible .nc-cards__media {
	border-color: var(--nc-cards-accent);
	box-shadow: 0 6px 18px rgba(17, 17, 26, 0.1);
	transform: translateY(-2px);
}

.nc-cards__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.nc-cards--fit-cover .nc-cards__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cover means edge to edge; the padding that frames a logo would defeat it. */
.nc-cards--fit-cover .nc-cards__media {
	padding: 0;
}

.nc-cards__fallback {
	display: block;
	overflow: hidden;
	padding: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--nc-cards-item-fg);
	text-align: center;
	line-height: 1.25;
	word-break: break-word;
}

/* --- the title ----------------------------------------------------------- */

.nc-cards__title {
	display: block;
	font-size: var(--nc-cards-title-size);
	font-weight: 600;
	color: var(--nc-cards-title);
	text-align: center;
	line-height: 1.3;
	word-break: break-word;
	transition: color 0.15s ease;
}

.nc-cards__item:hover .nc-cards__title,
.nc-cards__item:focus-visible .nc-cards__title {
	color: var(--nc-cards-accent);
}

.nc-cards--title-overlay .nc-cards__item {
	position: relative;
}

.nc-cards--title-overlay .nc-cards__title {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	padding: 10px 8px;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
	border-end-start-radius: var(--nc-cards-radius);
	border-end-end-radius: var(--nc-cards-radius);
}

.nc-cards--title-overlay .nc-cards__item:hover .nc-cards__title,
.nc-cards--title-overlay .nc-cards__item:focus-visible .nc-cards__title {
	color: #fff;
}

/* --- hand-written cards -------------------------------------------------- */

.nc-cards__item--custom .nc-cards__fallback {
	font-size: 15px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

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

@media (max-width: 1023.98px) {
	.nc-cards__list {
		grid-template-columns: repeat(var(--nc-cards-cols-tablet), minmax(0, 1fr));
	}

	.nc-cards--scroll .nc-cards__list {
		grid-auto-columns: calc(
			(100% - (var(--nc-cards-gap) * (var(--nc-cards-cols-tablet) - 1))) /
				var(--nc-cards-cols-tablet)
		);
		grid-template-columns: none;
	}
}

@media (max-width: 767.98px) {
	.nc-cards__list {
		grid-template-columns: repeat(var(--nc-cards-cols-mobile), minmax(0, 1fr));
	}

	.nc-cards--scroll .nc-cards__list {
		grid-auto-columns: calc(
			(100% - (var(--nc-cards-gap) * (var(--nc-cards-cols-mobile) - 1))) /
				var(--nc-cards-cols-mobile)
		);
		grid-template-columns: none;
	}

	.nc-cards__heading {
		font-size: 17px;
	}
}

/* --- term hero ----------------------------------------------------------- */

.nc-hero {
	--nc-hero-bg: #7fc8c8;
	--nc-hero-fg: #10231f;
	--nc-hero-accent: currentColor;
	--nc-hero-media-size: 240px;
	--nc-hero-media-radius: 999px;
	--nc-hero-overhang: 0px;
	--nc-hero-offset-x: 0px;
	--nc-hero-offset-y: 0px;
	--nc-hero-boxed: 1200px;
	--nc-hero-pad-x: 36px;
	--nc-hero-pad-y: 32px;
	--nc-hero-media-gap: 24px;

	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nc-hero-media-gap);
	align-items: center;
	width: 100%;
	padding: var(--nc-hero-pad-y) var(--nc-hero-pad-x);
	color: var(--nc-hero-fg);
	background: var(--nc-hero-bg);
	text-align: start;
}

/* The image may be larger than the banner, and may be pushed further up out of
   it. Neither is a layout change — the size overflows and the push is a
   transform — so on their own both would ride over whatever sits above. The
   script measures the real overflow and reserves exactly that much margin;
   these values are the no-JS floor, which keeps the common case decent. */
.nc-hero--has-media {
	margin-block: var(--nc-hero-overhang);
	overflow: visible;
}

.nc-hero *,
.nc-hero *::before,
.nc-hero *::after {
	box-sizing: inherit;
}

.nc-hero__text {
	min-width: 0;
}

.nc-hero__title {
	margin: 0 0 10px;
	font-size: clamp(26px, 5vw, 54px);
	font-weight: 800;
	line-height: 1.1;
}

/* Prefix and suffix are separate spans so a two-tone title — "ALL **CARE**
   PRODUCTS" — is a colour choice rather than a copy-paste of the name. */
.nc-hero__title-prefix,
.nc-hero__title-suffix {
	color: var(--nc-hero-accent);
}

.nc-hero__desc {
	font-size: 15px;
	line-height: 1.5;
}

.nc-hero__desc p {
	margin: 0 0 6px;
}

.nc-hero__desc p:last-child {
	margin-block-end: 0;
}

/* Category descriptions here are long-form SEO copy; without a cap the hero
   grows past two viewports on mobile. */
.nc-hero__desc--clamp {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: var(--nc-hero-desc-lines, 3);
	-webkit-box-orient: vertical;
}

.nc-hero__count {
	margin: 10px 0 0;
	font-size: 13px;
	opacity: 0.75;
}

.nc-hero__media {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: var(--nc-hero-media-size);
	max-width: 40vw;
	aspect-ratio: 1 / 1;
	background: #fff;
	border-radius: var(--nc-hero-media-radius, 999px);
}

/* Above the phone breakpoint the image is taken out of flow entirely.
   As a grid item its height set the row height, so enlarging the thumbnail
   grew the banner with it and the height controls fought the size control.
   Out of flow, banner height is text + padding bounded by min/max height, and
   the image size is genuinely independent of it. The text keeps its distance
   by reserving the image's own width as padding. */
@media (min-width: 768px) {
	.nc-hero__media {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: var(--nc-hero-pad-x);
		/* -50% is the vertical centring; the offsets and the overhang ride on
		   top of it, and none of the three costs any layout. */
		transform: translate(
			var(--nc-hero-offset-x, 0px),
			calc(-50% + var(--nc-hero-offset-y, 0px) - var(--nc-hero-overhang, 0px))
		);
	}

	/* A second grid column reserves the image's width so the text cannot run
	   under it. The image is absolutely positioned and never fills the column;
	   the column exists purely to hold the space, and `gap` supplies the
	   separation.

	   Deliberately NOT
	     padding-inline-end: calc(var(--a) + var(--b) + var(--c))
	   WP Rocket's minifier strips the spaces around a `+` when both operands are
	   var() calls — `calc(var(--a)+var(--b))` — and CSS requires that whitespace,
	   so the declaration becomes invalid at computed-value time and resets
	   padding-inline-end to 0, taking the shorthand's right padding with it.
	   Measured: 0px where 580px was intended. Every other calc() in this file
	   keeps its spaces, so the trigger is specifically `) + var(`. */
	.nc-hero--has-media {
		grid-template-columns: minmax(0, 1fr) var(--nc-hero-media-size);
	}
}

/* Phone layout only: the image is back in flow there, stacked under the text,
   so it still needs a transform of its own. A negative margin would do nothing
   — a centred grid item just shrinks and re-centres. */
@media (max-width: 767.98px) {
	.nc-hero--has-media .nc-hero__media {
		transform: translate(
			var(--nc-hero-offset-x, 0px),
			calc(var(--nc-hero-offset-y, 0px) - var(--nc-hero-overhang, 0px))
		);
	}
}

.nc-hero__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media (max-width: 767.98px) {
	.nc-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		padding: 22px;
		text-align: center;
	}

	.nc-hero__media {
		width: min(var(--nc-hero-media-size), 60vw);
		max-width: 60vw;
		margin-inline: auto;
	}

	/* A breakout sized for a wide banner swallows a phone screen, and there is
	   no room beside the text for it to break out into anyway. */
	.nc-hero--has-media {
		margin-block: calc(var(--nc-hero-overhang) / 2);
	}

	.nc-hero--has-media .nc-hero__media {
		margin-block: calc(var(--nc-hero-overhang) / -2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nc-cards__item,
	.nc-cards__media,
	.nc-cards__title {
		transition: none;
	}

	.nc-cards__item:hover .nc-cards__media,
	.nc-cards__item:focus-visible .nc-cards__media {
		transform: none;
	}
}