/* Shared usability + accessibility layer. Loaded last on every page so it
   refines (never replaces) each page's own inline styles. */

/* Skip link — visible only when focused */
.skip-link { position: absolute; left: 12px; top: -64px; z-index: 100000; background: #fff; color: #000; padding: 12px 18px; border-radius: 10px; font: 600 14px/1.2 'Inter', -apple-system, 'Segoe UI', sans-serif; text-decoration: none; transition: top .12s; }
.skip-link:focus { top: 12px; outline: 3px solid #FF073A; outline-offset: 2px; }
main { display: block; }
main:focus { outline: none; }

/* Visible keyboard focus everywhere (pages previously removed outlines) */
a:focus-visible, button:focus-visible, summary:focus-visible,
[role="button"]:focus-visible, [role="tab"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid #FF073A; outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #FF073A !important; outline-offset: 1px; }

/* Readable form labels + placeholders */
.form-label, .field label { font-size: 12px !important; color: rgba(255,255,255,0.72) !important; letter-spacing: 0.2px; }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.4) !important; }

.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; }

/* Field-level validation */
.field-error { color: #ff8a80; font-size: 12px; line-height: 1.4; margin-top: 4px; }
[aria-invalid="true"] { border-color: #ff5a4d !important; }

/* 16px+ inputs on small screens so iOS doesn't zoom on focus */
@media (max-width: 820px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  select, textarea { font-size: 16px !important; }
}

/* 44x44px tap targets: an invisible hit area grows around small controls,
   so icons, spacing and layout stay exactly as designed. */
.nav-toggle, .nav-cart, .cart-close, .cart-remove { position: relative; }
.nav-toggle::after, .nav-cart::after, .cart-close::after, .cart-remove::after, .ap-close::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}
.faq-item [role="button"] { cursor: pointer; }

/* Sections targeted by in-page anchors shouldn't hide under fixed UI */
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }