/* =========================================================
   Keyboard focus ring (WCAG 2.4.7), 2026-10-05, Dawn style 2026-10-06.
   Loaded by inc/gb-focus-ring.php (preview cookie, or option gb_focus_ring_live=yes).

   Same ring as our Shopify store (Dawn base.css "base-focus", foreground #121212,
   background #fff, 1rem = 10px there):
     2px ring of #121212 at 50%, 3px white gap, soft 30% glow around it.
   - Tap / mouse click: no ring, same as before. Browsers only match
     :focus-visible on links and buttons when the visitor uses the keyboard.
   - Klaviyo pop-ups (root class kl-private-reset-css-*): no ring. They move focus to their X when they open,
     which on iPhone draws the ring around it.
   - The :not(#gb-fv-*) IDs only raise priority: about 30 component rules
     across the theme set `outline: none !important` / `box-shadow: none !important`.
========================================================= */

:is(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"]),
    input[type="checkbox"], input[type="radio"],
    input[type="button"], input[type="submit"]):focus-visible:not([class*="kl-private-reset-css"] *):not(#gb-fv-0):not(#gb-fv-1):not(#gb-fv-2):not(#gb-fv-3){
  outline: 2px solid rgba(18, 18, 18, .5) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px #fff, 0 0 5px 4px rgba(18, 18, 18, .3) !important;
}

/* Inside a list that fills its box (Dawn "focus-inset"): ring drawn inside the
   element, so the scroll box around it cannot cut it.
   Phone menu drawer rows + search panel game tiles. */
.gb-drawer .gb-drawer__menu :is(a, button, [role="button"]):focus-visible:not(#gb-fv-0):not(#gb-fv-1):not(#gb-fv-2):not(#gb-fv-3),
.gb-search-collections .gb-search-collections__item:focus-visible:not(#gb-fv-0):not(#gb-fv-1):not(#gb-fv-2):not(#gb-fv-3){
  outline-offset: -2px !important;
  box-shadow: 0 0 2px 0 rgba(18, 18, 18, .3) !important;
}

/* Dark backgrounds (hero photo, reviews photo viewer + pop-ups, preview bar):
   Dawn's inverted scheme, white ring at 50% with a dark gap. */
:is(.gb-home-hero, .gbr-lb, .gbr-modal, .gbr-pbar) :is(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible:not(#gb-fv-0):not(#gb-fv-1):not(#gb-fv-2):not(#gb-fv-3){
  outline-color: rgba(255, 255, 255, .5) !important;
  box-shadow: 0 0 0 3px #121212, 0 0 5px 4px rgba(255, 255, 255, .3) !important;
}

/* Fields with no focus state until now (header search, reviews sort), Dawn field
   focus: border turns #121212 and doubles to 2px while in use. No glow. */
.gb-search__form input[type="search"]:focus:not(#gb-fv-0):not(#gb-fv-1):not(#gb-fv-2):not(#gb-fv-3),
.gbr select.gbr-select:focus:not(#gb-fv-0):not(#gb-fv-1):not(#gb-fv-2):not(#gb-fv-3){
  border-color: #121212 !important;
  box-shadow: 0 0 0 1px #121212 !important;
}

/* =========================================================
   Product cards: title turns brand azure (#1cbcff), as on the Shopify store.
   - Computer: while the mouse is over the card. Only on devices that can hover,
     so a phone never keeps an azure title "stuck" after a scroll.
   - Tap / click / Enter that opens the product: .gb-card-opening (added by gb-focus.js) until the product page opens.
     A finger resting on a card, or scrolling over it, changes nothing. No fade on touch screens: the colour
     changes at once (gb-focus.js lets it show before the page changes).
   - Keyboard: while the card has focus.
   The ID part only raises priority over the per-page card title rules (black, !important).
========================================================= */
@media (hover: hover){
  ul.products li.product .woocommerce-loop-product__title:not(#gb-fv-0){
    transition: color .15s ease;
  }

  ul.products li.product:hover .woocommerce-loop-product__title:not(#gb-fv-0){
    color: #1cbcff !important;
  }
}

ul.products li.product a:focus-visible .woocommerce-loop-product__title:not(#gb-fv-0),
ul.products li.product.gb-card-opening .woocommerce-loop-product__title:not(#gb-fv-0){
  color: #1cbcff !important;
}