/* ==========================================================================
   PlanetDJ prototype — shared components (cart drawer, mega menu, toast)
   Color comes only from theme.css tokens, so both themes are covered.
   ========================================================================== */

/* ------------------------------------------------------------------ TOAST */
.pdj-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  z-index:120;max-width:min(90vw,460px);
  background:var(--card-2);color:var(--ink);
  border:1px solid var(--line-2);border-radius:12px;
  padding:13px 18px;font-size:13.5px;line-height:1.45;
  box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;
}
.pdj-toast.on{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------------------ CART DRAWER */
.pdj-scrim{
  position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:98;opacity:0;transition:opacity .28s;
}
.pdj-scrim.on{opacity:1}

.pdj-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:99;
  width:min(92vw,432px);display:flex;flex-direction:column;
  background:var(--bg-2);border-left:1px solid var(--line);
  box-shadow:-30px 0 70px -40px var(--shadow-heavy);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.pdj-drawer.on{transform:translateX(0)}

.pdj-drawer-hd{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 22px;border-bottom:1px solid var(--line);flex:none;
}
.pdj-drawer-hd h2{
  margin:0;font-family:var(--fd);font-size:15px;font-weight:600;
  letter-spacing:.02em;color:var(--ink);display:flex;align-items:center;gap:9px;
}
.pdj-drawer-n{
  min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--blue-wash);border:1px solid var(--blue-line);
  color:var(--blue-ink);font-family:var(--fm);font-size:11.5px;
  display:inline-flex;align-items:center;justify-content:center;
}
.pdj-x{
  width:36px;height:36px;flex:none;border-radius:9px;border:1px solid var(--line);
  background:transparent;color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:.16s;
}
.pdj-x:hover{color:var(--ink);border-color:var(--line-2);background:var(--hover-tint)}

.pdj-drawer-body{flex:1;overflow-y:auto;padding:8px 22px}

.pdj-empty{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:64px 10px;text-align:center;color:var(--ink-3);
}
.pdj-empty p{margin:0;font-size:14px}

.pdj-line{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line-3);
}
.pdj-line-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.pdj-line-name{font-size:13.6px;font-weight:600;color:var(--ink);line-height:1.35}
.pdj-line-meta{font-size:11.6px;color:var(--ink-3)}
.pdj-line-rm{
  align-self:flex-start;margin-top:2px;background:none;border:none;padding:0;
  font-size:11.6px;color:var(--ink-4);cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;
}
.pdj-line-rm:hover{color:var(--ink-2)}

.pdj-qty{
  display:inline-flex;align-items:center;gap:2px;
  border:1px solid var(--line);border-radius:9px;overflow:hidden;
}
.pdj-qty button{
  width:32px;height:32px;background:transparent;border:none;color:var(--ink-2);
  font-size:15px;cursor:pointer;transition:.14s;
}
.pdj-qty button:hover{background:var(--hover-tint);color:var(--ink)}
.pdj-qty span{
  min-width:28px;text-align:center;font-size:13px;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pdj-line-price{font-size:13.6px;font-weight:600;color:var(--ink);white-space:nowrap}

.pdj-drawer-ft{flex:none;padding:18px 22px 22px;border-top:1px solid var(--line);background:var(--card)}
.pdj-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-size:13px;color:var(--ink-2);padding:5px 0;
}
.pdj-row b{color:var(--ink);font-size:14.5px}
.pdj-row-vip{color:var(--gold)}
.pdj-row-vip b{color:var(--gold)}
.pdj-row-vip em{font-style:normal;font-size:11.4px;color:var(--ink-3);display:block}
.pdj-row-ship b{font-size:13px;font-weight:600}

.pdj-btn{
  display:flex;align-items:center;justify-content:center;
  height:46px;border-radius:11px;margin-top:10px;
  font-family:var(--fd);font-size:13.6px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:.16s;text-decoration:none;
}
.pdj-btn-pri{background:var(--blue-deep);color:var(--on-accent);border:1px solid var(--btn-hairline)}
.pdj-btn-pri:hover{filter:brightness(1.08)}
.pdj-btn-gho{background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}
.pdj-btn-gho:hover{color:var(--ink);border-color:var(--blue-line);background:var(--hover-tint)}
.pdj-fine{margin:12px 0 0;font-size:11.4px;line-height:1.5;color:var(--ink-3);text-align:center}

