the class "wrap" as well, so it picks up the utility above. It is a child of the column-flex .site, and auto margins on a flex item cancel the default stretch: without an explicit width the main shrinks to fit its content, so pages with little in them (payment methods, an address form) render narrower than pages with a lot. The width pins every page to the same column. */ #inner-wrap.wrap { width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -0.02em; line-height: 1.1; } .mono { font-family: var(--mono); } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); } /* ── utility bar ── */ .util { border-bottom: 1px solid var(--line); background: var(--surface); } .util .wrap { display: flex; justify-content: space-between; align-items: center; height: 34px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em; } .util span { display: inline-flex; align-items: center; gap: 7px; } .util .r { display: flex; gap: 22px; } /* ── masthead: util + header + section nav stick together as one unit so the docked rail can dock directly beneath it (and never clip under or cover the section nav). The WP admin bar (logged-in only) offsets the sticky top. ── */ .fot-masthead { position: sticky; top: 0; z-index: 40; } .admin-bar .fot-masthead { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .fot-masthead { top: 46px; } } /* ── header ── */ /* Scoped to the masthead: WooCommerce also emits

for the address-card titles in the account area, which must not inherit the masthead's glass and rule. */ .fot-masthead header { position: relative; z-index: 40; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .fot-masthead header .wrap { display: flex; align-items: center; gap: 22px; height: 68px; } .logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .logo b { font-weight: 800; font-size: 17px; letter-spacing: -0.03em; } .logo b span { color: var(--accent); } /* Qualified on the element: WordPress stamps a bare `search` class on for search results, so an unqualified .search would cap the whole page at the box's width. */ form.search { flex: 1; position: relative; max-width: 560px; } form.search input { width: 100%; height: 42px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--ground); color: var(--ink); padding: 0 44px 0 40px; font-size: 14px; font-family: var(--sans); } form.search input::placeholder { color: var(--muted); } form.search input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } form.search .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); } form.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 5px; padding: 2px 6px; } .hicons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .iconbtn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 8px; color: var(--ink-dim); font-size: 10.5px; font-family: var(--mono); letter-spacing: 0.03em; position: relative; } .iconbtn:hover { background: var(--surface-2); color: var(--ink); } .iconbtn .badge { position: absolute; top: 1px; right: 6px; background: var(--accent); color: var(--on-accent); font-size: 9px; font-weight: 700; border-radius: 8px; padding: 0 4px; font-family: var(--mono); } /* Cart badge is always rendered (so the fragment can replace it) but hidden at zero. */ .badge.fot-cart-count[data-count="0"] { display: none; } /* ── chip ── */ .chip { font-family: var(--mono); font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-dim); background: color-mix(in srgb, var(--surface) 60%, transparent); cursor: pointer; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip.sep { border: none; color: var(--muted); padding-left: 6px; cursor: default; } /* ── product card ── */ .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s; } .card:hover { border-color: var(--line-strong); } .thumb { aspect-ratio: 4/3; background: #fff; overflow: hidden; display: grid; place-items: center; border-bottom: 1px solid var(--line); position: relative; } .thumb svg { color: var(--accent); opacity: 0.85; } /* Fixed-ratio box + contain = product photos never clip and every card's name/price line up regardless of the source image's aspect ratio. */ .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; } .thumb .tag { position: absolute; top: 9px; left: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent); border-radius: 5px; padding: 2px 6px; background: color-mix(in srgb, var(--ground) 70%, transparent); } .card .body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .card .sku { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; } .card .nm { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink); } .card .spec { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); display: flex; gap: 8px; flex-wrap: wrap; } .card .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; } /* ── price / stock ── */ .price { font-family: var(--mono); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; } .stock { font-family: var(--mono); font-size: 10.5px; color: var(--good); display: inline-flex; align-items: center; gap: 5px; } /* ── add / add-to-list buttons ── */ .btns { display: flex; gap: 6px; } .add { flex: 1; height: 34px; border-radius: 7px; border: 0; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 12.5px; font-family: var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .add:hover { background: var(--accent-deep); } /* WooCommerce AJAX add-to-cart states: keep the label readable (no opacity greying) and hide the default "View cart" link — feedback comes from the docked drawer instead. */ .add.loading, .add.added, .ajax_add_to_cart.loading, .ajax_add_to_cart.added { opacity: 1 !important; } a.added_to_cart, a.added_to_cart.wc-forward { display: none !important; } .tolist { width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-dim); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; } .tolist:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* ── footer ── */ footer { padding: 52px 0 40px; background: var(--surface); } .fgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; } footer h4 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 14px; } footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; } footer li a { font-size: 13.5px; color: var(--ink-dim); } footer li a:hover { color: var(--accent); } footer .about p { color: var(--muted); font-size: 13.5px; max-width: 34ch; margin: 12px 0 0; } .fbottom { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; color: var(--muted); } /* ── shared responsive rules ── */ @media (max-width: 900px) { .fgrid { grid-template-columns: 1fr; } .util .r span:nth-child(2) { display: none; } /* Two-row header: logo + actions on top, full-width search below (always reachable, rather than hiding search on phones). The masthead height is measured live for the drawer dock, so a taller header needs no other change. */ .fot-masthead header .wrap { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; row-gap: 10px; } .hicons { margin-left: auto; gap: 2px; } form.search { order: 3; flex: 1 1 100%; max-width: 100%; } form.search kbd { display: none; } /* Condense the header actions to icon-only so they plus the logo fit a phone width (font-size:0 hides the text node after each svg; svg size is attr-based). */ .iconbtn { font-size: 0; padding: 8px; gap: 0; } .iconbtn .badge { font-size: 9px; } } @media (max-width: 560px) { .fgrid { grid-template-columns: 1fr 1fr; } } /* ══════════════════════════════════════════════════════════════ Docked contextual right-rail (the everyday cart; also home for lists / orders / account). Docked below the header on the right and RESERVES content space instead of overlaying it. Content left-aligns into the freed space. On narrow screens it falls back to an overlay sheet. ══════════════════════════════════════════════════════════════ */ /* Full-viewport clip layer: the drawer sits off-screen (translateX) when closed, and a position:fixed element is NOT clipped by body's overflow, so it would extend the page width. Housing the rail in this fixed, overflow-clipped, click-through wrapper contains the off-screen drawer without a horizontal scrollbar. */ .rail-viewport { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 89; } .cart-scrim { position: absolute; inset: 0; background: rgba(6,14,22,0.5); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; z-index: 90; display: none; pointer-events: auto; } .cart-scrim.open { opacity: 1; visibility: visible; } /* top is refined at runtime to the masthead's exact bottom (frame.js); this is the pre-JS fallback (util 34 + header 68 + section nav 47 = 149). */ .cartdrawer { position: absolute; top: var(--fot-dock-top, 149px); right: 0; bottom: 0; width: 400px; max-width: 92vw; background: var(--surface); border-left: 1px solid var(--line-strong); z-index: 30; pointer-events: auto; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; } .cartdrawer.open { transform: translateX(0); } /* Reserve space so the drawer never overlays content (desktop). The content column's reservation lives on Kadence's #inner-wrap (functions.php, wp_head override) and only there: .site-main sits inside that wrapper, so reserving on both took the 400px twice and left the page squeezed into the left half of the free space. */ footer { transition: padding .28s cubic-bezier(.4,0,.2,1); } body.cart-open footer { padding-right: 400px; } /* Restored-open rail: html[data-rail] is stamped pre-paint by the wp_head snippet when the drawer was open on the previous page, so it renders already docked — no slide-in replay, margins reserved from the first frame. frame.js adopts the state on DOMContentLoaded and clears the attribute. */ @media (min-width: 1025px) { html[data-rail] .cartdrawer { transform: none; transition: none; } html[data-rail] footer { transition: none; } html[data-rail] footer { padding-right: 400px; } } .cd-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); } .cd-head h3 { font-size: 15px; font-weight: 750; display: flex; align-items: center; gap: 9px; margin: 0; } .cd-head .cnt { font-family: var(--mono); font-size: 11px; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 1px 8px; } .cd-close { background: none; border: 0; color: var(--muted); cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; } .cd-close:hover { background: var(--surface-2); color: var(--ink); } /* The AJAX fragment wrapper (#cd-cart-fragment) must pass the drawer's flex chain through, or .cd-items never gets a bounded height and a long cart can't scroll. */ .cd-cart { display: flex; flex-direction: column; flex: 1; min-height: 0; } .cd-items { flex: 1; overflow-y: auto; padding: 6px 0; overscroll-behavior: contain; } .cd-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); } .cd-thumb { width: 46px; height: 46px; border-radius: 7px; background: #fff; overflow: hidden; display: grid; place-items: center; color: var(--accent); } .cd-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; } .cd-d { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .cd-d .nm { font-size: 12.5px; font-weight: 600; line-height: 1.3; } .cd-d .sku { font-family: var(--mono); font-size: 10px; color: var(--muted); } .cd-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 7px; width: fit-content; margin-top: 3px; } .cd-qty button { width: 26px; height: 26px; border: 0; background: none; color: var(--ink-dim); cursor: pointer; font-size: 15px; display: grid; place-items: center; } .cd-qty button:hover { color: var(--accent); } .cd-qty span { font-family: var(--mono); font-size: 12px; min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; } .cd-r { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } .cd-r .lp { font-family: var(--mono); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; } .cd-rm { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 10.5px; font-family: var(--mono); padding: 2px; } .cd-rm:hover { color: #e0574f; } .cd-actions { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); } .cd-actions button { flex: 1; height: 34px; border: 1px solid var(--line-strong); background: transparent; border-radius: 7px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .cd-actions button:hover { border-color: var(--accent); color: var(--accent); } .cd-foot { padding: 14px 18px 18px; border-top: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 11px; } .cd-sub { display: flex; justify-content: space-between; align-items: baseline; } .cd-sub .l { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .cd-sub .v { font-family: var(--mono); font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; } .cd-checkout { height: 46px; border: 0; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-weight: 750; font-size: 14px; font-family: var(--sans); cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; } .cd-checkout:hover { background: var(--accent-deep); } .cd-viewcart { text-align: center; font-family: var(--mono); font-size: 12px; color: var(--accent); } .cd-viewcart:hover { text-decoration: underline; } .cd-empty { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); padding: 40px; text-align: center; } .cd-empty svg { color: var(--line-strong); } .cd-signin { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 32px 24px; text-align: center; } .cd-signin .ss-msg { color: var(--ink-dim); font-size: 14px; margin-bottom: 4px; } .cd-signin .ss-btn { height: 44px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .cd-signin .ss-btn:hover { background: var(--accent-deep); } .cd-signin .ss-alt { font-family: var(--mono); font-size: 12.5px; color: var(--accent); text-decoration: none; } .cd-signin .ss-alt:hover { text-decoration: underline; } .cartdrawer.empty .cd-items, .cartdrawer.empty .cd-actions, .cartdrawer.empty .cd-foot { display: none; } .cartdrawer.empty .cd-empty { display: flex; } /* multi-mode contextual panel: cart / lists / account (support later) */ .cd-tabs { display: flex; align-items: center; gap: 3px; padding: 9px 12px; border-bottom: 1px solid var(--line); } .cd-tab { font-family: var(--mono); font-size: 12px; padding: 7px 11px; border-radius: 7px; border: 0; background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .cd-tab:hover { color: var(--ink); background: var(--surface-2); } .cd-tab.on { color: var(--ink); background: var(--surface-2); font-weight: 700; } .cd-tab .cnt { font-family: var(--mono); font-size: 10px; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 0 6px; line-height: 1.6; } .cd-tabs .cd-close { margin-left: auto; } .cmode { flex: 1; min-height: 0; display: none; flex-direction: column; } .cmode.on { display: flex; } .lm-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); } .lm-head a { color: var(--accent); } .lm-body { flex: 1; overflow-y: auto; } .lm-item { padding: 13px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .lm-item .t { font-weight: 650; font-size: 13.5px; } .lm-item .m { font-family: var(--mono); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .lm-item .a { display: flex; gap: 7px; margin-top: 2px; } /* Row actions are anchors (Reorder, View, Open list) or buttons (Add all to cart); both get the same box, and each state restates its colour because Kadence's a:hover, a:active, button:hover/:focus/:active would otherwise recolour them. Kadence's button rule also adds a drop shadow on hover and tweens every property over .2s; neither belongs on these. */ .lm-item .a > *, .lm-actions > * { flex: 1; height: 34px; border-radius: 7px; font-family: var(--sans); font-size: 12.5px; font-weight: 650; line-height: 1; cursor: pointer; text-decoration: none; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; box-shadow: none; transition: none; } .lm-reorder, .lm-addall { border: 0; background: var(--accent); color: var(--on-accent); } .lm-reorder:hover, .lm-reorder:focus, .lm-reorder:active, .lm-addall:hover, .lm-addall:focus, .lm-addall:active { background: var(--accent-deep); color: var(--on-accent); box-shadow: none; } .lm-open { border: 1px solid var(--line-strong); background: transparent; color: var(--ink-dim); } .lm-open:hover, .lm-open:focus, .lm-open:active { border-color: var(--accent); color: var(--accent); background: transparent; } .lm-foot, .ac-foot { padding: 14px 18px; border-top: 1px solid var(--line); text-align: center; } .lm-foot a, .ac-foot a { color: var(--accent); font-family: var(--mono); font-size: 12px; } .ac-hd { padding: 18px; border-bottom: 1px solid var(--line); } .ac-hd .who { font-weight: 700; font-size: 15px; } .ac-hd .co { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 3px; } .ac-links { flex: 1; overflow-y: auto; padding: 6px 0; } .ac-link { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: var(--ink-dim); cursor: pointer; font-size: 13.5px; } .ac-link:hover { background: var(--surface-2); color: var(--ink); } .ac-link svg { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; } .ac-link .badge2 { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--muted); } /* orders mode */ .lm-date { color: var(--muted); font-weight: 400; font-family: var(--mono); font-size: 11px; } .ostatus { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; white-space: nowrap; } .ostatus.del { color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); } .ostatus.ship { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } /* collapsible lists mode — thumbnail preview + expand/collapse */ .lm-list { border-bottom: 1px solid var(--line); } .lm-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: none; border: 0; border-radius: 0; cursor: pointer; text-align: left; color: var(--ink); font: inherit; box-shadow: none; transition: none; } /* Every state named: Kadence's button:hover/:focus paint its dark button palette and a drop shadow over an unqualified button, which turned the open list's header navy with navy text. */ .lm-row:hover, .lm-row:focus, .lm-row:active { background: var(--surface-2); color: var(--ink); box-shadow: none; } .lm-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .lm-list.open > .lm-row { background: color-mix(in srgb, var(--accent-glow) 70%, transparent); color: var(--ink); } .lm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .lm-main .t { font-weight: 650; font-size: 13px; } .lm-main .m { font-family: var(--mono); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .lm-thumbs { display: flex; align-items: center; gap: 4px; margin-top: 2px; } .lmt { width: 20px; height: 20px; border-radius: 4px; background: var(--surface-2); display: grid; place-items: center; color: var(--accent); flex-shrink: 0; } .lmt svg { width: 12px; height: 12px; } .lm-thumbs .more { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-left: 2px; } .chev { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; transition: transform .18s; } .lm-list.open .chev { transform: rotate(180deg); } .lm-detail { display: none; padding: 0 18px 14px; } .lm-list.open .lm-detail { display: block; } .lm-line { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); } .lm-line .lt { width: 26px; height: 26px; border-radius: 5px; background: var(--surface-2); display: grid; place-items: center; color: var(--accent); flex-shrink: 0; } .lm-line .lt svg { width: 14px; height: 14px; } .lm-line .ln { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lm-line .lq { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .lm-more { font-family: var(--mono); font-size: 10.5px; color: var(--muted); padding: 8px 0 4px; border-top: 1px solid var(--line); } .lm-actions { display: flex; gap: 7px; margin-top: 10px; } /* narrow screens: no room to dock, so overlay as a sheet with a scrim */ @media (max-width: 1024px) { body.cart-open footer { padding-right: 0; } .cart-scrim { display: block; } .cartdrawer { top: 0; z-index: 91; } /* Shadow only while open: the closed drawer sits just off-screen inside the clipped rail viewport, and its shadow would otherwise leak back in as a band along the edge. */ .cartdrawer.open { box-shadow: -24px 0 60px -30px rgba(0,0,0,.5); } } @media (max-width: 560px) { .cartdrawer { width: 100%; max-width: 100%; } } /* ── section nav (below header): high-level browse paths so the catalog is reachable from any page. Catalog opens a dropdown of real top categories. ── */ .sectionnav { border-bottom: 1px solid var(--line); background: var(--surface); position: relative; z-index: 20; } .sectionnav .wrap { display: flex; align-items: stretch; gap: 2px; } .snav-item { position: relative; display: flex; } .snav-link { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-dim); white-space: nowrap; border-bottom: 2px solid transparent; } .snav-link:hover { color: var(--accent); } .snav-link .caret { color: var(--muted); transition: transform .16s; } .snav-item.has-drop:hover .snav-link, .snav-item.has-drop:focus-within .snav-link { color: var(--accent); border-bottom-color: var(--accent); } .snav-item.has-drop:hover .caret { transform: rotate(180deg); } .snav-support { margin-left: auto; color: var(--accent); } .snav-support:hover { color: var(--accent-deep); } .snav-ext .via { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .snav-ext svg { color: var(--muted); } /* dropdown panel */ .snav-panel { position: absolute; top: 100%; left: 0; min-width: 460px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0 0 12px 12px; box-shadow: 0 24px 50px -24px rgba(6,20,34,0.28); padding: 12px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 30; } .snav-item.has-drop:hover .snav-panel, .snav-item.has-drop:focus-within .snav-panel { opacity: 1; visibility: visible; transform: translateY(0); } .snav-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .snav-cat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--ink-dim); font-size: 13px; } .snav-cat:hover { background: var(--surface-2); color: var(--ink); } .snav-cat .cnt { font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .snav-all { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; padding: 11px; border-top: 1px solid var(--line); color: var(--accent); font-weight: 650; font-size: 13px; } .snav-all:hover { color: var(--accent-deep); } @media (max-width: 900px) { .sectionnav .wrap { overflow-x: auto; gap: 0; } .snav-support { margin-left: 0; } .snav-panel { display: none; } } /* ── Job Lists: rail thumbnails, add-to-list menu, toast ── */ .lmt img, .lt img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; } .jl-menu { position: absolute; z-index: 95; width: 280px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 24px 50px -22px rgba(6,20,34,0.3); overflow: hidden; } .jl-menu-h { padding: 12px 14px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--line); } .jl-menu-body { max-height: 240px; overflow-y: auto; padding: 4px; } .jl-menu-empty { padding: 12px 14px; color: var(--muted); font-size: 12.5px; } .jl-menu-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 0; background: none; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink-dim); font-family: var(--sans); text-align: left; } .jl-menu-item:hover { background: var(--surface-2); color: var(--ink); } .jl-menu-item .jl-menu-count { font-family: var(--mono); font-size: 11px; color: var(--muted); } .jl-menu-new { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); } .jl-menu-input { flex: 1; min-width: 0; height: 34px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--ground); color: var(--ink); padding: 0 10px; font-size: 12.5px; font-family: var(--sans); } .jl-menu-input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } .jl-menu-create { height: 34px; padding: 0 12px; border: 0; border-radius: 7px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 12px; font-family: var(--sans); cursor: pointer; white-space: nowrap; } .jl-menu-create:hover { background: var(--accent-deep); } .jl-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); z-index: 120; background: var(--ink); color: var(--surface); padding: 12px 16px; border-radius: 10px; font-size: 13.5px; display: flex; align-items: center; gap: 14px; box-shadow: 0 20px 44px -20px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; max-width: calc(100vw - 24px); } .jl-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .jl-toast a { color: var(--signal); font-weight: 700; white-space: nowrap; } /* Add-to-list buttons: "already saved in a list" state */ .tolist.in-list, .rlist.in-list { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .listbtn.in-list { border-color: var(--accent); color: var(--accent); } .jl-menu-item.has-product { color: var(--ink); } .jl-menu-item .jl-in { color: var(--good); font-family: var(--mono); font-size: 10.5px; white-space: nowrap; }