/* ===========================================================
   THE JAUNTY SPOT — components.css
   Frosted panels shared across every page.
   =========================================================== */

/* ---------- site header ---------- */
#siteHeader{position:sticky;top:0;z-index:50}
.topbar{
  background:rgba(11,12,16,.55);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border-bottom:1px solid var(--edge);
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding-top:12px;padding-bottom:12px;
}

.brand{display:flex;align-items:center;flex-shrink:0}
/* The mark is two layers: an ivory base with the J cut out, and the J
   itself painted with the identity colour through a mask. So the letter
   wears whoever the shopper is, and the rest never argues with it. */
.mark{position:relative;display:block;line-height:0}
.mark-base{height:52px;width:auto;display:block}
.mark-j{
  position:absolute;inset:0;
  background:var(--accent);
  -webkit-mask:url("../img/logo-j.png") center/contain no-repeat;
  mask:url("../img/logo-j.png") center/contain no-repeat;
  transition:background .9s cubic-bezier(.22,.61,.36,1);
}
.brand .mark{
  filter:drop-shadow(0 0 14px var(--accent-glow))
         drop-shadow(0 0 30px var(--accent-wash));
  transition:filter .9s cubic-bezier(.22,.61,.36,1);
}
/* The mark is ivory rather than the supplied blue, so it sits with
   every identity colour instead of arguing with three of them. */
.foot-mark{
  width:max-content;margin:0 auto var(--s5);
  opacity:.9;
  filter:drop-shadow(0 0 20px var(--accent-wash));
}
.foot-mark .mark-base{height:72px}

@media (max-width:760px){
  .mark-base{height:44px}
  .foot-mark .mark-base{height:56px}
}
.top-right{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;position:relative}
.nav-search{display:flex;align-items:center}
.nav-search-btn{
  background:none;border:none;color:var(--bone-dim);cursor:pointer;
  padding:4px;display:flex;align-items:center;transition:color .2s;
}
.nav-search-btn:hover{color:var(--bone)}
.nav-search-btn svg{width:17px;height:17px}

.search-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:95;
  opacity:0;transition:opacity .25s ease;
}
.search-backdrop.show{opacity:1}
.search-modal{
  position:fixed;top:12%;left:50%;transform:translate(-50%,-10px);
  width:min(560px,92vw);
  background:rgba(14,15,20,.97);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--edge);border-radius:var(--r-lg);
  z-index:96;opacity:0;padding:var(--s5);
  transition:opacity .25s ease,transform .25s ease;
}
.search-modal.show{opacity:1;transform:translate(-50%,0)}
.search-modal-box{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border:1px solid var(--edge);border-radius:999px;
  background:rgba(255,255,255,.04);
}
.search-modal-box svg{width:18px;height:18px;color:var(--bone-faint);flex-shrink:0}
.search-modal-box input{
  flex:1;background:none;border:none;outline:none;
  color:var(--bone);font-size:15px;font-family:inherit;
}
.search-modal-box input::placeholder{color:var(--bone-faint)}
.search-modal-box .btn{padding:10px 20px;font-size:12px;flex-shrink:0}
.search-trending{margin-top:18px}
.search-trending-label{
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-faint);
}
.search-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.search-chip{
  padding:7px 14px;border-radius:999px;border:1px solid var(--edge);
  background:var(--glass);color:var(--bone-dim);font-size:13px;cursor:pointer;
  transition:border-color .2s,color .2s;
}
.search-chip:hover{border-color:var(--accent);color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:var(--s5)}
.nav-text-link{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim);white-space:nowrap;background:none;border:none;
  cursor:pointer;padding:4px 0;
  transition:color .2s;
}
.nav-text-link::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right .28s cubic-bezier(.22,.61,.36,1);
}
.nav-text-link:hover{color:var(--bone)}
.nav-text-link:hover::after{right:0}
.identity-link .dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px var(--accent-glow);
}
.cart-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:9px;
}
.hamburger{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:34px;height:34px;border:1px solid var(--edge);border-radius:999px;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  cursor:pointer;padding:0;flex-shrink:0;
}
.hamburger span{
  display:block;width:16px;height:1.5px;background:#fff;
  margin:0 auto;transition:transform .2s,opacity .2s;
}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:760px){
  .hamburger{display:flex}
  .nav-links{
    position:absolute;top:100%;right:0;left:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--s5) 16px;
    background:rgba(11,12,16,.92);
    -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    border-bottom:1px solid var(--edge);
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .25s ease,opacity .2s ease;
    pointer-events:none;
  }
  .nav-links.open{max-height:480px;opacity:1;pointer-events:auto}

  .nav-links .chip{
    width:100%;justify-content:flex-start;
    background:none;border:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-radius:0;border-bottom:1px solid var(--edge);
    padding:14px 0;font-size:12px;
  }
  .nav-links .chip:last-child{border-bottom:none}
  .nav-links .nav-text-link{
    width:100%;padding:14px 0;font-size:13px;
    border-bottom:1px solid var(--edge);color:var(--bone-dim);
  }

  .nav-links .popwrap{width:100%}
  .nav-links .pop{
    position:static;display:block;width:100%;
    background:none;border:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    padding:0 0 10px;margin:0;
  }
  .nav-links .pop.hidden{display:none}
  .nav-links .pop h4{
    margin:6px 0 8px;font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--bone-faint);font-weight:400;
  }
  .nav-links .pop button{
    display:block;width:100%;text-align:left;
    background:none;border:none;color:var(--bone-dim);
    padding:9px 0;font-size:13px;cursor:pointer;
  }
  .nav-links .pop .note{
    font-size:11px;color:var(--bone-faint);line-height:1.5;
    padding-top:4px;
  }
}

