/* JewShop demo — a miniature of the tablet app.
   The screen re-points the semantic roles the same way .surface-light does in
   tokens.css, because JewShop itself is a light-surface app. Keeping it in the
   token vocabulary means the demo chrome and the real product cannot drift. */

.js-demo{ margin-bottom: clamp(44px, 6vw, 72px); }

.js-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin-bottom: 18px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-pill);
  width: fit-content;
  max-width: 100%;
  background: var(--surface-raised);
}
.js-tabs button{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--on-surface-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s var(--s-ease), color .2s var(--s-ease);
}
.js-tabs button:hover{ color: var(--guidance); }
.js-tabs button.is-on{ background: var(--primary); color: var(--on-primary); }

.js-badge{
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.js-tabs button.is-on .js-badge{ background: var(--n-900); color: var(--assay-hi); }

/* ---------- tablet shell ---------- */

.js-tablet{
  background: var(--n-800);
  border: 1px solid var(--n-600);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
}

.js-screen{
  --surface: var(--n-050);
  --surface-raised: #FFFFFF;
  --outline: #E2DCD1;
  --on-surface: var(--n-900);
  --on-surface-muted: var(--muted);
  --primary: var(--assay-lo);
  --on-primary: var(--n-050);
  background: var(--surface);
  color: var(--on-surface);
  border-radius: 10px;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

.js-bar{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 16px;
  background: var(--n-900);
  color: var(--n-100);
}
.js-brand{ font-family: var(--s-display); font-size: 19px; font-weight: 600; }
.js-chrome-tab{
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--assay-hi);
}

.js-pane{ flex: 1; }

/* ---------- browse ---------- */

/* The band image is cut to exactly this ratio, so `cover` never crops it a
   second time and pushes the face out of frame. */
.js-hero{ position: relative; aspect-ratio: 1100 / 330; overflow: hidden; }
.js-hero img{ width: 100%; height: 100%; object-fit: cover; }
/* Keep the overlaid line legible wherever the crop happens to be light. */
.js-hero::after{
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
  pointer-events: none;
}
.js-hero p{
  position: absolute;
  z-index: 1;
  left: 18px;
  bottom: 14px;
  margin: 0;
  font-family: var(--s-display);
  font-size: clamp(20px, 2.6vw, 30px);
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}

.js-sec{
  margin: 0;
  padding: 16px 16px 8px;
  font-size: var(--text-section);
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--primary);
}

.js-cats{ display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px; }
.js-cats button{
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  padding: 8px 15px;
  font: inherit;
  font-size: 13px;
  color: var(--on-surface-muted);
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color .18s var(--s-ease), color .18s var(--s-ease),
              background-color .18s var(--s-ease);
}
.js-cats button:hover{ border-color: var(--primary); color: var(--primary); }
.js-cats button.is-on{
  border-color: var(--n-900);
  background: var(--n-900);
  color: var(--n-050);
  font-weight: 600;
}

.js-sec--split{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.js-sec--split span{ font-weight: 500; letter-spacing: .04em; color: var(--on-surface-muted); }

.js-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  padding: 0 16px 18px;
}
/* Tiles are full-bleed branded creatives, not cutouts on white — the image
   runs edge to edge and the label sits on the card below it. */
.js-card{
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: 0;
  overflow: hidden;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--s-ease), transform .2s var(--s-ease),
              box-shadow .2s var(--s-ease);
}
.js-card:hover{
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .5);
}
.js-card img{ width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.js-card b{
  display: block;
  margin: 9px 10px 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--on-surface);
}
.js-card i{
  display: block;
  margin: 1px 10px 10px;
  font-style: normal;
  font-size: 12px;
  color: var(--on-surface-muted);
}

/* ---------- the piece ---------- */

.js-pane--piece{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  padding: 18px 16px;
}
.js-pane--piece[hidden]{ display: none; }

.js-stage{
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  min-height: 300px;
}
.js-stage img{ width: 100%; max-height: 420px; object-fit: contain; }

.js-side{ display: flex; flex-direction: column; }

.js-tag{
  display: inline-block;
  align-self: flex-start;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  margin: 0;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--primary);
}
.js-detail h4{
  font-family: var(--s-display);
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 10px 0 8px;
}
.js-desc{ font-size: 14px; color: var(--on-surface-muted); }

