/** 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 { 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 { 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; }
}