/* Suppress the default focus ring on mouse/click; only keyboard (Tab) shows it. */
*:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Accessibility focus ring — appears on Tab navigation only.
   Solid black outline with a soft black halo for visibility on any background. */
*:focus-visible {
    outline: 2px solid #000 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2) !important;
    border-radius: 2px;
}


/* =============================================================================
   Vertical Categories Menu — convert from hover-to-open into click-to-open.
   Original hover rules live in wb-layout/_navpages.scss (line 344) and
   wb-layout/_system.scss (line 72).
   ============================================================================= */

/* 1. Disable the hover-to-open behaviour by forcing the hidden state values
      (mirror of the hideSubMenu mixin defined in _navpages.scss). */
.navPages-verticalCategories:hover .verticalCategories.is-open {
    margin-left: -9999px !important;
    opacity: 0 !important;
    transform: translateY(32px) !important;
}

/* Same for the sticky header variant (uses display: block on hover). */
header.sticky-top .navPages-verticalCategories:hover .verticalCategories {
    display: none !important;
}

/* 2. Click-open state — replicates showSubMenu mixin to reveal the panel. */
#menu--verticalCategories.is-click-open .verticalCategories.is-open {
    margin-left: 0 !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

header.sticky-top #menu--verticalCategories.is-click-open .verticalCategories {
    display: block !important;
}

/* 3. Cursor hint on the toggle so users know it is now clickable. */
#menu--verticalCategories .custom-megamenu-button {
    cursor: pointer;
}

/* 4. Hide the panel from screen readers when closed.
      Original CSS only hides it visually via opacity/transform/margin which
      does NOT remove the subtree from the accessibility tree. */
.verticalCategories.is-open {
    visibility: hidden !important;
}

#menu--verticalCategories.is-click-open .verticalCategories.is-open {
    visibility: visible !important;
}


/* =============================================================================
   Horizontal Nav Submenus — convert hover-to-open into click-to-open.
   Original hover rules in wb-layout/_navpages.scss line 76 (level 1) and
   line 282 (level 2).
   ============================================================================= */

/* 1. Disable hover-to-open for level-1 submenus and force the hidden state
      even when the theme renders the panel with .is-open already on it. */
.navPages-item:hover > .navPage-subMenu,
.navPages-list .navPage-subMenu.is-open {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    z-index: -1 !important;
}

/* 2. Disable hover-to-open for level-2 submenus. */
.navPage-subMenu-item:hover > .subMenu--level2,
.navPages-list .subMenu--level2.is-open {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 3. Show the level-1 panel only when JS adds .is-click-open. */
.navPages-item.is-click-open > .navPage-subMenu,
.navPages-item.is-click-open > .navPage-subMenu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    z-index: 105 !important;
    display: block !important;
}

/* 4. Show the level-2 panel only when JS adds .is-click-open. */
.navPage-subMenu-item.is-click-open > .subMenu--level2 {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(0, 0) !important;
    display: block !important;
}

/* 4-vert. Vertical mega-menu exception: hover state is JS-tracked via
   `.js-hover-open` (added on mouseenter, removed on mouseleave). This is
   more reliable than CSS :hover when the panel is absolutely positioned
   outside the parent's natural bounding box. */
#verticalCategories .navPages-item.js-hover-open > .navPage-subMenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    z-index: 105 !important;
    display: block !important;
}

/* 4-webpage. Horizontal nav webpage items (Support etc.) — same JS-tracked
   hover. The button still toggles on click and the SVG chevron is focusable
   as a button for AT clarity. */
.navPages-list .navPages-item:has(> button.navPages-action[data-collapsible*="webpage"]).js-hover-open > .navPage-subMenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    z-index: 105 !important;
    display: block !important;
}

/* 4-closed. Click on the SVG chevron takes priority over hover. JS sets
   `.js-click-closed` so the panel stays hidden even while the cursor is
   still inside; mouseleave clears it so a fresh hover reopens normally. */
.navPages-list .navPages-item.js-click-closed > .navPage-subMenu,
#verticalCategories .navPages-item.js-click-closed > .navPage-subMenu {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    transform: translateY(-10px) !important;
    z-index: -1 !important;
}

/* 4a. Mobile menu exception: rules 1–4 are desktop-only. The mobile menu
       (inside #mobile--verticalCategories) toggles submenus via Foundation
       Collapsible which adds `.is-open` directly on the panel — restore the
       visible state so mobile submenus open correctly. */
#mobile--verticalCategories .navPages-list .navPage-subMenu.is-open,
#mobile--verticalCategories .navPages-list .subMenu--level2.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    z-index: auto !important;
    display: block !important;
}

/* 4b. Mobile menu chevron toggle: moved OUTSIDE the <a> for a11y so the
       link and the expand-toggle are announced as two separate controls.
       Re-position the chevron to the top-right of the row (mirrors the
       original float:right look). */
