/* NOTE: every rule below is scoped to `.shop` (set on the of the
shop pages). Without this scope, class names like .btn and .field
collide with the ones already defined in index.css and silver.css
and quietly restyle the existing site. */
/* ============================================================
Tarkasi — shop surfaces (bag, checkout, account)
Extends the tokens already defined in silver.css. No new
palette, no new typefaces: this should read as the same house.
============================================================ */
.shop-main{ padding-block: clamp(88px, 11vw, 132px) clamp(64px, 8vw, 110px); min-height: 70vh; }
.shop .shop-head{ margin-bottom: clamp(28px, 4vw, 46px); }
.shop .shop-head h1{ font-size: clamp(2rem, 4.6vw, 3.1rem); margin-block: .5rem .6rem; }
.shop .shop-head p{ color: var(--mute); max-width: 54ch; font-size: .95rem; }
/* ---- the ledger panel: our one flourish -------------------------------- */
/* A thin brass rule across the top, letterspaced labels, generous rag.
Meant to read like an engraved plate, not a supermarket receipt. */
.shop .ledger{
position: relative; background: var(--ink-soft);
border: 1px solid var(--line); padding: clamp(20px, 2.6vw, 30px);
}
.shop .ledger::before{
content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--brass) 18%, var(--brass-bright) 50%, var(--brass) 82%, transparent);
opacity: .75;
}
.shop .ledger h2{
font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
color: var(--brass); font-family: var(--sans); font-weight: 500; margin-bottom: 1.3rem;
}
.shop .ledger-row{ display: flex; justify-content: space-between; gap: 1.5rem; padding-block: .62rem; font-size: .93rem; }
.shop .ledger-row .k{ color: var(--mute); }
.shop .ledger-row .v{ color: var(--silver-dim); font-variant-numeric: tabular-nums; }
.shop .ledger-row.total{
border-top: 1px solid var(--line); margin-top: .7rem; padding-top: 1.05rem;
}
.shop .ledger-row.total .k{ color: var(--silver); letter-spacing: .04em; }
.shop .ledger-row.total .v{ color: var(--silver); font-family: var(--serif); font-size: 1.5rem; line-height: 1; }
/* ---- bag lines --------------------------------------------------------- */
.shop .bag-layout{ display: grid; grid-template-columns: 1fr 380px; gap: clamp(24px, 3.4vw, 48px); align-items: start; }
@media (max-width: 900px) { .shop .bag-layout{ grid-template-columns: 1fr; } }
.shop .bag-lines{ border-top: 1px solid var(--line-soft); }
.shop .bag-line{
display: grid; grid-template-columns: 96px 1fr auto; gap: clamp(14px, 2vw, 26px);
padding-block: clamp(18px, 2.2vw, 26px); border-bottom: 1px solid var(--line-soft); align-items: start;
}
.shop .bag-line img{ width: 96px; height: 116px; object-fit: cover; border: 1px solid var(--line); }
.shop .bag-line h3{ font-size: 1.22rem; margin-bottom: .3rem; }
.shop .bag-line .line-meta{ font-size: .82rem; color: var(--mute); margin-bottom: .7rem; }
.shop .bag-line .line-money{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop .bag-line .line-money .each{ display: block; font-size: .76rem; color: var(--mute); margin-top: .3rem; }
/* purity tag — carries the detail that defines these pieces */
.shop .purity-tag{
display: inline-flex; align-items: center; gap: .45em;
font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--brass); border: 1px solid rgba(189,160,106,.34);
padding: .26em .7em; margin-bottom: .8rem;
}
.shop .purity-tag::before{ content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
/* quantity stepper */
.shop .qty{ display: inline-flex; align-items: center; border: 1px solid var(--line); }
.shop .qty button{
width: 30px; height: 30px; background: none; border: 0; color: var(--silver-dim);
font-size: 1rem; cursor: pointer; line-height: 1; transition: color .2s, background .2s;
}
.shop .qty button:hover:not(:disabled){ color: var(--ink); background: var(--brass); }
.shop .qty button:disabled{ opacity: .3; cursor: not-allowed; }
.shop .qty span{ min-width: 34px; text-align: center; font-size: .88rem; font-variant-numeric: tabular-nums; }
.shop .line-remove{
background: none; border: 0; color: var(--mute); font-size: .78rem; letter-spacing: .1em;
text-transform: uppercase; cursor: pointer; padding: .4rem 0; margin-top: .55rem; transition: color .2s;
}
.shop .line-remove:hover{ color: var(--brass-bright); }
/* ---- buttons ----------------------------------------------------------- */
.shop .btn{
display: inline-flex; align-items: center; justify-content: center; gap: .6em;
font-family: var(--sans); font-size: .78rem; font-weight: 500;
letter-spacing: .19em; text-transform: uppercase;
padding: 1.02rem 1.7rem; border: 1px solid var(--brass); cursor: pointer;
transition: background .28s, color .28s, border-color .28s, opacity .2s;
}
.shop .btn-primary{ background: var(--brass); color: var(--ink); }
.shop .btn-primary:hover{ background: var(--brass-bright); border-color: var(--brass-bright); }
.shop .btn-ghost{ background: none; color: var(--brass); }
.shop .btn-ghost:hover{ background: rgba(189,160,106,.1); }
.shop .btn-quiet{ background: none; color: var(--mute); border-color: var(--line); }
.shop .btn-quiet:hover{ color: var(--silver); border-color: var(--silver-dim); }
.shop .btn[disabled]{ opacity: .45; cursor: not-allowed; pointer-events: none; }
.shop .btn-block{ width: 100%; }
/* ---- forms ------------------------------------------------------------- */
.shop .field{ margin-bottom: 1.15rem; }
.shop .field label{
display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--mute); margin-bottom: .55rem;
}
.shop .field input, .shop .field textarea, .shop .field select{
width: 100%; background: rgba(255,255,255,.02); color: var(--silver);
border: 1px solid var(--line); padding: .82rem .9rem;
font-family: var(--sans); font-size: .95rem; font-weight: 300;
transition: border-color .22s, background .22s;
}
.shop .field input:focus, .shop .field textarea:focus, .shop .field select:focus{
outline: none; border-color: var(--brass); background: rgba(189,160,106,.05);
}
.shop .field textarea{ min-height: 90px; resize: vertical; }
.shop .field .hint{ font-size: .76rem; color: var(--mute); margin-top: .4rem; }
.shop .field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .shop .field-row{ grid-template-columns: 1fr; } }
/* ---- messages ---------------------------------------------------------- */
/* Errors state what happened and what to do. They do not apologise. */
.shop .notice{ padding: .85rem 1.05rem; font-size: .88rem; margin-bottom: 1.2rem; border-left: 2px solid; }
.shop .notice-error{ border-color: #c96a5e; background: rgba(201,106,94,.09); color: #e5b0a8; }
.shop .notice-success{ border-color: var(--brass); background: rgba(189,160,106,.09); color: var(--brass-bright); }
.shop .notice[hidden]{ display: none; }
/* ---- empty states are invitations, not apologies ----------------------- */
.shop .empty{ text-align: center; padding-block: clamp(50px, 8vw, 92px); border: 1px solid var(--line-soft); }
.shop .empty h2{ font-size: 1.6rem; margin-bottom: .6rem; }
.shop .empty p{ color: var(--mute); margin-bottom: 1.8rem; font-size: .93rem; }
/* ---- account ----------------------------------------------------------- */
.shop .auth-card{ max-width: 430px; margin-inline: auto; }
.shop .auth-toggle{ display: flex; gap: 1.6rem; margin-bottom: 1.9rem; border-bottom: 1px solid var(--line-soft); }
.shop .auth-toggle button{
background: none; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px;
color: var(--mute); font-family: var(--sans); font-size: .72rem; letter-spacing: .2em;
text-transform: uppercase; padding-bottom: .85rem; cursor: pointer; transition: color .22s, border-color .22s;
}
.shop .auth-toggle button[aria-selected="true"]{ color: var(--brass); border-bottom-color: var(--brass); }
.shop .account-grid{ display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 3.4vw, 48px); align-items: start; }
@media (max-width: 860px) { .shop .account-grid{ grid-template-columns: 1fr; } }
.shop .order-card{ border: 1px solid var(--line); padding: clamp(17px, 2.2vw, 24px); margin-bottom: 1.05rem; }
.shop .order-card-top{
display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
gap: .6rem; padding-bottom: .85rem; margin-bottom: .95rem; border-bottom: 1px solid var(--line-soft);
}
.shop .order-no{ font-family: var(--serif); font-size: 1.16rem; color: var(--silver); }
.shop .order-date{ font-size: .78rem; color: var(--mute); }
.shop .order-card ul{ list-style: none; }
.shop .order-card li{ display: flex; justify-content: space-between; gap: 1rem; font-size: .89rem; padding-block: .3rem; }
.shop .order-card li .q{ color: var(--mute); }
.shop .status{
font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
padding: .3em .72em; border: 1px solid currentColor; white-space: nowrap;
}
.shop .status-pending_payment{ color: #d8b46a; }
.shop .status-paid, .shop .status-shipped, .shop .status-delivered{ color: #7fb894; }
.shop .status-failed, .shop .status-cancelled{ color: #c96a5e; }
.shop .status-refunded{ color: var(--mute); }
/* ---- header bag link --------------------------------------------------- */
.bag-link{ position: relative; display: inline-flex; align-items: center; gap: .5em; }
.bag-count{
min-width: 17px; height: 17px; padding-inline: 4px; border-radius: 9px;
background: var(--brass); color: var(--ink);
font-size: .64rem; font-weight: 600; line-height: 17px; text-align: center;
}
.bag-count[hidden]{ display: none; }
/* ---- checkout ---------------------------------------------------------- */
.shop .checkout-layout{ display: grid; grid-template-columns: 1fr 380px; gap: clamp(24px, 3.4vw, 48px); align-items: start; }
@media (max-width: 900px) { .shop .checkout-layout{ grid-template-columns: 1fr; } }
.shop .checkout-section{ margin-bottom: clamp(28px, 3.4vw, 42px); }
.shop .checkout-section > h2{
font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--brass);
font-family: var(--sans); font-weight: 500; margin-bottom: 1.3rem;
padding-bottom: .8rem; border-bottom: 1px solid var(--line-soft);
}
.shop .mini-line{ display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; padding-block: .45rem; }
.shop .mini-line .n{ color: var(--silver-dim); }
.shop .mini-line .n small{ display: block; color: var(--mute); font-size: .76rem; }
.shop .mini-line .a{ color: var(--silver-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---- simplified page chrome for shop pages ----------------------------- */
.shop-header{
position: sticky; top: 0; z-index: 90; background: rgba(11,13,16,.78);
backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft);
}
.shop-nav{ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--hh); }
.shop-nav-links{ display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.shop-nav-links a{
font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--silver-dim); transition: color .22s;
}
.shop-nav-links a:hover{ color: var(--brass-bright); }
.shop-foot{
border-top: 1px solid var(--line-soft); padding-block: 2.4rem;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
font-size: .78rem; color: var(--mute);
}
@media (prefers-reduced-motion: reduce) {
.shop *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ============================================================
Header utility group — global (used on index.html and
silver.html, which do NOT carry the .shop body class).
Bag and Account are tools, not destinations, so they sit
apart from the primary nav behind a hairline divider.
============================================================ */
.nav-util{
display:flex; align-items:center; gap:clamp(.5rem,1.4vw,1.1rem);
margin-left:clamp(.6rem,1.8vw,1.6rem); padding-left:clamp(.6rem,1.8vw,1.6rem);
border-left:1px solid var(--line-soft);
}
.nav-util .util-link{
display:inline-flex; align-items:center; gap:.5em;
font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--mute); transition:color .22s; white-space:nowrap;
}
.nav-util .util-link svg{ width:17px; height:17px; flex:none; }
.nav-util .util-link:hover{ color:var(--brass-bright); }
@media (max-width:1180px){
/* keep the icons, drop the words before the nav starts wrapping */
.nav-util .util-link span:not(.bag-count){
position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
}
@media (max-width:900px){
.nav-util{ margin-left:auto; }
}
/* ---- "why am I being asked to sign in?" --------------------------------- */
/* Shown when someone is bounced here from an Add to bag. A login form you
did not go looking for needs a reason attached to it. */
.auth-reason{
margin:0 0 1.4rem;
padding:.85rem 1.1rem;
border:1px solid var(--line-soft, rgba(255,255,255,.14));
border-left:2px solid var(--brass, #C9A227);
border-radius:3px;
background:rgba(201,162,39,.06);
font-size:.9rem;
line-height:1.5;
color:var(--ink, inherit);
}
/* ═══════════════════════════════════════════════════════════════════════════
THE THREE COLLECTIONS
Lives here, not in index.css, because BOTH index.html and silver.html
load shop.css — and only index.html loads index.css. Putting it there
left every tile on the collection page completely unstyled.
Replaced the metal selector. That offered three doors of which two led to
a waitlist; these three all lead to pieces you can buy today.
Each collection carries a tone rather than a colour scheme: cool silver
for the everyday, brass for the heirlooms, a warmer copper for the ones
that will not be here long. The tone is the only thing that differs —
the shape stays identical so they read as one set of three.
═══════════════════════════════════════════════════════════════════════ */
:root{
--cl-reg1:#f2f5f9; --cl-reg2:#c2cad6; --cl-reg3:#8d95a3;
--cl-org1:#f7e6b4; --cl-org2:#d9b15a; --cl-org3:#9c7a2e;
--cl-lim1:#f4d9cd; --cl-lim2:#c98a69; --cl-lim3:#94573f;
}
/* ---- the drop-down behind the wordmark --------------------------------- */
.coll-scrim{position:fixed;inset:0;z-index:78;background:rgba(4,6,9,.62);
backdrop-filter:blur(3px);opacity:0;transition:opacity .38s ease;pointer-events:none}
.coll-scrim.show{opacity:1;pointer-events:auto}
.collbar{position:fixed;left:0;right:0;top:var(--hh);z-index:80;
background:var(--ink-soft);border-bottom:1px solid var(--line);
transform:translateY(-14px);opacity:0;pointer-events:none;visibility:hidden;
transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .32s ease,visibility 0s linear .42s}
.collbar.open{transform:none;opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.collbar-inner{padding-block:clamp(24px,3.4vw,40px)}
.collbar-head{margin-bottom:clamp(16px,2vw,24px)}
.collbar-sub{font-size:.86rem;color:var(--mute);max-width:56ch;margin-top:.4rem}
.coll-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.ctile{position:relative;overflow:hidden;display:block;text-decoration:none;
background:var(--ink-panel);border:1px solid var(--line);border-radius:2px;
padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
transition:transform .34s cubic-bezier(.22,.61,.36,1),border-color .3s,box-shadow .34s}
.ctile-wash{position:absolute;inset:0;z-index:0;opacity:.14;transition:opacity .45s;
background:linear-gradient(135deg,var(--c1) 0%,var(--c2) 46%,var(--c3) 100%)}
.ctile[data-collection="regulars"] {--c1:var(--cl-reg1);--c2:var(--cl-reg2);--c3:var(--cl-reg3)}
.ctile[data-collection="originals"]{--c1:var(--cl-org1);--c2:var(--cl-org2);--c3:var(--cl-org3)}
.ctile[data-collection="limited"] {--c1:var(--cl-lim1);--c2:var(--cl-lim2);--c3:var(--cl-lim3)}
.ctile:hover{transform:translateY(-4px);border-color:rgba(233,236,241,.34);
box-shadow:0 30px 60px -38px rgba(0,0,0,.9)}
.ctile:hover .ctile-wash{opacity:.3}
.ctile:focus-visible{outline:2px solid var(--brass-bright);outline-offset:3px}
.ctile-name{position:relative;z-index:1;display:block;font-family:var(--serif);
font-size:clamp(1.02rem,1.5vw,1.24rem);color:var(--silver);line-height:1.15}
.ctile-tag{position:relative;z-index:1;display:block;margin-top:.3rem;
font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ctile-count{position:relative;z-index:1;display:block;margin-top:.7rem;
font-size:.74rem;color:var(--brass);font-variant-numeric:tabular-nums}
.ctile-arr{position:absolute;z-index:1;right:clamp(14px,1.8vw,20px);bottom:clamp(14px,1.8vw,20px);
color:var(--brass);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.ctile:hover .ctile-arr{opacity:1;transform:none}
/* ---- the section on the page ------------------------------------------- */
.coll-sec{padding-block:clamp(56px,7vw,96px)}
.coll-cards{display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(14px,1.8vw,24px);margin-top:clamp(30px,4vw,48px)}
.ccard{position:relative;overflow:hidden;display:flex;flex-direction:column;
text-decoration:none;background:var(--ink-soft);border:1px solid var(--line);border-radius:2px;
padding:clamp(26px,3vw,38px) clamp(24px,2.8vw,34px) clamp(56px,5vw,68px);
transition:transform .4s cubic-bezier(.22,.61,.36,1),border-color .34s,box-shadow .4s}
.ccard-wash{position:absolute;inset:0;z-index:0;opacity:.16;transition:opacity .5s;
background:linear-gradient(150deg,var(--c1) 0%,var(--c2) 44%,var(--c3) 100%)}
.ccard-regulars {--c1:var(--cl-reg1);--c2:var(--cl-reg2);--c3:var(--cl-reg3)}
.ccard-originals{--c1:var(--cl-org1);--c2:var(--cl-org2);--c3:var(--cl-org3)}
.ccard-limited {--c1:var(--cl-lim1);--c2:var(--cl-lim2);--c3:var(--cl-lim3)}
.ccard:hover{transform:translateY(-8px);border-color:rgba(233,236,241,.4);
box-shadow:0 44px 90px -46px rgba(0,0,0,.9)}
.ccard:hover .ccard-wash{opacity:.36}
.ccard:focus-visible{outline:2px solid var(--brass-bright);outline-offset:3px}
.ccard>*{position:relative;z-index:1}
.ccard-eyebrow{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
color:var(--mute);margin-bottom:.75rem}
.ccard-name{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.05rem);
line-height:1.08;color:var(--silver);margin-bottom:.85rem;text-wrap:balance}
.ccard-blurb{font-size:.92rem;line-height:1.6;color:var(--silver-dim);flex:1}
.ccard-foot{display:flex;align-items:baseline;justify-content:space-between;
gap:1rem;flex-wrap:wrap;margin-top:1.5rem;padding-top:1rem;
border-top:1px solid var(--line-soft)}
.ccard-note{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
.ccard-count{font-size:.78rem;color:var(--mute);font-variant-numeric:tabular-nums}
.ccard-arr{position:absolute;z-index:1;right:clamp(24px,2.8vw,34px);bottom:clamp(24px,2.6vw,32px);
color:var(--brass);opacity:0;transform:translateX(-8px);transition:opacity .34s,transform .34s}
.ccard:hover .ccard-arr{opacity:1;transform:none}
@media (max-width:900px){
.coll-tiles,.coll-cards{grid-template-columns:1fr}
.ccard{padding-bottom:clamp(46px,7vw,56px)}
}
@media (prefers-reduced-motion:reduce){
.ctile,.ccard,.ctile-arr,.ccard-arr,.ctile-wash,.ccard-wash,.collbar{transition:none}
.ctile:hover,.ccard:hover{transform:none}
}
/* ═══════════════════════════════════════════════════════════════════════════
IMAGE SLOTS
Every test photo was removed ahead of launch. Each one left a labelled
slot behind rather than a gap, for two reasons: the layout still holds its
shape so the structure can be judged without photography, and each slot
says what belongs in it.
A slot inherits the geometry of whatever held the ![]()
before it — the
card frame, the hero vitrine — because it is a block that fills its parent.
Replace a slot with a plain ![]()
and nothing else has to change.
═══════════════════════════════════════════════════════════════════════ */
.ph{
position:relative;
display:block;
width:100%;
height:100%;
min-height:120px;
background:
repeating-linear-gradient(45deg,
rgba(233,236,241,.028) 0 10px,
rgba(233,236,241,.055) 10px 20px);
border:1px dashed rgba(233,236,241,.17);
border-radius:2px;
overflow:hidden;
}
/* The label. Small, centred, never wider than the slot. */
.ph::after{
content:attr(data-ph);
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:.6rem;
text-align:center;
font-family:var(--sans,system-ui,sans-serif);
font-size:.6rem;
letter-spacing:.2em;
text-transform:uppercase;
color:rgba(233,236,241,.4);
line-height:1.5;
pointer-events:none;
}
/* A slot standing in for a product photo sits in the card's 4:5 frame. */
.card-img .ph{ position:absolute; inset:0; min-height:0; border:none;
border-left:0; border-right:0 }
.card-img .ph::after{ font-size:.56rem }
/* The hover-swap second photo has no slot of its own — one is enough. */
.card-img .ph.main{ opacity:1 }
/* Bag and quick-view thumbnails are small; drop the label, keep the hatch. */
.ph-thumb{ min-height:0; aspect-ratio:4/5 }
.ph-thumb::after{ content:none }
@media (prefers-reduced-motion:reduce){ .ph{ background-attachment:scroll } }
/* ═══════════════════════════════════════════════════════════════════════════
GOOGLE SIGN-IN
Google renders the button itself inside .google-btn-host — its markup and
its look are fixed by their brand rules, so nothing here styles the button.
All of this is the space around it.
═══════════════════════════════════════════════════════════════════════ */
.google-btn-host{
display:flex;
justify-content:center;
min-height:44px; /* reserve the space so nothing jumps on load */
margin-bottom:.4rem;
}
.google-btn-host iframe{ color-scheme:light } /* their iframe, their theme */
.google-fallback{
font-size:.82rem;
color:var(--mute);
text-align:center;
margin:.5rem 0 0;
}
/* A hairline with the word "or" sitting in it. */
.auth-or{
display:flex;
align-items:center;
gap:.9rem;
margin:1.4rem 0;
color:var(--mute);
font-size:.66rem;
letter-spacing:.22em;
text-transform:uppercase;
}
.auth-or::before,
.auth-or::after{
content:"";
flex:1;
height:1px;
background:var(--line-soft, rgba(233,236,241,.1));
}
/* ═══════════════════════════════════════════════════════════════════════════
FILTER BAR
Collection tabs on the first row; type, price, delivery and sort on the
second. The selects only ever carry options that exist in the collection
being viewed, so nothing here leads to an empty grid.
═══════════════════════════════════════════════════════════════════════ */
.coll-filter{
display:grid; gap:.9rem;
margin:clamp(20px,2.6vw,30px) 0 clamp(24px,3vw,36px);
}
.fb-row{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center }
.fb-selects{ gap:.8rem }
/* a collection with nothing in it is shown, but plainly inert */
.cfilter.empty{ opacity:.42; cursor:not-allowed }
.cfilter.empty:hover{ color:var(--mute); border-color:var(--line) }
.fb-sel{ display:inline-flex; align-items:center; gap:.45rem }
.fb-sel>span{
font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
}
.fb-sel select{
font-family:inherit; font-size:.8rem; color:var(--silver);
background:var(--ink-soft,#111620); border:1px solid var(--line); border-radius:2px;
padding:.5rem .7rem; cursor:pointer; max-width:14rem;
}
.fb-sel select:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px }
.fb-clear{
font-family:inherit; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
color:var(--brass); background:none; border:none; cursor:pointer;
text-decoration:underline; text-underline-offset:3px; padding:.4rem;
}
.fb-count{
margin-left:auto; font-size:.74rem; color:var(--mute);
font-variant-numeric:tabular-nums;
}
/* the grid must be a flex/grid container for `order` to reposition cards */
#tk-grid{ display:grid }
@media (max-width:700px){
.fb-selects{ display:grid; grid-template-columns:1fr 1fr }
.fb-sel{ display:grid; gap:.25rem }
.fb-sel select{ max-width:none; width:100% }
.fb-count{ grid-column:1/-1; margin-left:0 }
}
/* ---- Add to bag, on the card ------------------------------------------- */
.card-add{
font-family:inherit; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink,#0a0c0f); background:var(--brass,#bda06a);
border:1px solid var(--brass,#bda06a); border-radius:2px;
padding:.55rem .9rem; cursor:pointer; white-space:nowrap;
transition:background .25s, color .25s, transform .2s;
}
.card-add:hover{ background:var(--brass-bright,#dcc187); border-color:var(--brass-bright,#dcc187) }
.card-add:active{ transform:translateY(1px) }
.card-add:focus-visible{ outline:2px solid var(--silver); outline-offset:2px }
.card-add:disabled{ opacity:.55; cursor:default }
.nyp{ color:var(--mute); font-size:.82rem }
/* ═══════════════════════════════════════════════════════════════════════════
PRODUCT DETAIL PANEL
═══════════════════════════════════════════════════════════════════════ */
body.pp-open{ overflow:hidden }
.pp-scrim{
position:fixed; inset:0; z-index:120; background:rgba(4,6,9,.72);
backdrop-filter:blur(4px); opacity:0; pointer-events:none;
transition:opacity .3s ease;
}
.pp-scrim.on{ opacity:1; pointer-events:auto }
.pp{
position:fixed; inset:0; z-index:121; display:grid; place-items:center;
padding:clamp(12px,3vw,40px); overflow:auto;
}
.pp-inner{
position:relative; width:min(62rem,100%);
background:var(--ink-soft,#111620); border:1px solid var(--line);
border-radius:4px; box-shadow:0 60px 120px -50px rgba(0,0,0,.95);
display:grid; grid-template-columns:1.1fr 1fr;
opacity:0; transform:translateY(14px) scale(.985);
transition:opacity .3s ease, transform .34s cubic-bezier(.22,.61,.36,1);
}
.pp.on .pp-inner{ opacity:1; transform:none }
.pp-close{
position:absolute; top:.6rem; right:.7rem; z-index:2;
width:2.2rem; height:2.2rem; border-radius:50%;
font-size:1.5rem; line-height:1; color:var(--silver);
background:rgba(10,12,15,.65); border:1px solid var(--line); cursor:pointer;
}
.pp-close:hover{ background:rgba(10,12,15,.9) }
.pp-close:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px }
.pp-media{
display:grid; grid-template-columns:1fr 1fr; gap:1px;
background:var(--line); align-content:start;
border-radius:4px 0 0 4px; overflow:hidden; min-height:18rem;
}
.pp-media img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/5 }
.pp-media img:only-child{ grid-column:1/-1 }
.pp-media .ph{ grid-column:1/-1; min-height:20rem }
.pp-body{ padding:clamp(1.4rem,2.4vw,2.2rem); display:grid; gap:.85rem; align-content:start }
.pp-badge{
font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--brass);
}
.pp-body h2{
font-family:var(--serif,Georgia,serif); font-weight:400;
font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.12; margin:0; color:var(--silver);
text-wrap:balance;
}
.pp-meta{ margin:0; font-size:.86rem; color:var(--mute) }
.pp-price{ display:grid; gap:.15rem; font-variant-numeric:tabular-nums }
.pp-price b{
font-family:var(--serif,Georgia,serif); font-size:clamp(1.4rem,2.4vw,1.85rem);
font-weight:400; color:var(--silver);
}
.pp-price s{ color:var(--mute); font-size:.9rem; margin-right:.4rem }
.pp-tax,.pp-live{ font-size:.72rem; color:var(--mute); letter-spacing:.04em }
.pp-live{ color:var(--brass) }
.pp-ask{ color:var(--mute); font-size:.95rem }
.pp-desc{ margin:0; font-size:.9rem; line-height:1.65; color:var(--silver-dim) }
.pp-specs{
margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.2rem;
padding-top:.85rem; border-top:1px solid var(--line-soft);
}
.pp-specs>div{ min-width:0 }
.pp-specs dt{
font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute);
margin-bottom:.1rem;
}
.pp-specs dd{ margin:0; font-size:.86rem; color:var(--silver); font-variant-numeric:tabular-nums }
.pp-stock{ margin:0; font-size:.8rem; color:var(--mute) }
.pp-stock.low{ color:var(--brass-bright,#dcc187) }
.pp-stock.none{ color:#e08a80 }
.pp-actions{ display:grid; gap:.6rem; margin-top:.3rem }
.pp-err{ margin:0; font-size:.82rem; color:#e08a80 }
@media (max-width:820px){
.pp-inner{ grid-template-columns:1fr }
.pp-media{ border-radius:4px 4px 0 0; min-height:0 }
.pp-media img{ aspect-ratio:1/1 }
.pp-specs{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){
.pp-inner,.pp-scrim,.card-add{ transition:none }
}