/* ---------- borrowed identity bar ---------- */
.borrowbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding:10px var(--s5);flex-wrap:wrap;
  background:var(--accent-wash);
  border-bottom:1px solid var(--edge);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  font-size:var(--t-sm);
}
.borrowbar strong{font-weight:600}
.borrowbar .mono{color:var(--bone-dim)}
.borrowbar button{
  border:1px solid var(--edge-lift);border-radius:999px;
  padding:5px 14px;font-size:var(--t-xs);letter-spacing:.06em;
  text-transform:uppercase;transition:background .2s,border-color .2s;
}
.borrowbar button:hover{background:var(--glass-lift);border-color:var(--bone-dim)}

/* ---------- buttons ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--bone);color:var(--void);
  padding:14px 28px;border-radius:999px;
  font-size:var(--t-sm);font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn::before{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .55s ease;
}
.btn:hover::before{left:130%}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 34px rgba(0,0,0,.45),0 0 26px var(--accent-glow);
}
@media (prefers-reduced-motion:reduce){
  .btn::before{display:none}
}
.btn.ghost{
  background:var(--glass);color:var(--bone);
  border:1px solid var(--edge);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
}
.btn.ghost:hover{
  background:var(--glass-lift);border-color:var(--accent);
  color:var(--accent);transform:none;
  box-shadow:0 0 20px var(--accent-glow);
}
.btn.block{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;
  background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
}
.chip .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent);
}
.chip.action{transition:background .2s,border-color .2s}
.chip.action:hover{background:var(--glass-lift);border-color:var(--edge-lift)}

/* ---------- popover ---------- */
.popwrap{position:relative}
.pop{
  position:absolute;z-index:60;
  background:rgba(20,21,27,.86);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--edge);
  border-radius:var(--r);padding:var(--s2);
  min-width:264px;
  box-shadow:0 22px 60px rgba(0,0,0,.55);
  transform-origin:top;
  animation:popIn .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes popIn{
  from{opacity:0;transform:translateY(-6px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .pop{animation:none}
}
.pop h4{
  margin:8px 10px var(--s2);
  font-family:"Space Mono",monospace;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-faint);font-weight:400;
}
.pop button{
  display:block;width:100%;text-align:left;
  padding:11px 10px;border-radius:9px;
  font-size:14.5px;transition:background .16s;
}
.pop button:hover{background:var(--glass-lift)}
.pop .note{
  margin:var(--s2) 10px;font-size:var(--t-xs);
  color:var(--bone-faint);line-height:1.5;
}

/* ---------- product card ---------- */
.grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:20px 14px;padding:var(--s6) 0 var(--s8);
}
@media (min-width:901px){
  .grid{grid-template-columns:repeat(4,1fr);gap:30px 22px}
}
.card{display:flex;flex-direction:column;gap:12px}
.thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.thumb{
  position:relative;aspect-ratio:4/5;
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--edge);
  background:
    repeating-linear-gradient(58deg,rgba(255,255,255,.045) 0 1px,transparent 1px 6px),
    linear-gradient(155deg,var(--accent-wash),rgba(255,255,255,.02));
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  display:flex;align-items:flex-end;padding:var(--s3);
  transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s,box-shadow .3s;
}
.card:hover .thumb{
  transform:translateY(-5px);
  border-color:var(--edge-lift);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.thumb .tag{
  font-family:"Space Mono",monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;
  background:rgba(11,12,16,.68);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid var(--edge);
  border-radius:5px;padding:4px 8px;color:var(--bone-dim);
}
.card.sold .thumb{filter:grayscale(1) brightness(.62)}
.card.sold .thumb::after{
  content:"SOLD";position:absolute;inset:0;
  display:grid;place-items:center;
  font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:20px;letter-spacing:.34em;text-indent:.34em;
  color:var(--bone);
}
.card h3{
  font-family:"Manrope",sans-serif;
  font-weight:500;font-size:15px;line-height:1.35;letter-spacing:0;
}
.card .price{font-weight:600;font-size:15px;color:var(--bone)}
.card .spec{color:var(--bone-faint)}

/* ---------- condition grade ---------- */
.grade{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--accent-wash);color:var(--bone);
  border:1px solid var(--edge);
  border-radius:7px;padding:5px 11px;
  font-weight:500;font-size:var(--t-sm);
}

