/* =====================================================================
   WoNO - Item Shop (itemshop.wono.html.twig) + Character Market
   (charmarket.wono.html.twig): browse-only pages, loaded by those two templates.
   Uses the theme tokens of wono.css (--sp-*).
   ===================================================================== */

/* ---------- shared: info box, empty box, price, coin ---------- */
.ish [hidden], .cm [hidden] { display: none !important; }
.ish-info { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: rgba(22, 11, 12, .6); border: 1px solid var(--sp-line); border-left: 4px solid var(--sp-gold); }
.ish-info > img { width: 40px; height: 40px; flex: none; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(255, 191, 37, .45)); }
.ish-info p { flex: 1; margin: 0; color: var(--sp-txt); line-height: 1.5; }
.ish-info b { color: var(--sp-gold); }
.ish-info-btn { flex: none; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--sp-gold); color: var(--sp-gold) !important; font: 500 18px/1 var(--sp-head); letter-spacing: .4px; white-space: nowrap; transition: background .15s, color .15s; }
.ish-info-btn:hover { background: var(--sp-gold); color: #2a1200 !important; }
.ish-empty { text-align: center; color: var(--sp-dim); padding: 26px 14px !important; }
.ish-empty small { display: block; margin-top: 4px; }
.ish-coin { width: 18px; height: 18px; flex: none; fill: #ffcb3d; stroke: #8a5a00; stroke-width: 1.4; }
.ish-coin path { stroke: #8a5a00; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ish-coin.ev { fill: #6fd3ff; stroke: #1d5f86; }

/* ---------- today's deals ---------- */
.ish-deals { margin: 0 0 16px; padding: 10px 12px 12px; border-radius: 12px; border: 1px solid rgba(255, 191, 37, .55); background: linear-gradient(180deg, rgba(120, 70, 0, .28), rgba(22, 11, 12, .6)); box-shadow: 0 0 16px rgba(255, 170, 30, .18); }
.ish-deals-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
.ish-deals-t { display: flex; align-items: center; gap: 8px; color: #fff; font: 500 26px/1 var(--sp-head); letter-spacing: .4px; }
.ish-deals-t .sp-i { width: 24px; height: 24px; color: var(--sp-gold); }
.ish-deals-cd { color: var(--sp-dim); font-size: 13px; }
.ish-deals-cd b { color: var(--sp-gold); font: 500 20px/1 var(--sp-head); letter-spacing: 1px; margin-left: 2px; }
.ish-worlds { margin-left: auto; display: flex; border: 1px solid var(--sp-line); border-radius: 8px; overflow: hidden; }
.ish-worlds a { padding: 5px 12px; color: var(--sp-txt) !important; font: 500 17px/1 var(--sp-head); letter-spacing: .4px; background: rgba(22, 11, 12, .7); }
.ish-worlds a + a { border-left: 1px solid var(--sp-line); }
.ish-worlds a:hover { background: rgba(242, 15, 27, .25); }
.ish-worlds a.is-on { background: linear-gradient(180deg, #ff5a45, #b3121b); color: #fff !important; }

/* ---------- shop switch + category bar ---------- */
.ish-shops { display: flex; gap: 8px; margin-bottom: 10px; }
.main-content .ish-shop { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 10px !important; border-radius: 10px !important; border: 1px solid var(--sp-line2) !important; background: rgba(48, 24, 26, .85) !important; box-shadow: none !important; color: var(--sp-txt) !important; cursor: pointer; transition: .15s; }
.main-content .ish-shop b { font: 500 24px/1 var(--sp-head); letter-spacing: .5px; text-transform: uppercase; }
.main-content .ish-shop small { font: 12px/1 var(--sp-font); color: var(--sp-dim); }
.main-content .ish-shop:hover { border-color: var(--sp-cyan) !important; transform: none; }
.main-content .ish-shop.is-on { background: linear-gradient(180deg, #ff5a45, #b3121b) !important; border-color: #ff8f7f !important; color: #fff !important; box-shadow: 0 0 12px rgba(240, 40, 40, .5) !important; }
.main-content .ish-shop.is-on small { color: #ffe0da; }
.ish-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.main-content .ish-cat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px !important; border-radius: 9px !important; border: 1px solid var(--sp-line2) !important; background: rgba(48, 24, 26, .85) !important; box-shadow: none !important; color: var(--sp-txt) !important; font: 500 18px/1 var(--sp-head) !important; letter-spacing: .4px; cursor: pointer; transition: .15s; }
.main-content .ish-cat img { width: 26px; height: 26px; image-rendering: pixelated; }
.main-content .ish-cat i { font: 11px/1 var(--sp-font); font-style: normal; color: var(--sp-dim); background: rgba(0, 0, 0, .35); border-radius: 8px; padding: 2px 6px; }
.main-content .ish-cat:hover { border-color: var(--sp-cyan) !important; transform: none; }
.main-content .ish-cat.is-on { background: linear-gradient(180deg, #ff5a45, #b3121b) !important; border-color: #ff8f7f !important; color: #fff !important; }
.main-content .ish-cat.is-on i { color: #fff; }

/* ---------- search row + effect type chips ---------- */
.ish-tools { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px; margin-bottom: 10px; border-radius: 10px; background: rgba(30, 15, 16, .95); border: 1px solid var(--sp-line); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.ish-tools .sp-it-search { flex: 1; min-width: 0; }
.main-content .ish-tools select { width: 190px; flex: none; }
.ish-count { color: var(--sp-dim); font-size: 13px; white-space: nowrap; }
.ish-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; }
.main-content .ish-chip { padding: 3px 12px !important; border-radius: 14px !important; border: 1px solid var(--sp-line2) !important; background: rgba(48, 24, 26, .85) !important; box-shadow: none !important; color: var(--sp-txt) !important; font: 500 16px/1.2 var(--sp-head) !important; cursor: pointer; }
.main-content .ish-chip:hover { border-color: var(--sp-cyan) !important; transform: none; }
.main-content .ish-chip.is-on { background: var(--sp-gold) !important; border-color: var(--sp-gold) !important; color: #2a1200 !important; }

/* ---------- offer cards ---------- */
.ish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ish-card { display: flex; gap: 10px; padding: 8px; border-radius: 10px; background: linear-gradient(90deg, rgba(60, 14, 18, .9), rgba(28, 12, 14, .9)); border: 1px solid var(--sp-line2); transition: transform .15s, border-color .15s, box-shadow .15s; min-width: 0; }
.ish-card:hover { transform: translateY(-2px); border-color: #ff4d4d; box-shadow: 0 0 12px rgba(255, 50, 60, .35); }
.ish-card.is-deal { border-color: rgba(255, 191, 37, .6); background: linear-gradient(90deg, rgba(90, 50, 6, .85), rgba(28, 12, 14, .9)); }
.ish-art { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 9px; background: radial-gradient(circle at 50% 45%, rgba(255, 120, 80, .16), rgba(10, 4, 5, .75) 70%); border: 1px solid rgba(255, 215, 122, .25); }
.ish-art img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.ish-art.k-effect img { image-rendering: auto; }
.ish-art.is-noimg::after { content: "?"; color: var(--sp-dim); font: 500 34px/1 var(--sp-head); opacity: .6; }
.ish-qty { position: absolute; right: 3px; bottom: 2px; padding: 0 5px; border-radius: 6px; background: rgba(0, 0, 0, .7); color: #fff; font: bold 11px/16px var(--sp-font); }
.ish-pct { position: absolute; left: -5px; top: -6px; padding: 0 6px; border-radius: 7px; background: linear-gradient(180deg, #ffe27a, #e7a400); color: #3a1d00; font: 500 16px/20px var(--sp-head); box-shadow: 0 0 8px rgba(255, 200, 40, .6); }
.ish-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ish-name { color: #fff !important; font-weight: bold; line-height: 1.25; overflow-wrap: anywhere; }
a.ish-name:hover { color: var(--sp-cyan) !important; }
.ish-sub { color: #7dffa6; font-size: 12px; }
.ish-desc { margin: 0; color: var(--sp-dim); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ish-desc:hover { -webkit-line-clamp: unset; }
.ish-price { display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 3px; }
.ish-price b { color: var(--sp-gold); font: 500 22px/1 var(--sp-head); letter-spacing: .3px; }
.ish-price s { color: var(--sp-dim); font-size: 13px; }
.ish-price i { font-style: normal; color: var(--sp-dim); font-size: 11px; }
.ish-step { color: #ffb3a8; font-size: 11px; }
.ish-foot { margin-top: 14px; }

/* ---------- character market ---------- */
.cm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.cm-fact { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: rgba(30, 15, 16, .9); border: 1px solid var(--sp-line2); }
.cm-fact b { color: var(--sp-gold); font: 500 28px/1 var(--sp-head); }
.cm-fact small { color: var(--sp-dim); }
.cm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; margin-bottom: 12px; border-radius: 10px; background: rgba(30, 15, 16, .95); border: 1px solid var(--sp-line); }
.cm-filters .cm-q { flex: 1 1 150px; min-width: 0; }
.main-content .cm-filters select { width: auto; max-width: 190px; }
.main-content .cm-filters input[type=number] { width: 92px; }
.cm-reset { color: var(--sp-gold) !important; font: 500 18px/1 var(--sp-head); padding: 0 4px; }
.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.cm-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 10px; text-decoration: none !important; background: linear-gradient(90deg, rgba(60, 14, 18, .9), rgba(28, 12, 14, .9)); border: 1px solid var(--sp-line2); transition: transform .15s, border-color .15s, box-shadow .15s; min-width: 0; }
.cm-card:hover { transform: translateY(-2px); border-color: #ff4d4d; box-shadow: 0 0 12px rgba(255, 50, 60, .35); }
.cm-av { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 215, 122, .4); background: rgba(10, 4, 5, .7); }
.cm-av img { width: 100%; height: 100%; object-fit: cover; }
.cm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cm-name { color: #fff; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-voc { color: #7dffa6; font-size: 12px; }
.cm-time { color: var(--sp-dim); font-size: 11px; }
.cm-time .is-soon { color: #ff9a8a; }
.cm-price { flex: none; display: flex; align-items: center; gap: 4px; }
.cm-price b { color: var(--sp-gold); font: 500 24px/1 var(--sp-head); }
.cm-price i { font-style: normal; color: var(--sp-dim); font-size: 11px; }
.cm-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 4px; }
.cm-pages a { min-width: 34px; padding: 5px 10px; text-align: center; border-radius: 8px; border: 1px solid var(--sp-line2); background: rgba(48, 24, 26, .85); color: var(--sp-txt) !important; font: 500 18px/1 var(--sp-head); }
.cm-pages a:hover { border-color: var(--sp-cyan); }
.cm-pages a.is-on { background: linear-gradient(180deg, #ff5a45, #b3121b); border-color: #ff8f7f; color: #fff !important; }
.cm-pages span { color: var(--sp-dim); font-size: 12px; margin-left: 6px; }
.cm-rules { margin-top: 16px; }
.cm-rules .wp-list { margin: 0; }
.cm-rules .wp-list li { color: var(--sp-txt); }
.cm-rules .wp-list b { color: var(--sp-gold); }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  .ish-info { flex-wrap: wrap; }
  .ish-info-btn { margin-left: 54px; }
  .ish-tools { flex-wrap: wrap; }
  .main-content .ish-tools select { width: 100%; }
  .ish-grid { grid-template-columns: 1fr; }
  .ish-worlds { margin-left: 0; }
  .main-content .ish-shop b { font-size: 20px; }
  .cm-facts { grid-template-columns: 1fr; }
  .cm-grid { grid-template-columns: 1fr; }
  .main-content .cm-filters select, .main-content .cm-filters input[type=number] { flex: 1 1 40%; max-width: none; }
}