/* ==========================================================================
   H4CK3X — brand + WooCommerce overrides (Dark Matter UV)
   Forrás: h4ck3x-design-system tokenek + contracts/woocommerce.md
   ========================================================================== */
:root{
  --h4x-red:#ff1a1a; --h4x-red-hover:#ff3333; --h4x-black:#060606;
  --h4x-surface:#111; --h4x-card:#161616; --h4x-border:rgba(255,26,26,.2);
  --h4x-text:#f2f2f2; --h4x-muted:#9a9a9a;
  --h4x-glow:0 0 10px rgba(255,26,26,.5); --h4x-glow-lg:0 0 20px rgba(255,26,26,.6),0 0 40px rgba(255,26,26,.2);
  --h4x-font-display:'Bebas Neue',sans-serif; --h4x-font-body:'Barlow',system-ui,sans-serif; --h4x-font-mono:'JetBrains Mono',monospace;
}
body{ background:var(--h4x-black); color:var(--h4x-text); font-family:var(--h4x-font-body); }
h1,h2,h3,h4,.wp-block-heading{ font-family:var(--h4x-font-display); letter-spacing:.03em; }
a{ color:var(--h4x-red); }
a:hover{ color:var(--h4x-red-hover); }

/* --- Gombok (neon solid) --- */
.wp-element-button,.wc-block-components-button,.button,button.button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.added_to_cart{
  background:var(--h4x-red)!important; color:#000!important; border:2px solid var(--h4x-red)!important;
  font-family:var(--h4x-font-display); text-transform:uppercase; letter-spacing:.1em;
  border-radius:.2rem; box-shadow:var(--h4x-glow); transition:all .2s ease;
}
.wp-element-button:hover,.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce #respond input#submit:hover{
  background:var(--h4x-red-hover)!important; box-shadow:var(--h4x-glow-lg); transform:translateY(-1px);
}

/* --- Termékkártyák --- */
.woocommerce ul.products li.product,.wc-block-grid__product{
  background:var(--h4x-card); border:1px solid var(--h4x-border); border-radius:.4rem;
  padding:1rem; transition:all .25s ease;
}
.woocommerce ul.products li.product:hover,.wc-block-grid__product:hover{
  border-color:rgba(255,26,26,.7); box-shadow:var(--h4x-glow-lg); transform:translateY(-3px);
}
.woocommerce ul.products li.product .price,.wc-block-grid__product-price{
  color:var(--h4x-red); font-family:var(--h4x-font-display); font-size:1.4rem;
}
.woocommerce span.onsale,.wc-block-components-product-sale-badge{
  background:var(--h4x-red); color:#000; font-family:var(--h4x-font-display); box-shadow:var(--h4x-glow);
}

/* --- Header/Footer akcent --- */
.wp-block-site-title a{ font-family:var(--h4x-font-display); color:var(--h4x-text); letter-spacing:.05em; }
header.wp-block-template-part{ border-bottom:1px solid var(--h4x-border); }
footer.wp-block-template-part{ border-top:1px solid var(--h4x-border); background:var(--h4x-surface); }

/* --- Űrlapmezők (checkout/account) --- */
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce .select2-container,
.wc-block-components-text-input input{
  background:var(--h4x-surface); color:var(--h4x-text); border:1px solid var(--h4x-border); border-radius:.2rem;
}
.woocommerce form .form-row input.input-text:focus{ outline:2px solid var(--h4x-red); box-shadow:0 0 5px rgba(255,26,26,.4); }

/* --- Natív select (variáció-dropdown a terméklapon): sötét háttéren világos szöveg.
       Enélkül a böngésző alap fekete betűje a fekete témán olvashatatlan. --- */
