/*
 * EU Guarantee Notice and Durability Label.
 *
 * Reproduces Annexes I and II of Commission Implementing Regulation (EU)
 * 2025/1960 for an online interface.
 *
 * Reference colours, fixed by Annex I note 2 and Annex II note 2:
 *   Blue   Pantone Reflex Blue C   #003399
 *   Yellow Pantone Yellow C        #FFED00
 *   Black  Pantone Black 6 C       #000000
 *   White  Pantone 000C            #FFFFFF
 *
 * Annex II note 5 and recital 14: for a contract concluded through an online
 * interface the notice and the label SHALL be in colour. There is deliberately
 * no monochrome variant here, because black and white is only permitted
 * offline.
 *
 * Annex II note 6 specifies the font as Inter. It is requested first in every
 * stack below. The plugin does not bundle it and does not fetch it from a font
 * CDN: an outbound request to Google Fonts would leak a shopper's IP address
 * to a third party, which is exactly what the rest of this plugin refuses to
 * do. Sites that already load Inter get it; the rest fall back to the closest
 * available grotesque.
 *
 * The annex artwork is an A4 print document. This layout reflows to one column
 * on narrow screens, because an A4 raster on a phone is unreadable and an
 * unreadable notice satisfies nobody.
 */

.sbgn,
.sbgn-label {
	--sbgn-blue: #003399;
	--sbgn-yellow: #FFED00;
	--sbgn-black: #000000;
	--sbgn-white: #FFFFFF;
	--sbgn-rule: #d4d4d4;
	--sbgn-panel: #f2f2f2;

	font-family: Inter, "Inter var", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--sbgn-black);
	box-sizing: border-box;
	max-width: 46rem;
}

.sbgn *,
.sbgn-label * {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------- Annex I */

.sbgn {
	border: 1px solid var(--sbgn-rule);
	background: var(--sbgn-white);
	margin: 1.5rem 0;
}

.sbgn__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--sbgn-blue);
	padding: 0.75rem 1.25rem;
}

.sbgn__emblem {
	flex: 0 0 auto;
	width: 52px;
	height: 71px;
	background: url( "img/eu-emblem.svg" ) center/contain no-repeat;
}

.sbgn__title {
	margin: 0;
	color: var(--sbgn-white);
	font-size: clamp(1.5rem, 5vw, 2.4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/*
 * auto-fit + minmax, NOT a fixed "1.7fr 1fr".
 *
 * This block usually sits inside the WooCommerce product summary, which is a
 * narrow column, not the full page width. A viewport media query cannot see
 * that: the window can be 1100px while the container is 480px. A fixed two
 * column split in that space crushed the text column down to one character per
 * line. auto-fit collapses to a single column based on the space actually
 * available, which is the thing that matters.
 *
 * min-width: 0 on the children matters just as much. Grid items default to
 * min-width: auto, so a wide child (the QR) can refuse to shrink and push its
 * sibling to nothing.
 */
.sbgn__body {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: 1.25rem;
	padding: 1.25rem;
}

.sbgn__main,
.sbgn__side {
	min-width: 0;
}

.sbgn__lead {
	border: 1px solid var(--sbgn-blue);
	color: var(--sbgn-blue);
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
}

.sbgn__lead strong {
	font-weight: 700;
}

.sbgn__main p {
	margin: 0 0 0.75rem;
}

/*
 * The annex draws each of these bullets as a tick-mark, not a disc. Using the
 * real symbol rather than a list marker keeps the meaning when the stylesheet
 * is overridden by a theme.
 */
.sbgn__ticks {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.sbgn__ticks li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.4rem;
}

.sbgn__ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.25rem;
	height: 0.95rem;
	background: url( "img/garan-tick.svg" ) left center/contain no-repeat;
}

.sbgn__side {
	background: var(--sbgn-panel);
	padding: 1rem;
	font-size: 0.95rem;
}

.sbgn__side p {
	margin: 0 0 0.75rem;
}

/*
 * A fixed width, never max-content. The QR is a replaced element, so
 * max-content asks the browser for its intrinsic size, and any SVG shipped
 * without width and height attributes reports the 300px default. That is what
 * blew the column apart. The assets now carry explicit dimensions as well, so
 * this is belt and braces.
 */
.sbgn__side .sbgn-qr {
	display: block;
	background: var(--sbgn-white);
	padding: 0.5rem;
	width: 8.5rem;
	max-width: 100%;
}

.sbgn__qrcaption {
	font-size: 0.8rem;
	word-break: break-all;
}

.sbgn__todo {
	border-top: 2px solid var(--sbgn-black);
	border-bottom: 2px solid var(--sbgn-black);
	padding: 1rem 1.25rem;
}

.sbgn__todo h3 {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
}

.sbgn__todosub {
	margin: 0 0 0.6rem;
	font-weight: 600;
}

.sbgn__steps {
	margin: 0;
	padding-left: 1.4rem;
}

.sbgn__steps li {
	margin-bottom: 0.3rem;
}

.sbgn__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.25rem;
	align-items: flex-start;
	padding: 1.25rem;
}

