/* Growing Automation — accessibility + mobile usability layer.
   Loaded after the theme. Everything here is additive: it adds missing focus
   indicators, touch-target sizes, a skip link, reduced-motion support and a mobile
   header that fits. It does not restyle the site. */

/* ---------- skip link ---------- */
.skip-link{position:absolute;left:12px;top:0;z-index:100000;transform:translateY(-260%);background:#0b1520;color:#fff !important;padding:12px 18px;border-radius:0 0 12px 12px;font-weight:700;text-decoration:none;transition:transform .15s ease-out}
.skip-link:focus{transform:none;outline:3px solid #f5a623;outline-offset:0}
main:focus{outline:none}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- visible keyboard focus (the theme removes outlines in 11 places) ---------- */
html body a:focus-visible,html body button:focus-visible,html body input:focus-visible,
html body select:focus-visible,html body textarea:focus-visible,html body summary:focus-visible,
html body [tabindex]:focus-visible,html body [role="button"]:focus-visible,html body [role="menuitem"]:focus-visible{
  outline:3px solid #0b6fd1 !important;outline-offset:2px !important;box-shadow:0 0 0 2px #fff !important;border-radius:6px}
html.dark body a:focus-visible,html.dark body button:focus-visible,html.dark body input:focus-visible,
html.dark body select:focus-visible,html.dark body textarea:focus-visible,html.dark body summary:focus-visible,
html.dark body [tabindex]:focus-visible,html.dark body [role="button"]:focus-visible,html.dark body [role="menuitem"]:focus-visible,
html body .top-bar :focus-visible,html body .main-footer :focus-visible,html body .mobile-bottom-nav :focus-visible{
  outline-color:#ffc266 !important;box-shadow:0 0 0 2px #0b1520 !important}

/* ---------- touch behaviour ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
a,button,input,select,summary,label,[role="button"],[role="menuitem"]{touch-action:manipulation}
.mobile-bottom-nav{padding-bottom:env(safe-area-inset-bottom)}

/* ---------- phones and tablets ---------- */
@media (max-width:820px),(pointer:coarse){
  /* targets of at least 44 x 44 px for the controls people tap most */
  .icon-btn,.wishlist-btn,.qty-btn,.carousel-btn,.dropdown-toggle,.m-cat-pill,.mbn-item,
  .mobile-menu-toggle,.theme-toggle{min-width:44px;min-height:44px}
  .main-header .logo{min-height:44px;align-items:center}
  .mobile-menu a{min-height:44px;display:flex;align-items:center}
  /* footer link lists: 16 px tall rows were too small to hit */
  .main-footer a{display:inline-block;padding:8px 0;min-height:32px;line-height:1.4}
  .main-footer .footer-social a{display:inline-flex;padding:0;min-height:44px;min-width:44px}
  .main-footer .footer-legal a,.main-footer .footer-bottom a{padding:8px 4px}
  /* check boxes and radio buttons were ~13 px */
  input[type="checkbox"],input[type="radio"]{width:24px;height:24px}
  .filter-opt{min-height:44px;display:flex;align-items:center;gap:10px}
}
/* 16 px text in form fields stops iOS from zooming the page when a field is tapped */
@media (max-width:820px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{font-size:16px !important}
}

/* the theme re-sets some form fields to 14px at <=480px with !important and a more specific
   selector; match those selectors so the 16px rule (no iOS zoom on focus) still wins */
@media (max-width:820px){
  html body .form-group :is(input,select,textarea),html body .profile-form :is(input,select,textarea),
  html body .rfq-field :is(input,select,textarea),html body .quote-form :is(input,select,textarea),
  html body .fld :is(input,select,textarea){font-size:16px !important}
}

/* ---------- mobile header that actually fits ----------
   At 375 px the logo (246 px) + four icons (194 px) made the header 456 px wide, pushing the
   menu button off screen. Search, cart and account are all in the bottom bar, so the header
   keeps the logo, theme switch and menu button. */
@media (max-width:560px){
  .main-header .nav-actions .cart-btn,
  .main-header .nav-actions .login-nav-btn,
  .main-header .nav-actions button.icon-btn[aria-label="Search"]{display:none !important}
  .main-header .nav-container{gap:8px}
  .main-header .logo{min-width:0;flex:1 1 auto}
  .main-header .logo-text{min-width:0}
  .main-header .logo-title{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .main-header .logo-tagline{display:none}
  .main-header .nav-actions{flex:0 0 auto;gap:4px}
}

/* ---------- motion ---------- */
.a11y-pause{position:absolute;right:12px;top:-6px;z-index:5;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid #c2cfdf;background:rgba(255,255,255,.95);color:#0b1520;font:700 .8rem system-ui,sans-serif;cursor:pointer}
html.dark .a11y-pause{background:rgba(20,32,51,.95);color:#e8eef6;border-color:#26364d}
.brands-track:hover,.brands-track:focus-within{animation-play-state:paused !important}
html.ga-paused *,html.ga-paused *::before,html.ga-paused *::after{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .brands-track{animation:none !important}
  .a11y-pause{display:none}
}

/* products page: the "search within results" field collapsed to 10 px on phones because
   the theme's width:100% is ignored when the flex basis is 0 */
@media (max-width:640px){
  .shop-toolbar .shop-search{flex:1 1 100% !important}
  .shop-toolbar .shop-count{flex:1 1 100%}
  .crumbs a{display:inline-block;padding:8px 2px}
  .product-card h4 a{display:inline-block;padding:4px 0}
  .pagination button{min-width:44px;min-height:44px}
}

/* ---------- pause control: a small round icon instead of a text pill ----------
   The label text stays in the button for screen readers and translations; only the icon shows. */
html body .a11y-pause{display:none !important}
html body .a11y-pause-unused{font-size:0 !important;gap:0 !important;width:36px;height:36px;min-height:36px !important;padding:0 !important;
  right:14px;top:auto;bottom:10px;justify-content:center;border-radius:50% !important;opacity:.45;
  transition:opacity .15s ease-out,transform .15s ease-out;box-shadow:0 1px 4px rgba(11,21,32,.15)}
html body .a11y-pause::before{content:"\275A\275A";font-size:.62rem;letter-spacing:2px;line-height:1;margin-left:2px}
html body .a11y-pause[aria-pressed="true"]::before{content:"\25B6";font-size:.7rem;letter-spacing:0;margin-left:2px}
html body .a11y-pause:hover,html body .a11y-pause:focus-visible,.brands:hover .a11y-pause,.brands-bar:hover .a11y-pause{opacity:1}
html body .a11y-pause:active{transform:scale(.94)}

/* ---------- logo: the mark now has a transparent background, so it sits directly on the
   header instead of inside a bordered white box / circle ---------- */
html body .logo-icon.logo-icon.logo-icon{
  border:0 !important;border-radius:0 !important;padding:0 !important;background:transparent !important;
  box-shadow:none !important;width:44px !important;height:44px !important;object-fit:contain !important;
  filter:drop-shadow(0 1px 2px rgba(11,21,32,.18))}
html body .main-footer .logo-icon.logo-icon.logo-icon{width:44px !important;height:44px !important}
html.dark body .logo-icon.logo-icon.logo-icon{filter:drop-shadow(0 0 1px rgba(255,255,255,.35))}
html body .logo{gap:10px !important}
@media (max-width:560px){
  html body .main-header .logo-icon.logo-icon.logo-icon{width:38px !important;height:38px !important}
}