/*
Theme Name: Motionsports
Theme URI: https://motionsports.nl
Author: Motionsports.nl
Description: Luxe darkmode WooCommerce theme (trendy, snel, minimal).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: motionsports
Tags: dark, e-commerce, woo-commerce, minimal, luxury
*/

:root{
  --bg:#07080b;
  --panel:#0b0d12;
  --panel2:#0f121a;
  --text:#e9ecf2;
  --muted:#a8b0c0;
  --line:rgba(255,255,255,.08);
  --accent:#8b5cf6; /* purple */
  --accent2:#22c55e; /* green */
  --danger:#ef4444;
  --shadow: 0 12px 40px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 26px;
  --max: 1200px;
  --pad: clamp(16px, 2.4vw, 28px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 500px at 18% -10%, rgba(139,92,246,.22), transparent 55%),
    radial-gradient(900px 500px at 92% 12%, rgba(34,197,94,.14), transparent 55%),
    radial-gradient(700px 400px at 50% 110%, rgba(255,255,255,.06), transparent 60%),
    var(--bg);
  min-height:100vh;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%; height:auto; display:block}
input, select, textarea, button{font:inherit}
button{cursor:pointer}
::selection{background: rgba(139,92,246,.35); color: var(--text);}

.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.pill{
  display:inline-flex; gap:8px; align-items:center;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding:8px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(7,8,11,.55);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px var(--pad);
  max-width:var(--max); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight: 750;
  letter-spacing:.2px;
}
.brand .mark{
  width:34px; height:34px; border-radius: 12px;
  background: radial-gradient(circle at 30% 30%, rgba(139,92,246,.9), rgba(34,197,94,.55));
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 14px 34px rgba(139,92,246,.20);
}
.brand span{font-size: 15px}
.nav{
  display:flex; align-items:center; gap:16px;
}
.nav a{
  color: var(--muted);
  padding: 10px 10px;
  border-radius: 12px;
}
.nav a:hover{color: var(--text); background: rgba(255,255,255,.04)}
.header-actions{display:flex; align-items:center; gap:10px}
.icon-btn{
  width:40px; height:40px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  display:grid; place-items:center;
}
.icon-btn:hover{background: rgba(255,255,255,.06)}
.menu-toggle{display:none}

/* Mobile nav */
@media (max-width: 900px){
  .menu-toggle{display:grid}
  .nav{display:none}
  .nav.open{
    display:flex;
    position:absolute; left:var(--pad); right:var(--pad); top:64px;
    flex-direction:column; gap:8px;
    padding: 12px;
    border-radius: var(--radius2);
    background: rgba(11,13,18,.92);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav.open a{padding: 12px 12px}
}

/* Hero */
.hero{
  padding: 52px 0 18px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:stretch;
}
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; }
}
.hero-card{padding: clamp(18px, 2.6vw, 28px)}
.kicker{
  display:flex; gap:10px; align-items:center;
  color: var(--muted);
  font-size: 13px;
}
.kicker .dot{
  width:8px; height:8px; border-radius:999px;
  background: var(--accent2);
  box-shadow: 0 0 0 6px rgba(34,197,94,.10);
}
h1,h2,h3{margin:0 0 10px}
h1{
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.5px;
}
.sub{
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  margin-top: 8px;
}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 650;
  letter-spacing:.2px;
}
.btn:hover{background: rgba(255,255,255,.06)}
.btn.primary{
  border-color: rgba(139,92,246,.35);
  background: linear-gradient(135deg, rgba(139,92,246,.75), rgba(34,197,94,.30));
  box-shadow: 0 18px 45px rgba(139,92,246,.18);
}
.btn.primary:hover{opacity:.98}
.hero-side{
  padding: clamp(18px, 2.6vw, 28px);
  display:flex; flex-direction:column; justify-content:space-between;
}
.metrics{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-top: 14px;
}
.metric{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 14px;
}
.metric b{display:block; font-size: 18px; margin-bottom: 3px}
.metric small{color: var(--muted)}

/* Content area */
.site-main{padding: 18px 0 50px}
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Typography in content */
.entry-title{
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.3px;
}
.entry-meta{color:var(--muted); font-size:13px; margin-top:6px}
.entry-content{color: rgba(233,236,242,.92); line-height:1.7}
.entry-content p{margin: 0 0 14px}
.entry-content h2{margin-top: 28px}
.entry-content a{color: rgba(139,92,246,.95); text-decoration: underline; text-underline-offset: 3px}

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  padding: 26px 0;
  color: var(--muted);
}
.footer-grid{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 14px; flex-wrap:wrap;
}
.footer-grid a{color: var(--muted)}
.footer-grid a:hover{color: var(--text)}

/* WooCommerce base */
.woocommerce .woocommerce-breadcrumb{
  color: var(--muted);
  margin: 0 0 18px;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  border-radius: 16px !important;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--text) !important;
  font-weight: 650 !important;
  padding: 12px 16px !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background: rgba(255,255,255,.07) !important;
}

.woocommerce div.product .product_title{
  letter-spacing: -0.4px;
}

.woocommerce .price, .woocommerce div.product p.price, .woocommerce div.product span.price{
  color: rgba(34,197,94,.95) !important;
  font-weight: 750;
}

.woocommerce ul.products{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px){
  .woocommerce ul.products{grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (max-width: 760px){
  .woocommerce ul.products{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 420px){
  .woocommerce ul.products{grid-template-columns: 1fr;}
}

.woocommerce ul.products li.product{
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  padding: 12px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.woocommerce ul.products li.product:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.05);
  border-color: rgba(139,92,246,.28);
}
.woocommerce ul.products li.product a img{
  border-radius: 16px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: 14px;
  color: var(--text);
  margin: 10px 0 6px;
}
.woocommerce ul.products li.product .price{
  margin: 0 0 10px;
}
.woocommerce span.onsale{
  border-radius: 999px !important;
  background: rgba(139,92,246,.9) !important;
  color: white !important;
  box-shadow: 0 10px 25px rgba(139,92,246,.22);
}

/* Forms */
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select{
  border-radius: 16px !important;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,.03) !important;
  color: var(--text) !important;
  padding: 12px 14px !important;
}
.woocommerce form .form-row label{color: var(--muted)}

/* Notices */
.woocommerce-message, .woocommerce-info{
  border-radius: var(--radius2);
  border: 1px solid rgba(34,197,94,.30);
  background: rgba(34,197,94,.08);
}
.woocommerce-error{
  border-radius: var(--radius2);
  border: 1px solid rgba(239,68,68,.30);
  background: rgba(239,68,68,.10);
}

/* Utility */
.hr{height:1px; background: var(--line); margin: 16px 0;}

/* Shop/grid knop */
.woocommerce.archive ul.products li.product a.button {
  padding: 25px 25px !important;
  font-size: 14px !important;
  border-radius: 24px !important;