/* Remove the soft page-wrapper gradient (.promodose-section-soft, ~#F6F6F8)
   directly behind the category cards, keeping only this section's own
   background. Scoped via :has() so other soft sections (hero, etc.) keep theirs. */
.promodose-section-soft:has(.promodose-category-section) {
	background: none;
}

.promodose-category-section {
	--promodose-category-columns: 4;
	--promodose-category-tablet-columns: 2;
	--promodose-category-mobile-columns: 2;
	--promodose-category-slider-items: 7;
	--promodose-category-slider-tablet-items: 4;
	--promodose-category-slider-mobile-items: 2;
	--promodose-category-direction: rtl;
	--promodose-category-gap: clamp(1rem, 2vw, 1.35rem);
	--promodose-category-card-ratio: 1.08;
	--promodose-category-card-min-height: 240px;
	--promodose-category-label-size: clamp(1.05rem, 1.25vw, 1.22rem);
	--promodose-category-label-padding-block: 0.72rem;
	--promodose-category-label-padding-inline: 1.25rem;
	background:
		linear-gradient(180deg, var(--wp--preset--color--base) 0%, color-mix(in srgb, var(--wp--preset--color--turquoise) 7%, var(--wp--preset--color--base)) 100%);
	direction: var(--promodose-category-direction);
	margin-block-start: 0;
	overflow-x: clip;
	padding-block: clamp(3.5rem, 7vw, 6rem);
	position: relative;
}

.promodose-category-section,
.promodose-category-section * {
	box-sizing: border-box;
}

.promodose-category-section.is-content-direction-ltr {
	--promodose-category-direction: ltr;
}

.promodose-category-section.has-category-columns-5 {
	--promodose-category-gap: clamp(0.8rem, 1.2vw, 1.05rem);
	--promodose-category-card-ratio: 1.22;
	--promodose-category-card-min-height: 205px;
	--promodose-category-label-size: clamp(0.95rem, 1vw, 1.08rem);
	--promodose-category-label-padding-block: 0.62rem;
	--promodose-category-label-padding-inline: 1rem;
}

.promodose-category-section.has-category-columns-6 {
	--promodose-category-gap: clamp(0.7rem, 1vw, 0.95rem);
	--promodose-category-card-ratio: 1.34;
	--promodose-category-card-min-height: 178px;
	--promodose-category-label-size: clamp(0.88rem, 0.92vw, 1rem);
	--promodose-category-label-padding-block: 0.56rem;
	--promodose-category-label-padding-inline: 0.85rem;
}

.promodose-category-section.has-category-columns-7,
.promodose-category-section.has-category-columns-8 {
	--promodose-category-gap: clamp(0.55rem, 0.85vw, 0.8rem);
	--promodose-category-card-ratio: 1.34;
	--promodose-category-card-min-height: 154px;
	--promodose-category-label-size: clamp(0.78rem, 0.8vw, 0.92rem);
	--promodose-category-label-padding-block: 0.5rem;
	--promodose-category-label-padding-inline: 0.72rem;
}

.promodose-category-section__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: clamp(1rem, 3vw, 2rem);
	position: relative;
}

.promodose-category-section__header {
	align-items: center;
	display: grid;
	gap: 0.75rem;
	justify-items: center;
	margin-inline: auto;
	max-width: 760px;
	text-align: center;
}

.promodose-category-section__eyebrow {
	background: color-mix(in srgb, var(--wp--preset--color--turquoise) 12%, var(--wp--preset--color--base));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--turquoise) 28%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--navy);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1;
	margin: 0;
	padding: 0.55rem 0.85rem;
}

.promodose-category-section__title {
	color: var(--wp--preset--color--navy);
	font-size: clamp(1.7rem, 3vw, 2.65rem);
	line-height: 1.18;
	margin: 0;
}

.promodose-category-section__description {
	color: var(--wp--preset--color--muted);
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.8;
	margin: 0;
	max-width: 650px;
}

.promodose-category-section__grid {
	display: grid;
	gap: var(--promodose-category-gap);
	grid-template-columns: repeat(var(--promodose-category-columns), minmax(0, 1fr));
	margin-block-start: clamp(2rem, 4vw, 3rem);
	max-width: 100%;
	width: 100%;
}

.promodose-category-section__viewport {
	margin-block-start: clamp(2rem, 4vw, 3rem);
	position: relative;
}

.promodose-category-section__viewport .promodose-category-section__grid {
	margin-block-start: 0;
}

.promodose-category-section.is-slider .promodose-category-section__viewport {
	margin-inline: -0.35rem;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	padding: 0.35rem;
	scroll-behavior: smooth;
	scroll-padding-inline: 0.35rem;
	scrollbar-width: none;
}

.promodose-category-section.is-slider .promodose-category-section__viewport::-webkit-scrollbar {
	display: none;
}