#mobile--verticalCategories .navPages-list .navPages-item > span.has-subMenu[data-collapsible],
#mobile--verticalCategories .navPages-list .navPage-subMenu-item > span.has-subMenu[data-collapsible] {
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 2;
    cursor: pointer;
}

/* 5. Cursor hint on triggers so users know they're now clickable. */
.navPages-list [data-collapsible][aria-controls] {
    cursor: pointer;
}

/* Mobile filter sidebar: the sidebar--categories block has an inline
   `margin: -100px 0 0 0;` (from category.html) intended for the desktop
   layout — on mobile (offcanvas), it pulls the Products list 100px above
   the viewport and hides the top half. Reset it on mobile/tablet sizes. */
@media (max-width: 991px) {
    .sidebar-offcanvas .module-wrapper.sidebar--categories[style] {
        margin-top: 0 !important;
    }
}

/* Mobile filter sidebar close button — top-right of the offcanvas panel.
   Only visible at sizes where the offcanvas is in use (the .open-sidebar
   trigger is gated to those breakpoints with d-md-block d-lg-none). */
button.sidebar-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

button.sidebar-close svg {
    fill: #444;
}

/* 6. The webpage submenu trigger was changed from <a href> to <button> in
      wb_mega/horizontal/item-page.html. Reset browser-default button styles
      so the new element renders identically to the original anchor, then
      replicate the tag-specific rules from your_custom.scss
      (a.navPages-action — line 306, a.navPages-action.has-subMenu — line 311). */
.navPages-list button.navPages-action {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    line-height: inherit;
    text-align: inherit;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
}

.navPages-list button.navPages-action.has-subMenu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: space-evenly;
    align-items: center;
}


/* =============================================================================
   Hero slider — accessible Next / Previous controls on the right side.
   Slick generates <button class="slick-prev"> and <button class="slick-next">
   with aria-label="Previous" / "Next" by default. We just re-position both on
   the right so they sit together as a paired control.
   ============================================================================= */
.hero-banner {
    position: relative;
}

.hero-banner .slick-arrow {
    position: absolute;
    top: auto;
    bottom: 20px;
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #007AFF;
    border: 2px solid #007AFF;
    cursor: pointer;
    /* Hide the literal "Previous"/"Next" text Slick injects but keep aria-label */
    font-size: 0;
    color: transparent;
    padding: 0;
    transition: background 0.2s, border-color 0.2s;
}

.hero-banner .slick-arrow:hover,
.hero-banner .slick-arrow:focus-visible {
    background: #005ecc;
    border-color: #005ecc;
}

.hero-banner .slick-arrow::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    vertical-align: middle;
}

/* Previous: left-pointing chevron, positioned just left of Next */
.hero-banner .slick-prev {
    left: auto !important;
    right: 80px !important;
}
.hero-banner .slick-prev::before {
    transform: rotate(-135deg);
    margin-left: 4px;
}

/* Next: right-pointing chevron, anchored to the right edge */
.hero-banner .slick-next {
    right: 20px !important;
}
.hero-banner .slick-next::before {
    transform: rotate(45deg);
    margin-right: 4px;
}

/* Disabled (first / last slide with infinite: false) — keep visible but dimmed */
.hero-banner .slick-arrow.slick-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.hero-banner .slick-arrow.slick-disabled:hover {
    background: #007AFF;
    border-color: #007AFF;
}


/* =============================================================================
   Product card — image overlay link.
   The <a> is empty and absolutely positioned over the .card-img-container so
   the image area remains clickable. The image itself sits in normal flow with
   its alt text intact (read by screen readers). The link is aria-hidden so it
   isn't announced twice; only the title link below conveys the link semantics.
   ============================================================================= */
.card-img-container {
    position: relative;
}

.product-item-photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    text-indent: -9999px;
    overflow: hidden;
    /* Keep the cursor as a pointer so the area still feels clickable */
    cursor: pointer;
}


/* =============================================================================
   Product card — reveal hover-only controls on keyboard focus.
   The .buttons--quickview button is hidden (opacity:0 + scale(0)) and only
   shown via :hover on .product-item-container. That leaves keyboard users
   focusing an invisible element, which feels broken. Mirror the hover reveal
   for :focus-within so tabbing into the quickview makes it visible.
   ============================================================================= */
.product-item-container:focus-within .buttons--quickview {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) scale(1) !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    color: #3B3B3B;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.form-group.category-info h1.custom-cat-heading {
    color: #006fe6 !important;
}

/* Sort dropdown contrast — WCAG AA fix for default light gray text */
fieldset.actionBar-section .form-select--date,
fieldset.actionBar-section .form-select--small {
    color: #737373 !important;
}

/* Compare button contrast — WCAG AA fix */
.action-item.buttons--compare,
.action-item.buttons--compare .icon {
    color: #737373 !important;
}

/* Category subcategory heading — h4 → h2 for heading-hierarchy fix.
   Neutralizes the global h2 styles (32px / 600 / capitalize) leaking into
   the small subcategory tile label so visual stays identical to the old h4. */
