/**
 * Micro Mania responsive layout layer — release 2026.08.27.3.
 *
 * This file loads after the main design. It owns the geometry of the shop
 * cards and the PC builder PSU stat, so decorative rules can never collapse
 * the content rows they depend on.
 */

/* -------------------------------------------------------------------------
   SHOP PRODUCT CARDS
   ---------------------------------------------------------------------- */

/* A card is a real row layout, not a fixed-height picture with content placed
   underneath it by coincidence. min-width:0 on every content-bearing row is
   important for long hardware model names at narrow and translated widths. */
.mmi-page.mmi-shop .shop-product {
	display: flex !important;
	flex-direction: column;
	min-width: 0;
	height: 100%;
}

/* Filtering uses the native hidden attribute. This must follow the flex rule:
   an earlier release gave both declarations !important and the later flex
   declaration repainted every card even though the filter had hidden it. */
.mmi-page.mmi-shop .shop-product[hidden] {
	display: none !important;
}

.mmi-page.mmi-shop .shop-product .product-topline,
.mmi-page.mmi-shop .shop-product .product-visual,
.mmi-page.mmi-shop .shop-product .product-copy,
.mmi-page.mmi-shop .shop-product .product-stock,
.mmi-page.mmi-shop .shop-product .product-buy,
.mmi-page.mmi-shop .shop-product .compare-check {
	flex: 0 0 auto;
	min-width: 0;
}

/* The photograph now reserves exactly the same square that it paints. The old
   CSS reserved 132px (96px on phones) while its square child grew to the full
   card width — the child escaped by more than 100px and covered the name. */
.mmi-page.mmi-shop .shop-product .product-visual {
	position: relative;
	display: grid !important;
	place-items: center;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: 1 / 1;
	margin: 5px 0 10px !important;
	overflow: hidden;
	border-radius: 12px;
	isolation: isolate;
}

.mmi-page.mmi-shop .shop-product .product-visual > .product-photo {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100% !important;
	height: 100% !important;
	min-width: 0;
	min-height: 0;
	aspect-ratio: auto !important;
	overflow: hidden;
	border-radius: inherit;
	transform: none !important;
}

.mmi-page.mmi-shop .shop-product .product-photo img {
	position: static !important;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain;
	object-position: center;
	transform: none !important;
}

/* A subtle solid name plate gives every product a guaranteed readable region,
   independent of the photograph's colour or crop. It grows for long model
   names instead of clipping them. */
.mmi-page.mmi-shop .shop-product .product-copy {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 64px;
	margin: 0 0 12px;
	padding: 8px 11px 10px 13px;
	overflow: hidden;
	border: 0;
	border-radius: 8px;
	background:
		linear-gradient(90deg, rgba(79, 216, 224, 0.065), rgba(217, 47, 196, 0.025) 64%, transparent),
		#111119;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.055);
}

.mmi-page.mmi-shop .shop-product .product-copy::before {
	content: "";
	position: absolute;
	inset-block: 9px;
	inset-inline-start: 0;
	width: 2px;
	border-radius: 0 99px 99px 0;
	background: linear-gradient(var(--cyan), rgba(217, 47, 196, 0.76));
	opacity: 0.82;
}

[dir="rtl"] .mmi-page.mmi-shop .shop-product .product-copy {
	padding-right: 13px;
	padding-left: 11px;
}

[dir="rtl"] .mmi-page.mmi-shop .shop-product .product-copy::before {
	border-radius: 99px 0 0 99px;
}

.mmi-page.mmi-shop .shop-product .product-copy .product-category {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0 0 4px;
	color: #9bdde1;
	font-size: clamp(8px, 0.68vw, 9px);
	font-weight: 750;
	letter-spacing: 0.035em;
	line-height: 1.25;
}

.mmi-page.mmi-shop .shop-product .product-copy h3 {
	position: relative;
	z-index: 1;
	display: block !important;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
	color: #f3f1f7;
	font-size: clamp(11px, 0.86vw, 13px);
	font-weight: 800;
	line-height: 1.46;
	letter-spacing: 0.005em;
	text-shadow: none;
}

