/*
Theme Name: GenMyth
Theme URI: https://instagram.com/genmyth_
Author: Soddy
Author URI: https://instagram.com/genmyth_
Description: Premium streetwear WooCommerce theme for GenMyth. Dark & yellow, Gen Z aesthetic, built for fast conversions. Support via Instagram @genmyth_.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: genmyth
Tags: e-commerce, dark, one-column, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   0. ROOT VARIABLES
   ========================================================================== */
:root{
  --gm-black: #0a0a0b;
  --gm-black-soft: #131315;
  --gm-black-card: #18181b;
  --gm-yellow: #FFD400;
  --gm-yellow-dim: #d9b400;
  --gm-white: #f5f5f5;
  --gm-grey: #9a9a9f;
  --gm-border: #2a2a2e;
  --gm-radius: 10px;
  --gm-max-width: 1280px;
  --gm-font-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --gm-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gm-transition: 220ms cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   1. RESET / BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--gm-black);
  color:var(--gm-white);
  font-family:var(--gm-font-body);
  margin:0;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family:var(--gm-font-display);
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--gm-white);
  margin:0 0 16px;
}
.container{ max-width:var(--gm-max-width); margin:0 auto; padding:0 24px; }
section{ padding:70px 0; }

/* ==========================================================================
   2. HEADER
   ========================================================================== */
.gm-header{
  position:sticky; top:0; z-index:999;
  background:rgba(10,10,11,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gm-border);
}
.gm-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:var(--gm-max-width); margin:0 auto;
}
.gm-logo{
  font-family:var(--gm-font-display);
  font-size:28px; letter-spacing:2px; color:var(--gm-white);
}
.gm-logo span{ color:var(--gm-yellow); }
.gm-nav ul{ display:flex; gap:32px; }
.gm-nav a{
  font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:0.5px;
  position:relative; padding:6px 0;
}
.gm-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--gm-yellow); transition:width var(--gm-transition);
}
.gm-nav a:hover::after{ width:100%; }
.gm-header-icons{ display:flex; align-items:center; gap:20px; }
.gm-cart-icon{ position:relative; font-size:20px; }
.gm-cart-count{
  position:absolute; top:-8px; right:-10px;
  background:var(--gm-yellow); color:#000; font-size:11px; font-weight:700;
  border-radius:50%; width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
}
.gm-burger{ display:none; font-size:24px; background:none; border:none; color:var(--gm-white); cursor:pointer; }

/* ==========================================================================
   3. HERO / HOMEPAGE
   ========================================================================== */
.gm-hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background:radial-gradient(circle at 50% 20%, #1c1c1f 0%, var(--gm-black) 70%);
}
.gm-hero-content{ position:relative; z-index:2; max-width:820px; padding:0 20px; }
.gm-hero h1{
  font-size:clamp(46px,9vw,110px);
  line-height:0.95;
  margin-bottom:20px;
}
.gm-hero h1 .gm-outline{
  -webkit-text-stroke:2px var(--gm-yellow);
  color:transparent;
}
.gm-hero p{ color:var(--gm-grey); font-size:18px; margin-bottom:32px; }
.gm-hero-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.gm-btn{
  display:inline-block; padding:16px 36px;
  font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:14px;
  border-radius:6px; cursor:pointer; border:2px solid transparent;
  transition:transform var(--gm-transition), background var(--gm-transition), color var(--gm-transition);
}
.gm-btn:hover{ transform:translateY(-3px); }
.gm-btn-primary{ background:var(--gm-yellow); color:#0a0a0b; }
.gm-btn-primary:hover{ background:#fff; }
.gm-btn-outline{ border-color:var(--gm-yellow); color:var(--gm-yellow); }
.gm-btn-outline:hover{ background:var(--gm-yellow); color:#0a0a0b; }

/* Floating coins — pure CSS, GPU-accelerated transforms only (no layout thrash) */
.gm-coins{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.gm-coin{
  position:absolute;
  width:70px; height:70px;
  will-change:transform;
}
.gm-coin svg{ width:100%; height:100%; }
.gm-coin--1{ top:12%; left:10%; animation:gmFloat1 7s ease-in-out infinite; }
.gm-coin--2{ top:65%; left:82%; width:50px; height:50px; animation:gmFloat2 9s ease-in-out infinite; }
.gm-coin--3{ top:20%; left:78%; width:40px; height:40px; animation:gmFloat3 6s ease-in-out infinite; }

@keyframes gmFloat1{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-28px) rotate(180deg); }
}
@keyframes gmFloat2{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(24px) rotate(-160deg); }
}
@keyframes gmFloat3{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(-18px,-18px) rotate(220deg); }
}
@media (prefers-reduced-motion: reduce){
  .gm-coin{ animation:none !important; }
}

