
/* Skate Exchange: search first, listings immediately, optional calibration. */
.exchange-search-strip{
  position:relative;
  z-index:6;
  border-bottom:1px solid var(--line);
  background:rgba(9,10,11,.96);
  box-shadow:0 10px 26px rgba(0,0,0,.2);
}
.exchange-search-strip .wrap{padding-block:.8rem}
.exchange-search-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:.6rem;
  align-items:center;
}
.exchange-search-bar input[type="search"]{
  width:100%;
  height:48px;
  border:1px solid #39434b;
  background:#080a0c;
  color:#eef4f7;
  padding:.75rem .9rem;
  font:inherit;
  box-shadow:inset 0 1px 8px rgba(0,0,0,.48);
}
.exchange-search-bar input[type="search"]:focus{
  outline:none;
  border-color:var(--electric);
  box-shadow:0 0 0 2px rgba(139,216,247,.1),inset 0 1px 8px rgba(0,0,0,.5);
}
.exchange-search-submit,.exchange-calibrate-toggle{min-height:48px}
.exchange-feed-section{padding-top:1rem !important}
.exchange-results-meta{
  display:flex;
  gap:.45rem;
  align-items:baseline;
  margin:0 0 .8rem;
  color:#9ea8af;
  font-size:.82rem;
}
.exchange-results-meta strong{color:#fff}
.exchange-results-layout{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:1rem;
  align-items:start;
}
.exchange-calibrate-panel{
  position:sticky;
  top:92px;
  border:1px solid #2c3339;
  background:#101317;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  padding:.9rem;
}
.exchange-calibrate-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  padding-bottom:.65rem;
  margin-bottom:.7rem;
  border-bottom:1px solid #252b30;
}
.exchange-calibrate-head h2{
  margin:.1rem 0 0;
  font-size:1rem;
  letter-spacing:.02em;
}
.exchange-calibrate-close{display:none}
.exchange-calibrate-form{display:grid;gap:.7rem}
.exchange-calibrate-form label{display:grid;gap:.28rem}
.exchange-calibrate-form label>span{
  color:#aab2b8;
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.exchange-calibrate-form input,
.exchange-calibrate-form select{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  height:42px;
  border:1px solid #39434b;
  background:#080a0c;
  color:#eef4f7;
  padding:.62rem .7rem;
  font:inherit;
}
.exchange-calibrate-location{
  display:grid;
  grid-template-columns:minmax(0,1fr) 64px;
  gap:.5rem;
}
.exchange-calibrate-actions{
  display:grid;
  gap:.45rem;
  margin-top:.15rem;
}
.exchange-calibrate-actions .btn{
  width:100%;
  min-height:42px;
  padding:.6rem .7rem;
  text-align:center;
}
.exchange-results{min-width:0}
.exchange-results .exchange-masonry{columns:3 245px}

@media(max-width:900px){
  .exchange-results-layout{grid-template-columns:200px minmax(0,1fr)}
  .exchange-results .exchange-masonry{columns:2 220px}
}

@media(max-width:700px){
  .exchange-search-strip .wrap{padding-block:.6rem}
  .exchange-search-bar{
    grid-template-columns:minmax(0,1fr) auto;
    gap:.45rem;
  }
  .exchange-search-bar input[type="search"]{
    grid-column:1/-1;
    height:44px;
  }
  .exchange-search-submit,
  .exchange-calibrate-toggle{
    min-height:40px;
    padding:.55rem .8rem;
  }
  .exchange-search-submit{width:100%}
  .exchange-calibrate-toggle{width:100%}

  .exchange-feed-section{padding-top:.7rem !important}
  .exchange-results-layout{display:block}
  .exchange-results .exchange-masonry{columns:2 145px;column-gap:.65rem}

  .exchange-calibrate-panel{
    position:fixed;
    z-index:1002;
    top:0;
    right:0;
    bottom:0;
    width:min(88vw,360px);
    max-width:360px;
    overflow:auto;
    padding:1rem;
    transform:translateX(105%);
    transition:transform .2s ease;
    border:0;
    border-left:1px solid #333b43;
    box-shadow:-18px 0 48px rgba(0,0,0,.55);
  }
  .exchange-calibrate-panel.is-open{transform:translateX(0)}
  .exchange-calibrate-close{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid #39434b;
    background:#090b0d;
    color:#fff;
    font-size:1.55rem;
    line-height:1;
    cursor:pointer;
  }
  .exchange-calibrate-backdrop{
    position:fixed;
    z-index:1001;
    inset:0;
    background:rgba(0,0,0,.68);
  }
  body.exchange-calibrate-open{overflow:hidden}
}


/* ==========================================================
   Skate Exchange — Frankenskates Principles Palette v3.2
   Teal / Purple / Yellow / Blue / Pink
   ========================================================== */
.exchange-page{
  --x-teal:#22e7d0;
  --x-purple:#b84cff;
  --x-yellow:#ffe12f;
  --x-blue:#29b9ff;
  --x-pink:#ff3ca6;
  --x-panel:#0a0c0f;
  --x-line:rgba(255,255,255,.13);
  background:
    radial-gradient(circle at 12% 8%,rgba(34,231,208,.045),transparent 28%),
    radial-gradient(circle at 88% 24%,rgba(184,76,255,.04),transparent 30%),
    #08090a;
}

/* Hero / page identity */
.exchange-page .fs-exchange-header{
  border-bottom:1px solid var(--x-teal);
  box-shadow:0 12px 35px rgba(0,0,0,.3),0 8px 30px rgba(34,231,208,.045);
}
.exchange-page .fs-exchange-header .eyebrow{
  color:var(--x-pink);
  text-shadow:0 0 12px rgba(255,60,166,.35);
}
.exchange-page .fs-exchange-header h1{
  text-shadow:
    3px 3px 0 rgba(184,76,255,.24),
    0 0 22px rgba(34,231,208,.12);
}

/* Search console */
.exchange-page .exchange-search-strip{
  border-bottom:1px solid var(--x-purple);
  background:
    linear-gradient(90deg,rgba(34,231,208,.035),rgba(184,76,255,.035),rgba(255,60,166,.025)),
    rgba(9,10,11,.97);
}
.exchange-page .exchange-search-bar input[type="search"]{
  border-color:rgba(34,231,208,.44);
  background:#07090b;
}
.exchange-page .exchange-search-bar input[type="search"]:focus{
  border-color:var(--x-teal);
  box-shadow:
    0 0 0 1px var(--x-teal),
    0 0 20px rgba(34,231,208,.18),
    inset 0 1px 8px rgba(0,0,0,.55);
}
.exchange-page .exchange-search-submit{
  border-color:var(--x-teal)!important;
  box-shadow:0 0 16px rgba(34,231,208,.13);
}
.exchange-page .exchange-calibrate-toggle{
  border-color:rgba(184,76,255,.72)!important;
  box-shadow:0 0 16px rgba(184,76,255,.12);
}

/* Calibration drawer */
.exchange-page .exchange-calibrate-panel{
  border-color:rgba(184,76,255,.55);
  background:
    linear-gradient(165deg,rgba(184,76,255,.05),transparent 30%),
    #0d1014;
  box-shadow:0 15px 35px rgba(0,0,0,.38),0 0 22px rgba(184,76,255,.08);
}
.exchange-page .exchange-calibrate-head{
  border-bottom-color:rgba(34,231,208,.38);
}
.exchange-page .exchange-calibrate-head .eyebrow{
  color:var(--x-purple);
  text-shadow:0 0 10px rgba(184,76,255,.35);
}
.exchange-page .exchange-calibrate-head h2{
  color:#fff;
}
.exchange-page .exchange-calibrate-form label>span{
  color:#cbd0d6;
}
.exchange-page .exchange-calibrate-form input,
.exchange-page .exchange-calibrate-form select{
  border-color:rgba(41,185,255,.32);
  background:#07090b;
}
.exchange-page .exchange-calibrate-form input:focus,
.exchange-page .exchange-calibrate-form select:focus{
  border-color:var(--x-blue)!important;
  box-shadow:0 0 0 1px var(--x-blue),0 0 15px rgba(41,185,255,.16)!important;
}
.exchange-page .exchange-calibrate-close{
  border-color:var(--x-pink);
  color:var(--x-pink);
}

/* Results count */
.exchange-page .exchange-results-meta{
  padding:.35rem 0 .55rem;
  border-bottom:1px solid rgba(255,225,47,.22);
}
.exchange-page .exchange-results-meta strong{
  color:var(--x-yellow);
  text-shadow:0 0 10px rgba(255,225,47,.18);
}

/* Five-color listing rhythm */
.exchange-page .exchange-card{
  --exchange-accent:var(--x-teal);
  --exchange-accent-rgb:34,231,208;
  position:relative;
  border:1px solid rgba(var(--exchange-accent-rgb),.48)!important;
  background:
    radial-gradient(circle at 90% 8%,rgba(var(--exchange-accent-rgb),.055),transparent 32%),
    #101317;
  box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 20px rgba(var(--exchange-accent-rgb),.055);
}
.exchange-page .exchange-card:nth-child(5n+1){
  --exchange-accent:var(--x-teal);--exchange-accent-rgb:34,231,208;
}
.exchange-page .exchange-card:nth-child(5n+2){
  --exchange-accent:var(--x-purple);--exchange-accent-rgb:184,76,255;
}
.exchange-page .exchange-card:nth-child(5n+3){
  --exchange-accent:var(--x-yellow);--exchange-accent-rgb:255,225,47;
}
.exchange-page .exchange-card:nth-child(5n+4){
  --exchange-accent:var(--x-blue);--exchange-accent-rgb:41,185,255;
}
.exchange-page .exchange-card:nth-child(5n+5){
  --exchange-accent:var(--x-pink);--exchange-accent-rgb:255,60,166;
}
.exchange-page .exchange-card:before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;left:0;right:0;
  height:2px;
  background:var(--exchange-accent);
  box-shadow:0 0 12px rgba(var(--exchange-accent-rgb),.75);
  pointer-events:none;
}
.exchange-page .exchange-card:hover{
  transform:translateY(-4px);
  border-color:var(--exchange-accent)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.4),0 0 25px rgba(var(--exchange-accent-rgb),.18);
}
.exchange-page .exchange-thumb{
  border-bottom:2px solid rgba(var(--exchange-accent-rgb),.72);
}
.exchange-page .exchange-thumb--placeholder{
  background:
    radial-gradient(circle at 50% 35%,rgba(var(--exchange-accent-rgb),.14),transparent 42%),
    #090b0d;
}
.exchange-page .exchange-thumb--placeholder span{
  color:rgba(var(--exchange-accent-rgb),.32);
}

