/* aieo-side-cart.css — SHELL (Phase-CSS split 2026-06-13). Trigger, panel frame, scrim, MAIN CART (line items, qty, free-shipping bar, gift/reward banners), responsive. Everything visible the instant the drawer opens. The reco rails / RV+Favorites cards / 'you may also like' carousel / quick-view styling lives in aieo-side-cart-contents.css, injected by aieo-side-cart.js on first openCart() (those nodes don't exist until the drawer hydrates). Keep the two files' selectors disjoint. */ /* ============================================================================= * AIEO DMM Side Cart — Rey-theme-inspired styling. * * Two-column panel (left: "You might like" recommendations, right: main cart). * Scrim overlay, floating trigger, tabs, progress bar, items, carousel, footer. * * Namespace .aieo-sc-* so nothing collides with om-free-shipping's .om-sc-*. * ========================================================================== */ /* -------- Floating trigger ---------------------------------------------- */ /* `aieo-sc-root` is the JS hook + scrim/panel/trigger parent, but it does NOT * need to take any layout space itself. Previously this had `position: fixed; * inset: 0` to act as a viewport-sized overlay — but every interactive child * (.aieo-sc-trigger, .aieo-sc-scrim, .aieo-sc-panel) is independently * `position: fixed` already, so the root being fixed served no purpose. * * Worse, `position: fixed; inset: 0` on the root was being miscomputed when an * ancestor establishes a new containing block (transform, filter, contain, * etc., as introduced by some themes / mega-menu plugins) — the root ended up * sized to the ancestor's box, which on mobile inflated past the viewport. * That extra width then propagated to the floating trigger via `right: 20px`, * pushing it off-canvas and forcing the document to grow. * * `display: contents` removes the wrapper from the layout tree entirely * (children render as if their styles applied directly to the body) — no * box, no width contribution, no containing-block issues. JS still finds * `#aieo-sc-root` as a delegation target. Closed-panel layout removal is * handled separately by `[hidden]` on .aieo-sc-panel. */ .aieo-sc-root { display: contents; } /* -------- Floating shell (desktop = single round button; mobile = bar) -- */ /* Desktop: the shell only exists to host the trigger as a single child. * The trigger keeps its own `position: fixed` (below) so existing layouts * stay byte-identical. The burger + search children are hidden on desktop * — without this, the shell's `display: contents` lets them render in * body's natural flow (= bottom of the page, near the footer), which * shows up as a stray FiboSearch input below the copyright line. */ .aieo-sc-floating-shell { display: contents; } .aieo-sc-bar-burger, .aieo-sc-bar-search, .aieo-sc-bar-chat { display: none; } /* -------- Desktop AI Chat launcher (symmetric to cart trigger) --------- * Same 56×56 circle, same shadow, same z-index as .aieo-sc-trigger. * Position mode selected by `data-position-mode` attribute on the * element (admin setting `side_cart_chat_desktop_position`): * left → bottom-left, mirror image of the cart on the bottom-right * above → stacked above the cart on the same right edge, gap = 20px * (so the two circles + the gap occupy 132px of vertical * space: 20 bottom + 56 cart + 20 gap + 56 chat). * * Hidden on mobile — chat lives in the bar there. */ .aieo-sc-chat-desktop { position: fixed; width: 56px; height: 56px; border-radius: 50%; border: 0; background: #0e0e0e; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); cursor: pointer; pointer-events: auto; display: flex; align-items: center; justify-content: center; transition: transform 0.18s ease, background 0.18s ease; z-index: 999996; } .aieo-sc-chat-desktop:hover { transform: translateY(-2px); background: #1a1a1a; } .aieo-sc-chat-desktop[data-position-mode="left"] { left: 20px; bottom: 20px; right: auto; } .aieo-sc-chat-desktop[data-position-mode="above"] { right: 20px; bottom: 96px; left: auto; } /* Defensive — if at any point the search modal is left visible on * desktop (orphaned state from an open/close mid-deploy), force it * hidden so it can't paint the FiboSearch form into the page flow. */ @media (min-width: 721px) { .aieo-search-modal { display: none !important; } } /* -------- Hide the chat addon's native floating UI ---------------------- * * When our chat slot is enabled we force-enable the addon's * `aieo_chat_floating_enabled` option so its enqueue + popup HTML * (#aieo-floating-chat-window) lands in the page. We then drive that * popup from our own bar / desktop launcher via clicks on * #aieo-floating-chat-trigger / #aieo-chat-close. The addon's own * trigger button + welcome bubble would visually conflict with our * launcher, so we hide them here. * * NOTE: this rule is a no-op on sites that don't have our chat slot * enabled — the addon's elements simply aren't in the DOM. */ #aieo-floating-chat-trigger, #aieo-floating-welcome-bubble { display: none !important; } .aieo-sc-trigger { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; border: 0; background: #0e0e0e; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); cursor: pointer; pointer-events: auto; display: flex; align-items: center; justify-content: center; transition: transform 0.18s ease, background 0.18s ease; /* Lower z-index than the scrim + panel so when the side cart * opens, the panel naturally covers the floating trigger. When * closed, scrim is opacity:0 / pointer-events:none and the panel * is translated off-screen, so the trigger is fully reachable. */ z-index: 999996; } .aieo-sc-trigger:hover { transform: translateY(-2px); background: #1a1a1a; } .aieo-sc-trigger-icon { display: flex; } /* Count badge gets its OWN side-cart token (was a hardcoded #c0a37b gold) so * it is intentional + configurable and never confused with the generic button * colour. Declared on .aieo-sc-root so it can't be reached by the global * :root button vars. Default stays the side-cart accent gold (matches the * active-tab underline); change --aieo-sc-badge-bg to recolour. */ /* Side-cart accent tokens. Default to the THEME accent (brand colour) instead * of the old hardcoded gold, and overridable per-cart from the admin (the * display class emits --aieo-sc-accent / --aieo-sc-reco-title-color inline when * the operator sets them). One place drives the tab underlines, the count * badge, the free-shipping bar and the gift-qty label; the reco title has its * own token (defaults to the accent) so it can be set separately. */ .aieo-sc-root { --aieo-sc-accent: var(--wp--preset--color--accent, #c0a37b); --aieo-sc-reco-title-color: var(--aieo-sc-accent); --aieo-sc-badge-bg: var(--aieo-sc-accent); --aieo-sc-badge-fg: #ffffff; } .aieo-sc-trigger-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; background: var(--aieo-sc-badge-bg, #c0a37b); color: var(--aieo-sc-badge-fg, #ffffff); border-radius: 10px; /* Centre the digits in the EXACT middle of the circle. `line-height: 20px` * looked symmetric in metrics but most fonts render numerals on a baseline * below the cap-height, so the digit drifted down. Flex on its own line-box * (line-height: 1) aligns the glyph to the optical centre both axes. */ display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0; /* Force tabular + lining figures so the badge width stays * constant whether the count is 1, 2, or 11 — no horizontal * shift, and digits sit on the cap-line (mathematically centred). */ font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } .aieo-sc-trigger-count:empty, .aieo-sc-trigger-count[data-count="0"] { display: none; } /* When the side cart is OPEN, hide the floating bubble trigger so it can't * overlap the open drawer. The bubble keeps the desktop fixed-circle styling * on mobile, which would otherwise sit on top of the panel (the screenshot * the operator reported). Scoped to bubble mode — in bar mode the panel * (z 999998) already covers the bar (z 999996). */ .aieo-sc-root.is-open .aieo-sc-shell--bubble .aieo-sc-trigger { opacity: 0 !important; pointer-events: none !important; } /* -------- Fullscreen search modal (mobile FiboSearch host) -------------- */ .aieo-search-modal[hidden] { display: none; } .aieo-search-modal { position: fixed; inset: 0; z-index: 1000000; /* above the navigator (100000) + bar (999996) */ display: flex; flex-direction: column; } .aieo-search-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.45); } .aieo-search-modal__panel { position: relative; margin: env(safe-area-inset-top, 0px) auto auto; width: min(640px, 100%); background: var(--wp--preset--color--bg, #ffffff); padding: 56px 20px 24px; /* top space leaves room for the × button */ border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); } .aieo-search-modal__close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; background: transparent; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--wp--preset--color--fg, #1f2937); } .aieo-search-modal__slot { /* The FiboSearch wrapper docks here on open. The plugin manages * its own input width / dropdown positioning relative to itself, * so we just give it a clean column to occupy. */ width: 100%; } /* Make the FiboSearch input look at home in the modal — desktop-tier * styling (centered placeholder, normal weight) carries over. */ .aieo-search-modal__slot .dgwt-wcas-search-wrapp, .aieo-search-modal__slot .dgwt-wcas-search-form, .aieo-search-modal__slot .dgwt-wcas-sf-wrapp { width: 100%; margin: 0; padding: 0; } /* (Chat modal removed — we drive the chat addon's own floating popup * #aieo-floating-chat-window now, see the dispatch JS in side-cart.) */ /* -------- Side cart panel containment (overflow safety) ----------------- */ /* The panel is `position: fixed` but during its slide-in/out animation * the browser still lays it out at full width and walks `transform` * keyframes — on Safari/iOS that can briefly contribute to * `document.scrollWidth` during the 280ms transition window, manifesting * as a horizontal-scroll flicker just after a close click. `contain: paint` * tells the engine the panel's effects don't escape its own box, removing * the contribution; `overflow: hidden` on the panel + descending media * blocks the broken-image leak path the merchant flagged (a missing * product thumbnail in YOU MAY ALSO LIKE renders at intrinsic dimensions * and pushes the panel rightward). */ .aieo-sc-panel { contain: paint; overflow-x: hidden; /* horizontal-only — vertical scroll inside the panel still works via inner overflow regions */ } .aieo-sc-panel img, .aieo-sc-panel video, .aieo-sc-panel picture { max-width: 100%; height: auto; } /* -------- Mobile: shell becomes a full-width sticky bar ----------------- */ @media (max-width: 720px) { /* The whole shell becomes the bar, fixed to the viewport bottom. * Burger on the left, search in the middle, trigger (flattened) on * the right. Same DOM, different layout — no JS reparenting, no * race with the desktop fixed-circle paint. * * Presentation is AIEO-controlled + theme-independent via the * --aieo-mbar-* custom properties emitted on :root by * render_on_footer(). Each var carries an inline fallback to the * theme token it used historically (accent bg / --bg icon / * --fg badge), so when "custom colours" is off the look is * unchanged. Height + bottom-reserve read --aieo-mbar-height. * * The bar layout is EXCLUDED when the shell carries * `aieo-sc-shell--bubble` (cart-only + the operator opted into the * floating-bubble presentation): the shell stays display:contents * and the trigger keeps its desktop fixed-circle styling on mobile * too — i.e. it renders exactly like the desktop bubble. */ .aieo-sc-floating-shell:not(.aieo-sc-shell--bubble) { display: flex !important; position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 999996; align-items: center; justify-content: space-between; height: var(--aieo-mbar-height, 58px); min-height: var(--aieo-mbar-height, 58px); max-height: var(--aieo-mbar-height, 58px); padding: 8px 16px; background: var(--aieo-mbar-bg, var(--wp--preset--color--accent, #F46767)); border-top: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.10); box-sizing: border-box; color: var(--aieo-mbar-icon, var(--wp--preset--color--bg, #ffffff)); /* Glass effect — when enabled, --aieo-mbar-backdrop is blur(Npx) and * --aieo-mbar-bg is a semi-transparent color-mix() so the page shows * through; default 'none' is a no-op (solid bar). */ -webkit-backdrop-filter: var(--aieo-mbar-backdrop, none); backdrop-filter: var(--aieo-mbar-backdrop, none); } /* A single enabled item (non-bubble) — centre it. `space-between` * collapses a lone flex child to the start (left), which is the * "cart pinned to the left" bug; centring reads as intentional. */ .aieo-sc-floating-shell.aieo-sc-shell--single { justify-content: center !important; } /* All slot buttons (burger / search / chat / future) share the same * shape — no chrome, 44×44 minimum touch target, themed icon. */ .aieo-sc-bar-burger, .aieo-sc-bar-search, .aieo-sc-bar-chat, .aieo-sc-bar-cookie { display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; margin: 0 !important; width: auto !important; padding: 8px !important; min-width: 44px; min-height: 44px; max-width: 44px; box-sizing: border-box; color: var(--aieo-mbar-icon, var(--wp--preset--color--bg, #ffffff)); cursor: pointer; } /* The icon inside any bar item can never exceed the 44px touch box — guards against a classic theme sizing the SVG/button content larger. */ .aieo-sc-bar-burger svg, .aieo-sc-bar-search svg, .aieo-sc-bar-chat svg, .aieo-sc-bar-cookie svg { width: 24px; height: 24px; max-width: 100%; flex: 0 0 auto; } .aieo-sc-bar-burger:active, .aieo-sc-bar-search:active, .aieo-sc-bar-chat:active, .aieo-sc-bar-cookie:active { transform: scale(0.96); } /* The desktop chat-launcher floating circle is hidden on mobile — * chat lives in the bar there, so two surfaces would conflict. */ .aieo-sc-chat-desktop { display: none !important; } /* Trigger flattens — drops the desktop "fixed black circle" so it * sits as the bar's right slot. Same SVG, same count badge, same * click handler — only the box presentation changes. Scoped to * NON-bubble shells so the bubble keeps the base fixed-circle rule. */ .aieo-sc-floating-shell:not(.aieo-sc-shell--bubble) .aieo-sc-trigger { /* relative (not static) so the absolute count badge anchors to the * trigger, not the fixed bar — keeps the badge on a centred lone cart * icon instead of floating to the bar's far right. */ position: relative !important; width: auto !important; height: auto !important; min-width: 44px; min-height: 44px; right: auto !important; bottom: auto !important; background: transparent !important; color: var(--aieo-mbar-icon, var(--wp--preset--color--bg, #ffffff)) !important; box-shadow: none !important; border-radius: 0 !important; padding: 8px !important; z-index: auto; } .aieo-sc-floating-shell:not(.aieo-sc-shell--bubble) .aieo-sc-trigger:hover { transform: none; background: transparent !important; } /* Count badge re-anchored against the smaller flat icon; circle + * number colours are AIEO-controlled (can differ from desktop). */ .aieo-sc-floating-shell:not(.aieo-sc-shell--bubble) .aieo-sc-trigger-count { top: 2px; right: 2px; background: var(--aieo-mbar-badge-bg, var(--wp--preset--color--fg, #1f2937)); color: var(--aieo-mbar-badge-fg, var(--wp--preset--color--bg, #ffffff)); } /* Reserve room at the bottom of every page so content scrolling * to the end isn't permanently obscured by the bar — matches the * bar height (--aieo-mbar-height, default 58px). render_on_footer * sets the var to 0px in bubble mode (no bar → no reserve). Kept * static (no env(safe-area) in the math) so iOS Safari can't * change body height during URL-bar transitions, which made the * bar appear to grow on scroll. */ body { padding-bottom: var(--aieo-mbar-height, 58px); } } /* -------- Scrim --------------------------------------------------------- */ .aieo-sc-scrim { position: fixed; inset: 0; background: rgba(20, 20, 20, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.24s ease; z-index: 999997; } .aieo-sc-root.is-open .aieo-sc-scrim { opacity: 1; pointer-events: auto; } /* -------- Panel --------------------------------------------------------- */ /* `[hidden]` means the panel is taken out of layout when closed. Some themes * override the global [hidden] selector, so we restate it explicitly with high * specificity. JS coordinates the transition (sets hidden→present before adding * .is-open, then re-applies hidden after the close transitionend). */ .aieo-sc-panel[hidden] { display: none !important; } .aieo-sc-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 720px; max-width: 96vw; display: grid; grid-template-columns: 190px minmax(0, 1fr); /* Transparent panel — each column owns its own background. The * left "you might like" column applies an Apple-glass blur, so the * panel itself can't be opaque (would block the blur from seeing * the page below). The right main column stays solid white. */ background: transparent; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: auto; z-index: 999998; overflow: hidden; } /* Defensive box-sizing — themes often set it in unpredictable ways and a * single element with extra padding can force a horizontal scrollbar on the * whole panel. Border-box everywhere under the root, no exceptions. */ .aieo-sc-root, .aieo-sc-root *, .aieo-sc-root *::before, .aieo-sc-root *::after { box-sizing: border-box; } .aieo-sc-root.is-open .aieo-sc-panel { transform: translateX(0); } /* Animate the column-template change when the reco-col is toggled — * modern browsers (Chrome 111+, Safari 17.4+, Firefox 116+) interpolate * grid-template-columns; older browsers snap immediately, which is * still a clean state change. */ .aieo-sc-panel { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1); } /* Rey-style "collapse the recommendations sidebar" toggle. Pinned * to the seam between the two columns; slides to the panel's left * edge when the sidebar is collapsed. State stored in sessionStorage * (per-session) under `aieo_sc_reco_collapsed`. */ .aieo-sc-reco-toggle { position: absolute; top: 50%; left: 178px; /* 190px column - 12px (half of 24px button) */ transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: #ffffff; border: 1px solid #d8d8d8; color: #5a5a5a; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .aieo-sc-reco-toggle:hover { color: #1a1a1a; border-color: #1a1a1a; } .aieo-sc-reco-toggle-icon { width: 7px; height: 11px; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } /* Collapsed state: shrink the reco column to 0, slide the toggle to * the panel's left edge, mirror the chevron to point right (open). */ .aieo-sc-root.is-reco-collapsed .aieo-sc-panel { grid-template-columns: 0 minmax(0, 1fr); } .aieo-sc-root.is-reco-collapsed .aieo-sc-reco-col { overflow: hidden; padding: 0; border-right: 0; box-shadow: none; } .aieo-sc-root.is-reco-collapsed .aieo-sc-reco-toggle { /* Sit fully inside the panel's left edge so neither the icon * nor the box-shadow gets clipped by the panel boundary. */ left: 6px; } /* Sidebar open (aria-expanded="true") → chevron `>` (click to close, * pushes the sidebar away). * Sidebar closed (aria-expanded="false") → chevron `<` (click to open, * pulls the sidebar back). */ .aieo-sc-reco-toggle[aria-expanded="true"] .aieo-sc-reco-toggle-icon { transform: scaleX(1); } .aieo-sc-reco-toggle[aria-expanded="false"] .aieo-sc-reco-toggle-icon { transform: scaleX(-1); } /* Hide the toggle on mobile — the reco column is already hidden * there (panel goes single-column), so toggling it is a no-op. */ @media (max-width: 720px) { .aieo-sc-reco-toggle { display: none; } } /* No recommendations to show (set by the JS when the reco DTO list is empty or * there's no seed product) — collapse the sidebar column to 0 AND hide the * collapse toggle, so the cart fills the panel instead of an empty * "You might like.." pane. Mirrors is-reco-collapsed, minus the toggle. */ .aieo-sc-root.is-reco-empty .aieo-sc-panel { grid-template-columns: 0 minmax(0, 1fr); } .aieo-sc-root.is-reco-empty .aieo-sc-reco-col { overflow: hidden; padding: 0; border-right: 0; box-shadow: none; } .aieo-sc-root.is-reco-empty .aieo-sc-reco-toggle { display: none; } /* -------- Left column: recommendations ---------------------------------- */ /* Apple-style "liquid glass" panel — translucent white with a heavy * backdrop blur so the page beneath shows through softly. Subtle inner * highlight on the right edge replaces the old hard `1px solid #eee`. */ .aieo-sc-reco-col { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-right: 1px solid rgba(255, 255, 255, 0.35); box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.04); padding: 22px 14px; overflow-y: auto; } /* "You might like.." — bumped to a properly legible 18px / 700, brand * gold and uppercase. Reads as a peer-level navigation label without * being so small the eye misses it. */ .aieo-sc-reco-title { font-size: 18px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--aieo-sc-reco-title-color, #c0a37b); margin-bottom: 18px; line-height: 1.4; } .aieo-sc-reco-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; } .aieo-sc-reco-item { text-align: left; font-family: inherit; } /* -------- Right column: main cart --------------------------------------- */ .aieo-sc-main-col { display: flex; flex-direction: column; min-width: 0; max-width: 100%; overflow: hidden; background: #fff; height: 100%; } /* Tab bodies wrapper — owns the desktop scroll area so the shared * footer below stays pinned. `min-height: 0` is critical so the flex * child can shrink below its intrinsic content height (otherwise the * scroll never engages). */ .aieo-sc-tab-bodies { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* Header with tabs + close */ .aieo-sc-header { display: flex; align-items: center; padding: 20px 26px 0; border-bottom: 1px solid #eee; } .aieo-sc-tabs { flex: 1; display: flex; gap: 14px; flex-wrap: nowrap; } .aieo-sc-tab { background: transparent; border: 0; padding: 0 0 14px; font-size: 9px; font-weight: 500; letter-spacing: 0.6px; color: #c9c9c9; cursor: pointer; border-bottom: 2px solid transparent; position: relative; display: flex; align-items: baseline; gap: 3px; transition: color 0.15s ease, border-bottom-color 0.15s ease; white-space: nowrap; } .aieo-sc-tab:hover { color: #1a1a1a; border-bottom-color: #d8d8d8; } .aieo-sc-tab.is-active { color: #1a1a1a; border-bottom-color: var(--aieo-sc-accent, #c0a37b); } .aieo-sc-tab.is-active:hover { border-bottom-color: var(--aieo-sc-accent, #c0a37b); /* keep gold on the active tab */ } .aieo-sc-tab-count { font-size: 8px; font-weight: 400; letter-spacing: 0; color: inherit; opacity: 0.75; } .aieo-sc-close { background: transparent; border: 0; font-size: 24px; line-height: 1; color: #6a6a6a; cursor: pointer; padding: 0 0 14px 20px; } .aieo-sc-close:hover { color: #1a1a1a; } /* ───────────────────────────────────────────────────────────────── * Favourites sub-tabs (Products / Articles / Brands / Categories / * Needs). Rendered client-side in aieo-side-cart.js (renderFavShell) * inside the `data-aieo-sc-body="favorites"` panel. * * Styled to mirror the OUTER tabs (.aieo-sc-tab) so the visual * language stays consistent across both tab levels: * default → muted gray text, transparent underline * hover → near-black text, light-gray underline * active → near-black text, gold underline (#c0a37b) * * Sub-tabs use a slightly larger font + tighter letter-spacing than * the outer tabs (the outer ones are ALL-CAPS at 9px / 0.6px, which * reads as a primary nav; the inner row is regular case at 11px / * 0.3px so it doesn't compete visually). * ───────────────────────────────────────────────────────────────── */ .aieo-sc-fav-subtabs { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 18px; padding: 0 0 1px; border-bottom: 1px solid #eee; } .aieo-sc-fav-subtab { background: transparent; border: 0; padding: 0 0 10px; font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: #c9c9c9; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; /* overlap the parent's bottom border so the active underline replaces it cleanly */ display: inline-flex; align-items: baseline; gap: 4px; transition: color 0.15s ease, border-bottom-color 0.15s ease; white-space: nowrap; } .aieo-sc-fav-subtab:hover { color: #1a1a1a; border-bottom-color: #d8d8d8; } .aieo-sc-fav-subtab.is-active, .aieo-sc-fav-subtab[aria-selected="true"] { color: #1a1a1a; border-bottom-color: var(--aieo-sc-accent, #c0a37b); } .aieo-sc-fav-subtab.is-active:hover, .aieo-sc-fav-subtab[aria-selected="true"]:hover { border-bottom-color: var(--aieo-sc-accent, #c0a37b); /* keep gold on the active sub-tab */ } .aieo-sc-fav-subtab:focus-visible { /* Focus indicator = the gold UNDERLINE, not a box. The old * `outline:2px solid #c0a37b; outline-offset:2px; border-radius:1px` * painted a rounded gold BOX around the button — and because Chrome's * :focus-visible heuristic also fires after a MOUSE CLICK on a