/* คลังไฟล์จูน — ดีไซน์ใหม่: แพ็กเหมา + แผงกรองซ้าย + รายการแบบแถว (ledger) */
#shop.fx-sec,#shop{padding:84px 0}
.fx{--ln:#2c1214;--g:#d9d2c3;--a:#ff6a5a}
.fx-head{margin-bottom:28px;max-width:720px}
.fx-kick{margin:0 0 10px;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.28em;color:var(--red2)}
.fx-head h2{margin:0 0 10px}
.fx-head h2 span{color:var(--mut);font-weight:500}
.fx-sub{margin:0;color:var(--mut);font-size:16px}

/* แพ็กรวม 2 ใบ */
.fx-bundles{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:34px}
.fx-bundle{position:relative;display:grid;gap:8px;align-content:start;padding:26px 28px 26px 32px;border-radius:20px;border:1px solid #5a1a1d;overflow:hidden;
  background:linear-gradient(120deg,rgba(255,42,42,.18),rgba(20,10,11,.94) 60%),repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.025) 14px 15px)}
.fx-bundle::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--g)}
.fx-bundle.is-auto::before{background:linear-gradient(var(--red),var(--deep))}
.fx-tag{justify-self:start;padding:4px 12px;border-radius:6px;background:#3a2a2d;color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em}
.is-auto .fx-tag{background:var(--red)}
.fx-bundle h3{margin:6px 0 0;font-size:clamp(22px,2.2vw,28px);line-height:1.2}
.fx-bundle h3 em{font-style:normal;color:var(--red2)}
.fx-bundle p{margin:0;color:var(--mut);font-size:15px}
.fx-bp{display:flex;align-items:baseline;gap:14px;margin-top:6px}
.fx-bp s{text-decoration:none;padding:3px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.2);color:#f1dedb;font-size:12px;font-weight:700;letter-spacing:.06em}
.fx-bp b{font-size:clamp(34px,3.6vw,46px);line-height:1.05;letter-spacing:-.02em}
.fx-save{color:#8ff0a4;font-size:14px;font-weight:600}
.fx-buy{justify-self:start;margin-top:8px;padding:13px 26px;border-radius:12px;border:0;background:linear-gradient(180deg,#ff3b3b,#d81414);color:#fff;font:inherit;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 10px 28px rgba(255,42,42,.3);transition:transform .15s}
.fx-buy:hover{transform:translateY(-2px)}
.fx-th{width:96px;height:48px;object-fit:cover;border-radius:8px;border:1px solid #3a1c1f;background:#fff}

/* โครงหลัก */
.fx-body{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}
.fx-side{position:sticky;top:92px;display:grid;gap:8px;padding:20px;border-radius:18px;background:rgba(20,10,11,.8);border:1px solid var(--ln)}
.fx-lab{margin-top:10px;font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.16em;color:var(--mut);text-transform:uppercase}
.fx-lab:first-child{margin-top:0}
.fx-q,.fx-sel{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #3a1c1f;background:#0d0607;color:var(--tx);font:inherit;font-size:15px}
.fx-q:focus,.fx-sel:focus{outline:2px solid var(--red2);outline-offset:1px}
.fx-seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #3a1c1f;border-radius:10px;overflow:hidden}
.fx-seg button{padding:10px 4px;border:0;border-right:1px solid #3a1c1f;background:transparent;color:var(--mut);font:inherit;font-size:14px;cursor:pointer}
.fx-seg button:last-child{border-right:0}
.fx-seg button.on{background:var(--red);color:#fff;font-weight:700}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px}
.fx-chips button{padding:7px 12px;border-radius:8px;border:1px solid #3a1c1f;background:transparent;color:var(--mut);font:inherit;font-size:13px;cursor:pointer}
.fx-chips button.on{border-color:var(--red2);color:#fff;background:rgba(255,42,42,.18)}
.fx-count{margin-top:10px;padding-top:14px;border-top:1px dashed var(--ln);color:var(--mut);font-size:14px;line-height:1.6}
.fx-count b{color:var(--tx);font-size:20px}

/* แถวรายการ */
.fx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ln)}
.fx-row{display:grid;grid-template-columns:28px 120px minmax(0,1.5fr) minmax(0,1fr) 96px auto;gap:18px;align-items:center;padding:16px 14px 16px 12px;border-bottom:1px solid var(--ln);position:relative;transition:background .2s}
.fx-row::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--g);opacity:.55}
.fx-row.is-a::before{background:var(--a);opacity:.9}
.fx-row:hover{background:rgba(255,255,255,.035)}
.fx-n{font:500 13px ui-monospace,Menlo,Consolas,monospace;color:#6f5a5c;padding-left:6px}
.fx-id{min-width:0}
.fx-ty{display:inline-block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--g)}
.is-a .fx-ty{color:var(--a)}
.fx-id h3{margin:0;font:700 18px/1.25 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}
.fx-id p{margin:3px 0 0;color:var(--mut);font-size:14px;line-height:1.4;word-break:break-word}
.fx-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fx-ext{padding:3px 9px;border-radius:5px;border:1px solid #4a2a2d;font:600 12px ui-monospace,Menlo,Consolas,monospace;color:#f1dedb}
.fx-sz{flex-basis:100%;color:var(--mut);font-size:13px}
.fx-pr{font-size:22px;font-weight:700;text-align:right}
.fx-pick{padding:10px 18px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:transparent;color:var(--tx);font:inherit;font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.fx-pick:hover{background:var(--red);border-color:var(--red)}
.fx-pick::after{content:" →"}
.fx-empty{padding:48px 16px;text-align:center;color:var(--mut);border-bottom:1px solid var(--ln)}
.fx-more{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.fx-ghost{padding:12px 24px;border-radius:999px;border:1px solid #4a2a2d;background:transparent;color:var(--tx);font:inherit;cursor:pointer}
.fx-ghost:hover{background:rgba(255,255,255,.08)}

@media(max-width:980px){
  .fx-body{grid-template-columns:1fr}
  .fx-side{position:static;grid-template-columns:1fr 1fr;align-items:end}
  .fx-side>.fx-lab:first-child,.fx-q{grid-column:1/-1}
  .fx-count{grid-column:1/-1}
}
@media(max-width:760px){
  .fx-bundles{grid-template-columns:1fr}
  .fx-th{display:none}
  .fx-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;padding:16px 8px 16px 14px}
  .fx-n{display:none}
  .fx-id{grid-column:1/-1}
  .fx-meta{grid-column:1}
  .fx-pr{grid-column:2;grid-row:2;font-size:20px}
  .fx-pick{grid-column:1/-1;justify-self:stretch;text-align:center}
  .fx-side{grid-template-columns:1fr}
}

/* ---- เพิ่มความสวย ---- */
.fx-head h2{background:linear-gradient(90deg,#fff 30%,#ffb1a8);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-head h2 span{-webkit-text-fill-color:var(--mut)}
.fx-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 26px;border:1px solid var(--ln);border-radius:16px;background:rgba(20,10,11,.6);overflow:hidden}
.fx-stats div{padding:16px 20px;border-right:1px solid var(--ln);display:grid;gap:2px}
.fx-stats div:last-child{border-right:0}
.fx-stats b{font:700 20px ui-monospace,Menlo,Consolas,monospace;color:#fff}
.fx-stats span{color:var(--mut);font-size:13px}
.fx-bundle{isolation:isolate;transition:transform .3s,border-color .3s,box-shadow .3s}
.fx-bundle::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,60,60,.28),transparent 68%);z-index:-1}
.fx-bundle.is-gear::after{background:radial-gradient(circle,rgba(217,210,195,.2),transparent 68%)}
.fx-bundle:hover{transform:translateY(-4px);border-color:#ff4d4d;box-shadow:0 22px 60px rgba(255,42,42,.22)}
.fx-wm{position:absolute;right:22px;bottom:-26px;font:italic 800 150px/1 "Anuphan",sans-serif;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09);z-index:-1;pointer-events:none;font-style:normal}
.fx-zip{position:absolute;right:26px;top:24px;width:46px;height:46px;color:rgba(255,255,255,.55)}
.is-auto .fx-zip{color:var(--red2)}
.fx-bp b{background:linear-gradient(180deg,#fff,#ffd5d0);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-save{display:inline-block;justify-self:start;padding:3px 10px;border-radius:999px;background:rgba(143,240,164,.1);border:1px solid rgba(143,240,164,.3)}
.fx-buy{position:relative;overflow:hidden}
.fx-buy::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);transition:transform .6s}
.fx-buy:hover::after{transform:translateX(120%)}
.fx-side{background:linear-gradient(180deg,rgba(40,14,16,.7),rgba(16,8,9,.85));box-shadow:0 20px 50px rgba(0,0,0,.35)}
.fx-list{border-top:0;display:grid;gap:10px}
.fx-row{border:1px solid var(--ln);border-radius:16px;background:rgba(20,10,11,.55);overflow:hidden;animation:fxin .5s cubic-bezier(.2,.9,.2,1) backwards;animation-delay:calc(var(--i,0)*35ms);transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.fx-row::before{left:0;top:0;bottom:0;width:4px;border-radius:0;transition:width .2s}
.fx-row:hover{transform:translateX(4px);border-color:#5a1a1d;background:rgba(40,14,16,.65);box-shadow:0 12px 34px rgba(0,0,0,.4)}
.fx-row:hover::before{width:7px}
.fx-th{transition:transform .3s;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.fx-row:hover .fx-th{transform:scale(1.08) rotate(-1deg)}
.fx-pr{display:inline-block;justify-self:end;padding:4px 12px;border-radius:10px;background:rgba(255,255,255,.05)}
.fx-pick{background:rgba(255,255,255,.04)}
.fx-pick::after{display:inline-block;transition:transform .2s}
.fx-pick:hover::after{transform:translateX(4px)}
.fx-seg button,.fx-chips button{transition:background .15s,color .15s}
.fx-seg button:hover,.fx-chips button:hover{color:#fff}
@keyframes fxin{from{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){.fx-row{animation:none}.fx-bundle,.fx-row,.fx-th{transition:none}}
@media(max-width:980px){.fx-stats{grid-template-columns:1fr 1fr}.fx-stats div:nth-child(2){border-right:0}.fx-stats div:nth-child(-n+2){border-bottom:1px solid var(--ln)}}
@media(max-width:760px){.fx-wm{font-size:110px}.fx-row:hover{transform:none}}

.fx-bp s{text-decoration:line-through;text-decoration-color:var(--red2);text-decoration-thickness:2px;border:0;padding:0;background:none;color:var(--mut);font-size:20px;font-weight:500;letter-spacing:0}

/* ---- รอบที่ 3: แถวรายการหรูขึ้น ---- */
.fx-row{padding:14px 16px 14px 14px;gap:20px;background:linear-gradient(100deg,rgba(34,14,16,.75),rgba(16,8,9,.7))}
.fx-row::after{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(120deg,transparent 30%,rgba(255,90,80,.9),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.fx-row:hover::after{opacity:1}
.fx-th{width:120px;height:60px;border-radius:10px;border:1px solid #4a2a2d}
.fx-n{font-size:12px;color:#5c474a;padding-left:4px}
.fx-ty{display:inline-flex;align-items:center;gap:6px;margin-bottom:5px;padding:2px 10px 2px 8px;border-radius:999px;background:rgba(255,255,255,.06);font-size:11px;letter-spacing:.06em}
.fx-ty i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.fx-id h3{font-size:19px;letter-spacing:.01em}
.fx-id p mark{display:inline-block;margin-right:8px;padding:0 8px;border-radius:5px;background:rgba(255,106,90,.16);color:#ffb4ab;font-size:12px;font-weight:700;letter-spacing:.04em;vertical-align:1px}
.fx-ex{display:flex;gap:6px;flex-wrap:wrap}
.fx-meta{display:grid;gap:6px;align-content:center}
.fx-ext{border-color:transparent;font-size:12px}
.fx-ext.x-bin{background:rgba(255,184,107,.14);color:#ffc98c}
.fx-ext.x-xdf{background:rgba(124,196,255,.14);color:#9fd3ff}
.fx-ext.x-log{background:rgba(255,255,255,.08);color:#d8cfcf}
.fx-sz{flex-basis:auto}
.fx-bar{display:block;height:4px;max-width:150px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.fx-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--deep),var(--red2))}
.fx-pr{display:flex;align-items:baseline;justify-content:flex-end;gap:2px;padding:6px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-size:24px;letter-spacing:-.01em}
.fx-pr small{font-size:15px;color:var(--red2);font-weight:600}
.fx-pick{padding:11px 20px;border-radius:12px;border-color:rgba(255,255,255,.18);transition:all .2s}
.fx-row:hover .fx-pick{background:linear-gradient(180deg,#ff3b3b,#d81414);border-color:transparent;box-shadow:0 8px 22px rgba(255,42,42,.35)}
@media(max-width:760px){
  .fx-row{grid-template-columns:96px minmax(0,1fr);gap:10px 14px;padding:14px}
  .fx-th{display:block;width:96px;height:48px;grid-row:1}
  .fx-id{grid-column:2;grid-row:1}
  .fx-meta{grid-column:1/-1}
  .fx-pr{grid-column:1;justify-self:start}
  .fx-pick{grid-column:2;grid-row:3;justify-self:stretch}
}
@media(max-width:760px){
  .fx-row{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"th id" "meta meta" "pr pick";align-items:center}
  .fx-th{grid-area:th}.fx-id{grid-area:id}.fx-meta{grid-area:meta;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center}
  .fx-pr{grid-area:pr;justify-self:stretch;justify-content:center}.fx-pick{grid-area:pick;justify-self:stretch}
  .fx-bar{grid-column:1/-1;max-width:none}
}

/* ---- ตะกร้า ---- */
.fx-ck{position:relative;display:grid;place-items:center;width:28px;height:28px;cursor:pointer}
.fx-ck input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fx-ck i{width:22px;height:22px;border-radius:7px;border:2px solid #6a3a3e;background:rgba(255,255,255,.03);display:grid;place-items:center;transition:all .15s}
.fx-ck input:focus-visible+i{outline:2px solid var(--red2);outline-offset:2px}
.fx-ck:hover i{border-color:var(--red2)}
.fx-ck input:checked+i{background:var(--red);border-color:var(--red);box-shadow:0 0 14px rgba(255,42,42,.5)}
.fx-ck input:checked+i::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.fx-row.is-sel{border-color:#7a2226;background:linear-gradient(100deg,rgba(70,18,22,.8),rgba(20,8,9,.75))}
.fx-sel{margin-top:10px;width:100%;font-size:14px;padding:10px 14px;border-radius:12px}
.fx-cbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:14px;padding:12px 14px 12px 22px;border-radius:999px;background:rgba(26,10,12,.94);border:1px solid #7a2226;backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,42,42,.2);max-width:calc(100% - 24px);animation:fxcb .35s cubic-bezier(.2,.9,.2,1)}
.fx-cbar[hidden]{display:none}
@keyframes fxcb{from{opacity:0;transform:translate(-50%,20px)}}
.fx-cinfo{font-size:15px;white-space:nowrap}.fx-cinfo b{font-size:20px;color:var(--red2);margin-right:4px}.fx-cinfo span{color:var(--tx);font-weight:700}
.fx-cclear,.fx-cstat{padding:9px 16px;border-radius:999px;border:1px solid #4a2a2d;background:transparent;color:var(--tx);font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.fx-cclear:hover,.fx-cstat:hover{background:rgba(255,255,255,.08)}
.fx-cbar .fx-buy{margin:0;padding:11px 22px;font-size:15px;border-radius:999px;white-space:nowrap}
.gxc-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px;max-height:300px;overflow:auto}
.gxc-list li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--ln);font-size:14px}
.gxc-n{flex:1;min-width:0;word-break:break-all;font-family:ui-monospace,Menlo,Consolas,monospace}
.gxc-list b{white-space:nowrap}
.gxc-rm{width:26px;height:26px;border-radius:50%;border:1px solid #4a2a2d;background:transparent;color:var(--tx);cursor:pointer;font-size:16px;line-height:1}
.gxc-rm:hover{background:var(--red);border-color:var(--red)}
.gxc-empty{justify-content:center;color:var(--mut)}
.gxc-o em{font-style:normal;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.08);white-space:nowrap}
.gxc-o.st-paid em{background:rgba(143,240,164,.14);color:#8ff0a4}.gxc-o.st-bad em{background:rgba(255,90,80,.15);color:#ffb4ad}.gxc-o.st-used{opacity:.55}
.gxc-dl{padding:7px 14px;border-radius:10px;border:0;background:linear-gradient(180deg,#ff3b3b,#d81414);color:#fff;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.gxc-dl.busy{opacity:.6;pointer-events:none}
#gxCart.st-orders .gxm-box{width:min(560px,100%);grid-template-columns:1fr}
#gxCart.st-orders .gx-drop,#gxCart.st-orders .gx-prev{display:none!important}
@media(max-width:760px){
  .fx-ck{position:absolute;top:12px;right:12px;z-index:2}
  .fx-cbar{gap:8px;padding:10px 10px 10px 16px;bottom:10px}
  .fx-cinfo{font-size:13px}.fx-cinfo b{font-size:17px}.fx-cclear{padding:8px 12px}
  .fx-cbar .fx-buy{padding:10px 14px;font-size:14px}
}

.fx-live{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:7px 16px;border-radius:999px;background:rgba(143,240,164,.08);border:1px solid rgba(143,240,164,.3);color:#b9f5c6;font-size:14px;font-weight:600}
.fx-live i{width:9px;height:9px;border-radius:50%;background:#4be37a;box-shadow:0 0 0 0 rgba(75,227,122,.6);animation:fxlive 1.8s infinite}
@keyframes fxlive{70%{box-shadow:0 0 0 9px rgba(75,227,122,0)}100%{box-shadow:0 0 0 0 rgba(75,227,122,0)}}
@media(prefers-reduced-motion:reduce){.fx-live i{animation:none}}
.fx-kick{display:block}

/* ชุดรวมเกียร์+ออโต้ เต็มแถว */
.fx-bundle.is-all::before{background:linear-gradient(var(--g),var(--red))}
.is-all .fx-tag{background:linear-gradient(90deg,var(--red),var(--deep))}
.is-all .fx-zip{color:var(--red2)}
.fx-bundle.is-max::before{background:linear-gradient(var(--red2),var(--deep))}
.is-max .fx-tag{background:linear-gradient(90deg,#ff2a2a,#7a0f13)}
.is-max .fx-zip{color:var(--red2)}