/* ---------- spec table ---------- */
.specs{border-top:1px solid var(--edge);margin-bottom:var(--s5)}
.specs .row{
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--edge);
}
.specs .row span:first-child{
  color:var(--bone-faint);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
}

/* ---------- notice ---------- */
.notice{
  font-size:var(--t-sm);color:var(--bone-dim);line-height:1.6;
  padding:var(--s4);border-radius:var(--r);
  background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
}
.notice strong{color:var(--bone);font-weight:600}

/* ---------- form fields ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--s4)}
.field label{
  font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);
}
.field .hint{font-size:var(--t-xs);color:var(--bone-faint)}
.field input,.field select{
  font:inherit;color:var(--bone);
  padding:13px 15px;border-radius:11px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--edge);
}
.field input::placeholder{color:var(--bone-faint)}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash);
}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;
  transform:translateX(-50%) translateY(14px);
  background:rgba(20,21,27,.9);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--edge-lift);
  color:var(--bone);
  padding:13px 22px;border-radius:999px;
  font-size:14px;z-index:90;
  opacity:0;pointer-events:none;
  box-shadow:0 16px 44px rgba(0,0,0,.5);
  transition:opacity .3s,transform .3s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- empty state ---------- */
.empty{grid-column:1/-1;padding:56px 0;color:var(--bone-dim);max-width:46ch}
.empty h3{
  font-family:"Fraunces",Georgia,serif;
  font-size:27px;color:var(--bone);margin-bottom:12px;font-weight:500;
}
.empty p{margin:0 0 20px}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--edge);
  padding-top:var(--s6);padding-bottom:var(--s8);
  color:var(--bone-faint);font-size:var(--t-sm);
}
.foot nav{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:14px}
.foot nav a{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-dim);transition:color .2s;
}
.foot nav a:hover{color:var(--accent)}

/* ---------- product card, brand system ---------- */
.card-size{
  font-size:var(--t-sm);color:var(--bone-dim);margin-top:-4px;
}
.quickview-btn{
  position:absolute;top:52px;right:10px;transform:translateY(-6px);
  z-index:2;opacity:0;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:rgba(11,12,16,.65);border:1px solid var(--edge);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:#fff;cursor:pointer;
  transition:opacity .2s ease,transform .2s ease;
}
.quickview-btn svg{width:16px;height:16px}
.card:hover .quickview-btn{opacity:1;transform:translateY(0)}

.qv-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:95;
  opacity:0;transition:opacity .25s ease;
}
.qv-backdrop.show{opacity:1}
.qv-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-48%);
  width:min(680px,92vw);max-height:86vh;overflow-y:auto;
  background:rgba(14,15,20,.97);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--edge);border-radius:var(--r-lg);
  z-index:96;opacity:0;transition:opacity .25s ease,transform .25s ease;
}
.qv-modal.show{opacity:1;transform:translate(-50%,-50%)}
.qv-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--edge);
  background:var(--glass);color:var(--bone);font-size:18px;cursor:pointer;line-height:1;
}
.qv-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.qv-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--glass)}
.qv-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qv-info{padding:var(--s6) var(--s5)}
.qv-info h3{margin:0 0 8px;font-size:22px;font-weight:400}
.qv-price{font-size:19px;font-weight:600;font-family:"Space Mono",monospace;margin-bottom:16px}
.qv-size,.qv-status{color:var(--bone-dim);font-size:13.5px;margin:0 0 8px}
.qv-info .btn{margin-top:14px}
@media (max-width:640px){
  .qv-body{grid-template-columns:1fr}
  .qv-modal{max-height:90vh}
}
.card-status{
  font-family:"Space Mono",monospace;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-faint);
}

