/* MY-PC visual accessibility remediation, 2026-09-29.
 * Load AFTER imagine.css and Woo/Astra CSS. No approved hero artwork or
 * ordinary hero positioning is changed. This file is not a compliance claim.
 */

/* Explicit targets also work when native Woo markup has no .woocommerce wrapper. */
#app .business-band h2,
#app .business-band h3 { color: #fff; }
#app .business-band p { color: #fff; }
#app .business-band { background: linear-gradient(110deg, #082a5d, #084fa6); }
body.gaming-theme #app .native-product :is(.summary, .related, .upsells) .price {
  color: #f6f9ff !important;
}
body.gaming-theme #app .native-product :is(.summary, .related, .upsells) .price
  :is(ins, .amount, bdi, .woocommerce-Price-currencySymbol) {
  color: inherit !important;
}
body.gaming-theme #app .native-product :is(.summary, .related, .upsells) .price del {
  color: #becfe3 !important;
  opacity: 1;
}

/* A two-colour focus ring remains visible on both pale and dark surfaces. */
#app :focus-visible,
.elementor-popup-modal :focus-visible,
.service-dialog :focus-visible {
  outline: 3px solid #082b57 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px #fff !important;
}
#app .searchbox:focus-within {
  outline: 3px solid #082b57;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}
#app .searchbox { min-height: 44px; height: auto; padding-inline-end: 3px; }
#app .searchbox input { min-width: 0; min-height: 44px; }
#app .searchbox button { flex: 0 0 44px; min-width: 44px; min-height: 44px; }

/* Touch targets and labels may grow vertically instead of clipping text. */
#app .btn {
  min-height: 44px;
  height: auto;
  max-width: 100%;
  white-space: normal;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}
#app .product-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#app .product-actions .btn {
  flex: 1 1 9rem;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  font-size: .9375rem;
  white-space: normal;
  margin-top: 0;
}
#app .product-body { min-width: 0; }
#app .product-body h3 { overflow-wrap: anywhere; line-height: 1.5; }
#app .product-body h3 a { display: inline-block; padding-block: 4px; }
#app .product-actions .icon { flex: 0 0 18px; }
#app :is(.storefront-control, .storefront-dots button,
  .access-panel .access-close, .footer-social a, .social a,
  .shop-pagination a, .gaming-pagination a) {
  min-width: 44px;
  min-height: 44px;
  height: auto;
}
#app .storefront-controls { flex-wrap: wrap; }
#app .storefront-dots { flex-wrap: wrap; gap: 4px; }
#app .access-panel .access-close { flex-basis: 44px; }
#app .footer-grid a:not(.brand) { min-height: 44px; padding-block: 10px; }
#app .utility-contact a { display: inline-flex; align-items: center; min-height: 24px; }
#app .mainnav a { min-height: 44px; }
.elementor-popup-modal .dialog-close-button { min-width: 44px; min-height: 44px; }

/* Replace nested em amplification in the existing display setting.
 * Browser zoom remains available. This setting is NOT a replacement for it.
 */
