/* ===========================================================
   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-text, var(--bone))}
.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-text, var(--bone));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-text, var(--bone))}

/* ---------- 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-text, var(--bone));
}
.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-text, var(--bone))}
.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-text, var(--bone))}
.sel-thumb{position:relative;overflow:hidden}
.sel-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== cookie consent ===== */
.cookie-sheet{
  position:fixed;z-index:130;left:24px;bottom:24px;width:min(440px,calc(100vw - 48px));
  padding:22px 22px 20px;border-radius:22px;
  background:rgba(14,15,20,.97);border:1px solid var(--edge);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  transform:translateY(24px);opacity:0;pointer-events:none;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .3s ease;
}
.cookie-sheet.show{transform:none;opacity:1;pointer-events:auto}
.cookie-sheet h2{font-size:21px;font-weight:500;margin:0 0 8px}
.cookie-sheet p{font-size:13.5px;line-height:1.6;color:var(--bone-dim);margin:0 0 16px}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px}
.cookie-actions .btn{padding:11px 18px;font-size:12px;flex:1 1 auto}
.cookie-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--edge)}
.cookie-row b{display:block;font-size:14px;font-weight:600;margin-bottom:3px}
.cookie-row span{font-size:12.5px;line-height:1.5;color:var(--bone-dim)}
.cookie-prefs .cookie-actions{margin-top:14px}
.cookie-switch{position:relative;flex-shrink:0;width:46px;height:26px}
.cookie-switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cookie-switch i{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.14);transition:background .25s}
.cookie-switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--bone);transition:transform .25s}
.cookie-switch input:checked + i{background:var(--accent)}
.cookie-switch input:checked + i::after{transform:translateX(20px)}
.cookie-switch input:disabled{cursor:default}
.cookie-switch input:disabled + i{opacity:.55}
@media (max-width:640px){
  .cookie-sheet{left:0;right:0;bottom:0;width:100%;border-radius:22px 22px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom,0px))}
  .cookie-actions{flex-direction:column}
  .cookie-actions .btn{width:100%}
}

/* ===== header: search bar, icons, category strip, drawer ===== */
.hdr-inner{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);padding:14px 0}
.hdr-inner .brand{flex-shrink:0}
#navToggle{display:none}
.hdr-search{
  flex:1;min-width:0;display:flex;align-items:center;gap:12px;
  padding:6px 6px 6px 18px;border-radius:999px;
  border:1px solid var(--edge);background:rgba(255,255,255,.05);
  color:var(--bone-faint);font:inherit;font-size:14px;text-align:left;cursor:text;
  transition:border-color .2s,background .2s;
}
.hdr-search:hover{border-color:var(--edge-lift);background:rgba(255,255,255,.07)}
.hdr-search svg{width:18px;height:18px;flex-shrink:0}
.hdr-search span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-search em{
  font-style:normal;font-size:12px;font-weight:600;letter-spacing:.06em;
  padding:10px 22px;border-radius:999px;background:var(--bone);color:#0A0807;flex-shrink:0;
}
.hdr-icons{display:flex;align-items:center;gap:4px;flex-shrink:0}
.hdr-ico{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:999px;border:1px solid transparent;
  background:none;color:var(--bone-dim);font:inherit;font-size:13.5px;cursor:pointer;
  transition:background .2s,color .2s;
}
.hdr-ico:hover{background:var(--glass);color:var(--bone)}
.hdr-ico svg{width:20px;height:20px;flex-shrink:0}

.cat-strip{border-top:1px solid var(--edge)}
.cat-strip-inner{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:6px;padding-bottom:6px}
.cat-strip-inner::-webkit-scrollbar{display:none}
.cat-link{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  padding:9px 14px;border-radius:999px;border:1px solid transparent;
  font-size:13.5px;color:var(--bone-dim);white-space:nowrap;
  transition:color .2s,background .2s,border-color .2s;
}
.cat-link svg{width:17px;height:17px}
.cat-link:hover{color:var(--bone);background:var(--glass)}
.cat-link.current{color:var(--bone);border-color:var(--edge);background:var(--glass-lift)}
.cat-spacer{flex:1}
.cat-switch{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  padding:8px 14px;border-radius:999px;border:1px solid var(--edge);
  background:var(--glass);color:var(--bone-dim);font:inherit;font-size:12.5px;cursor:pointer;
  transition:border-color .2s;
}
.cat-switch:hover{border-color:var(--edge-lift)}
.cat-switch b{color:var(--bone);font-weight:600}
.cat-switch span{color:var(--accent-text,var(--bone));text-decoration:underline;text-underline-offset:3px}

