/* ==========================================================================
   NMAYA — listing, filters, checkout, static pages
   ========================================================================== */

/* --------------------------------------------------------- page header --- */

.phead{padding-block:clamp(1.6rem,4vw,3rem) clamp(1.2rem,2.5vw,2rem)}
.phead h1{margin-bottom:.6rem}
.phead p{max-width:52ch;color:var(--slate);margin:0}

/* ------------------------------------------------------------- filters --- */

.filterbar{
  position:sticky;top:var(--header-h);z-index:40;
  background:var(--calico);
  padding-block:.75rem;
  border-bottom:1px solid var(--calico-2);
  display:flex;align-items:center;gap:.7rem;justify-content:space-between;
}
.filterbar__count{font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
.filterbar__tools{display:flex;gap:.5rem;align-items:center}

.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .95rem;border:1px solid var(--calico-3);border-radius:999px;
  font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;
  background:var(--paper);white-space:nowrap;
  transition:border-color .22s var(--ease),background .22s var(--ease),color .22s var(--ease);
}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--ink);color:var(--calico);border-color:var(--ink)}
.chip svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none}
.chip__dot{width:8px;height:8px;border-radius:50%;background:var(--thread)}

.chiprow{
  display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;
  margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) .9rem;
}
.chiprow::-webkit-scrollbar{display:none}

.filters{display:none}
.filters__group{padding:1.3rem var(--gut);border-bottom:1px solid var(--calico-2)}
.filters__group h4{
  font-family:var(--body);font-size:var(--fs-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);margin:0 0 .9rem;font-weight:500;
}
.filters__opts{display:flex;flex-wrap:wrap;gap:.45rem}
.check{
  display:flex;align-items:center;gap:.6rem;padding:.4rem 0;cursor:pointer;font-size:var(--fs-sm);
}
.check input{
  appearance:none;width:18px;height:18px;flex:none;
  border:1px solid var(--calico-3);border-radius:2px;background:var(--paper);
  transition:background .2s,border-color .2s;
}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{
  content:"";display:block;width:5px;height:9px;margin:2px auto;
  border:solid var(--calico);border-width:0 1.6px 1.6px 0;transform:rotate(42deg);
}
.check span{color:var(--ink-2)}
.check small{color:var(--slate-2);margin-left:auto}

.applied{display:flex;gap:.4rem;flex-wrap:wrap;padding-bottom:1rem}

/* --------------------------------------------------------- pagination --- */

.pager{display:flex;justify-content:center;gap:.4rem;padding-top:2.5rem;flex-wrap:wrap}
.pager a,.pager span{
  min-width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--calico-3);border-radius:var(--r);font-size:var(--fs-sm);
  transition:border-color .2s,background .2s,color .2s;
}
.pager a:hover{border-color:var(--ink)}
.pager [aria-current="page"]{background:var(--ink);color:var(--calico);border-color:var(--ink)}

/* ------------------------------------------------------------ checkout --- */

.co{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3.5rem);padding-bottom:clamp(3rem,6vw,5rem)}

.co__step{margin-bottom:2.2rem}
.co__step h2{
  font-family:var(--body);font-size:var(--fs-sm);letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;
}
.co__step h2 i{
  width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--calico);
  display:grid;place-items:center;font-style:normal;font-size:var(--fs-xs);flex:none;
}

.summary{
  background:var(--paper);border:1px solid var(--calico-2);
  border-top:2px solid var(--thread);
  border-radius:var(--r-lg);padding:1.4rem;
}
.summary__line{
  display:grid;grid-template-columns:58px 1fr auto;gap:.85rem;align-items:center;
  padding:.7rem 0;border-bottom:1px solid var(--calico-2);
}
.summary__line img{width:58px;height:72px;object-fit:cover;border-radius:var(--r)}
.summary__line b{display:block;font-weight:500;font-size:var(--fs-sm);line-height:1.3}
.summary__line span{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.summary__line em{font-style:normal;font-variant-numeric:tabular-nums;font-size:var(--fs-sm)}

.totals{display:grid;gap:.5rem;padding-top:1rem;font-size:var(--fs-sm)}
.totals div{display:flex;justify-content:space-between;gap:1rem}
.totals .is-total{
  padding-top:.8rem;margin-top:.3rem;border-top:1px dashed var(--thread);
  font-size:1.12rem;font-weight:500;font-variant-numeric:tabular-nums;
}
.totals .is-free{color:var(--ok)}

.customs{
  margin-top:1rem;padding:.85rem 1rem;
  background:#FBF3E6;border-left:3px solid var(--thread);
  font-size:var(--fs-sm);line-height:1.5;
}

.paylock{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:.9rem;font-size:var(--fs-xs);color:var(--slate);
}
.paylock svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.5;fill:none}

/* ------------------------------------------------------------- success --- */

.done{max-width:640px;margin-inline:auto;text-align:center;padding-block:clamp(2.5rem,6vw,5rem)}
.done__mark{
  width:66px;height:66px;margin:0 auto 1.6rem;border-radius:50%;
  background:var(--ok);color:#fff;display:grid;place-items:center;
  animation:pop .55s var(--ease) both;
}
.done__mark svg{width:30px;height:30px;stroke:currentColor;stroke-width:2;fill:none}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.done__ref{
  display:inline-block;margin:1.2rem 0;padding:.6rem 1.2rem;
  border:1px dashed var(--thread);border-radius:var(--r);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;
}
.done .summary{text-align:left;margin-top:2rem}

/* -------------------------------------------------------- static pages --- */

.prose{max-width:68ch}
.prose h2{font-size:clamp(1.4rem,3vw,2rem);margin:2.4rem 0 .9rem}
.prose h3{font-family:var(--body);font-size:var(--fs-md);font-weight:500;margin:1.6rem 0 .5rem}
.prose p,.prose li{color:var(--ink-2);line-height:1.75}
.prose ul{padding-left:1.1rem}
.prose li::marker{color:var(--thread)}
.prose a{border-bottom:1px solid var(--thread)}

.table-wrap{overflow-x:auto;margin-top:1.5rem;-webkit-overflow-scrolling:touch}
table.size{width:100%;border-collapse:collapse;min-width:520px;background:var(--paper)}
table.size th,table.size td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--calico-2);font-variant-numeric:tabular-nums}
table.size th{
  font-size:var(--fs-xs);letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate);font-weight:500;background:var(--calico);
}
table.size tbody tr:hover{background:var(--calico)}
table.size td:first-child{font-weight:500}

.soon-hero{
  min-height:min(72vh,620px);display:grid;place-items:center;text-align:center;
  background:var(--ink);color:var(--calico);position:relative;overflow:hidden;
}
.soon-hero .wrap{position:relative;z-index:2;max-width:620px}
.soon-hero::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,86vw);aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(192,168,126,.4);
}

@media (min-width:600px){
  .filters__opts{gap:.5rem}
}

@media (min-width:900px){
  .co{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);align-items:start}
  .co__aside{position:sticky;top:calc(var(--header-h) + 1.2rem)}
  .filterbar{justify-content:flex-start;gap:1.2rem}
}

@media (min-width:1024px){
  /* filters live in the page on desktop, in a drawer on touch */
  .shop{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(1.6rem,3vw,3rem);align-items:start}
  .filters{display:block;position:sticky;top:calc(var(--header-h) + 1.4rem)}
  .filters__group{padding-inline:0}
  .filterbar__filters{display:none}
}