.woocommerce select, .woocommerce .variations select, .woocommerce form .form-row select,
select{
  background-color:var(--h4x-surface); color:var(--h4x-text);
  border:1px solid var(--h4x-border); border-radius:.2rem; padding:.45em .6em;
}
select option{ background-color:var(--h4x-surface); color:var(--h4x-text); }
.woocommerce .variations select:focus, select:focus{ outline:2px solid var(--h4x-red); }
/* mennyiség-mező ugyanígy */
.woocommerce .quantity .qty{ background-color:var(--h4x-surface); color:var(--h4x-text); border:1px solid var(--h4x-border); }

/* --- Section-label / kis akcentek --- */
.h4x-label{ font-family:var(--h4x-font-mono); letter-spacing:.3em; text-transform:uppercase; color:var(--h4x-red); font-size:.75rem; }

/* --- Home hero --- */
.h4x-hero h1{ text-shadow:0 0 30px rgba(255,26,26,.35); margin-top:.5rem; }
.h4x-hero-note{ font-family:var(--h4x-font-mono); color:var(--h4x-muted); font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; }

/* --- Footer navigációs linkek (halk alap, piros hover) --- */
footer.wp-block-template-part .wp-block-navigation a{ color:var(--h4x-text); }
footer.wp-block-template-part .wp-block-navigation a:hover{ color:var(--h4x-red); }
/* Footer jogi megjegyzés (contract Legal-oszlop: "Merch sold by REDLINE MANAGEMENT LTD (UK).") */
.h4x-footer-note{ color:var(--h4x-muted); font-size:.75rem; max-width:24ch; margin-top:.6rem; }

/* --- COMING SOON (Drop 01) — a szomoru szurke "out of stock" helyett brand-badge --- */
.wp-block-woocommerce-product-image{ position:relative; }
.h4x-coming-badge{
  position:absolute; top:.6rem; left:.6rem; z-index:2; pointer-events:none;
  background:rgba(6,6,6,.88); color:var(--h4x-red); border:1px solid var(--h4x-red);
  border-radius:.2rem; padding:.3em .6em; font-family:var(--h4x-font-mono);
  font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; box-shadow:var(--h4x-glow);
}
/* Terméklap availability-sor ugyanebben a stilusban */
p.stock.out-of-stock, .woocommerce-variation-availability p.stock{
  display:inline-block; background:rgba(6,6,6,.88); color:var(--h4x-red)!important;
  border:1px solid var(--h4x-red); border-radius:.2rem; padding:.35em .7em;
  font-family:var(--h4x-font-mono); font-size:.75rem; letter-spacing:.15em;
  text-transform:uppercase; box-shadow:var(--h4x-glow);
}

/* --- Outline gomb (hero masodlagos CTA) --- */
.is-style-outline .wp-element-button, .is-style-outline.wp-block-button .wp-block-button__link{
  background:transparent!important; color:var(--h4x-red)!important;
}
.is-style-outline .wp-element-button:hover{ background:rgba(255,26,26,.12)!important; }

/* --- Front page szekciok --- */
.h4x-sec{ border-top:1px solid var(--h4x-border); }
.h4x-sec-sub{ color:var(--h4x-muted); }

/* Shop by Game kartyak */
.h4x-game-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.h4x-game-card{
  display:flex; flex-direction:column; gap:.35rem; background:var(--h4x-card);
  border:1px solid var(--h4x-border); border-radius:.4rem; padding:1.2rem;
  text-decoration:none; color:var(--h4x-text); transition:all .25s ease;
}
.h4x-game-card:hover{ border-color:rgba(255,26,26,.7); box-shadow:var(--h4x-glow-lg); transform:translateY(-3px); color:var(--h4x-text); }
.h4x-game-card strong{ font-family:var(--h4x-font-display); font-size:1.5rem; letter-spacing:.04em; line-height:1.1; }
.h4x-game-pair{ color:var(--h4x-muted); font-size:.9rem; }
.h4x-game-cta{ color:var(--h4x-red); font-family:var(--h4x-font-mono); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; margin-top:.4rem; }

