/* Le-Biko — Accessibility menu and what each preference does. */

/* ==========================================================================
   Accessibility menu (button + panel)
   ========================================================================== */
.lb-a11y { position: fixed; z-index: 55; left: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); font-family: var(--lb-font-body); }
.lb-a11y[style*="top"] { bottom: auto; }
.lb-a11y__toggle {
	position: relative; width: 40px; height: 40px; display: grid; place-items: center;
	border: 2px solid #fff; border-radius: 50%; background: #1a1a1a; color: #fff; cursor: grab;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
	touch-action: none; /* lets the button be dragged on touch screens */
	-webkit-user-select: none; user-select: none;
}
.lb-a11y__toggle:hover { background: #3a3734; }
.lb-a11y__toggle:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
.lb-a11y__toggle.is-active::after { content: ""; position: absolute; top: -2px; inset-inline-start: -2px; width: 11px; height: 11px; border-radius: 50%; background: #2f8f4e; border: 2px solid #fff; }
.lb-a11y__panel {
	position: fixed; /* placed by a11y.js, always inside the window */
	width: min(300px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
	padding: 10px 14px 12px; background: #fff; color: #1a1a1a;
	border: 1px solid #d6d2cc; border-radius: 6px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
	font-size: 15px; font-weight: 400; line-height: 1.4;
}
.lb-a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.lb-a11y__title { margin: 0; font-size: 17px; font-weight: 500; }
.lb-a11y__title:focus { outline: none; }
.lb-a11y__title:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.lb-a11y__close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: #1a1a1a; border-radius: 4px; margin-inline-end: -10px; }
.lb-a11y__close:focus-visible, .lb-a11y__btn:focus-visible, .lb-a11y__option:focus-visible, .lb-a11y__reset:focus-visible, .lb-a11y__link:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.lb-a11y__group { padding: 8px 0 10px; border-bottom: 1px solid #e4e1dc; }
.lb-a11y__label { display: block; margin-bottom: 8px; font-weight: 500; }
.lb-a11y__size { display: flex; align-items: center; gap: 10px; }
.lb-a11y__btn { min-width: 52px; min-height: 44px; border: 1px solid #1a1a1a; border-radius: 4px; background: #fff; color: #1a1a1a; font: inherit; font-weight: 500; cursor: pointer; }
.lb-a11y__btn:disabled { opacity: .4; cursor: not-allowed; }
.lb-a11y__level { flex: 1; text-align: center; font-variant-numeric: tabular-nums; }
.lb-a11y__list { list-style: none; margin: 8px 0 0; padding: 0; }
.lb-a11y__option {
	display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px;
	border: 0; border-bottom: 1px solid #f0eeea; background: none; color: #1a1a1a; font: inherit; text-align: start; cursor: pointer;
}
.lb-a11y__check { flex: none; width: 20px; height: 20px; border: 2px solid #1a1a1a; border-radius: 4px; display: grid; place-items: center; }
.lb-a11y__option[aria-pressed="true"] { font-weight: 500; }
.lb-a11y__option[aria-pressed="true"] .lb-a11y__check { background: #1a1a1a; }
.lb-a11y__option[aria-pressed="true"] .lb-a11y__check::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.lb-a11y__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.lb-a11y__reset { min-height: 44px; padding: 0 14px; border: 1px solid #1a1a1a; border-radius: 4px; background: #fff; color: #1a1a1a; font: inherit; cursor: pointer; }
.lb-a11y__link { color: #1a1a1a; text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; }

/* ---------- What each preference does to the site (the menu itself is unaffected) ---------- */
html.lb-a11y-text-1 :is(.lb-main, .lb-footer, .lb-drawer__panel, .lb-qv__body, .lb-header .lb-search) { zoom: 1.15; }
html.lb-a11y-text-2 :is(.lb-main, .lb-footer, .lb-drawer__panel, .lb-qv__body, .lb-header .lb-search) { zoom: 1.3; }
html.lb-a11y-text-3 :is(.lb-main, .lb-footer, .lb-drawer__panel, .lb-qv__body, .lb-header .lb-search) { zoom: 1.5; }

html.lb-a11y-contrast body { background: #000; }
html.lb-a11y-contrast :is(.lb-header, .lb-main, .lb-footer, .lb-drawer__panel, .lb-qv, .lb-toast),
html.lb-a11y-contrast :is(.lb-header, .lb-main, .lb-footer, .lb-drawer__panel, .lb-qv, .lb-toast) *:not(img):not(svg):not(path):not(circle):not(rect) {
	background-color: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important;
}
html.lb-a11y-contrast :is(.lb-header, .lb-main, .lb-footer, .lb-drawer__panel, .lb-qv) a,
html.lb-a11y-contrast :is(.lb-header, .lb-main, .lb-footer, .lb-drawer__panel, .lb-qv) a * { color: #ffeb3b !important; }
html.lb-a11y-contrast .custom-logo { filter: invert(1); }
html.lb-a11y-contrast :focus-visible { outline-color: #ffeb3b !important; }

html.lb-a11y-gray :is(.lb-header, .lb-main, .lb-footer, .lb-drawer__panel, .lb-qv) { filter: grayscale(1); }

html.lb-a11y-links :is(.lb-header, .lb-main, .lb-footer, .lb-drawer__panel, .lb-qv) a {
	text-decoration: underline !important; text-underline-offset: 3px; outline: 2px dashed currentColor; outline-offset: 2px;
}

html.lb-a11y-font :is(.lb-header, .lb-main, .lb-footer, .lb-drawer__panel, .lb-qv),
html.lb-a11y-font :is(.lb-header, .lb-main, .lb-footer, .lb-drawer__panel, .lb-qv) * {
	font-family: Arial, "Segoe UI", sans-serif !important; font-weight: 400 !important;
}
html.lb-a11y-font :is(.lb-header, .lb-main, .lb-footer) :is(h1, h2, h3, strong, b, dt) { font-weight: 700 !important; }

/* WCAG 1.4.12 text-spacing values */
html.lb-a11y-spacing :is(.lb-main, .lb-footer, .lb-drawer__panel, .lb-qv) * {
	line-height: 1.8 !important; letter-spacing: .12em !important; word-spacing: .16em !important;
}
html.lb-a11y-spacing :is(.lb-main, .lb-footer) p { margin-bottom: 2em !important; }

html.lb-a11y-nomotion *, html.lb-a11y-nomotion *::before, html.lb-a11y-nomotion *::after {
	animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html.lb-a11y-nomotion .lb-cat__link:hover, html.lb-a11y-nomotion .lb-product:hover .lb-product__img { transform: none !important; }

html.lb-a11y-cursor, html.lb-a11y-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9.5-7 1.5 4 8-3 1.5-4-8-6 5z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 4 2, auto !important;
}

@media print { .lb-a11y { display: none; } }
/* Long unbroken strings (email, SKU) must wrap when text is enlarged/spaced (WCAG 1.4.10 / 1.4.12). */
.lb-footer__main { grid-template-columns: minmax(0, 1fr); }
.lb-contact__list a, .lb-footer__links a { max-width: 100%; overflow-wrap: anywhere; }
html:is(.lb-a11y-spacing, .lb-a11y-text-2, .lb-a11y-text-3) :is(.lb-main, .lb-footer) * { overflow-wrap: anywhere; }
/* Room for the floating accessibility button so it never covers the last line of the page. */
.lb-footer__bottom { padding-bottom: 56px; }
@media (min-width: 960px) { .lb-footer__bottom { padding-bottom: 0; } }
.lb-a11y.is-dragging .lb-a11y__toggle { cursor: grabbing; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.lb-a11y__pos { display: flex; gap: 6px; }
.lb-a11y__posbtn { width: 44px; height: 44px; border: 1px solid #1a1a1a; border-radius: 4px; background: #fff; color: #1a1a1a; font-size: 18px; cursor: pointer; }
.lb-a11y__posbtn:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.lb-a11y__hint { margin: 8px 0 0; font-size: 13px; color: #4a4744; }
.lb-a11y__group--pos { border-bottom: 1px solid #e4e1dc; }
.lb-cat__media.is-product-photo { background: #fff; }
.lb-cat__media.is-product-photo .lb-cat__img { object-fit: contain; transform: scale(1.4); } /* wide packshots: fill the tile without cutting the packs */
.lb-a11y:not(.is-dragging) { transition: top .26s ease, left .26s ease; }
@media (prefers-reduced-motion: reduce) { .lb-a11y { transition: none !important; } }