/* ═══════════════════════════════════════════════════════════════════════════
   THE COLLECTION PAGE — finding a piece
   Search across the top, the three collections as tiles, filters down the
   left (a quarter of the width) and the pieces on the right. Under 900px
   the filters become a drawer behind a Filters button.
   Colours come only from the tokens in silver.css, so a theme can restyle
   all of it by setting those.
   ═══════════════════════════════════════════════════════════════════════ */

.shopx{ padding-block:clamp(22px,3vw,40px) clamp(56px,7vw,96px) }

/* ---- title and search -------------------------------------------------- */
.sx-top{
  display:flex; align-items:center; justify-content:space-between; gap:14px 32px;
  margin-bottom:clamp(16px,2vw,24px);
}
.sx-title{ flex:1 1 auto; min-width:0; font-size:clamp(1.4rem,2.2vw,1.95rem); font-weight:300 }
.sx-total{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.08em; color:var(--mute);
  margin-left:.5em; white-space:nowrap; vertical-align:middle;
}
.sx-search{
  position:relative; flex:0 1 440px; display:flex; align-items:center;
}
.sx-search svg{ position:absolute; left:14px; width:18px; height:18px; color:var(--mute); pointer-events:none }
.sx-search input{
  width:100%; font:inherit; font-size:.92rem; color:var(--silver);
  background:var(--ink-soft); border:1px solid var(--line); border-radius:2px;
  padding:.78rem 1rem .78rem 2.75rem;
  transition:border-color .2s, background .2s;
}
.sx-search input::placeholder{ color:var(--mute) }
.sx-search input:focus{ outline:none; border-color:var(--brass); background:var(--ink-panel) }
.sx-search input:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px }

/* ---- the three collections as tiles -------------------------------------- */
.sx-tiles{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,18px);
  margin-bottom:clamp(22px,3vw,36px);
}
.sx-tiles:empty{ display:none }
.sx-tile{
  position:relative; overflow:hidden; isolation:isolate; text-align:left; cursor:pointer;
  min-height:clamp(150px,15vw,200px); padding:clamp(16px,1.8vw,24px);
  display:flex; flex-direction:column; justify-content:flex-end; gap:.25rem;
  font:inherit; color:var(--silver);
  background:var(--ink-soft); border:1px solid var(--line); border-radius:2px;
  transition:border-color .3s, box-shadow .3s, transform .3s;
}
.sx-tile-bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center 35%;
  transform:scale(1.02); transition:transform 1.1s cubic-bezier(.2,.7,.2,1), filter .4s;
  filter:saturate(.85) brightness(.8);
}
.sx-tile-wash{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(11,13,16,.05) 0%,rgba(11,13,16,.55) 52%,rgba(11,13,16,.92) 100%);
}
.sx-tile-check{
  position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(var(--fg-rgb),.5); background:rgba(11,13,16,.35);
  transition:background .25s, border-color .25s;
}
.sx-tile-check::after{
  content:""; width:9px; height:5px; border:solid var(--ink); border-width:0 0 1.8px 1.8px;
  transform:rotate(-45deg) translate(1px,-1px); opacity:0; transition:opacity .2s;
}
.sx-tile:hover .sx-tile-check{ border-color:var(--brass-bright) }
.sx-tile.on .sx-tile-check{ background:var(--brass); border-color:var(--brass) }
.sx-tile.on .sx-tile-check::after{ opacity:1 }
.sx-tile-tag{ font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brass-bright); font-weight:500 }
.sx-tile-name{ font-family:var(--serif); font-size:clamp(1.25rem,2vw,1.7rem); line-height:1.1; color:var(--silver) }
.sx-tile-foot{
  display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-top:.35rem;
  font-size:.72rem; letter-spacing:.08em; color:var(--silver-dim);
}
.sx-tile-go{ color:var(--brass-bright); text-transform:uppercase; letter-spacing:.16em; font-size:.64rem }
.sx-tile:hover{ border-color:rgba(var(--brass-rgb),.55) }
.sx-tile:hover .sx-tile-bg{ transform:scale(1.07); filter:saturate(1) brightness(.88) }
.sx-tile.on{ border-color:var(--brass); box-shadow:inset 0 0 0 1px var(--brass), 0 10px 34px rgba(var(--shade-rgb),calc(.35 * var(--shade-k))) }
.sx-tile.on .sx-tile-bg{ filter:saturate(1) brightness(.9) }
.sx-tile.empty{ opacity:.45; cursor:not-allowed }
.sx-tile.empty:hover{ border-color:var(--line) }
.sx-tile:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px }

