/* ============================================================================
   R&G TCG — BLOCK 4 STYLES
   - Chest/cart redesigned from provided reference image
   - Game + language catalog rail from second reference image
   ============================================================================ */
:root{
  --color-loot-orange:#d86f35;
  --color-cream:#fff8bf;
  --chest-ink:#1b1422;
  --chest-line:#2c2235;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); font-size:var(--text-body); color:var(--color-text);
  background:var(--color-bg); line-height:var(--leading-normal); -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(26,19,32,.05) 1px, transparent 0),
    radial-gradient(circle at 50% 20%, rgba(107,59,214,.065), transparent 28%),
    linear-gradient(90deg, rgba(26,19,32,.04) 1px, transparent 1px),
    linear-gradient(rgba(26,19,32,.04) 1px, transparent 1px);
  background-size:28px 28px, 900px 900px, 120px 120px, 120px 120px;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
.mono{font-family:var(--font-mono)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:var(--text-body); padding:var(--space-3) var(--space-5); border:var(--outline); border-radius:var(--radius-pill); background:var(--color-surface); color:var(--color-ink); box-shadow:var(--shadow-offset-sm); transition:transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base), background var(--dur-base)}
.btn:hover{transform:translate(-2px,-2px); box-shadow:var(--shadow-offset-md)}
.btn:active{transform:translate(0,0); box-shadow:var(--shadow-offset-sm)}
.btn--primary{background:var(--color-primary); color:#fff}.btn--primary:hover{background:var(--color-primary-strong)}
.btn--block{width:100%}.btn--lg{font-size:var(--text-body-lg); padding:var(--space-4) var(--space-8)}

/* announce + header */
.announce{background:var(--color-ink); color:#fff; font-family:var(--font-mono); font-size:var(--text-label-sm); font-weight:700; letter-spacing:var(--tracking-wider); text-transform:uppercase; text-align:center; padding:var(--space-2) var(--space-4)}
.announce span{color:var(--color-primary-soft)}
.header{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:var(--outline)}
.header__inner{display:flex; align-items:center; gap:var(--space-6); height:68px; max-width:1440px; margin:0 auto; padding-inline:var(--layout-gutter)}
.logo{display:flex; align-items:center; gap:var(--space-3); flex-shrink:0}.logo__mark{width:38px;height:38px;display:grid;place-items:center;background:var(--color-primary);border:var(--outline);border-radius:var(--radius-sm);box-shadow:var(--shadow-offset-sm)}.logo__mark svg{width:30px;height:30px}.logo__name{font-family:var(--font-display); font-size:var(--text-display-sm); line-height:1; letter-spacing:.3px}
.nav{display:flex; gap:var(--space-1); margin-left:var(--space-2)}
.nav a{font-family:var(--font-mono); font-size:var(--text-label); font-weight:700; letter-spacing:var(--tracking-wide); text-transform:uppercase; padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); transition:background var(--dur-base),color var(--dur-base)}
.nav a:hover,.nav a.is-active{background:var(--color-primary-tint); color:var(--color-primary-strong)}
.header__search{margin-left:auto; position:relative; display:flex; align-items:center}
.header__search input{font-family:var(--font-body); font-size:var(--text-body-sm); width:220px; padding:var(--space-2) var(--space-3) var(--space-2) 34px; border:var(--outline); border-radius:var(--radius-pill); background:var(--color-surface-alt); outline:none; transition:width var(--dur-slow) var(--ease-standard), box-shadow var(--dur-base)}
.header__search input:focus{width:260px; box-shadow:var(--shadow-offset-accent); background:var(--color-surface)}
.header__search svg{position:absolute; left:12px; width:16px; height:16px; pointer-events:none; color:var(--color-text-muted)}
.header__actions{display:flex; align-items:center; gap:var(--space-3); margin-left:auto}
.icon-btn{display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer; background:var(--color-surface); font-family:var(--font-mono); font-size:var(--text-label); font-weight:700; letter-spacing:var(--tracking-wide); text-transform:uppercase; padding:var(--space-2) var(--space-4); border:var(--outline); border-radius:var(--radius-pill); box-shadow:var(--shadow-offset-sm); transition:transform var(--dur-base),box-shadow var(--dur-base)}
.icon-btn:hover{transform:translate(-1px,-1px); box-shadow:var(--shadow-offset-md)}.icon-btn svg{width:16px;height:16px}
.cart-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;background:var(--color-primary);color:#fff;border-radius:var(--radius-pill);font-size:var(--text-label-sm);font-weight:700}.header__cart-label{display:inline-flex;align-items:center;gap:var(--space-2)}.header__cart-total{font-family:var(--font-display);font-size:16px;line-height:1;color:var(--color-primary-strong);position:relative;top:-2px}

/* catalog filter rail */
.catalogbar{background:var(--color-surface); border-bottom:1.5px solid var(--color-border-soft)}
.catalogbar__inner{max-width:1440px; margin:0 auto; padding:var(--space-5) var(--layout-gutter); display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-8); flex-wrap:wrap}
.filter-group{display:flex; flex-direction:column; gap:var(--space-2)}
.filter-group--language{margin-left:auto}.filter-label{font-family:var(--font-mono);font-size:var(--text-label-sm);font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-text-muted)}
.filter-pills{display:flex; gap:var(--space-2); flex-wrap:wrap}.filter-pill{cursor:pointer;font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:500;padding:var(--space-3) var(--space-5);border:1.5px solid var(--color-border-soft);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);transition:background var(--dur-base),color var(--dur-base),border-color var(--dur-base),transform var(--dur-base)}
.filter-pill:hover{border-color:var(--color-border);transform:translateY(-1px)}.filter-pill.is-active{background:var(--chest-ink);color:#fff;border-color:var(--chest-ink);box-shadow:var(--shadow-offset-sm)}.filter-pill[data-cat="pokemon"].is-active{background:var(--color-cat-pokemon)}.filter-pill[data-cat="magic"].is-active{background:var(--color-cat-magic)}.filter-pill[data-cat="yugioh"].is-active{background:var(--color-cat-yugioh);color:var(--color-ink)}.filter-pill[data-cat="lorcana"].is-active{background:var(--color-cat-lorcana)}.filter-pill[data-cat="onepiece"].is-active{background:var(--color-cat-onepiece)}

/* layout */
.main{max-width:1440px; margin:0 auto; padding:var(--space-8) var(--layout-gutter) var(--space-16); display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--space-8); align-items:start}.gridcol__head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-4); flex-wrap:wrap}.gridcol__headings{min-width:0; flex:1 1 auto}.gridcol__title{font-family:var(--font-display); font-weight:400; font-size:clamp(40px,5vw,64px); line-height:1.08; padding-bottom:.06em; letter-spacing:var(--tracking-tight); overflow-wrap:anywhere}.gridcol__sub{font-size:var(--text-body-sm); color:var(--color-text-muted); margin-top:var(--space-2)}.gridcol__head .filters{margin-left:auto}.result-count{font-size:var(--text-body-sm);color:var(--color-text-muted);margin-bottom:var(--space-5)}
.filters{display:flex; gap:var(--space-2); flex-wrap:wrap}.chip{cursor:pointer; font-family:var(--font-mono); font-size:var(--text-label); font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:var(--space-2) var(--space-4); border:var(--outline); border-radius:var(--radius-pill); background:var(--color-surface); transition:background var(--dur-base),color var(--dur-base),transform var(--dur-base)}.chip:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-offset-sm)}.chip.is-on{background:var(--color-ink); color:#fff}

/* product grid */
.product-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4)}
.card{display:flex; flex-direction:column; background:var(--color-surface); border:var(--outline); border-radius:14px; box-shadow:var(--shadow-offset-sm); overflow:hidden; transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base)}.card:hover{transform:translate(-2px,-2px); box-shadow:var(--shadow-offset-md)}.card.is-dragging{opacity:.45; transform:scale(.97)}.card.is-out{opacity:.62}.card__art{aspect-ratio:1/1; display:grid; place-items:center; border-bottom:var(--outline); position:relative; background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.06)),var(--tone); cursor:grab}.card__art:active{cursor:grabbing}
.pack-mock{width:82px;height:122px;background:rgba(255,255,255,.62);border:1.5px solid rgba(26,19,32,.2);box-shadow:10px 8px 0 rgba(255,255,255,.22);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transform:rotate(.8deg)}.pack-mock__top{position:absolute;top:0;left:0;right:0;height:12px;background:rgba(26,19,32,.7)}.pack-mock__label{position:absolute;top:25px;background:rgba(26,19,32,.72);color:var(--color-primary-soft);font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.7px;padding:3px 5px;border-radius:2px}.pack-mock__symbol{font-family:var(--font-display);font-size:38px;line-height:1;color:rgba(26,19,32,.72)}.pack-mock__foot{position:absolute;bottom:5px;left:5px;right:5px;font-family:var(--font-mono);font-size:6px;letter-spacing:.8px;text-transform:uppercase;color:rgba(26,19,32,.72)}.pack-mock--modal{width:112px;height:150px}.pack-mock--modal .pack-mock__symbol{font-size:48px}.pack-mock--modal .pack-mock__label{font-size:9px}.pack-mock--modal .pack-mock__foot{font-size:7px}
.muted-note{font-family:var(--font-mono);font-size:var(--text-label-sm);letter-spacing:.5px;text-transform:uppercase;color:var(--color-text-muted)}

