/**
* Archive layer: the shop / category / child-category views.
*
* Loaded only on those three views (see xshop_scripts() in functions.php), so
* none of this ships on product, cart or content pages.
*
* Layout is a two-column shell — a sticky left rail and the content column —
* shared by all three views. Everything below is scoped under .shop-layout or
* one of the archive block classes.
*
* @package XShop
*/
/* -------------------------------------------------------------------------
* 0. Archive-local tokens
* ---------------------------------------------------------------------- */
.shop-layout {
--rail-w: 274px;
--rail-gap: 38px;
--card-r: 16px;
--tile: var(--xs-surface);
--tile-hover: var(--xs-surface-2);
--ease-out: cubic-bezier(0.05, 0.7, 0.1, 1); /* emphasized decelerate — entering */
--ease-in: cubic-bezier(0.3, 0, 0.8, 0.15); /* emphasized accelerate — leaving */
--ease-in-out: cubic-bezier(0.2, 0, 0, 1); /* standard — bidirectional */
/* NN/g: 0.1s reads as instant, 1s is the limit of uninterrupted flow. Small
state changes stay at 150-250ms; only large motion goes past 400ms. */
--dur-fast: 150ms;
--dur: 250ms;
--dur-slow: 400ms;
}
/* -------------------------------------------------------------------------
* 1. Shell
* ---------------------------------------------------------------------- */
.shop-layout {
display: grid;
grid-template-columns: var(--rail-w) minmax(0, 1fr);
gap: var(--rail-gap);
align-items: start;
}
.shop-main { min-width: 0; }
/* The rail scrolls with the page until it reaches the header, then pins. */
.shop-rail {
position: sticky;
top: calc(var(--xs-header-h) + 14px);
max-height: calc(100vh - var(--xs-header-h) - 28px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--xs-tint-strong) transparent;
padding-right: 4px;
}
.shop-rail::-webkit-scrollbar { width: 6px; }
.shop-rail::-webkit-scrollbar-thumb { background: var(--xs-tint-strong); border-radius: 99px; }
.shop-rail::-webkit-scrollbar-thumb:hover { background: var(--xs-tint-strong); }
.shop-rail__head { display: none; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.shop-rail__head-title { font-weight: 800; font-size: 1.08rem; color: var(--xs-color-ink); }
.shop-rail__close {
background: none; border: 0; padding: 6px; margin: -6px;
color: var(--xs-color-muted); cursor: pointer; line-height: 0;
border-radius: 8px; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.shop-rail__close svg { width: 20px; height: 20px; }
.shop-rail__close:hover { color: var(--xs-color-ink); background: var(--xs-tint); }
/* -------------------------------------------------------------------------
* 2. Back link
* ---------------------------------------------------------------------- */
.shop-rail__back {
display: inline-flex; align-items: center; gap: 8px;
margin-bottom: 16px; padding: 8px 14px 8px 11px;
border: 1px solid var(--xs-color-line);
border-radius: 99px;
background: var(--xs-tint-weak);
color: var(--xs-color-body);
font-size: 0.88rem; font-weight: 600;
transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.shop-rail__back svg { width: 15px; height: 15px; flex: none; transition: transform var(--dur) var(--ease-out); }
.shop-rail__back:hover { color: var(--xs-color-ink); border-color: var(--xs-color-line); background: var(--xs-color-hover-bg); }
.shop-rail__back:hover svg { transform: translateX(-3px); }
/* -------------------------------------------------------------------------
* 3. Category navigation
* ---------------------------------------------------------------------- */
.shop-rail__nav { margin-bottom: 26px; }
/* No text-transform or letter-spacing on these: they carry Georgian category
and attribute names, and Georgian is unicase with a tall x-height — both
treatments make it harder to read and uppercase does nothing at all. */
.shop-rail__title,
.shop-filter__title {
margin: 0 0 10px;
font-size: 0.82rem;
font-weight: 800;
color: var(--xs-color-muted);
}
/* A plain list, not a card. The rail already stands in its own column against
the page ground, so boxing the list inside it stacked a surface on a surface,
and the row dividers cut straight across the rounded hover and current-row
pills — two competing groupings of the same rows. Grouping is the column;
state is carried by the rows. Each row keeps its category's mark, the same
sprite the cards use. */
.rail-cats {
list-style: none; margin: 0; padding: 0;
}
.rail-cats__item > a {
position: relative;
display: flex; align-items: center; gap: 11px;
min-height: 46px;
padding: 9px 12px;
border-radius: 10px;
color: var(--xs-color-body);
font-weight: 500;
font-size: 0.9rem;
line-height: 1.35;
transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rail-cats__item > a .cat-art { width: 21px; height: 21px; flex: none; color: var(--xs-color-warm); }
.rail-cats__label { flex: 1 1 auto; }
/* A magenta marker that grows out of the left edge on hover / when current. */
.rail-cats__item > a::before {
content: "";
position: absolute; left: 2px; top: 50%;
width: 3px; height: 0;
background: var(--xs-color-active);
border-radius: 99px;
transform: translateY(-50%);
transition: height var(--dur) var(--ease-out);
}
.rail-cats__item > a:hover { background: var(--xs-color-hover-bg); color: var(--xs-color-ink); }
.rail-cats__item.is-current > a {
background: var(--xs-color-active-bg);
color: var(--xs-color-active); font-weight: 700;
}
.rail-cats__item.is-current > a::before { height: 62%; }
.rail-cats__label { min-width: 0; }
.rail-cats__count {
flex: none;
font-size: 0.76rem; font-variant-numeric: tabular-nums;
color: var(--xs-color-muted);
background: var(--xs-tint);
padding: 1px 7px; border-radius: 99px;
transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rail-cats__item.is-current > a .rail-cats__count { color: var(--xs-color-active); background: var(--xs-color-active-bg); }
.rail-cats__item.has-children > a .rail-cats__label::after {
content: "";
display: inline-block; vertical-align: middle;
width: 5px; height: 5px; margin-left: 7px;
border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
transform: rotate(-45deg) translateY(-1px);
opacity: 0.45;
}
/* The active branch expands one level. */
.rail-cats__sub {
list-style: none;
/* The guide sits clear of the current-row accent bar (x 2-5) and lines the
children up as a step in from the parent label, which now starts at 12px
rather than 16px without the list's own padding. */
margin: 4px 0 8px 8px;
padding: 0 0 0 11px;
border-left: 1px solid var(--xs-color-line);
animation: xs-rail-open var(--dur-slow) var(--ease-out) both;
}
.rail-cats__subitem > a {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 6px 10px; border-radius: 8px;
font-size: 0.9rem; color: var(--xs-color-muted);
transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rail-cats__subitem > a:hover { color: var(--xs-color-ink); background: var(--xs-color-hover-bg); }
@keyframes xs-rail-open {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* -------------------------------------------------------------------------
* 4. Filter groups
* ---------------------------------------------------------------------- */
.shop-filter { padding-top: 18px; border-top: 1px solid var(--xs-color-line); margin-top: 18px; }
.shop-filter:first-of-type { border-top: 0; margin-top: 0; }
.shop-filter__toggle {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; padding: 0 0 10px;
background: none; border: 0; cursor: pointer; text-align: left;
color: var(--xs-color-muted);
font: inherit; font-size: 0.82rem; font-weight: 800;
transition: color var(--dur-fast) var(--ease-out);
}
.shop-filter__toggle:hover { color: var(--xs-color-ink); }
.shop-filter__toggle svg { width: 14px; height: 14px; flex: none; transition: transform var(--dur) var(--ease-out); }
.shop-filter__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.shop-filter__panel {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows var(--dur) var(--ease-in-out), opacity var(--dur) var(--ease-out);
}
.shop-filter__panel > div { overflow: hidden; min-height: 0; }
.shop-filter__panel[hidden] { display: grid; grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
/* WooCommerce renders the option lists (layered nav), so the styling targets its
markup — and that markup fights back in two ways worth spelling out.
First, the count is a SIBLING of the link, not inside it:
Name 1
so the has to be the flex row. Putting the row on the leaves the
count outside the flex container, where it wraps to a second line — which is
what doubled the row height and stranded the checkbox below the label.
Second, woocommerce.css already claims ::before and ::after on that as a
clearfix, at `.woocommerce .woocommerce-widget-layered-nav-list
.woocommerce-widget-layered-nav-list__item::before` — specificity (0,3,1).
The checkbox is drawn on those same pseudo-elements, so every rule below is
scoped through .shop-rail .shop-filter to outrank it outright rather than
relying on stylesheet order to break a tie. */
.shop-rail .woocommerce-widget-layered-nav-list {
list-style: none; margin: 0; padding: 2px 0 4px;
display: flex; flex-direction: column; gap: 1px;
}
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term {
position: relative;
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 0 10px 0 0;
border-radius: 8px;
list-style: none;
transition: background var(--dur-fast) var(--ease-out);
}
/* The checkbox belongs to the row, so it stays centred however the label wraps.
`content` and `display` are restated because WooCommerce's clearfix sets them. */
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term::before {
content: "";
display: block;
position: absolute; left: 10px; top: 50%;
width: 18px; height: 18px; margin-top: -9px;
/* Not --xs-color-line: that is a divider weight and measures 1.38:1 against
the rail, which is why an unchecked box was effectively invisible. */
border: 1.5px solid var(--xs-control-line);
border-radius: 5px;
background: transparent;
transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
pointer-events: none;
}
/* The tick: a rotated corner, revealed by scaling it up. */
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term::after {
content: "";
display: block;
clear: none;
position: absolute; left: 16px; top: 50%;
width: 5px; height: 9px; margin-top: -6px;
border: solid var(--xs-on-primary); border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0.4);
opacity: 0;
transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
pointer-events: none;
}
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term a {
flex: 1 1 auto;
min-width: 0;
display: block;
padding: 8px 0 8px 36px;
color: var(--xs-color-body);
font-size: 0.92rem;
line-height: 1.4;
transition: color var(--dur-fast) var(--ease-out);
}
/* WooCommerce draws its own tick glyph inside the link on a chosen item, in the
WooCommerce icon font. This row already has a checkbox; suppress the glyph. */
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term a::before,
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term a::after {
content: none;
}
/* HOVER — neutral. No red, so it can never be mistaken for a selection. */
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term:hover {
background: var(--xs-color-hover-bg);
}
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term:hover a {
color: var(--xs-color-ink);
}
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term:hover::before {
border-color: var(--xs-tint-strong);
}
/* SELECTED — filled box, ticked, red label. A different state, read at a glance. */
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term.chosen {
background: var(--xs-color-active-bg);
}
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term.chosen a {
color: var(--xs-color-active);
font-weight: 600;
}
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term.chosen::before {
background: var(--xs-color-primary);
border-color: var(--xs-color-primary);
}
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term.chosen::after {
opacity: 1;
transform: rotate(45deg) scale(1);
}
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term .count {
flex: 0 0 auto;
padding: 0;
font-size: 0.76rem;
color: var(--xs-color-muted);
font-variant-numeric: tabular-nums;
}
.shop-rail .shop-filter .woocommerce-widget-layered-nav-list .wc-layered-nav-term.chosen .count {
color: var(--xs-color-active);
}
.shop-rail .shop-filter .wc-layered-nav-term a:focus-visible { outline-offset: -2px; }
/* Long lists fold to eight options behind "Show all". */
.shop-rail .shop-filter--attr .wc-layered-nav-term:nth-child(n+9) { display: none; }
.shop-rail .shop-filter--attr.is-expanded .wc-layered-nav-term:nth-child(n+9) {
display: flex;
animation: xs-rail-open var(--dur) var(--ease-out) both;
}
.filter-more {
margin-top: 4px; padding: 5px 10px;
background: none; border: 0; cursor: pointer;
font: inherit; font-size: 0.84rem; font-weight: 600;
color: var(--xs-color-primary);
transition: color var(--dur-fast) var(--ease-out);
}
.filter-more:hover { color: var(--xs-color-ink); }
/* The price slider's internals (track, handles, amount row) are styled in
main.css; only its spacing inside the rail is set here. */
.shop-filter--price .price_slider_wrapper { padding-top: 6px; }
/* -------------------------------------------------------------------------
* 5. Category cards
* ---------------------------------------------------------------------- */
.cat-cards { margin: 0 0 40px; }
.cat-cards__title {
margin: 0 0 16px;
font-size: 1.15rem; font-weight: 800;
color: var(--xs-color-ink);
letter-spacing: -0.01em;
}
.cat-cards__grid {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
gap: 14px;
}
.cat-card {
--cat-tint: color-mix(in srgb, var(--xs-color-primary) 16%, transparent);
position: relative;
border-radius: var(--card-r);
background: var(--tile);
/* A card and the page can be the same colour in light mode, so the edge
carries the separation rather than the fill. */
border: 1px solid var(--xs-color-line-soft);
box-shadow: var(--xs-shadow-card);
overflow: hidden;
isolation: isolate;
animation: xs-card-in var(--dur-slow) var(--ease-out) both;
animation-delay: calc(var(--cat-i, 0) * 38ms);
transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
/* Tinted bloom in the corner the artwork sits in. */
.cat-card::after {
content: "";
position: absolute; inset: auto -40% -30% auto;
width: 78%; aspect-ratio: 1;
background: radial-gradient(circle, var(--cat-tint), var(--xs-bloom-violet) 46%, transparent 72%);
opacity: 0.85; z-index: -1;
transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.cat-card__link {
position: relative;
display: block;
/* The ratio lives on the card, never on the image — the tile reserves its
own space so a slow packshot cannot shift the grid (CLS stays at 0). */
aspect-ratio: 4 / 3;
min-height: 158px;
padding: 16px 16px 18px;
color: inherit;
overflow: hidden;
border-radius: inherit;
}
.cat-card__body { position: relative; z-index: 2; display: block; max-width: 60%; }
/* Long names (Georgian compounds run long) get the width back and the artwork
shrinks rather than the title colliding with it. */
.cat-card:has(.cat-card__name) .cat-card__body { hyphens: auto; }
.cat-card__name {
display: block;
font-size: clamp(0.86rem, 0.78rem + 0.3vw, 0.98rem);
font-weight: 700; line-height: 1.28;
color: var(--xs-color-ink);
letter-spacing: -0.01em;
text-wrap: balance;
transition: color var(--dur-fast) var(--ease-out);
}
.cat-card__count {
display: block; margin-top: 5px;
font-size: 0.76rem; color: var(--xs-color-muted);
font-variant-numeric: tabular-nums;
transition: color var(--dur-fast) var(--ease-out);
}
/* Artwork: anchored to the bottom-right and deliberately clipped by the card.
The title occupies the top-left, so the diagonal keeps them apart. */
.cat-card__media {
position: absolute;
bottom: -12%;
right: -14%;
width: 62%;
aspect-ratio: 1;
z-index: 1;
display: block;
transform-origin: 72% 72%;
transition: transform var(--dur-slow) var(--ease-out), filter var(--dur) var(--ease-out);
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28));
}
.cat-card__media svg {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
/* Photographs need different handling from the vector marks.
*
* A packshot is a rectangle with its own background — white from a studio, or
* black from a lifestyle shot — and dropping that rectangle onto the tile makes
* it read as a patch pasted on rather than a picture belonging to the card.
* Two things fix it together:
*
* 1. `cover`, not `contain`. The image fills its box and the box overhangs
* the card's top-right corner, so the photo's own edges are cropped away
* by the card instead of drawn inside it. That is what makes the crop look
* deliberate — the same trick as a magazine bleed.
* 2. A mask anchored at that same corner, opaque where the photo runs off the
* card and fading toward the interior, so the only edges left visible
* dissolve into the tile and the title keeps its contrast with no scrim.
*
* Blend modes were tried and rejected: `screen` leaves a white background white
* on a dark tile, and `multiply` crushes the product itself.
*/
.cat-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 12px 0 0 0;
-webkit-mask-image: radial-gradient(125% 125% at 100% 100%, #000 34%, rgba(0, 0, 0, 0.62) 58%, transparent 84%);
mask-image: radial-gradient(125% 125% at 100% 100%, #000 34%, rgba(0, 0, 0, 0.62) 58%, transparent 84%);
filter: saturate(1.04) contrast(1.02) brightness(0.95);
transition: filter var(--dur) var(--ease-out);
}
.cat-card:hover .cat-card__media img,
.cat-card:focus-within .cat-card__media img { filter: saturate(1.08) contrast(1.04) brightness(1.02); }
/* A photo bleeds further off the corner than a vector mark does. */
.cat-card__media:has( img ) {
bottom: -14%;
right: -18%;
width: 68%;
aspect-ratio: 4 / 5;
/* A soft pool of light under the photo. Packshots vary wildly in tone and a
dark one — a black garment shot on black, say — otherwise disappears into
a dark tile entirely. Bright photos are unaffected. */
background: radial-gradient(68% 68% at 66% 68%, var(--xs-tint) 0%, transparent 72%);
}
.cat-card__go {
position: absolute; z-index: 3;
left: 16px; bottom: 14px;
width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--xs-tint);
color: var(--xs-color-ink);
opacity: 0; transform: translateX(-6px);
transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.cat-card__go svg { width: 15px; height: 15px; }
.cat-card:hover,
.cat-card:focus-within {
transform: translateY(-4px);
background: var(--tile-hover);
border-color: var(--xs-color-active-line);
box-shadow: var(--xs-shadow-lift);
}
.cat-card:hover .cat-card__media,
.cat-card:focus-within .cat-card__media { transform: scale(1.03); }
.cat-card:hover::after,
.cat-card:focus-within::after { opacity: 1; transform: scale(1.12); }
.cat-card:hover .cat-card__name,
.cat-card:focus-within .cat-card__name { color: var(--xs-color-active); }
.cat-card:hover .cat-card__go,
.cat-card:focus-within .cat-card__go { opacity: 1; transform: none; background: var(--xs-color-primary); color: var(--xs-on-primary); }
.cat-card__link:focus-visible { outline: 3px solid color-mix(in srgb, var(--xs-color-active) 65%, transparent); outline-offset: -3px; }
/* Cards with no artwork give the title the full width. */
.cat-card--noart .cat-card__body { max-width: 100%; }
@keyframes xs-card-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* -------------------------------------------------------------------------
* 6. Filter chips
* ---------------------------------------------------------------------- */
.filter-chips {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin: 0 0 22px;
}
.filter-chips__label { font-size: 0.82rem; color: var(--xs-color-muted); margin-right: 2px; }
.filter-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 9px 5px 12px;
border-radius: 99px;
background: var(--xs-color-active-bg);
border: 1px solid var(--xs-color-active-line);
color: var(--xs-color-active);
font-size: 0.84rem; font-weight: 600;
animation: xs-chip-in var(--dur) var(--ease-out) both;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.filter-chip:hover { background: var(--xs-color-primary); border-color: var(--xs-color-primary); color: var(--xs-on-primary); transform: translateY(-1px); }
.filter-chip__x { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--xs-tint-strong); }
.filter-chip__x svg { width: 9px; height: 9px; }
.filter-chip.is-going { animation: xs-chip-out var(--dur-fast) var(--ease-in) both; }
.filter-chips__clear {
font-size: 0.82rem; font-weight: 600;
color: var(--xs-color-muted);
text-decoration: underline; text-underline-offset: 3px;
transition: color var(--dur-fast) var(--ease-out);
}
.filter-chips__clear:hover { color: var(--xs-color-active); }
@keyframes xs-chip-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes xs-chip-out { to { opacity: 0; transform: scale(0.85); } }
/* -------------------------------------------------------------------------
* 7. Grid swap: skeletons + fade while filters apply
* ---------------------------------------------------------------------- */
.shop-main { position: relative; }
.shop-main.is-loading .products,
.shop-main.is-loading .woocommerce-pagination,
.shop-main.is-loading .woocommerce-result-count { opacity: 0.32; filter: blur(1.5px); pointer-events: none; }
.shop-main .products,
.shop-main .woocommerce-pagination { transition: opacity var(--dur) var(--ease-out), filter var(--dur) var(--ease-out); }
.shop-skeleton {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
.shop-main.cols-2 .shop-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-main.cols-4 .shop-skeleton { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shop-skeleton__item { display: block; }
.shop-skeleton__box {
display: block; border-radius: var(--xs-radius-sm);
background: linear-gradient(100deg, var(--xs-color-hover-bg) 20%, var(--xs-tint-strong) 40%, var(--xs-color-hover-bg) 60%);
background-size: 240% 100%;
animation: xs-shimmer 1.25s linear infinite;
}
.shop-skeleton__box--media { aspect-ratio: 1; margin-bottom: 12px; }
.shop-skeleton__box--line { height: 12px; margin-bottom: 8px; }
.shop-skeleton__box--line.is-short { width: 45%; }
@keyframes xs-shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }
/* Reveal newly swapped-in products. */
.shop-main .products.is-fresh li.product {
animation: xs-card-in 340ms var(--ease-out) both;
animation-delay: calc(var(--p-i, 0) * 26ms);
}
/* -------------------------------------------------------------------------
* 8. Archive copy + FAQ (below the grid)
* ---------------------------------------------------------------------- */
.cat-intro { max-width: 74ch; margin: 0 0 26px; color: var(--xs-color-body); }
.cat-intro p:last-child { margin-bottom: 0; }
.cat-longform {
margin: 52px 0 0;
padding-top: 34px;
border-top: 1px solid var(--xs-color-line);
max-width: 78ch;
}
.cat-longform h2 { font-size: 1.4rem; }
.cat-longform h3 { font-size: 1.08rem; margin-top: 1.6em; }
.cat-longform ul { padding-left: 1.15em; }
.cat-longform li { margin-bottom: 0.45em; }
.cat-faq { margin: 44px 0 0; max-width: 78ch; }
.cat-faq__title { font-size: 1.4rem; margin-bottom: 18px; }
.faq-item {
border-bottom: 1px solid var(--xs-color-line);
}
.faq-item__q {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
width: 100%; padding: 16px 2px;
background: none; border: 0; cursor: pointer; text-align: left;
font: inherit; font-size: 1rem; font-weight: 650; line-height: 1.4;
color: var(--xs-color-ink);
transition: color var(--dur-fast) var(--ease-out);
}
.faq-item__q:hover { color: var(--xs-color-primary); }
.faq-item__icon {
flex: none; position: relative;
width: 18px; height: 18px; margin-top: 3px;
}
.faq-item__icon::before,
.faq-item__icon::after {
content: ""; position: absolute; left: 50%; top: 50%;
background: currentColor; border-radius: 2px;
transform: translate(-50%, -50%);
transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.faq-item__icon::before { width: 13px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 13px; }
.faq-item__q[aria-expanded="true"] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item__a {
display: grid; grid-template-rows: 1fr;
transition: grid-template-rows var(--dur) var(--ease-in-out);
}
.faq-item__a > div { overflow: hidden; min-height: 0; }
.faq-item__a > div > *:first-child { padding-top: 0; }
.faq-item__a > div > *:last-child { margin-bottom: 20px; }
.faq-item__a[hidden] { display: grid; grid-template-rows: 0fr; }
.faq-item__a p { color: var(--xs-color-body); }
/* -------------------------------------------------------------------------
* 9. Responsive
* ---------------------------------------------------------------------- */
@media (max-width: 1180px) {
.shop-layout { --rail-w: 232px; --rail-gap: 28px; }
.cat-cards__grid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }
}
@media (max-width: 900px) {
.shop-layout { display: block; }
/* The rail becomes a slide-in drawer. */
.shop-rail {
position: fixed; inset: 0 auto 0 0;
z-index: 400;
width: min(340px, 88vw);
max-height: none; height: 100%;
padding: 20px 18px 40px;
background: var(--xs-color-bg);
border-right: 1px solid var(--xs-color-line);
box-shadow: 24px 0 60px var(--xs-scrim);
transform: translateX(-102%);
visibility: hidden;
transition: transform var(--dur) var(--ease-in), visibility 0s linear var(--dur);
}
body.shop-filters-open .shop-rail {
transform: none;
visibility: visible;
transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
}
.shop-rail__head { display: flex; }
body.shop-filters-open::after {
content: "";
position: fixed; inset: 0; z-index: 399;
background: var(--xs-scrim);
backdrop-filter: blur(2px);
animation: xs-fade-in var(--dur) var(--ease-out) both;
}
body.shop-filters-open { overflow: hidden; }
.cat-cards__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
.cat-card__link { min-height: 128px; padding: 13px 13px 15px; }
.cat-card__name { font-size: 0.9rem; }
/* Two cards to a row leaves much less width, and Georgian category names
run long — so the title keeps more of the card and the artwork retreats
further into the corner rather than crowding it. */
.cat-card__body { max-width: 68%; }
.cat-card__media { width: 48%; right: -8%; bottom: -6%; }
.cat-card__media:has( img ) { width: 56%; right: -12%; bottom: -8%; aspect-ratio: 1; }
.cat-card__go { display: none; }
}
@media (max-width: 520px) {
.cat-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter-chips { margin-bottom: 16px; }
}
@keyframes xs-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* -------------------------------------------------------------------------
* 10. Motion preferences
* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.shop-layout {
--dur-fast: 1ms;
--dur: 1ms;
--dur-slow: 1ms;
}
.cat-card,
.rail-cats__sub,
.filter-chip,
.shop-main .products.is-fresh li.product { animation: none; }
.cat-card:hover { transform: none; }
.cat-card:hover .cat-card__media { transform: none; }
.shop-skeleton__box { animation: none; }
body.shop-filters-open::after { animation: none; }
}
/* -------------------------------------------------------------------------
* 11. Category marks
*
* One hand-inked sprite, referenced with