.promodose-category-section.is-slider .promodose-category-section__grid {
	display: flex;
	gap: var(--promodose-category-gap);
	width: max-content;
}

.promodose-category-section.is-slider .promodose-category-card {
	flex: 0 0 calc((min(var(--wp--style--global--wide-size), 100vw - clamp(2rem, 6vw, 4rem)) - (var(--promodose-category-gap) * (var(--promodose-category-slider-items) - 1))) / var(--promodose-category-slider-items));
	scroll-snap-align: start;
}

.promodose-category-section.is-slider .promodose-category-section__viewport {
	scroll-snap-type: inline proximity;
}

.promodose-category-section__controls {
	display: flex;
	gap: 0.65rem;
	justify-content: center;
	margin-block-start: 1.35rem;
}

.promodose-category-section__arrow {
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
	border-radius: 999px;
	box-shadow: 0 14px 36px rgb(29 40 79 / 9%);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	display: inline-flex;
	height: 44px;
	justify-content: center;
	padding: 0;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
	width: 44px;
}

.promodose-category-section__arrow svg {
	fill: currentColor;
	height: 20px;
	width: 20px;
}

.promodose-category-section__arrow:hover,
.promodose-category-section__arrow:focus-visible {
	background: var(--wp--preset--color--turquoise);
	border-color: var(--wp--preset--color--turquoise);
	color: var(--wp--preset--color--base);
	outline: none;
	transform: translateY(-1px);
}

.promodose-category-section__arrow:disabled {
	cursor: default;
	opacity: 0.42;
	transform: none;
}

.promodose-category-card {
	align-items: center;
	aspect-ratio: var(--promodose-category-card-ratio);
	background: var(--wp--preset--color--navy);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 9%, transparent);
	border-radius: 8px;
	box-shadow: 0 18px 45px rgb(29 40 79 / 9%);
	color: var(--wp--preset--color--base);
	display: grid;
	justify-items: center;
	min-height: var(--promodose-category-card-min-height);
	min-width: 0;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	width: 100%;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.promodose-category-card::before {
	background:
		linear-gradient(180deg, rgb(18 24 38 / 8%) 0%, rgb(18 24 38 / 36%) 100%),
		linear-gradient(90deg, rgb(104 63 160 / 24%) 0%, rgb(0 184 169 / 22%) 100%);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.promodose-category-card::after {
	border: 1px solid rgb(255 255 255 / 34%);
	border-radius: 8px;
	content: "";
	inset: 12px;
	opacity: 0;
	position: absolute;
	transform: scale(0.98);
	transition: opacity 180ms ease, transform 180ms ease;
	z-index: 2;
}

.promodose-category-card:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--wp--preset--color--turquoise) 58%, transparent);
	outline-offset: 4px;
}

.promodose-category-card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--turquoise) 42%, transparent);
	box-shadow: 0 24px 64px rgb(29 40 79 / 14%);
	transform: translateY(-4px);
}

.promodose-category-card:hover::after {
	opacity: 1;
	transform: scale(1);
}

.promodose-category-card__media {
	display: block;
	inset: 0;
	position: absolute;
}

.promodose-category-card__image {
	display: block;
	height: 100%;
	max-height: none;
	max-width: none;
	object-fit: cover;
	transform: scale(1);
	transition: transform 220ms ease;
	width: 100%;
}

.promodose-category-card:hover .promodose-category-card__image {
	transform: scale(1.04);
}

.promodose-category-card__content {
	align-items: center;
	display: grid;
	gap: 0.25rem;
	justify-items: center;
	padding: clamp(1rem, 2vw, 1.25rem);
	position: relative;
	text-align: center;
	z-index: 3;
}

.promodose-category-card__name {
	align-items: center;
	background: rgb(255 255 255 / 90%);
	border: 1px solid rgb(255 255 255 / 62%);
	border-radius: 999px;
	box-shadow: 0 14px 34px rgb(18 24 38 / 18%);
	color: var(--wp--preset--color--navy);
	display: inline-flex;
	font-size: var(--promodose-category-label-size);
	font-weight: 800;
	justify-content: center;
	line-height: 1.25;
	overflow-wrap: anywhere;
	padding: var(--promodose-category-label-padding-block) var(--promodose-category-label-padding-inline);
	min-width: min(168px, 78%);
}

.promodose-category-card__count {
	background: rgb(29 40 79 / 72%);
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	font-size: 0.82rem;
	font-weight: 700;
	padding: 0.25rem 0.65rem;
}

.promodose-category-section.is-display-icons {
	--promodose-category-card-ratio: 1;
	--promodose-category-card-min-height: 134px;
	--promodose-category-label-size: clamp(0.86rem, 0.9vw, 1rem);
	--promodose-category-label-padding-block: 0;
	--promodose-category-label-padding-inline: 0;
	background: transparent;
}

