/* Display fixes: light-mode background gaps, grey text contrast, small-screen layouts */

/* Light mode: dark backgrounds that had no light counterpart */

html:not(.dark) .bg-\[\#0A0F18\]\/98 {
	background-color: rgba(255, 255, 255, 0.98) !important;
}

html:not(.dark) .bg-\[\#0C111A\]\/90,
html:not(.dark) .bg-\[\#121A25\]\/90 {
	background-color: rgba(255, 255, 255, 0.95) !important;
}

html:not(.dark) .bg-\[\#161E2A\] {
	background-color: #f1f5f9 !important;
}

html:not(.dark) .bg-\[\#0A0F18\]\/50 {
	background-color: rgba(241, 245, 249, 0.8) !important;
}

/* Light mode: faint grey text */

html:not(.dark) .text-white\/50,
html:not(.dark) .text-white\/40,
html:not(.dark) .text-white\/30,
html:not(.dark) aside p.text-white\/30,
html:not(.dark) aside p.text-white\/40,
html:not(.dark) nav.fixed.bottom-0 .text-white\/40 {
	color: #5b6777 !important;
}

html:not(.dark) footer .text-white\/30,
html:not(.dark) footer .text-white\/40,
html:not(.dark) footer .text-white\/50 {
	color: #475569 !important;
}

/* Article images framed with an inline dark background */

.article-content figcaption {
	opacity: 1 !important;
	color: rgb(255 255 255 / 0.68) !important;
}

html:not(.dark) .article-content figure[style*="#0F141C"],
html:not(.dark) .article-content figure[style*="#0f141c"] {
	background: #f8fafc !important;
}

html:not(.dark) .article-content figcaption {
	color: #475569 !important;
}

/* Light mode: orange tints are faded to 30% opacity. That stays for glows and icon-only boxes,
   but not for boxes that hold text, where it faded the text too. */

html:not(.dark) :not(.absolute).bg-orange-500\/10:not(:has(> svg:only-child)),
html:not(.dark) :not(.absolute).bg-orange-400\/15:not(:has(> svg:only-child)) {
	opacity: 1 !important;
	background-color: rgba(249, 115, 22, 0.08) !important;
}

html:not(.dark) :not(.absolute).bg-orange-500\/20:not(:has(> svg:only-child)) {
	opacity: 1 !important;
	background-color: rgba(249, 115, 22, 0.12) !important;
}

/* Light mode: a blurred orange glow inside a card made all of the card's text white */

html:not(.dark) .relative:has(> .absolute:is([class*="from-orange"], [class*="from-red"], [class*="from-amber"])[class*="blur"]) .text-white,
html:not(.dark) .relative:has(> .absolute:is([class*="from-orange"], [class*="from-red"], [class*="from-amber"])[class*="blur"]) .text-white\/80 {
	color: #0f172a !important;
}

html:not(.dark) .relative:has(> .absolute:is([class*="from-orange"], [class*="from-red"], [class*="from-amber"])[class*="blur"]) :is([class*="from-orange"], [class*="bg-orange-5"]) .text-white,
html:not(.dark) .relative:has(> .absolute:is([class*="from-orange"], [class*="from-red"], [class*="from-amber"])[class*="blur"]) :is([class*="from-orange"], [class*="bg-orange-5"]).text-white {
	color: #ffffff !important;
}

html:not(.dark) .apexcode-el-more.text-\[\#FFFFFF\] {
	color: #0f172a !important;
	border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Dark mode: faint grey text */

.dark .text-white\/40 {
	color: rgb(255 255 255 / 0.56);
}

.dark .text-white\/30 {
	color: rgb(255 255 255 / 0.5);
}

/* Text on top of a photo keeps its dark overlay and light text in both modes */

html:not(.dark) .apexcode-hero-overlay {
	background-image: linear-gradient(to top, #0F141C, rgba(15, 20, 28, 0.5), transparent) !important;
}

html:not(.dark) .apexcode-on-image .text-white {
	color: #ffffff !important;
}

html:not(.dark) .apexcode-on-image .text-white\/30 {
	color: rgba(255, 255, 255, 0.6) !important;
}

/* Article hero: taller on phones so the badge and breadcrumb do not overlap */

.apexcode-single-media {
	aspect-ratio: 4 / 3;
}

@media (min-width: 640px) {
	.apexcode-single-media {
		aspect-ratio: 21 / 9;
	}
}

/* Product page */

.apexcode-buy-row > * > span {
	white-space: nowrap;
}

@media (max-width: 639px) {
	.apexcode-buy-row {
		flex-wrap: wrap;
	}

	.apexcode-buy-row > .single_add_to_cart_button,
	.apexcode-buy-row > :first-child:not(:only-child) {
		flex: 1 1 100%;
	}

	.apexcode-buy-row > a {
		flex: 1 1 0;
	}
}

@media (max-width: 479px) {
	.apexcode-product-facts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Footer */

.apexcode-footer-contact {
	grid-column: 1 / -1;
}

@media (min-width: 1024px) {
	.apexcode-footer-contact {
		grid-column: auto;
	}
}

.apexcode-footer-contact a > div:last-child {
	min-width: 0;
	overflow-wrap: anywhere;
}

.apexcode-trust-label {
	font-size: 11px;
	line-height: 1.4;
}

/* Rating stars: Solar outlines set fill="none" on the path, so fill it from CSS */

.apexcode-star path,
.apexcode-star g {
	fill: currentColor;
}
.swiper-pagination{--swiper-pagination-bullet-horizontal-gap:9px}