/*
 * General LED — accessibility corrections
 *
 * This layer is intentionally loaded after the responsive styles so that
 * accessibility fixes have one predictable override point. Keep visual
 * refinements in the component stylesheets; keep only measurable a11y rules
 * here (contrast, hit areas and focusable controls).
 */

:root {
  --brand-action: #0b78ad;
}

/* Filled benefit cards use this text over dark color surfaces. Keep the
 * supporting copy opaque so contrast is not reduced by inherited opacity. */
.benefit-grid .benefit-card > a > span,
.benefit-grid .benefit-card > a > small,
.benefit-grid .benefit-card > a > em,
.benefit-grid .benefit-card > button > span,
.benefit-grid .benefit-card > button > small,
.benefit-grid .benefit-card > button > em {
  color: #fff;
  opacity: 1;
}

/* Keep the visible dot design while giving each carousel control a usable
 * touch target. */
.slide-control,
.rail-button {
  width: 44px;
  height: 44px;
}

.hero-dots button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  background: transparent;
}

.hero-dots button.is-active {
  border: 0;
  background: transparent;
}

.hero-dots button::before {
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  content: "";
}

.hero-dots button.is-active::before {
  border-color: var(--brand);
  background: var(--brand);
}

/* Preserve contrast for filled actions and supporting text on the light
 * surfaces. The action blue is intentionally darker than the brand blue used
 * for decorative elements and large headings. */
.shop-order-form button,
.shop-product-buttons .shop-buy-link,
.shop-help-block a,
.shop-empty a,
.product-empty a,
.single-product-buy-button,
.single-product-native-cart .single_add_to_cart_button:not(:disabled),
.general-product-sticky-button:not(:disabled) {
  background-color: var(--brand-action);
}

.shop-order-form button:hover,
.shop-order-form button:focus-visible,
.shop-product-buttons .shop-buy-link:hover,
.shop-product-buttons .shop-buy-link:focus-visible,
.shop-help-block a:hover,
.shop-help-block a:focus-visible,
.shop-empty a:hover,
.shop-empty a:focus-visible,
.product-empty a:hover,
.product-empty a:focus-visible,
.single-product-buy-button:hover,
.single-product-buy-button:focus-visible,
.single-product-native-cart .single_add_to_cart_button:not(:disabled):hover,
.single-product-native-cart .single_add_to_cart_button:not(:disabled):focus-visible,
.general-product-sticky-button:not(:disabled):hover,
.general-product-sticky-button:not(:disabled):focus-visible {
  background-color: var(--brand-dark);
}

.single-product-related-card__action:hover,
.single-product-related-card__action:focus-visible,
.single-product-accessory-card__action:hover,
.single-product-accessory-card__action:focus-visible {
  background-color: var(--brand-action);
}

.search-form input::placeholder,
.search-form--fibosearch input.dgwt-wcas-search-input::placeholder {
  color: var(--muted) !important;
  opacity: 1;
}

/* Interactive controls use the WCAG-friendly 44px minimum without enlarging
 * ordinary text links or changing the dimensions of product content. */
.shop-view-toggle {
  min-height: 52px;
}

.shop-view-toggle button,
.shop-order-form select,
.shop-order-form button,
.shop-product-buttons :is(a, button),
.shop-quantity-control button,
.shop-quantity-control input {
  min-height: 44px;
}

.shop-order-form select,
.shop-order-form button {
  height: 44px;
}

.shop-quantity-control {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  min-height: 44px;
}

.single-product-buy-button,
.single-product-native-cart .single_add_to_cart_button,
.single-product-support a,
.general-clear-variations-button,
.single-product-attribute-carousel-arrow,
.single-product-related-card__action,
.single-product-accessory-card__action,
.general-product-sticky-button {
  min-height: 44px;
}

.single-product-thumb-nav,
.single-product-related__nav,
.single-product-accessories__nav {
  width: 44px;
  height: 44px;
  min-height: 44px;
}

.single-product-thumb-nav {
  flex-basis: 44px;
}

.single-product-attribute-carousel-arrow {
  width: 44px;
  height: 44px;
}

.home-info-modal-close,
.site-header .category-panel-close {
  min-width: 44px;
  min-height: 44px;
}

.site-header .category-panel-close {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
}