h2.refine-search__subitem-name {
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: normal !important;
    text-transform: none !important;
    margin: 0 !important;
    text-align: center !important;
}
h2.refine-search__subitem-name a {
    font-size: inherit !important;

    text-transform: none !important;
}

.products-list .product-layout .product-item-container .right-block .card-text {
    color: #737373 !important;
}

/* Product carousel (wb-extraslider) arrows — touch target size fix.
   Slick default is too small for WCAG 2.5.8; bump to 44x44.
   Uses high-specificity selectors to override slick's default CSS. */
section.productCarousel button.slick-prev,
section.productCarousel button.slick-next,
.wb-extraslider-container button.slick-prev,
.wb-extraslider-container button.slick-next,
.wb-extraslider-container .slick-slider .slick-prev,
.wb-extraslider-container .slick-slider .slick-next {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
}

/* Subcategory tiles — extend clickable tap area via pseudo-element so the
   visible layout stays exactly the same. Only the hit zone grows for users
   on touch devices and pointer accuracy improves for everyone. */
.refine-search__subitem a.card-figure__link.img-thumbnail,
.refine-search__subitem h2.refine-search__subitem-name a {
    position: relative;
}
.refine-search__subitem a.card-figure__link.img-thumbnail::after,
.refine-search__subitem h2.refine-search__subitem-name a::after {
    content: '';
    position: absolute;
    inset: -8px;
    z-index: 0;
}

/* Sidebar "Products" heading — h5 → h2 for heading-hierarchy fix.
   Replicates the original .module-wrapper.sidebar--categories h5.block-title
   styles (custom.css line 252-253) on the new h2 so the visual stays identical
   and the global h2 rule (32px / 600 / capitalize) doesn't leak in. */
.module-wrapper.sidebar--categories h2.block-title {
    color: #000 !important;
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    border-bottom: solid 1px #D9D9D9 !important;
    background: none !important;
    padding: 0 0 18px !important;
    text-transform: none !important;
    margin: 0 !important;
}

/* Product card title — heading-hierarchy fix.
   Neutralizes the global heading rule so the small product title behaves
   like the original card title. Visual stays identical via .card-title > a. */
.product-item-container h2.card-title,
.product-item-container h3.card-title {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-transform: none !important;
    margin: 0 !important;
}

#form-action-addToCart{
    background-color: #006fe6 !important;

}

/* Skip links — hidden off-screen until focused via keyboard Tab.
   First Tab on any page reveals them so keyboard users can jump straight
   to main content or the accessibility statement. */
#skiplink {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

.skip-to-content-link {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: #000;
    color: #fff !important;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #fff;
    border-radius: 4px;
    z-index: 10000;
}

.skip-to-content-link:focus,
.skip-to-content-link:focus-visible {
    position: fixed;
    left: 10px;
    top: 10px;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 3px solid #007AFF;
    outline-offset: 2px;
    z-index: 10000;
}

/* Gallery skip link: position relative to the gallery section
   (vertically centered on the main image, left side) instead of
   top-left of the viewport. */
.productView-images {
    position: relative;
}

.skip-to-content-link--gallery:focus,
.skip-to-content-link--gallery:focus-visible {
    position: absolute;
    top: 10%;
 
    transform: translateY(-50%);
}


/* Back to top button — appears after scrolling 20px+ down, smooth-scrolls
   to the top on click, then returns focus to #skiplink so keyboard users
   continue from a known location. */
#back-to-top {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 20px;
    background-color: #007AFF;
    color: #fff;
    padding: 14px 18px;
    border-radius: 50%;
    text-decoration: none;
    transition: opacity 0.3s, background-color 0.2s;
    z-index: 9998;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    line-height: 0;
}

#back-to-top:hover,
#back-to-top:focus-visible {
    background-color: #005ecc;
    color: #fff;
}

#back-to-top svg {
    display: inline-block;
    vertical-align: middle;
}

/* Compare page: category link color */
.compareTable-product .card-text,
.compareTable-product .card-text a {
    color: #737373;
}

/* Product page: "No reviews yet" text color */
span.productView-reviewLink {
    color: #6E7177;
}

/* Product gallery: thumbnail anchors replaced with <button> for a11y.
   Reset browser button defaults so the thumbnail looks identical. */
button.productView-thumbnail-link {
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Mobile menu close: <span> upgraded to <button> for keyboard a11y.
   Replicates the original `span.mobileMenu-close` styling from
   _header_mobile.scss line 58 so the close icon stays visible and positioned
   correctly. Also resets browser default button chrome. */
button.mobileMenu-close {
    display: block !important;
    background: transparent;
    border: 0;
    padding: 2px 0;
    margin: 10px;
    height: 25px;
    width: 25px;
    position: absolute;
    right: 0;
    z-index: 115;
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

button.mobileMenu-close svg {
    fill: #ccc;
}

/* Product info: <dl>/<dt>/<dd> converted to <div> wrappers.
   Replicates the flex layout from custom.css line 302 (dl.productView-info)
   so the row of info-boxes stays identical visually. */
.productView-details .productView-info {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}