/* ==========================================================================
   RoCandy — market page (/en/market/)
   Filters sidebar · search, sort, refresh · dense listing grid
   Reuses the trade page's field, filter and card styles (trade.css).
   ========================================================================== */

.market-main { padding-top: calc(var(--nav-h) - .5rem); }
.market {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 1.25rem; padding: .75rem 1.25rem 2.5rem; color: var(--cream-100);
}

/* ---------- Filters sidebar ---------- */
.mfilters { min-width: 0; }
.mfilters-head { display: flex; align-items: center; justify-content: space-between; padding: .4rem 0 1rem; }
.mfilters-head h2 { font: 700 1.6rem/1 'Space Grotesk', var(--font-body); letter-spacing: -.02em; color: var(--cream-50); }
.mfilters-toggle { display: none; }
.mfilters .tfilter:first-child { border-top: 0; padding-top: 0; }
.mfilters .tfilter { padding-top: 1.1rem; margin-top: 1.1rem; }
.range-box .cur { font: 800 .95rem var(--font-body); color: rgba(255, 242, 228, .55); }

/* Simple / Advanced segmented control */
.seg { display: flex; gap: .35rem; padding: .3rem; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.seg-btn {
  flex: 1; height: 40px; border: 0; border-radius: 9px; background: transparent; color: rgba(255, 242, 228, .65);
  font: 800 .9rem var(--font-body); cursor: pointer; transition: background .2s, color .2s;
}
.seg-btn:hover { color: var(--cream-50); }
.seg-btn.is-active { background: rgba(247, 168, 188, .16); color: var(--cream-50); box-shadow: inset 0 0 0 2px rgba(247, 168, 188, .55); }

/* ---------- Listings ---------- */
.mcontent { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.market-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.market-grid .item { display: block; width: 100%; text-align: left; border: 0; font: inherit; color: inherit; overflow: visible; transition: transform .25s var(--ease-out), background .2s, box-shadow .2s, border-radius .15s; }
.market-grid .item:hover, .market-grid .item:focus-within {
  z-index: 6; background: rgba(255, 255, 255, .09); transform: translateY(-3px);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.market-grid .item-price small { font-size: .78em; font-weight: 800; color: rgba(255, 242, 228, .5); }

/* hover: the add-to-cart bar slides out under the card */
.item-bar {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 2;
  display: flex; height: 42px; border-radius: 0 0 12px 12px; overflow: hidden;
  background: var(--butter-300); color: var(--espresso);
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .75);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .18s ease, transform .22s var(--ease-out);
}
.market-grid .item:hover .item-bar, .market-grid .item:focus-within .item-bar { opacity: 1; transform: none; pointer-events: auto; }
.item-bar button { border: 0; margin: 0; background: transparent; color: inherit; font: 800 .92rem/1 var(--font-body); cursor: pointer; transition: background .15s ease; }
.item-bar button:hover { background: rgba(42, 26, 23, .1); }
.item-bar button:focus-visible { outline: 2px solid var(--espresso); outline-offset: -4px; }
.item-add { flex: 1; min-width: 0; padding: 0 .5rem; }
.item-open { flex: 0 0 44px; width: 44px; display: grid; place-items: center; border-left: 2px solid rgba(42, 26, 23, .16); }
.item-open svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: none) {              /* touch: the bar is always part of the card */
  .item-bar { position: static; height: 38px; margin-top: .6rem; border-radius: 10px; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; }
  .market-grid .item:hover, .market-grid .item:focus-within { border-radius: 12px; transform: none; }
}
.market-grid .item:focus-visible { outline: 3px solid var(--mint-400); outline-offset: 2px; }
.market-grid .item-art { height: 118px; }
.market-grid .item-art .gummy { width: 66px; }
.market-grid .item-price { font-size: .85rem; }
.item-meta { display: none; margin-top: .35rem; font: 700 .72rem/1 var(--font-body); color: rgba(255, 242, 228, .45); }
.market.is-advanced .item-meta { display: block; }
.icon-sq.is-spinning svg { animation: spin .6s linear; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Rarity tags (Steal-a-Brainrot tiers) ---------- */
.q-common { --r: #58E38A; }
.q-rare { --r: #4FA6FF; }
.q-epic { --r: var(--pink-300); }
.q-legendary { --r: #FFD84A; }
.q-mythic { --r: #FF5A5A; }
.q-god { --r: #FF8A5B; --grad: linear-gradient(90deg, #FF5A5A, #FFB347, #FFE45A, #6EE07A, #5AB0FF, #B98CFF); }
.q-secret { --r: #cfcfcf; --grad: linear-gradient(90deg, #ffffff 0%, #9a9a9a 55%, #2a2a2a 100%); }
.q-og { --r: #FFD54A; --grad: linear-gradient(90deg, #FFD54A 0%, #b58a0a 55%, #1a1408 100%); }
.q-god .item-rarity, .q-god .rar-name, .q-secret .item-rarity, .q-secret .rar-name, .q-og .item-rarity, .q-og .rar-name {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.q-god .rar-bar, .q-secret .rar-bar, .q-og .rar-bar { background: var(--grad); background-size: 100% 300%; }
.q-god .rar-bar { background: linear-gradient(180deg, #FF5A5A, #FFB347, #FFE45A, #6EE07A, #5AB0FF, #B98CFF); }
.q-secret .rar-bar { background: linear-gradient(180deg, #ffffff, #9a9a9a, #2a2a2a); }
.q-og .rar-bar { background: linear-gradient(180deg, #FFD54A, #b58a0a, #1a1408); }
.rar-bar { width: 5px; height: 18px; border-radius: 3px; }

/* Placeholder art tints for the extra tiers */
.gummy-blue { --c-hi: #EAF3FF; --c-mid: #7FBCFF; --c-deep: #2F7FDB; --c-shade: rgba(20, 70, 140, .45); }
.gummy-red { --c-hi: #FFE9E9; --c-mid: #FF7B7B; --c-deep: #D93A3A; --c-shade: rgba(140, 20, 20, .45); }
.gummy-rainbow { --c-hi: #ffffff; --c-mid: #FFB347; --c-deep: #B98CFF; --c-shade: rgba(90, 40, 140, .45);
  background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .95) 0 5%, rgba(255, 255, 255, 0) 6.5%),
    conic-gradient(from 200deg, #FF5A5A, #FFB347, #FFE45A, #6EE07A, #5AB0FF, #B98CFF, #FF5A5A); }
.gummy-mono { --c-hi: #ffffff; --c-mid: #bdbdbd; --c-deep: #3a3a3a; --c-shade: rgba(0, 0, 0, .55); }
.gummy-gold { --c-hi: #FFF3C2; --c-mid: #FFD54A; --c-deep: #6b4f00; --c-shade: rgba(40, 28, 0, .6); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .market { grid-template-columns: 260px minmax(0, 1fr); } }
@media (max-width: 960px) {
  .market { grid-template-columns: 1fr; padding: .5rem 1rem 2rem; }
  .mfilters-head { padding-bottom: .5rem; }
  .mfilters-toggle {
    display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .9rem; border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .06); color: var(--cream-50); font: 800 .88rem var(--font-body); cursor: pointer;
  }
  .mfilters-toggle svg { width: 18px; height: 18px; }
  .mfilters-body { display: none; }
  .mfilters.is-open .mfilters-body { display: block; padding-bottom: 1rem; }
  .market-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 640px) {
  .market-main { padding-top: calc(var(--nav-h) - .9rem); }
  .market-grid { grid-template-columns: repeat(2, 1fr); }
}