/** Shopify CDN: Minification failed

Line 81:2 Unexpected ")"

**/
/* WCAG focus indicators (2.4.7 / 2.4.11 / 2.4.13)
   - Keyboard focus: visible 2px ring with offset
   - Mouse focus: suppressed when :focus-visible is supported
   - Uses outline + box-shadow to reduce clipping risk
*/

:root {
  --focus-ring-color: #1B3A5C;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}

/* Fallback: browsers without :focus-visible still get a focus ring via :focus. */
a[href]:focus,
button:focus,
input:focus,
input[type]:focus,
select:focus,
textarea:focus,
summary:focus,
[role="button"]:focus,
[tabindex]:not([tabindex="-1"]):focus {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* Prefer :focus-visible where supported (keyboard shows ring, mouse typically does not). */
@supports selector(:focus-visible) {
  a[href]:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  input:focus:not(:focus-visible),
  input[type]:focus:not(:focus-visible),
  select:focus:not(:focus-visible),
  textarea:focus:not(:focus-visible),
  summary:focus:not(:focus-visible),
  [role="button"]:focus:not(:focus-visible),
  [tabindex]:not([tabindex="-1"]):focus:not(:focus-visible),
  .banner-grid-section__item:has( a[href].btn--link:focus:not(:focus-visible)) {
    outline: none;
    box-shadow: none;
  }

  a[href]:focus-visible,
  button:focus-visible,
  input:focus-visible,
  input[type]:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [role="button"]:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus-visible,
  .banner-grid-section__item:has( a[href].btn--link:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  }

  [role="button"].smartwishlist.sw_tooltip.tooltip:focus-visible {
    z-index: 15 !important;
  }

  /* Reduce the chance of focus being visually covered without changing layout.
     Uses :where() to keep specificity at 0 so component positioning rules win. */
  :where(
    a[href]:focus-visible,
    button:focus-visible,
    input:focus-visible,
    input[type]:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    summary:focus-visible,
    [role="button"]:focus-visible,
    [tabindex]:not([tabindex="-1"]):focus-visible,
    .banner-grid-section__item:has( a[href].btn--link:focus-visible),
  ) {
    position: relative;
    z-index: 2;
  }
}

/* PDP size and colour options (2026-11-03, Nov 3 audit N4, SC 2.4.7).
   The native radio is opacity:0, so its own ring is invisible and focus was
   shown only by the selected fill. Draw the ring on the visible label/swatch. */
.input-radio__input:focus-visible + .input-radio__label,
.input-swatch__input:focus-visible ~ .swatch .swatch__fill,
.input-swatch__input:focus-visible ~ [data-component="swatch"] .swatch__fill {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* hCaptcha badge (2026-11-03, WCAG audit C2, SC 2.4.7).
   Shopify injects #shop-hcaptcha-badge-container once a newsletter field is
   focused. Its own CSS parks it at left: calc(100vw - 56px), so only the
   44px logo shows, and slides it out only on :hover. Its "Privacy" and
   "Terms" links stay in the Tab order, so keyboard users landed on two
   invisible stops. Apply the same slide-out transform while one of its links
   holds focus, and lift it above the Shopify Inbox chat button, which covers
   the bottom right corner. */
#shop-hcaptcha-badge-container:focus-within {
  transform: translateX(calc(-100% + 56px));
  bottom: 88px;
}

/* Cart express checkout on phones (2026-11-03, WCAG audit C3, SC 1.4.10).
   Below 720px .cart__checkout-buttons is a column flexbox with
   align-items: flex-end, and the dynamic checkout wrapper has no intrinsic
   width, so it collapsed to 0px at the right edge and pushed Shop Pay and
   PayPal off the screen (5px visible, 5px of horizontal scroll). Stretch it
   to the full column width like the Checkout button above it. */
@media screen and (max-width: 719.98px) {
  .cart__checkout-buttons .cart__dynamic-checkout-buttons {
    align-self: stretch;
    width: 100%;
  }
}