/* Anything marked hidden is hidden, whatever display rule it also has. */
[hidden]{ display:none !important }

/* NOTE: every rule below is scoped to `.shop` (set on the <body> 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(var(--brass-rgb),.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(var(--brass-rgb),.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(var(--brass-rgb),.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: var(--err,#c96a5e); background: rgba(201,106,94,.09); color: var(--err-text,#e5b0a8); }
.shop .notice-success{ border-color: var(--brass); background: rgba(var(--brass-rgb),.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: var(--warn,#d8b46a); }
.shop .status-paid, .shop .status-shipped, .shop .status-delivered{ color: var(--ok,#7fb894); }
.shop .status-failed, .shop .status-cancelled{ color: var(--err,#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(var(--bg-rgb),.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(var(--fg-rgb),.34);
  box-shadow:0 30px 60px -38px rgba(var(--shade-rgb),calc(.9 * var(--shade-k)))}
.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(var(--fg-rgb),.4);
  box-shadow:0 44px 90px -46px rgba(var(--shade-rgb),calc(.9 * var(--shade-k)))}
.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 <img> before it — the
   card frame, the hero vitrine — because it is a block that fills its parent.
   Replace a slot with a plain <img> and nothing else has to change.
   ═══════════════════════════════════════════════════════════════════════ */

