/* Legal guarantee (/retlig-garanti), .lg-*. Load shop-base.css first.
   The notice is the EU's official image (A4), shown clickable at full column width.
   Margins use .lg .lg-* (two classes), because theme.css sets margins on h1 and p. */

.lg-wrap { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 760px; margin: 0 auto; padding: 28px 15px 44px; }
.lg .lg-h1 { margin: 0; font-size: 28px; font-weight: 500; line-height: 1.15; color: var(--sk-ink); letter-spacing: -.01em; text-wrap: balance; }
.lg .lg-intro { margin: 0; font-size: 16px; line-height: 1.55; color: var(--sk-text); max-width: 65ch; text-wrap: pretty; }
.lg .lg-notice { margin: 6px 0 0; }
.lg-notice a { display: block; border-radius: var(--sk-radius); outline-offset: 4px; }
.lg-notice img { width: 100%; height: auto; display: block; border: 1px solid var(--sk-line); border-radius: var(--sk-radius); background: #fff; }
.lg-links { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.lg-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.lg-ic { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--sk-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.lg-link:hover .lg-ic { transform: translateX(3px); }

@media (min-width: 768px) {
	.lg-wrap { gap: 22px; padding: 48px 15px 64px; }
	.lg .lg-h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
	.lg-ic { transition: none; }
}