/* Drop 02 teaser (ideiglenes preview mockupok) */
.h4x-drop02-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.h4x-drop02-grid figure{ position:relative; margin:0; border:1px solid var(--h4x-border); border-radius:.4rem; overflow:hidden; background:var(--h4x-card); }
.h4x-drop02-grid img{ display:block; width:100%; height:auto; max-width:100%; }
.h4x-lab-tag{
  position:absolute; top:.6rem; left:.6rem; z-index:2; background:rgba(6,6,6,.88);
  color:var(--h4x-red); border:1px solid var(--h4x-red); border-radius:.2rem;
  padding:.3em .6em; font-family:var(--h4x-font-mono); font-size:.65rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.h4x-drop02-grid figcaption{ color:var(--h4x-muted); font-size:.75rem; font-family:var(--h4x-font-mono); letter-spacing:.05em; padding:.6rem .8rem; }

/* Why H4CK3X */
.h4x-why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.h4x-why-card{ background:var(--h4x-card); border:1px solid var(--h4x-border); border-radius:.4rem; padding:1.4rem; }
.h4x-why-card h3{ font-family:var(--h4x-font-display); color:var(--h4x-red); font-size:1.35rem; letter-spacing:.05em; margin:0 0 .5rem; }
.h4x-why-card p{ margin:0; color:var(--h4x-muted); line-height:1.55; }

/* --- Elorendeles-urlap --- */
.h4x-preorder{
  background:var(--h4x-card); border:1px solid var(--h4x-border); border-radius:.4rem;
  padding:1.6rem; margin:2.5rem auto 0; max-width:560px; scroll-margin-top:2rem;
}
.h4x-preorder-title{ margin:.3rem 0 .4rem; font-size:1.8rem; }
.h4x-preorder-sub{ color:var(--h4x-muted); font-size:.95rem; margin-top:0; }
.h4x-preorder-form p{ margin:0 0 .9rem; }
.h4x-preorder-form label{ display:block; font-family:var(--h4x-font-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--h4x-muted); margin-bottom:.3rem; }
.h4x-preorder-form input[type=text], .h4x-preorder-form input[type=email]{
  width:100%; background:var(--h4x-surface); color:var(--h4x-text);
  border:1px solid var(--h4x-border); border-radius:.2rem; padding:.55em .7em;
  font-family:var(--h4x-font-body); font-size:1rem;
}
.h4x-preorder-form input:focus{ outline:2px solid var(--h4x-red); box-shadow:0 0 5px rgba(255,26,26,.4); }
.h4x-preorder .h4x-consent label{ display:flex; gap:.55em; align-items:flex-start; text-transform:none; letter-spacing:0; font-family:var(--h4x-font-body); font-size:.8rem; line-height:1.5; }
.h4x-preorder .h4x-consent input{ margin-top:.2em; accent-color:var(--h4x-red); }
.h4x-preorder-submit{ width:100%; padding:.8em 1em; cursor:pointer; }
/* Honeypot — vizualisan rejtve, bot latja */
.h4x-preorder .h4x-hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }
.h4x-preorder-notice{ padding:.7em .9em; border-radius:.2rem; font-family:var(--h4x-font-mono); font-size:.8rem; letter-spacing:.05em; margin-bottom:1rem; }
.h4x-preorder-notice.ok{ border:1px solid var(--h4x-red); color:var(--h4x-text); box-shadow:var(--h4x-glow); }
.h4x-preorder-notice.err{ border:1px solid #ffaa00; color:#ffaa00; }

/* --- Scrollbar --- */
::-webkit-scrollbar{ width:8px; } ::-webkit-scrollbar-track{ background:#0a0a0a; }
::-webkit-scrollbar-thumb{ background:var(--h4x-red); border-radius:4px; }

/* --- Fókusz (WCAG) --- */
a:focus-visible,button:focus-visible,input:focus-visible,.wp-element-button:focus-visible{
  outline:2px solid var(--h4x-red); outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }