/*
Theme Name: PlayOnGear Child
Template: woostify
Version: 1.0
Description: Child theme for PlayOnGear built on top of Woostify. Gen-Z sporty, high-contrast, motion-forward.
*/

:root {
  --color-primary: #ff5a00;
  --color-primary-hover: #ff7a33;
  --color-secondary: #00e5ff;
  --color-dark: #0a0a0a;
  --color-darker: #000000;
  --color-card-bg: #1a1a1a;
  --color-light: #ffffff;
  --color-gray: #a0a0a0;
  --font-heading: 'Syncopate', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* FORCE OVERRIDES WITH HIGH SPECIFICITY */
html body, html body .site, html body .site-content {
  background-color: var(--color-dark) !important;
  color: var(--color-light) !important;
  font-family: var(--font-body);
}

html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, 
html body .woocommerce-loop-product__title, 
html body .product_title {
  font-family: var(--font-heading) !important;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-light) !important;
}

html body a {
  color: var(--color-light);
  transition: color var(--transition-fast);
}

html body a:hover {
  color: var(--color-primary) !important;
}

/* HERO SECTION CSS (Added directly via front-page.php) */
.home-hero-section {
  background: radial-gradient(circle at right bottom, #2a0e05, var(--color-darker)) !important;
  min-height: 85vh;
  display: flex;
  align-items: center;
  border-bottom-right-radius: 120px;
  padding: 80px 5%;
  position: relative;
  overflow: hidden;
  margin-bottom: 50px;
}
.home-hero-container {
  max-width: 800px;
  z-index: 2;
  position: relative;
}
.home-hero-section .hero-title {
  font-size: clamp(3rem, 8vw, 6rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 20px;
  background: linear-gradient(to right, var(--color-light), var(--color-gray));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
.home-hero-section .hero-subtitle {
  font-size: 1.2rem !important;
  color: var(--color-gray) !important;
  max-width: 500px;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* BUTTONS */
html body button, 
html body .button, 
html body input[type="submit"], 
html body .woocommerce button.button, 
html body .woocommerce a.button {
  background-color: var(--color-primary) !important;
  color: var(--color-darker) !important;
  font-family: var(--font-heading) !important;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 50px !important;
  border: none !important;
  padding: 15px 30px !important;
  transition: all var(--transition-bounce) !important;
  box-shadow: 0 4px 15px rgba(255, 90, 0, 0.3) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html body button:hover, 
html body .button:hover, 
html body .woocommerce button.button:hover, 
html body .woocommerce a.button:hover {
  background-color: var(--color-light) !important;
  color: var(--color-primary) !important;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(255, 90, 0, 0.5) !important;
}

/* PRODUCT CARDS */
html body .woocommerce ul.products li.product {
  background-color: var(--color-card-bg) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  transition: all var(--transition-bounce) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

html body .woocommerce ul.products li.product:hover {
  transform: translateY(-10px) rotate(1deg);
  box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important;
  border-color: var(--color-primary) !important;
}

html body .woocommerce ul.products li.product .price {
  color: var(--color-secondary) !important;
  font-weight: 800;
  font-size: 1.2rem;
}

/* CART/CHECKOUT WRAPPERS */
.playongear-cart-wrapper,
.playongear-checkout-wrapper,
.playongear-login-wrapper {
  background: var(--color-card-bg) !important;
  border-radius: 30px;
  padding: 40px;
  margin: 40px auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  position: relative;
}

/* FIX PARENT THEME FORMS */
html body .woocommerce form .form-row input.input-text, 
html body .woocommerce form .form-row textarea {
  background-color: var(--color-darker) !important;
  color: var(--color-light) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  padding: 15px !important;
}