/* ---- filters | pieces ---------------------------------------------------- */
.sx-layout{
  display:grid; grid-template-columns:minmax(210px,1fr) 3fr; gap:clamp(22px,3vw,44px);
  align-items:start;
}
/* Nothing to filter until the pieces arrive; until then the pieces take the
   whole width rather than sitting beside an empty column. */
body:not(.sx-ready) .sx-layout{ grid-template-columns:1fr }
body:not(.sx-ready) .sx-side,
body:not(.sx-ready) .sx-filter-btn,
body:not(.sx-ready) .sx-sort{ display:none }

.sx-side{
  position:sticky; top:calc(var(--tkh-h,74px) + 18px);
  max-height:calc(100vh - var(--tkh-h,74px) - 36px); overflow:auto; overscroll-behavior:contain;
  padding-right:6px; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.sx-side-head{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding-bottom:.8rem; border-bottom:1px solid var(--line);
}
.sx-side-head b{ font-family:var(--serif); font-weight:400; font-size:1.15rem; color:var(--silver) }
.sx-close, .sx-side-foot, .sx-scrim{ display:none }

.sx-group{ border:0; padding:1rem 0 .9rem; border-bottom:1px solid var(--line-soft); min-width:0 }
/* floated, so its margin is honoured the same way in every browser */
.sx-group legend{
  float:left; width:100%; padding:0; margin-bottom:.45rem;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); font-weight:500;
}
.sx-group legend + *{ clear:both }
.sx-opt{
  position:relative; display:flex; align-items:center; gap:.65rem; cursor:pointer;
  padding:.36rem 0; font-size:.88rem; color:var(--silver-dim); line-height:1.3;
  transition:opacity .3s, color .2s;
}
.sx-opt input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.sx-box{
  flex:0 0 auto; width:16px; height:16px; border:1px solid rgba(var(--fg-rgb),.32); border-radius:2px;
  display:grid; place-items:center; transition:background .15s, border-color .15s;
}
.sx-box::after{
  content:""; width:8px; height:4px; border:solid var(--ink); border-width:0 0 1.6px 1.6px;
  transform:rotate(-45deg) translate(1px,-1px); opacity:0;
}
.sx-opt input:checked + .sx-box{ background:var(--brass); border-color:var(--brass) }
.sx-opt input:checked + .sx-box::after{ opacity:1 }
.sx-opt input:focus-visible + .sx-box{ outline:2px solid var(--brass-bright); outline-offset:2px }
.sx-opt:hover{ color:var(--silver) }
.sx-opt:hover .sx-box{ border-color:var(--brass) }
.sx-lbl{ flex:1; min-width:0 }
.sx-n{ font-size:.74rem; color:var(--mute); font-variant-numeric:tabular-nums }
.sx-opt.is-zero{ opacity:.4; cursor:default }

/* ---- above the pieces: count, sort, chips -------------------------------- */
.sx-bar{
  display:flex; align-items:center; gap:.8rem 1rem; flex-wrap:wrap;
  padding-bottom:.85rem; margin-bottom:1rem; border-bottom:1px solid var(--line-soft);
}
.sx-count{ font-size:.8rem; color:var(--mute); letter-spacing:.04em; font-variant-numeric:tabular-nums }
.sx-sort{ margin-left:auto; display:inline-flex; align-items:center; gap:.5rem }
.sx-sort span{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute) }
.sx-sort select{
  font:inherit; font-size:.82rem; color:var(--silver); cursor:pointer;
  background:var(--ink-soft); border:1px solid var(--line); border-radius:2px; padding:.5rem .7rem;
}
.sx-sort select:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px }
.sx-filter-btn{ display:none }

