:root{
  --bg:#0f1320; --panel:#171c2e; --card:#1d2336; --line:#2b3350;
  --ink:#eef1f8; --muted:#9aa4c4; --brand:#ffcf00; --brand2:#d01012;
  --green:#2ec16b; --red:#ff5d6c; --radius:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* the hidden attribute always wins */
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
h1,h2,h3{line-height:1.2}

/* header */
.site-header{position:sticky;top:0;z-index:30;background:rgba(15,19,32,.86);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{font-weight:800;letter-spacing:.3px}
.logo{color:var(--brand);margin-right:6px}
nav a{margin-left:18px;text-decoration:none;color:var(--muted);font-weight:600}
nav a:hover{color:var(--ink)}
nav a.muted{font-size:.85rem}
.lang-switch{margin-left:18px;font-weight:700;font-size:.85rem}
.lang-switch a{text-decoration:none;color:var(--muted);padding:0 2px}
.lang-switch a.on{color:var(--brand)}
.lang-switch .sep{color:#3a4570;margin:0 2px}
.copyright{font-size:.74rem;line-height:1.5;margin-top:14px;max-width:760px;color:#6f7aa0!important}

/* hero */
.hero{background:radial-gradient(1200px 400px at 70% -10%,#27314f 0,transparent 60%),
  linear-gradient(180deg,#141a2c,#0f1320);padding:54px 0 40px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(1.8rem,4vw,3rem);margin:0 0 8px}
.lead{color:var(--muted);max-width:620px;font-size:1.08rem}
.hero-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

/* buttons */
.btn{display:inline-block;padding:11px 20px;border-radius:999px;font-weight:700;
  text-decoration:none;border:1px solid transparent;cursor:pointer;font-size:1rem}
.btn-primary{background:var(--brand);color:#1a1500}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{background:#1b2236}
.btn-used{background:var(--green);color:#04210f}
.btn-used:hover{filter:brightness(1.06)}
.full{width:100%}

/* info */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:38px auto}
.info-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.info-card h3{margin:0 0 10px}
.info-card ul{margin:8px 0 0;padding-left:18px;color:var(--muted)}
.info-card p{color:var(--muted);margin:.4rem 0}
.iban{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink)!important;
  background:#11162a;padding:10px 12px;border-radius:10px;border:1px solid var(--line)}
.fineprint{font-size:.82rem;color:#7c86a8!important}

/* controls */
.controls{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:26px 0 14px}
.controls h2{margin:0}
.pill{background:#283154;color:var(--muted);font-size:.8rem;
  padding:3px 10px;border-radius:999px;margin-left:8px;font-weight:600}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filters input,.filters select{background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:.95rem}
.filters input[type=search]{min-width:210px}
.chk{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.9rem}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:18px;margin:8px 0 30px}
.sec{scroll-margin-top:76px}   /* offset the sticky header when scrolling to a section */
.sec-h{font-size:1.05rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;
  border-bottom:1px solid var(--line);padding-bottom:8px;margin:20px 0 14px}
.cstav{color:#c7d2f0;font-size:.82rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .12s,border-color .12s}
.card:hover{transform:translateY(-3px);border-color:#3a4570}
.thumb{position:relative;height:180px;background:#fff;display:flex;align-items:center;justify-content:center}
.thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;padding:10px}
.thumb .ph{color:#9aa4c4;font:700 14px system-ui;text-align:center;padding:10px}
.badges{position:absolute;top:8px;left:8px;z-index:2;display:flex;flex-direction:column;
  gap:5px;align-items:flex-start}
.badge{font-size:.7rem;font-weight:800;padding:3px 8px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.badge.retired{background:#3a2a12;color:#ffcf8f;border:1px solid #6a4a18}
.badge.sold{background:var(--red);color:#2a0006}
.badge.used{background:var(--green);color:#04210f}
.card.is-sold{opacity:.62}
.card.is-sold .thumb img{filter:grayscale(.7)}
.cbody{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1}
/* meta block is pushed to the bottom so set info always sits next to the price */
.cmeta{margin-top:auto;display:flex;flex-direction:column;gap:5px}
.ctheme{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.5px}
.cname{font-weight:700;font-size:1.02rem;margin:0;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.5em}
.cnum{color:var(--muted);font-size:.82rem}
.cfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-top:12px;margin-top:10px;border-top:1px solid var(--line)}
.price{font-size:1.32rem;font-weight:800;color:var(--brand)}
.price small{font-size:.66rem;color:var(--muted);font-weight:600;display:block}
.add{background:#283154;border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer}
.add:hover{background:#313d66}
.add.added{background:var(--green);color:#03210f;border-color:transparent}
.empty{text-align:center;color:var(--muted);padding:40px}

/* back to top */
.to-top{position:fixed;right:84px;bottom:18px;z-index:40;width:50px;height:50px;
  border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  font-size:1.4rem;font-weight:800;cursor:pointer;display:none;align-items:center;
  justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.to-top.show{display:flex}
.to-top:hover{background:#283154}

/* cart */
.cart{position:fixed;right:18px;bottom:18px;z-index:40}
.cart-toggle{background:var(--brand);color:#1a1500;border:none;border-radius:999px;
  padding:14px 18px;font-size:1.05rem;font-weight:800;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
.cart-panel{position:absolute;right:0;bottom:64px;width:340px;max-width:88vw;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.5)}
.cart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cart-items{list-style:none;margin:0 0 10px;padding:0;max-height:230px;overflow:auto}
.cart-items li{display:flex;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.cart-items .rm{background:none;border:none;color:var(--red);cursor:pointer;font-size:1rem}
.cart-empty{color:var(--muted);text-align:center;padding:14px 0}
.method{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px;
  color:var(--muted);font-size:.92rem}
.totals{margin:0 0 12px}
.totals div{display:flex;justify-content:space-between;margin:3px 0}
.totals dt,.totals dd{margin:0}
.totals .grand{font-weight:800;font-size:1.1rem;border-top:1px solid var(--line);
  padding-top:8px;margin-top:6px;color:var(--ink)}
.icon-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.05rem}

/* modal */
.modal{position:fixed;inset:0;z-index:60;background:rgba(4,7,16,.7);
  display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden]{display:none}   /* hidden attr must win over display:flex */
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:24px;width:440px;max-width:96vw;position:relative}
.modal-x{position:absolute;top:12px;right:14px}
.modal-card h3{margin:0 0 4px}
#reqForm{display:flex;flex-direction:column;gap:11px;margin-top:14px}
#reqForm label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;color:var(--muted);font-weight:600}
#reqForm input,#reqForm textarea{background:var(--card);border:1px solid var(--line);
  color:var(--ink);border-radius:10px;padding:10px 12px;font-size:1rem;font-family:inherit}
.form-summary{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:.9rem;color:var(--muted)}
.form-msg{margin:0;padding:10px 12px;border-radius:10px;font-weight:600}
.form-msg.ok{background:#0f3a22;color:#9af2bf}
.form-msg.err{background:#3a1116;color:#ffb3bb}
.muted{color:var(--muted)}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:26px 0 50px;color:var(--muted)}
.site-footer a{color:var(--brand)}

@media(max-width:760px){
  .info-grid{grid-template-columns:1fr}
  nav a{margin-left:12px}
  .lang-switch{margin-left:12px}
}