.access-large #app { font-size: 1.125rem; }
.access-large #app :is(p, a, button, label, input, select, textarea) {
  font-size: 1.125rem;
}
.access-large #app .product-actions .btn { font-size: 1.125rem; }
.access-large #app :is(.product-body h3, .product-type) { font-size: 1.125rem; }
.access-large #app :is(.hero-copy, .support-hero-copy, .gaming-hero-copy) {
  overflow-wrap: anywhere;
}
#app .access-panel {
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.service-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* Mobile reading order matches the DOM: choose components, then review. */
@media (max-width: 900px) {
  #app .builder-summary { order: 0; position: static; }
}
@media (max-width: 760px) {
  #app .product-body h3 { font-size: 1rem; }
  #app .floating-tools > :is(a, button) { min-width: 44px; min-height: 44px; }
  #app :is(.shop-category-nav, .gaming-category-nav) {
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px 20px;
  }
  #app :is(.shop-toolbar, .gaming-toolbar) input { padding-inline-end: 54px; }
}
@media (max-width: 600px) {
  .access-large #app :is(.product-grid, .shop-layout .product-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  .access-large #app :is(.section-heading.split, .shop-heading-actions) {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
  }
}
@media (max-width: 360px) {
  #app :is(.product-grid, .shop-layout .product-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Shared WooCommerce UI. A local palette prevents dark text on dark surfaces. */
#app :is(.native-product, .woo-flow) {
  --commerce-bg: #fff;
  --commerce-panel: #f4f8fd;
  --commerce-ink: #10294d;
  --commerce-muted: #415b79;
  --commerce-border: #71839a;
  --commerce-action: #064f9b;
  --commerce-action-ink: #fff;
  --commerce-link: #064f9b;
}
body.gaming-theme #app :is(.native-product, .woo-flow) {
  --commerce-bg: #101b2a;
  --commerce-panel: #182b42;
  --commerce-ink: #f6f9ff;
  --commerce-muted: #becfe3;
  --commerce-border: #889fb9;
  --commerce-action: #a7ccff;
  --commerce-action-ink: #081323;
  --commerce-link: #a7ccff;
}
#app :is(.native-product, .woo-flow) #woo-native-target {
  color: var(--commerce-ink);
  overflow-wrap: anywhere;
}
#app :is(.native-product, .woo-flow) #woo-native-target
  :is(button.button, a.button, input.button, button.single_add_to_cart_button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 11px 20px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--commerce-action);
  color: var(--commerce-action-ink);
  font-family: Rubik, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.5;
  text-align: center;
  white-space: normal;
  text-decoration: none;
}
#app :is(.native-product, .woo-flow) #woo-native-target
  :is(button.button, a.button, input.button):hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}
#app :is(.native-product, .woo-flow) #woo-native-target
  :is(button.button, input.button):disabled { cursor: not-allowed; }
#app :is(.native-product, .woo-flow) #woo-native-target
  :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']), select, textarea) {
  min-height: 48px;
  max-width: 100%;
  border: 1px solid var(--commerce-border);
  border-radius: 7px;
  background: var(--commerce-bg);
  color: var(--commerce-ink);
  font-family: Rubik, Arial, sans-serif;
  font-size: 1rem;
  padding: 10px 12px;
}
#app :is(.native-product, .woo-flow) #woo-native-target
  :is(input, textarea)::placeholder { color: var(--commerce-muted); opacity: 1; }
#app :is(.native-product, .woo-flow) #woo-native-target
  :is(input[type='checkbox'], input[type='radio']) { accent-color: var(--commerce-action); }
#app :is(.native-product, .woo-flow) #woo-native-target label {
  color: var(--commerce-ink);
  line-height: 1.6;
}
#app :is(.native-product, .woo-flow) #woo-native-target a:not(.button):not(.woocommerce-product-gallery__trigger) {
  color: var(--commerce-link);
  text-underline-offset: .18em;
}
#app .woo-flow #woo-native-target :is(.lost_password a, .woocommerce-privacy-policy-link) {
  text-decoration: underline;
}
#app :is(.native-product, .woo-flow) #woo-native-target
  :is(.woocommerce-tabs, .woocommerce-Tabs-panel, form.login, form.register,
    .woocommerce-info, .woocommerce-message, .woocommerce-error, .cart_totals,
    #payment, #payment .payment_box, table.shop_table) {
  background: var(--commerce-bg);
  color: var(--commerce-ink);
  border-color: var(--commerce-border);
}
#app :is(.native-product, .woo-flow) #woo-native-target
  :is(.woocommerce-tabs, .woocommerce-Tabs-panel, #payment, .cart_totals)
  :is(p, h2, h3, label, th, td) { color: var(--commerce-ink); }
#app .native-product #woo-native-target .woocommerce-tabs ul.tabs li {
  background: var(--commerce-panel);
  border-color: var(--commerce-border);
}
#app .native-product #woo-native-target .woocommerce-tabs ul.tabs li.active {
  background: var(--commerce-bg);
  border-bottom: 3px solid var(--commerce-action);
}
#app .native-product #woo-native-target .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  min-height: 44px;
  padding: 10px 16px;
  white-space: normal;
}
#app .native-product #woo-native-target form.cart { flex-wrap: wrap; gap: 12px; }
#app .native-product #woo-native-target .quantity .qty { width: 5rem; }

/* Password visibility gets its existing accessible name as visible text.
 * The Woo script continues to own aria-label and the input state.
 */
