*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue: #1a4fba;
  --blue-dark: #0f3080;
  --blue-light: #e8f0ff;
  --yellow: #ffd84d;
  --yellow-dark: #f5c400;
  --red: #e03131;
  --green: #2d9e4a;
  --gray: #6b7280;
  --shadow: 0 4px 24px rgba(26,79,186,0.10);
  --shadow-hover: 0 8px 32px rgba(26,79,186,0.18);
  --radius: 16px;
  --bg: linear-gradient(135deg, #e8f0ff 0%, #fffbe6 100%);
  --card-bg: #ffffff;
  --card-border: #dbeafe;
  --text: #1a1a2e;
  --text-muted: #6b7280;
  --table-hover: #e8f0ff;
  --table-head: #0f3080;
  --input-border: #d1d5db;
  --img-bg: #f8faff;
  --policy-bg: linear-gradient(135deg, #e8f0ff, #fffbe6);
}

[data-theme="dark"] {
  --blue: #60a5fa;
  --blue-dark: #1e40af;
  --blue-light: #1e3a5f;
  --green: #34d399;
  --gray: #9ca3af;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.5);
  --bg: linear-gradient(135deg, #0f172a 0%, #1a1a2e 100%);
  --card-bg: #1e293b;
  --card-border: #334155;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --table-hover: #1e3a5f;
  --table-head: #020617;
  --input-border: #475569;
  --img-bg: #0f172a;
  --policy-bg: linear-gradient(135deg, #1e293b, #0f172a);
}

body { font-family:'Nunito',sans-serif; background:var(--bg); min-height:100vh; color:var(--text); transition:background 0.3s,color 0.3s; }

/* ── Navbar ── */
.navbar { background:var(--table-head); box-shadow:0 2px 12px rgba(0,0,0,0.25); position:sticky; top:0; z-index:100; }
.nav-inner { max-width:1100px; margin:0 auto; padding:0 1.5rem; height:90px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { font-family:'Bangers',cursive; font-size:2.6rem; color:var(--yellow); text-decoration:none; letter-spacing:2px; display:flex; align-items:center; gap:0.6rem; transition:color 0.2s; }
.nav-logo:hover { color:#fff; }
.nav-mascot { height:82px; width:82px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4)); }
.nav-links { display:flex; gap:0.7rem; align-items:center; flex-wrap:nowrap; }
.nav-link { color:rgba(255,255,255,0.82); text-decoration:none; font-weight:700; font-size:0.8rem; padding-bottom:2px; border-bottom:2px solid transparent; transition:color 0.2s,border-color 0.2s; white-space:nowrap; }
.nav-link:hover,.nav-link.active { color:var(--yellow); border-color:var(--yellow); }
.dark-toggle { background:none; border:1.5px solid rgba(255,255,255,0.3); border-radius:20px; color:rgba(255,255,255,0.82); font-family:'Nunito',sans-serif; font-size:0.78rem; font-weight:700; padding:0.25rem 0.6rem; cursor:pointer; transition:all 0.2s; white-space:nowrap; flex-shrink:0; }
.dark-toggle:hover { border-color:var(--yellow); color:var(--yellow); }

/* ── Main ── */
.main { max-width:1100px; margin:0 auto; padding:2.5rem 1.5rem 4rem; }

/* ── Page Header ── */
.page-header { text-align:center; margin-bottom:2.5rem; }
.page-title { font-family:'Bangers',cursive; font-size:3rem; color:var(--blue-dark); letter-spacing:2px; margin-bottom:0.4rem; }
[data-theme="dark"] .page-title { color:var(--blue); }
.page-subtitle { color:var(--text-muted); font-size:1.05rem; font-weight:600; margin-bottom:0.75rem; }
.week-badge { display:inline-block; background:var(--card-bg); border:1.5px solid var(--yellow-dark); color:var(--text-muted); font-size:0.85rem; font-weight:700; padding:0.35rem 1rem; border-radius:999px; }

/* ── Category ── */
.category-section { margin-bottom:3rem; }
.category-header { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; padding:0.3rem 0; }
.category-header:hover .category-title { color:var(--blue); }
.category-title { font-family:'Bangers',cursive; font-size:1.7rem; color:var(--blue-dark); border-bottom:2.5px solid var(--blue-light); padding-bottom:0.4rem; letter-spacing:1px; flex:1; text-align:center; }
[data-theme="dark"] .category-title { color:var(--blue); }
.cat-count { font-size:1rem; font-weight:700; color:var(--text-muted); }
.cat-controls { display:flex; align-items:center; gap:0.75rem; margin-left:1rem; }
.sort-controls { display:flex; gap:0.4rem; flex-wrap:wrap; }
.sort-btn { background:var(--card-bg); border:1.5px solid var(--input-border); border-radius:6px; padding:0.25rem 0.65rem; font-family:'Nunito',sans-serif; font-size:0.75rem; font-weight:800; cursor:pointer; color:var(--text); transition:all 0.15s; }
.sort-btn:hover { border-color:var(--blue); color:var(--blue); }
.sort-btn.active { background:var(--blue-dark); color:var(--yellow); border-color:var(--blue-dark); }
.collapse-arrow { font-size:0.85rem; color:var(--blue); transition:transform 0.25s; flex-shrink:0; }
.category-section.collapsed .collapse-arrow { transform:rotate(180deg); }
.category-body { overflow:hidden; transition:max-height 0.35s ease,opacity 0.25s ease; max-height:3000px; opacity:1; }
.category-section.collapsed .category-body { max-height:0; opacity:0; }

/* ── Product Grid ── */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.25rem; padding-top:1rem; }

/* ── Product Card ── */
.product-card { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); border:1.5px solid var(--card-border); overflow:hidden; transition:box-shadow 0.2s,transform 0.2s; display:flex; flex-direction:column; }
.product-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-3px); }
.product-img-wrap { background:var(--img-bg); height:160px; display:flex; align-items:center; justify-content:center; }
.product-img-wrap img { height:100%; width:100%; object-fit:contain; padding:0.5rem; }
.product-img-placeholder { font-size:3.5rem; opacity:0.35; }
.product-info { padding:1rem 1.1rem 1.1rem; flex:1; display:flex; flex-direction:column; }
.product-cat-label { font-size:0.72rem; font-weight:800; color:var(--blue); text-transform:uppercase; letter-spacing:0.08em; }
.product-name { font-size:1rem; font-weight:800; color:var(--text); margin:0.3rem 0 0.7rem; line-height:1.3; min-height:2.6rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-footer { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.85rem; }
.product-price { display:flex; align-items:baseline; gap:0.4rem; }
.price-main { font-size:1.5rem; font-weight:900; color:var(--blue); }
.price-sale { font-size:1.5rem; font-weight:900; color:var(--red); }
.price-orig { font-size:0.85rem; font-weight:700; color:var(--text-muted); text-decoration:line-through; }
.price-tbd { font-size:1rem; font-weight:700; color:var(--text-muted); font-style:italic; }

/* ── Stock Badges ── */
.stock-badge { font-size:0.72rem; font-weight:800; padding:0.2rem 0.6rem; border-radius:999px; text-transform:uppercase; letter-spacing:0.05em; }
.stock-badge.in-stock { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.stock-badge.low-stock { background:#fef9c3; color:#854d0e; border:1px solid #fde047; }
.stock-badge.out-of-stock { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }

/* ── Buttons ── */
.btn-inquire { display:block; text-align:center; background:var(--yellow); color:var(--blue-dark); font-weight:800; font-size:0.92rem; padding:0.6rem 1rem; border-radius:10px; text-decoration:none; transition:background 0.2s; margin-top:auto; }
.btn-inquire:hover { background:var(--yellow-dark); }
.btn-oos { display:block; width:100%; background:#e5e7eb; color:#9ca3af; font-weight:800; font-size:0.92rem; padding:0.6rem 1rem; border-radius:10px; border:none; cursor:not-allowed; margin-top:auto; }
[data-theme="dark"] .btn-oos { background:#374151; color:#6b7280; }
.btn-tcg { display:block; text-align:center; background:transparent; color:var(--blue); font-weight:700; font-size:0.8rem; padding:0.3rem 1rem; border-radius:10px; text-decoration:none; border:1.5px solid var(--blue-light); margin-bottom:0.4rem; transition:all 0.2s; }
.btn-tcg:hover { background:var(--blue-light); }
.section-nav { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:2rem; padding:0.75rem 1rem; background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); border:1.5px solid var(--card-border); position:sticky; top:68px; z-index:50; }
.section-nav-btn { background:none; border:1.5px solid var(--input-border); border-radius:8px; padding:0.3rem 0.8rem; font-family:'Nunito',sans-serif; font-size:0.8rem; font-weight:800; cursor:pointer; color:var(--text); transition:all 0.15s; white-space:nowrap; }
.section-nav-btn:hover { background:var(--blue-dark); color:var(--yellow); border-color:var(--blue-dark); }
.product-img-wrap img { height:100%; width:100%; object-fit:contain; padding:0.5rem; max-height:160px; }

/* ── Buylist ── */
.buylist-wrap { max-width:900px; margin:0 auto; }
.trade-policy { display:flex; gap:1rem; align-items:flex-start; background:var(--policy-bg); border:1.5px solid var(--blue-light); border-radius:var(--radius); padding:1.2rem 1.4rem; margin-bottom:1.5rem; }
.trade-policy-icon { font-size:2rem; flex-shrink:0; }
.trade-policy-title { font-size:1rem; font-weight:800; color:var(--blue); margin-bottom:0.3rem; }
.trade-policy-text { font-size:0.9rem; color:var(--text-muted); line-height:1.6; }
.trade-policy-text a { color:var(--blue); font-weight:700; }
.trade-tiers { display:flex; gap:0.75rem; margin-top:0.6rem; flex-wrap:wrap; }
.trade-tier { background:var(--card-bg); border:1.5px solid var(--card-border); border-radius:10px; padding:0.5rem 0.9rem; text-align:center; flex:1; min-width:100px; }
.trade-tier-range { font-size:0.75rem; font-weight:700; color:var(--text-muted); }
.trade-tier-pct { font-size:1.3rem; font-weight:900; color:var(--blue); }
.trade-tier-label { font-size:0.72rem; font-weight:700; color:var(--text-muted); }
.trade-tier.top { border-color:var(--yellow-dark); }
.trade-tier.top .trade-tier-pct { color:#7a5c00; }
[data-theme="dark"] .trade-tier.top .trade-tier-pct { color:var(--yellow); }
.trade-tier.pass .trade-tier-pct { color:var(--gray); }
.buylist-conditions { display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.cond-badge { font-size:0.78rem; font-weight:800; padding:0.2rem 0.7rem; border-radius:999px; letter-spacing:0.04em; }
.cond-badge.nm { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.cond-badge.lp { background:#fef9c3; color:#854d0e; border:1px solid #fde047; }
.cond-badge.mp { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }

/* ── Buylist sort controls ── */
.buylist-sort { display:flex; gap:0.6rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap; }
.sort-label { font-size:0.85rem; font-weight:800; color:var(--text-muted); }

/* ── Table ── */
.table-wrap { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); border:1.5px solid var(--card-border); overflow:hidden; margin-bottom:1.5rem; overflow-x:auto; }
.buylist-table { width:100%; border-collapse:collapse; min-width:600px; }
.buylist-table thead { background:var(--table-head); }
.buylist-table thead th { color:var(--yellow); font-size:0.8rem; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; padding:0.85rem 1rem; text-align:left; }
.buylist-table thead th:first-child { width:64px; }
.buylist-table tbody tr { border-bottom:1px solid var(--card-border); transition:background 0.15s; }
.buylist-table tbody tr:last-child { border-bottom:none; }
.buylist-table tbody tr:hover { background:var(--table-hover); }
.buylist-table td { padding:0.8rem 1rem; font-size:0.92rem; color:var(--text); }
.buylist-table td:first-child { padding:0.5rem 0.5rem 0.5rem 1rem; }
.card-thumb { width:48px; height:68px; object-fit:cover; border-radius:4px; cursor:zoom-in; transition:transform 0.15s,box-shadow 0.15s; display:block; }
.card-thumb:hover { transform:scale(1.08); box-shadow:0 4px 16px rgba(0,0,0,0.25); }
.card-name { font-weight:800; color:var(--text); }
.card-num { color:var(--text-muted); font-size:0.82rem; }
.buy-price { font-weight:900; color:var(--green); font-size:1rem; }

/* ── Lightbox ── */
#lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.78); z-index:2000; align-items:center; justify-content:center; cursor:zoom-out; }
#lightbox.open { display:flex; }
#lightbox img { max-height:85vh; max-width:90vw; border-radius:12px; box-shadow:0 12px 48px rgba(0,0,0,0.6); animation:popIn 0.18s ease; }
@keyframes popIn { from { transform:scale(0.88);opacity:0; } to { transform:scale(1);opacity:1; } }

/* ── Buylist notes ── */
.buylist-notes { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); border:1.5px solid var(--card-border); padding:1.2rem 1.4rem; }
.buylist-notes h3 { font-size:1rem; font-weight:800; color:var(--blue); margin-bottom:0.6rem; }
.buylist-notes ul { padding-left:1.2rem; }
.buylist-notes li { font-size:0.9rem; color:var(--text-muted); line-height:1.8; }
.buylist-notes a { color:var(--blue); font-weight:700; }

/* ── Contact ── */
.contact-wrap { max-width:600px; margin:0 auto; }
.contact-card { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); border:1.5px solid var(--card-border); padding:2rem; }
.contact-form { display:flex; flex-direction:column; gap:1.1rem; }
.form-group { display:flex; flex-direction:column; gap:0.35rem; }
.form-group label { font-size:0.88rem; font-weight:800; color:var(--text-muted); }
.form-group input,.form-group select,.form-group textarea { border:1.5px solid var(--input-border); border-radius:10px; padding:0.65rem 0.9rem; font-size:0.92rem; font-family:'Nunito',sans-serif; transition:border-color 0.2s,box-shadow 0.2s; outline:none; width:100%; background:var(--card-bg); color:var(--text); }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,79,186,0.12); }
.form-group textarea { resize:none; }
.radio-group { display:flex; gap:1.2rem; margin-bottom:0.4rem; }
.radio-label { display:flex; align-items:center; gap:0.4rem; font-size:0.9rem; font-weight:700; cursor:pointer; color:var(--text); }
.btn-submit { background:var(--yellow); color:var(--blue-dark); font-family:'Nunito',sans-serif; font-weight:900; font-size:1rem; border:none; border-radius:10px; padding:0.75rem; cursor:pointer; transition:background 0.2s; width:100%; }
.btn-submit:hover { background:var(--yellow-dark); }
.success-msg { text-align:center; padding:2rem 0; }
.success-icon { font-size:3.5rem; margin-bottom:0.8rem; }
.success-msg h2 { font-family:'Bangers',cursive; font-size:2rem; color:var(--blue); letter-spacing:1px; margin-bottom:0.4rem; }
.success-msg p { color:var(--text-muted); font-size:0.95rem; }

/* ── Footer ── */
.footer { text-align:center; padding:1.5rem; color:var(--text-muted); font-size:0.82rem; font-weight:600; }

/* ── Responsive ── */
@media (max-width:600px) {
  .nav-logo { font-size:1.1rem; }
  .nav-links { gap:0.6rem; }
  .nav-link { font-size:0.8rem; }
  .page-title { font-size:2.2rem; }
  .product-grid { grid-template-columns:1fr 1fr; }
  .buylist-table thead th,.buylist-table td { padding:0.6rem 0.6rem; font-size:0.8rem; }
}

/* ── Hamburger / Mobile Nav ── */
.hamburger { display:none; background:none; border:1.5px solid rgba(255,255,255,0.4); border-radius:8px; color:#fff; font-size:1.3rem; padding:0.3rem 0.6rem; cursor:pointer; flex-shrink:0; transition:all 0.2s; }
.hamburger:hover { border-color:var(--yellow); color:var(--yellow); }

@media (max-width: 768px) {
  .hamburger { display:block; }
  .nav-inner { height:72px; }
  .nav-links {
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:var(--table-head);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0.5rem 0;
    box-shadow:0 8px 24px rgba(0,0,0,0.3);
    z-index:99;
  }
  .nav-links.open { display:flex; }
  .nav-link {
    padding:0.85rem 1.5rem;
    border-bottom:1px solid rgba(255,255,255,0.08);
    font-size:1rem;
    white-space:nowrap;
  }
  .nav-link:last-of-type { border-bottom:none; }
  .dark-toggle {
    margin:0.5rem 1.5rem;
    text-align:center;
    padding:0.5rem;
    border-radius:8px;
  }
  .navbar { position:relative; }
  .section-nav { top:72px; flex-wrap:wrap; }
  .product-grid { grid-template-columns:1fr 1fr; }
  .sell-layout { grid-template-columns:1fr; }
  .page-title { font-size:2rem; }
  .nav-logo { font-size:1.6rem; }
  .nav-mascot { height:48px; width:48px; }
}

@media (max-width: 420px) {
  .product-grid { grid-template-columns:1fr; }
  .nav-logo { font-size:1.3rem; }
  .nav-mascot { height:40px; width:40px; }
}

/* ── Dropdown Nav ── */
.nav-dropdown { position:relative; }
.nav-dropbtn { background:none; border:none; color:rgba(255,255,255,0.82); font-family:'Nunito',sans-serif; font-weight:700; font-size:0.8rem; cursor:pointer; padding-bottom:2px; border-bottom:2px solid transparent; transition:color 0.2s,border-color 0.2s; white-space:nowrap; }
.nav-dropbtn:hover, .nav-dropbtn.active-btn { color:var(--yellow); border-bottom-color:var(--yellow); }
.nav-dropdown-content { display:none; position:absolute; top:calc(100% + 10px); left:0; background:var(--table-head); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.3); min-width:160px; z-index:200; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
.nav-dropdown:hover .nav-dropdown-content { display:block; }
.nav-dd-link { display:block; padding:0.7rem 1.1rem; color:rgba(255,255,255,0.82); text-decoration:none; font-family:'Nunito',sans-serif; font-weight:700; font-size:0.85rem; white-space:nowrap; transition:background 0.15s,color 0.15s; border-bottom:1px solid rgba(255,255,255,0.06); }
.nav-dd-link:last-child { border-bottom:none; }
.nav-dd-link:hover { background:rgba(255,255,255,0.08); color:var(--yellow); }
.nav-dd-link.active { color:var(--yellow); }

@media (max-width:768px) {
  .nav-dropdown-content { position:static; box-shadow:none; border-radius:0; border:none; background:rgba(255,255,255,0.05); }
  .nav-dropdown:hover .nav-dropdown-content { display:none; }
  .nav-dropdown.open .nav-dropdown-content { display:block; }
  .nav-dropbtn { width:100%; text-align:left; padding:0.85rem 1.5rem; font-size:1rem; border-bottom:1px solid rgba(255,255,255,0.08); }
  .nav-dd-link { padding-left:2.5rem; }
}