/*
Theme Name: 3rd Eye Horror
Author: 3rd Eye Bongs
Description: 90s Retro Horror Theme for WooCommerce
Version: 1.0
*/

/* --- 1. RESET & BASICS --- */
:root {
    --bg-black: #050505;
    --blood-red: #ff0000;
    --dried-blood: #5a0000;
    --slime-green: #00ff00;
    --static-gray: #b0b0b0;
}

body {
    background-color: var(--bg-black);
    color: var(--static-gray);
    font-family: 'VT323', monospace;
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    cursor: crosshair;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; }

/* --- 2. FONTS & HEADINGS --- */
h1, h2, h3, h4, .woocommerce-loop-product__title {
    font-family: 'Creepster', cursive;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    margin: 0 0 15px 0;
}

/* --- 3. HEADER & NAV --- */
header {
    border-bottom: 2px solid var(--blood-red);
    padding: 20px;
    background: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.site-logo { font-size: 2.5rem; color: var(--blood-red); text-shadow: 2px 2px 0 var(--dried-blood); }
nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
nav a:hover { color: var(--slime-green); text-shadow: 0 0 5px var(--slime-green); }

/* --- 4. WOOCOMMERCE OVERRIDES (The Magic Part) --- */

/* Product Grid */
ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    list-style: none !important;
    padding: 0;
}

li.product {
    background: #111;
    border: 1px solid var(--static-gray);
    padding: 15px;
    text-align: center;
    position: relative;
    transition: 0.2s;
}

li.product:hover {
    border-color: var(--slime-green);
    box-shadow: -5px 5px 0px var(--slime-green);
    transform: scale(1.02);
}

/* Product Images (Grayscale to Color) */
li.product a img {
    filter: grayscale(100%) contrast(120%);
    transition: 0.3s;
    margin-bottom: 15px;
}
li.product:hover a img { filter: grayscale(0%) sepia(20%); }

/* Price & Buttons */
.price { color: var(--slime-green); font-size: 1.4rem; display: block; margin: 10px 0; }
.button.add_to_cart_button, .single_add_to_cart_button {
    background: transparent !important;
    border: 1px solid var(--blood-red) !important;
    color: var(--blood-red) !important;
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 0 !important;
}
.button.add_to_cart_button:hover {
    background: var(--blood-red) !important;
    color: #000 !important;
}

/* --- 5. EFFECTS --- */
.crt-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    pointer-events: none; z-index: 9999; opacity: 0.6;
}

/* --- 6. FOOTER --- */
footer {
    border-top: 2px solid var(--static-gray);
    padding: 40px; text-align: center; background: #000; margin-top: 50px;
}