/* First-visit newsletter popup */
.news-pop{position:fixed;inset:0;z-index:80;background:rgba(26,19,32,.5);display:flex;align-items:center;justify-content:center;padding:var(--space-5);animation:newsfade .2s ease}
@keyframes newsfade{from{opacity:0}to{opacity:1}}
.news-pop__card{position:relative;width:100%;max-width:420px;background:var(--color-surface);border:var(--outline);border-radius:var(--radius-lg);box-shadow:var(--shadow-offset-lg);padding:var(--space-8)}
.news-pop__x{position:absolute;top:var(--space-3);right:var(--space-3);width:32px;height:32px;cursor:pointer;background:var(--color-surface);border:var(--outline);border-radius:var(--radius-pill);box-shadow:var(--shadow-offset-sm);font-size:18px;line-height:1}
.news-pop__kicker{font-family:var(--font-mono);font-size:var(--text-label);font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-primary-strong);margin-bottom:var(--space-2)}
.news-pop__title{font-family:var(--font-display);font-size:30px;line-height:1.02;margin-bottom:var(--space-2)}
.news-pop__sub{font-size:var(--text-body-sm);color:var(--color-text-muted);margin-bottom:var(--space-5)}
.news-pop__form{display:flex;gap:var(--space-2)}
.news-pop__form input{flex:1;min-width:0;border:var(--outline);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-4);background:var(--color-surface-alt);outline:none}
.news-pop__form button{cursor:pointer;border:var(--outline);border-radius:var(--radius-pill);background:var(--color-primary);color:#fff;font-family:var(--font-body);font-weight:700;padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-offset-sm);white-space:nowrap}
.news-pop__form button:hover{background:var(--color-primary-strong)}
.news-pop__msg{margin-top:var(--space-3);font-size:var(--text-body-sm);min-height:1.2em}
.news-pop__msg.is-ok{color:var(--color-success)}.news-pop__msg.is-err{color:var(--color-danger)}
.news-pop__code{font-family:var(--font-display);font-size:22px;letter-spacing:1px;color:var(--color-primary-strong);display:inline-block;margin:6px 0}
.news-pop__skip{display:block;margin:var(--space-4) auto 0;background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:var(--text-label-sm);letter-spacing:.5px;text-transform:uppercase;color:var(--color-text-muted)}
.news-pop__skip:hover{color:var(--color-ink)}

.card__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;background:var(--tone)}
.pack-mock[hidden]{display:none}
.card__badge,.card__sale{z-index:4}
.modal__art{position:relative}
.card__badge{position:absolute; top:var(--space-3); left:var(--space-3); font-family:var(--font-mono); font-size:var(--text-micro); font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 7px; border:1.5px solid var(--color-ink); border-radius:var(--radius-pill); background:var(--color-surface)}.card__badge.is-hot{background:var(--color-primary);color:#fff}.card__badge.is-new{background:var(--color-success); color:#fff}.card__badge.is-pre{background:var(--color-warning); color:var(--color-ink)}.card__badge.is-jp{background:var(--color-cream);color:var(--color-ink)}.card__badge.is-cn{background:#ffd7d7;color:var(--color-ink)}.card__sale{position:absolute; top:var(--space-3); right:var(--space-3); font-family:var(--font-mono); font-size:var(--text-micro); font-weight:700; padding:3px 7px; border:1.5px solid var(--color-ink); border-radius:var(--radius-pill); background:var(--color-accent-pink); color:#fff}.card__grab{position:absolute; bottom:10px; right:10px; font-family:var(--font-mono); font-size:var(--text-label-sm); font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#fff; background:rgba(26,19,32,.6); padding:5px 10px; border-radius:var(--radius-pill); pointer-events:none}.sold-stamp{position:absolute;inset:auto;transform:rotate(-8deg);font-family:var(--font-display);font-size:24px;line-height:.9;color:var(--color-primary-soft);background:rgba(255,255,255,.82);border:var(--outline);padding:var(--space-3);text-align:center;box-shadow:var(--shadow-offset-sm);z-index:2}
.card__body{padding:10px 12px; display:flex; flex-direction:column; gap:5px; flex:1}.card__set{display:flex;gap:5px;flex-wrap:wrap;font-family:var(--font-mono); font-size:var(--text-label-sm); letter-spacing:var(--tracking-wide); color:var(--color-text-muted); text-transform:uppercase}.card__name{font-family:var(--font-body);font-weight:700;font-size:13px;line-height:1.12}.seg{display:inline-flex; border:var(--outline); border-radius:var(--radius-pill); overflow:hidden; align-self:flex-start; margin-top:var(--space-1)}
.card__art .seg{position:absolute; left:10px; bottom:10px; z-index:3; margin-top:0; background:var(--color-surface); box-shadow:var(--shadow-offset-sm)}.seg button{cursor:pointer; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:4px 9px; background:var(--color-surface); border:none; color:var(--color-text-muted)}.seg button.on{background:var(--color-primary); color:#fff}.card__foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:var(--space-2); gap:var(--space-3)}.card__foot--action{align-items:center;flex-direction:row;justify-content:space-between;gap:var(--space-2)}
.add-row{display:flex;align-items:center;gap:var(--space-2);width:100%}
.add-plus{flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;border:var(--outline);border-radius:var(--radius-sm);background:var(--color-ink);color:#fff;font-family:var(--font-display);font-size:20px;line-height:0;box-shadow:var(--shadow-offset-sm);transition:transform var(--dur-base),box-shadow var(--dur-base),background var(--dur-base)}
.add-plus:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-offset-md);background:var(--color-primary-strong)}
.add-plus[disabled]{background:var(--color-surface-alt);color:var(--color-text-muted);cursor:not-allowed;transform:none}.card__price{font-family:var(--font-display); font-size:19px; white-space:nowrap}.card__price .was{font-family:var(--font-mono); font-size:var(--text-label-sm); color:var(--color-text-muted); text-decoration:line-through; font-weight:600; margin-left:4px}.card__price .per{font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted);margin-left:3px}.add-btn{width:100%;cursor:pointer;font-family:var(--font-body);font-weight:700;font-size:var(--text-body-sm);padding:var(--space-2) var(--space-3);border:var(--outline);border-radius:var(--radius-sm);background:var(--color-ink);color:#fff;box-shadow:var(--shadow-offset-sm);transition:transform var(--dur-base),box-shadow var(--dur-base),background var(--dur-base)}.add-btn:hover{transform:translate(-1px,-1px); box-shadow:var(--shadow-offset-md); background:var(--color-primary-strong)}.add-btn[disabled]{background:var(--color-surface-alt); color:var(--color-text-muted); cursor:not-allowed; transform:none}.stock{font-family:var(--font-mono); font-size:var(--text-label-sm); font-weight:600; letter-spacing:.5px; display:flex; align-items:center; gap:6px;color:var(--color-text-muted)}.stock .dot{width:7px;height:7px;border-radius:var(--radius-pill);border:1.5px solid var(--color-ink)}.stock.in .dot{background:var(--color-success)}.stock.low .dot{background:var(--color-warning)}.stock.out .dot{background:var(--color-danger)}.stock.out{color:var(--color-danger)}.empty{grid-column:1/-1;text-align:center;padding:var(--space-16) var(--space-4);color:var(--color-text-muted)}.empty__mark{font-size:48px;opacity:.4}.empty__title{font-family:var(--font-display);font-size:26px;color:var(--color-ink)}

/* chest / cart */
.chestcol{position:sticky;top:92px;display:flex;flex-direction:column;gap:var(--space-4)}.chest{background:var(--color-surface);border:var(--outline);border-radius:22px;box-shadow:var(--shadow-offset-lg);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 108px);transition:transform var(--dur-base),box-shadow var(--dur-base)}
#bagInner{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.chest__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.chest__topmeter{flex-shrink:0;padding:var(--space-3) var(--space-5) var(--space-2);border-bottom:1.5px solid var(--color-border-soft)}.chest.is-over{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--color-primary)}.chest.pulse{animation:bagpulse .4s var(--ease-bounce)}@keyframes bagpulse{0%{transform:scale(1)}40%{transform:scale(1.025)}100%{transform:scale(1)}}
.chest__head{flex-shrink:0;background:var(--color-surface);border-bottom:var(--outline);padding:var(--space-5);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4)}.chest__kicker{font-family:var(--font-mono);font-size:var(--text-label-sm);font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-2)}.chest__title{font-family:var(--font-display);font-size:32px;line-height:1}.chest__count{display:flex;align-items:baseline;gap:5px;color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--text-label);font-weight:700}.chest__count strong{font-family:var(--font-display);font-size:34px;color:var(--color-primary);line-height:.8}.chest__drop{padding:var(--space-5);border-bottom:var(--outline);background:linear-gradient(180deg,var(--color-surface) 0%,#fbf9ff 100%)}.chest.is-over .chest__drop{background:var(--color-primary-tint)}.chest__empty .chest__drop{border-bottom:none}.chest__empty{padding-bottom:var(--space-5)}.chest__empty-copy{text-align:center;color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--text-label-sm);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.chest-box{height:220px;border:1.75px dashed var(--color-border);border-radius:var(--radius-md);display:grid;place-items:center;position:relative;overflow:hidden}.chest-box::after{content:"";position:absolute;bottom:18px;left:50%;width:180px;height:18px;transform:translateX(-50%);background:rgba(26,19,32,.14);border-radius:50%;filter:blur(2px)}.chest-box__body{position:relative;width:170px;height:136px;background:var(--chest-ink);border:var(--outline);border-radius:16px 16px 14px 14px;display:grid;place-items:center;z-index:1;box-shadow:6px 6px 0 rgba(26,19,32,.25);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 4px,transparent 4px 8px)}.chest-box__lid{position:absolute;top:50px;width:160px;height:46px;background:var(--chest-ink);border:var(--outline);border-bottom:none;border-radius:14px 14px 0 0;z-index:2;clip-path:polygon(0 100%,0 18%,33% 18%,50% 52%,67% 18%,100% 18%,100% 100%)}.chest-box__window{position:absolute;top:38px;width:104px;height:64px;border:1.5px dashed rgba(255,255,255,.8);border-radius:10px;display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-size:24px;line-height:1}.chest-box__hint{position:absolute;bottom:16px;color:#ffe45e;font-family:var(--font-display);font-size:13px;line-height:1}.loot-list{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);background:var(--color-surface-alt)}.loot-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:var(--space-2);background:var(--color-surface);border:var(--outline);border-radius:var(--radius-sm);padding:var(--space-2);box-shadow:2px 2px 0 var(--color-border)}.loot-line__dot{width:10px;height:10px;border:1.5px solid var(--color-ink);border-radius:50%;background:var(--color-loot-orange)}.loot-line__main{min-width:0}.loot-line__badges{display:flex;gap:4px;margin-bottom:2px}.loot-line__badges span,.format-pill{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.8px;background:var(--color-ink);color:#fff;border-radius:3px;padding:2px 5px;text-transform:uppercase}.loot-line__badges span:nth-child(2){background:var(--color-loot-orange)}.loot-line__name{font-weight:700;font-size:13px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loot-line__set{font-family:var(--font-mono);font-size:9px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.7px}.qty{display:inline-flex;align-items:center;border:var(--outline);border-radius:var(--radius-pill);overflow:hidden;background:var(--color-surface)}.qty button{width:24px;height:24px;flex-shrink:0;cursor:pointer;border:none;background:var(--color-surface);font-weight:700;font-size:14px;color:var(--color-ink)}.qty button:hover{background:var(--color-primary-tint)}.qty span{min-width:26px;text-align:center;font-family:var(--font-mono);font-weight:700;font-size:var(--text-body-sm)}.loot-line__price{font-family:var(--font-mono);font-size:13px;white-space:nowrap}.loot-line__rm{cursor:pointer;background:none;border:none;color:var(--color-text-muted);font-size:16px;line-height:1;padding:2px}.loot-line__rm:hover{color:var(--color-danger)}.bounty{flex-shrink:0;padding:var(--space-5);background:var(--color-surface);border-top:1.5px solid var(--color-border-soft)}.ship-meter{margin-bottom:var(--space-4)}.ship-meter__top{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--text-label-sm);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-2)}.ship-meter__track{height:8px;background:var(--color-surface-alt);border:1.5px solid var(--color-ink);border-radius:var(--radius-pill);overflow:hidden}.ship-meter__bar{height:100%;width:var(--ship-progress);background:var(--color-primary);transition:width .4s var(--ease-standard)}.bounty__row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-4)}.bounty__row span{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-wider);color:var(--color-text-muted);text-transform:uppercase}.bounty__row strong{font-family:var(--font-display);font-size:40px;line-height:1}.checkout-sail{width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border:var(--outline);border-radius:12px;background:var(--chest-ink);color:#fff;padding:var(--space-4) var(--space-5);font-family:var(--font-body);font-weight:700;box-shadow:3px 3px 0 var(--color-primary);transition:transform var(--dur-base),box-shadow var(--dur-base),background var(--dur-base)}.checkout-sail:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--color-primary);background:#100b16}.checkout-sail span{font-family:var(--font-display);font-size:24px;line-height:0}.checkout-pay-note{text-align:center;margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--text-label-sm);color:var(--color-text-muted)}.checkout-pay-note strong{color:#635bff;font-family:var(--font-body);font-weight:800}.tip{background:var(--color-primary-tint); border:var(--outline); border-radius:var(--radius-md); box-shadow:var(--shadow-offset-sm); padding:var(--space-4) var(--space-5)}.tip .k{font-family:var(--font-mono);font-size:var(--text-label-sm);font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-primary-strong);margin-bottom:var(--space-2)}.tip p{font-size:var(--text-body-sm);color:var(--color-text)}
.fly{position:fixed;z-index:60;width:40px;height:40px;border:var(--outline);border-radius:var(--radius-sm);display:grid;place-items:center;font-size:20px;color:#fff;pointer-events:none;box-shadow:var(--shadow-offset-sm)}

/* modal */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(26,19,32,.45);display:none;align-items:center;justify-content:center;padding:var(--space-5)}.overlay.open{display:flex}.modal{width:100%;max-width:460px;background:var(--color-surface);border:var(--outline);border-radius:var(--radius-lg);box-shadow:var(--shadow-offset-lg);overflow:hidden}.modal__art{height:240px;display:grid;place-items:center;border-bottom:var(--outline);background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.05)),var(--tone)}.modal__body{padding:var(--space-6)}.modal__set{font-family:var(--font-mono);font-size:var(--text-label-sm);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-muted)}.modal__name{font-family:var(--font-display);font-size:var(--text-display-md);line-height:1.05;margin:var(--space-1) 0 var(--space-4)}.modal__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}.modal__lab{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.5px;text-transform:uppercase;color:var(--color-text-muted)}.modal__close{position:absolute;top:var(--space-4);right:var(--space-4);width:34px;height:34px;cursor:pointer;background:var(--color-surface);border:var(--outline);border-radius:var(--radius-pill);box-shadow:var(--shadow-offset-sm);font-size:18px;line-height:1}

