/*
 Theme Name: RetroCart Child
 Theme URI: https://example.com/retrocart-child
 Description: A fast, simple retro-gaming child theme for WooCommerce (Storefront).
 Author: You
 Version: 1.0.0
 Template: storefront
 Tags: woocommerce, retro, gaming, pixel, neon
*/

/* CSS Variables for easy theming */
:root{
  --rc-bg: #0a0b14;
  --rc-panel: #121428;
  --rc-primary: #00fff0; /* neon cyan */
  --rc-secondary: #ff2dfc; /* neon magenta */
  --rc-accent: #ffe300; /* neon yellow */
  --rc-text: #e6f0ff;
  --rc-muted: #9aa3b2;
  --rc-danger: #ff4d4d;
  --rc-success: #29ff87;
  --rc-shadow: rgba(0,0,0,.6);
}

/* Load Google Font fallback if theme doesn't */
@font-face{
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Press Start 2P'), url('https://fonts.gstatic.com/s/pressstart2p/v16/e3t4euO8T-267oIAQAu6jDQyK3nR0Y8.woff2') format('woff2');
}

/* Base */
html, body{
  background: var(--rc-bg) url('assets/scanlines.png') repeat;
  color: var(--rc-text);
}

body{
  font-family: 'Press Start 2P', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .3px;
}

a{ color: var(--rc-primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Headings with glow */
h1, h2, h3, .entry-title{
  color: var(--rc-secondary);
  text-shadow: 0 0 6px color-mix(in srgb, var(--rc-secondary), transparent 60%);
}

/* Panels / cards */
.site, .site-content, .content-area, .hentry, .woocommerce ul.products li.product, .woocommerce div.product{
  background: transparent;
  box-shadow: none;
}

.woocommerce ul.products li.product, .woocommerce div.product{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 16px 24px -12px var(--rc-shadow);
  padding: 18px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.woocommerce ul.products li.product:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--rc-primary), transparent 70%);
  box-shadow: 0 22px 30px -16px var(--rc-shadow);
}

/* Product images with subtle CRT-like vignette */
.woocommerce ul.products li.product a img, .woocommerce div.product div.images img{
  border-radius: 12px;
  filter: contrast(1.02) saturate(1.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 8px 20px -10px var(--rc-shadow);
}

/* Price styling */
.woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price{
  color: var(--rc-accent) !important;
  text-shadow: 0 0 6px color-mix(in srgb, var(--rc-accent), transparent 60%);
}

/* 8-bit button style */
.button, .added_to_cart, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit{
  --b: 2px;
  --p: 10px 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .5px;
  background: var(--rc-primary);
  color: #001012;
  padding: var(--p);
  border: var(--b) solid #001012;
  box-shadow: 0 0 0 var(--b) #001012, 6px 6px 0 0 #001012;
  text-transform: uppercase;
  border-radius: 0;
  position: relative;
  transition: transform .05s ease, box-shadow .05s ease, filter .15s ease;
}
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover{
  transform: translate(-2px, -2px);
  box-shadow: 0 0 0 var(--b) #001012, 10px 10px 0 0 #001012;
  filter: brightness(1.08);
}
.button:active, .woocommerce a.button:active, .woocommerce button.button:active{
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--b) #001012, 4px 4px 0 0 #001012;
}

/* "Insert Coin" vibe for add-to-cart */
.single_add_to_cart_button{
  background: var(--rc-secondary);
  color: #140013;
  border-color: #140013;
}

/* Badges */
.woocommerce span.onsale{
  background: var(--rc-success);
  color: #00150a;
  text-shadow: none;
  border-radius: 0;
  box-shadow: 6px 6px 0 0 #00150a;
  padding: 8px 10px;
  transform: skew(-6deg);
}

/* Breadcrumbs */
.woocommerce-breadcrumb{
  font-size: 10px;
  text-transform: uppercase;
  color: var(--rc-muted);
}
.woocommerce-breadcrumb a{ color: var(--rc-muted); }
.woocommerce-breadcrumb:before{
  content: "🕹 ";
}

/* Quantity inputs */
.quantity .qty{
  background: var(--rc-panel);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--rc-text);
}

/* Tabs */
.woocommerce-tabs .tabs li a{
  background: var(--rc-panel);
  color: var(--rc-text);
  border: 1px solid rgba(255,255,255,0.15);
}
.woocommerce-tabs .panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.05));
  border: 1px solid rgba(255,255,255,0.10);
  padding: 20px;
  border-radius: 10px;
}

/* Header & Footer tweaks (generic Storefront) */
.site-header, .site-footer{
  background: linear-gradient(180deg, #0a0b14, #0a0b14 60%, #070810);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header a, .site-footer a{ color: var(--rc-text); }

/* Neon focus rings for accessibility */
:focus{
  outline: 2px dashed var(--rc-secondary);
  outline-offset: 2px;
}

/* Tiny hover CRT-scanline shimmer on cards */
.woocommerce ul.products li.product{
  position: relative;
  overflow: hidden;
}
.woocommerce ul.products li.product::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
  transform: translateY(-100%);
  pointer-events: none;
  transition: transform .6s ease;
}
.woocommerce ul.products li.product:hover::after{
  transform: translateY(100%);
}

/* Cart / checkout minimal adjustments */
.woocommerce-cart table.shop_table, .woocommerce-checkout table.shop_table{
  background: transparent;
  color: var(--rc-text);
  border-color: rgba(255,255,255,0.15);
}
.woocommerce-cart .cart_totals, .woocommerce-checkout #order_review{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.05));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 16px;
}

/* Utility classes */
.rc-pixel-border{
  box-shadow:
    0 0 0 2px #000,
    6px 6px 0 0 #000;
}

.rc-neon{
  text-shadow: 0 0 8px color-mix(in srgb, var(--rc-primary), transparent 50%),
               0 0 18px color-mix(in srgb, var(--rc-primary), transparent 70%);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}