/*
Theme Name: VideoGameMIDI Premium
Theme URI: https://videogamemidi.com
Author: Dunham Sound Design
Description: Premium dark WooCommerce theme for VideoGameMIDI.com.
Version: 1.0.0
Text Domain: videogamemidi
Requires at least: 6.4
Requires PHP: 7.4
*/

:root{
 --bg:#090a0c;--panel:#101216;--panel2:#15181d;--text:#f4f5f7;
 --muted:#a4a9b3;--line:rgba(255,255,255,.10);--accent:#c8ff5a;
 --accent2:#8ec5ff;--max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}
a{color:inherit}
.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}
.site-header{height:84px;border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;z-index:99;background:rgba(9,10,12,.90);backdrop-filter:blur(18px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo{font-family:Manrope,Arial,sans-serif;font-size:17px;letter-spacing:.17em;font-weight:700;text-decoration:none}
.logo span{font-weight:400;color:#aeb3bc}
.main-nav{display:flex;gap:30px;align-items:center}
.main-nav a{text-decoration:none;font-size:13px;color:#dfe2e7}
.header-actions{display:flex;gap:12px}
.btn,.button,button,input[type=submit],.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
 display:inline-flex!important;align-items:center;justify-content:center;min-height:48px;padding:0 22px!important;
 border:1px solid rgba(255,255,255,.18)!important;background:transparent!important;color:#fff!important;
 text-decoration:none!important;font-size:13px!important;font-weight:600!important;border-radius:0!important;cursor:pointer
}
.btn.primary,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{
 background:var(--accent)!important;color:#0a0b0d!important;border-color:var(--accent)!important
}
.btn:hover,.button:hover{transform:translateY(-2px)}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#c8ccd3;font-weight:600}
.hero{min-height:780px;display:flex;align-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero:before{content:"";position:absolute;inset:0;background:
 radial-gradient(60% 75% at 78% 40%,rgba(116,151,255,.16),transparent 65%),
 radial-gradient(45% 55% at 68% 58%,rgba(200,255,90,.09),transparent 70%),
 linear-gradient(90deg,#090a0c 0%,#090a0c 42%,rgba(9,10,12,.80) 58%,rgba(9,10,12,.26) 100%)}
.hero-copy{position:relative;z-index:3;width:min(650px,54vw);padding:100px 0}
.hero h1,.page-hero h1{font-family:Manrope,Arial,sans-serif;font-size:clamp(58px,7vw,106px);line-height:.91;letter-spacing:-.055em;margin:18px 0 28px;font-weight:500}
.hero h1 em{font-style:normal;color:#b9bec7;font-weight:300}
.hero p,.page-hero p{font-size:18px;line-height:1.65;color:#b7bbc3;max-width:760px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.visual{position:absolute;right:-4vw;top:50%;width:min(62vw,900px);height:620px;transform:translateY(-50%);perspective:1200px}
.roll{position:absolute;inset:80px 40px 30px 80px;transform:rotateX(59deg) rotateZ(-18deg);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.12);box-shadow:0 50px 120px rgba(0,0,0,.58)}
.roll:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px}
.note{position:absolute;height:11px;border-radius:2px;background:linear-gradient(90deg,var(--accent2),rgba(142,197,255,.35));box-shadow:0 0 28px rgba(142,197,255,.28)}
.note.a{width:36%;left:12%;top:28%}.note.b{width:20%;left:52%;top:36%}.note.c{width:48%;left:23%;top:48%;background:linear-gradient(90deg,var(--accent),rgba(200,255,90,.3))}
.note.d{width:27%;left:60%;top:59%}.note.e{width:24%;left:9%;top:68%}.note.f{width:40%;left:37%;top:77%}
.section{padding:112px 0;border-bottom:1px solid var(--line)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:48px}
h2{font-family:Manrope,Arial,sans-serif;font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-.045em;margin:10px 0 0;font-weight:500}
.copy{color:var(--muted);line-height:1.72}
.category-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.category-card{position:relative;min-height:300px;background:linear-gradient(145deg,#171a1f,#0f1115);border:1px solid var(--line);padding:28px;overflow:hidden;text-decoration:none}
.category-card.large{grid-column:span 6}.category-card.small{grid-column:span 3}
.category-card:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-80px;bottom:-100px;background:radial-gradient(circle,rgba(142,197,255,.28),transparent 65%)}
.category-card h3{position:absolute;left:28px;bottom:26px;margin:0;font-family:Manrope,Arial,sans-serif;font-size:30px;font-weight:500}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.product-card,.woocommerce ul.products li.product{background:var(--panel)!important;border:1px solid var(--line)!important;padding:0!important;overflow:hidden}
.product-cover{aspect-ratio:1.45/1;position:relative;background:radial-gradient(circle at 68% 38%,rgba(142,197,255,.32),transparent 35%),linear-gradient(140deg,#171a1f,#090a0c)}
.product-cover:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:24px 24px;transform:scale(1.25) rotate(-7deg)}
.product-body{padding:24px}
.product-body h3{font-family:Manrope,Arial,sans-serif;font-size:23px;margin:0 0 9px}
.meta{display:flex;justify-content:space-between;padding-top:22px;margin-top:22px;border-top:1px solid var(--line);font-size:12px}
.page-hero{padding:100px 0 74px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.site-footer{padding:70px 0 34px;background:#07080a}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:50px}
.site-footer h4{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#7f848d}
.site-footer a{display:block;color:#c7cbd2;text-decoration:none;font-size:13px;margin:12px 0}
.footnote{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:28px;margin-top:55px;color:#777c85;font-size:11px}
.woocommerce{padding:80px 0}
.woocommerce div.product p.price,.woocommerce div.product span.price,.woocommerce ul.products li.product .price{color:var(--accent)!important}
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:var(--panel)!important;color:#fff!important;border-top-color:var(--accent)!important}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce select{background:#0c0e11!important;color:#fff!important;border:1px solid var(--line)!important;padding:14px!important}
@media(max-width:900px){
 .main-nav{display:none}.hero-copy{width:100%}.visual{opacity:.35;right:-45%;width:110vw}
 .category-card.large,.category-card.small{grid-column:span 6}.product-grid,.two-col{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
 .wrap{width:min(calc(100% - 28px),var(--max))}.category-card.large,.category-card.small{grid-column:span 12}
 .footer-grid{grid-template-columns:1fr}.footnote{flex-direction:column;gap:15px}
}