/*
Theme Name: ElectroSell
Theme URI: https://example.com/electrosell
Author: You
Author URI: https://example.com
Description: A modern, conversion-focused WooCommerce theme with a clean product grid, bold CTAs, and speed-first design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: electrosell
Tags: e-commerce, wooCommerce, responsive, accessibility-ready, blog
*/

:root {
  --color-bg: #0b0f14;
  --color-surface: #121822;
  --color-card: #151c27;
  --color-primary: #3b82f6;
  --color-accent: #22c55e;
  --color-text: #e5e7eb;
  --color-muted: #9ca3af;
  --radius: 14px;
  --shadow: 0 10px 24px rgba(0,0,0,.25);
  --container: 1200px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--color-bg); color: var(--color-text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji"; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(8px); background: rgba(11,15,20,.75); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav { display:flex; align-items:center; gap:20px; height:64px; }
.brand { font-weight:700; letter-spacing:.3px; font-size: 20px; }
.spacer { flex:1; }
.button, .wp-block-button__link { display:inline-block; padding:12px 18px; border-radius: var(--radius); background: var(--color-primary); color:white; box-shadow: var(--shadow); border: 0; cursor: pointer; font-weight:600; }
.button:hover { filter: brightness(1.05); }

.hero { padding: 72px 0 36px; background: radial-gradient(1200px 600px at 10% -10%, rgba(59, 130, 246, .15), transparent), radial-gradient(900px 600px at 90% -20%, rgba(34, 197, 94, .10), transparent); }
.hero .title { font-size: clamp(28px, 4vw, 52px); line-height:1.05; margin: 0 0 12px; }
.hero .subtitle { color: var(--color-muted); max-width: 720px; margin: 0 0 24px; }
.hero .cta-row { display:flex; gap:12px; flex-wrap: wrap; }

.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.card { grid-column: span 3; background: var(--color-card); border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); overflow:hidden; transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card .thumb { aspect-ratio: 4/3; width:100%; object-fit:cover; background:#0f172a; }
.card .body { padding: 14px; }
.card .name { margin:0; font-size: 16px; line-height:1.3; }
.card .price { color: #fff; font-weight:700; margin-top: 6px; }
.card .meta { color: var(--color-muted); font-size: 13px; }

.badge { position:absolute; top:10px; left:10px; background: linear-gradient(90deg, #22c55e, #16a34a); color:#03110a; padding:6px 10px; border-radius: 999px; font-weight:700; font-size:12px; }

.site-footer { margin-top: 40px; background: var(--color-surface); border-top: 1px solid rgba(255,255,255,.06); }
.site-footer .cols { display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; padding: 32px 0; }
.site-footer h4 { margin: 0 0 10px; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin: 6px 0; color: var(--color-muted); }
.copy { border-top:1px solid rgba(255,255,255,.06); padding: 12px 0; color: var(--color-muted); font-size: 13px; }

.woocommerce .products.columns-4 li.product { background: var(--color-card); border-radius: var(--radius); padding: 12px; }
.woocommerce ul.products li.product .button { background: var(--color-primary); border-radius: 10px; }
.woocommerce span.onsale { background: #22c55e; color:#052e17; }

@media (max-width: 1024px) {
  .card { grid-column: span 4; }
  .site-footer .cols { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .card { grid-column: span 12; }
  .nav {
    gap: 12px;
  }
}