/* Skip link */
.a11y-skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: #1a0f28;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transform: translateY(-120%);
  transition: transform 0.2s ease;
}

.a11y-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #16c79a;
  outline-offset: 2px;
}

/* Toolbar trigger — bottom-right accessibility icon */
.a11y-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99990;
  font-family: "Inter", system-ui, sans-serif;
  isolation: isolate;
  filter: none !important;
}

.a11y-widget__trigger {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  background: linear-gradient(135deg, #7f1d8d 0%, #ff4fa2 50%, #16c79a 100%);
  box-shadow: 0 8px 28px rgba(127, 29, 141, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.a11y-widget__trigger:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 36px rgba(22, 199, 154, 0.4);
}

.a11y-widget__trigger:focus-visible {
  outline: 3px solid #16c79a;
  outline-offset: 3px;
}

.a11y-widget__trigger[aria-expanded="true"] {
  background: linear-gradient(135deg, #16c79a 0%, #7f1d8d 100%);
}

/* Panel */
.a11y-widget__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(320px, calc(100vw - 40px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(127, 29, 141, 0.15);
  box-shadow: 0 20px 50px rgba(26, 15, 40, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.a11y-widget__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.a11y-widget__header {
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(127, 29, 141, 0.1);
}

.a11y-widget__header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #1a0f28;
}

.a11y-widget__header p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(26, 15, 40, 0.65);
}

.a11y-widget__body {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.a11y-widget__group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7f1d8d;
  margin: 8px 4px 2px;
}

.a11y-widget__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(127, 29, 141, 0.12);
  border-radius: 10px;
  background: rgba(255, 247, 251, 0.8);
  color: #1a0f28;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.a11y-widget__option:hover {
  border-color: rgba(22, 199, 154, 0.45);
  background: #fff;
}

.a11y-widget__option:focus-visible {
  outline: 2px solid #16c79a;
  outline-offset: 2px;
}

.a11y-widget__option.is-active {
  border-color: #16c79a;
  background: rgba(22, 199, 154, 0.1);
}

.a11y-widget__option-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.a11y-widget__option-label i {
  width: 20px;
  text-align: center;
  color: #7f1d8d;
}

.a11y-widget__toggle {
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(127, 29, 141, 0.25);
  position: relative;
  transition: background 0.2s ease;
}

.a11y-widget__toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.a11y-widget__option.is-active .a11y-widget__toggle {
  background: #16c79a;
}

.a11y-widget__option.is-active .a11y-widget__toggle::after {
  transform: translateX(20px);
}

.a11y-widget__text-size {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
}

.a11y-widget__size-btn {
  flex: 1 1 30%;
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid rgba(127, 29, 141, 0.2);
  border-radius: 8px;
  background: #fff;
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 600;
  color: #1a0f28;
  cursor: pointer;
  line-height: 1.25;
}

@media (max-width: 320px) {
  .a11y-widget__size-btn {
    flex: 1 1 100%;
  }
}

.a11y-widget__size-btn.is-active {
  border-color: #7f1d8d;
  background: rgba(127, 29, 141, 0.1);
  color: #7f1d8d;
}

.a11y-widget__size-btn:focus-visible {
  outline: 2px solid #16c79a;
  outline-offset: 2px;
}

.a11y-widget__reset {
  margin-top: 6px;
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 10px;
  background: #1a0f28;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.a11y-widget__reset:hover {
  background: #7f1d8d;
}

.a11y-widget__reset:focus-visible {
  outline: 3px solid #16c79a;
  outline-offset: 2px;
}

.a11y-widget__statement {
  display: block;
  margin-top: 4px;
  padding: 8px 4px 0;
  font-size: 11px;
  color: rgba(26, 15, 40, 0.55);
  text-align: center;
  text-decoration: underline;
}

.a11y-widget__statement:hover {
  color: #7f1d8d;
}

@media (max-width: 480px) {
  .a11y-widget {
    right: 14px;
    bottom: 14px;
  }

  .a11y-widget__trigger {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
}

/* ——— Site-wide accessibility modes (html classes) ——— */

/* Text size — page uses mostly px; scale via zoom on body (widget stays on <html>) */
html.a11y-text-md {
  --a11y-scale: 1.15;
  font-size: 115%;
}

html.a11y-text-lg {
  --a11y-scale: 1.3;
  font-size: 130%;
}

html.a11y-text-md body,
html.a11y-text-lg body {
  zoom: var(--a11y-scale);
}

/* Prevent clipped content when scaled up */
html.a11y-text-md,
html.a11y-text-lg {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Slightly gentler scale on very narrow screens to limit horizontal scroll */
@media (max-width: 480px) {
  html.a11y-text-md {
    --a11y-scale: 1.12;
    font-size: 112%;
  }

  html.a11y-text-lg {
    --a11y-scale: 1.22;
    font-size: 122%;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  html.a11y-text-md {
    --a11y-scale: 1.13;
  }

  html.a11y-text-lg {
    --a11y-scale: 1.26;
  }
}

/* Firefox / browsers without zoom: fall back to root font-size bump */
@supports not (zoom: 1.1) {
  html.a11y-text-md body,
  html.a11y-text-lg body {
    zoom: unset;
  }

  html.a11y-text-md :where(
    p, li, span, a, label, input, textarea, select, button,
    h1, h2, h3, h4, h5, h6, td, th, figcaption, blockquote, small
  ) {
    font-size: calc(1em * var(--a11y-scale, 1.15)) !important;
  }

  html.a11y-text-lg :where(
    p, li, span, a, label, input, textarea, select, button,
    h1, h2, h3, h4, h5, h6, td, th, figcaption, blockquote, small
  ) {
    font-size: calc(1em * var(--a11y-scale, 1.3)) !important;
  }
}

html.a11y-readable-font body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

html.a11y-readable-font body h1,
html.a11y-readable-font body h2,
html.a11y-readable-font body h3,
html.a11y-readable-font body h4 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: 0.02em;
}

html.a11y-line-height body {
  line-height: 1.75 !important;
}

html.a11y-line-height body p,
html.a11y-line-height body li {
  line-height: 1.85 !important;
}

html.a11y-highlight-links a:not(.a11y-skip-link):not(.a11y-widget__trigger):not(.a11y-widget__statement) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  background: rgba(22, 199, 154, 0.15);
  border-radius: 2px;
}

html.a11y-focus-enhanced *:focus-visible {
  outline: 3px solid #ff4fa2 !important;
  outline-offset: 3px !important;
}

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

html.a11y-big-cursor,
html.a11y-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%231a0f28' stroke='%23fff' stroke-width='1.5' d='M4 4 L4 26 L12 18 L18 28 L22 26 L16 16 L26 16 Z'/%3E%3C/svg%3E") 4 4, auto !important;
}

html.a11y-high-contrast {
  filter: none;
}

html.a11y-high-contrast body {
  background: #000 !important;
  color: #fff !important;
}

html.a11y-high-contrast body::before,
html.a11y-high-contrast body::after {
  display: none !important;
}

html.a11y-high-contrast .navbar,
html.a11y-high-contrast .footer,
html.a11y-high-contrast section,
html.a11y-high-contrast .category-card,
html.a11y-high-contrast .feature-card,
html.a11y-high-contrast .age-box,
html.a11y-high-contrast .newsletter-box,
html.a11y-high-contrast .dispensary-box,
html.a11y-high-contrast .video-card,
html.a11y-high-contrast .white-label-card,
html.a11y-high-contrast .product-card {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

html.a11y-high-contrast a {
  color: #ffff00 !important;
}

html.a11y-high-contrast .btn-primary {
  background: #ffff00 !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}

html.a11y-high-contrast img {
  opacity: 0.95;
}

/* Grayscale only the page — widget lives on <html>, not inside <body> */
html.a11y-grayscale body {
  filter: grayscale(100%);
}

html.a11y-grayscale .a11y-widget__trigger,
html.a11y-high-contrast .a11y-widget__trigger {
  filter: none !important;
  box-shadow: 0 8px 28px rgba(127, 29, 141, 0.55), 0 0 0 3px #fff;
}

@media (prefers-reduced-motion: reduce) {
  .a11y-widget__panel,
  .a11y-widget__trigger,
  .a11y-skip-link {
    transition-duration: 0.01ms;
  }
}