/* mobile sticky chest bar */
.mini-cart-bar{display:none;position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:50;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3);background:var(--color-ink);color:#fff;border:var(--outline);border-radius:var(--radius-pill);box-shadow:var(--shadow-offset-lg)}.mini-cart-bar.is-visible{display:flex}.mini-cart-bar__meta{display:flex;flex-direction:column;line-height:1.05}.mini-cart-bar__meta span{font-family:var(--font-mono);font-size:var(--text-micro);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--color-primary-soft)}.mini-cart-bar__meta strong{font-family:var(--font-display);font-size:20px;font-weight:400;color:#fff}.mini-cart-bar__btn{border:1.5px solid #fff;background:var(--color-primary);color:#fff;border-radius:var(--radius-pill);padding:10px 16px;font-family:var(--font-body);font-weight:700;box-shadow:2px 2px 0 #fff;cursor:pointer}

@media(max-width:1120px){.main{grid-template-columns:minmax(0,1fr)}.chestcol{position:static;order:2}.chest{max-height:none}.chest__scroll{overflow:visible}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.filter-group--language{margin-left:0}}
@media(max-width:760px){.header__inner,.catalogbar__inner,.main{padding-inline:var(--layout-gutter-sm)}.nav,.header__search{display:none}.catalogbar__inner{gap:var(--space-5)}.filter-group{width:100%}.filter-pills{overflow:auto;flex-wrap:nowrap;padding-bottom:2px}.filter-pill{white-space:nowrap}.gridcol__head{align-items:flex-start}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.chest__title{font-size:28px}.chest-box{height:190px}.loot-line{grid-template-columns:auto minmax(0,1fr) auto}.loot-line__price{grid-column:2}.loot-line__rm{grid-column:3;grid-row:1}.header__cart-total{display:none}.mini-cart-bar{left:var(--space-3);right:var(--space-3);bottom:var(--space-3)}}
@media(max-width:480px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.gridcol__title{font-size:42px}.filters{width:100%;overflow:auto;flex-wrap:nowrap}.chip{white-space:nowrap}.chest__head{align-items:center}.bounty__row strong{font-size:34px}}