/* ---- what is chosen, at the top of the filters ---------------------------
   Always there, even empty, so the first tick does not push the options
   below it down under the pointer. */
.sx-applied{ padding:.9rem 0 1rem; border-bottom:1px solid var(--line-soft) }
.sx-applied-head{ display:flex; align-items:center; justify-content:space-between; min-height:1.6rem; margin-bottom:.35rem }
.sx-applied-head > span{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); font-weight:500;
}
.sx-applied-head .sx-link{ padding:.2rem 0 }
.sx-applied-head .sx-link[hidden]{ display:inline; visibility:hidden }
.sx-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; min-height:29px }
.sx-none{ font-size:.8rem; color:var(--mute); font-style:italic }
.sx-chip{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; max-width:100%;
  font:inherit; font-size:.74rem; color:var(--silver); text-align:left;
  background:rgba(var(--brass-rgb),.1); border:1px solid rgba(var(--brass-rgb),.42); border-radius:2px;
  padding:.3rem .42rem .3rem .6rem; transition:background .2s, border-color .2s;
}
.sx-chip.is-new{ animation:sxIn .3s ease-out }
@keyframes sxIn{ from{ opacity:0 } to{ opacity:1 } }
.sx-chip span{ font-size:.95rem; line-height:1; color:var(--brass-bright) }
.sx-chip:hover{ background:rgba(var(--brass-rgb),.2); border-color:var(--brass) }
.sx-chip:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px }
/* the one collection showing: a chip, not a button, with nothing to take off */
.sx-chip.is-fixed{ cursor:default; padding-right:.6rem }
.sx-chip.is-fixed:hover{ background:rgba(var(--brass-rgb),.1); border-color:rgba(var(--brass-rgb),.42) }

/* a search the filters hide, and where else it is found */
.sx-sugg{
  margin-top:.8rem; padding:.75rem .8rem .8rem;
  background:rgba(var(--brass-rgb),.07); border:1px solid rgba(var(--brass-rgb),.24); border-radius:2px;
  animation:sxIn .3s ease-out;
}
.sx-sugg p{ font-size:.8rem; line-height:1.45; color:var(--silver-dim); margin-bottom:.55rem }
.sx-sugg-btn{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; width:100%;
  margin-top:.35rem; padding:.5rem .65rem; cursor:pointer; text-align:left;
  font:inherit; font-size:.78rem; color:var(--silver);
  background:var(--ink); border:1px solid var(--line); border-radius:2px;
  transition:border-color .2s, background .2s;
}
.sx-sugg-btn span{ color:var(--brass-bright); font-variant-numeric:tabular-nums }
.sx-sugg-btn:hover{ border-color:var(--brass); background:var(--ink-panel) }
.sx-sugg-btn:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px }
.coll-empty .sx-sugg{ max-width:420px; margin:1rem auto 0; text-align:left }
.coll-empty p{ margin:0 }

.sx-link{
  font:inherit; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass); background:none; border:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; padding:.35rem .2rem;
}
.sx-link:hover{ color:var(--brass-bright) }
.sx-link[hidden]{ display:none }

.sx-main{ min-height:70vh }

/* the pieces now have three quarters of the width */
.shopx .grid{ grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,24px) }
.shopx .card-body h3{ font-size:1.16rem }
.shopx .indic{ margin-top:2rem }

@media (max-width:1120px){
  .shopx .grid{ grid-template-columns:repeat(2,1fr) }
}

