/** Shopify CDN: Minification failed

Line 10:0 Unexpected "{"
Line 10:1 Expected identifier but found "%"
Line 11:23 Unexpected "2026"
Line 16:77 Unterminated string token
Line 23:1 Expected identifier but found "%"

**/
{%- comment -%}
  AtomOffice home page 2026 — "the quiet showroom".
  Loaded ONCE from layout/theme.liquid (2026-09-26 fix round: previously loaded
  from 8 separate sections, see WORKLOG 2026-09-26).
  2026-09-28: this is a plain static asset again. It was briefly renamed to
  .css.liquid so its @font-face rules could use the asset_url filter, but
  Shopify's asset CDN serves files under assets/ as static bytes and does not
  run the Liquid engine on them (confirmed live: served with content-type
  application/x-liquid, {{ }} tags reaching the browser unrendered, so the
  whole stylesheet silently failed to apply). The seven self-hosted
  @font-face rules now live inline in theme.liquid instead, which IS run
  through the Liquid engine on every request; everything else stays here.
  Class prefix: aoh-. Concept: HOMEPAGE-CONCEPT.md.
{%- endcomment -%}
:root {
  --aoh-ink: #141414;
  --aoh-text2: #5b5955;
  --aoh-hair: #e7e4de;
  --aoh-band: #f6f5f1;
  --aoh-accent: #f28c1e;
  --aoh-display: 'Sora', 'Manrope', system-ui, sans-serif;
  --aoh-body: 'Manrope', system-ui, sans-serif;
  --aoh-max: 1280px;
}