#app .woo-flow #woo-native-target .password-input { padding-bottom: 52px; }
#app .woo-flow #woo-native-target button.show-password-input {
  position: absolute;
  inset: auto 0 0 auto;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--commerce-panel);
  color: var(--commerce-ink);
  border: 1px solid var(--commerce-border);
  border-radius: 7px;
  font: 500 .9375rem/1.5 Rubik, Arial, sans-serif;
}
#app .woo-flow #woo-native-target button.show-password-input::before { content: none; }
#app .woo-flow #woo-native-target button.show-password-input::after {
  content: attr(aria-label);
  display: inline;
  position: static;
  font: inherit;
}

/* Motion preference overrides the later smooth-scroll declaration in the base CSS. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
html.access-motion, html:has(body.access-motion) { scroll-behavior: auto !important; }

/* OS high-contrast support. Preserve user colours instead of forcing brand colours. */
@media (forced-colors: active) {
  #app :focus-visible, .elementor-popup-modal :focus-visible, .service-dialog :focus-visible {
    outline: 3px solid Highlight !important;
    box-shadow: none !important;
  }
  #app :is(.btn, button, input, select, textarea, .product-card) {
    border: 1px solid ButtonText;
  }
  #app :is(.hero-copy, .support-hero-copy, .gaming-hero-copy) {
    background: Canvas;
    color: CanvasText;
  }
  #app .storefront-dots button::before { background: ButtonText; }
  #app .storefront-dots button[aria-current='true']::before { background: Highlight; }
}
/* Append after the theme stylesheet. These rules do not change the approved hero. */
.a11y-screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;top:8px;inset-inline-start:8px;z-index:100000;background:#fff;color:#08224b;padding:12px 20px;border:2px solid #08224b;border-radius:4px;font-weight:600;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0);outline:3px solid #005fcc;outline-offset:3px}
.my-pc-imagine :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #005fcc!important;outline-offset:3px!important}
.my-pc-imagine.gaming-theme :is(a,button,input,select,textarea,summary):focus-visible{outline-color:#a8d5ff!important}
.my-pc-imagine .searchbox:focus-within{outline:3px solid #005fcc;outline-offset:3px}
.my-pc-imagine.gaming-theme .searchbox:focus-within{outline-color:#a8d5ff}
.my-pc-imagine .show-password-input[data-mypc-a11y]{position:static!important;display:inline-flex!important;align-items:center;justify-content:center;min-width:44px;min-height:44px;width:auto!important;height:auto!important;padding:8px 12px!important;margin-top:6px;background:#eef5ff!important;color:#08224b!important;border:1px solid #7894b8!important;border-radius:5px;font-size:14px!important;line-height:1.4!important;font-family:inherit!important}
.my-pc-imagine .show-password-input[data-mypc-a11y]::before,.my-pc-imagine .show-password-input[data-mypc-a11y]::after{display:none!important}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}

/* Final-pass candidate: explicit RTL for the native WooCommerce surfaces. */
#app .woo-flow,
#app .woo-flow #woo-native-target,
#app .woo-flow #woo-native-target :is(.woocommerce, form, fieldset, table, .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
  direction: rtl;
  text-align: start;
}
#app .woo-flow #woo-native-target :is(input[type='email'], input[type='tel']) {
  direction: ltr;
  text-align: left;
}
#app .woo-flow #woo-native-target :is(.select2-container, .select2-dropdown, .select2-results) {
  direction: rtl;
  text-align: start;
}

/* Replace the prominent blue search rectangle with a high-contrast neutral focus treatment. */
.my-pc-imagine .searchbox:focus-within,
.my-pc-imagine.gaming-theme .searchbox:focus-within {
  outline: 2px solid #161f2d;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
.my-pc-imagine .searchbox :is(input, button):focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.my-pc-imagine .searchbox button:focus-visible {
  border-radius: 50%;
  background: #161f2d;
  color: #fff;
}
@media (forced-colors: active) {
  .my-pc-imagine .searchbox:focus-within,
  .my-pc-imagine.gaming-theme .searchbox:focus-within {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
  .my-pc-imagine .searchbox button:focus-visible {
    background: ButtonFace;
    color: ButtonText;
  }
}