/* ==========================================================================
   4. TRUST BAR
   ========================================================================== */
.gm-trust-bar{
  display:flex; flex-wrap:wrap; justify-content:center; gap:40px;
  padding:28px 0; border-top:1px solid var(--gm-border); border-bottom:1px solid var(--gm-border);
  background:var(--gm-black-soft);
}
.gm-trust-item{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--gm-grey); text-transform:uppercase; letter-spacing:0.5px; }
.gm-trust-item strong{ color:var(--gm-yellow); }

/* ==========================================================================
   5. PRODUCTS / SHOP GRID (WooCommerce overrides)
   ========================================================================== */
ul.products{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:1024px){ ul.products{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){ ul.products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ ul.products{ grid-template-columns:1fr; } }

ul.products li.product{
  background:var(--gm-black-card);
  border:1px solid var(--gm-border);
  border-radius:var(--gm-radius);
  padding:16px; text-align:left;
  transition:transform var(--gm-transition), border-color var(--gm-transition);
  list-style:none;
}
ul.products li.product:hover{ transform:translateY(-6px); border-color:var(--gm-yellow); }
ul.products li.product img{ border-radius:6px; margin-bottom:14px; aspect-ratio:1/1.1; object-fit:cover; }
ul.products li.product .woocommerce-loop-product__title{ font-size:15px; font-weight:600; color:var(--gm-white); text-transform:none; }
ul.products li.product .price{ color:var(--gm-yellow) !important; font-weight:700; font-size:16px; }
ul.products li.product .price del{ color:var(--gm-grey); opacity:.7; }
ul.products li.product .button{
  display:block; margin-top:12px; width:100%; text-align:center;
  background:transparent; border:1.5px solid var(--gm-yellow); color:var(--gm-yellow) !important;
  padding:10px; border-radius:6px; font-weight:700; text-transform:uppercase; font-size:12px;
  transition:all var(--gm-transition);
}
ul.products li.product .button:hover{ background:var(--gm-yellow); color:#000 !important; }

/* ==========================================================================
   6. SINGLE PRODUCT PAGE
   ========================================================================== */
.single-product div.product{
  display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start;
}
@media (max-width:900px){ .single-product div.product{ grid-template-columns:1fr; } }
.single-product .woocommerce-product-gallery img{ border-radius:var(--gm-radius); border:1px solid var(--gm-border); }
.single-product .product_title{ font-size:38px; }
.single-product p.price{ font-size:26px; color:var(--gm-yellow); font-weight:700; margin-bottom:20px; }
.single-product .variations{ margin-bottom:20px; }
.single-product .variations select{
  background:var(--gm-black-card); color:var(--gm-white); border:1px solid var(--gm-border);
  padding:10px 14px; border-radius:6px; width:100%;
}
.single-product .quantity input{
  background:var(--gm-black-card); border:1px solid var(--gm-border); color:var(--gm-white);
  padding:12px; border-radius:6px; width:70px; text-align:center;
}
.single-product .single_add_to_cart_button{
  background:var(--gm-black-card) !important; color:var(--gm-white) !important;
  border:2px solid var(--gm-yellow) !important; padding:16px 30px !important;
  font-weight:700 !important; text-transform:uppercase; border-radius:6px !important;
  margin-right:12px !important;
}
.single-product .single_add_to_cart_button:hover{ background:var(--gm-yellow) !important; color:#000 !important; }

.gm-buy-now-btn{
  display:inline-block; background:var(--gm-yellow); color:#0a0a0b !important;
  padding:16px 34px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px;
  border-radius:6px; margin-top:14px; transition:transform var(--gm-transition), box-shadow var(--gm-transition);
  box-shadow:0 0 0 rgba(255,212,0,0);
}
.gm-buy-now-btn:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 8px 24px rgba(255,212,0,0.25); }

.gm-trust-badges{ display:flex; gap:18px; margin-top:24px; flex-wrap:wrap; }
.gm-trust-badge{ font-size:12px; color:var(--gm-grey); display:flex; align-items:center; gap:6px; }

/* ==========================================================================
   7. RECENT ORDERS POPUP (real orders only — hidden if none exist)
   ========================================================================== */
#gm-order-popup{
  position:fixed; bottom:24px; left:24px; z-index:9999;
  background:var(--gm-black-card); border:1px solid var(--gm-yellow);
  border-radius:10px; padding:14px 18px; max-width:300px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  transform:translateY(120%); opacity:0; transition:transform .5s ease, opacity .5s ease;
  font-size:13px;
}
#gm-order-popup.gm-show{ transform:translateY(0); opacity:1; }
#gm-order-popup .gm-order-dot{ width:8px; height:8px; border-radius:50%; background:#4ade80; flex-shrink:0; animation:gmPulse 1.6s infinite; }
@keyframes gmPulse{ 0%,100%{ opacity:1;} 50%{ opacity:.3;} }
#gm-order-popup strong{ color:var(--gm-yellow); }
#gm-order-popup .gm-order-close{ margin-left:auto; cursor:pointer; color:var(--gm-grey); font-size:14px; }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.gm-footer{ background:var(--gm-black-soft); border-top:1px solid var(--gm-border); padding:60px 0 24px; margin-top:60px; }
.gm-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
@media (max-width:768px){ .gm-footer-grid{ grid-template-columns:1fr 1fr; } }
.gm-footer h4{ font-size:14px; color:var(--gm-yellow); margin-bottom:16px; }
.gm-footer li{ margin-bottom:10px; }
.gm-footer a{ color:var(--gm-grey); font-size:14px; }
.gm-footer a:hover{ color:var(--gm-yellow); }
.gm-footer-bottom{ text-align:center; font-size:12px; color:var(--gm-grey); border-top:1px solid var(--gm-border); padding-top:20px; }
.gm-insta-support{ color:var(--gm-yellow) !important; font-weight:600; }

/* ==========================================================================
   9. RESPONSIVE NAV
   ========================================================================== */
@media (max-width:900px){
  .gm-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--gm-black-soft); border-bottom:1px solid var(--gm-border); }
  .gm-nav.gm-nav-open{ display:block; }
  .gm-nav ul{ flex-direction:column; padding:20px 24px; gap:18px; }
  .gm-burger{ display:block; }
}

/* Checkout styling to feel Shopify-like: single column, minimal, big CTA */
.woocommerce-checkout #order_review, .woocommerce-checkout .col2-set{ background:var(--gm-black-card); padding:24px; border-radius:var(--gm-radius); border:1px solid var(--gm-border); }
.woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="tel"], .woocommerce-checkout select, .woocommerce-checkout textarea{
  background:var(--gm-black); color:var(--gm-white); border:1px solid var(--gm-border); border-radius:6px; padding:12px;
}
#place_order{
  background:var(--gm-yellow) !important; color:#000 !important; font-weight:800 !important;
  padding:18px !important; width:100%; font-size:16px !important; border-radius:8px !important; text-transform:uppercase;
}