/* ===== Skip link ===== */
.ds-skip { position: absolute; top: -100px; right: 12px; z-index: 10000; background: #111; color: #fff; padding: 12px 18px; border-radius: 0 0 10px 10px; font-weight: 700; text-decoration: none; }
.ds-skip:focus { top: 0; outline: 3px solid #ffbf00; outline-offset: 2px; }

/* keyboard focus is always visible */
:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }

/* ===== Floating WhatsApp ===== */
.ds-wa { position: fixed; bottom: 20px; z-index: 9998; display: inline-flex; align-items: center; gap: 8px; height: 56px; min-width: 56px; padding: 0 13px; border-radius: 28px; background: #25d366; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transition: transform .15s ease, box-shadow .15s ease; }
.ds-wa--left { left: 20px; }
.ds-wa--right { right: 20px; }
.ds-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .26); color: #fff; }
.ds-wa svg { flex: 0 0 auto; }
.ds-wa__label { padding-inline-end: 4px; }

/* ===== Accessibility toolbar ===== */
.ds-a11y { position: fixed; bottom: 20px; z-index: 9999; direction: rtl; font-family: Arial, "Heebo", sans-serif; }
.ds-a11y--left { left: 20px; }
.ds-a11y--right { right: 20px; }
.ds-a11y__toggle { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; background: #0a58ca; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.ds-a11y__toggle:hover { background: #084298; }
.ds-a11y__toggle.is-active::after { content: ""; position: absolute; top: 2px; inset-inline-end: 2px; width: 14px; height: 14px; border-radius: 50%; background: #ffbf00; border: 2px solid #fff; }
.ds-a11y__panel { position: absolute; bottom: 68px; width: 330px; max-width: calc(100vw - 24px); max-height: calc(100vh - 110px); overflow: auto; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .3); border: 1px solid #d0d4da; }
.ds-a11y--left .ds-a11y__panel { left: 0; }
.ds-a11y--right .ds-a11y__panel { right: 0; }
.ds-a11y__panel[hidden] { display: none; }
.ds-a11y__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #0a58ca; color: #fff; border-radius: 14px 14px 0 0; }
.ds-a11y__head h2 { margin: 0; font-size: 18px; color: #fff; }
.ds-a11y__close { background: transparent; border: 0; color: #fff; font-size: 20px; width: 36px; height: 36px; cursor: pointer; border-radius: 8px; }
.ds-a11y__close:hover { background: rgba(255, 255, 255, .18); }
.ds-a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.ds-a11y__opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 74px; padding: 8px 6px; background: #f3f5f8; color: #111; border: 2px solid #f3f5f8; border-radius: 10px; font: 600 14px/1.25 Arial, "Heebo", sans-serif; cursor: pointer; text-align: center; }
.ds-a11y__opt:hover { border-color: #0a58ca; }
.ds-a11y__opt[aria-pressed="true"] { background: #e7f0ff; border-color: #0a58ca; color: #0a3a8a; }
.ds-a11y__opt[disabled] { opacity: .45; cursor: not-allowed; }
.ds-a11y__ico { font-size: 20px; line-height: 1; font-weight: 800; }
.ds-a11y__status { margin: 0 12px; min-height: 1px; font-size: 13px; color: #374151; }
.ds-a11y__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 14px; }
.ds-a11y__reset { background: #111; color: #fff; border: 0; border-radius: 8px; padding: 10px 14px; font: 700 14px Arial, "Heebo", sans-serif; cursor: pointer; }
.ds-a11y__foot a { color: #0a58ca; font-weight: 700; text-decoration: underline; }

/* mobile: sit above the bottom navigation bar */
@media (max-width: 860px) {
	.ds-a11y, .ds-wa { bottom: calc(76px + env(safe-area-inset-bottom)); }
	.ds-a11y--left, .ds-wa--left { left: 12px; }
	.ds-a11y--right, .ds-wa--right { right: 12px; }
	.ds-a11y__toggle, .ds-wa { width: 50px; height: 50px; min-width: 50px; }
	.ds-wa { padding: 0; justify-content: center; }
	.ds-wa__label { display: none; }
	.ds-a11y__panel { bottom: 60px; }
}
/* configurator page has its own sticky bar at the bottom */
body:has(.ds-grass__sticky:not([hidden])) .ds-a11y,
body:has(.ds-grass__sticky:not([hidden])) .ds-wa { bottom: 150px; }

/* ===== Adjustments (classes on <html>, set by a11y.js) ===== */
/* page content only – never the toolbar itself */
html[class*="a11y-fs-"] body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter, .ds-skip) { zoom: var(--a11y-zoom); }
html.a11y-fs-1 { --a11y-zoom: 1.15; }
html.a11y-fs-2 { --a11y-zoom: 1.3; }
html.a11y-fs-3 { --a11y-zoom: 1.45; }
html.a11y-fs-4 { --a11y-zoom: 1.6; }
html[class*="a11y-fs-"] body { overflow-x: hidden; }

/* grayscale / inverted contrast: a fixed overlay with backdrop-filter keeps fixed & sticky elements working */
.ds-a11y-filter { display: none; position: fixed; inset: 0; z-index: 9990; pointer-events: none; }
html.a11y-gray .ds-a11y-filter, html.a11y-invert .ds-a11y-filter { display: block; }
html.a11y-gray .ds-a11y-filter { backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1); }
html.a11y-invert .ds-a11y-filter { backdrop-filter: invert(1) hue-rotate(180deg); -webkit-backdrop-filter: invert(1) hue-rotate(180deg); }
html.a11y-gray.a11y-invert .ds-a11y-filter { backdrop-filter: grayscale(1) invert(1); -webkit-backdrop-filter: grayscale(1) invert(1); }

/* high contrast: black background, white text, yellow links */
html.a11y-contrast body,
html.a11y-contrast body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter),
html.a11y-contrast body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) * { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; }
html.a11y-contrast body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) a,
html.a11y-contrast body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) a * { color: #ffff00 !important; }
html.a11y-contrast body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) button,
html.a11y-contrast body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) .button,
html.a11y-contrast body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) input,
html.a11y-contrast body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) select,
html.a11y-contrast body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) textarea { border: 2px solid #fff !important; }
html.a11y-contrast body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) img { background-color: #fff !important; }

/* highlight links */
html.a11y-links body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) a { text-decoration: underline !important; text-underline-offset: 3px; outline: 2px dashed #e30613; outline-offset: 2px; }

/* highlight headings */
html.a11y-headings body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) :is(h1, h2, h3, h4, h5, h6) { outline: 2px solid #0a58ca; outline-offset: 3px; background-color: #e7f0ff; color: #0a3a8a !important; }
html.a11y-contrast.a11y-headings body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) :is(h1, h2, h3, h4, h5, h6) { color: #00ffff !important; outline-color: #00ffff; }

/* readable font */
html.a11y-font body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter),
html.a11y-font body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) * { font-family: Arial, Helvetica, sans-serif !important; }

/* text spacing (WCAG 1.4.12 values) */
html.a11y-spacing body > :not(.ds-a11y, .ds-wa, .ds-a11y-filter) :is(p, li, a, span, td, th, label, h1, h2, h3, h4, h5, h6, div) { letter-spacing: .12em !important; word-spacing: .16em !important; line-height: 1.6 !important; }

/* big cursor */
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l30 22-13 2 8 16-6 3-8-16-11 9z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 6 3, auto !important; }

/* stop animations */
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* strong keyboard focus */
html.a11y-focus :focus { outline: 4px solid #ffbf00 !important; outline-offset: 2px !important; box-shadow: 0 0 0 7px #111 !important; }

@media (prefers-reduced-motion: reduce) {
	.ds-wa { transition: none; }
}
@media print { .ds-a11y, .ds-wa, .ds-a11y-filter, .ds-skip { display: none !important; } }