.mmi-page.mmi-shop .shop-product .product-copy h3 > a {
	display: block !important;
	width: 100%;
	overflow: visible !important;
	-webkit-box-orient: initial !important;
	-webkit-line-clamp: unset !important;
	color: inherit;
	overflow-wrap: anywhere;
	word-break: normal;
	text-decoration: none;
}

.mmi-page.mmi-shop .shop-product .product-stock {
	position: relative;
	z-index: 4;
}

.mmi-page.mmi-shop .shop-product.is-out-of-stock .product-copy::before,
.mmi-page.mmi-shop .shop-product[data-in-stock="0"] .product-copy::before {
	background: linear-gradient(#ff496d, rgba(217, 47, 196, 0.7));
}

/* The actual template class is out-stock. It also carries sold-out as a
   backwards-compatible fallback, but these rules make the state unmistakable
   before hover, focus or click. */
.mmi-page.mmi-shop .shop-product .product-stock.out-stock,
.mmi-page.mmi-shop .shop-product .product-stock.sold-out {
	color: #ff496d !important;
	font-weight: 900;
	text-shadow: 0 0 7px rgba(255, 45, 85, 0.88), 0 0 16px rgba(255, 45, 85, 0.38) !important;
}

.mmi-page.mmi-shop .shop-product .product-stock.out-stock > span,
.mmi-page.mmi-shop .shop-product .product-stock.sold-out > span {
	background: #ff2d55 !important;
	box-shadow: 0 0 5px #ff2d55, 0 0 14px rgba(255, 45, 85, 0.95) !important;
	animation: mmi-out-stock-pulse 1.85s ease-in-out infinite;
}

.mmi-page.mmi-shop .shop-product.is-out-of-stock,
.mmi-page.mmi-shop .shop-product[data-in-stock="0"],
.mmi-page.mmi-shop .shop-product.is-out-of-stock:hover,
.mmi-page.mmi-shop .shop-product[data-in-stock="0"]:hover {
	border-color: rgba(255, 45, 85, 0.4) !important;
	box-shadow:
		inset 0 0 25px rgba(255, 45, 85, 0.035),
		0 0 18px rgba(255, 45, 85, 0.09) !important;
}

.mmi-page.mmi-shop .shop-product.is-out-of-stock::after,
.mmi-page.mmi-shop .shop-product[data-in-stock="0"]::after {
	background: linear-gradient(90deg, transparent, #ff2d55 22%, #ff496d 50%, #ff2d55 78%, transparent) !important;
	box-shadow: 0 0 13px rgba(255, 45, 85, 0.94) !important;
	transform: scaleX(1) !important;
	opacity: 0.9 !important;
}

@keyframes mmi-out-stock-pulse {
	0%, 100% { opacity: 0.72; transform: scale(0.9); }
	50% { opacity: 1; transform: scale(1.13); }
}

/* -------------------------------------------------------------------------
   PC BUILDER — RECOMMENDED PSU
   ---------------------------------------------------------------------- */

/* One stat-plate design at every breakpoint. The measurements deliberately do
   not change inside a phone-only media query, so desktop cannot fall back to
   the previous plain grey label/value treatment. */
.mmi-page.mmi-builder .power-recommendation {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	align-self: stretch !important;
	display: grid !important;
	align-content: center !important;
	justify-items: center !important;
	gap: 3px !important;
	min-width: 124px !important;
	max-width: 148px;
	margin: 0 !important;
	padding: 7px 13px 6px !important;
	border: 1px solid rgba(79, 216, 224, 0.22) !important;
	border-radius: 11px !important;
	background:
		linear-gradient(115deg, rgba(79, 216, 224, 0.055), transparent 42%),
		linear-gradient(145deg, #12121b, #0e0e16) !important;
	box-shadow:
		inset 0 0 0 1px rgba(217, 47, 196, 0.035),
		0 5px 14px rgba(0, 0, 0, 0.2) !important;
	text-align: center !important;
}

.mmi-page.mmi-builder .power-recommendation::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block: 8px;
	inset-inline-start: 0;
	width: 2px;
	border-radius: 99px;
	background: linear-gradient(var(--cyan), #d92fc4);
	box-shadow: 0 0 6px rgba(79, 216, 224, 0.42);
}

.mmi-page.mmi-builder .power-recommendation::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: auto 11px 0;
	width: auto;
	height: 1px;
	border: 0;
	border-radius: 99px;
	background: linear-gradient(90deg, transparent, rgba(79, 216, 224, 0.58), rgba(217, 47, 196, 0.44), transparent);
	transform: none;
}

.mmi-page.mmi-builder .power-recommendation > * {
	position: relative;
	z-index: 1;
}

.mmi-page.mmi-builder .power-recommendation > .power-rec-label,
.mmi-page.mmi-builder .power-recommendation > span:first-child {
	color: #d6c8d8 !important;
	font-size: 9px !important;
	font-weight: 950 !important;
	letter-spacing: 0.09em !important;
	line-height: 1.2 !important;
	white-space: nowrap;
	text-align: center !important;
	text-transform: uppercase;
	text-shadow: none !important;
}

.mmi-page.mmi-builder .power-budget .power-recommendation > .power-rec-value,
.mmi-page.mmi-builder .power-budget .power-recommendation > b#recommendedPsu {
	display: flex !important;
	align-items: baseline !important;
	justify-content: center !important;
	gap: 1px !important;
	color: #f5f3f8 !important;
	font-size: 24px !important;
	font-weight: 900 !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.015em !important;
	line-height: 1.03 !important;
	text-align: center !important;
	text-shadow: 0 0 8px rgba(79, 216, 224, 0.22) !important;
}

.mmi-page.mmi-builder .power-recommendation i {
	color: #7fe8ee !important;
	font-size: 12px !important;
	font-style: normal;
	font-weight: 850;
	text-transform: lowercase;
}

/* The normal completed-build headroom sentence is deliberately removed. Real
   warning and incomplete-data messages remain available in non-ready states. */
.mmi-page.mmi-builder .power-budget.ready #powerNote {
	display: none !important;
}