/* ---------- product page ---------- */
.item-status{
  font-family:"Space Mono",monospace;
  font-size:10.5px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--bone-faint);margin:0 0 var(--s3);
}
.available-size{
  display:flex;align-items:baseline;gap:var(--s4);
  padding:var(--s4) 0;border-top:1px solid var(--edge);
}
.available-size strong{
  font-family:"Fraunces",Georgia,serif;
  font-size:24px;font-weight:500;letter-spacing:.04em;
}
.condition-report{
  padding:var(--s4);border-radius:var(--r);
  background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  margin-bottom:var(--s5);
}
.cond-label{
  margin:10px 0 4px;
  font-family:"Fraunces",Georgia,serif;
  font-size:21px;font-weight:500;color:var(--accent);
}
.cond-note{margin:0;font-size:var(--t-sm);color:var(--bone-dim)}

/* ---------- footer ---------- */
.foot-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--s6);margin-bottom:var(--s7);
}
.foot-cols h5{
  margin:0 0 var(--s3);
  font-family:"Space Mono",monospace;font-weight:400;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone-faint);
}
.foot-cols a{
  display:block;padding:5px 0;font-size:14px;
  color:var(--bone-dim);transition:color .2s;
}
.foot-cols a:hover{color:var(--accent)}
.signature{
  text-align:center;margin:0;
  font-family:"Sacramento",cursive;
  font-size:clamp(30px,4vw,44px);
  letter-spacing:.01em;text-transform:none;
  color:var(--bone);
  line-height:1.1;
}
.signature span{
  display:inline-block;margin-top:8px;
  font-family:"Manrope",sans-serif;
  font-size:12px;letter-spacing:.04em;text-transform:none;
  color:var(--bone-faint);
}

/* ---------- always-there help ---------- */
.help-link{
  position:fixed;right:18px;bottom:18px;z-index:80;
  font-size:11.5px;letter-spacing:.1em;
  padding:10px 16px;border-radius:999px;
  background:rgba(22,18,15,.82);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--edge);
  color:var(--bone-dim);
  transition:color .2s,border-color .2s;
}
.help-link:hover{color:var(--bone);border-color:var(--edge-lift)}
@media (max-width:640px){
  .help-link{right:12px;bottom:12px;font-size:11px;padding:9px 13px}
}

/* ===========================================================
   LIQUID GLASS — shared by identity cards and the cycling pane
   =========================================================== */
/* ---------------------------------------------------------
   Liquid glass.

   Three layers, and the order is the whole point:
     1. .glass-tint   a pool of the identity's colour, moving
     2. .glass-pane  a surface that BLURS layer 1
     3. the content, sharp, above both   the words, sharp, above both

   The tint sits *under* the glass rather than behind the card, so
   the colour arrives diffused and refracted instead of switching on.
   It reads as liquid because it genuinely is being blurred by the
   surface above it, not faked with a soft gradient.
   --------------------------------------------------------- */
/* 1 — the pool */
.glass-tint{
  position:absolute;inset:-30%;z-index:0;
  opacity:.30;
  background:
    radial-gradient(42% 46% at 28% 24%, var(--card) 0%, transparent 62%),
    radial-gradient(38% 40% at 76% 78%, var(--card) 0%, transparent 66%);
  transition:opacity .65s ease;
  animation:pool 19s ease-in-out infinite alternate;
}
@keyframes pool{
  0%  {transform:translate3d(0,0,0)     scale(1)    rotate(0deg)}
  50% {transform:translate3d(6%,-5%,0)  scale(1.14) rotate(4deg)}
  100%{transform:translate3d(-5%,4%,0)  scale(1.05) rotate(-3deg)}
}

/* 2 — the surface doing the refracting */
.glass-pane{
  position:absolute;inset:0;z-index:1;
  border-radius:inherit;
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  background:linear-gradient(152deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.035) 42%,
    rgba(255,255,255,.015) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 1px 0 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.34),
    inset 0 0 34px rgba(255,255,255,.045);
  border:1px solid var(--edge);
  transition:box-shadow .55s ease,border-color .55s ease;
}
/* one soft specular streak, not a shine sweep */
.glass-pane::after{
  content:"";position:absolute;
  top:-40%;left:-18%;width:56%;height:180%;
  border-radius:50%;
  background:linear-gradient(102deg,rgba(255,255,255,.14),transparent 62%);
  filter:blur(16px);opacity:.55;
  transition:opacity .55s ease,transform .8s cubic-bezier(.22,.61,.36,1);
}

