/* ==========================================================================
   Accessibility - Keyboard Navigation & Focus Visibility
   ========================================================================== */

:root {
    --focus-color: #1f7bc9;
    --focus-color-light: #ffffff;
    --focus-color-dark: #000000;
    --focus-width: 2px;
    --focus-offset: 2px;
}

/* 1. Global Focus Visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
    outline: none;
}

/* 2. Header & Logo */
.logo a:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 3. Search Bar */
.tbx-main-search input:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: -2px;
}

/* 4. Dropdowns */
.top-dropdown:focus-within .summary {
    display: block;
}

.top-dropdown:focus-within .opener {
    z-index: 12;
}

.top-dropdown .opener {
    position: relative;
}

.top-dropdown .opener:focus,
.top-dropdown .opener:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: 2px;
}

.service.top-dropdown .opener:focus,
.service.top-dropdown .opener:focus-visible,
.login.top-dropdown .opener:focus,
.login.top-dropdown .opener:focus-visible {
    outline: none;
}

.service.top-dropdown .opener:focus:before,
.service.top-dropdown .opener:focus-visible:before,
.login.top-dropdown .opener:focus:before,
.login.top-dropdown .opener:focus-visible:before {
    border-radius: 50%;
    box-shadow: 0 0 0 var(--focus-width) var(--focus-color);
}

.top-dropdown .summary a:focus,
.top-dropdown .summary a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--focus-width) var(--focus-color);
    background-color: #f7f7f7;
}

.language .hyp:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.language .flag {
    display: inline-block;
}

.service .hyp:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.login .hyp:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 5. Basket Dropdown */
.basket:focus-within .basket-summary {
    display: block;
}

.basket:focus-within .over-summary:not(.is-empty) {
    display: block;
}

/* 6. Navigation */
.hyp-top-lvl:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.nav-item:focus-within > .nav-list-sub {
    display: block;
}

.nav-item:focus-within > .nav-wrapper {
    display: block;
}

nav .hyp:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.nav-lvl-2 a:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.nav-lvl-3 .hyp:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.nav-item-sub:focus-within {
    background: #f7f7f7;
}

/* 7. Breadcrumb */
.breadcrumb a:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 8. Product Tiles */
.product-tile .hyp-thumbnail:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
    border-radius: 2px;
}

.product-tile .product-title:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.product-tile .btn:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 9. Wishlist */
.btn-wishlist:focus-visible,
.hyp-wishlist:focus-visible,
.wishlist-link:focus-visible,
.hyp-add-to-wishlist:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
    border-radius: 50%;
}

/* 10. Filters & Facets */
.facet .hdr:focus-visible,
.facet .hdr h4:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.list-facets a:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.facet-range input:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: -2px;
}

.facet-range .btn:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.hyp-toggle:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.filter-title:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 11. Sorting */
.sorting a:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 12. Product Detail */
.tab-control .ui-tabs-anchor:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.order-box .ui-selectmenu-menu .ui-menu,
.order-box .ui-selectmenu-menu .ui-menu:focus,
.order-box .ui-selectmenu-menu .ui-menu:focus-visible,
.order-box .ui-selectmenu-menu .ui-menu.ui-state-focus,
.order-box .ui-selectmenu-menu .ui-menu.ui-state-active {
    outline: none !important;
    box-shadow: none !important;
}

.order-box .ui-selectmenu-menu .ui-menu .ui-menu-item,
.order-box .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-menu-item-wrapper,
.order-box .ui-selectmenu-menu .ui-menu .ui-menu-item div {
    border-radius: 3px;
}

.order-box .ui-selectmenu-menu .ui-menu .ui-menu-item:focus,
.order-box .ui-selectmenu-menu .ui-menu .ui-menu-item:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 var(--focus-width) var(--focus-color) !important;
}

.tbx-quantity input:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: -2px;
}

/* 13. Buttons */
.btn:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.btn-action:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.btn-back:focus-visible,
.btn-cancel:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 14. Checkout */
.basket-steps a:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.checkout-page-cnt .tbx input:focus-visible,
.checkout-page-cnt .tar textarea:focus-visible,
.checkout-page-cnt select:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: -2px;
}

.checkout-page-cnt .chb input:focus-visible + ins {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* Make checkbox and radio focus visible via adjacent ins element */
.chb input[type="checkbox"]:focus-visible + ins {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.rdb input[type="radio"]:focus-visible + ins {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
    border-radius: 50%;
}

/* 15. Footer */
footer a:focus-visible {
    outline: var(--focus-width) solid var(--focus-color-light);
    outline-offset: var(--focus-offset);
}

footer .btn:focus-visible {
    outline: var(--focus-width) solid var(--focus-color-light);
    outline-offset: var(--focus-offset);
}

footer input:focus-visible {
    outline: var(--focus-width) solid var(--focus-color-light);
    outline-offset: -2px;
}

.tbx-email-newsletter input:focus-visible {
    outline: var(--focus-width) solid var(--focus-color-light);
    outline-offset: -2px;
}

/* 16. Paging */
.paging a:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.btn-load-more:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 17. Banners */
.slick-slide a:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.banner-content-inside a:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.flow-img-tiles .column a:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 18. Accordion */
.accordion-header:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 19. Select Menu */
.ui-selectmenu-button:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 20. Skip-to-content */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
    padding: 12px 20px;
    background: var(--focus-color);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.skip-to-content:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    width: auto;
    height: auto;
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 21. Focus not obscured */
.ribbon-header.nav-is-opened ~ .content *:focus-visible {
    scroll-margin-top: 120px;
}

*:focus-visible {
    scroll-margin-top: 80px;
}

/* 22. File Upload */
.file-upload-input:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 23. Opener buttons */
button.opener {
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 24. Popup / Modal */
.popup-visible .popup a:focus-visible,
.popup-visible .popup button:focus-visible,
.popup-visible .popup input:focus-visible,
.popup-visible .popup select:focus-visible,
.popup-visible .popup textarea:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 25. Last viewed / Checkout offers */
.last-viewed a:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.checkout-offers a:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

/* 26. Basket action links */
.action-links .hyp:focus-visible,
.hyp-basket-remove:focus-visible,
.hyp-basket-remove-multiaddress:focus-visible,
.hyp-remove:focus-visible,
.hyp-recalculate:focus-visible,
.receiver-remove:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.receiver-remove:focus-visible {
    display: inline-block;
    border-radius: 50%;
}

/* 27. Circular elements */
.ui-slider-handle:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
    border-radius: 50%;
}

.toggler input[type="checkbox"]:focus-visible + i {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
    border-radius: 12px;
}

.contact-info-facebook:focus-visible,
.contact-info-twitter:focus-visible,
.contact-info-social a:focus-visible,
a.focus-circle:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
    border-radius: 50%;
    display: inline-block;
}

a:focus-visible:has(> img[style*="border-radius"]) {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
    border-radius: 50%;
    display: inline-block;
}