/**
* WCAG 2.4.7 / F78 — visible keyboard focus.
*
* Ring: inner + outer via stacked box-shadow (--jh-focus-ring-inner / --jh-focus-ring-outer).
* Do not set border-radius on :focus-visible — it overrides Avada/Woo radii when theme
* vars are not inherited on that node.
*
* Fusion .fusion-imageframe { overflow: hidden } can clip outlines; parent gets overflow:visible
* when the inner link is focused. F78 scanners read outline on the — use a solid #000
* outline on a.fusion-no-lightbox, not outline:none plus a parent-only ring.
*
* Image carousels: .fusion-image-carousel .fusion-image-wrapper sets border-radius via
* CSS vars; the inner does not inherit it for painting, and outer box-shadow stays square.
* Same ::after inset ring with border-radius: inherit from the wrapper.
*/
body #wrapper a:not(.fusion-button):has(img) {
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
body #wrapper a:not(.fusion-button):has(> img:only-child) > img {
display: block;
max-width: 100%;
height: auto;
}
body #wrapper a:focus-visible:not(.fusion-button),
body #wrapper summary:focus-visible,
body #wrapper [role="button"]:focus-visible,
body #wrapper [role="tab"]:focus-visible,
body #wrapper [tabindex]:not([tabindex="-1"]):not(.select2-selection):focus-visible {
outline: none;
box-shadow:
0 0 0 2px var(--jh-focus-ring-inner, #fff),
0 0 0 4px var(--jh-focus-ring-outer, #000);
}
body #wrapper input:focus-visible,
body #wrapper select:focus-visible,
body #wrapper textarea:focus-visible {
outline: none;
box-shadow:
0 0 0 2px var(--jh-focus-ring-inner, #fff),
0 0 0 4px var(--jh-focus-ring-outer, #000);
}
body #wrapper button:focus-visible:not(.jh-hero-video-pause):not(.fusion-button) {
outline: none;
box-shadow:
0 0 0 2px var(--jh-focus-ring-inner, #fff),
0 0 0 4px var(--jh-focus-ring-outer, #000);
}
body #wrapper a.fusion-button:focus-visible,
body #wrapper button.fusion-button:focus-visible {
outline: none;
box-shadow:
0 0 0 2px var(--jh-focus-ring-inner, #fff),
0 0 0 4px var(--jh-focus-ring-outer, #000) !important;
}
/* Avada social: box-shadow: none !important — restore outer ring */
body #wrapper a.fusion-social-network-icon:focus-visible,
body #wrapper a.wprev-google-wr-a:focus-visible {
outline: none !important;
box-shadow:
0 0 0 2px var(--jh-focus-ring-inner, #fff),
0 0 0 4px var(--jh-focus-ring-outer, #000) !important;
}
/* Sharing box / networks: class is on , not — match parent link */
body #wrapper .fusion-social-networks a:focus-visible:has(> i.fusion-social-network-icon),
body #wrapper .sharingbox-shortcode-icon-wrapper a:focus-visible {
outline: none !important;
border-radius: 9999px;
box-shadow:
0 0 0 2px var(--jh-focus-ring-inner, #fff),
0 0 0 4px var(--jh-focus-ring-outer, #000) !important;
}
/*
* Woo gallery (single product): two direct nodes — main (wraps img) and Avada lightbox overlay.
* The overlay is later in the DOM and covers the main link; .zoomImg is often stacked even higher.
* Raise the focused well above siblings and drop the overlay below while the main link is focused
* so the keyboard focus ring is actually visible (F78 + real UX).
*/
body #wrapper .woocommerce-product-gallery__image:has(> a:focus),
body #wrapper .woocommerce-product-gallery__image:has(> a:focus-visible) {
position: relative;
z-index: 0;
overflow: visible !important;
}
/* Main image link: sits under full-bleed overlay until focused */
body #wrapper .woocommerce-product-gallery__image > a:has(> img):focus,
body #wrapper .woocommerce-product-gallery__image > a:has(> img):focus-visible {
outline: 3px solid #000000 !important;
outline-style: solid !important;
outline-color: #000000 !important;
outline-width: 3px !important;
outline-offset: 2px !important;
box-shadow: none !important;
position: relative;
z-index: 10000 !important;
isolation: isolate;
}
/* While main link is focused, keep transparent overlay under it (same tab order, ring not painted under) */
body #wrapper .woocommerce-product-gallery__image:has(> a:has(> img):focus) > a.avada-product-gallery-lightbox-trigger:not(:focus),
body #wrapper .woocommerce-product-gallery__image:has(> a:has(> img):focus-visible) > a.avada-product-gallery-lightbox-trigger:not(:focus-visible) {
z-index: 1 !important;
}
body #wrapper .woocommerce-product-gallery__image > a.avada-product-gallery-lightbox-trigger:focus,
body #wrapper .woocommerce-product-gallery__image > a.avada-product-gallery-lightbox-trigger:focus-visible {
outline: 3px solid #000000 !important;
outline-style: solid !important;
outline-color: #000000 !important;
outline-width: 3px !important;
outline-offset: 2px !important;
box-shadow: none !important;
position: relative;
z-index: 10000 !important;
isolation: isolate;
}
/* Fusion gallery shortcode lightbox link (img fills ; same stacking as other image links) */
body #wrapper .fusion-gallery-image > a.fusion-lightbox:has(> img) {
position: relative;
z-index: 0;
display: inline-block;
max-width: 100%;
}
body #wrapper .fusion-gallery-image > a.fusion-lightbox:has(> img):focus-visible {
outline: none !important;
box-shadow: none !important;
}
body #wrapper .fusion-gallery-image > a.fusion-lightbox:has(> img):focus-visible::after {
content: "";
position: absolute;
inset: 0;
z-index: 50;
pointer-events: none;
border-radius: inherit;
box-shadow:
inset 0 0 0 2px var(--jh-focus-ring-inner, #fff),
inset 0 0 0 4px var(--jh-focus-ring-outer, #000);
}
/*
* Woo loop / upsells (clean thumb): Select options / Details / fusion-link-wrapper sit in
* .fusion-rollover over the img. Show one inset ring on the whole image frame when any
* rollover is focused (:focus for scanners, :focus-visible for keyboard).
*/
body #wrapper .fusion-clean-product-image-wrapper .fusion-image-wrapper:has(.fusion-rollover a:focus),
body #wrapper .fusion-clean-product-image-wrapper .fusion-image-wrapper:has(.fusion-rollover a:focus-visible) {
position: relative;
z-index: 0;
outline: none !important;
box-shadow: none !important;
}
body #wrapper .fusion-clean-product-image-wrapper .fusion-image-wrapper:has(.fusion-rollover a:focus)::after,
body #wrapper .fusion-clean-product-image-wrapper .fusion-image-wrapper:has(.fusion-rollover a:focus-visible)::after {
content: "";
position: absolute;
inset: 0;
z-index: 200;
pointer-events: none;
box-shadow:
inset 0 0 0 2px var(--jh-focus-ring-inner, #fff),
inset 0 0 0 4px var(--jh-focus-ring-outer, #000);
}
body #wrapper .fusion-clean-product-image-wrapper .fusion-image-wrapper .fusion-rollover a:focus,
body #wrapper .fusion-clean-product-image-wrapper .fusion-image-wrapper .fusion-rollover a:focus-visible {
outline: none !important;
box-shadow: none !important;
}
/* Qty +/- and number field share a row; raise focused control so its ring is not under siblings */
body #wrapper .quantity.buttons_added {
position: relative;
z-index: 0;
}
body #wrapper .quantity.buttons_added > input:focus-visible {
position: relative;
z-index: 5;
}
/*
* Blog shortcode / archive grid: title, meta, Read More can stack; keep focus ring above neighbors.
*/
body #wrapper .fusion-blog-shortcode a:focus-visible,
body #wrapper .fusion-blog-archive .fusion-post-grid a:focus-visible {
outline: none !important;
box-shadow:
0 0 0 2px var(--jh-focus-ring-inner, #fff),
0 0 0 4px var(--jh-focus-ring-outer, #000) !important;
position: relative;
z-index: 3;
}
/*
* Fusion Toggles / accordion: fusion-builder toggles.css sets .panel-title a { box-shadow: none !important; }
* which removes the global focus ring — restore with matching !important.
*/
body #wrapper .fusion-accordian .panel-title a:focus-visible {
outline: none !important;
box-shadow:
0 0 0 2px var(--jh-focus-ring-inner, #fff),
0 0 0 4px var(--jh-focus-ring-outer, #000) !important;
position: relative;
z-index: 1;
}
/* Avada native select: styled wrapper; ring the whole control when