/* =========================
   ACCESSIBILITY / FOCUS FIX
   ========================= */

:root {
  --a11y-color: black;
  --a11y-radius: 4px;
  --a11y-offset: 0px;
  --a11y-ring: 0 0 0 1px black;
  --a11y-shadow: 0 0 0 3px rgba(55, 55, 55, 0.25);
  --a11y-color-alternative: rgb(78, 195, 196);
}

/* ---------- Basis: Browser/Theme-Resets neutralisieren ---------- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
.swatch-option:focus,
.products-grid .product-item-info .product-top a.photo:focus {
  outline: 2px solid var(--a11y-color) !important;
  outline-offset: var(--a11y-offset) !important;
  border-radius: var(--a11y-radius);
}

/* ---------- focus-visible bevorzugen ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.swatch-option:focus-visible,
.products-grid .product-item-info .product-top a.photo:focus-visible {
  outline: 2px solid var(--a11y-color) !important;
  outline-offset: var(--a11y-offset) !important;
  border-radius: var(--a11y-radius) !important;
  box-shadow: var(--a11y-ring) !important; /* hilft bei overflow:hidden */
}

/* ---------- Maus-Klick nicht unnötig highlighten ---------- */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
.swatch-option:focus:not(:focus-visible),
.products-grid .product-item-info .product-top a.photo:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* ---------- Speziell Navigation / Dropdown ---------- */
.nav-main-menu > li.a11y-dropdown > a.level0:focus,
.nav-main-menu > li.a11y-dropdown .toggle-menu a:focus,
.nav-main-menu > li.a11y-dropdown .dropdown-menu a:focus,
.nav-main-menu > li.a11y-dropdown > a.level0:focus-visible,
.nav-main-menu > li.a11y-dropdown .toggle-menu a:focus-visible,
.nav-main-menu > li.a11y-dropdown .dropdown-menu a:focus-visible {
  outline: 3px solid var(--a11y-color) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
  box-shadow: var(--a11y-shadow) !important;
}

/* ---------- DESKTOP ONLY: Dropdown per Tastatur öffnen ---------- */
@media (min-width: 768px) {
  .nav-main-menu > li.a11y-dropdown > .dropdown-menu {
    display: none;
    visibility: hidden;
    opacity: 0;
  }

  .nav-main-menu > li.a11y-dropdown:hover > .dropdown-menu,
  .nav-main-menu > li.a11y-dropdown:focus-within > .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .nav-main-menu > li.a11y-dropdown > a.level0:focus + .toggle-menu + .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .nav-main-menu > li.a11y-dropdown > .toggle-menu a:focus ~ .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .nav-main-menu > li.a11y-dropdown:hover .icon-next i,
  .nav-main-menu > li.a11y-dropdown:focus-within .icon-next i {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
  }
}

/* ---------- Produktbilder / Karten ---------- */
/* .products-grid .product-item-info .product-top a.photo:focus,
.products-grid .product-item-info .product-top a.photo:focus-visible,
.products-grid .product-item-info a:focus,
.products-grid .product-item-info a:focus-visible {
  outline: 2px solid var(--a11y-color) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
  box-shadow: var(--a11y-ring) !important;
} */

/* ---------- Swatches ---------- */
.swatch-option:focus,
.swatch-option:focus-visible {
  outline: 2px solid var(--a11y-color) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
  box-shadow: var(--a11y-ring) !important;
}

/* ---------- Formulare ---------- */
/* input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: 2px solid var(--a11y-color) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.2) !important;
} */

/* ---------- Buttons ---------- */
button:focus,
button:focus-visible,
.action.primary:focus,
.action.primary:focus-visible,
.action.secondary:focus,
.action.secondary:focus-visible,
.btn:focus,
.btn:focus-visible {
  outline: 2px solid var(--a11y-color) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
  box-shadow: var(--a11y-ring) !important;
}

/* ---------- Alternative Fokusfarbe für sub-nav-shop ---------- */
.sub-nav-shop li a:focus,
.sub-nav-shop li a:focus-visible {
    outline: 3px solid var(--a11y-color-alternative) !important;
    outline-offset: 3px !important;
    border-radius: 4px !important;
    box-shadow: var(--a11y-ring) !important;
}

/* ---------- NOHRA ---------- */
.nohra-chat-input__inner input:focus,
.nohra-chat-input__inner input:focus-visible,
.nohra-chat-input__inner textarea:focus,
.nohra-chat-input__inner textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ---------- Cookie Consent close button ---------- */
.pr-cookie-details-modal .pr-cookie-close,
.pr-cookie-modal .pr-cookie-close{
	outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}


/* ---------- Skip link optional stärker sichtbar ---------- */
.action.skip:focus,
.action.skip:focus-visible {
  outline: 3px solid var(--a11y-color) !important;
  outline-offset: 3px !important;
  box-shadow: var(--a11y-ring) !important;
}

/* ---------- Debug-Hilfe: nur temporär aktivieren, falls weiter nichts sichtbar ist ---------- */
/*
*:focus {
  background: rgba(255, 0, 0, 0.15) !important;
}
*/