/* ============================================================ MV STYLES — FOUNDATION Accessibility + motion baseline. Loaded LAST in . Additive only — no layout/visual changes to existing components beyond adding focus rings and honouring reduced-motion. ============================================================ */ /* ---------- Visible keyboard focus (was missing site-wide) ---------- */ a, button, input, select, textarea, summary, [tabindex], [role="button"], .btn, .product-card, .dropdown-item, .suggestion-item { outline: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, .btn:focus-visible, .product-card:focus-visible, .dropdown-item:focus-visible, .suggestion-item:focus-visible { outline: 2px solid var(--focus-ring-color, #2C2826); outline-offset: 2px; border-radius: var(--radius-sm, 4px); } /* Keep the ring off for pointer users (browsers without :focus-visible get no regression) */ :focus:not(:focus-visible) { outline: none; } /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: 8px; top: 8px; z-index: var(--z-toast, 1080); padding: 10px 16px; background: var(--color-primary, #2C2826); color: #fff; border-radius: var(--radius-md, 8px); font: 600 14px/1 var(--font-primary, system-ui, sans-serif); text-decoration: none; transform: translateY(-150%); transition: transform 150ms ease; } .skip-link:focus { transform: translateY(0); color: #fff; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Stop always-on decorative loops explicitly */ .promo-slide, .promo-bar-enhanced [style*="animation"], .product-card__image[loading="lazy"] { animation: none !important; } /* Neutralise layout-shifting hover transforms */ .product-card:hover, .category-card:hover, .btn:hover, .btn-primary:hover:not(:disabled), .cart-icon:hover, .wishlist-icon:hover, .compare-icon:hover, .three-dot-menu:hover { transform: none !important; } .product-card:hover .product-card__image { transform: none !important; } } /* ---------- Small quality-of-life ---------- */ [hidden] { display: none !important; } /* Belt-and-braces against horizontal scroll from a stray wide element. `clip` (not `hidden`) so it never breaks position: sticky. */ html, body { overflow-x: clip; } /* Give icon-only controls a real hit area without changing their look */ .wishlist-icon, .compare-icon, .cart-icon, .three-dot-menu, .back-to-top, .clear-search, .camera-button, .search-button { min-width: 44px; min-height: 44px; }