/* Listing typography: same energetic heading family, body remains clean. */
.exchange-page .exchange-card h2{
  font-family:'Bangers','Oswald','Arial Narrow',sans-serif!important;
  font-size:clamp(1.16rem,1.65vw,1.42rem)!important;
  line-height:1.02!important;
  letter-spacing:.025em!important;
  margin:.18rem 0 .58rem!important;
}
.exchange-page .exchange-card h2 a:hover{
  color:var(--exchange-accent)!important;
  text-shadow:0 0 10px rgba(var(--exchange-accent-rgb),.28);
}
.exchange-page .exchange-card-link{
  color:var(--exchange-accent)!important;
}
.exchange-page .exchange-meta{
  border-top-color:rgba(var(--exchange-accent-rgb),.28)!important;
}
.exchange-page .exchange-meta strong{
  color:var(--exchange-accent);
}

/* Badges stay semantic but are restricted to the approved palette. */
.exchange-page .exchange-badge{
  background:#0c0f12;
  border-color:rgba(34,231,208,.36);
}
.exchange-page .exchange-badge.sponsored,
.exchange-page .exchange-badge--trade,
.exchange-page .exchange-badge--handmade{
  border-color:rgba(184,76,255,.66);color:#dfbaff;
}
.exchange-page .exchange-badge.featured,
.exchange-page .exchange-badge--wanted,
.exchange-page .exchange-badge--factory_seconds{
  border-color:rgba(255,225,47,.62);color:#fff2a0;
}
.exchange-page .exchange-badge.dealer,
.exchange-page .exchange-badge--event{
  border-color:rgba(41,185,255,.62);color:#b4eaff;
}
.exchange-page .exchange-badge--missed_connection,
.exchange-page .exchange-badge--rink_notice{
  border-color:rgba(255,60,166,.62);color:#ffb8df;
}
.exchange-page .exchange-badge--gear,
.exchange-page .exchange-badge--lesson,
.exchange-page .exchange-badge--dealer_find{
  border-color:rgba(34,231,208,.58);color:#bafbf4;
}

/* Buttons / empty states */
.exchange-page .empty-state{
  border-color:rgba(255,225,47,.5)!important;
  box-shadow:0 0 24px rgba(255,225,47,.07);
}
.exchange-page .form-success{
  border-left:3px solid var(--x-teal);
  background:rgba(34,231,208,.055);
}

/* Mobile drawer keeps the same palette */
@media(max-width:700px){
  .exchange-page .exchange-calibrate-panel{
    border-left:2px solid var(--x-purple);
    box-shadow:-18px 0 48px rgba(0,0,0,.65),0 0 20px rgba(184,76,255,.12);
  }
}
