/**
 * EU Guarantee Notice and GARAN Label for WordPress and WooCommerce, front end.
 *
 * Inter is bundled under its own family name, because the site may already load an Inter of
 * its own with other weights or subsets. SIL Open Font License 1.1, see ../fonts/OFL.txt.
 * The label and notice artwork is © European Union, source: European Commission.
 */

@font-face {
	font-family: "NakedCat GARAN Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../fonts/ncgaran-inter-cyrillic-ext.woff2) format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: "NakedCat GARAN Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../fonts/ncgaran-inter-cyrillic.woff2) format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "NakedCat GARAN Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../fonts/ncgaran-inter-greek-ext.woff2) format("woff2");
	unicode-range: U+1F00-1FFF;
}

@font-face {
	font-family: "NakedCat GARAN Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../fonts/ncgaran-inter-greek.woff2) format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: "NakedCat GARAN Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../fonts/ncgaran-inter-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "NakedCat GARAN Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../fonts/ncgaran-inter-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.ncgaran-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * The label. Always on white, never filtered: the guidelines forbid changing its colours.
 *
 * Themes style button, summary, svg, img and details in every way imaginable (padding, borders,
 * shadows, line-height, fixed widths, text-transform, even filters), and any of it would change
 * the size or look of the official artwork. So the label's own elements are reset first, with
 * enough specificity to beat typical theme rules, and only then styled.
 */
.ncgaran-label,
.ncgaran-label *,
.ncgaran-label *::before,
.ncgaran-label *::after {
	box-sizing: border-box;
}

.ncgaran-label {
	display: block;
	margin: 1em 0;
	padding: 0;
	border: 0;
	max-width: 100%;
	background: none;
	line-height: 1.4;
	text-align: left;
}

.ncgaran-label details.ncgaran-label__details,
.ncgaran-label summary.ncgaran-label__nested,
.ncgaran-label button.ncgaran-label__nested,
.ncgaran-label div.ncgaran-label__full,
.ncgaran-label div.ncgaran-label__art {
	all: unset;
	display: block;
	box-sizing: border-box;
	max-width: 100%;
}

.ncgaran-label div.ncgaran-label__art {
	position: relative;
	width: 360px;
}

.ncgaran-label svg.ncgaran-label__svg,
.ncgaran-label svg.ncgaran-label__nested-svg {
	display: block;
	float: none;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: #fff;
	opacity: 1;
	filter: none;
	transform: none;
	vertical-align: top;
}

/* The label's QR code, as a link. Its box in the artwork's 269.29 x 283.46 viewBox. */
.ncgaran-label a.ncgaran-label__qr {
	position: absolute;
	left: 72.98%;
	top: 29.81%;
	width: 24.65%;
	height: 23.42%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* The nested label: the compact strip, 220px wide unless its space is narrower. */
.ncgaran-label summary.ncgaran-label__nested,
.ncgaran-label button.ncgaran-label__nested {
	display: inline-block;
	width: 220px;
	cursor: pointer;
	line-height: 0;
	list-style: none;
}

.ncgaran-label .ncgaran-label__nested::-webkit-details-marker,
.ncgaran-label .ncgaran-label__nested::marker {
	display: none;
	content: "";
}

.ncgaran-label .ncgaran-label__nested:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * Optional frame, around the nested label and never part of it: the official strip has no
 * border, and the guidelines forbid adding one to the artwork. A frame drawn around it, like a
 * table cell would, is page styling.
 */
.ncgaran-label--framed summary.ncgaran-label__nested,
.ncgaran-label--framed button.ncgaran-label__nested {
	width: 232px;
	padding: 5px;
	border: 1px solid #231f20;
	background: #fff;
}

/* Nested display, expands in place: the full label takes the nested one's place, and back. */
.ncgaran-label__details[open] > summary {
	display: none;
}

.ncgaran-label .ncgaran-label__details .ncgaran-label__art {
	cursor: zoom-out;
}

.ncgaran-label .ncgaran-label__details summary.ncgaran-label__nested {
	cursor: zoom-in;
}

/* Hidden until it has keyboard focus. */
.ncgaran-sr-focusable {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ncgaran-sr-focusable:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0.5em 0 0;
	padding: 0.3em 0.8em;
	overflow: visible;
	clip: auto;
	border: 1px solid currentColor;
	background: #fff;
	color: #1e1e1e;
	font-size: 0.875em;
	white-space: normal;
}

.ncgaran-label__info {
	margin: 0.5em 0 0;
	font-size: 0.875em;
}

/* Dialogs, for the label and the notice. */
.ncgaran-dialog {
	position: fixed;
	box-sizing: border-box;
	width: auto;
	max-width: min(92vw, 420px);
	max-height: 92vh;
	padding: 2.5em 1.25em 1.25em;
	border: 0;
	border-radius: 4px;
	background: #fff;
	color: #1e1e1e;
	text-align: left;
	overflow: auto;
}

.ncgaran-dialog--notice {
	max-width: min(92vw, 640px);
}

.ncgaran-dialog__title {
	margin: 0 2em 0.75em 0;
	padding: 0;
	color: #1e1e1e;
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.3;
}

.ncgaran-dialog__title:focus,
.ncgaran-label__full:focus {
	outline: none;
}

.ncgaran-dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.ncgaran-dialog .ncgaran-label__art {
	position: relative;
	width: 360px;
	max-width: 100%;
}

.ncgaran-label__svg {
	width: 100%;
}

/* The label's QR code, as a link. Its box in the artwork's 269.29 x 283.46 viewBox. */
.ncgaran-label__qr {
	position: absolute;
	left: 72.98%;
	top: 29.81%;
	width: 24.65%;
	height: 23.42%;
}

.ncgaran-dialog a {
	color: #034ea2;
}

.ncgaran-dialog__close {
	position: absolute;
	top: 0.25em;
	right: 0.25em;
	width: 2em;
	height: 2em;
	padding: 0;
	border: 0;
	background: none;
	color: #1e1e1e;
	font-size: 1.5em;
	line-height: 1;
	cursor: pointer;
}

.ncgaran-label__qr:focus-visible,
.ncgaran-notice__qr:focus-visible {
	outline: 3px solid #034ea2;
	outline-offset: 2px;
}

.ncgaran-dialog__close:focus-visible {
	outline: 2px solid currentColor;
}

/* The notice. */
.ncgaran-notice {
	margin: 0.5em 0;
}

.ncgaran-notice__link {
	text-decoration: underline;
	cursor: pointer;
}

/* The shield before the link: the notice's own symbol, the height of the text. */
.ncgaran-notice__link img.ncgaran-notice__icon {
	display: inline-block;
	width: auto;
	height: 1.25em;
	max-width: none;
	margin: 0 0.35em 0 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	vertical-align: -0.25em;
}

.ncgaran-notice__figure {
	margin: 0;
}

/* Swaps the notice image for its official text, and back. */
.ncgaran-notice__toggle {
	display: inline-block;
	margin: 0 0 0.75em;
	padding: 0.4em 0.9em;
	border: 1px solid #034ea2;
	border-radius: 3px;
	background: #fff;
	color: #034ea2;
	font: inherit;
	font-size: 0.875em;
	line-height: 1.4;
	cursor: pointer;
}

.ncgaran-notice__toggle:hover {
	background: #034ea2;
	color: #fff;
}

.ncgaran-notice__toggle:focus-visible {
	outline: 3px solid #034ea2;
	outline-offset: 2px;
}

.ncgaran-notice__art[hidden],
.ncgaran-notice-text[hidden] {
	display: none;
}

/* The notice as text: the Commission's wording, laid out as a readable page. */
.ncgaran-notice-text {
	max-width: 595px;
	color: #1e1e1e;
	font-size: 1rem;
	line-height: 1.55;
}

.ncgaran-notice-text h3 {
	margin: 0 0 0.75em;
	font-weight: 700;
	color: #034ea2;
	font-size: 1.35em;
	line-height: 1.2;
}

.ncgaran-notice-text h4 {
	margin: 1.25em 0 0.5em;
	font-weight: 700;
	font-size: 1.1em;
	line-height: 1.3;
}

.ncgaran-notice-text p,
.ncgaran-notice-text ul,
.ncgaran-notice-text ol {
	margin: 0 0 0.75em;
}

.ncgaran-notice-text ul,
.ncgaran-notice-text ol {
	padding-left: 1.5em;
}

.ncgaran-notice-text__qr img {
	display: block;
	width: 130px;
	max-width: none;
	height: 130px;
	aspect-ratio: 1 / 1;
	background: #fff;
}

.ncgaran-notice-text__qr a:focus-visible {
	outline: 3px solid #034ea2;
	outline-offset: 2px;
}

.ncgaran-notice-text__lead {
	padding: 0.6em 0.8em;
	border: 1px solid #034ea2;
	color: #034ea2;
	font-size: 1.1em;
}

.ncgaran-notice__art {
	position: relative;
	width: 595px;
	max-width: 100%;
	aspect-ratio: 595.28 / 841.89;
}

.ncgaran-notice__art img {
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
}

/*
 * The notice's QR code and the address under it, as a link. The area differs slightly per
 * language, so each is measured from its own file: the grey box's width, from just above the
 * QR code to just below the address, in percent of the 595.28 x 841.89 viewBox.
 */
.ncgaran-notice__qr {
	position: absolute;
}

.ncgaran-notice__art--bg .ncgaran-notice__qr { left: 60.13%; top: 43.08%; width: 33.81%; height: 20.31%; }
.ncgaran-notice__art--cs .ncgaran-notice__qr { left: 60.13%; top: 43.35%; width: 33.81%; height: 20.14%; }
.ncgaran-notice__art--da .ncgaran-notice__qr { left: 59.52%; top: 38.77%; width: 34.43%; height: 21.15%; }
.ncgaran-notice__art--de .ncgaran-notice__qr { left: 60.13%; top: 46.35%; width: 33.81%; height: 20.34%; }
.ncgaran-notice__art--el .ncgaran-notice__qr { left: 60.13%; top: 43.53%; width: 33.81%; height: 20.25%; }
.ncgaran-notice__art--en .ncgaran-notice__qr { left: 59.84%; top: 43.74%; width: 34.11%; height: 19.20%; }
.ncgaran-notice__art--es .ncgaran-notice__qr { left: 59.96%; top: 43.84%; width: 33.81%; height: 20.30%; }
.ncgaran-notice__art--et .ncgaran-notice__qr { left: 59.52%; top: 40.98%; width: 34.43%; height: 21.48%; }
.ncgaran-notice__art--fi .ncgaran-notice__qr { left: 59.52%; top: 42.54%; width: 34.43%; height: 20.37%; }
.ncgaran-notice__art--fr .ncgaran-notice__qr { left: 59.96%; top: 44.05%; width: 33.81%; height: 20.55%; }
.ncgaran-notice__art--ga .ncgaran-notice__qr { left: 59.96%; top: 43.87%; width: 33.81%; height: 20.15%; }
.ncgaran-notice__art--hr .ncgaran-notice__qr { left: 59.96%; top: 42.20%; width: 33.81%; height: 20.04%; }
.ncgaran-notice__art--hu .ncgaran-notice__qr { left: 60.13%; top: 43.90%; width: 33.81%; height: 19.32%; }
.ncgaran-notice__art--it .ncgaran-notice__qr { left: 59.96%; top: 43.85%; width: 33.81%; height: 20.74%; }
.ncgaran-notice__art--lt .ncgaran-notice__qr { left: 59.52%; top: 43.21%; width: 34.43%; height: 19.49%; }
.ncgaran-notice__art--lv .ncgaran-notice__qr { left: 59.52%; top: 41.54%; width: 34.43%; height: 19.38%; }
.ncgaran-notice__art--mt .ncgaran-notice__qr { left: 59.96%; top: 40.44%; width: 33.81%; height: 21.68%; }
.ncgaran-notice__art--nl .ncgaran-notice__qr { left: 59.96%; top: 44.24%; width: 33.81%; height: 20.69%; }
.ncgaran-notice__art--pl .ncgaran-notice__qr { left: 60.13%; top: 43.75%; width: 33.81%; height: 19.76%; }
.ncgaran-notice__art--pt .ncgaran-notice__qr { left: 59.96%; top: 42.58%; width: 34.96%; height: 20.57%; }
.ncgaran-notice__art--ro .ncgaran-notice__qr { left: 59.96%; top: 45.58%; width: 33.81%; height: 19.20%; }
.ncgaran-notice__art--sk .ncgaran-notice__qr { left: 60.13%; top: 43.34%; width: 33.81%; height: 20.15%; }
.ncgaran-notice__art--sl .ncgaran-notice__qr { left: 59.96%; top: 40.70%; width: 33.81%; height: 21.42%; }
.ncgaran-notice__art--sv .ncgaran-notice__qr { left: 59.52%; top: 40.53%; width: 34.43%; height: 20.25%; }

.ncgaran-notice__figure figcaption {
	margin-top: 0.5em;
	font-size: 0.875em;
}

.ncgaran-notice-footer {
	padding: 1em;
	font-size: 0.875em;
	text-align: center;
}

.ncgaran-notice-checkout {
	margin: 1em 0;
}

/*
 * The nested label on cart and checkout items. Neither checkout lets an SVG through, so it is
 * the official strip as a background with the years set on top, placed where the artwork puts
 * them: from 2.82% of the width, on a baseline at 82.3% of the height, 73.3% of it tall.
 */
.ncgaran-mini {
	display: inline-block;
	position: relative;
	font-size: max(1em, 15px);
	width: 7.8em;
	height: 1.2em;
	vertical-align: middle;
	background: #fff url(../label/garan-label-nested-blank.svg) no-repeat 0 0 / 100% 100%;
}

.ncgaran-mini--framed {
	box-sizing: content-box;
	padding: 2px;
	border: 1px solid #231f20;
}

.ncgaran-mini__years {
	position: absolute;
	left: 2.82%;
	bottom: 0.03em;
	color: #231f20;
	font-family: "NakedCat GARAN Inter", Inter, sans-serif;
	font-size: 0.88em;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.ncgaran-mini__years--l {
	font-size: 0.72em;
	bottom: 0.08em;
}

.ncgaran-mini__years--xl {
	font-size: 0.58em;
	bottom: 0.13em;
}

/* On shop and category pages, under the price of each product card. */
.ncgaran-loop {
	margin: 0.5em 0;
	line-height: 1;
}

/* On a grouped product's page, under each product's name in the list. */
.ncgaran-grouped {
	margin: 0.4em 0 0;
	line-height: 1;
}

.ncgaran-editor-note {
	padding: 0.75em;
	border: 1px dashed currentColor;
	font-size: 0.875em;
}

/* Clickable once the script has made it a button: it opens the full label. */
.ncgaran-mini[role="button"] {
	cursor: pointer;
}

.ncgaran-mini[role="button"]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.ncgaran-notice-cart {
	margin: 1em 0;
}