.ph{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  min-height:120px;
  background:
    repeating-linear-gradient(45deg,
      rgba(var(--fg-rgb),.028) 0 10px,
      rgba(var(--fg-rgb),.055) 10px 20px);
  border:1px dashed rgba(var(--fg-rgb),.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(var(--fg-rgb),.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(var(--fg-rgb),.1));
}

/* the grid must be a flex/grid container for `order` to reposition cards
   (the filters themselves are in collection.css) */
#tk-grid{ display:grid }

/* ---- 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(var(--shade-rgb),calc(.95 * var(--shade-k)));
  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 }
/* THE FREEZE. .pp is a full-screen layer with display:grid, and an author
   display rule beats the browser's own [hidden]{display:none}. So a "hidden"
   panel stayed on top of the whole page — invisible, but catching every
   click — until the page was reloaded. Hidden now means gone, and a panel
   that is not open never takes a click even while it fades out. */
.pp[hidden]{ display:none !important }
.pp:not(.on){ pointer-events: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,.pp-media.one img{ grid-column:1/-1 }
.pp-media .ph{ grid-column:1/-1; min-height:20rem }
/* The film sits under the photos, full width, and never plays on its own. */
.pp-media .pp-film{ grid-column:1/-1; width:100%; aspect-ratio:16/9; background:#000; border:0; display:block }
.pp-media .pp-film-link{
  grid-column:1/-1; display:block; padding:.9rem 1rem; text-align:center; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brass); background:var(--ink-soft,#131720);
  text-decoration:none;
}
.pp-media .pp-film-link:hover{ color:var(--brass-bright,#dcc187) }

.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-summary{ margin:0; font-size:.92rem; line-height:1.6; color:var(--silver); white-space:pre-line }
.pp-desc{ margin:0; font-size:.9rem; line-height:1.65; color:var(--silver-dim) }

/* ---- a description with sections in it ----------------------------------- */
/* Written in the dashboard's markup and rendered by the server: headings,
   bullet points, a specification table, the way a listing on a large
   marketplace reads. Used by the panel here and by the piece's own page. */
.rich > :first-child{ margin-top:0 }
.rich > :last-child{ margin-bottom:0 }
.rich p{ margin:0 0 .8em }
.rich h3{
  font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass); margin:1.4em 0 .55em;
}
.rich ul,.rich ol{ margin:0 0 .9em; padding-left:1.25em }
.rich li{ margin:.3em 0; padding-left:.1em }
.rich ul li::marker{ color:var(--brass) }
.rich strong{ color:var(--silver); font-weight:500 }
.rich a{ color:var(--brass-bright); text-decoration:underline; text-underline-offset:3px }
.rich a:hover{ color:var(--silver) }
.rich table{ width:100%; border-collapse:collapse; margin:.2em 0 1em; font-size:.88em }
.rich th,.rich td{ text-align:left; vertical-align:top; padding:.5em .8em .5em 0; border-bottom:1px solid var(--line-soft) }
.rich th{ font-weight:500; font-size:.78em; letter-spacing:.12em; text-transform:uppercase; color:var(--mute) }
.rich td:first-child{ color:var(--mute); width:38% }
.rich tbody tr:last-child td{ border-bottom:0 }

/* Its first two lines or so until Read more is pressed — room for a heading
   and two lines under it. A mask rather than a painted fade, so it sits on
   the page and in the panel alike. */
.rich.clamp{
  max-height:5em; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 55%,transparent); mask-image:linear-gradient(#000 55%,transparent);
}
.readmore{
  background:none; border:0; padding:0; margin:-.3rem 0 0; justify-self:start; cursor:pointer;
  font:inherit; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-bright);
  text-decoration:underline; text-underline-offset:4px;
}
.readmore:hover{ color:var(--silver) }

.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:var(--err-text,#e08a80) }

.pp-actions{ display:grid; gap:.6rem; margin-top:.3rem }
.pp-err{ margin:0; font-size:.82rem; color:var(--err-text,#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 }
}

/* ---- the card title, now a real link ------------------------------------- */
/* On the collection grid each piece's name links to its own page. A plain
   click is taken by the panel; this only has to not look like a link. */
.card-link{ color:inherit; text-decoration:none }
.card-link:hover{ color:inherit }
.card:focus-within .card-link{ text-decoration:underline; text-underline-offset:3px }

/* ---- the privacy choice -------------------------------------------------- */
/* A bar, not a modal: nothing is blocked while someone decides, and it
   cannot fight the product panel or the collections menu for the screen.
   Above the header and the WhatsApp float (90), below the panel (120), so
   opening a piece covers it rather than the other way round. */
.tk-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  background:var(--ink-soft,#131720); border-top:1px solid var(--line,rgba(var(--fg-rgb),.12));
  /* Deliberately not animated. A slide or a fade leaves the bar half-placed
     or half-visible if the transition is interrupted or throttled, and a
     consent notice whose buttons have wandered off the bottom of a phone is
     worse than one that simply appears. This is a legal control, not an
     ornament: it shows up, in the right place, every time. */
  display:none;
  padding:max(.9rem, env(safe-area-inset-bottom, 0px)) 1rem .9rem;
}
.tk-consent.on{ display:block }
.tk-consent-in{
  max-width:var(--maxw,1240px); margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem; justify-content:space-between;
}
.tk-consent-copy{
  flex:1 1 22rem; margin:0; font-size:.86rem; line-height:1.55;
  color:var(--silver-dim,#c4c9d2);
}
.tk-consent-copy a{ color:var(--brass-bright,#d7bd86) }
/* Equal weight on purpose — see the note at the top of consent.js. */
.tk-consent-acts{ display:flex; gap:.6rem; flex:0 0 auto }
.tk-consent-acts .btn{ min-width:8.5rem; justify-content:center }

@media (max-width:560px){
  .tk-consent{ padding-top:.75rem }
  .tk-consent-in{ gap:.7rem }
  .tk-consent-copy{ flex-basis:100%; font-size:.8rem; line-height:1.45 }
  .tk-consent-acts{ width:100% }
  .tk-consent-acts .btn{ flex:1 1 0; min-width:0 }
}


/* --- policy pages (privacy, terms, refunds, shipping, contact) ------------
   Long-form prose, which the shop has nowhere else. Narrower than the shop
   grid on purpose: a line of text past about 70 characters is tiring to
   read, whatever the screen is capable of. */
.policy{ max-width:46rem; padding:calc(var(--hh,74px) + 2.4rem) 1.2rem 5rem }
.policy-trail{ font-size:.8rem; color:var(--mute); margin-bottom:.9rem }
.policy-trail a{ color:var(--mute) }
.policy h1{ font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,4.5vw,2.6rem); line-height:1.15 }
.policy h2{ font-family:var(--serif); font-weight:400; font-size:1.3rem; margin:2.4rem 0 .7rem; color:var(--silver) }
.policy h3{ font-size:.95rem; font-weight:600; margin:1.5rem 0 .4rem; color:var(--silver-dim) }
.policy p, .policy li{ color:var(--silver-dim); line-height:1.7; margin-bottom:.9rem }
.policy ul{ padding-left:1.1rem; margin-bottom:.9rem }
.policy li{ margin-bottom:.35rem }
.policy a{ color:var(--brass-bright) }
.policy code{ font-size:.86em; color:var(--silver); background:rgba(var(--fg-rgb),.06); padding:.1em .4em; border-radius:3px }
.policy address{ font-style:normal; color:var(--silver-dim); line-height:1.7; margin-bottom:.9rem }
.policy-date{ font-size:.82rem; color:var(--mute) }
.policy-lede{ font-size:1.02rem; color:var(--silver); margin:1.2rem 0 .4rem }
.policy-big{ font-size:1.1rem }

.policy-table{ width:100%; border-collapse:collapse; margin:.4rem 0 1.4rem; font-size:.9rem }
.policy-table th, .policy-table td{ text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line-soft); vertical-align:top }
.policy-table th{ color:var(--mute); font-weight:500; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em }
.policy-table td{ color:var(--silver-dim) }

/* An unanswered question, left visible on purpose. These pages make promises
   to customers and to a payment provider, so a blank cannot be allowed to
   read as a sentence. It is loud so that nobody publishes one by accident:
   grep for "tbd" before deploying. */
.tbd{
  color:var(--warn,#f0c674); background:rgba(240,198,116,.1);
  border-bottom:1px dashed rgba(240,198,116,.5);
  padding:.05em .35em; font-style:normal; font-size:.92em;
}

@media (max-width:560px){
  .policy{ padding-left:1rem; padding-right:1rem }
  .policy-table{ font-size:.84rem }
  .policy-table th, .policy-table td{ padding:.5rem .4rem }
}

/* Policy links in the slim footer the shop pages use. They have to be on
   every page: a consent bar the visitor can never reopen is not a choice. */
.shop-foot-links{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-size:.82rem }
.shop-foot-links a{ color:var(--mute) }
.shop-foot-links a:hover{ color:var(--silver-dim) }
@media (max-width:560px){ .shop-foot-links{ order:3; width:100% } }

/* ============================================================
   Your orders (orders.html, assets/js/orders.js)
   The same house as the bag and the account: ink, silver, one
   brass thread. Nothing here needs a new colour or typeface.
   ============================================================ */
.shop .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.shop .od-loading{ color:var(--mute); text-align:center; padding-block:3rem }
.shop .od-link{ background:none; border:0; padding:0; color:var(--brass); font:inherit; font-size:.84rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px }
.shop .od-link:hover{ color:var(--brass-bright) }
.shop .od-i{ width:1.25em; height:1.25em; flex:none }
.shop .od-hint{ font-size:.8rem; color:var(--mute); line-height:1.55; margin:.2rem 0 .9rem }
.shop .od-hint a{ color:var(--brass) }
.shop .od-opt{ text-transform:none; letter-spacing:0; color:var(--mute) }
.shop .od-tag{
  display:inline-block; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  border:1px solid rgba(var(--brass-rgb),.34); padding:.2em .6em; margin-top:.45rem; vertical-align:middle;
}
.shop .od-nophoto{
  display:grid; place-items:center; width:100%; height:100%; background:var(--ink-panel);
  font-family:var(--serif); color:rgba(var(--brass-rgb),.5); font-size:1.3rem;
}

/* ---- the list ---------------------------------------------------------- */
.shop .od-filters{ display:flex; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.6rem; border-bottom:1px solid var(--line-soft) }
.shop .od-filters button{
  background:none; border:0; border-bottom:1px solid transparent; margin-bottom:-1px; padding:0 0 .8rem;
  color:var(--mute); font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.shop .od-filters button:hover{ color:var(--silver-dim) }
.shop .od-filters button[aria-selected="true"]{ color:var(--brass); border-bottom-color:var(--brass) }
.shop .od-none{ color:var(--mute); padding:2.4rem 0; text-align:center; font-size:.92rem }

.shop .oc{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,2.2vw,28px); align-items:center;
  border:1px solid var(--line); padding:clamp(16px,2vw,22px); margin-bottom:1rem; color:inherit; text-decoration:none;
  transition:border-color .25s, background .25s;
}
.shop .oc:hover{ border-color:rgba(var(--brass-rgb),.45); background:rgba(var(--brass-rgb),.03) }
.shop .oc:focus-visible{ outline:1px solid var(--brass); outline-offset:3px }
.shop .oc-thumbs{ display:flex; align-items:center }
.shop .oc-thumbs img, .shop .oc-thumbs .od-nophoto, .shop .oc-thumbs .od-more{
  width:62px; height:76px; object-fit:cover; border:1px solid var(--line); background:var(--ink-panel);
}
.shop .oc-thumbs > * + *{ margin-left:-18px; box-shadow:-6px 0 14px rgba(var(--shade-rgb),calc(.45 * var(--shade-k))) }
.shop .oc-thumbs .od-more{ display:grid; place-items:center; font-size:.78rem; color:var(--silver-dim) }
.shop .oc-top{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.35rem }
.shop .oc-names{ color:var(--silver); font-size:.98rem; margin-bottom:.25rem }
.shop .oc-when{ color:var(--mute); font-size:.8rem }
.shop .oc-flag{
  display:inline-block; margin:.6rem .4rem 0 0; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.28em .7em; color:var(--brass-bright); background:rgba(var(--brass-rgb),.1);
}
.shop .oc-flag-pay{ color:var(--warn,#d8b46a); background:rgba(216,180,106,.08) }
.shop .oc-side{ display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; white-space:nowrap }
.shop .oc-total{ font-family:var(--serif); font-size:1.3rem; color:var(--silver) }
.shop .oc-cta{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass) }
@media (max-width:640px){
  .shop .oc{ grid-template-columns:1fr; }
  .shop .oc-side{ flex-direction:row; justify-content:space-between; align-items:center }
}

/* ---- one order --------------------------------------------------------- */
.shop .od-back{ display:inline-block; color:var(--mute); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.6rem }
.shop .od-back:hover{ color:var(--brass) }
.shop .od-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.4rem; flex-wrap:wrap; margin-bottom:clamp(26px,3.4vw,40px) }
.shop .od-no{ font-size:clamp(1.9rem,4.4vw,2.8rem); margin-block:.45rem .4rem; letter-spacing:.01em }
.shop .od-meta{ color:var(--mute); font-size:.9rem }
.shop .od-head-side{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.shop .od-head-side .btn{ padding:.85rem 1.25rem }

/* the road from the bench to the door */
.shop .od-track{ list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin:0 0 1.4rem; padding:0 }
.shop .od-track li{ position:relative; padding-top:1.5rem; text-align:center }
.shop .od-track li::before{ content:""; position:absolute; top:6px; left:-50%; width:100%; height:1px; background:var(--line) }
.shop .od-track li:first-child::before{ display:none }
.shop .od-track li.done::before, .shop .od-track li.now::before, .shop .od-track li.end::before{ background:var(--brass) }
.shop .od-dot{
  position:absolute; top:0; left:50%; width:13px; height:13px; margin-left:-6.5px; border-radius:50%;
  border:1px solid var(--line); background:var(--ink); z-index:1;
}
.shop .od-track li.done .od-dot{ background:var(--brass); border-color:var(--brass) }
.shop .od-track li.now .od-dot{ background:var(--brass-bright); border-color:var(--brass-bright); box-shadow:0 0 0 5px rgba(var(--brass-rgb),.18) }
.shop .od-track b{ display:block; font-weight:400; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute) }
.shop .od-track li.done b, .shop .od-track li.now b{ color:var(--silver-dim) }
.shop .od-track li.now b{ color:var(--brass-bright) }
.shop .od-track small{ display:block; font-size:.76rem; color:var(--mute); margin-top:.3rem }
.shop .od-track.is-stopped li.end .od-dot{ background:var(--err,#c96a5e); border-color:var(--err,#c96a5e); box-shadow:0 0 0 5px rgba(201,106,94,.15) }
.shop .od-track.is-stopped li.end b{ color:var(--err-text,#e5b0a8) }
.shop .od-track.is-stopped li.end::before{ background:var(--err,#c96a5e) }

.shop .od-note{
  border-left:2px solid var(--brass); background:rgba(var(--brass-rgb),.06); padding:1rem 1.2rem;
  margin-bottom:clamp(26px,3.2vw,38px); color:var(--silver-dim); font-size:.93rem; line-height:1.6;
}
.shop .od-parcel{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-top:.7rem }
.shop .od-parcel .k{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass) }
.shop .od-parcel .v{ font-family:var(--serif); color:var(--silver); font-size:1.05rem; letter-spacing:.04em }
.shop .od-parcel .btn{ padding:.6rem 1rem }

.shop .od-layout{ display:grid; grid-template-columns:1fr 340px; gap:clamp(22px,3vw,42px); align-items:start }
/* On a narrow screen the columns fold into one, and what the customer came
   to do moves up, straight under where the order stands. */
@media (max-width:900px){
  .shop .od-layout{ display:flex; flex-direction:column; gap:clamp(18px,2.2vw,26px) }
  .shop .od-layout > .od-col{ display:contents }
  .shop .od-layout .od-do{ order:-1 }
}
.shop .od-col{ display:flex; flex-direction:column; gap:clamp(18px,2.2vw,26px); min-width:0 }
.shop .od-panel{ border:1px solid var(--line); padding:clamp(18px,2.4vw,26px) }
.shop .od-panel > h2{
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--brass);
  font-family:var(--sans); font-weight:500; margin-bottom:1.1rem;
}
.shop .od-do .btn{ margin-bottom:.7rem }
.shop .od-addr p{ color:var(--silver-dim); font-size:.92rem; line-height:1.7 }
.shop .od-addr b{ color:var(--silver); font-weight:500 }
.shop .od-sub{ color:var(--mute); font-size:.82rem }

.shop .od-item{
  display:grid; grid-template-columns:72px 1fr auto; gap:1.1rem; align-items:start;
  padding-block:1rem; border-top:1px solid var(--line-soft);
}
.shop .od-item:first-of-type{ border-top:0; padding-top:0 }
.shop .od-thumb{ display:block; width:72px; height:90px; border:1px solid var(--line); overflow:hidden }
.shop .od-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s }
.shop a.od-thumb:hover img{ transform:scale(1.05) }
.shop .od-item h3{ font-size:1.12rem; margin-bottom:.25rem }
.shop .od-item h3 a{ color:inherit }
.shop .od-item h3 a:hover{ color:var(--brass-bright) }
.shop .od-amt{ color:var(--silver-dim); font-variant-numeric:tabular-nums; white-space:nowrap }

/* ---- returns & help: one card per request, with its conversation ------- */
.shop .rq{ border:1px solid var(--line-soft); padding:1.1rem 1.15rem; margin-bottom:1rem; background:rgba(255,255,255,.012) }
.shop .rq:last-child{ margin-bottom:0 }
.shop .rq.is-new{ animation:rqNew 2.4s ease-out }
@keyframes rqNew{ from{ border-color:var(--brass); background:rgba(var(--brass-rgb),.1) } }
.shop .rq-closed{ opacity:.78 }
.shop .rq-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:.8rem; flex-wrap:wrap; margin-bottom:.55rem }
.shop .rq-kind{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin-right:.7rem }
.shop .rq-ref{ font-size:.76rem; color:var(--mute) }
.shop .rq-status{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; padding:.3em .7em; border:1px solid currentColor; white-space:nowrap }
.shop .rq-open{ color:var(--warn,#d8b46a) }
.shop .rq-approved{ color:var(--ok,#7fb894) }
.shop .rq-completed{ color:var(--silver-dim) }
.shop .rq-rejected{ color:var(--err,#c96a5e) }
.shop .rq-withdrawn{ color:var(--mute) }
.shop .rq-reason{ font-family:var(--serif); font-size:1.08rem; color:var(--silver); margin-bottom:.4rem }
.shop .rq-line{ font-size:.86rem; color:var(--silver-dim); margin-bottom:.35rem }
.shop .rq-line .k{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin-right:.4rem }
.shop .rq-photos{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0 }
.shop .rq-photos img{ width:64px; height:64px; object-fit:cover; border:1px solid var(--line) }
.shop .rq-thread{ list-style:none; padding:0; margin:.9rem 0 0; display:flex; flex-direction:column; gap:.65rem }
.shop .rq-msg{ max-width:88%; }
.shop .rq-msg.you{ align-self:flex-end; text-align:right }
.shop .rq-who{ display:block; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-bottom:.3rem }
.shop .rq-text{
  display:inline-block; text-align:left; font-size:.9rem; line-height:1.6; padding:.7rem .9rem;
  background:var(--ink-panel); border:1px solid var(--line-soft); color:var(--silver-dim);
}
.shop .rq-msg.you .rq-text{ background:rgba(var(--brass-rgb),.09); border-color:rgba(var(--brass-rgb),.22); color:var(--silver) }
.shop .rq-event{ align-self:center; font-size:.7rem; letter-spacing:.08em; color:var(--mute); text-align:center }
.shop .rq-event span{ border-top:1px solid var(--line-soft); padding-top:.3rem }
.shop .rq-next{ margin-top:1rem; padding:.85rem 1rem; border-left:2px solid var(--ok,#7fb894); background:rgba(127,184,148,.07) }
.shop .rq-next b{ display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ok,#7fb894); font-weight:500; margin-bottom:.35rem }
.shop .rq-next p{ font-size:.88rem; color:var(--silver-dim); line-height:1.55 }
.shop .rq-wait{ font-size:.8rem; color:var(--mute); margin:.9rem 0 .5rem }
.shop .rq-wait:empty{ display:none }
.shop .rq-reply textarea{
  width:100%; min-height:64px; resize:vertical; background:rgba(255,255,255,.02); color:var(--silver);
  border:1px solid var(--line); padding:.7rem .85rem; font-family:var(--sans); font-size:.92rem; font-weight:300;
}
.shop .rq-reply textarea:focus{ outline:none; border-color:var(--brass) }
.shop .rq-reply-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:.6rem }
.shop .rq-reply .btn{ padding:.7rem 1.2rem }
.shop .rq-err{ color:var(--err-text,#e5b0a8); font-size:.82rem; margin-top:.5rem }

/* ---- the request form: a dialog on a desk, a sheet on a phone ---------- */
body.od-lock{ overflow:hidden }
.od-sheet{ position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:20px }
.od-sheet[hidden]{ display:none }
.od-sheet-scrim{ position:absolute; inset:0; background:rgba(5,6,8,.72); backdrop-filter:blur(4px) }
.shop .od-sheet-box{
  position:relative; width:min(580px,100%); max-height:min(88vh,860px); display:flex; flex-direction:column;
  background:var(--ink-soft); border:1px solid var(--line); box-shadow:0 40px 90px -30px rgba(var(--shade-rgb),calc(.8 * var(--shade-k)));
  animation:odIn .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes odIn{ from{ opacity:0; transform:translateY(14px) } }
.shop .od-sheet-box::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; opacity:.75;
  background:linear-gradient(90deg, transparent, var(--brass) 18%, var(--brass-bright) 50%, var(--brass) 82%, transparent);
}
.shop .od-sheet-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.2rem 1.4rem; border-bottom:1px solid var(--line-soft) }
.shop .od-sheet-head h2{ font-size:1.25rem }
.shop .od-x{ background:none; border:0; color:var(--mute); font-size:1.7rem; line-height:1; cursor:pointer; padding:0 .2rem }
.shop .od-x:hover{ color:var(--silver) }
.shop .od-sheet-body{ padding:1.3rem 1.4rem 0; overflow:auto }
.shop .od-sheet-body fieldset{ border:0; padding:0; margin:0 0 1.3rem }
.shop .od-sheet-body legend, .shop .od-photos .lbl{
  display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-bottom:.7rem;
}
.shop .od-kinds{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
.shop .od-kinds legend{ grid-column:1/-1 }
.shop .od-kind{ position:relative; cursor:pointer }
.shop .od-kind input, .shop .od-reason input{ position:absolute; opacity:0; pointer-events:none }
.shop .od-kind span{ display:block; height:100%; border:1px solid var(--line); padding:.8rem .9rem; transition:border-color .2s, background .2s }
.shop .od-kind b{ display:block; font-weight:500; color:var(--silver); font-size:.92rem; margin-bottom:.2rem }
.shop .od-kind small{ color:var(--mute); font-size:.78rem; line-height:1.45 }
.shop .od-kind:hover span{ border-color:var(--silver-dim) }
.shop .od-kind input:checked + span{ border-color:var(--brass); background:rgba(var(--brass-rgb),.08) }
.shop .od-kind input:focus-visible + span, .shop .od-reason input:focus-visible + span{ outline:1px solid var(--brass); outline-offset:2px }
.shop .od-pick-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--line-soft) }
.shop .od-pick-row label{ display:flex; gap:.7rem; align-items:flex-start; cursor:pointer; color:var(--silver-dim); font-size:.92rem }
.shop .od-pick-row input{ margin-top:.25rem; accent-color:var(--brass) }
.shop .od-pick-row small{ color:var(--mute) }
.shop .od-pick-row.is-off label{ cursor:default; opacity:.55 }
.shop .od-pick-row select{ background:var(--ink); color:var(--silver); border:1px solid var(--line); padding:.35rem .5rem }
.shop .od-why{ display:flex; flex-wrap:wrap; gap:.5rem }
.shop .od-why legend{ width:100% }
.shop .od-reason{ cursor:pointer }
.shop .od-reason span{ display:inline-block; border:1px solid var(--line); padding:.55rem .85rem; font-size:.86rem; color:var(--silver-dim); transition:border-color .2s, background .2s, color .2s }
.shop .od-reason:hover span{ border-color:var(--silver-dim) }
.shop .od-reason input:checked + span{ border-color:var(--brass); color:var(--brass-bright); background:rgba(var(--brass-rgb),.08) }
.shop .od-reason.is-off{ cursor:not-allowed }
.shop .od-reason.is-off span{ opacity:.35; text-decoration:line-through }
.shop .od-photos .hint{ margin:-.3rem 0 .7rem }
.shop .od-photo-row{ display:flex; gap:.6rem; flex-wrap:wrap }
.shop .od-photo-row:not(:empty){ margin-bottom:.8rem }
.shop .od-photo{ position:relative; width:72px; height:72px; border:1px solid var(--line) }
.shop .od-photo img{ width:100%; height:100%; object-fit:cover; display:block }
.shop .od-photo.is-busy img{ opacity:.4 }
.shop .od-photo-x{
  position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; border:1px solid var(--line);
  background:var(--ink); color:var(--silver); cursor:pointer; line-height:1; font-size:.95rem;
}
.shop .od-spin{
  position:absolute; inset:50% auto auto 50%; width:18px; height:18px; margin:-9px; border-radius:50%;
  border:2px solid rgba(var(--brass-rgb),.3); border-top-color:var(--brass); animation:odSpin .8s linear infinite;
}
@keyframes odSpin{ to{ transform:rotate(360deg) } }
.shop .od-photo-add{ padding:.65rem 1rem }
.shop .od-sheet-foot{
  position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:.7rem; padding:1rem 0 1.3rem;
  margin-top:.4rem; background:var(--ink-soft); border-top:1px solid var(--line-soft);
}
.shop .od-sheet-foot .btn{ padding:.9rem 1.4rem }
@media (max-width:560px){
  .od-sheet{ place-items:end stretch; padding:0 }
  .shop .od-sheet-box{ width:100%; max-height:92vh }
  .shop .od-kinds{ grid-template-columns:1fr }
  .shop .od-track b{ font-size:.58rem; letter-spacing:.12em }
}
@media (prefers-reduced-motion:reduce){
  .shop .od-sheet-box, .shop .rq.is-new{ animation:none }
}

/* ============================================================
   The enquiry form (assets/js/enquiry.js) — on the shop page, in
   the product panel under Buy it now for Time Limited pieces, and
   on those pieces' own pages. Not scoped to .shop: the homepage
   opens the panel too. Looks like the contact form always has.
   ============================================================ */
.enq{ display:grid; gap:1.1rem }
.enq[hidden], .enq-ok[hidden], .enq-photos[hidden], .enq-add[hidden], .enq-err[hidden]{ display:none }
.enq-eyebrow{
  display:inline-flex; align-items:center; gap:1rem; margin:0;
  font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--brass);
}
.enq-eyebrow::before{ content:""; width:46px; height:1px; background:var(--brass) }
.enq-title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3.4vw,2.4rem); color:var(--silver); margin:-.3rem 0 .3rem; line-height:1.15 }
.enq-row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem }
.enq-field{ display:grid; gap:.45rem }
.enq-field label, .enq-lbl{ font-family:var(--sans); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute) }
.enq-opt{ text-transform:none; letter-spacing:0 }
.enq-field input, .enq-field select, .enq-field textarea{
  width:100%; background:var(--ink-soft); border:1px solid var(--line); color:var(--silver); border-radius:2px;
  font-family:var(--sans); font-size:.95rem; font-weight:300; padding:.85rem .95rem;
}
.enq-field textarea{ min-height:150px; resize:vertical; line-height:1.55 }
.enq-field input:focus, .enq-field select:focus, .enq-field textarea:focus{ border-color:var(--brass); outline:none }
.enq-count, .enq-hint, .enq-note{ margin:0; font-size:.76rem; color:var(--mute); line-height:1.5 }
.enq-photo-row{ display:flex; gap:.6rem; flex-wrap:wrap }
.enq-photo-row:empty{ display:none }
.enq-photo{ position:relative; width:72px; height:72px; border:1px solid var(--line) }
.enq-photo img{ width:100%; height:100%; object-fit:cover; display:block }
.enq-photo.is-busy img{ opacity:.4 }
.enq-photo-x{
  position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; border:1px solid var(--line);
  background:var(--ink); color:var(--silver); cursor:pointer; line-height:1; font-size:.95rem; padding:0;
}
.enq-spin{
  position:absolute; inset:50% auto auto 50%; width:18px; height:18px; margin:-9px; border-radius:50%;
  border:2px solid rgba(var(--brass-rgb),.3); border-top-color:var(--brass); animation:enqSpin .8s linear infinite;
}
@keyframes enqSpin{ to{ transform:rotate(360deg) } }
.enq-add{
  justify-self:start; display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  border:1px solid var(--line); color:var(--silver-dim); padding:.7rem 1.1rem;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; transition:border-color .2s, color .2s;
}
.enq-add::before{ content:"+"; font-size:1rem; line-height:1; color:var(--brass) }
.enq-add:hover{ border-color:var(--brass); color:var(--silver) }
.enq-err{ margin:0; font-size:.85rem; color:var(--err-text,#e5b0a8); border-left:2px solid var(--err,#c96a5e); padding:.5rem .8rem; background:rgba(201,106,94,.09) }
.enq-send{
  width:100%; margin-top:.3rem; cursor:pointer; border:1px solid var(--brass); background:var(--brass); color:var(--ink);
  font-family:var(--sans); font-size:.82rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; padding:1.05rem 1.7rem;
  transition:background .25s, border-color .25s;
}
.enq-send:hover{ background:var(--brass-bright); border-color:var(--brass-bright) }
.enq-ok{ border:1px solid var(--brass); padding:1.1rem; color:var(--silver); font-size:.92rem; line-height:1.55 }
@media (max-width:560px){ .enq-row2{ grid-template-columns:1fr } }

/* In the product panel: a rule above it, a size down, and darker fields so
   they stand out from the panel behind them. */
.pp-enquire{ border-top:1px solid var(--line-soft); padding-top:1.5rem; margin-top:.6rem }
.pp-enquire[hidden]{ display:none }
.pp-enquire .enq-title{ font-size:1.5rem }
.pp-enquire .enq-row2{ grid-template-columns:1fr }
.pp-enquire .enq-field input, .pp-enquire .enq-field select, .pp-enquire .enq-field textarea{ background:var(--ink) }

/* On a piece's own page, under Add to bag. */
.pc-enquire{ border-top:1px solid var(--line-soft); padding-top:clamp(1.6rem,3vw,2.2rem); margin-top:clamp(1.6rem,3vw,2.2rem) }