:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#6b7280; --line:#e5e7eb;
  --brand:#0b1220; --accent:#ff1a1a; --accent2:#09c6ff; --whatsapp:#25D366;
  --header-h:56px; --table-sticky-top:calc(var(--header-h) + 4px);
}
[data-theme='dark']{
  --bg:#0b1220; --fg:#e6e8ec; --muted:#a3aab8; --line:#1f2937;
  --brand:#0b1220; --accent:#ff1a1a; --accent2:#09c6ff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg)}

/* Header */
header{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:1000}
.hamburger{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer}
.hamburger span{width:18px;height:2px;background:var(--fg);display:block;position:relative}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--fg)}
.hamburger span::before{top:-6px}.hamburger span::after{top:6px}
.brand{font-weight:700;display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand img{height:28px;width:auto}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.notice{margin-left:auto;font-size:12px;color:var(--muted);display:none}
.theme-toggle{margin-left:8px}
.toggle-btn{border:1px solid var(--line);padding:6px 10px;border-radius:10px;cursor:pointer;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;font-weight:700}

/* Layout */
.layout{display:flex}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:900;display:none}
.overlay.open{display:block}
aside{width:300px;max-width:85vw;height:100dvh;position:fixed;top:0;left:-320px;background:#0b1220;color:#fff;border-right:1px solid #0f172a;transition:left .28s ease;padding:14px;z-index:950}
aside.open{left:0}
.aside-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.close-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid #1f2937;background:#111827;color:#fff;cursor:pointer}
.menu-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af;margin:10px 0 6px}
nav a{display:block;padding:10px 10px;border-radius:10px;text-decoration:none;color:#e5e7eb;border:1px solid transparent}
nav a:hover{background:#111827;border-color:#1f2937}
nav a.active{background:#111827;border-color:#374151}

main{width:100%;padding:14px;max-width:1100px;margin:0 auto}
.page-title{font-size:20px;font-weight:800;margin:10px 0 6px}
.sub{font-size:12px;color:var(--muted)}
.callout{border:1px dashed var(--line);padding:10px;border-radius:10px;background:rgba(0,0,0,0.02);margin-top:8px}
.tags .tag{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;font-size:12px;padding:2px 6px;border-radius:6px;margin-right:8px}

/* Table wrapper */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px;margin-top:10px;background:var(--bg);position:relative}
/* Ensure sticky works relative to viewport; wrapper only scrolls horizontally */
table.xt{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;min-width:760px;background:var(--bg)}

/* Sticky header fix — make THEAD sticky, not each TH, to avoid offset glitches across browsers */
.xt thead{position:sticky;top:var(--table-sticky-top);z-index:100;backdrop-filter:saturate(140%) blur(0px);}
.xt thead th{position:sticky;top:0;background:var(--bg);z-index:101;text-align:left;font-weight:800;border-bottom:2px solid var(--line);padding:12px 10px;line-height:1.2}
.xt tbody td{padding:10px;vertical-align:middle;border-bottom:1px solid var(--line);background-clip:padding-box}
.xt tbody tr:nth-child(even) td{background:rgba(0,0,0,0.02)}
.xt .wa-btn{display:inline-block;padding:8px 10px;border-radius:8px;text-decoration:none;background:var(--whatsapp);color:#fff;font-weight:700;white-space:nowrap}

.scroll-hint{font-size:12px;color:var(--muted);margin-top:6px}

/* Cards / grids */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.card{grid-column:span 12;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg)}
.card h3{margin:0 0 6px 0;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:14px}
@media(min-width:640px){.card{grid-column:span 6}}
@media(min-width:1024px){.card{grid-column:span 4}}

/* Footer */
footer{border-top:1px solid var(--line);padding:10px 12px;color:var(--muted);font-size:12px;margin-top:18px}

/* Responsive tweaks */
@media(min-width:768px){.notice{display:block}}
@media(max-width:480px){
  .page-title{font-size:18px}
  table.xt{font-size:13px;min-width:720px}
  header{gap:8px}
  .brand img{height:24px}
}


/* Product cards */
.product-grid { align-items: stretch; }
.product-card { display:grid; grid-template-columns: 1fr; grid-template-areas: 'img' 'body'; gap:12px; align-items:start; }
.product-card .pc-img { grid-area: img; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:10px; border:1px solid var(--line); background:#0b1220; }
.product-card .pc-img img { width:100%; height:100%; object-fit:cover; display:block; }
.product-card .pc-body h3 { margin:0 0 6px 0; font-size:18px; }
.product-card .pc-specs { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }
.product-card .pc-specs span { font-size:13px; color:var(--muted); border:1px solid var(--line); padding:4px 6px; border-radius:8px; background:rgba(0,0,0,0.02); }
.product-card .pc-buy { display:flex; align-items:center; gap:10px; justify-content:space-between; }
.product-card .pc-price { font-weight:800; font-size:18px; }
@media (max-width: 720px) {
  .product-card { display:grid; grid-template-columns: 1fr; grid-template-areas: 'img' 'body'; gap:12px; align-items:start; }
}


/* Toolbar */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}
.toolbar input[type="search"]{border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:220px;background:var(--bg);color:var(--fg)}
.toolbar select{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg);color:var(--fg)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;z-index:1200;padding:16px}
.modal.open{display:grid;place-items:center}
.modal__box{background:var(--bg);color:var(--fg);border-radius:16px;border:1px solid var(--line);max-width:920px;width:100%;display:grid;grid-template-columns:340px 1fr;gap:14px;position:relative;max-height:90dvh;overflow:auto}
.modal__close{position:absolute;top:10px;right:10px;border:1px solid var(--line);background:transparent;color:var(--fg);border-radius:10px;padding:6px 10px;cursor:pointer}
.modal__img{min-height:220px;border-right:1px solid var(--line);background:#0b1220;display:grid;place-items:center}
.modal__img img{width:100%;height:100%;object-fit:cover;border-top-left-radius:16px;border-bottom-left-radius:16px}
.modal__body{padding:14px}
.modal__title{margin:0 0 8px 0;font-size:20px;font-weight:800}
.modal__specs{display:flex;flex-wrap:wrap;gap:8px}
.modal__specs span{font-size:13px;color:var(--muted);border:1px solid var(--line);padding:4px 6px;border-radius:8px;background:rgba(0,0,0,0.02)}
.modal__actions{margin-top:12px;display:flex;gap:10px;align-items:center}
@media(max-width:760px){.modal__box{grid-template-columns:1fr}.modal__img img{border-radius:16px 16px 0 0}}

/* Minor product-card tweak */
.product-card .pc-buy{gap:12px;flex-wrap:wrap}
.product-card .pc-detail{border:none}

.vat-note{font-size:12px;color:var(--muted);margin:4px 0 8px}

/* Price range inputs */
.toolbar .price-range{display:flex;align-items:center;gap:8px;margin-right:8px}
.toolbar .price-range input[type="number"]{border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:120px;background:var(--bg);color:var(--fg)}
.toolbar .price-range .sep{color:var(--muted);font-size:14px}


/* Robust image height fallback for product cards */
.product-card .pc-img{position:relative}
.product-card .pc-img::before{content:"";display:block;padding-top:56.25%} /* 16:9 fallback when aspect-ratio unsupported */
.product-card .pc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}


/* Mobile-friendly toolbar layout */
@media(max-width: 640px){
  .toolbar{gap:10px;flex-wrap:wrap}
  .toolbar-left,.toolbar-right{display:flex;gap:8px;flex-wrap:wrap;width:100%}
  .toolbar input[type="search"]{flex:1;min-width:0;width:100%}
  .toolbar .price-range{width:100%}
  .toolbar .price-range input[type="number"]{flex:1;min-width:0;width:100%}
  .toolbar select{width:100%}
}