.promodose-category-section.is-display-icons .promodose-category-card {
	background: var(--wp--preset--color--base);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	border-radius: 8px;
	box-shadow: none;
	color: var(--wp--preset--color--navy);
	padding: 1rem 0.7rem;
}

.promodose-category-section.is-display-icons .promodose-category-card::before,
.promodose-category-section.is-display-icons .promodose-category-card::after {
	display: none;
}

.promodose-category-section.is-display-icons .promodose-category-card:hover {
	box-shadow: none;
}

.promodose-category-section.is-display-icons .promodose-category-card__media {
	align-items: center;
	display: flex;
	inset: auto;
	justify-content: center;
	margin-block-end: 0.7rem;
	position: relative;
}

.promodose-category-card__icon {
	align-items: center;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--primary) 14%, var(--wp--preset--color--base)), color-mix(in srgb, var(--wp--preset--color--turquoise) 16%, var(--wp--preset--color--base)));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--turquoise) 30%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	height: 58px;
	justify-content: center;
	width: 58px;
}

.promodose-category-card__icon svg {
	fill: currentColor;
	height: 28px;
	width: 28px;
}

.promodose-category-card__icon-image {
	display: block;
	height: 34px;
	max-height: 34px;
	max-width: 34px;
	object-fit: contain;
	width: 34px;
}

.promodose-category-section.is-display-icons .promodose-category-card__content {
	padding: 0;
}

.promodose-category-section.is-display-icons .promodose-category-card__name {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--wp--preset--color--navy);
	min-width: 0;
	padding: 0;
}

.promodose-category-section.is-display-icons .promodose-category-card__count {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--muted);
}

.promodose-category-section.is-card-style-soft .promodose-category-card {
	box-shadow: none;
}

.promodose-category-section.is-card-style-glass .promodose-category-card {
	background: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	backdrop-filter: blur(12px);
}

.promodose-category-section.is-image-style-compact .promodose-category-card {
	min-height: 170px;
}

.promodose-category-section.is-image-style-compact .promodose-category-card__media {
	inset: 0;
}

.promodose-category-section.is-image-style-compact .promodose-category-card__image {
	filter: saturate(0.92);
}

.promodose-category-section.has-motion-expressive .promodose-category-card:nth-child(odd) .promodose-category-card__image {
	animation: promodose-category-float 5600ms ease-in-out infinite;
}

.promodose-category-section__empty {
	background: var(--wp--preset--color--base);
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--primary) 34%, transparent);
	border-radius: 8px;
	color: var(--wp--preset--color--muted);
	margin-block-start: 2rem;
	padding: 1rem;
	text-align: center;
}

@keyframes promodose-category-float {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}

	50% {
		transform: translateY(-5px) scale(1.025);
	}
}

@media (max-width: 980px) {
	.promodose-category-section.has-category-columns-5,
	.promodose-category-section.has-category-columns-6,
	.promodose-category-section.has-category-columns-7,
	.promodose-category-section.has-category-columns-8 {
		--promodose-category-gap: clamp(1rem, 2vw, 1.25rem);
		--promodose-category-card-ratio: 1.08;
		--promodose-category-card-min-height: 220px;
		--promodose-category-label-size: clamp(1rem, 1.2vw, 1.14rem);
		--promodose-category-label-padding-block: 0.68rem;
		--promodose-category-label-padding-inline: 1.1rem;
	}

	.promodose-category-section__grid {
		grid-template-columns: repeat(var(--promodose-category-tablet-columns), minmax(0, 1fr));
	}

	.promodose-category-section.is-slider .promodose-category-card {
		flex-basis: calc((min(var(--wp--style--global--wide-size), 100vw - clamp(2rem, 6vw, 4rem)) - (var(--promodose-category-gap) * (var(--promodose-category-slider-tablet-items) - 1))) / var(--promodose-category-slider-tablet-items));
	}
}

@media (max-width: 560px) {
	.promodose-category-section {
		padding-block: 3rem;
	}

	.promodose-category-section__grid {
		grid-template-columns: repeat(var(--promodose-category-mobile-columns), minmax(0, 1fr));
	}

	.promodose-category-section.is-slider .promodose-category-card {
		flex-basis: calc((100vw - 2rem - (var(--promodose-category-gap) * (var(--promodose-category-slider-mobile-items) - 1))) / var(--promodose-category-slider-mobile-items));
	}

	.promodose-category-card {
		--promodose-category-card-min-height: 180px;
	}

	.promodose-category-card__content {
		padding: 0.7rem;
	}

	.promodose-category-card__name {
		min-width: 0;
		padding: 0.62rem 0.95rem;
	}
}

@media (max-width: 380px) {
	.promodose-category-section__grid {
		grid-template-columns: repeat(var(--promodose-category-mobile-columns), minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.promodose-category-card,
	.promodose-category-card__image,
	.promodose-category-section.has-motion-expressive .promodose-category-card:nth-child(odd) .promodose-category-card__image {
		animation: none !important;
		transition: none;
	}
}