/* -------------------------------------------------------------- MEGA MENU */
/* The nav sizes to its content and never competes with search for space.
   Search is the flexible track, with a ceiling so it cannot eat the nav. */
nav.nav{display:flex;align-items:stretch;gap:2px;flex:0 1 auto;min-width:0}
header.site .search{flex:1 1 170px;max-width:340px}
.mm-root{position:relative;display:flex;align-items:stretch}
.mm-top{
  display:inline-flex;align-items:center;padding:0 12px;height:100%;
  font-family:var(--fd);font-size:13.2px;font-weight:500;letter-spacing:.005em;
  color:var(--ink-2);white-space:nowrap;border-radius:8px;transition:.16s;
}
.mm-top:hover,.mm-root.on .mm-top{color:var(--ink);background:var(--hover-tint)}
.mm-root.on .mm-top::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  background:var(--blue);border-radius:2px;
}
/* display:none, not visibility:hidden. A hidden-but-laid-out 520px panel on the
   last nav item still counts toward document scrollWidth, which reads as a
   horizontal overflow on every page at every viewport. */
.mm-panel{position:absolute;top:100%;left:-16px;z-index:70;padding-top:10px;display:none}
.mm-root.on .mm-panel{display:block;animation:mmIn .18s cubic-bezier(.2,.7,.3,1) both}
@keyframes mmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* Panels on the right-hand end of the nav open leftward so they never push
   the document wider than the viewport. */
.mm-root:nth-last-child(-n+3) .mm-panel{left:auto;right:-16px}
.mm-inner{
  display:flex;gap:34px;padding:24px 28px;
  background:var(--card);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:var(--shadow);min-width:520px;
}
.mm-col{min-width:150px}
.mm-col h4{
  margin:0 0 12px;font-family:var(--fd);font-size:9.6px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink-4);
}
.mm-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.mm-col a{
  display:block;padding:6px 8px;margin-left:-8px;border-radius:7px;
  font-size:13.2px;color:var(--ink-2);transition:.14s;
}
.mm-col a:hover{color:var(--ink);background:var(--hover-tint)}
.mm-feat{
  width:212px;flex:none;padding:16px 18px;border-radius:11px;
  background:var(--blue-wash);border:1px solid var(--blue-line);
  display:flex;flex-direction:column;gap:8px;
}
.mm-feat-k{
  font-family:var(--fd);font-size:9.6px;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--blue-ink);
}
.mm-feat p{margin:0;font-size:12.4px;line-height:1.5;color:var(--ink-2)}
.mm-feat a{
  margin-top:auto;font-family:var(--fd);font-size:12.4px;font-weight:600;
  color:var(--blue-ink);display:inline-flex;align-items:center;gap:6px;
}
.mm-feat a::after{content:"→";transition:transform .16s}
.mm-feat a:hover::after{transform:translateX(3px)}

/* The "More" group only exists when the full set cannot fit. Which items
   collapse is decided by PDJ.fitNav, which measures the real nav track.
   It cannot be a viewport media query: .wrap is capped at 1400px, so every
   viewport wider than that has the SAME space to fit 8 labels into, and the
   old max-width:1560px rule released all 8 into a container that never grew.
   Measured at 1920: the nav needed 897px of a 639px track and the last two
   labels painted 160px over the search field. */
.mm-more{display:none}

@media(max-width:1560px){
  .mm-top{padding:0 9px;font-size:12.6px}
  .mm-inner{min-width:440px;gap:24px;padding:20px 22px}
  .mm-feat{display:none}
}
@media(max-width:980px){
  nav.nav{display:none}
}

/* Mega menus are pointer affordances. On touch, the drawer nav is the path. */
@media(hover:none){
  .mm-panel{display:none}
}