/* on approach the pool swells and the edges catch more light */
.idcard:hover,.idcard:focus-visible{transform:translateY(-5px)}
.idcard:hover .glass-tint,
.idcard:focus-visible .glass-tint{opacity:.92}
.idcard:hover .glass-pane,
.idcard:focus-visible .glass-pane{
  border-color:rgba(255,255,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 1px 0 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.40),
    inset 0 0 46px rgba(255,255,255,.075),
    0 20px 50px rgba(0,0,0,.42);
}
.idcard:hover .glass-pane::after,
.idcard:focus-visible .glass-pane::after{opacity:.85;transform:translateX(16%)}

@supports not (backdrop-filter:blur(1px)){
  .glass-pane{background:rgba(18,15,13,.66)}
}
@media (prefers-reduced-motion:reduce){
  .glass-tint{animation:none}
}


/* ---------- previewing an identity you haven't claimed ---------- */
.preview-bar{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  margin-top:var(--s6);padding:var(--s4) var(--s5);
  border-radius:var(--r);
  background:var(--accent-wash);
  border:1px solid var(--edge);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  font-size:var(--t-sm);color:var(--bone-dim);
}
.preview-bar a{
  color:var(--bone);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;
}

/* ===========================================================
   YOUR SELECTION — the panel
   =========================================================== */
.sel-scrim{
  position:fixed;inset:0;z-index:100;
  background:rgba(6,5,4,.55);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
.sel-scrim.open{opacity:1;pointer-events:auto}

.sel-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(520px,100%);
  overflow:hidden;isolation:isolate;
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  --card:var(--accent);
}
.sel-scrim.open .sel-panel{transform:translateX(0)}
.sel-panel .glass-tint{opacity:.30}
.sel-panel .glass-pane{border-radius:var(--r-lg) 0 0 var(--r-lg)}

.sel-body{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;
  padding:var(--s6) var(--s5) var(--s5);
}
.sel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4)}
.sel-head h2{
  font-size:29px;font-weight:400;
  letter-spacing:.05em;text-transform:uppercase;margin-top:8px;
}
.sel-close{
  font-size:26px;line-height:1;color:var(--bone-dim);
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--edge);flex-shrink:0;
  transition:color .2s,border-color .2s;
}
.sel-close:hover{color:var(--bone);border-color:var(--edge-lift)}

.sel-items{flex:1;overflow-y:auto;margin:var(--s5) 0;padding-right:4px}
.sel-item{
  display:flex;gap:var(--s4);align-items:flex-start;
  padding:var(--s4) 0;border-bottom:1px solid var(--edge);
}
.sel-thumb{
  width:62px;aspect-ratio:4/5;flex-shrink:0;
  border-radius:8px;border:1px solid var(--edge);
  background:
    repeating-linear-gradient(58deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),
    linear-gradient(155deg,var(--accent-wash),rgba(255,255,255,.02));
}
.sel-meta{flex:1;min-width:0}
.sel-meta h3{font-family:"Manrope",sans-serif;font-size:15px;font-weight:500;letter-spacing:0}
.sel-size{margin:3px 0 0;font-size:13px;color:var(--bone-dim)}
.sel-status{
  margin:3px 0 0;font-family:"Space Mono",monospace;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint);
}
.sel-right{text-align:right;flex-shrink:0}
.sel-price{display:block;font-weight:600;font-size:15px}
.sel-remove{
  margin-top:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-faint);border-bottom:1px solid var(--edge);padding-bottom:2px;
}
.sel-remove:hover{color:var(--bone)}

.sel-sums{border-top:1px solid var(--edge);padding-top:var(--s4)}
.sel-sums .row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;color:var(--bone-dim)}
.sel-sums .row.total{
  color:var(--bone);font-weight:600;font-size:16px;
  border-top:1px solid var(--edge);margin-top:8px;padding-top:12px;
}
.sel-note{font-size:12px;color:var(--bone-faint);line-height:1.55;margin:var(--s3) 0 var(--s4)}
.sel-note.quiet{margin:var(--s3) 0 0;text-align:center}
.sel-empty{padding:var(--s7) 0;color:var(--bone-dim)}
.sel-empty h3{
  font-family:"Fraunces",Georgia,serif;font-size:24px;
  color:var(--bone);margin-bottom:10px;font-weight:400;
}
.sel-empty p{margin:0 0 var(--s5)}

@media (max-width:560px){
  .sel-panel{width:100%;border-radius:0}
  .sel-panel .glass-pane{border-radius:0}
  .sel-body{padding:var(--s5) var(--s4)}
}
@media (prefers-reduced-motion:reduce){
  .sel-panel{transition:none}
}
.items-tab.filled{border-color:var(--accent);color:var(--accent)}