/**
 * The EU harmonised warranty label, see Support\Harmonised_Label.
 *
 * Every size is in units of 1/824 of the label's width (--u), the width in pixels of ACCO's
 * template, so the numbers below are read straight off it.
 */

/*
 * Inter, cut down to basic Latin and the accented capitals, one file per weight, so a closed banner
 * fetches only the ExtraBold (9 KB) and the other two load when the label opens.
 */
@font-face {
	font-family: "QV Inter";
	src: url("../fonts/inter-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "QV Inter";
	src: url("../fonts/inter-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "QV Inter";
	src: url("../fonts/inter-800.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* The small banner, which opens and closes the label. */

.qv-warranty > summary {
	display: inline-block;
	list-style: none;
	cursor: pointer;
}

.qv-warranty > summary::-webkit-details-marker {
	display: none;
}

.qv-warranty > summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * Open, the label takes the banner's place. The banner stays in the page, out of sight, so the
 * keyboard can still reach it to close the label, and the label wears its focus ring meanwhile.
 * A click on the label closes it, see harmonised-label.js.
 */
.qv-warranty[open] > summary {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.qv-warranty[open]:has(> summary:focus-visible) .qv-hlabel {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.qv-warranty[open] .qv-hlabel {
	cursor: pointer;
}

/*
 * ACCO's small banner, 1030 x 162 in their template, with the years in its blank space. One digit
 * is centred there and two are set from the left, as ACCO sets them.
 */
.qv-wbanner {
	container-type: inline-size;
	position: relative;
	display: block;
	width: 206px;
	max-width: 100%;
	aspect-ratio: 1030 / 162;
	background: #fff url("../images/harmonised-label/banner.webp") 0 0 / 100% 100% no-repeat;
}

.qv-wbanner__years {
	--u: calc(100cqw / 1030);
	position: absolute;
	top: calc(22.9 * var(--u));
	left: calc(24 * var(--u));
	width: calc(170 * var(--u));
	color: #000;
	font-family: "QV Inter", sans-serif;
	font-size: calc(125 * var(--u));
	font-style: normal;
	font-weight: 800;
	letter-spacing: normal;
	line-height: 1;
	text-align: center;
}

.qv-wbanner.is-multi .qv-wbanner__years {
	left: calc(22 * var(--u));
	text-align: left;
}

/* Slides down where the browser can animate to auto, and simply opens where it cannot. */

.qv-warranty {
	interpolate-size: allow-keywords;
}

.qv-warranty::details-content {
	block-size: 0;
	overflow: clip;
	transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}

.qv-warranty[open]::details-content {
	block-size: auto;
}

@media (prefers-reduced-motion: reduce) {

	.qv-warranty::details-content {
		transition: none;
	}
}

/* The label. */

.qv-hlabel {
	container-type: inline-size;
	width: 100%;
	max-width: 412px;
	margin: 0;
	padding: 0;
	background: #fff;
	color: #000;
	font-family: "QV Inter", sans-serif;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
}

.qv-hlabel > * {
	--u: calc(100cqw / 824);
}

.qv-hlabel img {
	display: block;
	max-width: none;
	height: auto;
	margin: 0;
	border: 0;
	box-shadow: none;
}

.qv-hlabel__header,
.qv-hlabel__footer {
	width: 100%;
}

/*
 * Columns: 24 to 371 for the years, 371 to 601 for the calendar, 601 to 803 for the QR code.
 * The background is a one pixel row of the template, carrying its frame lines down the band.
 */
.qv-hlabel__band {
	display: grid;
	grid-template-columns: calc(347 * var(--u)) calc(230 * var(--u)) 1fr;
	row-gap: calc(21.5 * var(--u));
	padding: calc(11.5 * var(--u)) calc(21 * var(--u)) calc(42 * var(--u)) calc(24 * var(--u));
	background: url("../images/harmonised-label/band.webp") repeat-y 0 0 / 100% auto;
	font-size: calc(27.5 * var(--u));
	line-height: 1.2;
}

.qv-hlabel__brand {
	grid-column: 1;
	font-weight: 600;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* Several codes use the width above the calendar too, and wrap onto as many lines as they need. */
.qv-hlabel__codes-wrap {
	grid-column: 2 / 4;
}

.qv-hlabel__codes {
	display: flex;
	flex-wrap: wrap;
	gap: 0 calc(18 * var(--u));
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.qv-hlabel__codes li {
	margin: 0;
	padding: 0;
}

.qv-hlabel__codes li[hidden] {
	display: none;
}

/* A single code sits over the QR code, where the template puts it. */
.qv-hlabel__codes.is-single {
	margin-left: calc(233 * var(--u));
}

.qv-hlabel__years {
	position: relative;
	top: calc(11 * var(--u));
	grid-column: 1;
	grid-row: 2;
	font-size: calc(244 * var(--u));
	font-weight: 800;
	line-height: calc(207 * var(--u));
}

.qv-hlabel .qv-hlabel__calendar {
	grid-column: 2;
	grid-row: 2;
	align-self: end;
	width: calc(88 * var(--u));
	margin-left: calc(-3 * var(--u));
}

.qv-hlabel__qr {
	grid-column: 3;
	grid-row: 2;
	display: block;
	width: calc(208 * var(--u));
	margin-left: calc(-3 * var(--u));
	line-height: 0;
}

.qv-hlabel__qr img {
	width: 100%;
}

.qv-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}