.sbgn__foot p {
	flex: 1 1 15rem;
	min-width: 0;
}

.sbgn__foot p {
	margin: 0;
}

.sbgn__garan {
	background: var(--sbgn-panel);
	padding: 0.4rem 0.7rem;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* --------------------------------------------------------------- Annex II */

.sbgn-label {
	border: 2px solid var(--sbgn-black);
	background: var(--sbgn-white);
	margin: 1.5rem 0;
	padding: 0;
	max-width: 26rem;
}

.sbgn-label__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: 2px solid var(--sbgn-black);
	padding: 0.6rem 0.9rem 0.5rem;
}

.sbgn-label__title {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: clamp(2rem, 9vw, 3.1rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.sbgn-label__tick {
	display: inline-block;
	width: 0.62em;
	height: 0.47em;
	background: url( "img/garan-tick.svg" ) center/contain no-repeat;
}

.sbgn-label__emblem {
	flex: 0 0 auto;
	width: 44px;
	height: 60px;
	margin-top: -0.6rem;
	background: url( "img/eu-emblem.svg" ) center/contain no-repeat;
}

.sbgn-label__ids {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0.9rem 0;
	font-size: 0.95rem;
}

.sbgn-label__main {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: end;
	gap: 0.5rem;
	padding: 0.25rem 0.9rem 0.9rem;
}

/*
 * Annex II note 3 sets this at 80pt against a 95mm label, roughly 30% of the
 * label width. clamp() holds that proportion instead of a fixed size, so the
 * number stays dominant on a phone as the annex intends.
 */
.sbgn-label__years {
	font-size: clamp(3.5rem, 20vw, 6rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
}

.sbgn-label__cal {
	width: 3rem;
	height: 3rem;
	background: url( "img/calendar.svg" ) center/contain no-repeat;
	/* The "365" is part of the official symbol artwork, so the text node is
	   hidden rather than removed: it stays available to assistive tech. */
	text-indent: -9999px;
	overflow: hidden;
	margin-bottom: 0.5rem;
}

.sbgn-label__main .sbgn-qr {
	justify-self: end;
	display: block;
	width: 6.5rem;
	max-width: 100%;
}

.sbgn-label__langs {
	border-top: 2px solid var(--sbgn-black);
	padding: 0.6rem 0.9rem;
	font-size: 0.72rem;
	line-height: 1.5;
	margin: 0;
}

.sbgn-label__lang:not(:last-child)::after {
	content: " | ";
	color: var(--sbgn-rule);
}

.sbgn-qr svg {
	display: block;
	width: 100%;
	height: auto;
	image-rendering: pixelated;
}

/* ------------------------------------------------------------- reflow */

/*
 * The notice reflows on its own now, via auto-fit and flex-wrap, so it needs
 * no rule here. Only the label does, because its three columns are sized by
 * content rather than by fraction.
 */
@media ( max-width: 640px ) {
	.sbgn-label__main {
		grid-template-columns: auto auto;
	}

	.sbgn-label__main .sbgn-qr {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

/*
 * Print: the annex allows black and white only for contracts other than those
 * concluded through an online interface. A printed page is exactly that case,
 * so dropping the blue here is permitted rather than a shortcut.
 */
@media print {
	.sbgn__head {
		background: var(--sbgn-white);
		border-bottom: 2px solid var(--sbgn-black);
	}

	.sbgn__title {
		color: var(--sbgn-black);
	}
}

/* Settings screen. Moved out of an inline <style> in class-sbgn-settings.php
   so it is enqueued properly, per WordPress.org review 28 Aug 2026. */
.sbgn-admin{
			--ink:#16202A; --ink2:#33454F; --muted:#5C6E79; --line:#E2E8ED; --line2:#EDF1F4;
			--card:#fff; --eu:#003399; --eu-soft:#EAEFF9; --gold:#B8901B;
			max-width:1180px; margin:0; padding:0 20px 40px 0; color:var(--ink);
			font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
		}
		.sbgn-admin *{box-sizing:border-box}
		.sbgn-admin h1,.sbgn-admin h2,.sbgn-admin h3,.sbgn-admin p{margin:0;padding:0}

		.sbgn-mast{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 24px;padding:26px 0 22px}
		.sbgn-mast__id{flex:1 1 380px;min-width:0}
		.sbgn-mast h1{font-size:23px;line-height:1.25;font-weight:640;letter-spacing:-.017em}
		.sbgn-admin .sbgn-mast__line{margin-top:7px;max-width:62ch;color:var(--muted)}
		.sbgn-state{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;padding:7px 13px 7px 11px;
			border:1px solid #BFCDE8;border-radius:999px;background:var(--eu-soft);
			font-size:12.5px;font-weight:560;color:#12295E;white-space:nowrap}
		.sbgn-state__dot{width:7px;height:7px;border-radius:50%;background:var(--eu);flex:0 0 auto}

		.sbgn-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px}
		.sbgn-h2{font-size:12px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

		.sbgn-admin .sbgn-count{margin-top:14px;font-size:38px;font-weight:650;letter-spacing:-.025em;line-height:1;
			font-variant-numeric:tabular-nums}
		.sbgn-admin .sbgn-count__sub{margin-top:8px;font-size:15px;color:var(--ink2);max-width:52ch}
		/* Goods against exclusions. Hatched means correctly out of scope, not missing. */
		.sbgn-bar{display:flex;height:16px;margin-top:18px;border-radius:6px;overflow:hidden;
			border:1px solid var(--line);background:#F7F9FA}
		.sbgn-bar__seg{display:block;height:100%}
		.sbgn-bar__seg--goods{background:var(--eu);border-right:2px solid var(--ink)}
		.sbgn-bar__seg--out{background:repeating-linear-gradient(135deg,#DDE3EC 0 5px,#F1F4F8 5px 11px)}
		.sbgn-keys{display:flex;flex-wrap:wrap;gap:22px;margin-top:13px}
		.sbgn-key{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;color:var(--muted)}
		.sbgn-key::before{content:"";width:9px;height:9px;border-radius:2px;flex:0 0 auto}
		.sbgn-key--goods::before{background:var(--eu)}
		.sbgn-key--out::before{background:repeating-linear-gradient(135deg,#CBD4E2 0 3px,#EDF1F6 3px 6px);border:1px solid #D5DCE6}
		.sbgn-admin .sbgn-note{margin-top:20px;color:var(--ink2);max-width:70ch}
		.sbgn-admin .sbgn-note + .sbgn-note{margin-top:9px;padding-top:0;border-top:0}
		.sbgn-admin .sbgn-when{margin-top:18px;color:var(--muted);max-width:70ch}
		.sbgn-when strong{color:var(--ink);font-weight:640}

		.sbgn-form{margin-top:18px}
		.sbgn-preview{margin-top:18px}
		.sbgn-preview__head{display:flex;align-items:center;gap:10px}
		.sbgn-tag{font-size:10.5px;font-weight:640;letter-spacing:.05em;text-transform:uppercase;
			padding:3px 8px;border-radius:5px;background:var(--eu-soft);color:#12295E}
		.sbgn-admin .sbgn-preview__meta{margin-top:6px;color:var(--muted);font-size:13px;max-width:70ch}
		/* A neutral ground, so the notice is judged on its own and not on this screen. */
		.sbgn-preview__stage{margin-top:16px;padding:22px;border:1px solid var(--line);border-radius:10px;
			background:#F7F9FA}
		.sbgn-pro{margin-top:18px}
		.sbgn-admin .sbgn-pro__lead{margin-top:11px;font-size:14.5px;line-height:1.5;color:var(--ink)}
		.sbgn-admin .sbgn-pro__body{margin-top:8px;color:var(--ink2);max-width:74ch}
		.sbgn-pro__cols{display:flex;gap:34px;align-items:flex-start;margin-top:14px;flex-wrap:wrap}
		.sbgn-pro__cols > div:first-child{flex:1 1 340px;min-width:0}
		.sbgn-pro__buy{flex:0 0 auto;padding-left:26px;border-left:1px solid var(--line2)}
		@media (max-width:760px){.sbgn-pro__buy{padding-left:0;border-left:0}}
		.sbgn-pro__list{margin:0;display:flex;flex-direction:column;gap:8px;list-style:none;padding:0}
		.sbgn-pro__list li{position:relative;padding-left:19px;color:var(--ink2);font-size:13.4px;line-height:1.45}
		.sbgn-pro__list li::before{content:"";position:absolute;left:1px;top:6px;width:8px;height:8px;
			border-radius:2px;background:var(--eu)}
		.sbgn-admin .sbgn-pro__price{margin-top:2px;font-size:13.5px;color:var(--muted)}
		.sbgn-admin .sbgn-pro__price strong{font-size:22px;color:var(--ink);font-weight:650;letter-spacing:-.02em}
		.sbgn-admin .sbgn-buy{display:inline-block;margin-top:11px;padding:10px 19px;border-radius:8px;
			background:var(--eu);color:#fff;text-decoration:none;font-weight:600;font-size:14px}
		.sbgn-admin .sbgn-buy:hover,.sbgn-admin .sbgn-buy:focus{background:#00256E;color:#fff}
		.sbgn-pro__have{margin-top:17px;padding-top:14px;border-top:1px solid var(--line2)}
		.sbgn-pro__have summary{cursor:pointer;color:var(--muted);font-size:13px}
		.sbgn-pro__form{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;align-items:center}
		.sbgn-admin .sbgn-key{flex:1 1 190px;min-width:0;height:34px;padding:0 10px;border:1px solid #CBD5DB;
			border-radius:7px;font-size:13.5px;box-shadow:none}
		.sbgn-admin .sbgn-pro__err{margin-top:9px;color:#B3261E;font-size:12.8px}
		.sbgn-admin .sbgn-linkbtn{background:none;border:0;padding:0;margin:14px 0 0;color:var(--muted);
			text-decoration:underline;cursor:pointer;font-size:12.8px}
		.sbgn-log{margin:14px 0 0;padding:0;list-style:none}
		.sbgn-log__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
			padding:9px 0;border-bottom:1px solid var(--line2);font-size:13.4px}
		.sbgn-log__row:last-child{border-bottom:0}
		.sbgn-log__when{color:var(--muted);font-variant-numeric:tabular-nums}
		.sbgn-log__what{color:var(--ink2)}
		.sbgn-log__row--missing .sbgn-log__what{color:#B3261E;font-weight:620}
		.sbgn-log__row--present .sbgn-log__what{color:#0B6B45}
		.sbgn-panel--form{padding:0 24px}
		.sbgn-sec{display:grid;grid-template-columns:236px minmax(0,1fr);gap:34px;padding:26px 0;border-top:1px solid var(--line2)}
		.sbgn-sec:first-child{border-top:0}
		@media (max-width:900px){.sbgn-sec{grid-template-columns:1fr;gap:14px}}
		.sbgn-sec__head h3{margin:0;font-size:14.5px;font-weight:620;line-height:1.35}
		.sbgn-admin .sbgn-sec__head p{margin-top:5px;font-size:12.8px;color:var(--muted)}
		.sbgn-sec__body{min-width:0}
		.sbgn-admin .sbgn-desc{margin-top:11px;font-size:12.8px;color:var(--muted);max-width:64ch;line-height:1.5}

		.sbgn-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:11px 0}
		.sbgn-row + .sbgn-row{border-top:1px solid var(--line2)}
		.sbgn-row:first-child{padding-top:0}
		.sbgn-row__label{display:block;font-weight:560;cursor:pointer}
		.sbgn-admin .sbgn-row__note{margin-top:3px;font-size:12.8px;color:var(--muted);max-width:60ch}

		input[type=checkbox].sbgn-toggle{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;
			width:40px;min-width:40px;height:23px;margin:1px 0 0;padding:0;border:0;border-radius:999px;
			background:#C6D0D7;cursor:pointer;transition:background .15s ease;box-shadow:none}
		input[type=checkbox].sbgn-toggle::before{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;
			margin:0;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,32,42,.34);transition:transform .15s ease}
		input[type=checkbox].sbgn-toggle:checked{background:var(--eu)}
		input[type=checkbox].sbgn-toggle:checked::before{transform:translateX(17px)}
		input[type=checkbox].sbgn-toggle:focus{outline:2px solid var(--ink);outline-offset:2px;box-shadow:none}

		.sbgn-admin .sbgn-sec__body select,.sbgn-admin .sbgn-sec__body input[type=text]{height:36px;padding:0 11px;
			border:1px solid #CBD5DB;border-radius:7px;background:#fff;color:var(--ink);font-size:14px;box-shadow:none}
		.sbgn-admin .sbgn-sec__body select{min-width:280px}
		.sbgn-admin .sbgn-sec__body input[type=text]{width:90px;font-variant-numeric:tabular-nums}
		.sbgn-admin .sbgn-sec__body select:focus,.sbgn-admin .sbgn-sec__body input[type=text]:focus{
			border-color:var(--ink);outline:2px solid rgba(22,32,42,.14);box-shadow:none}

		.sbgn-save{display:flex;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--line2)}
		.sbgn-admin .sbgn-save .button-primary{height:38px;padding:0 20px;border-radius:8px;font-size:14px;font-weight:560}
		.sbgn-admin .sbgn-save__hint{font-size:12.8px;color:var(--muted)}

/* GARAN label repeated immediately before "place order" (Dir. 2011/83 art. 8(2)). */
.sbgn-checkout-label { margin: 0 0 1.25em; }
.sbgn-checkout-label__for { margin: 0 0 .4em; font-weight: 600; }

/* Themes (e.g. Elementor kits) force their own heading font on h2/h3 with
   higher specificity. The annex artwork is set in a plain sans-serif (Inter),
   so every text element of the notice and label is pinned to it. */
.sbgn h2, .sbgn h3, .sbgn p, .sbgn li, .sbgn span,
.sbgn-label span, .sbgn-label b, .sbgn-label figcaption {
	font-family: Inter, "Inter var", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	text-transform: none;
}
.sbgn h2.sbgn__title { text-transform: uppercase; }
.sbgn__garan { display: inline-flex; align-items: center; gap: 0.25rem; }

/* drsoil 1.3.0.2: the notice is sized as ONE block from the container, so it
   scales with the shop's own text instead of the theme's paragraph size. Online
   the regulation fixes no dimensions (Annex I note 5: colour only); the QR code
   stays at a size a phone can scan. Adjust with --sbgn-size if needed. */
.sbgn { --sbgn-size: 13px; font-size: var(--sbgn-size) !important; line-height: 1.45; }
.sbgn p, .sbgn li { font-size: 1em !important; line-height: 1.45 !important; margin-bottom: .55em; }
.sbgn h2.sbgn__title { font-size: 1.75em !important; line-height: 1.05 !important; }
.sbgn .sbgn__lead { font-size: 1.12em !important; }
.sbgn .sbgn__side, .sbgn .sbgn__side p { font-size: .95em !important; }
.sbgn .sbgn__qrcaption { font-size: .8em !important; }
.sbgn .sbgn__todo h3 { font-size: 1.35em !important; line-height: 1.15 !important; }
.sbgn .sbgn__todosub { font-size: 1.05em !important; }
.sbgn .sbgn__garan { font-size: 1.2em !important; }
.sbgn .sbgn__emblem { width: 40px; height: 48px; }
.sbgn .sbgn-qr svg { width: 110px !important; height: 110px !important; }

/* Full-width placement under the description: the annex's own landscape layout,
   main text on the left, the grey QR panel on the right. */
.sbgn-wide { margin: 2.5em 0 1em; }
.sbgn-wide .sbgn { max-width: 860px; margin: 0 auto; --sbgn-size: 14px; }
@media ( min-width: 700px ) {
	.sbgn-wide .sbgn__body { grid-template-columns: 1.55fr 1fr; gap: 1.75rem; padding: 1.5rem 1.75rem; }
	.sbgn-wide .sbgn__todo, .sbgn-wide .sbgn__foot { padding-left: 1.75rem; padding-right: 1.75rem; }
}

/* drsoil 1.3.0.3: short visible mention that opens the full notice. */
.sbgn-mention { margin: 1em 0; }
.sbgn-mention__btn {
	display: flex; align-items: center; gap: .6em; width: 100%; text-align: left; cursor: pointer;
	background: #fff; color: #000; border: 1px solid #003399; border-left: 6px solid #003399;
	padding: .6em .8em; font: 14px/1.35 Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	text-transform: none !important; letter-spacing: 0 !important; border-radius: 0;
}
.sbgn-mention__btn:hover, .sbgn-mention__btn:focus { background: #f2f5fb; color: #000; }
.sbgn-mention__emblem { flex: 0 0 28px; height: 28px; background: #003399 url( "img/eu-emblem.svg" ) center/22px no-repeat; }
.sbgn-mention__text { flex: 1 1 auto; }
.sbgn-mention__more { flex: 0 0 auto; color: #003399; font-weight: 700; font-size: .85em; white-space: nowrap; }
.sbgn-dialog { border: 0; padding: 0; width: min(920px, 95vw); max-height: 92vh; overflow: auto; background: transparent; }
.sbgn-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.sbgn-dialog .sbgn-wide { margin: 0; }
.sbgn-dialog .sbgn { max-width: none; }
.sbgn-dialog__close {
	position: sticky; top: 0; float: right; z-index: 2; margin: 0 0 -44px; width: 44px; height: 44px;
	border: 0; background: transparent; color: #fff; font: 700 30px/1 Arial, sans-serif; cursor: pointer;
}
/* dialog: the notice scrolls inside, the close button stays in the blue bar */
.sbgn-dialog { overflow: hidden; max-width: 95vw; }
.sbgn-dialog[open] { display: block; }
.sbgn-dialog .sbgn-wide { max-height: 92vh; overflow-y: auto; overflow-x: hidden; }
.sbgn-dialog .sbgn, .sbgn-dialog .sbgn * { max-width: 100%; }
.sbgn-dialog .sbgn { width: 100%; }
.sbgn-dialog .sbgn__body { grid-template-columns: 1fr; }
@media ( min-width: 700px ) { .sbgn-dialog .sbgn__body { grid-template-columns: 1.55fr 1fr; } }
.sbgn-dialog .sbgn__title { padding-right: 44px; }
.sbgn-dialog__close {
	position: absolute !important; top: 6px !important; right: 6px !important; float: none !important; margin: 0 !important;
	width: 40px !important; height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
	background: transparent !important; color: #fff !important; font: 700 30px/40px Arial, sans-serif !important; box-shadow: none !important;
}
/* the theme styles every <button>; pin the mention's own look */
.sbgn-mention .sbgn-mention__btn {
	display: flex !important; align-items: center !important; gap: .6em !important; width: 100% !important; height: auto !important;
	white-space: normal !important; text-align: left !important; background: #fff !important; color: #000 !important;
	border: 1px solid #003399 !important; border-left: 6px solid #003399 !important; border-radius: 0 !important;
	padding: .55em .75em !important; box-shadow: none !important;
	font: 400 14px/1.35 Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
.sbgn-mention .sbgn-mention__btn:hover, .sbgn-mention .sbgn-mention__btn:focus { background: #f2f5fb !important; color: #000 !important; }
.sbgn-mention .sbgn-mention__text { color: #000 !important; }
.sbgn-mention .sbgn-mention__more { color: #003399 !important; font-weight: 700 !important; }
@media ( max-width: 480px ) { .sbgn-mention .sbgn-mention__more { display: none; } }
/* narrow product column: the "GARANȚIA LEGALĂ ›" cue goes under the sentence */
.sbgn-mention .sbgn-mention__btn { flex-wrap: wrap !important; }
.sbgn-mention .sbgn-mention__text { flex: 1 1 calc(100% - 40px) !important; }
.sbgn-mention .sbgn-mention__more { flex: 1 1 100% !important; padding-left: calc(28px + .6em); font-size: .8em !important; display: block !important; }