/* Phase 6, feature 15 — the accessibility and mobile pass.
   Additive on purpose: it changes how controls behave for a keyboard, a thumb or a dim screen, and
   leaves every colour, size and layout decision that the templates own alone. */

/* Keyboard first: a focus ring that is impossible to miss, on everything a customer can reach. It only
   appears for keyboard users, so a mouse click never draws a box around a button. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent,#2f5bff);
  outline-offset:2px;
  border-radius:4px;
}
/* Inside a dark or coloured bar the accent ring can vanish, so the header and the mobile bar get a
   ring in the colour that contrasts with them. */
.store-header a:focus-visible,.store-header button:focus-visible,.mobile-store-nav a:focus-visible{
  outline:3px solid #ffffff;
  outline-offset:-2px;
}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

/* Tap targets: nothing a thumb has to hit is smaller than 44px in either direction. This is the one
   accessibility rule that also fixes real-world complaints from a phone. */
.button,.header-action,.store-pill-nav a,.store-rail a,.mobile-store-nav a,.store-pagination a,.filter-chip,.pagination a,
.save-button,.card-add,.choose,.product-save button,.cart-line button,.quantity-control button,.search-icon,
.store-footer a,.skip-link,.footer-info-links a,.rail-children a{
  min-height:44px;
}
.button,.header-action,.card-add,.quantity-control button,.mobile-store-nav a,.filter-chip{min-width:44px}
.card-add,.button.compact{padding-block:10px}
.quantity-control button{width:44px}
.store-footer nav a,.footer-info-links a{display:inline-flex;align-items:center}

/* Readability: the smallest text on the site is raised to a size that survives a phone at arm's length,
   and muted copy is darkened just enough to keep its contrast when it is that small. */
body{--muted-readable:#5f5a4f}
.muted.small,.section-note,.store-footer small,.muted.small a{font-size:max(.82rem,13px)}
.section-title>small,.filter-title,.shop-category,.store-footer,.analytics-note{font-size:max(.78rem,12px)}
body .muted.small,body .section-note,body .store-footer span{color:var(--muted-readable,var(--muted,#78705f))}

/* Long words and pasted URLs must never push a phone sideways. */
.shop-card-body,.product-info,.info-card,.policy-body,.prose,.store-notice{overflow-wrap:anywhere}

/* Motion: honour the system setting rather than animating regardless. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* A phone in landscape or a small tablet should not lose the mobile bar just because it is wide. */
@media (max-width:900px){
  .mobile-store-nav{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
}
@media (min-width:901px) and (max-height:520px){
  .mobile-store-nav{display:flex}
}