.js-specs{ margin: 16px 0 0; }
.js-specs div{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--outline);
  font-size: 13px;
}
.js-specs dt{ color: var(--on-surface-muted); }
.js-specs dd{ margin: 0; font-weight: 600; text-align: right; }

.js-add{
  margin-top: 16px;
  width: 100%;
  min-height: var(--touch-min);
  border: 1px solid var(--n-900);
  border-radius: var(--radius-sm);
  background: var(--n-900);
  color: var(--n-050);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s var(--s-ease), border-color .2s var(--s-ease);
}
.js-add:hover,
.js-add.is-on{ background: var(--primary); border-color: var(--primary); color: var(--n-050); }

.js-thumbs{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 7px;
  margin-top: 16px;
}
.js-thumb{
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: 5px;
  font: inherit;
  cursor: pointer;
  transition: border-color .2s var(--s-ease);
}
.js-thumb:hover{ border-color: var(--primary); }
.js-thumb.is-on{ border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.js-thumb img{ width: 100%; height: 46px; object-fit: contain; }
.js-thumb span{
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--on-surface-muted);
}
.js-thumb.is-on span{ color: var(--primary); }
/* Which tier buys this view — the ladder, made concrete on real assets. */
.js-thumb em{
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--primary);
  opacity: .75;
}

/* ---------- my selection ---------- */

.js-pane--sel{ display: flex; flex-direction: column; padding: 18px 16px; }
.js-pane--sel[hidden]{ display: none; }

.js-sellist{ flex: 1; }
.js-selrow{
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: 9px 11px;
  margin-bottom: 9px;
}
.js-selrow img{
  width: 56px; height: 56px; flex: none;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.js-selrow div{ flex: 1; min-width: 0; }
.js-selrow b{ display: block; font-size: 14px; font-weight: 600; }
.js-selrow i{ display: block; font-style: normal; font-size: 12px; color: var(--on-surface-muted); }
.js-remove{
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--outline);
  border-radius: 50%;
  background: transparent;
  color: var(--on-surface-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.js-remove:hover{ border-color: var(--error); color: var(--error); }

.js-empty{
  padding: 34px 0;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--on-surface-muted);
}

.js-selfoot{ margin-top: auto; }
.js-seltot{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--n-900);
  padding: 13px 0 11px;
  font-size: var(--text-section);
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}
.js-seltot b{
  font-family: var(--s-display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-surface);
  font-variant-numeric: lining-nums;
}
.js-cta-row{
  background: var(--n-900);
  color: var(--n-050);
  border-radius: var(--radius-sm);
  padding: 13px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.js-note{ margin: 11px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--on-surface-muted); }

.js-caption{
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--on-surface-muted);
  max-width: var(--s-measure);
}

/* ---------- counter flow ---------- */

.js-flow{
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin: 0 0 clamp(36px, 5vw, 56px);
  padding: 0;
  background: var(--outline);
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.js-flow li{
  counter-increment: step;
  background: var(--surface-raised);
  padding: 22px 20px 24px;
  font-size: 14px;
  color: var(--on-surface-muted);
}
.js-flow li::before{
  content: '0' counter(step);
  display: block;
  margin-bottom: 12px;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 1.7px;
  color: var(--primary);
}
.js-flow b{
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
  color: var(--on-surface);
}

.js-notes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3.4vw, 44px);
}
.js-notes h3{ font-size: var(--s-d3); margin-bottom: 10px; }
.js-notes p{ font-size: 15px; color: var(--on-surface-muted); }
.js-notes > div{ border-top: 2px solid var(--primary); padding-top: 20px; }

@media (max-width: 800px){
  .js-pane--piece{ grid-template-columns: 1fr; }
  .js-stage{ min-height: 240px; }
  .js-stage img{ max-height: 300px; }
}

@media (max-width: 520px){
  .js-tabs{ width: 100%; justify-content: center; }
  .js-tabs button{ padding: 0 14px; font-size: 13px; }
  .js-tablet{ padding: 9px; border-radius: 16px; }
  .js-grid{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .js-card img{ aspect-ratio: 1; }
}