/* ============================================================ 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. (.pcard/.cat-tile are the current card class names post-redesign - .product-card/.category-card were the pre-redesign names and matched nothing live; corrected here rather than left stale.) */ .pcard:hover, .cat-tile:hover, .btn:hover, .btn-primary:hover:not(:disabled), .cart-icon:hover, .wishlist-icon:hover, .compare-icon:hover, .three-dot-menu:hover { transform: none !important; } .pcard:hover .pcard__media img, .cat-tile:hover .cat-tile__img { 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; } /* ---------- Scroll-reveal utility (sitewide, opt-in via [data-reveal]) ---------- Fail-safe by construction: elements are fully visible by default. JS only adds .reveal-armed (the hidden pre-state) right before it starts observing, so a JS error or an old browser without IntersectionObserver never leaves content permanently invisible - reveal is enhancement, not a requirement. The universal prefers-reduced-motion rule above already zeroes transition durations, so armed elements still end up visible, just without motion. */ [data-reveal].reveal-armed { opacity: 0; transform: translateY(var(--reveal-distance, 24px)); transition: opacity var(--reveal-duration, 600ms) var(--ease-out), transform var(--reveal-duration, 600ms) var(--ease-out); will-change: opacity, transform; } [data-reveal].reveal-armed.is-visible { opacity: 1; transform: translateY(0); } /* 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, .search-button { min-width: 44px; min-height: 44px; }