/* ---------- shared ---------- */
.aoh { font-family: var(--aoh-body); color: var(--aoh-ink); background: #fff; }
.aoh *, .aoh *::before, .aoh *::after { box-sizing: border-box; }
.aoh a { color: inherit; text-decoration: none; }
/* 2026-09-26: was `color: var(--aoh-accent)` on every link's hover/focus — orange
   text on white/band fails WCAG AA (2.25-2.46:1). Default cue is now an ink
   underline in the accent colour; elements needing a different cue (buttons,
   chips, whole-card links, KH/CEC nav items) get a specific override below,
   each written as `.aoh a.<class>:hover` so it ties this rule's specificity
   and wins by appearing later in the file. */
.aoh a:hover, .aoh a:focus-visible { color: var(--aoh-ink); text-decoration: underline; text-decoration-color: var(--aoh-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.aoh__inner { max-width: var(--aoh-max); margin: 0 auto; padding: 0 20px; }
@media (min-width: 990px) { .aoh__inner { padding: 0 40px; } }
.aoh--band { background: var(--aoh-band); }
.aoh--hair-top { border-top: 1px solid var(--aoh-hair); }
.aoh-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aoh-text2); }
.aoh-h2 { margin: 0; font-family: var(--aoh-display); font-size: clamp(24px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; color: var(--aoh-ink); }
.aoh-lede { margin: 0; font-size: 16px; line-height: 1.55; color: var(--aoh-text2); }
.aoh-link { font-size: 15px; font-weight: 700; border-bottom: 2px solid var(--aoh-accent); padding-bottom: 3px; white-space: nowrap; }
.aoh a.aoh-link:hover, .aoh a.aoh-link:focus-visible { color: var(--aoh-ink); text-decoration: none; }
.aoh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.aoh-head__copy { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.aoh-section { padding: 48px 0; }
@media (min-width: 990px) { .aoh-section { padding: 72px 0 80px; } }
.aoh a.aoh-btn, .aoh-btn { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; padding: 15px 26px; border-radius: 6px; border: 1.5px solid var(--aoh-ink); background: var(--aoh-ink); color: #ffffff; line-height: 1; }
/* 2026-09-26: white text on the orange fill was 2.46:1 (fails AA). Keep the
   orange fill as the hover cue, switch the label to dark ink (~7.5:1). */
.aoh a.aoh-btn:hover, .aoh a.aoh-btn:focus-visible { background: var(--aoh-accent); border-color: var(--aoh-accent); color: #141414; text-decoration: none; }
.aoh a.aoh-btn--ghost { background: transparent; color: var(--aoh-ink); }
.aoh a.aoh-btn--ghost:hover, .aoh a.aoh-btn--ghost:focus-visible { background: var(--aoh-accent); color: #141414; border-color: var(--aoh-accent); text-decoration: none; }
.aoh-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--aoh-hair); border-radius: 10px; background: #fff; }
/* 2026-10 (owner request): restored the original hover style -- title turns
   orange and a touch bolder, instead of ink + underline. Known a11y
   tradeoff (orange-on-white text), kept by the owner's explicit choice. */
.aoh a.aoh-card:hover, .aoh a.aoh-card:focus-visible { color: var(--aoh-accent); text-decoration: none; border-color: var(--aoh-accent); }
.aoh a.aoh-card:hover .aoh-card__title, .aoh a.aoh-card:focus-visible .aoh-card__title { font-weight: 700; }
.aoh-card__media { display: flex; align-items: center; justify-content: center; height: 200px; }
.aoh-card__media img { max-height: 100%; max-width: 100%; width: auto; height: auto; display: block; object-fit: contain; }
.aoh-card__title { font-family: var(--aoh-display); font-size: 18px; font-weight: 600; line-height: 1.3; }
.aoh-card__text { font-size: 14px; color: var(--aoh-text2); line-height: 1.5; }
.aoh-price { font-size: 15px; font-weight: 700; margin-top: 4px; white-space: nowrap; }
.aoh-price small { font-weight: 500; color: var(--aoh-text2); font-size: 12px; display: block; }
.aoh-chip { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; padding: 7px 12px; border: 1px solid #d9d5ce; border-radius: 999px; background: #fff; color: var(--aoh-ink); min-height: 32px; }
.aoh-chip:hover, .aoh-chip:focus-visible { border-color: var(--aoh-accent); }
.aoh a.aoh-chip:hover, .aoh a.aoh-chip:focus-visible { color: var(--aoh-ink); text-decoration: none; }

/* ---------- utility bar (site-wide) ---------- */
.aoh-utility { background: var(--aoh-utility-bg, #141414); color: var(--aoh-utility-fg, #fff); font-family: var(--aoh-body); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
.aoh-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; padding: 6px 20px; }
@media (min-width: 990px) { .aoh-utility__inner { padding: 0 40px; max-width: var(--aoh-max); margin: 0 auto; } }
.aoh-utility__group { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.aoh-utility__item { color: inherit; white-space: nowrap; }
.aoh-utility__item.is-emphasis { font-weight: 700; }
.aoh-utility__item.is-accent { color: var(--aoh-accent); font-weight: 700; }
.aoh-utility__item.is-muted { color: #d9d5ce; }
.aoh-utility__hl { color: var(--aoh-accent); font-weight: 700; }
/* Orange text on the utility bar's own dark background passes AA (7.5:1) — no
   change needed here; only orange-on-light elsewhere in the page did not. */
a.aoh-utility__item:hover, a.aoh-utility__item:focus-visible { color: var(--aoh-accent); text-decoration: underline; }
.aoh-utility__sep { width: 1px; height: 12px; background: #3a3835; }
/* 2026-09-26: was hiding the whole right-hand group (phone/email/quote) below
   990px, so phones had no tap-to-call link anywhere in the utility bar. Only
   non-mobile items are hidden now; mark a block "Show on mobile" in the theme
   editor to surface it (phone number block already flagged). */
@media (max-width: 989px) {
  .aoh-utility__inner { justify-content: space-between; }
  .aoh-utility__sep { display: none; }
  .aoh-utility__item:not(.is-mobile) { display: none; }
  .aoh-utility__item.is-mobile { white-space: normal; }
}

/* ---------- header additions (site-wide) ---------- */
/* Nav: sentence case, no tracking, ten items on one line from 990px up;
   Knowledge Hub grey (orange underline on hover/current), Canon Experience
   Center an orange pill. Lives here rather than in the header section's
   custom_css, which Shopify caps at 500 characters. */
.header__inline-menu { width: 100%; }
.header__inline-menu .list-menu--inline { display: flex; width: 100%; gap: 0 28px; flex-wrap: nowrap; align-items: center; }
.header__inline-menu .list-menu--inline > li { margin: 0; }
.header__inline-menu .header__menu-item--top { letter-spacing: 0; font-size: 1.4rem; text-transform: none; font-weight: 600; padding-left: 0; padding-right: 0; }
.header__inline-menu .list-menu--inline > li:nth-last-child(2) { margin-left: auto; }
.header__inline-menu a[href$='/pages/knowledge-hub'] { color: #5b5955; font-weight: 500; text-decoration: none; }
/* 2026-09-26: orange TEXT was 2.46:1 on white (fails AA) -- this was briefly
   changed to a grey-text + orange-underline hover cue for that reason.
   2026-10 (owner request): reverted to the original style -- orange text and
   a touch bolder on hover/current, no underline. Known a11y tradeoff, kept
   by the owner's explicit choice (same as the supplies hideprice/quote
   decision). .header__active-menu-item is how this theme marks the current
   top-level item; aria-current is a second hook once the item's URL is
   relative (see WORKLOG 2026-09-26). */
.header__inline-menu a[href$='/pages/knowledge-hub']:hover,
.header__inline-menu a[href$='/pages/knowledge-hub']:focus-visible,
.header__inline-menu li.header__active-menu-item a[href$='/pages/knowledge-hub'],
.header__inline-menu a[href$='/pages/knowledge-hub'][aria-current='page'] { color: var(--aoh-accent); font-weight: 700; text-decoration: none; }
/* 2026-09-26: white text on the orange fill was 2.46:1 -- this was briefly a
   filled pill with dark text for that reason.
   2026-10 (owner request): reverted to the original style -- orange text, no
   pill background. Known a11y tradeoff, kept by the owner's explicit choice. */
.header__inline-menu a[href$='/pages/canon-experience-center'] { color: var(--aoh-accent); font-weight: 700; text-decoration: none; }
.header__inline-menu a[href$='/pages/canon-experience-center']:hover,
.header__inline-menu a[href$='/pages/canon-experience-center']:focus-visible { color: #d97706; text-decoration: none; }

/* Inline search: a direct child of header.header, in its own centred grid
   column between the logo and the icons (only when the field is rendered).
   2026-09-26: the layout/hide-icon/no-dim rules below now key off the
   server-rendered class .header--ao-search (added in header.liquid when the
   "enable_inline_search" setting is on) instead of :has(), which Safari <15.4,
   Firefox <121 and Chrome/Edge <105 do not support — those browsers would
   otherwise get a header with no field placed and a search icon that never
   hides. body.ao-search-focus is set/cleared by a small script next to the
   field (see header.liquid) instead of the :has()-based selector that did the
   same job before. */
.ao-inline-search { display: none; }
@media (min-width: 990px) {
  header.header.header--ao-search { grid-template-areas: "heading search icons" "navigation navigation navigation"; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 32px; }
  .ao-inline-search { display: block; grid-area: search; justify-self: center; align-self: center; width: min(680px, 100%); position: relative; }
  .ao-inline-search .ao-inline-search__field { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid #d9d5ce; border-radius: 6px; background: #fff; }
  .ao-inline-search .ao-inline-search__field:focus-within { border-color: var(--aoh-ink); box-shadow: 0 0 0 2px var(--aoh-ink); }
  .ao-inline-search svg.ao-inline-search__icon { width: 18px; height: 18px; flex-shrink: 0; }
  .ao-inline-search input[type="search"] { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 14px var(--aoh-body); color: var(--aoh-ink); padding: 0; height: 42px; box-shadow: none; -webkit-appearance: none; appearance: none; }
  .ao-inline-search input[type="search"]::-webkit-search-decoration, .ao-inline-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
  .ao-inline-search .predictive-search__loading-state { position: absolute; right: 14px; top: 12px; display: none; }
  .ao-inline-search predictive-search[loading] .predictive-search__loading-state { display: block; }
  .ao-inline-search .predictive-search, .header .ao-inline-search .predictive-search { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; width: auto; margin: 0; max-height: min(70vh, 640px); overflow: auto; background: #fff; border: 1px solid #d9d5ce; border-radius: 8px; box-shadow: 0 12px 32px rgba(20, 20, 20, 0.12); z-index: 20; }
  .header .ao-inline-search predictive-search[open] .predictive-search, .ao-inline-search predictive-search[open] .predictive-search { display: block; }
  /* The theme dims the whole page whenever a predictive search has focus (its
     own modal's UX). Not wanted for the inline field, whose suggestions are a
     dropdown, not a modal. */
  body.ao-search-focus .transition-body::after { opacity: 0 !important; pointer-events: none !important; }
  .ao-inline-search .predictive-search-results, .header .ao-inline-search .predictive-search-results { position: static; display: block; height: auto; max-height: none; overflow: visible; transform: none; top: auto; padding: 12px 16px 4px; }
  .ao-inline-search .predictive-search__results-groups-wrapper { display: block; padding: 0; }
  .ao-inline-search .predictive-search__result-group { display: block; }
  .ao-inline-search .predictive-search__results-list { display: block; padding: 0; margin: 0; }
  .ao-inline-search .predictive-search__results-list li, .header .ao-inline-search .predictive-search__results-list li:last-child:not(:nth-child(2n)) { width: 100%; display: block; }
  .ao-inline-search .predictive-search__heading { margin: 0 0 8px; font: 700 12px var(--aoh-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--aoh-text2); }
  .ao-inline-search .ao-inline-search__clear { display: none; flex-shrink: 0; order: 9; margin: 0 0 0 4px; padding: 4px 8px; border: 0; border-radius: 4px; background: transparent; font: 600 12px var(--aoh-body); letter-spacing: 0.02em; color: var(--aoh-text2); cursor: pointer; line-height: 1; }
  .ao-inline-search input[type="search"]:not(:placeholder-shown) ~ .ao-inline-search__clear { display: inline-flex; }
  .ao-inline-search .ao-inline-search__clear:hover, .ao-inline-search .ao-inline-search__clear:focus-visible { color: var(--aoh-ink); text-decoration: underline; text-decoration-color: var(--aoh-accent); }
  .ao-inline-search predictive-search[loading] .ao-inline-search__clear { display: none; }
  .ao-inline-search predictive-search:not([open]) .ao-inline-search__close { display: none; }
  header.header.header--ao-search .header__right search-modal { display: none; }
}
/* Phone/tablet: the same field as a second full-width header row, so phones
   get a search field at all rather than only the icon (2026-09-26). */
@media (max-width: 989px) {
  header.header.header--ao-search { grid-template-areas: "left-icon heading icons" "search search search" "navigation navigation navigation"; }
  .ao-inline-search { display: block; grid-area: search; width: 100%; padding: 4px 16px 10px; position: relative; }
  .ao-inline-search .ao-inline-search__field { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid #d9d5ce; border-radius: 6px; background: #fff; }
  .ao-inline-search .ao-inline-search__field:focus-within { border-color: var(--aoh-ink); box-shadow: 0 0 0 2px var(--aoh-ink); }
  .ao-inline-search svg.ao-inline-search__icon { width: 18px; height: 18px; flex-shrink: 0; }
  .ao-inline-search input[type="search"] { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--aoh-ink); padding: 0; height: 40px; -webkit-appearance: none; appearance: none; }
  .ao-inline-search input[type="search"]::-webkit-search-decoration, .ao-inline-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
  .ao-inline-search .predictive-search, .header .ao-inline-search .predictive-search { display: none; position: absolute; top: calc(100% + 2px); left: 16px; right: 16px; margin: 0; max-height: 60vh; overflow: auto; background: #fff; border: 1px solid #d9d5ce; border-radius: 8px; box-shadow: 0 12px 32px rgba(20, 20, 20, 0.12); z-index: 20; }
  .ao-inline-search predictive-search[open] .predictive-search { display: block; }
  body.ao-search-focus .transition-body::after { opacity: 0 !important; pointer-events: none !important; }
  .ao-inline-search .predictive-search-results, .header .ao-inline-search .predictive-search-results { position: static; display: block; height: auto; max-height: none; overflow: visible; padding: 10px 14px 4px; }
  .ao-inline-search .predictive-search__results-groups-wrapper { display: block; padding: 0; }
  .ao-inline-search .predictive-search__result-group { display: block; }
  .ao-inline-search .predictive-search__results-list { display: block; padding: 0; margin: 0; }
  .ao-inline-search .predictive-search__heading { margin: 0 0 8px; font: 700 11px var(--aoh-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--aoh-text2); }
  .ao-inline-search predictive-search:not([open]) .ao-inline-search__close { display: none; }
  header.header.header--ao-search .header__right search-modal { display: none; }
}

/* Sticky header: keep the ten-item nav visible when the page scrolls, instead
   of the theme's default of collapsing it to a lone hamburger under the icons
   (2026-09-26 — the header this page was built around should not disappear
   the moment a visitor scrolls). */
.shopify-section-header-sticky header.header.header--ao-search .header__inline-menu { display: block; }
.shopify-section-header-sticky .header__left header-menu-toggle { display: none; }

/* Brand logos inside mega menu "By brand" columns and the Brands panel */
.list-mega-menu .ao-brand-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.list-mega-menu .ao-brand-chip { display: flex; align-items: center; justify-content: center; height: 44px; padding: 6px 10px; border: 1px solid #e7e4de; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #141414; text-decoration: none; }
.list-mega-menu .ao-brand-chip:hover, .list-mega-menu .ao-brand-chip:focus-visible { border-color: #f28c1e; color: #141414; text-decoration: none; }
.list-mega-menu .ao-brand-chip img { max-height: 24px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.list-mega-menu--brands .brand-tile.ao-brand-tile--text { display: flex; align-items: center; justify-content: center; min-height: 64px; font-family: var(--aoh-display); font-size: 15px; font-weight: 700; letter-spacing: 0.03em; }
.aoh a.list-mega-menu--brands .brand-tile:hover, .brand-tile.ao-brand-tile--text:hover, .brand-tile.ao-brand-tile--text:focus-visible { color: #1d3f8f; text-decoration: none; }

/* ---------- hero ---------- */
.aoh-hero { background: var(--aoh-band); }
.aoh-hero__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; padding: 32px 0 48px; }
@media (min-width: 990px) { .aoh-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; min-height: 620px; padding: 24px 0 40px; } }
.aoh-hero__copy { display: flex; flex-direction: column; gap: 24px; max-width: 620px; }
.aoh-lockup { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: 10px; border: 1px solid #b4b8bd; background: linear-gradient(100deg, #f5f5f6 0%, #d7d9dc 28%, #f8f8f9 50%, #c9ccd0 74%, #eeeff1 100%); box-shadow: inset 0 1px 0 #ffffff, 0 2px 6px rgba(20, 20, 20, 0.10); }
.aoh-lockup > * { position: relative; z-index: 1; }
/* Light sweep across the platinum bar. 2026-09-26: was an infinite loop
   animating `left` (a layout property, competes with hero image decode on the
   main thread, and washes the text out on every pass forever — WCAG 2.2.2).
   Now animates `transform` (compositor-only) and stops after two passes
   (3.6s of motion total, well under the 5s ceiling in 2.2.2). */
.aoh-lockup::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -35%; width: 28%; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 35%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.25) 65%, rgba(255,255,255,0) 100%); transform: translateX(0) skewX(-18deg); animation: aoh-shine 6s ease-in-out 2; pointer-events: none; z-index: 2; will-change: transform; }
@keyframes aoh-shine { 0% { transform: translateX(0) skewX(-18deg); } 30%, 100% { transform: translateX(536%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { .aoh-lockup::after { animation: none; display: none; } }
@media (min-width: 990px) { .aoh-lockup { gap: 22px; padding: 16px 24px; } }
.aoh-lockup__logo { display: flex; align-items: center; height: 34px; }
.aoh-lockup__logo img { height: 100%; width: auto; display: block; }
@media (min-width: 990px) { .aoh-lockup__logo { height: 44px; } }
.aoh-lockup__rule { width: 1px; height: 36px; background: #a9aeb4; flex-shrink: 0; }
.aoh-lockup__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aoh-lockup__title { font-family: var(--aoh-display); font-size: 18px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #1d1f22; line-height: 1; }
@media (min-width: 990px) { .aoh-lockup__title { font-size: 26px; } }
.aoh-lockup__sub { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #4b4f55; }
.aoh-hero__h1 { margin: 0; font-family: var(--aoh-display); font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 700; }
.aoh-hero__lede { margin: 0; font-size: 17px; line-height: 1.55; color: var(--aoh-text2); }
@media (min-width: 990px) { .aoh-hero__lede { font-size: 18px; } }
.aoh-hero__proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
.aoh-proof { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 2px solid var(--aoh-ink); }
.aoh-proof__title { font-family: var(--aoh-display); font-size: 14px; font-weight: 600; line-height: 1.3; }
.aoh-proof__text { font-size: 13px; color: var(--aoh-text2); line-height: 1.45; }
@media (max-width: 749px) { .aoh-proof__text { display: none; } }
.aoh-hero__actions { display: flex; flex-wrap: wrap; gap: 12px 14px; }
@media (max-width: 749px) { .aoh-hero__actions .aoh-btn { flex: 1 1 100%; } }
.aoh-hero__media { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 20px 20px; background: #ffffff; border: 1px solid var(--aoh-hair); border-radius: 14px; box-shadow: 0 8px 28px rgba(20, 20, 20, 0.06); }
@media (min-width: 990px) { .aoh-hero__media { padding: 32px 28px 24px; } }
.aoh-hero__img { display: flex; align-items: center; justify-content: center; height: 280px; }
@media (min-width: 990px) { .aoh-hero__img { height: 500px; } }
@media (max-width: 749px) { .aoh-hero__img { height: 220px; } .aoh-hero__grid { padding: 24px 0 40px; } }
.aoh-hero__img img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.aoh-hero__caption { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* 2026-09-26: white text on the orange fill was 2.46:1. Dark text on the same
   orange fill passes comfortably. */
.aoh-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #141414; background: var(--aoh-accent); padding: 4px 8px; border-radius: 4px; }
.aoh-hero__caption-title { font-family: var(--aoh-display); font-size: 16px; font-weight: 600; }
.aoh-hero__caption-text { font-size: 13px; color: var(--aoh-text2); }
/* Phone lockup: 2026-09-26 — the text column was narrower than the word
   PLATINUM on 320-360px phones and silently clipped (overflow:hidden). */
@media (max-width: 749px) {
  .aoh-lockup { gap: 12px; padding: 12px 14px; }
  .aoh-lockup__logo { height: 28px; }
  .aoh-lockup__title { font-size: 16px; letter-spacing: 0.03em; }
}

/* ---------- families ---------- */
.aoh-families__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
@media (min-width: 990px) { .aoh-families__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; } }
.aoh-families__grid .aoh-card { padding: 16px; }
@media (min-width: 990px) { .aoh-families__grid .aoh-card { padding: 28px; } }
.aoh-families__grid .aoh-card__media { height: 120px; }
@media (min-width: 990px) { .aoh-families__grid .aoh-card__media { height: 220px; } }
.aoh-families__grid .aoh-card__title { font-size: 15px; }
@media (min-width: 990px) { .aoh-families__grid .aoh-card__title { font-size: 20px; } }
@media (max-width: 749px) { .aoh-families__grid .aoh-card__text { display: none; } }

/* ---------- supplies ---------- */
.aoh-supplies__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 990px) { .aoh-supplies__grid { grid-template-columns: 500px minmax(0, 1fr); gap: 64px; } }
.aoh-supplies__copy { display: flex; flex-direction: column; gap: 20px; }
.aoh-finder { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 750px) { .aoh-finder { flex-direction: row; height: 52px; border: 1px solid #d9d5ce; border-radius: 6px; background: #fff; overflow: hidden; gap: 0; } }
/* 2026-09-26: visible keyboard focus for the finder (it had none — the
   theme's own :focus-visible ring lost on specificity and was clipped by
   overflow:hidden on the elements below). */
@media (min-width: 750px) { .aoh-finder:focus-within { border-color: var(--aoh-ink); box-shadow: 0 0 0 2px var(--aoh-ink); } }
.aoh-finder__brand { position: relative; display: flex; align-items: center; height: 46px; border: 1px solid #d9d5ce; border-radius: 6px; background: #fff; }
@media (min-width: 750px) { .aoh-finder__brand { height: auto; border: 0; border-right: 1px solid var(--aoh-hair); border-radius: 0; } }
@media (max-width: 749px) { .aoh-finder__brand:focus-within { border-color: var(--aoh-ink); box-shadow: 0 0 0 2px var(--aoh-ink); } }
.aoh-finder__brand select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent; height: 100%; padding: 0 34px 0 14px; font: 600 14px var(--aoh-body); color: var(--aoh-ink); cursor: pointer; }
@media (max-width: 749px) { .aoh-finder__brand select { width: 100%; } }
@media (max-width: 989px) { .aoh-finder__brand select, .aoh-finder__model input { font-size: 16px; } }
.aoh-finder__brand svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.aoh-finder__model { display: flex; align-items: center; flex: 1 1 auto; height: 46px; border: 1px solid #d9d5ce; border-radius: 6px; background: #fff; overflow: hidden; }
@media (min-width: 750px) { .aoh-finder__model { height: auto; border: 0; border-radius: 0; } }
@media (max-width: 749px) { .aoh-finder__model:focus-within { border-color: var(--aoh-ink); box-shadow: 0 0 0 2px var(--aoh-ink); } }
.aoh-finder__model input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 14px; height: 100%; font: 500 14px var(--aoh-body); color: var(--aoh-ink); -webkit-appearance: none; appearance: none; border-radius: 0; }
.aoh-finder__model button { height: 100%; padding: 0 18px; border: 0; background: var(--aoh-ink); color: #fff; font: 700 14px var(--aoh-body); cursor: pointer; white-space: nowrap; }
.aoh-finder__model button:hover { background: var(--aoh-accent); color: #141414; }
.aoh-finder__model button:focus-visible { background: var(--aoh-accent); color: #141414; outline: 2px solid #fff; outline-offset: -4px; }
.aoh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aoh-supplies__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; grid-auto-rows: 1fr; }
@media (min-width: 990px) { .aoh-supplies__cards { gap: 20px; } }
.aoh-scard { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--aoh-hair); border-radius: 10px; }
.aoh a.aoh-scard:hover, .aoh a.aoh-scard:focus-visible { color: var(--aoh-ink); text-decoration: none; border-color: var(--aoh-accent); }
@media (min-width: 990px) { .aoh-scard { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; padding: 20px; } }
.aoh-scard__media { display: flex; align-items: center; justify-content: center; height: 100px; }
@media (min-width: 990px) { .aoh-scard__media { height: 110px; } }
.aoh-scard__media img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.aoh-scard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aoh-scard__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aoh-text2); }
.aoh-scard__title { font-family: var(--aoh-display); font-size: 15px; font-weight: 600; line-height: 1.3; }
@media (min-width: 990px) { .aoh-scard__title { font-size: 16px; } }
.aoh-scard__note { font-size: 13px; color: var(--aoh-text2); }
@media (max-width: 749px) { .aoh-scard__note, .aoh-scard__eyebrow { display: none; } }
.aoh-brands { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; margin-top: 40px; border-top: 1px solid #ddd9d1; }
.aoh-brands__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 990px) { .aoh-brands__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; } }
.aoh-brand-tile { display: flex; align-items: center; justify-content: center; height: 48px; padding: 8px; background: #fff; border: 1px solid var(--aoh-hair); border-radius: 8px; font-family: var(--aoh-display); font-size: 14px; font-weight: 800; letter-spacing: 0.04em; color: #1d3f8f; text-align: center; }
@media (min-width: 990px) { .aoh-brand-tile { height: 64px; padding: 12px; font-size: 18px; } }
.aoh-brand-tile img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.aoh-brand-tile:hover, .aoh-brand-tile:focus-visible { border-color: var(--aoh-accent); }
.aoh a.aoh-brand-tile:hover, .aoh a.aoh-brand-tile:focus-visible { color: #1d3f8f; text-decoration: none; }
/* 2026-09-26: logo wordmarks were illegible at the 5-up phone size (some
   measured 9-13px tall). A horizontal scroller lets each tile keep a legible
   minimum height; a partial tile at the right edge is the swipe cue. */
@media (max-width: 749px) {
  .aoh-brands__grid { display: flex; overflow-x: auto; gap: 10px; margin: 0 -20px; padding: 0 20px 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .aoh-brand-tile { flex: 0 0 104px; height: 56px; scroll-snap-align: start; }
}

/* ---------- monitors by use ---------- */
.aoh-monitors__grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
@media (min-width: 750px) { .aoh-monitors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 990px) { .aoh-monitors__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 36px; } }
.aoh-use { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--aoh-hair); border-radius: 10px; background: #fff; }
/* 2026-10 (owner request): restored the original hover style -- title turns
   orange and a touch bolder, instead of ink + underline. Known a11y
   tradeoff (orange-on-white text), kept by the owner's explicit choice. */
.aoh a.aoh-use:hover, .aoh a.aoh-use:focus-visible { color: var(--aoh-accent); text-decoration: none; border-color: var(--aoh-accent); }
.aoh a.aoh-use:hover .aoh-use__title, .aoh a.aoh-use:focus-visible .aoh-use__title { font-weight: 700; }
@media (min-width: 990px) { .aoh-use { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 24px; } }
.aoh-use__head { display: flex; flex-direction: column; gap: 4px; }
.aoh-use__title { font-family: var(--aoh-display); font-size: 15px; font-weight: 600; }
@media (min-width: 990px) { .aoh-use__title { font-size: 20px; } }
.aoh-use__text { font-size: 13px; color: var(--aoh-text2); line-height: 1.45; }
@media (max-width: 989px) { .aoh-use__text { display: none; } }
.aoh-use__media { display: flex; align-items: center; justify-content: center; height: 80px; grid-row: 1 / span 2; }
@media (min-width: 990px) { .aoh-use__media { height: 180px; grid-row: auto; } }
.aoh-use__media img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.aoh-use__foot { display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 990px) { .aoh-use__foot { padding-top: 12px; border-top: 1px solid var(--aoh-hair); } }
.aoh-use__featured { font-size: 12px; color: var(--aoh-text2); }
.aoh-use__price { font-size: 14px; font-weight: 700; }

/* ---------- directory ---------- */
.aoh-dir__grid { display: grid; gap: 22px; margin-top: 28px; }
@media (min-width: 990px) { .aoh-dir__grid { grid-template-columns: repeat(var(--aoh-dir-cols, 6), minmax(0, 1fr)); margin-top: 40px; } }
.aoh-dir__col { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--aoh-ink); }
.aoh-dir__title { font-family: var(--aoh-display); font-size: 16px; font-weight: 600; }
.aoh-dir__link { font-size: 14px; color: var(--aoh-text2); text-decoration: none; }
.aoh a.aoh-dir__link:hover, .aoh a.aoh-dir__link:focus-visible { color: var(--aoh-ink); text-decoration: underline; text-decoration-color: var(--aoh-accent); text-decoration-thickness: 2px; text-underline-offset: 2px; }
@media (max-width: 989px) {
  .aoh-dir__grid { gap: 0; }
  .aoh-dir__col { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--aoh-hair); }
  .aoh-dir__col:last-child { border-bottom: 1px solid var(--aoh-hair); }
  .aoh-dir__links { display: none; }
  .aoh-dir__summary { font-size: 12px; color: var(--aoh-text2); text-align: right; }
}
@media (min-width: 990px) { .aoh-dir__summary { display: none; } .aoh-dir__links { display: flex; flex-direction: column; gap: 10px; } }

/* ---------- facts ---------- */
.aoh-facts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 990px) { .aoh-facts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } }
.aoh-fact { display: flex; flex-direction: column; gap: 6px; }
.aoh-fact__title { font-family: var(--aoh-display); font-size: 14px; font-weight: 600; }
@media (min-width: 990px) { .aoh-fact__title { font-size: 18px; } }
.aoh-fact__text { font-size: 12px; color: var(--aoh-text2); line-height: 1.55; }
@media (min-width: 990px) { .aoh-fact__text { font-size: 14px; } }
.aoh-fact__title a { color: inherit; text-decoration: underline; text-decoration-color: var(--aoh-hair); text-underline-offset: 3px; }
.aoh-fact__title a:hover, .aoh-fact__title a:focus-visible { text-decoration-color: var(--aoh-accent); }

/* ---------- articles ---------- */
.aoh-articles__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 990px) { .aoh-articles__grid { grid-template-columns: 400px minmax(0, 1fr); gap: 64px; } }
.aoh-articles__copy { display: flex; flex-direction: column; gap: 12px; }
.aoh-articles__list { display: flex; flex-direction: column; border-bottom: 1px solid var(--aoh-hair); }
.aoh-article { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px 24px; padding: 18px 0; border-top: 1px solid var(--aoh-hair); align-items: baseline; }
.aoh a.aoh-article:hover, .aoh a.aoh-article:focus-visible { color: var(--aoh-ink); text-decoration: none; }
.aoh a.aoh-article:hover .aoh-article__title, .aoh a.aoh-article:focus-visible .aoh-article__title { text-decoration: underline; text-decoration-color: var(--aoh-accent); text-decoration-thickness: 2px; text-underline-offset: 2px; }
@media (min-width: 990px) { .aoh-article { grid-template-columns: 120px minmax(0, 1fr) 60px; padding: 20px 0; } }
.aoh-article__date { font-size: 12px; color: var(--aoh-text2); }
@media (max-width: 989px) { .aoh-article__date { grid-column: 1 / -1; } }
.aoh-article__body { display: flex; flex-direction: column; gap: 4px; }
.aoh-article__title { font-family: var(--aoh-display); font-size: 16px; font-weight: 600; line-height: 1.3; }
@media (min-width: 990px) { .aoh-article__title { font-size: 17px; } }
.aoh-article__excerpt { font-size: 14px; color: var(--aoh-text2); line-height: 1.5; }
.aoh-article__read { font-size: 13px; font-weight: 700; text-align: right; }

/* ---------- site-wide floating-widget fix ---------- */
/* 2026-09-26: the WhatsApp (Carthike) chat pill sits directly on top of the
   Cart tab of the mobile bottom dock. Follow the dock's own show/hide state
   (mobile-dock.js sets --mobile-dock-height on <html>) rather than a fixed
   offset, since the dock only appears after scrolling past the header. */
@media (max-width: 749px) {
  html:has(.mobile-dock.is-active) #carthike-chat-button-container.right { bottom: calc(var(--mobile-dock-height, 60px) + 12px) !important; transition: bottom .2s; }
}

/* 2026-10-04 (Be Yours 9.5.1): the theme sizes the suggestion product list 25px wider than its
   column (gap compensation), which put a stray horizontal scrollbar in the inline-search panel.
   The product cards themselves fit; clip only the horizontal overflow. */
.header .ao-inline-search .predictive-search { overflow-x: hidden; }

/* 2026-10-04 (Be Yours 9.5.1): phone/tablet layout. 9.5.1's mobile header is a flex row (not the
   7.2.2 grid the rules above target) with the logo absolutely centred, so the bar hangs below the
   header row and the wrapper reserves its height (58px = 4 + 44 + 10). The hidden search icon
   used to carry the margin that pushes the cart right; the menu group carries it instead. */
@media (max-width: 989px) {
  header.header.header--ao-search { position: relative; }
  header.header.header--ao-search > .ao-inline-search { position: absolute; top: 100%; left: 15px; right: 15px; width: auto; padding: 4px 0 10px; }
  .shopify-section-header .header-wrapper { padding-bottom: 58px; }
  header.header.header--ao-search > .header__left { margin-inline-end: auto; }
  .header .ao-inline-search .predictive-search { left: 0; right: 0; }
}

/* 2026-10-04: the "Clear" button was only styled/hidden on desktop, so phones showed a raw grey
   button even with an empty field (also on 7.2.2 live). Same rules at every width. */
.ao-inline-search .ao-inline-search__clear { display: none; flex-shrink: 0; order: 9; margin: 0 0 0 4px; padding: 4px 8px; border: 0; border-radius: 4px; background: transparent; font: 600 12px var(--aoh-body); letter-spacing: 0.02em; color: var(--aoh-text2); cursor: pointer; line-height: 1; }
.ao-inline-search input[type="search"]:not(:placeholder-shown) ~ .ao-inline-search__clear { display: inline-flex; }
.ao-inline-search predictive-search[loading] .ao-inline-search__clear { display: none; }

/* 2026-10-05: voice search microphone (9.5.1 voice-search-button) inside our bar. The theme only
   resets .search__button inside its own search fields, so ours showed a raw browser button. */
.ao-inline-search voice-search-button { display: inline-flex; order: 8; flex-shrink: 0; }
.ao-inline-search .voice-search__button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin: 0; border: 0; border-radius: 4px; background: transparent; color: var(--aoh-text2); cursor: pointer; box-shadow: none; }
.ao-inline-search .voice-search__button:hover, .ao-inline-search .voice-search__button:focus-visible, .ao-inline-search .voice-search__button[aria-pressed="true"] { color: var(--aoh-ink); }
.ao-inline-search .voice-search__button .icon { width: 14px; height: 18px; }

/* 2026-10-05: 9.5.1 scroll tracker (article.guide). Stock bar is fixed at top:0 / z-index 1000, which
   covered our always-visible sticky header. Sit it under the header instead (ao-body-end keeps
   --ao-sticky-header-bottom current) and below the header layer so menus drop over it. */
.content-scrollspy .content-scrollspy__menu { top: var(--ao-sticky-header-bottom, 0px); z-index: 99; }

/* Tracker bar height for the add-on's scroll offset (stock top bar on article.guide = 72px). */
.content-scrollspy { --ao-bar-h: 72px; }

/* 2026-10-05: chapter tracker, "Side Index + Dock" (owner choice), product pages and blog articles.
   Desktop: ticks in the left page margin that open into a labelled list on hover. Phone: dark dock
   bottom-left, tap to open. */
/* ---- shared reset (all four styles) ---- */
:is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu{box-shadow:none;border-radius:0;padding:0;gap:0;background:transparent;font-family:Manrope,system-ui,sans-serif;scrollbar-width:none;transition:opacity .3s ease,visibility .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
:is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu::-webkit-scrollbar{display:none}
:is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu .content-scrollspy__menu-item{padding:0;border:0;border-radius:0;background:none;transform:none;color:#55585e;font-size:13px;font-weight:600;letter-spacing:0;line-height:1.2;will-change:auto}
:is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu .content-scrollspy__menu-item:hover{color:#1a1b18;transform:none}
:is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu .content-scrollspy__menu-item.active{color:#1a1b18;background:none;border-color:transparent}
:is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu .content-scrollspy__menu-item:focus-visible{outline:2px solid #1a1b18;outline-offset:2px}
:is(.template-product, .template-article) .content-scrollspy .content-scrollspy__scroll-indicator{display:none}
@media (prefers-reduced-motion:reduce){
  :is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu,
  :is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu::before,
  :is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu-item,
  :is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu-item::before,
  :is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu-item::after{transition:none!important}
}
/* ---- D. Side Index (desktop) + Chapter Dock (phone) ---- */
:is(.template-product, .template-article) .content-scrollspy{--ao-bar-h:0px;--ao-dock:0}
:is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu{top:calc(50% + var(--ao-sticky-header-bottom,0px) / 2);left:14px;right:auto;transform:translateY(-50%);flex-direction:column;align-items:flex-start;gap:2px;padding:10px 8px;border-radius:16px;border:1px solid transparent;overflow:visible;transition:opacity .3s ease,visibility .3s ease,transform .35s ease,background-color .25s ease,box-shadow .25s ease}
:is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu.content-scrollspy__menu--hidden{transform:translate(-8px,-50%)}
:is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu .content-scrollspy__menu-item{display:flex;align-items:center;gap:12px;height:24px;max-width:30px;padding:0 4px;overflow:hidden;white-space:nowrap;color:transparent;transition:max-width .35s cubic-bezier(.2,.8,.2,1),color .2s ease}
:is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu .content-scrollspy__menu-item::before{content:"";flex:0 0 auto;width:12px;height:2px;border-radius:2px;background:#aeb2b8;transition:width .3s ease,background-color .3s ease}
:is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu .content-scrollspy__menu-item:has(~ .active)::before{background:#55585e}
:is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu .content-scrollspy__menu-item.active{color:transparent}
:is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu .content-scrollspy__menu-item.active::before{width:22px;background:#1a1b18}
:is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu:hover,
:is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu:focus-within{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:rgba(26,27,24,.1);box-shadow:0 14px 34px -16px rgba(26,27,24,.4)}
:is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu:hover .content-scrollspy__menu-item,
:is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu:focus-within .content-scrollspy__menu-item{max-width:320px;color:#55585e}
:is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu:hover .content-scrollspy__menu-item.active,
:is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu:focus-within .content-scrollspy__menu-item.active{color:#1a1b18}
@media (max-width:989px){
  :is(.template-product, .template-article) .content-scrollspy{--ao-bar-h:0px;--ao-dock:1}
  :is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--ao-bottom-reserve,0px));left:16px;right:auto;transform:none;width:auto;max-width:calc(100% - 108px);align-items:stretch;padding:5px;border:0;border-radius:24px;background:#1a1b18;box-shadow:0 16px 36px -14px rgba(0,0,0,.55);max-height:calc(100vh - var(--ao-sticky-header-bottom,0px) - 120px);overflow-y:auto}
  :is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu:hover,
  :is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu:focus-within{background:#1a1b18;box-shadow:0 16px 36px -14px rgba(0,0,0,.55)}
  :is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu.content-scrollspy__menu--hidden{transform:translateY(12px)}
  :is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu .content-scrollspy__menu-item,
  :is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu:hover .content-scrollspy__menu-item,
  :is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu:focus-within .content-scrollspy__menu-item{display:none;height:auto;max-width:none;padding:11px 16px;border-radius:18px;font-size:14px;color:rgba(255,255,255,.75);text-overflow:ellipsis}
  :is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu .content-scrollspy__menu-item::before{display:none}
  :is(.template-product, .template-article) .content-scrollspy .content-scrollspy__menu .content-scrollspy__menu-item.active,
  :is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu:hover .content-scrollspy__menu-item.active,
  :is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu:focus-within .content-scrollspy__menu-item.active{display:block;color:#fff}
  :is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu.is-open .content-scrollspy__menu-item{display:block}
  :is(.template-product, .template-article) .content-scrollspy nav.content-scrollspy__menu.is-open .content-scrollspy__menu-item.active{background:rgba(255,255,255,.12)}
  :is(.template-product, .template-article) .content-scrollspy.ao-spy-js .content-scrollspy__menu .content-scrollspy__menu-item.active::before{display:inline;content:attr(data-pos);width:auto;height:auto;background:none;margin-right:10px;font:700 11px Sora,system-ui,sans-serif;letter-spacing:.06em;color:rgba(255,255,255,.55)}
  :is(.template-product, .template-article) .content-scrollspy.ao-spy-js .content-scrollspy__menu .content-scrollspy__menu-item.active::after{content:"";display:inline-block;width:6px;height:6px;margin-left:12px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:translateY(1px) rotate(45deg);opacity:.7}
  :is(.template-product, .template-article) .content-scrollspy.ao-spy-js nav.content-scrollspy__menu.is-open .content-scrollspy__menu-item.active::after{transform:translateY(-3px) rotate(225deg)}
}
:is(.template-product, .template-article) .scrollspy-wrapper .content-scrollspy.section--padding { padding-top: 0; padding-bottom: 0; }

/* 2026-10-05: 9.5.1 Timeline (page.imageforce-lineup). Its pinned panel is sticky top:0 / 100vh and
   would sit under the sticky header: pin it below the header and shorten it by the same amount. */
.timeline-section .timeline-container { top: var(--ao-sticky-header-bottom, 0px); height: calc(100vh - var(--ao-sticky-header-bottom, 0px)); }
@media screen and (max-width: 768px) {
  .timeline-section .timeline-panel, .timeline-section .content-panel { height: calc((100vh - var(--ao-sticky-header-bottom, 0px)) / 2); }
}