/* ==========================================================================
   Header fit
   A flex child defaults to min-width:auto, so the search field refuses to
   shrink below its intrinsic width and shoves the icon cluster past the
   viewport. That was the 15px horizontal overflow on every page at 360.
   Selectors are scoped to header.site so they outrank the page-level rules
   that load after this file.
   ========================================================================== */
header.site .wrap{min-width:0}
header.site .search{min-width:0;flex:1 1 auto}
header.site .search input{min-width:0;width:100%}
header.site .lockup{min-width:0}
header.site .hdr-r{flex:none}

@media(min-width:981px){
  /* Where the two compete, the nav yields and the search holds its ground:
     a field under ~200px cannot hold a real query, and PDJ.fitNav drops nav
     items to pay for it. Without this floor the search collapses silently
     and the header looks fine while being useless. */
  header.site .search{min-width:200px}
}

@media(max-width:620px){
  /* Below this the field cannot hold a usable query and the icon row wins.
     Search moves into the drawer, where it has the whole width. */
  header.site .search{display:none}
  header.site .wrap{gap:12px;justify-content:space-between}
  header.site .tagline{display:none}
}

/* ==========================================================================
   Live readout + price-spread module
   Doubled class selectors (.readout.readout) so these outrank the page CSS
   that loads after this file, without resorting to !important.

   The old row let every cell stretch while the meter stayed a fixed ~104px,
   which is where the dead space came from. Now the spread cell is the only
   flexible track and the bars fill whatever width it gets.
   ========================================================================== */
.readout.readout{
  display:grid;
  grid-template-columns:auto auto minmax(180px,1fr) auto auto;
  align-items:stretch;
  gap:0;
  flex-wrap:nowrap;
  overflow:hidden;
}
.readout.readout .cx{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:14px 20px;min-width:0;
  border-right:1px solid var(--line-3);
}
.readout.readout .cx:last-child{border-right:none}
.readout.readout .cx-live{flex-direction:row;align-items:center;gap:9px;flex:none}
.readout.readout .cx-meter{gap:8px}

.meter.meter{
  display:flex;align-items:flex-end;gap:2px;height:34px;width:100%;min-width:0;
}
.meter.meter i{
  flex:1 1 0;min-width:0;width:auto;border-radius:2px;
  background:linear-gradient(180deg,var(--gold-dim) 0 2px,rgba(var(--rgb-neutral),.34) 2px);
}
.meter.meter i.lo{background:rgba(var(--rgb-neutral),.16)}

/* min / max ticks so the bars read as a price distribution, not decoration */
.meter-scale{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--fm);font-size:10px;color:var(--ink-4);
  letter-spacing:.02em;margin-top:-2px;
}

@media(max-width:1080px){
  .readout.readout{grid-template-columns:auto minmax(150px,1fr) auto}
  .readout.readout .cx-live,
  .readout.readout .cx-sel{display:none}
}
@media(max-width:620px){
  /* Three cells survive here (live and sel are hidden above), so a bare
     1fr 1fr auto-flowed them one-per-row and left half of two rows blank.
     Placing count and range explicitly on row 1 pairs them, and the meter
     spans row 2, so every cell has a neighbour and no half sits empty. */
  .readout.readout{grid-template-columns:1fr 1fr}
  .readout.readout .cx{padding:12px 14px;border-bottom:1px solid var(--line-3)}
  .readout.readout .cx-count{grid-column:1;grid-row:1;border-right:1px solid var(--line-3)}
  .readout.readout .cx-range{grid-column:2;grid-row:1;border-right:none}
  .readout.readout .cx-meter{
    grid-column:1 / -1;grid-row:2;border-right:none;border-bottom:none;
  }
  .meter.meter{height:40px;gap:3px}
}

/* Search inside the mobile drawer */
.mnav-search{display:none;margin:0 0 18px}
.mnav-search input{
  width:100%;height:46px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--well);color:var(--ink);padding:0 14px;font-size:15px;
}
.mnav-search input::placeholder{color:var(--ink-4)}
@media(max-width:620px){ .mnav-search{display:block} }