/* ==========================================================================
   Accessibility toolbar — native widget (port of theme_monika's a11y.css,
   recolored for the Lumiprint brand). The floating trigger sits bottom-right;
   effects are scoped to page content (.site-header/main/.site-footer) so the
   toolbar UI itself always stays readable. The drawer deliberately stays
   LIGHT for maximum legibility regardless of page theme.
   ========================================================================== */

/* ---------- Floating trigger button (bottom-right) ---------- */
.a11y-fab {
	/* right-middle edge — the bottom-right corner belongs to the livechat bubble */
	position: fixed; right: 14px; top: 50%; bottom: auto; transform: translateY(-50%);
	z-index: 1900;
	width: 54px; height: 54px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #F26B4E, #FFB25E); color: #fff; border: 0; cursor: pointer;
	box-shadow: 0 8px 26px -6px rgba(242, 107, 78, 0.55);
	transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s cubic-bezier(0.22,1,0.36,1);
}
.a11y-fab:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 32px -6px rgba(242, 107, 78, 0.65); }
.a11y-fab:focus-visible { outline: 3px solid #1F2130; outline-offset: 3px; }
.a11y-fab svg { width: 28px; height: 28px; display: block; }
.a11y.is-open ~ .a11y-fab, .a11y-fab.is-hidden { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
	.a11y-fab { right: 14px; bottom: 14px; width: 48px; height: 48px; }
	.a11y-fab svg { width: 26px; height: 26px; }
}

/* ---------- Panel / drawer ---------- */
.a11y[hidden] { display: none; }
.a11y { position: fixed; inset: 0; z-index: 2000; }
.a11y__backdrop { position: absolute; inset: 0; background: rgba(4,4,10,0.55); opacity: 0; transition: opacity 0.3s ease; }
.a11y.is-open .a11y__backdrop { opacity: 1; }
.a11y__drawer {
	position: absolute; top: 0; right: 0; height: 100%;
	width: min(380px, 92vw);
	background: #fff; color: #1F2130;
	box-shadow: -24px 0 60px -30px rgba(0,0,0,0.7);
	display: flex; flex-direction: column;
	transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
	font-family: "Inter", system-ui, sans-serif;
}
.a11y.is-open .a11y__drawer { transform: translateX(0); }

.a11y__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: linear-gradient(90deg, #F26B4E, #FFB25E); color: #fff; }
.a11y__title { font-size: 18px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; color: #fff; font-family: inherit; }
.a11y__title-icon { font-size: 20px; }
.a11y__close { background: rgba(255,255,255,0.18); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 8px; font-size: 22px; line-height: 1; cursor: pointer; }
.a11y__close:hover { background: rgba(255,255,255,0.32); }

.a11y__body { padding: 16px 20px 8px; overflow-y: auto; flex: 1; }
.a11y__group-title { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8A7B6C; margin: 14px 2px 8px; }
.a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.a11y-box {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	min-height: 92px; padding: 12px 8px; text-align: center;
	background: #FAF6F1; border: 2px solid transparent; border-radius: 12px;
	color: #1F2130; font-size: 12.5px; font-weight: 600; cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.a11y-box:hover { background: #F3ECE4; }
.a11y-box:focus-visible { outline: 3px solid #F26B4E; outline-offset: 2px; }
.a11y-box__icon { font-size: 22px; line-height: 1; color: #F26B4E; }
.a11y-box__label { line-height: 1.25; }
.a11y-box[aria-pressed="true"] { background: #fff; border-color: #F26B4E; box-shadow: 0 6px 18px -10px rgba(242,107,78,0.6); }

.a11y-box__dots { display: flex; gap: 4px; height: 6px; }
.a11y-box__dots i { width: 6px; height: 6px; border-radius: 50%; background: #E7DCD1; display: inline-block; }
.a11y-box__dots i.on { background: #FFB25E; }

.a11y__foot { padding: 14px 20px 20px; border-top: 1px solid rgba(23,23,31,0.1); }
.a11y__reset { width: 100%; padding: 12px; border-radius: 999px; border: 1.5px solid rgba(31,33,48,0.25); background: #fff; color: #1F2130; font-weight: 600; cursor: pointer; }
.a11y__reset:hover { background: #1F2130; color: #fff; border-color: #1F2130; }

/* ==========================================================================
   EFFECTS — applied via classes on <html>, scoped to content containers.
   ========================================================================== */
:root { --a11y-fs: 1; }
html { font-size: calc(100% * var(--a11y-fs, 1)); }

/* Line height */
.a11y-lh-on :is(main, .site-footer) :is(p, li, dd, dt, blockquote, .prose) {
	line-height: var(--a11y-lh, 1.9) !important;
}
/* Letter spacing */
.a11y-ls-on :is(.site-header, main, .site-footer) :is(p, li, a, span, h1, h2, h3, h4) {
	letter-spacing: var(--a11y-ls, 0.08em) !important;
}
/* Readable font */
.a11y-readable :is(.site-header, main, .site-footer),
.a11y-readable :is(.site-header, main, .site-footer) * {
	font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important;
	letter-spacing: 0.01em;
}

/* High contrast (black) */
.a11y-contrast-high :is(.site-header, main, .site-footer),
.a11y-contrast-high :is(.site-header, main, .site-footer) * {
	background-color: #000 !important; background-image: none !important;
	color: #fff !important; border-color: #fff !important; text-shadow: none !important; box-shadow: none !important;
	-webkit-background-clip: border-box !important; background-clip: border-box !important;
}
.a11y-contrast-high :is(main, .site-footer) a { color: #ffe600 !important; text-decoration: underline !important; }
.a11y-contrast-high .btn { border: 2px solid #fff !important; }

/* Light / high-readability contrast (the useful one on a dark theme) */
.a11y-contrast-light :is(.site-header, main, .site-footer),
.a11y-contrast-light :is(.site-header, main, .site-footer) * {
	background-color: #fff !important; background-image: none !important;
	color: #111 !important; text-shadow: none !important; box-shadow: none !important;
	-webkit-background-clip: border-box !important; background-clip: border-box !important;
}
.a11y-contrast-light :is(main, .site-footer) a { color: #0a58ca !important; text-decoration: underline !important; }
.a11y-contrast-light .btn { border: 2px solid #111 !important; }

/* Grayscale */
.a11y-grayscale .site-header,
.a11y-grayscale main,
.a11y-grayscale .site-footer { filter: grayscale(1) !important; }

/* Highlight links */
.a11y-links :is(main, .site-footer) a {
	outline: 2px solid #1F2130 !important; outline-offset: 2px;
	text-decoration: underline !important; text-underline-offset: 3px;
	background: rgba(34,211,238,0.1) !important;
}

/* Hide images */
.a11y-hideimg :is(.site-header, main, .site-footer) img { visibility: hidden !important; }
.a11y-hideimg :is(.hero__media, .product-card__media, .masonry__item, .gallery-strip__item) { background: #1c1c2e !important; }
.a11y-hideimg .hero__media img { display: none !important; }

/* Big cursor */
.a11y-cursor, .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='M8 4l30 18-14 3-6 15z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}

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

/* Center text */
.a11y-align :is(main, .site-footer) :is(p, li, h1, h2, h3, h4, blockquote, .prose, .page-hero__title) {
	text-align: center !important;
}

/* Font weight (bolder text) */
.a11y-bold :is(.site-header, main, .site-footer) :is(p, li, a, span, dd, dt, blockquote, button, h1, h2, h3, h4) {
	font-weight: 700 !important;
}

/* Highlight content — outline the block under the pointer */
.a11y-highlight :is(main, .site-footer) :is(p, li, h1, h2, h3, h4, blockquote, figure, article, .glass-card, .product-card):hover {
	outline: 3px solid #1F2130 !important; outline-offset: 3px;
	background: rgba(34, 211, 238, 0.07) !important;
}

/* Reading guide line + reading mask — follow the cursor (--a11y-cursor-y). */
.a11y-readline-el, .a11y-readmask-el { display: none; position: fixed; left: 0; right: 0; pointer-events: none; }
.a11y-readline-el {
	top: var(--a11y-cursor-y, 50%); height: 4px; transform: translateY(-50%);
	background: linear-gradient(90deg, #F26B4E, #FFB25E, #1F2130);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.5); z-index: 1850;
}
.a11y-readmask-el {
	top: var(--a11y-cursor-y, 50%); height: 130px; transform: translateY(-50%);
	box-shadow: 0 0 0 100vmax rgba(0,0,0,0.72); border-radius: 4px; z-index: 1840;
}
html.a11y-readline .a11y-readline-el { display: block; }
html.a11y-readmask .a11y-readmask-el { display: block; }

/* Drag handle for touch devices (no cursor to follow there). */
.a11y-drag-handle {
	display: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff;
	background: #F26B4E; color: #fff; font-size: 1.4rem; line-height: 1;
	align-items: center; justify-content: center;
	pointer-events: auto; touch-action: none; cursor: grab;
	box-shadow: 0 6px 18px -4px rgba(124, 58, 237, 0.8);
}
.a11y-drag-handle:active { cursor: grabbing; background: #FFB25E; }
@media (pointer: coarse) {
	html.a11y-readline .a11y-readline-el .a11y-drag-handle,
	html.a11y-readmask .a11y-readmask-el .a11y-drag-handle { display: flex; }
}

@media (max-width: 480px) {
	.a11y__drawer { width: 100vw; }
}