.hdr-drawer,.hdr-backdrop{display:none}
.hdr-drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:89;width:min(320px,86vw);
  overflow-y:auto;padding:18px 18px 28px;
  background:rgba(14,15,20,.98);border-right:1px solid var(--edge);
  transform:translateX(-102%);transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.hdr-drawer.open{transform:none}
.hdr-backdrop{
  position:fixed;inset:0;z-index:88;background:rgba(0,0,0,.65);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.hdr-drawer.open + .hdr-backdrop{opacity:1;pointer-events:auto}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.drawer-title{font-family:"Fraunces",Georgia,serif;font-size:22px}
.drawer-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--edge);background:var(--glass);color:var(--bone);font-size:20px;line-height:1;cursor:pointer}
.drawer-switch{
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:14px 16px;margin-bottom:14px;border-radius:16px;
  border:1px solid var(--edge);background:var(--glass);
  color:var(--bone-dim);font:inherit;font-size:13px;text-align:left;cursor:pointer;
}
.drawer-switch b{color:var(--bone);font-size:16px;font-weight:600}
.drawer-switch span{color:var(--accent-text,var(--bone));font-size:12.5px}
.drawer-links a{display:block;padding:13px 6px;border-bottom:1px solid var(--edge);font-size:15px;color:var(--bone-dim)}
.drawer-links a:hover{color:var(--bone)}
.drawer-borrow{margin-top:20px}
.drawer-borrow h4{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint);margin:0 0 6px;font-weight:400}
.drawer-borrow button{display:block;width:100%;text-align:left;padding:11px 14px;margin-top:6px;border-radius:12px;border:1px solid var(--edge);background:var(--glass);color:var(--bone-dim);font:inherit;font-size:13.5px;cursor:pointer}

@media (max-width:860px){
  .hdr-inner{flex-wrap:wrap;gap:10px 12px;padding:10px 0 12px}
  #navToggle{display:inline-flex;order:1;position:relative;flex-shrink:0}
  .hdr-inner .brand{order:2}
  .hdr-icons{order:3;margin-left:auto;gap:2px}
  .hdr-search{order:4;flex:1 1 100%;padding:11px 16px}
  .hdr-search em{display:none}
  .hdr-ico{padding:8px}
  .hdr-ico-label{display:none}
  .hdr-ico .cart-badge{position:absolute;top:0;right:-2px}
  .hdr-icons .popwrap{display:none}
  .cat-strip{display:none}
  .hdr-drawer,.hdr-backdrop{display:block}
}