/* -------------------------------------------------------------------------
   RESPONSIVE POLISH: 360px TO 4K
   ---------------------------------------------------------------------- */

@media (max-width: 620px) {
	.mmi-page.mmi-shop .shop-product .product-copy {
		min-height: 72px;
		padding: 8px 9px 9px;
	}

	.mmi-page.mmi-shop .shop-product .product-copy h3 {
		font-size: clamp(10.5px, 3vw, 12px);
		line-height: 1.38;
	}

	.mmi-page.mmi-builder .power-recommendation {
		min-width: 124px !important;
	}
}

@media (max-width: 370px) {
	.mmi-page.mmi-builder .power-recommendation {
		min-width: 116px !important;
		padding-inline: 10px !important;
	}

	.mmi-page.mmi-builder .power-recommendation > .power-rec-label,
	.mmi-page.mmi-builder .power-recommendation > span:first-child {
		font-size: 8.5px !important;
	}
}

@media (min-width: 1920px) {
	/* The main wrapper already caps the catalogue width. Keep type comfortably
	   readable on high-density large monitors without inflating the cards. */
	.mmi-page.mmi-shop .shop-product .product-copy h3 {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mmi-page.mmi-shop .shop-product .product-stock.out-stock > span,
	.mmi-page.mmi-shop .shop-product .product-stock.sold-out > span {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
   PRODUCT PAGE TAGS
   ---------------------------------------------------------------------- */

.mmi-page.mmi-product .product-visible-tags {
	display: grid;
	gap: 7px;
	margin: 0 0 18px;
	padding: 11px 12px 12px;
	border: 1px solid rgba(79, 216, 224, 0.14);
	border-radius: 11px;
	background: linear-gradient(145deg, rgba(79, 216, 224, 0.045), rgba(217, 47, 196, 0.035));
}

.mmi-page.mmi-product .product-tags-label {
	color: #8e8998;
	font-size: 8.5px;
	font-weight: 850;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mmi-page.mmi-product .product-visible-tags > div {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mmi-page.mmi-product .product-visible-tags > div > span {
	display: inline-flex;
	align-items: center;
	min-height: 27px;
	padding: 5px 9px;
	border: 1px solid rgba(79, 216, 224, 0.25);
	border-radius: 999px;
	background: #101019;
	color: #d8fafd;
	font-size: 9px;
	font-weight: 800;
	line-height: 1.25;
	box-shadow: inset 0 0 10px rgba(79, 216, 224, 0.035);
}