:root { --sac-quick-access-sticky-top: 0px; --sac-quick-access-placeholder-height: 0px; --sac-quick-access-scroll-offset: 56px; --sac-quick-access-fixed-top: 0px; --sac-quick-access-fixed-left: 0px; --sac-quick-access-fixed-width: 100%; --sac-quick-access-activation-tolerance: 96px; } .sac-quick-access__sentinel { display: block; height: 0; overflow: hidden; } .sac-quick-access__sentinel.has-placeholder { height: var(--sac-quick-access-placeholder-height, 0px); } .sac-quick-access { background: var(--ast-global-color-4, #ffffff); background: color-mix(in srgb, var(--ast-global-color-4, #ffffff) 94%, transparent); border-block: 1px solid var(--ast-global-color-7, #e0e0e0); color: var(--ast-global-color-2, #3a3a3a); display: block; margin: 0.85rem 0 2rem; overflow: visible; padding: 0.6rem 0; position: sticky; top: var(--sac-quick-access-sticky-top, 0px); top: max(var(--sac-quick-access-sticky-top, 0px), env(safe-area-inset-top, 0px)); z-index: 1000; } .sac-quick-access__title { background: var(--ast-global-color-4, #ffffff); background: color-mix(in srgb, var(--ast-global-color-4, #ffffff) 94%, transparent); color: var(--ast-global-color-3, #3a3a3a); font-size: 0.75rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; padding: 0 0.35rem; position: absolute; left: 0.55rem; top: 0; text-transform: uppercase; transform: translateY(-50%); transition: opacity 120ms ease, visibility 120ms ease; } .sac-quick-access.is-stuck .sac-quick-access__title { opacity: 0; visibility: hidden; } .sac-quick-access__inner { display: flex; flex-wrap: nowrap; gap: 0.45rem; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 0.2rem 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } .sac-quick-access__inner::-webkit-scrollbar { display: none; } .sac-quick-access__link { align-items: center; background: var(--ast-global-color-6, #f0f0f0); border: 1px solid var(--ast-global-color-7, #e0e0e0); border-radius: 999px; color: var(--ast-global-color-2, #3a3a3a); display: inline-flex; flex: 0 0 auto; font-size: 0.875rem; font-weight: 600; line-height: 1.2; min-height: 2rem; padding: 0.35rem 0.75rem; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; white-space: nowrap; } .sac-quick-access__link.is-active { background: var(--ast-global-color-0, #1e73be); border-color: var(--ast-global-color-0, #1e73be); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ast-global-color-8, #ffffff) 38%, transparent); color: var(--ast-global-color-8, #ffffff); text-decoration: none; } @media (hover: hover) and (pointer: fine) { .sac-quick-access__link:hover { background: var(--ast-global-color-0, #1e73be); border-color: var(--ast-global-color-0, #1e73be); color: var(--ast-global-color-8, #ffffff); text-decoration: none; } } .sac-quick-access__link:focus-visible { outline: 2px solid var(--ast-global-color-0, #1e73be); outline-offset: 3px; text-decoration: none; } #facts, #gallery, #description, #related, #products, #breaks, #checklist, #faq { scroll-margin-top: var(--sac-quick-access-scroll-offset, 0px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (max-width: 768px) { :root { --sac-quick-access-sticky-top: 0px; } .sac-quick-access.is-stuck { box-sizing: border-box; left: var(--sac-quick-access-fixed-left, 0px); margin: 0; padding: calc(0.62rem + env(safe-area-inset-top, 0px)) 1rem 0.62rem; position: fixed; right: auto; top: var(--sac-quick-access-fixed-top, 0px); transform: translateZ(0); width: var(--sac-quick-access-fixed-width, 100%); z-index: 99999; } } @media (max-width: 544px) { .sac-quick-access { margin-bottom: 1.8rem; padding-block: 0.62rem; } .sac-quick-access__inner { gap: 0.4rem; margin-inline: -0.25rem; padding-inline: 0.25rem; } .sac-quick-access__link { font-size: 0.8375rem; min-height: 1.9rem; padding-inline: 0.7rem; } }