/* ===== who are you shopping for ===== */
.sf-backdrop{position:fixed;inset:0;z-index:139;background:rgba(0,0,0,.72);opacity:0;transition:opacity .3s ease}
.sf-backdrop.show{opacity:1}
.sf-modal{
  position:fixed;z-index:140;left:50%;top:50%;width:min(460px,calc(100vw - 40px));
  transform:translate(-50%,-46%);opacity:0;padding:34px 30px 26px;border-radius:26px;
  background:rgba(14,15,20,.97);border:1px solid var(--edge);
  box-shadow:0 30px 80px rgba(0,0,0,.6);text-align:center;
  transition:opacity .3s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.sf-modal.show{opacity:1;transform:translate(-50%,-50%)}
.sf-modal h2{font-size:clamp(24px,5vw,30px);font-weight:500;margin:0 0 10px}
.sf-modal p{font-size:14px;line-height:1.6;color:var(--bone-dim);margin:0 0 22px}
.sf-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.sf-choice{
  padding:22px 10px;border-radius:18px;border:1px solid var(--edge);background:var(--glass);
  color:var(--bone);font-family:"Fraunces",Georgia,serif;font-size:22px;cursor:pointer;
  transition:transform .25s,border-color .25s,background .25s;
}
.sf-choice:hover{transform:translateY(-3px);border-color:var(--accent);background:var(--glass-lift)}
.sf-skip{background:none;border:none;color:var(--bone-faint);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer}

/* ===== header strip: switch stays visible ===== */
.cat-strip-inner{overflow:visible;gap:14px}
.cat-scroll{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-link{padding:9px 11px}
.cat-switch{flex-shrink:0;white-space:nowrap}

/* ===== mobile menu rows ===== */
.drawer-head{justify-content:flex-start;gap:16px}
.drawer-logo{height:34px;width:auto;display:block}
.drawer-row{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:15px 4px;border:none;border-bottom:1px solid var(--edge);
  background:none;color:var(--bone);font:inherit;font-size:15.5px;text-align:left;cursor:pointer;
}
.drawer-row svg{width:22px;height:22px;flex-shrink:0;color:var(--bone-dim)}
.drawer-row.top{justify-content:space-between;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim)}
.drawer-row.top svg{width:18px;height:18px}
.drawer-count{
  margin-left:auto;font-style:normal;font-size:11px;font-weight:600;
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
}
.drawer-label{
  display:flex;align-items:center;justify-content:space-between;
  margin:20px 0 4px;padding:0 4px;
  font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-faint);
}
.drawer-label a{color:var(--accent-text,var(--bone));letter-spacing:.08em;font-family:inherit}
.hdr-drawer{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}

/* header v2: logo left, icons right, hamburger last */
@media (max-width:760px){
  .hdr-inner .brand{order:1}
  .hdr-icons{order:2;margin-left:auto}
  #navToggle{order:3}
  .hdr-icons a[href="./wishlist.html"]{display:none}
  #selectionBtn{order:1}
  .hdr-icons a[href="./account.html"]{order:2}
  .hdr-drawer{left:auto;right:0;transform:translateX(102%);border-right:0;border-left:1px solid var(--edge)}
  .hdr-drawer.open{transform:none}
  .drawer-head{flex-direction:row-reverse}
}

/* sf-modal v2: identity colour flow */
@supports (color: color-mix(in srgb, red 50%, transparent)){
  .sf-backdrop{background:radial-gradient(70% 60% at 50% 50%, color-mix(in srgb, var(--accent) 20%, rgba(0,0,0,.72)), rgba(0,0,0,.8))}
  .sf-modal{
    isolation:isolate;overflow:hidden;
    border-color:color-mix(in srgb, var(--accent) 45%, var(--edge));
    box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 70px var(--accent-glow);
  }
  .sf-modal::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(90% 70% at 15% 0%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 62%),
      radial-gradient(80% 70% at 90% 100%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 62%);
  }
  .sf-choice{border-color:color-mix(in srgb, var(--accent) 38%, var(--edge))}
  .sf-choice:hover{box-shadow:0 0 30px var(--accent-glow)}
}

/* ---------- mobile header: even gutters, three matching buttons ---------- */
@media (max-width:860px){
  .hdr-inner{padding:10px var(--s5) 12px;gap:10px 8px}
  .hdr-icons{gap:8px}
  #navToggle,.hdr-icons .hdr-ico{
    width:42px;height:42px;padding:0;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.1);
    color:var(--bone);border-radius:999px;
  }
  .hdr-icons .hdr-ico svg{width:21px;height:21px}
  #navToggle span{width:18px;height:2px;background:var(--bone)}
  #navToggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #navToggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hdr-icons .hdr-ico:hover,#navToggle:hover{background:rgba(255,255,255,.18)}
  .hdr-ico .cart-badge{top:-3px;right:-3px}
}
/* seller attribution on cards */
.card-by{font-size:12px;color:var(--bone-faint);margin-top:2px;letter-spacing:.02em}