/* ---- Add-to-chest feedback (toast + header bump) + mobile collapsible chest ---- */
.chest__chev{display:none}
.add-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px);z-index:90;background:var(--color-ink);color:#fff;font-family:var(--font-mono);font-size:var(--text-label);font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:10px 18px;border:var(--outline);border-radius:var(--radius-pill);box-shadow:var(--shadow-offset-md);opacity:0;pointer-events:none;transition:opacity .18s var(--ease-standard),transform .18s var(--ease-standard)}
.add-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes cartbump{0%,100%{transform:scale(1)}35%{transform:scale(1.16)}}
#headerCart.bump{animation:cartbump .42s var(--ease-bounce)}
/* checkout button total: shown inline on mobile, hidden on desktop (Bounty row shows it there) */
.cs-total{display:none}
.checkout-sail .cs-total{font-family:var(--font-body);font-weight:700;font-size:var(--text-body);line-height:1.1;color:#fff}
@keyframes chestflash{0%,100%{transform:translateX(0);background:var(--color-surface)}20%{transform:translateX(-5px);background:#d6f7e2}40%{transform:translateX(5px)}60%{transform:translateX(-3px);background:#d6f7e2}80%{transform:translateX(3px)}}
@media(max-width:760px){
  .chestcol{order:-1;position:sticky;top:68px;z-index:20;margin-bottom:var(--space-5)}
  .chest{box-shadow:var(--shadow-offset-md)}
  .chest__head{cursor:pointer;user-select:none}
  .chest__chev{display:inline-block;margin-left:8px;font-size:16px;color:var(--color-primary);position:relative;top:-3px;transition:transform var(--dur-base)}
  .chest.is-open .chest__chev{transform:rotate(180deg)}
  .chest:not(.is-open) #bagInner{display:none}
  /* cap only the loot list so the meter stays on top and the checkout stays pinned at the bottom */
  .chest.is-open .chest__scroll{max-height:30vh;overflow:auto}
  .chest.flash .chest__head{animation:chestflash .55s var(--ease-standard)}
}
@media(prefers-reduced-motion:reduce){#headerCart.bump,.chest.flash .chest__head{animation:none}}

/* ===== Mobile storefront polish (filters fit, drag affordance, chest sizing) ===== */
@media(max-width:760px){
  /* status filter chips: shrink so ALL · NEW ARRIVALS · ON SALE · IN STOCK fit one row */
  .filters{gap:5px;flex-wrap:nowrap}
  .filters .chip{padding:5px 9px;font-size:10px;letter-spacing:.2px}
  /* hide the horizontal scrollbar on the swipeable rails (mobile only — desktop wraps) */
  .filter-pills,.filters{scrollbar-width:none}
  .filter-pills::-webkit-scrollbar,.filters::-webkit-scrollbar{display:none;width:0;height:0}
  /* bigger collapse chevron */
  .chest__chev{font-size:22px;margin-left:10px;top:-2px}
  /* opaque full-bleed backing so scrolling products don't peek around the chest,
     plus a gap so the box isn't flush against the sticky header lip */
  .chestcol{background:var(--color-bg);margin-inline:calc(-1 * var(--layout-gutter-sm));padding:var(--space-3) var(--layout-gutter-sm) var(--space-4)}
  /* keep the chest visual (it's a signature bit) but shrink it; total moves onto a
     smaller checkout button so the expanded chest stays compact */
  /* .chestcol prefix raises specificity above the base .chest__drop/.pouch rules
     that appear later in the file. zoom (not transform) shrinks the pouch's actual
     layout box, so following content — the loot list OR the empty-state copy — flows
     naturally instead of being pulled up behind the pouch. */
  .chestcol .chest__head{padding-top:var(--space-3);padding-bottom:var(--space-3)}
  .chestcol .chest__drop{padding:var(--space-2)}
  .chestcol .pouch{zoom:.5;margin:0 auto}
  .bounty{padding:var(--space-4) var(--space-5) var(--space-5)}
  .bounty__row{display:none}
  .cs-total{display:inline}
  .checkout-sail{padding:var(--space-3) var(--space-4)}
  .checkout-pay-note{margin-top:var(--space-2);font-size:9px}
  /* drag affordance: the whole card drags; no text/image selection highlight */
  .card{cursor:grab}
  .card:active{cursor:grabbing}
  .card,.card *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}

/* ==========================================================================
   BLOCK 6 — Chest visual refresh
   User direction: no bottom sticky chest bar; empty chest when empty; cards/slabs
   visible when products have been added.
   ========================================================================== */
.mini-cart-bar{display:none!important}
.chest__drop{
  padding:var(--space-5);
  border-bottom:var(--outline);
  background:
    radial-gradient(circle at 50% 34%, rgba(107,59,214,.10), transparent 38%),
    linear-gradient(180deg,#fff 0%,#fbf9ff 100%);
}
.chest.is-over .chest__drop{background:var(--color-primary-tint)}
.chest__empty .chest__drop{border-bottom:none}
/* ==========================================================================
   POUCH CHEST — from chest-pouch-preview.html, wired to the live cart.
   Empty: dashed window + "drag items here". Filled: slabs rise from the
   back wall, label flips to "loot loaded", +N slab summarizes overflow.
   ========================================================================== */
.pouch{position:relative;width:300px;max-width:100%;height:230px;margin:0 auto}
.pouch__shadow{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:230px;height:22px;background:rgba(26,19,32,.16);border-radius:50%;filter:blur(3px)}
.pouch__back{position:absolute;left:30px;right:30px;top:6px;height:120px;background:var(--chest-ink);border:var(--outline);border-bottom:none;border-radius:14px 14px 0 0;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 4px,transparent 4px 8px);
  clip-path:polygon(0 26%,16% 26%,34% 0,50% 20%,66% 0,84% 26%,100% 26%,100% 100%,0 100%)}
.pouch .slabs{position:absolute;left:0;right:0;top:14px;height:118px;display:flex;align-items:flex-end;justify-content:center;z-index:1;pointer-events:none}
.pouch .slab{width:54px;height:104px;border:var(--outline);border-radius:8px;box-shadow:var(--shadow-offset-sm);display:flex;align-items:flex-start;justify-content:center;padding-top:8px;
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.5px;color:#fff;margin:0 -8px;transform-origin:bottom center;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 3px,transparent 3px 7px);
  animation:slab-in .42s var(--ease-bounce) backwards}
.pouch .slab span{background:rgba(26,19,32,.45);border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:1px 5px}
.pouch .slab:nth-child(1){transform:rotate(-9deg) translateY(6px)}
.pouch .slab:nth-child(2){transform:rotate(-3deg) translateY(-4px);z-index:2}
.pouch .slab:nth-child(3){transform:rotate(3deg) translateY(-6px);z-index:3}
.pouch .slab:nth-child(4){transform:rotate(8deg) translateY(-2px);z-index:2}
.pouch .slab:nth-child(5){transform:rotate(13deg) translateY(8px)}
.pouch .slab:nth-child(6){transform:rotate(17deg) translateY(14px)}
@keyframes slab-in{from{opacity:0;transform:translateY(40px) scale(.8)}}
.pouch__front{position:absolute;left:14px;right:14px;bottom:0;height:150px;background:var(--chest-ink);border:var(--outline);border-radius:18px;z-index:4;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 4px,transparent 4px 8px);
  box-shadow:0 -2px 0 rgba(255,255,255,.06) inset;display:grid;place-items:center}
.pouch__front::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:120px;height:10px;background:rgba(0,0,0,.35);border-radius:0 0 12px 12px}
.pouch .window{width:188px;height:92px;border:1.75px dashed rgba(255,255,255,.85);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.pouch .window__brand{font-family:var(--font-display);font-size:30px;line-height:1;color:#fff}
.pouch .window__state{font-family:var(--font-display);font-size:14px;line-height:1;color:var(--loot-yellow,#ffe45e)}
.pouch.is-filled .window__state{color:var(--color-primary-soft)}
/* drag-over reaction */
.chest.is-over .pouch .window{border-color:var(--color-primary-soft)}
.chest.is-over .pouch .window__state{color:var(--color-primary-soft)}
.chest.is-over .pouch .slab{transform:translateY(-10px)}
.pouch__caption{margin-top:10px;text-align:center;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--color-text-muted)}

@media(max-width:760px){
  .pouch{height:212px}
  .pouch__front{height:138px}
  .pouch .window{width:170px;height:84px}
  .pouch .window__brand{font-size:26px}
  body{padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){.pouch .slab{animation:none}}

.qty button:disabled{opacity:.35;cursor:not-allowed;background:var(--color-surface)}

.confirm{padding:var(--space-8) var(--space-6);text-align:center}.confirm__title{font-family:var(--font-display);font-size:var(--text-display-sm);line-height:1.05;margin-bottom:var(--space-2)}.confirm__copy{color:var(--color-text-muted);font-size:var(--text-body-sm);margin-bottom:var(--space-6)}.confirm__actions{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}