/* ---- phones and small tablets: the filters become a drawer --------------- */
@media (max-width:900px){
  .sx-layout{ grid-template-columns:1fr }
  .sx-filter-btn{
    display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
    font:inherit; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--silver); background:var(--ink-soft); border:1px solid var(--line); border-radius:2px;
    padding:.55rem .95rem;
  }
  .sx-filter-btn::before{
    content:""; width:14px; height:10px;
    background:linear-gradient(currentColor,currentColor) 0 0/100% 1.4px no-repeat,
               linear-gradient(currentColor,currentColor) 2px 50%/10px 1.4px no-repeat,
               linear-gradient(currentColor,currentColor) 4px 100%/6px 1.4px no-repeat;
  }
  .sx-count{ order:3; width:100% }
  .sx-main{ min-height:0 }

  .sx-side{
    position:fixed; top:0; bottom:0; left:0; z-index:130;
    width:min(86vw,360px); max-height:none; padding:18px 20px 0;
    display:flex; flex-direction:column;
    background:var(--ink-soft); border-right:1px solid var(--line);
    transform:translateX(-102%); transition:transform .32s cubic-bezier(.2,.7,.2,1);
  }
  body.sx-open .sx-side{ transform:none; box-shadow:18px 0 50px rgba(var(--shade-rgb),calc(.5 * var(--shade-k))) }
  .sx-scrim{
    display:block; position:fixed; inset:0; z-index:120; background:rgba(5,6,8,.6);
    opacity:0; pointer-events:none; transition:opacity .3s;
  }
  body.sx-open .sx-scrim{ opacity:1; pointer-events:auto }
  body.sx-open{ overflow:hidden }

  .sx-close{
    display:block; margin-left:.4rem; font-size:1.6rem; line-height:1; color:var(--silver);
    background:none; border:0; cursor:pointer; padding:.1rem .35rem;
  }
  .sx-side-foot{
    display:block; position:sticky; bottom:0; margin-top:auto;
    padding:14px 0 18px; background:linear-gradient(180deg,transparent,var(--ink-soft) 30%);
  }
  .sx-show{
    width:100%; cursor:pointer; font:inherit; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink); background:var(--brass); border:1px solid var(--brass); border-radius:2px; padding:.9rem 1rem;
  }
}

@media (max-width:700px){
  .sx-top{ flex-wrap:wrap }
  .sx-search{ flex-basis:100% }
  /* the tiles slide sideways so the pieces are still near the top */
  .sx-tiles{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(220px,74%);
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(-1 * clamp(20px,5vw,56px)); padding-inline:clamp(20px,5vw,56px);
    scroll-padding-inline:clamp(20px,5vw,56px);
  }
  .sx-tiles::-webkit-scrollbar{ display:none }
  .sx-tile{ scroll-snap-align:start; min-height:132px }
  .sx-tile-tag{ letter-spacing:.16em }
}

/* two pieces a row on a phone, as the large shops do */
@media (max-width:560px){
  .shopx .grid{ grid-template-columns:repeat(2,1fr); gap:10px }
  .shopx .card-body{ padding:.75rem .75rem .9rem; gap:.2rem }
  .shopx .card-body h3{ font-size:.98rem; line-height:1.2 }
  .shopx .card-meta{ font-size:.7rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .shopx .card-foot{ flex-direction:column; align-items:stretch; gap:.5rem; margin-top:.4rem }
  .shopx .price{ font-size:1rem }
  .shopx .card-add, .shopx .card-foot .view{ width:100%; justify-content:center; text-align:center }
  .shopx .card-badge{ top:8px; left:8px; font-size:.54rem; padding:.26rem .45rem }
  .shopx .card-frame{ inset:8px }
}

@media (prefers-reduced-motion:reduce){
  .sx-tile, .sx-tile-bg, .sx-tile-check, .sx-side, .sx-scrim, .sx-chip, .sx-opt, .sx-sugg-btn, .sx-search input{ transition:none }
  .sx-chip.is-new, .sx-sugg{ animation:none }
}