/* ==========================================================
Catalog page — sidebar, toolbar and product grid.
Reuses the landing page's tokens, nav and footer; only the
shop-specific furniture lives here.
========================================================== */
/* The catalogue is a shelf, and a shelf should use the screen it is on: the
measure the landing page keeps (1400px, set in catalog.css, which both
pages load) left a wide monitor with a hand-width of nothing down each
side. The class is on , so only this page widens. */
body.page-catalog{--shop-max:1760px;}
/* ---------- the band ----------
Photograph, scrim, nav and copy are all one banner: the picture runs
edge to edge behind the navigation rather than starting below it. */
.shop-hero{
position:relative;overflow:hidden;isolation:isolate;
margin:18px;border-radius:var(--radius);
min-height:clamp(280px,28vw,364px);
display:flex;flex-direction:column;
}
.sky--shop{position:absolute;inset:0;z-index:0;overflow:hidden;}
.shop-hero > .nav{position:relative;z-index:3;}
/* ==========================================================
PROMOTIONAL BANNER
The band advertises the offer rather than the stock: a
photograph, a headline and one button. The scrim is what makes
it readable — a photo alone can never be trusted to have a
quiet corner where the type happens to land.
========================================================== */
/* The photographs are stacked; banner.js moves .is-on down the pile and the
fade does the rest. They share one grade — the same the hero slider and the
corridor use, pushed darker — so a cut never reads as a change of mood. */
.adv-photo{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;object-position:65% 45%;
filter:saturate(.66) contrast(1.05) brightness(.62);
opacity:0;
transition:opacity 1.1s ease;
}
.adv-photo.is-on{opacity:1;}
/* dark site, light band: the photograph is lifted rather than pushed down, and
the scrim over it goes pale so navy type reads against it */
:root[data-theme="dark"] .adv-photo{
filter:saturate(.5) contrast(1.02) brightness(1.24);
}
@media (prefers-reduced-motion:reduce){
.adv-photo{transition:none;}
}
/* solid behind the copy, clear over the picture; the vertical pass keeps
the nav legible along the top edge */
.adv-scrim{
position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(90deg, rgba(2,7,26,.95) 0%, rgba(3,16,47,.86) 38%, rgba(3,16,47,.35) 68%, rgba(3,16,47,.1) 100%),
linear-gradient(180deg, rgba(2,7,26,.5) 0%, rgba(2,7,26,0) 42%, rgba(2,7,26,.45) 100%);
}
:root[data-theme="dark"] .adv-scrim{
background:
linear-gradient(90deg, rgba(245,247,252,.95) 0%, rgba(238,241,250,.88) 38%, rgba(238,241,250,.4) 68%, rgba(238,241,250,.12) 100%),
linear-gradient(180deg, rgba(245,247,252,.55) 0%, rgba(245,247,252,0) 42%, rgba(245,247,252,.5) 100%);
}
.adv-body{position:relative;z-index:2;flex:1;display:grid;align-items:center;}
.adv-copy{
width:100%;max-width:var(--shop-max);margin:0 auto;
padding:0 30px 26px;
}
.adv-title{
/* No ceiling on the width: the break is the panel's to place, so the width
must not take a second one of its own. A line too long for the band still
wraps, which is the cue to shorten it in the panel. */
margin:0;max-width:none;
font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
font-size:clamp(27px,3.5vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1.1;
color:var(--panel-ink);
}
/* each line is its own key, so each one is its own block; the width is only
a backstop for a phone, where a long line still has to wrap */
.adv-line{display:block;}
.adv-text{margin:15px 0 0;max-width:46ch;font-size:13.5px;line-height:1.62;color:var(--panel-ink-mid);}
.adv-cta{margin-top:18px;}
/* ==========================================================
WHAT WE SPECIALISE IN
The two directions the company actually builds. No panel
around them: each one is a framed tile, the same frame the
category tiles in the rail wear, standing on the page
itself. They answer a pointer the way those tiles do —
a step sideways, an amber edge — with the badge, the sweep
and the arrow on top, because these two are the point.
========================================================== */
.spec{max-width:var(--shop-max);margin:38px auto 0;padding:0 30px;}
/* ---------- the space these two hold before they are filled ----------
Both are written by catalog.js, which cannot run until a 150KB bundle
of products has arrived — and on a phone the browser has usually
painted by then. Without the space held, the band appearing shoves the
whole catalogue down the page half a second after it looked finished,
which is the single most unsettling thing a page can do.
The band waits by class rather than by the hidden attribute, which no
stylesheet can override: the rendering spec gives [hidden] a
display:none the author cascade cannot outrank. catalog.js drops the
class the moment it knows, and hides the section outright if there was
nothing to put in it. */
.spec.is-waiting{visibility:hidden;min-height:190px;}
.spec.is-waiting > *{visibility:hidden;}
.filters:empty{min-height:56px;}
.spec-head{
position:relative;margin:0 0 22px;text-align:center;
font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-.045em;line-height:1.1;
color:var(--text);
}
/* A light travels through the letters, not over them: the gradient is
clipped to the type, so what moves is the heading's own colour. The
fallback is the plain colour above, which is what a browser without
background-clip:text, or a visitor who asked for less motion, gets. */
@supports (-webkit-background-clip: text) or (background-clip: text){
.spec-head{
background-image:linear-gradient(100deg,
var(--text) 0%, var(--text) 40%,
var(--amber) 50%,
var(--text) 60%, var(--text) 100%);
/* repeat-x, not no-repeat: a gradient this much wider than its box runs
clean off the end at the far side of the travel, and with nothing to
repeat the letters are clipped to empty. Both ends of the gradient are
the plain colour, so the tiling seam never shows. */
background-size:280% 100%;background-repeat:repeat-x;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:specTitle 6s linear infinite;
}
}
@keyframes specTitle{
from{background-position:0% 0;}
to{background-position:100% 0;}
}
/* the rule under it has a sheen of its own, on the same slow clock */
.spec-head::after{
content:"";display:block;
width:62px;height:3px;margin:15px auto 0;border-radius:2px;
background:linear-gradient(90deg,
color-mix(in srgb, var(--amber) 22%, transparent) 0%,
var(--amber) 50%,
color-mix(in srgb, var(--amber) 22%, transparent) 100%);
background-size:260% 100%;
animation:specSheen 5.5s linear infinite;
}
@keyframes specSheen{
from{background-position:130% 0;}
to{background-position:-130% 0;}
}
.spec-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
/* the
is the grid item and the tile is the link inside it: both stretch,
so a name that wraps to a third line in Russian lifts its neighbour too */
.spec-cards > li{display:flex;}
/* Dark in both themes, and not by way of --surface: on the light page these
two are meant to be the heaviest thing in the band, and on the dark one
they are the panel the landing page's tiles already wear. The gradient is
wider than the tile and drifts across it, so the background is never quite
still. Local ink names, because a permanently dark tile cannot use the
ones that flip with the theme. */
.spec-card{
--spec-ink:#f3f6fc;
--spec-ink-soft:rgba(243,246,252,.6);
position:relative;overflow:hidden;flex:1;
display:flex;align-items:center;gap:15px;
padding:15px 17px;border-radius:16px;
background-image:linear-gradient(125deg,
#02071a 0%, #04102f 26%, #082257 50%, #04102f 74%, #010613 100%);
background-size:220% 220%;
animation:specDrift 16s ease-in-out infinite;
border:1px solid rgba(255,255,255,.11);
box-shadow:0 14px 34px rgba(4,16,46,.24);
transition:box-shadow .22s ease, border-color .2s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes specDrift{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
/* the amber edge is what makes these two read as "ours" rather than as two
more categories that happen to be up here */
.spec-card::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--amber);
transform:scaleY(.32);transform-origin:50% 0;
transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
/* a light that sweeps across once, on the way in — amber rather than white,
so it shows on a pale card as well as on a navy one */
.spec-card::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(104deg,
transparent 32%,
color-mix(in srgb, var(--amber) 22%, transparent) 48%,
transparent 64%);
transform:translateX(-130%);
}
/* the same answer a category tile gives — a step sideways and an amber
edge — and then the parts that are only these two: the bar, the sweep,
the underline and the arrow */
.spec-card:hover{
transform:translateX(3px);
border-color:rgba(220,152,69,.6);
box-shadow:0 22px 46px rgba(4,16,46,.34);
}
.spec-card:hover::before{transform:scaleY(1);}
.spec-card:hover::after{animation:specShine .9s cubic-bezier(.3,.7,.4,1);}
@keyframes specShine{
from{transform:translateX(-130%);}
to{transform:translateX(130%);}
}
.spec-card.is-active{border-color:var(--amber);}
.spec-card.is-active::before{transform:scaleY(1);}
.spec-photo{
position:relative;flex:0 0 auto;
width:72px;height:72px;border-radius:13px;overflow:hidden;
background:rgba(255,255,255,.06);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.spec-photo img{
width:100%;height:100%;object-fit:cover;
transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.spec-card:hover .spec-photo img{transform:scale(1.08);}
.spec-body{display:flex;flex-direction:column;align-items:flex-start;gap:5px;flex:1;min-width:0;}
/* the count is a badge, not a caption: amber type went faint on the pale
panel of the dark theme, and the same pill already marks a discount */
.spec-n{
padding:3px 9px;border-radius:999px;
background:var(--amber);color:var(--on-amber);
font-size:10px;font-weight:800;letter-spacing:-.01em;
box-shadow:0 5px 12px rgba(200,132,47,.34);
transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
.spec-card:hover .spec-n{transform:translateX(2px);}
.spec-name{
position:relative;max-width:100%;padding-bottom:5px;
font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
font-size:clamp(15px,1.35vw,19px);font-weight:800;letter-spacing:-.03em;line-height:1.24;
color:var(--spec-ink);overflow-wrap:anywhere;
}
.spec-name::after{
content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;border-radius:2px;
background:var(--amber);
transform:scaleX(0);transform-origin:0 50%;
transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.spec-card:hover .spec-name::after{transform:scaleX(1);}
.spec-desc{font-size:11.5px;line-height:1.45;color:var(--spec-ink-soft);}
/* the arrow behaves exactly like the one on a landing-page category tile */
.spec-go{
flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;
border-radius:999px;background:var(--amber);color:var(--on-amber);
transform:translateX(-4px);opacity:.85;
transition:transform .25s cubic-bezier(.22,.61,.36,1), opacity .25s ease,
background .2s ease;
}
.spec-go svg{width:17px;height:17px;}
.spec-card:hover .spec-go{transform:none;opacity:1;background:var(--amber-light);}
/* ---------- entrance ----------
Armed by catalog.js and never by the stylesheet: without the script the
heading and the tiles are simply there rather than stuck at opacity 0.
is-in sits on the section, so the tiles a language change rebuilds play
the entrance again instead of appearing at nothing. The heading rises on
a transition, not an animation, because its animation is the sheen. */
.spec.is-staged .spec-head{
opacity:0;transform:translateY(16px);
transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.spec.is-staged.is-in .spec-head{opacity:1;transform:none;}
/* on the
and not on the card: the card's own animation is the drift */
.spec.is-staged .spec-cards > li{opacity:0;}
.spec.is-staged.is-in .spec-cards > li{
opacity:1;animation:specRise .7s cubic-bezier(.22,.61,.36,1) var(--d,0ms) backwards;
}
@keyframes specRise{
from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
.spec.is-staged .spec-head{opacity:1;transform:none;transition:none;}
.spec.is-staged .spec-cards > li{opacity:1;}
.spec.is-staged.is-in .spec-cards > li{animation:none;}
.spec-card{animation:none;background-position:0% 50%;}
/* the sheen is the whole point of the clip, so the plain colour comes back */
.spec-head{
animation:none;background-image:none;
-webkit-text-fill-color:currentColor;color:var(--text);
}
.spec-head::after{animation:none;}
.spec-card,.spec-photo img,.spec-go,.spec-n,
.spec-name::after,.spec-card::before{transition:none;}
.spec-card:hover{transform:none;}
.spec-card:hover::after{animation:none;}
}
/* ==========================================================
CATALOG HEADING
Moved out of the band and onto the page, where it reads on
the ordinary surface and follows the theme.
========================================================== */
.shop-head{margin-bottom:28px;}
.crumbs{
display:flex;align-items:center;gap:9px;
font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--text-muted);
}
.crumbs a{color:var(--text-muted);transition:color .2s ease;}
.crumbs a:hover{color:var(--amber-dark);}
.crumbs b{color:var(--text);font-weight:700;}
.shop-h1{
margin:14px 0 0;
font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.045em;line-height:1.08;
color:var(--text);
}
.shop-h1 em{font-style:normal;color:var(--amber-dark);}
:root[data-theme="dark"] .shop-h1 em{color:var(--amber-light);}
:root[data-theme="dark"] .crumbs a:hover{color:var(--amber-light);}
.shop-lead{margin:12px 0 0;max-width:62ch;font-size:14px;line-height:1.65;color:var(--text-muted);}
/* ==========================================================
LAYOUT
========================================================== */
.shop-wrap{
max-width:var(--shop-max);margin:44px auto 96px;padding:0 30px;
display:grid;grid-template-columns:250px minmax(0,1fr);gap:38px;align-items:start;
}
/* ---------- the category rail ----------
The hero panel shrunk to a column: the same gradient, the same drifting
net behind the glass (hero-glow.js finds it by .side-panel), and the
categories as tiles on it rather than nineteen rows of plain text.
Everything inside reads in --panel-ink, which flips with the theme. */
/* z-index: the shelf windows open over the product grid, and .main comes
later in the document, so the column has to be lifted above it. It still
sits under the sort listbox (30) and the dock (50). */
.side{position:sticky;top:24px;z-index:20;}
/* no overflow:hidden here — a window has to be able to leave the column;
the sky layers clip themselves and inherit the corner */
.side-panel{
position:relative;isolation:isolate;
border-radius:18px;padding:18px 14px 16px;
box-shadow:0 22px 44px var(--panel-shadow);
}
.side-panel > .sky{border-radius:inherit;}
.side-inner{position:relative;z-index:2;}
.side-head{
margin:0 4px 14px;
font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--panel-ink-soft);
}
/* ---------- what we specialise in, first in the column ----------
The two the company builds stand above a line; everything below it is
the alphabet. They are ordinary categories otherwise — same link, same
count, same shelves — and they appear only here. */
.side-spec{
margin-bottom:14px;padding-bottom:14px;
border-bottom:1px solid var(--panel-line);
}
.side-group{
margin:0 4px 9px;
font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--panel-accent);
}
.cat-list{display:flex;flex-direction:column;gap:4px;}
.cat-list a{
position:relative;overflow:hidden;
display:flex;align-items:center;gap:10px;
padding:10px 12px;border-radius:11px;
font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
font-size:12.5px;font-weight:600;line-height:1.3;color:var(--panel-ink-mid);
/* the hairline is what holds the name against the mesh drifting behind it */
background:var(--panel-fill);border:1px solid var(--panel-line);
/* Georgian category names are long single words: without this one runs
out of the tile and paints over the count */
overflow-wrap:anywhere;
transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.cat-list a:hover{
background:var(--panel-fill-hi);border-color:rgba(220,152,69,.34);
color:var(--panel-ink);transform:translateX(2px);
}
.cat-list a .n{
margin-left:auto;flex:0 0 auto;
font-size:10.5px;font-weight:800;color:var(--panel-ink-faint);
transition:color .2s ease;
}
/* the chevron only appears on a tile that has shelves under it */
.cat-more{
flex:0 0 auto;width:11px;height:11px;margin-right:-2px;
color:var(--panel-ink-faint);
transition:transform .2s cubic-bezier(.22,.61,.36,1), color .2s ease;
}
.cat-list a:hover .cat-more{color:var(--panel-accent);transform:translateX(2px);}
.cat-list a.is-active .cat-more{color:rgba(11,21,51,.6);}
.cat-list a:hover .n{color:var(--panel-accent);}
/* the shelf you are on is the one solid thing in the column */
.cat-list a.is-active{
background:var(--amber);border-color:var(--amber);color:var(--on-amber);
box-shadow:0 10px 22px rgba(200,132,47,.3);
}
.cat-list a.is-active .n{color:rgba(11,21,51,.6);}
.cat-list a.is-active:hover{transform:none;}
/* ---------- subcategories ----------
Every shelf is in the DOM now (see branch() in catalog.js). This is the
narrow form: a plain indent with a hairline, and only the open branch on
show. The block at the end of this section turns each one into a window
beside the column once there is a pointer and the room for it. */
.cat-sub{
display:none;flex-direction:column;gap:3px;
margin:4px 0 6px 11px;padding-left:10px;
border-left:1px solid var(--panel-line);
}
.cat-sub.is-open{display:flex;}
.cat-list a.lv1{font-size:12px;font-weight:600;padding:8px 11px;}
.cat-list a.lv2{font-size:11.5px;font-weight:500;padding:7px 11px;}
.cat-list a.lv1 .n,.cat-list a.lv2 .n{font-size:10px;}
/* ---------- the two we specialise in ----------
The band under the banner is where they are announced (see PINNED in
catalog.js); in the column they keep their alphabetical place and only
wear a mark. The outline is an inset shadow rather than a border so the
marked tiles stay exactly as tall as the plain ones. */
.cat-list a.is-pinned{
color:var(--panel-ink);
background:color-mix(in srgb, var(--amber) 15%, transparent);
box-shadow:inset 0 0 0 1px rgba(220,152,69,.3);
}
.cat-list a.is-pinned .n{color:var(--panel-accent);}
/* the marker bar is a flex item, so .cat-list a's own gap spaces it */
.cat-list a.is-pinned::before{
content:"";flex:0 0 auto;
width:3px;height:15px;margin-left:-3px;border-radius:2px;
background:var(--amber);
}
/* restated because .is-pinned would otherwise win on source order alone */
.cat-list a.is-pinned:hover{
background:color-mix(in srgb, var(--amber) 24%, transparent);
box-shadow:inset 0 0 0 1px rgba(220,152,69,.5);
}
.cat-list a.is-pinned.is-active{
background:var(--amber);color:var(--on-amber);box-shadow:0 10px 22px rgba(200,132,47,.3);
}
.cat-list a.is-pinned.is-active .n{color:rgba(11,21,51,.6);}
.cat-list a.is-pinned.is-active::before{background:var(--on-amber);opacity:.5;}
/* Both lists are rendered with the pair in them (see renderCategories). Up
here the column has room for its own shelf, so the copies in the long
list would be a second helping and go. */
@media (min-width:1081px){
.cat-list--main > li.is-pinned{display:none;}
}
/* ---------- the categories dropdown ----------
Narrow screens only. The full shelf is too long to sit above the products
there, and a horizontal rail hid all but the first pill, so the list folds
behind this button. */
.cat-toggle{
display:none;width:100%;align-items:center;gap:10px;
padding:12px 15px;border-radius:999px;cursor:pointer;
font:inherit;font-size:13px;font-weight:700;color:var(--panel-ink);
background:var(--panel-fill-hi);border:1px solid var(--panel-line);
transition:border-color .18s ease,background .18s ease;
}
.cat-toggle-val{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cat-toggle-n{font-size:11px;font-weight:800;color:var(--panel-ink-faint);}
.cat-toggle .sel-caret{margin-left:0;stroke:var(--panel-ink-soft);}
.cat-toggle[aria-expanded="true"]{border-color:rgba(220,152,69,.55);}
.cat-toggle[aria-expanded="true"] .sel-caret{transform:rotate(180deg);}
/* ---------- a shelf as a window beside the column ----------
Above the rail's breakpoint the column never grows: pointing at a
category — or tabbing into it — opens its shelves to the right, over the
products. The gap between the two is bridged by the window's own
::before, so the pointer can cross without it shutting.
The window is a list, not a column of buttons. The rail's own rows are
tiles with 10px of padding and a border each, which is right for a rail
and far too loose here — thirteen of them came to 616px with more air
than type. So the rows are lines: a shelf in bold with its own things
indented under it, on a hairline, the way a contents page reads.
hover:hover as well as the width: a wide touch screen has no pointer to
open a window with, and tapping a category should simply go there. */
@media (hover: hover) and (min-width:1081px){
.cat-list > li{position:relative;}
.cat-sub{
display:flex;flex-direction:column;gap:0;
position:absolute;left:100%;top:-10px;z-index:4;
width:306px;
/* 22px from the tile clears the panel's own 14px of padding, so the
window opens beside the column rather than against its edge */
margin:0 0 0 22px;padding:8px;
background:var(--surface);
border:1px solid var(--border);border-radius:14px;
box-shadow:0 28px 64px rgba(4,16,46,.34);
/* a very long shelf scrolls rather than running off the screen */
max-height:min(76vh,600px);overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:color-mix(in srgb, var(--amber) 60%, transparent) transparent;
}
/* Only the window hides, and only the window shows. Put visibility on
.cat-sub itself and the list nested inside gets its own copy of it —
which no :hover rule then reaches, because those nested
s are not
children of .cat-list. That is what left the second level invisible
while still taking up its room. Scoped here, the nested list simply
inherits: hidden with the window, visible with it, and never
hit-testable while the window is shut. */
.cat-list > li > .cat-sub{
opacity:0;visibility:hidden;transform:translateX(-6px);
/* no delay on the way out: the window should be gone the moment the
pointer leaves it */
transition:opacity .16s ease 0s, transform .2s cubic-bezier(.22,.61,.36,1) 0s,
visibility .16s 0s;
}
/* the head: whose shelves these are, in the panel's own small caps */
.cat-sub::after{
content:attr(data-of);
order:-1;
padding:4px 9px 8px;margin-bottom:5px;
border-bottom:1px solid var(--border);
font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--text-muted);
}
.cat-sub::before{content:"";position:absolute;left:-22px;top:0;bottom:0;width:22px;}
/* A short wait before it opens. The window lies over the filter row and
the first column of products, and without this a pointer merely crossing
the column on its way to the search box would throw one open under it. */
.cat-list > li:hover > .cat-sub,
.cat-list > li:focus-within > .cat-sub{
opacity:1;visibility:visible;transform:none;
transition-delay:.15s;
}
/* ---------- the rows ----------
Lines rather than tiles: no border, no fill at rest, and the whole of a
row is the target. The specificity has to beat .cat-list a.lv1/.lv2,
which is why each one names its level. */
.cat-sub a,
.cat-sub a.lv1,
.cat-sub a.lv2,
.cat-sub a.lv3{
display:flex;align-items:baseline;gap:10px;
padding:6px 9px;border:0;border-radius:8px;
background:transparent;
font-size:12px;font-weight:600;line-height:1.32;
color:var(--text-muted);
transition:background .15s ease, color .15s ease;
}
.cat-sub a .n{
margin-left:auto;flex:0 0 auto;
font-size:10px;font-weight:700;color:var(--text-muted);opacity:.65;
}
.cat-sub a:hover{background:var(--active-fill);color:#fff;transform:none;}
.cat-sub a:hover .n{color:var(--amber);opacity:1;}
.cat-sub a.is-active{background:var(--amber);color:var(--on-amber);box-shadow:none;}
.cat-sub a.is-active .n{color:rgba(11,21,51,.6);opacity:1;}
/* a shelf that has things on it reads as the heading of them */
.cat-sub > li.has-sub > a,
.cat-sub > li.has-sub > a.lv1,
.cat-sub > li.has-sub > a.lv2{
color:var(--text);font-weight:800;font-size:11.5px;letter-spacing:-.01em;
margin-top:6px;
}
.cat-sub > li:first-child.has-sub > a{margin-top:0;}
/* ---------- the level under that ----------
It stacks inside the window instead of flying out again, and it says
nothing at all about opacity or visibility: both come from the window
above it. */
.cat-sub .cat-sub{
position:static;z-index:auto;transform:none;
width:auto;max-height:none;overflow:visible;
margin:0 0 4px 9px;padding:0 0 0 10px;
background:none;border:0;border-left:1px solid var(--border);
border-radius:0;box-shadow:none;
}
.cat-sub .cat-sub::after{content:none;}
.cat-sub .cat-sub a,
.cat-sub .cat-sub a.lv2,
.cat-sub .cat-sub a.lv3{font-size:11.5px;font-weight:500;padding:5px 9px;}
/* inside the window the shelves are already open, so nothing to point at */
.cat-sub .cat-more{display:none;}
}
@media (prefers-reduced-motion:reduce){
.cat-sub{transition:none;}
.cat-more{transition:none;}
}
/* ---------- toolbar ---------- */
.bar{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding-bottom:16px;
}
.search{position:relative;flex:1 1 240px;min-width:0;}
.search svg{
position:absolute;left:14px;top:50%;transform:translateY(-50%);
width:16px;height:16px;pointer-events:none;
fill:none;stroke:var(--text-muted);stroke-width:1.8;stroke-linecap:round;
}
.search input{
font:inherit;font-size:13.5px;width:100%;
padding:11px 14px 11px 40px;border-radius:999px;
background:var(--surface);border:1px solid var(--border);color:var(--text);
transition:border-color .18s ease,box-shadow .18s ease;
}
.search input::placeholder{color:var(--text-muted);}
.search input:focus{
outline:none;border-color:var(--amber);
box-shadow:0 0 0 3px rgba(220,152,69,.16);
}
/* ---------- sort listbox ----------
A native