/* ==========================================================================
   Specs block imported from mi.com
   PC markup is px based (designed for ≥1226px) and is scaled down with zoom.
   Mobile markup is rem based: 1rem = clamp(320px, 100vw, 720px) / 22.5.
   ========================================================================== */

.xm-specs {
	--xm-rem: calc(clamp(320px, 100vw, 720px) / 22.5);
	font-family: var(--xm-font);
	color: #000;
	line-height: 1.2;
}

.xm-specs img {
	max-width: none;
}

.xm-specs .xm-text {
	display: inline-block;
	overflow: visible;
	white-space: break-spaces;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: manual;
	font-weight: 300;
}
.xm-specs .f-thin {
	font-weight: 100;
}
.xm-specs .f-light {
	font-weight: 300;
}
.xm-specs .f-bold {
	font-weight: 700;
}
.xm-specs .f-bolder {
	font-weight: 800;
}

.xm-specs .xm-picture {
	display: contents;
}

/* PC ----------------------------------------------------------------------- */

.xm-specs--pc {
	overflow: hidden;
}
.xm-specs__scale {
	zoom: var(--xm-zoom, 1);
}

/* Mobile ------------------------------------------------------------------- */

.xm-specs--m {
	display: none;
	max-width: 720px;
	margin: 0 auto;
	overflow: hidden;
}
.xm-specs--m img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

@media (max-width: 1023px) {
	.xm-specs--pc {
		display: none;
	}
	.xm-specs--m {
		display: block;
	}
}

.xm-specs__empty {
	padding: 120px 16px;
	text-align: center;
	font-size: 16px;
	color: var(--xm-text-2);
}

/* --------------------------------------------------------------------------
   Fluid mobile layout for sources that only publish the px desktop markup
   (po.co): stack title/content columns, full-width blocks, smaller type.
   -------------------------------------------------------------------------- */

.xm-specs--fluid {
	padding: 0 16px;
	box-sizing: border-box;
}
.xm-specs--fluid [style*="width:1226px"],
.xm-specs--fluid [style*="width:1200px"],
.xm-specs--fluid [style*="width:880px"],
.xm-specs--fluid [style*="width:820px"],
.xm-specs--fluid [style*="width:300px"] {
	width: 100% !important;
	max-width: 100% !important;
}
.xm-specs--fluid div[style*="width:1226px"][style*="display:flex"] {
	flex-direction: column !important;
	padding: 18px 0 !important;
}
.xm-specs--fluid div[style*="width:300px"] {
	margin: 0 0 8px 0 !important;
}
.xm-specs--fluid div[style*="padding:80px 0px 82px"],
.xm-specs--fluid div[style*="padding:1px 0px 82px"] {
	padding: 16px 0 20px !important;
}
.xm-specs--fluid div[style*="display:flex"][style*="width:auto"] {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 10px;
}
.xm-specs--fluid div[style*="padding:0px 0px 0px 100px"] {
	padding-left: 20px !important;
}
.xm-specs--fluid div[style*="padding:0px 0px 0px 15px"],
.xm-specs--fluid div[style*="padding:0px 0px 0px 8px"] {
	padding-left: 8px !important;
}
.xm-specs--fluid img {
	max-width: 100% !important;
	height: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.xm-specs--fluid img[style*="width:30px"],
.xm-specs--fluid img[style*="width:35px"] {
	width: 22px !important;
	height: 22px !important;
}
.xm-specs--fluid .xm-text[style*="width:150px"] {
	width: auto !important;
	padding-right: 8px;
}
.xm-specs--fluid .xm-text[style*="font-size:35px"] {
	font-size: 24px !important;
}
.xm-specs--fluid .xm-text[style*="font-size:22px"] {
	font-size: 15px !important;
}
.xm-specs--fluid .xm-text[style*="font-size:20px"] {
	font-size: 14px !important;
}
.xm-specs--fluid .xm-text[style*="font-size:18px"] {
	font-size: 12px !important;
}
.xm-specs--fluid .xm-text[style*="margin:10px 0px 0px 0px"] {
	margin-top: 7px !important;
}

/* Mobile (mi.com rem layout): tighter spacing between sections and groups. */
.xm-specs--m [style*="padding:0 0 calc(var(--xm-rem)*2.2708) 0"] {
	padding-bottom: calc(var(--xm-rem) * 1.1) !important;
}
.xm-specs--m [style*="padding:calc(var(--xm-rem)*2.5) 0 0 0"] {
	padding-top: calc(var(--xm-rem) * 1.2) !important;
}
.xm-specs--m [style*="padding:calc(var(--xm-rem)*3.0208) 0 0 0"],
.xm-specs--m [style*="padding:calc(var(--xm-rem)*3.3333) 0 0 0"] {
	padding-top: calc(var(--xm-rem) * 1.4) !important;
}
.xm-specs--m [style*="margin:calc(var(--xm-rem)*1.25) 0"] {
	margin-top: calc(var(--xm-rem) * 0.8) !important;
}

/* Mobile (po.co px layout): tighter spacing between lines. */
.xm-specs--fluid .xm-text[style*="margin:20px 0px 0px 0px"] {
	margin-top: 9px !important;
}
.xm-specs--fluid .xm-text[style*="margin:30px 0px 0px 0px"] {
	margin-top: 14px !important;
}
.xm-specs--fluid .xm-text[style*="margin:40px 0px 0px 0px"] {
	margin-top: 18px !important;
}

/* Mobile: colour names under the product image – larger and not hairline-thin. */
.xm-specs--m .xm-text.f-thin,
.xm-specs--m .xm-text[style*="font-size:calc(var(--xm-rem)*0.625)"][style*="text-align:center"] {
	font-size: max(14px, calc(var(--xm-rem) * 0.8)) !important;
	font-weight: 400 !important;
	color: #333 !important;
}
.xm-specs--fluid .xm-text[style*="width:150px"] {
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #333 !important;
}

/* Mobile: less empty space under the colour row. */
.xm-specs--m div[style*="min-height:calc(var(--xm-rem)*6.25)"][style*="border-bottom"] {
	min-height: 0 !important;
	padding-bottom: calc(var(--xm-rem) * 1.1) !important;
}
.xm-specs--fluid div[style*="padding:0px 0px 80px 0px"] {
	padding-bottom: 20px !important;
}
.xm-specs--fluid div[style*="height:30px"][style*="padding:0px 0px 45px 0px"] {
	padding-bottom: 12px !important;
}
.xm-specs--fluid div[style*="width:100%"][style*="padding:80px 0px 80px 0px"] {
	padding: 24px 0 20px !important;
}

/* Mobile (po.co layout): keep a gap between the colour dot and its name. */
.xm-specs--fluid img[style*="width:30px"],
.xm-specs--fluid img[style*="width:35px"] {
	margin: 0 5px 0 5px !important;
}
/* Mobile (po.co layout): compact colour row so all colours fit on one line. */
.xm-specs--fluid div[style*="padding:0px 0px 0px 100px"],
.xm-specs--fluid div[style*="padding:0px 0px 0px 15px"],
.xm-specs--fluid div[style*="padding:0px 0px 0px 8px"] {
	padding-left: 3px !important;
}
.xm-specs--fluid .xm-text[style*="width:150px"] {
	padding-right: 3px !important;
}
.xm-specs--fluid .xm-text[style*="width:150px"] {
	font-size: 13px !important;
}
.xm-specs--fluid div[style*="display:flex"][style*="align-items:center"] > .xm-text {
	width: auto !important;
	padding-right: 3px !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: #333 !important;
}