/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme for YouKnowItCards Trading Card Shop
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* Import parent theme styles */
@import url("../blocksy/style.css");

/* Import Pokémon Fonts */
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

/* Pokémon Font - Self Hosted */
@font-face {
    font-family: 'Pokemon';
    src: url('https://fonts.gstatic.com/s/pressstart2p/v14/e3t4euO8T-267oIAQAu6F5kSJzQ4oF1CzW2J4uy2Yrk.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   BACKGROUND REMOVED - CONFLICTING WITH BRICKWALL
   ======================================== */

/* Header with semi-transparent background */
.ct-header {
    background: rgba(75, 0, 130, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Hero section with semi-transparent background */
.hero-section {
    background: rgba(75, 0, 130, 0.6) !important;
    backdrop-filter: blur(5px) !important;
}

/* Category sections with semi-transparent backgrounds */
.category-section {
    background: rgba(75, 0, 130, 0.6) !important;
    backdrop-filter: blur(5px) !important;
}

/* Events section */
.events-section {
    background: rgba(75, 0, 130, 0.6) !important;
    backdrop-filter: blur(5px) !important;
}

/* Community section */
.community-section {
    background: rgba(75, 0, 130, 0.6) !important;
    backdrop-filter: blur(5px) !important;
}

/* Social media section */
.social-section {
    background: rgba(75, 0, 130, 0.6) !important;
    backdrop-filter: blur(5px) !important;
}

/* Whatnot section */
.whatnot-section {
    background: rgba(75, 0, 130, 0.6) !important;
    backdrop-filter: blur(5px) !important;
}

/* About section */
.about-section {
    background: rgba(75, 0, 130, 0.6) !important;
    backdrop-filter: blur(5px) !important;
}

/* Contact section */
.contact-section {
    background: rgba(75, 0, 130, 0.6) !important;
    backdrop-filter: blur(5px) !important;
}

/* Footer with semi-transparent background */
.site-footer {
    background: rgba(75, 0, 130, 0.9) !important;
    backdrop-filter: blur(10px) !important;
}

/* Debug message removed */

/* Brick CSS removed - original background restored */

/* Debug message removed */

/* Mortar lines removed */

/* Brick depth removed */

/* Force override any parent theme backgrounds */
html {
    background: #0d0618 !important;
}

body {
    background: linear-gradient(135deg, #4a0d8f 0%, #6a1b9a 25%, #8e24aa 50%, #6a1b9a 75%, #4a0d8f 100%) !important;
    background-attachment: scroll !important;
    min-height: 100vh !important;
}

#page {
    background: 
        linear-gradient(45deg, #1a0f2e 25%, transparent 25%),
        linear-gradient(-45deg, #1a0f2e 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1a0f2e 75%),
        linear-gradient(-45deg, transparent 75%, #1a0f2e 75%) !important;
    background-size: 40px 40px !important;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px !important;
    background-color: #0d0618 !important;
    background-attachment: scroll !important;
}

/* Additional force override for WordPress core elements */
.wp-block-template-part,
.wp-block-group,
.wp-block-columns,
.wp-block-column {
    background: transparent !important;
}

/* Enhanced brick pattern removed */

/* ========================================
   GLOBAL CSS VARIABLES
   ======================================== */
:root {
    --primary-color: #ffd700; /* Bright yellow/gold for YKIC branding */
    --secondary-color: #1a1a1a; /* Dark background */
    --accent-color: #00ffff; /* Electric blue/cyan neon */
    --accent-color-2: #ff00ff; /* Vibrant magenta/hot pink neon */
    --text-color: #ffffff;
    --light-bg: #8a2be2; /* Darker purple neon background */
    --white: #ffffff;
    --dark-bg: #4b0082; /* Darker purple neon base */
    --card-bg: #800080; /* Darker purple for cards */
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --border-radius: 8px;
    --transition: all 0.3s ease;
    --neon-glow: 0 0 20px rgba(255, 215, 0, 0.8); /* Intense gold glow */
    --neon-glow-blue: 0 0 20px rgba(0, 255, 255, 0.8); /* Intense cyan glow */
    --neon-glow-pink: 0 0 20px rgba(255, 0, 255, 0.8); /* Intense magenta glow */
    --purple-glow: 0 0 30px rgba(255, 20, 147, 0.6); /* Intense pink glow */
    --hot-pink: #ff1493; /* Deep pink */
    --bright-purple: #8a2be2; /* Bright purple */
    --neon-magenta: #ff00ff; /* Neon magenta */
    --dark-purple: #4b0082; /* Dark purple */
    --medium-purple: #800080; /* Medium purple */
}

/* ===== GLOBAL STYLES ===== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* ===== HEADER CUSTOMIZATION ===== */
.ct-header {
    background: rgba(13, 6, 24, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
    border-bottom: 1px solid #333333;
    position: relative;
    z-index: 1000;
    margin-top: 0;
    padding-top: 0;
}

.ct-header .ct-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80px;
}

/* Override any parent container styles that might affect alignment */
.ct-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: inherit !important;
}

.ct-container > * {
    text-align: inherit !important;
}

/* Force left alignment for site branding */
.site-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.site-logo {
    display: block;
    text-decoration: none;
    transition: var(--transition);
}

.header-logo {
    max-height: 150px;
    width: auto;
    display: block;
    transition: var(--transition);
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.3));
}

.site-logo:hover .header-logo {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
}

.site-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    margin: 0;
    line-height: 1.2;
    text-align: center;
}

.site-title:hover {
    color: var(--primary-color);
}

.site-description {
    color: #cccccc;
    font-size: 0.9rem;
    margin: 8px 0 0 0;
    line-height: 1.2;
    padding-bottom: 5px;
    text-align: center;
}

/* Let's try a completely different approach */
.site-branding p {
    text-align: center;
    margin: 8px 0 0 0;
    padding: 0;
    align-self: center;
}

/* Force all text elements in site branding to be left-aligned */
.site-branding * {
    text-align: center !important;
}

/* More aggressive targeting for the specific paragraph */
.site-branding p {
    text-align: center !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
}

/* Target the specific text content */
.site-branding p:last-child {
    text-align: center !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
}

/* Force alignment using attribute selector */
.site-branding p[class*="description"] {
    text-align: center !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    align-self: center !important;
}

/* Target any paragraph that contains the specific text */
.site-branding p:contains("EST. 2022") {
    text-align: center !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
}

/* Force text content to align center */
.site-description,
.site-branding p {
    text-align: center !important;
    text-align-last: center !important;
    text-justify: center !important;
    direction: ltr !important;
    unicode-bidi: normal !important;
}

/* Target the text node directly */
.site-branding p::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
}

/* Force the container to center its content */
.site-branding {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Use flexbox to force alignment */
.site-branding {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.site-branding > * {
    align-self: center !important;
    text-align: center !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
}

/* Hide WordPress admin bar on frontend */
.admin-bar .ct-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .ct-header {
        top: 46px;
    }
}

/* Hide default Blocksy branding */
.ct-header .ct-container .ct-container {
    display: none;
}

/* Custom YKIC header styling */
.ct-header {
    padding: 15px 0;
}

.ct-header .ct-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Navigation styling for dark theme */
.main-navigation {
    display: flex;
    align-items: center;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 25px;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    color: var(--white);
    text-decoration: none;
    padding: 12px 18px;
    transition: var(--transition);
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.nav-menu a:hover {
    color: var(--primary-color);
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
    box-shadow: var(--neon-glow);
    text-shadow: 0 0 5px var(--primary-color);
}

/* Mobile menu styling */
.ct-header .ct-mobile-menu {
    background: var(--dark-bg);
    border: 1px solid #333333;
}

.ct-header .ct-mobile-menu a {
    color: var(--white);
}

.ct-header .ct-mobile-menu a:hover {
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.1);
}

/* Mobile menu toggle button */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 10px;
}

.menu-toggle-icon {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--white);
    position: relative;
    transition: var(--transition);
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background: var(--white);
    transition: var(--transition);
}

.menu-toggle-icon::before {
    top: -8px;
}

.menu-toggle-icon::after {
    bottom: -8px;
}

.menu-toggle.active .menu-toggle-icon {
    background: transparent;
}

.menu-toggle.active .menu-toggle-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.menu-toggle.active .menu-toggle-icon::after {
    transform: rotate(-45deg);
    bottom: 0;
}

/* Navigation menu styling */
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    color: var(--white);
    text-decoration: none;
    padding: 10px 15px;
    transition: var(--transition);
    border-radius: var(--border-radius);
}

.nav-menu a:hover {
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.1);
}

/* Mobile responsive header */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--dark-bg);
        border: 1px solid #333333;
        border-top: none;
        flex-direction: column;
        padding: 20px;
        z-index: 1000;
        gap: 10px;
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-menu li {
        margin: 5px 0;
    }
    
    .nav-menu a {
        display: block;
        padding: 15px 20px;
        border-radius: var(--border-radius);
        font-size: 1.2rem;
        text-align: center;
        border: 1px solid #333333;
    }
    
    .nav-menu a:hover {
        background: rgba(255, 107, 53, 0.1);
        border-color: var(--primary-color);
    }
    
    .site-description {
        display: none;
    }
    
    .site-title {
        font-size: 1.5rem;
    }
}

/* ===== FEATURED CAROUSEL SECTION ===== */
.featured-carousel-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--medium-purple) 50%, var(--bright-purple) 100%);
    position: relative;
    overflow: hidden;
}

.featured-carousel-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 20, 147, 0.1) 0%, rgba(138, 43, 226, 0.1) 100%);
    pointer-events: none;
}

.carousel-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.carousel-wrapper {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 0;
}

.carousel-card {
    flex: 0 0 calc(33.333% - 20px);
    min-width: 350px;
    background: linear-gradient(145deg, var(--card-bg) 0%, var(--medium-purple) 100%);
    border: 2px solid var(--accent-color);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin: 0 10px;
}

.carousel-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-color-2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 255, 255, 0.3);
}

.carousel-card .card-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
}

.carousel-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.carousel-card:hover .card-image img {
    transform: scale(1.1);
}

.carousel-card .card-content {
    padding: 25px;
    text-align: center;
}

.carousel-card h3 {
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 0 10px var(--accent-color);
}

.carousel-card .card-series {
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.carousel-card .card-description {
    color: #cccccc;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.carousel-card .card-price {
    color: var(--accent-color-2);
    font-size: 1.3rem;
    font-weight: 700;
    text-shadow: 0 0 10px var(--accent-color-2);
}

/* Carousel Navigation Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(45deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: var(--white);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover {
    background: linear-gradient(45deg, var(--accent-color) 0%, var(--primary-color) 100%);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.carousel-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.carousel-prev {
    left: -25px;
}

.carousel-next {
    right: -25px;
}

/* Carousel Indicators */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.indicator.active {
    background: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
}

/* Responsive Carousel */
@media (max-width: 1024px) {
    .carousel-card {
        flex: 0 0 calc(50% - 20px);
        min-width: 300px;
    }
}

@media (max-width: 768px) {
    .carousel-card {
        flex: 0 0 calc(100% - 20px);
        min-width: 280px;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    .carousel-prev {
        left: -20px;
    }
    
    .carousel-next {
        right: -20px;
    }
}

/* ===== ANIMATED HERO SECTION ===== */
.hero-section {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--medium-purple) 50%, var(--bright-purple) 100%);
    overflow: hidden;
}

.hero-banner {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-background {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Floating Cards Animation */
.floating-cards {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.floating-card {
    position: absolute;
    width: 220px;
    height: 150px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: float 6s ease-in-out infinite;
}

.floating-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.floating-card:hover .floating-card-img {
    transform: scale(1.1);
}

.card-1 {
    top: 5%;
    left: 8%;
    animation-delay: 0s;
    animation-duration: 8s;
}

.card-2 {
    top: 5%;
    right: 8%;
    animation-delay: 2s;
    animation-duration: 7s;
}

.card-3 {
    top: 60%;
    left: 12%;
    animation-delay: 4s;
    animation-duration: 9s;
}

.card-4 {
    top: 60%;
    right: 12%;
    animation-delay: 6s;
    animation-duration: 6s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-20px) rotate(2deg);
    }
    50% {
        transform: translateY(-10px) rotate(-1deg);
    }
    75% {
        transform: translateY(-15px) rotate(1deg);
    }
}


/* Hero Title Section - Above Banner */
.hero-title-section {
    position: absolute;
    top: 220px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 15;
}

.hero-main-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.pokemon-title-image {
    width: 1000px;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    transition: transform 0.3s ease;
}

.pokemon-title-image:hover {
    transform: scale(1.05);
}


/* Banner Content */
.banner-content {
    text-align: center;
    z-index: 10;
    position: relative;
}

.banner-logo {
    margin-bottom: 30px;
    animation: logoGlow 3s ease-in-out infinite alternate;
}

.main-logo {
    max-height: 120px;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
    transition: all 0.3s ease;
}

.main-logo:hover {
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8));
    transform: scale(1.05);
}

@keyframes logoGlow {
    0% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8));
    }
}

.banner-text {
    margin-bottom: 40px;
}

.banner-title {
    font-size: 4rem;
    font-weight: 900;
    color: var(--white);
    margin-bottom: 20px;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.title-word {
    animation: color-animation 4s linear infinite;
    display: inline-block;
}

.title-word-1 {
    --color-1: #FFD700;
    --color-2: #FF6B35;
    --color-3: #8E24AA;
}

.title-word-2 {
    --color-1: #FF6B35;
    --color-2: #8E24AA;
    --color-3: #FFD700;
}

.title-word-3 {
    --color-1: #8E24AA;
    --color-2: #FFD700;
    --color-3: #FF6B35;
}

.title-word-4 {
    --color-1: #FFD700;
    --color-2: #8E24AA;
    --color-3: #FF6B35;
}

@keyframes color-animation {
    0%    { color: var(--color-1) }
    32%   { color: var(--color-1) }
    33%   { color: var(--color-2) }
    65%   { color: var(--color-2) }
    66%   { color: var(--color-3) }
    99%   { color: var(--color-3) }
    100%  { color: var(--color-1) }
}

.banner-subtitle {
    font-size: 1.5rem;
    color: #cccccc;
    margin: 0;
    animation: fadeInUp 1s ease-out 0.5s both;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Banner Particles */
.banner-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: particleFloat 8s linear infinite;
    opacity: 0.7;
}

.particle:nth-child(1) {
    top: 10%;
    left: 20%;
    animation-delay: 0s;
    animation-duration: 10s;
}

.particle:nth-child(2) {
    top: 30%;
    right: 30%;
    animation-delay: 2s;
    animation-duration: 12s;
}

.particle:nth-child(3) {
    bottom: 20%;
    left: 40%;
    animation-delay: 4s;
    animation-duration: 9s;
}

.particle:nth-child(4) {
    top: 70%;
    right: 10%;
    animation-delay: 6s;
    animation-duration: 11s;
}

.particle:nth-child(5) {
    top: 50%;
    left: 60%;
    animation-delay: 1s;
    animation-duration: 8s;
}

.particle:nth-child(6) {
    bottom: 40%;
    right: 50%;
    animation-delay: 3s;
    animation-duration: 13s;
}

.particle:nth-child(7) {
    top: 80%;
    left: 30%;
    animation-delay: 5s;
    animation-duration: 7s;
}

.particle:nth-child(8) {
    bottom: 10%;
    right: 20%;
    animation-delay: 7s;
    animation-duration: 10s;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-100px) translateX(100px);
        opacity: 0;
    }
}

/* Enhanced Hero Content */
.hero-content {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 20;
    animation: fadeInUp 1s ease-out 1s both;
}

/* Hero Content Below Banner */
.hero-content-below-banner {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 40px 20px;
    margin-top: 20px;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: white;
    margin: 0 0 30px 0;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    font-weight: 500;
}

.hero-buttons {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Enhanced Button Styling */
.btn {
    position: relative;
    padding: 18px 36px;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(45deg, var(--primary-color) 0%, #FFD700 100%);
    color: var(--dark-bg);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}

.btn-primary:hover {
    background: linear-gradient(45deg, #FFD700 0%, var(--primary-color) 100%);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(255, 107, 53, 0.6);
}

.btn-secondary {
    background: linear-gradient(45deg, var(--accent-color) 0%, var(--accent-color-2) 100%);
    color: var(--dark-bg);
    box-shadow: 0 8px 25px rgba(0, 255, 255, 0.4);
}

.btn-secondary:hover {
    background: linear-gradient(45deg, var(--accent-color-2) 0%, var(--accent-color) 100%);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 255, 255, 0.6);
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-icon {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.btn:hover .btn-icon {
    transform: translateX(5px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title-section {
        top: 150px;
    }
    
    .pokemon-title-image {
        width: 700px;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .main-logo {
        max-height: 80px;
    }
    
    .floating-card {
        width: 150px;
        height: 100px;
    }
    
    /* Better alignment for tablet */
    .card-1 {
        top: 3%;
        left: 5%;
    }
    
    .card-2 {
        top: 3%;
        right: 5%;
    }
    
    .card-3 {
        top: 50%;
        left: 8%;
    }
    
    .card-4 {
        top: 50%;
        right: 8%;
    }
    
    
    .hero-buttons {
        flex-direction: column;
        gap: 20px;
    }
    
    .btn {
        padding: 15px 30px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-title-section {
        top: 130px;
    }
    
    .pokemon-title-image {
        width: 500px;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .main-logo {
        max-height: 60px;
    }
    
    .floating-card {
        width: 120px;
        height: 85px;
    }
    
    /* Better alignment for mobile */
    .card-1 {
        top: 2%;
        left: 3%;
    }
    
    .card-2 {
        top: 2%;
        right: 3%;
    }
    
    .card-3 {
        top: 48%;
        left: 5%;
    }
    
    .card-4 {
        top: 48%;
        right: 5%;
    }
    
}

/* ========================================
   REMOVED - OLD HERO SECTION CSS
   ======================================== */

.hero-buttons {
    display: flex !important;
    gap: 20px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin: 30px 0 !important;
}

.btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--dark-bg);
    font-weight: 700;
    text-shadow: none;
}

.btn-primary:hover {
    background: #ffed4e;
    transform: translateY(-2px);
    box-shadow: var(--neon-glow);
    text-shadow: 0 0 5px var(--dark-bg);
}

.btn-secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--accent-color);
}

.btn-secondary:hover {
    background: var(--accent-color);
    color: var(--dark-bg);
    transform: translateY(-2px);
    box-shadow: var(--neon-glow-blue);
    text-shadow: 0 0 5px var(--dark-bg);
}

/* ===== CATEGORY SECTIONS ===== */
.category-section {
    padding: 80px 0;
    background: rgba(13, 6, 24, 0.6);
    backdrop-filter: blur(5px);
}

.category-section:nth-child(even) {
    background: rgba(13, 6, 24, 0.6);
    backdrop-filter: blur(5px);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--white);
}

.section-subtitle {
    font-size: 1.2rem;
    color: #cccccc;
    max-width: 600px;
    margin: 0 auto;
}

/* ===== CARDS GRID ===== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.card-item {
    background: rgba(13, 6, 24, 0.8);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
    border: 2px solid var(--neon-magenta);
    max-width: 280px;
    margin: 0 auto;
}

.card-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--neon-glow), var(--neon-glow-pink);
    border-color: var(--primary-color);
    box-shadow: var(--neon-glow), var(--neon-glow-pink);
}

.card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
    max-height: 200px;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
    transition: var(--transition);
}

.card-item:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: 15px;
}

.card-item h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--white);
}

.card-item h3 a {
    color: var(--white);
    text-decoration: none;
}

.card-item h3 a:hover {
    color: var(--primary-color);
    text-shadow: 0 0 10px var(--primary-color);
}

.card-item p {
    color: #cccccc;
    margin-bottom: 12px;
    line-height: 1.4;
    font-size: 0.9rem;
}

.card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.card-meta span {
    background: var(--primary-color);
    color: var(--dark-bg);
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(255, 237, 78, 0.3);
}

.card-meta span:last-child {
    background: var(--accent-color);
    color: var(--dark-bg);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

/* ===== CATEGORY-SPECIFIC STYLES ===== */
.pokemon-cards-grid .card-item {
    border-top: 4px solid var(--primary-color);
    box-shadow: var(--neon-glow);
}

.pokemon-cards-grid .card-item:hover {
    border-top-color: var(--primary-color);
    box-shadow: var(--neon-glow), 0 8px 25px rgba(255, 215, 0, 0.4);
}

.onepiece-cards-grid .card-item {
    border-top: 4px solid var(--accent-color-2);
    box-shadow: var(--neon-glow-pink);
}

.onepiece-cards-grid .card-item:hover {
    border-top-color: var(--accent-color-2);
    box-shadow: var(--neon-glow-pink), 0 8px 25px rgba(255, 0, 255, 0.4);
}

.sports-cards-grid .card-item {
    border-top: 4px solid var(--accent-color);
    box-shadow: var(--neon-glow-blue);
}

.sports-cards-grid .card-item:hover {
    border-top-color: var(--accent-color);
    box-shadow: var(--neon-glow-blue), 0 8px 25px rgba(0, 255, 255, 0.4);
}

/* ===== COMMUNITY SECTION ===== */
.community-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--medium-purple) 0%, var(--bright-purple) 50%, var(--hot-pink) 100%);
    position: relative;
    overflow: hidden;
}

.community-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.05) 0%, rgba(0, 255, 255, 0.05) 100%);
    pointer-events: none;
}

/* Trading Tips Content */
.trading-tips-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.tip-card {
    background: linear-gradient(145deg, var(--card-bg) 0%, var(--medium-purple) 100%);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 30px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow), 0 0 20px rgba(255, 215, 0, 0.3);
}

.tip-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.tip-card:hover::before {
    left: 100%;
}

.tip-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-color);
    box-shadow: var(--shadow), 0 0 30px rgba(0, 255, 255, 0.5), 0 10px 30px rgba(0, 0, 0, 0.3);
}

.tip-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px var(--primary-color));
    transition: var(--transition);
}

.tip-card:hover .tip-icon {
    filter: drop-shadow(0 0 20px var(--accent-color));
    transform: scale(1.1);
}

.tip-card h3 {
    color: var(--text-color);
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-shadow: 0 0 10px var(--primary-color);
}

.tip-card p {
    color: var(--text-color);
    margin-bottom: 0;
    line-height: 1.6;
    opacity: 0.9;
}

/* Responsive adjustments for trading tips */
@media (max-width: 768px) {
    .trading-tips-content {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }
    
    .tip-card {
        padding: 25px 20px;
    }
    
    .tip-icon {
        font-size: 2.5rem;
    }
    
    .tip-card h3 {
        font-size: 1.3rem;
    }
}

/* ===== ABOUT SECTION ===== */
.about-section {
    padding: 80px 0;
    background: var(--dark-bg);
    background: linear-gradient(135deg, var(--medium-purple) 0%, var(--bright-purple) 25%, var(--dark-purple) 50%, var(--bright-purple) 75%, var(--medium-purple) 100%);
}

.about-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--white);
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #cccccc;
    margin-bottom: 20px;
}

.about-image {
    position: relative;
}

.about-image img {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

/* ===== WHATNOT SECTION ===== */
.whatnot-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--medium-purple) 50%, var(--bright-purple) 100%);
    position: relative;
    overflow: hidden;
}

.whatnot-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);
    pointer-events: none;
}

.whatnot-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 600px;
    margin: 0 auto 40px auto;
    padding: 0 20px;
}

.whatnot-card {
    background: linear-gradient(145deg, var(--card-bg) 0%, var(--medium-purple) 100%);
    border: 2px solid #ff6b35;
    border-radius: var(--border-radius);
    padding: 30px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow), 0 0 20px rgba(255, 107, 53, 0.3);
}

.whatnot-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.1), transparent);
    transition: left 0.5s;
}

.whatnot-card:hover::before {
    left: 100%;
}

.whatnot-card:hover {
    transform: translateY(-10px);
    border-color: #ff8c42;
    box-shadow: var(--shadow), 0 0 30px rgba(255, 107, 53, 0.5), 0 10px 30px rgba(0, 0, 0, 0.3);
}

.whatnot-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.whatnot-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.5));
    transition: var(--transition);
}

.whatnot-card:hover .whatnot-icon img {
    filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.8));
    transform: scale(1.1);
}

.whatnot-card h3 {
    color: var(--text-color);
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-shadow: 0 0 10px #ff6b35;
}

.whatnot-card p {
    color: var(--text-color);
    margin-bottom: 25px;
    line-height: 1.6;
    opacity: 0.9;
}

.btn-whatnot {
    background: linear-gradient(45deg, #ff6b35 0%, #ff8c42 100%);
    color: var(--white);
    border: none;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    transition: var(--transition);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
}

.btn-whatnot:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.6), 0 5px 15px rgba(0, 0, 0, 0.3);
    color: var(--white);
}

/* Responsive adjustments for whatnot section */
@media (max-width: 768px) {
    .whatnot-content {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }
    
    .whatnot-card {
        padding: 25px 20px;
    }
    
    .whatnot-icon {
        font-size: 2.5rem;
    }
    
    .whatnot-card h3 {
        font-size: 1.3rem;
    }
}

/* ===== CONTACT SECTION ===== */
.contact-section {
    padding: 80px 0;
    background: rgba(13, 6, 24, 0.6);
    backdrop-filter: blur(5px);
}

.contact-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-info h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--white);
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(13, 6, 24, 0.9);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid #333333;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: var(--white);
    font-size: 1.2rem;
}

.contact-details h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--white);
}

.contact-details p {
    color: #cccccc;
    margin: 0;
}

.contact-form {
    background: rgba(13, 6, 24, 0.9);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid #333333;
}

.contact-form h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--white);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--white);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #333333;
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
    background: rgba(13, 6, 24, 0.7);
    color: var(--white);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Contact form specific styling */
.contact-form-submit {
    margin-top: 20px;
}

.contact-form-submit .form-group {
    margin-bottom: 20px;
}

.contact-form-submit label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--white);
    font-size: 0.95rem;
}

.contact-form-submit input,
.contact-form-submit textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #333333;
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
    background: rgba(13, 6, 24, 0.7);
    color: var(--white);
    font-family: inherit;
}

.contact-form-submit input:focus,
.contact-form-submit textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
    background: var(--dark-bg);
}

.contact-form-submit input::placeholder,
.contact-form-submit textarea::placeholder {
    color: #666666;
}

.contact-form-submit button {
    width: 100%;
    padding: 15px;
    background: var(--primary-color);
    color: var(--dark-bg);
    border: none;
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-form-submit button:hover:not(:disabled) {
    background: #ffed4e;
    transform: translateY(-2px);
    box-shadow: var(--neon-glow);
    text-shadow: 0 0 5px var(--dark-bg);
}

.contact-form-submit button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Form validation styling */
.contact-form-submit input:invalid,
.contact-form-submit textarea:invalid {
    border-color: #e74c3c;
}

.contact-form-submit input:valid,
.contact-form-submit textarea:valid {
    border-color: #27ae60;
}

/* ===== FILTER SECTION ===== */
.filter-section {
    background: var(--card-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 40px;
    border: 1px solid #333333;
}

.filter-group label {
    font-weight: 600;
    color: var(--white);
}

.filter-group select {
    padding: 10px;
    border: 2px solid #333333;
    border-radius: var(--border-radius);
    font-size: 1rem;
    min-width: 150px;
    background: rgba(13, 6, 24, 0.7);
    color: var(--white);
}

/* ===== CARD DETAIL PAGES ===== */
.card-details-sidebar {
    background: rgba(13, 6, 24, 0.9);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    position: sticky;
    top: 20px;
    border: 1px solid #333333;
}

.card-description {
    background: rgba(13, 6, 24, 0.9);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 60px;
    border: 1px solid #333333;
}

.card-description h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 20px;
}

.description-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #cccccc;
}

.related-cards {
    background: rgba(13, 6, 24, 0.6);
    backdrop-filter: blur(5px);
    padding: 40px;
    border-radius: var(--border-radius);
}

.related-cards h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 30px;
    text-align: center;
}

/* ===== FOOTER ===== */
.site-footer {
    background: rgba(13, 6, 24, 0.9);
    backdrop-filter: blur(10px);
    color: var(--white);
    padding: 40px 0 20px;
    border-top: 2px solid var(--primary-color);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.footer-content p {
    margin: 0;
    opacity: 0.8;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.1rem !important;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .hero-banner-image {
        max-width: 95%;
    }
    
    .hero-banner {
        padding: 20px 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .about-content,
    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .about-text h2,
    .contact-info h2 {
        font-size: 2rem;
    }
    
    .contact-form {
        padding: 30px 20px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .card-content {
        padding: 15px;
    }
    
    .card-item h3 {
        font-size: 1.1rem;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-item {
    animation: fadeInUp 0.6s ease-out;
}

.card-item:nth-child(2) {
    animation-delay: 0.1s;
}

.card-item:nth-child(3) {
    animation-delay: 0.2s;
}

/* ===== UTILITY CLASSES ===== */
.text-center {
    text-align: center;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== CUSTOM BLOCKS ===== */
.ct-block {
    margin-bottom: 40px;
}

.ct-block-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.ct-block-content {
    background: var(--white);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

/* ===== LOADING STATES ===== */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--primary-color);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Override parent theme's site-description styling */
.ct-header .site-description,
.site-description,
.site-branding .site-description {
    color: #cccccc !important;
    font-size: 0.9rem !important;
    margin: 8px 0 0 0 !important;
    line-height: 1.2 !important;
    padding-bottom: 5px !important;
    text-align: center !important;
    align-self: center !important;
    text-align-last: center !important;
    direction: ltr !important;
    /* Force the text to start from the center */
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
    /* Override parent theme's white-space nowrap */
    white-space: normal !important;
    /* Override parent theme's margin-top */
    margin-top: 8px !important;
}

/* ========================================
   REMOVED - DUPLICATE EVENTS & WHATNOT SECTIONS
   ======================================== */
/* This entire section was duplicated and has been removed to clean up the CSS file */

/* ===== CONTACT SECTION ===== */
.contact-section {
    padding: 80px 0;
    background: rgba(13, 6, 24, 0.6);
    backdrop-filter: blur(5px);
}

.contact-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-info h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--white);
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(13, 6, 24, 0.9);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid #333333;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: var(--white);
    font-size: 1.2rem;
}

.contact-details h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--white);
}

.contact-details p {
    color: #cccccc;
    margin: 0;
}

.contact-form {
    background: rgba(13, 6, 24, 0.9);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid #333333;
}

.contact-form h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--white);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--white);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #333333;
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
    background: rgba(13, 6, 24, 0.7);
    color: var(--white);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Contact form specific styling */
.contact-form-submit {
    margin-top: 20px;
}

.contact-form-submit .form-group {
    margin-bottom: 20px;
}

.contact-form-submit label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--white);
    font-size: 0.95rem;
}

.contact-form-submit input,
.contact-form-submit textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #333333;
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
    background: rgba(13, 6, 24, 0.7);
    color: var(--white);
    font-family: inherit;
}

.contact-form-submit input:focus,
.contact-form-submit textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
    background: var(--dark-bg);
}

.contact-form-submit input::placeholder,
.contact-form-submit textarea::placeholder {
    color: #666666;
}

.contact-form-submit button {
    width: 100%;
    padding: 15px;
    background: var(--primary-color);
    color: var(--dark-bg);
    border: none;
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-form-submit button:hover:not(:disabled) {
    background: #ffed4e;
    transform: translateY(-2px);
    box-shadow: var(--neon-glow);
    text-shadow: 0 0 5px var(--dark-bg);
}

.contact-form-submit button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Form validation styling */
.contact-form-submit input:invalid,
.contact-form-submit textarea:invalid {
    border-color: #e74c3c;
}

.contact-form-submit input:valid,
.contact-form-submit textarea:valid {
    border-color: #27ae60;
}

/* ===== FILTER SECTION ===== */
.filter-section {
    background: var(--card-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 40px;
    border: 1px solid #333333;
}

.filter-group label {
    font-weight: 600;
    color: var(--white);
}

.filter-group select {
    padding: 10px;
    border: 2px solid #333333;
    border-radius: var(--border-radius);
    font-size: 1rem;
    min-width: 150px;
    background: rgba(13, 6, 24, 0.7);
    color: var(--white);
}

/* ===== CARD DETAIL PAGES ===== */
.card-details-sidebar {
    background: rgba(13, 6, 24, 0.9);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    position: sticky;
    top: 20px;
    border: 1px solid #333333;
}

.card-description {
    background: rgba(13, 6, 24, 0.9);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 60px;
    border: 1px solid #333333;
}

.card-description h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 20px;
}

.description-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #cccccc;
}

.related-cards {
    background: rgba(13, 6, 24, 0.6);
    backdrop-filter: blur(5px);
    padding: 40px;
    border-radius: var(--border-radius);
}

.related-cards h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 30px;
    text-align: center;
}

/* ===== FOOTER ===== */
.site-footer {
    background: rgba(13, 6, 24, 0.9);
    backdrop-filter: blur(10px);
    color: var(--white);
    padding: 40px 0 20px;
    border-top: 2px solid var(--primary-color);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.footer-content p {
    margin: 0;
    opacity: 0.8;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.1rem !important;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .hero-banner-image {
        max-width: 95%;
    }
    
    .hero-banner {
        padding: 20px 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .about-content,
    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .about-text h2,
    .contact-info h2 {
        font-size: 2rem;
    }
    
    .contact-form {
        padding: 30px 20px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .card-content {
        padding: 15px;
    }
    
    .card-item h3 {
        font-size: 1.1rem;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-item {
    animation: fadeInUp 0.6s ease-out;
}

.card-item:nth-child(2) {
    animation-delay: 0.1s;
}

.card-item:nth-child(3) {
    animation-delay: 0.2s;
}

/* ===== UTILITY CLASSES ===== */
.text-center {
    text-align: center;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== CUSTOM BLOCKS ===== */
.ct-block {
    margin-bottom: 40px;
}

.ct-block-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.ct-block-content {
    background: var(--white);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

/* ===== LOADING STATES ===== */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--primary-color);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Override parent theme's site-description styling */
.ct-header .site-description,
.site-description,
.site-branding .site-description {
    color: #cccccc !important;
    font-size: 0.9rem !important;
    margin: 8px 0 0 0 !important;
    line-height: 1.2 !important;
    padding-bottom: 5px !important;
    text-align: center !important;
    align-self: center !important;
    text-align-last: center !important;
    direction: ltr !important;
    /* Force the text to start from the center */
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
    /* Override parent theme's white-space nowrap */
    white-space: normal !important;
    /* Override parent theme's margin-top */
    margin-top: 8px !important;
}

/* ===== EVENTS SECTION ===== */
.events-section {
    padding: 60px 0;
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--medium-purple) 50%, var(--bright-purple) 100%);
    position: relative;
}

.events-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 20, 147, 0.1) 0%, rgba(138, 43, 226, 0.1) 100%);
    pointer-events: none;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.event-item {
    background: linear-gradient(145deg, var(--card-bg) 0%, var(--medium-purple) 100%);
    border: 2px solid var(--accent-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow), 0 0 20px rgba(0, 255, 255, 0.3);
}

.event-item:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color-2);
    box-shadow: var(--shadow), 0 0 30px rgba(255, 0, 255, 0.5);
}

.event-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed from cover to contain to prevent zooming */
    transition: var(--transition);
    background: var(--dark-bg); /* Add background for transparent images */
}

.event-item:hover .event-image img {
    transform: scale(1.05);
}

.event-content {
    padding: 20px;
}

.event-content h3 {
    color: var(--text-color);
    font-size: 1.3rem;
    margin-bottom: 10px;
    text-shadow: 0 0 10px var(--accent-color);
}

.event-content p {
    color: var(--text-color);
    margin-bottom: 15px;
    line-height: 1.5;
    opacity: 0.9;
}

.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.event-meta span {
    background: linear-gradient(45deg, var(--accent-color) 0%, var(--accent-color-2) 100%);
    color: var(--dark-bg);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}

.no-events {
    text-align: center;
    color: var(--text-color);
    font-size: 1.2rem;
    padding: 40px 20px;
}

/* Fix for event items in other contexts */
.event-item {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
    border: 1px solid #333333;
    border-top: 4px solid var(--primary-color);
}

.event-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    border-color: var(--primary-color);
}

.event-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9; /* Better aspect ratio for events */
    max-height: 200px !important;
    height: 200px !important;
}

.event-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Changed from cover to contain */
    transition: var(--transition);
    max-height: 200px !important;
    background: var(--dark-bg); /* Add background for transparent images */
}

.event-item:hover .event-image img {
    transform: scale(1.05);
}

.event-content {
    padding: 20px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.event-item h3 {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    color: var(--white) !important;
    line-height: 1.3 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.event-item h3 a {
    color: var(--white) !important;
    text-decoration: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.event-item h3 a:hover {
    color: var(--primary-color) !important;
}

.event-item p {
    color: #cccccc !important;
    margin-bottom: 15px !important;
    line-height: 1.5 !important;
    flex-grow: 1;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.event-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    font-size: 0.9rem !important;
    color: #999999 !important;
    margin-top: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.event-meta span {
    background: #333333 !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    color: var(--white) !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.event-date {
    color: var(--primary-color) !important;
    font-weight: 600;
}

.event-time {
    color: var(--accent-color) !important;
}

.event-type {
    color: #3498db !important;
}

.event-location {
    color: #9b59b6 !important;
}

.no-events {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background: var(--card-bg);
    border-radius: var(--border-radius);
    border: 1px solid #333333;
}

.no-events p {
    color: #cccccc;
    font-size: 1.1rem;
    margin: 0;
}

.footer-section ul li a {
    color: #cccccc;
    text-decoration: none;
    transition: var(--transition);
}

.footer-section ul li a:hover {
    color: var(--primary-color);
    text-shadow: 0 0 5px var(--primary-color);
}

.social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: var(--dark-bg);
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    text-decoration: none;
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--neon-glow-blue);
}

/* Whatnot Shopping Section Styling */
.whatnot-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--medium-purple) 50%, var(--bright-purple) 100%);
    position: relative;
    overflow: hidden;
}

.whatnot-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);
    pointer-events: none;
}

.whatnot-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 600px;
    margin: 0 auto 40px auto;
    padding: 0 20px;
}

.whatnot-card {
    background: linear-gradient(145deg, var(--card-bg) 0%, var(--medium-purple) 100%);
    border: 2px solid #ff6b35;
    border-radius: var(--border-radius);
    padding: 30px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow), 0 0 20px rgba(255, 107, 53, 0.3);
}

.whatnot-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.1), transparent);
    transition: left 0.5s;
}

.whatnot-card:hover::before {
    left: 100%;
}

.whatnot-card:hover {
    transform: translateY(-10px);
    border-color: #ff8c42;
    box-shadow: var(--shadow), 0 0 30px rgba(255, 107, 53, 0.5), 0 10px 30px rgba(0, 0, 0, 0.3);
}

.whatnot-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.whatnot-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.5));
    transition: var(--transition);
}

.whatnot-card:hover .whatnot-icon img {
    filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.8));
    transform: scale(1.1);
}

.whatnot-card h3 {
    color: var(--text-color);
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-shadow: 0 0 10px #ff6b35;
}

.whatnot-card p {
    color: var(--text-color);
    margin-bottom: 25px;
    line-height: 1.6;
    opacity: 0.9;
}

.btn-whatnot {
    background: linear-gradient(45deg, #ff6b35 0%, #ff8c42 100%);
    color: var(--white);
    border: none;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    transition: var(--transition);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
}

.btn-whatnot:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.6), 0 5px 15px rgba(0, 0, 0, 0.3);
    color: var(--white);
}

/* ========================================
   REMOVED - DUPLICATE WHATNOT SECTION
   ======================================== */

/* Social Media Section Styling */
.social-media-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--bright-purple) 0%, var(--hot-pink) 50%, var(--primary-color) 100%);
    position: relative;
    overflow: hidden;
}

.social-media-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0, 255, 255, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
    pointer-events: none;
}

.social-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.social-card {
    background: linear-gradient(145deg, var(--card-bg) 0%, var(--medium-purple) 100%);
    border: 2px solid var(--accent-color);
    border-radius: var(--border-radius);
    padding: 30px;
    text-align: center;
    text-decoration: none;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow), 0 0 20px rgba(0, 255, 255, 0.3);
    display: block;
}

.social-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.social-card:hover::before {
    left: 100%;
}

.social-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow), 0 0 30px rgba(255, 0, 255, 0.5), 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Social card specific styling */
.social-card.whatnot {
    border-color: #ff6b35;
}

.social-card.whatnot:hover {
    border-color: #ff6b35;
    box-shadow: var(--shadow), 0 0 30px rgba(255, 107, 53, 0.5);
}

.social-card.instagram {
    border-color: #e4405f;
}

.social-card.instagram:hover {
    border-color: #e4405f;
    box-shadow: var(--shadow), 0 0 30px rgba(228, 64, 95, 0.5);
}

.social-card.tiktok {
    border-color: #000000;
}

.social-card.tiktok:hover {
    border-color: #000000;
    box-shadow: var(--shadow), 0 0 30px rgba(0, 0, 0, 0.5);
}

.social-card.youtube {
    border-color: #ff0000;
}

.social-card.youtube:hover {
    border-color: #ff0000;
    box-shadow: var(--shadow), 0 0 30px rgba(255, 0, 0, 0.5);
}

.social-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.social-icon svg {
    width: 100%;
    height: 100%;
    transition: var(--transition);
}

/* Social card specific styling with brand colors */
.social-card.instagram .social-icon svg {
    color: #e4405f;
    filter: drop-shadow(0 0 10px rgba(228, 64, 95, 0.5));
}

.social-card.instagram:hover .social-icon svg {
    color: #e4405f;
    filter: drop-shadow(0 0 20px rgba(228, 64, 95, 0.8));
    transform: scale(1.1);
}

.social-card.tiktok .social-icon svg {
    color: #000000;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.social-card.tiktok:hover .social-icon svg {
    color: #000000;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.8));
    transform: scale(1.1);
}

.social-card.youtube .social-icon svg {
    color: #ff0000;
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));
}

.social-card.youtube:hover .social-icon svg {
    color: #ff0000;
    filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8));
    transform: scale(1.1);
}

.social-card:hover .social-icon {
    transform: scale(1.05);
}

.social-card h3 {
    color: var(--text-color);
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-shadow: 0 0 10px var(--accent-color);
}

.social-card p {
    color: var(--text-color);
    margin-bottom: 20px;
    line-height: 1.6;
    opacity: 0.9;
}

.social-handle {
    background: linear-gradient(45deg, var(--accent-color) 0%, var(--accent-color-2) 100%);
    color: var(--dark-bg);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    display: inline-block;
    transition: var(--transition);
}

.social-card:hover .social-handle {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

/* Responsive adjustments for social media section */
@media (max-width: 768px) {
    .social-media-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }
    
    .social-card {
        padding: 25px 20px;
    }
    
    .social-icon {
        font-size: 2.5rem;
    }
    
    .social-card h3 {
        font-size: 1.3rem;
    }
}

/* ===== MOBILE RESPONSIVENESS IMPROVEMENTS ===== */

/* Mobile-first approach with progressive enhancement */
/* Base styles are mobile, then enhanced for larger screens */

/* Extra small devices (phones, 375px and down) */
@media (max-width: 375px) {
    .hero-content h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .hero-content p {
        font-size: 1rem !important;
        margin: 15px 0 !important;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .hero-buttons .btn {
        width: 100% !important;
        padding: 15px 20px !important;
        font-size: 1.1rem !important;
    }
    
    .section-title {
        font-size: 1.8rem !important;
        margin-bottom: 15px !important;
    }
    
    .section-subtitle {
        font-size: 1rem !important;
        margin-bottom: 25px !important;
    }
    
    .ct-container {
        padding: 0 15px !important;
    }
    
    .site-branding {
        padding: 10px 0 !important;
    }
    
    .site-title img {
        max-height: 40px !important;
    }
    
    .site-description {
        font-size: 0.9rem !important;
        margin: 5px 0 !important;
    }
    
    .nav-menu {
        gap: 15px !important;
    }
    
    .nav-menu a {
        font-size: 0.9rem !important;
        padding: 8px 12px !important;
    }
}

/* Small devices (phones, 480px and down) */
@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2.2rem !important;
    }
    
    .hero-content p {
        font-size: 1.1rem !important;
    }
    
    .hero-buttons {
        gap: 20px !important;
    }
    
    .hero-buttons .btn {
        padding: 18px 25px !important;
        font-size: 1.2rem !important;
        min-height: 50px !important; /* Touch target */
    }
    
    .section-title {
        font-size: 2rem !important;
    }
    
    .section-subtitle {
        font-size: 1.1rem !important;
    }
    
    .ct-container {
        padding: 0 20px !important;
    }
    
    .site-title img {
        max-height: 45px !important;
    }
    
    .nav-menu a {
        font-size: 1rem !important;
        padding: 10px 15px !important;
        min-height: 44px !important; /* Touch target */
        display: flex !important;
        align-items: center !important;
    }
    
    /* Card grids - single column on mobile */
    .pokemon-cards-grid,
    .onepiece-cards-grid,
    .sports-cards-grid,
    .events-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .card-item,
    .event-item {
        margin-bottom: 20px !important;
    }
    
    /* Social media and community sections */
    .social-media-grid,
    .community-grid,
    .whatnot-content {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .social-card,
    .community-card,
    .whatnot-card {
        padding: 25px 20px !important;
    }
    
    /* Contact form mobile optimization */
    .contact-form {
        padding: 25px 20px !important;
    }
    
    .contact-form input,
    .contact-form textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 15px !important;
        min-height: 50px !important; /* Touch target */
    }
    
    .contact-form .btn {
        width: 100% !important;
        padding: 18px 25px !important;
        font-size: 1.2rem !important;
        min-height: 50px !important;
    }
    
    /* Footer mobile optimization */
    .footer-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 20px !important;
    }
    
    .footer-section {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* Medium devices (tablets, 768px and down) */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem !important;
    }
    
    .hero-content p {
        font-size: 1.2rem !important;
    }
    
    .hero-buttons {
        gap: 25px !important;
    }
    
    .hero-buttons .btn {
        padding: 20px 30px !important;
        font-size: 1.3rem !important;
        min-height: 55px !important;
    }
    
    .section-title {
        font-size: 2.2rem !important;
    }
    
    .section-subtitle {
        font-size: 1.2rem !important;
    }
    
    .ct-container {
        padding: 0 25px !important;
    }
    
    .site-title img {
        max-height: 50px !important;
    }
    
    .nav-menu {
        gap: 20px !important;
    }
    
    .nav-menu a {
        font-size: 1.1rem !important;
        padding: 12px 18px !important;
        min-height: 48px !important;
    }
    
    /* Card grids - 2 columns on tablets */
    .pokemon-cards-grid,
    .onepiece-cards-grid,
    .sports-cards-grid,
    .events-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
    
    /* Social media and community sections */
    .social-media-grid,
    .community-grid,
    .whatnot-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
    
    .social-card,
    .community-card,
    .whatnot-card {
        padding: 30px 25px !important;
    }
    
    /* Contact form tablet optimization */
    .contact-form {
        padding: 30px 25px !important;
    }
    
    .contact-form input,
    .contact-form textarea {
        padding: 18px !important;
        min-height: 52px !important;
    }
    
    .contact-form .btn {
        padding: 20px 30px !important;
        font-size: 1.3rem !important;
        min-height: 55px !important;
    }
}

/* Large devices (desktops, 1024px and down) */
@media (max-width: 1024px) {
    .hero-content h1 {
        font-size: 2.8rem !important;
    }
    
    .hero-content p {
        font-size: 1.3rem !important;
    }
    
    .hero-buttons .btn {
        padding: 22px 35px !important;
        font-size: 1.4rem !important;
        min-height: 58px !important;
    }
    
    .section-title {
        font-size: 2.4rem !important;
    }
    
    .section-subtitle {
        font-size: 1.3rem !important;
    }
    
    .ct-container {
        padding: 0 30px !important;
    }
    
    .site-title img {
        max-height: 55px !important;
    }
    
    .nav-menu a {
        font-size: 1.2rem !important;
        padding: 15px 20px !important;
        min-height: 50px !important;
    }
}

/* Landscape orientation mobile devices */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-content h1 {
        font-size: 2.2rem !important;
    }
    
    .hero-content p {
        font-size: 1.1rem !important;
    }
    
    .hero-buttons {
        flex-direction: row !important;
        gap: 20px !important;
    }
    
    .hero-buttons .btn {
        padding: 15px 25px !important;
        font-size: 1.2rem !important;
        min-height: 50px !important;
    }
    
    .nav-menu {
        gap: 15px !important;
    }
    
    .nav-menu a {
        padding: 10px 15px !important;
        min-height: 44px !important;
    }
}

/* High DPI displays (retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-banner-image,
    .site-title img,
    .card-item img,
    .event-item img {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .nav-menu a,
    .social-card,
    .community-card,
    .whatnot-card {
        transition: none !important;
    }
    
    .btn:active,
    .nav-menu a:active,
    .social-card:active,
    .community-card:active,
    .whatnot-card:active {
        transform: scale(0.98) !important;
    }
    
    /* Larger touch targets for mobile */
    .card-item,
    .event-item {
        min-height: 200px !important;
    }
    
    .card-item img,
    .event-item img {
        min-height: 150px !important;
    }
}

/* Print styles */
@media print {
    .hero-buttons,
    .nav-menu,
    .contact-form,
    .social-media-section,
    .whatnot-section {
        display: none !important;
    }
    
    .hero-content {
        color: #000 !important;
        text-shadow: none !important;
    }
    
    .card-item,
    .event-item {
        break-inside: avoid !important;
        margin-bottom: 20px !important;
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    /* Ensure sufficient color contrast */
    .btn {
        border: 2px solid transparent !important;
    }
    
    .btn:hover,
    .btn:focus {
        border-color: var(--accent-color) !important;
        outline: 2px solid var(--accent-color) !important;
        outline-offset: 2px !important;
    }
    
    /* Focus indicators for keyboard navigation */
    .nav-menu a:focus,
    .btn:focus,
    .social-card:focus,
    .community-card:focus,
    .whatnot-card:focus {
        outline: 2px solid var(--accent-color) !important;
        outline-offset: 2px !important;
    }
    
    /* Improved text readability */
    .section-subtitle,
    .card-item p,
    .event-item p {
        line-height: 1.6 !important;
    }
    
    /* Better spacing for mobile reading */
    .card-item,
    .event-item {
        line-height: 1.5 !important;
    }
    
    .card-item h3,
    .event-item h3 {
        margin-bottom: 10px !important;
        line-height: 1.3 !important;
    }
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .btn,
    .social-card,
    .community-card,
    .whatnot-card {
        transition: all 0.2s ease !important;
    }
    
    /* Optimize shadows for mobile */
    .card-item,
    .event-item,
    .social-card,
    .community-card,
    .whatnot-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .card-item:hover,
    .event-item:hover,
    .social-card:hover,
    .community-card:hover,
    .whatnot-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-2px) !important;
    }
}

/* ===== SMOOTH SCROLLING ===== */
html {
    scroll-behavior: smooth;
}

/* For older browsers that don't support scroll-behavior */
@media screen and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Ensure proper scroll positioning for anchor links */
section[id] {
    scroll-margin-top: 100px; /* Accounts for fixed header */
}

/* ========================================
   REMOVED - UNUSED BACKGROUND CSS
   ======================================== */

/* ========================================
   REMOVED - UNUSED GRADIENT CSS
   ======================================== */

/* Debug message removed */

/* ========================================
   SMOOTH VERTICAL GRADIENT - NO BRICKS
   ======================================== */
/* Smooth vertical gradient background - no brick patterns */
html, body, #page {
    background: linear-gradient(180deg, 
        #1a0f2e 0%, 
        #2d1b4e 20%, 
        #8a2be2 40%, 
        #ff1493 50%, 
        #8a2be2 60%, 
        #2d1b4e 80%, 
        #1a0f2e 100%
    ) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

/* Header with semi-transparent background so gradient shows through */
.ct-header,
.site-header,
header,
.header-container,
.header-wrapper {
    background: rgba(26, 15, 46, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* All sections with subtle transparency */
.hero-section,
.category-section,
.events-section,
.community-section,
.social-section,
.whatnot-section,
.about-section,
.contact-section {
    background: rgba(26, 15, 46, 0.3) !important;
    backdrop-filter: blur(5px) !important;
}

/* Footer with matching dark background */
.site-footer {
    background: rgba(26, 15, 46, 0.9) !important;
    backdrop-filter: blur(10px) !important;
}

/* Debug message removed */

/* ========================================
   EXACT GRADIENT FROM IMAGE - HORIZONTAL PURPLE TO MAGENTA
   ======================================== */
/* Exact gradient from the image - horizontal purple to magenta */
html, body, #page {
    background: linear-gradient(90deg, #5609ff 0%, #a51890 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

/* Header with semi-transparent background so gradient shows through */
.ct-header,
.site-header,
header,
.header-container,
.header-wrapper {
    background: rgba(86, 9, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* All sections with subtle transparency */
.hero-section,
.category-section,
.events-section,
.community-section,
.social-section,
.whatnot-section,
.about-section,
.contact-section {
    background: rgba(86, 9, 255, 0.3) !important;
    backdrop-filter: blur(5px) !important;
}

/* Footer with matching dark background */
.site-footer {
    background: rgba(86, 9, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
}

/* Debug message removed */

/* ========================================
   EXACT GRADIENT FROM IMAGE - HORIZONTAL PURPLE TO MAGENTA
   ======================================== */
/* Smoother purple-focused gradient with gradual transition */
html, body, #page {
    background: linear-gradient(90deg, 
        #4a0d8f 0%, 
        #6a1b9a 15%, 
        #8e24aa 30%, 
        #ab47bc 45%, 
        #c2185b 60%, 
        #d81b60 75%, 
        #e91e63 90%, 
        #f50057 100%
    ) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

/* Header with semi-transparent background so gradient shows through */
.ct-header,
.site-header,
header,
.header-container,
.header-wrapper {
    background: linear-gradient(90deg, 
        #4a0d8f 0%, 
        #6a1b9a 15%, 
        #8e24aa 30%, 
        #ab47bc 45%, 
        #c2185b 60%, 
        #d81b60 75%, 
        #e91e63 90%, 
        #f50057 100%
    ) !important;
    background-attachment: fixed !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Navigation menu with matching gradient */
.ct-header .ct-container,
.navigation-menu,
.main-navigation,
.nav-menu,
.menu {
    background: linear-gradient(90deg, 
        #4a0d8f 0%, 
        #6a1b9a 15%, 
        #8e24aa 30%, 
        #ab47bc 45%, 
        #c2185b 60%, 
        #d81b60 75%, 
        #e91e63 90%, 
        #f50057 100%
    ) !important;
    background-attachment: fixed !important;
}

/* ========================================
   REMOVED - DUPLICATE GRADIENT CSS
   ======================================== */

/* Header - remove rectangular background, make transparent so gradient shows through */
.ct-header,
.site-header,
header,
.header-container,
.header-wrapper,
.ct-header .ct-container,
.ct-header .ct-container .ct-container {
    background: transparent !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Navigation menu - remove any background */
.nav-menu,
.main-navigation,
.navigation-menu,
.menu,
.ct-header .ct-container .ct-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove search button and search elements */
.search-form,
.search-form input,
.search-form button,
.search-toggle,
.search-icon,
.search-button,
.search-box,
.search-container,
[class*="search"],
[class*="Search"],
.search,
.search-input,
.search-submit,
.search-toggle-button {
    display: none !important;
}

/* Hero/Banner section - remove rectangular background */
.hero-section,
.hero-banner,
.banner,
.banner-section,
#hero,
#banner,
[class*="hero"],
[class*="banner"],
.hero-content,
.hero-banner-image {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Remove borders around text and buttons */
.hero-subtitle,
.hero-description,
.hero-text,
.banner-text,
.banner-description {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Button styling - make them look like proper buttons */
.hero-buttons,
.hero-buttons .btn,
.btn,
.button,
[class*="btn"],
[class*="button"] {
    display: inline-block !important;
    padding: 15px 30px !important;
    margin: 10px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    overflow: visible !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Force remove ALL borders from buttons */
.hero-buttons *,
.hero-buttons .btn *,
.btn *,
.button *,
[class*="btn"] *,
[class*="button"] * {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Both buttons now use the same purple color scheme - NO YELLOW */
.btn-primary,
.hero-buttons .btn:first-child,
[class*="explore"],
[class*="Explore"],
.btn-secondary,
.hero-buttons .btn:last-child,
[class*="store"],
[class*="Store"],
.hero-buttons .btn,
.btn,
.button,
[class*="btn"],
[class*="button"] {
    background: linear-gradient(45deg, #8e24aa 0%, #ab47bc 100%) !important;
    color: white !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    text-shadow: none !important;
}

/* Hover effects for both buttons - EXACT SAME AS NAVIGATION */
.btn-primary:hover,
.hero-buttons .btn:first-child:hover,
[class*="explore"]:hover,
[class*="Explore"]:hover,
.btn-secondary:hover,
.hero-buttons .btn:last-child:hover,
[class*="store"]:hover,
[class*="Store"]:hover,
.hero-buttons .btn:hover,
.btn:hover,
.button:hover,
[class*="btn"]:hover,
[class*="button"]:hover {
    color: var(--primary-color) !important;
    background: rgba(255, 215, 0, 0.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--neon-glow) !important;
    text-shadow: 0 0 5px var(--primary-color) !important;
}

/* Explore Cards button - bright yellow/gold */
.btn-primary,
.hero-buttons .btn:first-child,
[class*="explore"],
[class*="Explore"] {
    background: linear-gradient(45deg, #ffd700 0%, #ffed4e 100%) !important;
    color: #1a0f2e !important;
    border-color: #ffd700 !important;
    text-shadow: none !important;
}

.btn-primary:hover,
.hero-buttons .btn:first-child:hover,
[class*="explore"]:hover,
[class*="Explore"]:hover {
    background: linear-gradient(45deg, #ffed4e 0%, #ffd700 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4) !important;
    border-color: #ffed4e !important;
}

/* Visit Store button - purple with accent */
.btn-secondary,
.hero-buttons .btn:last-child,
[class*="store"],
[class*="Store"] {
    background: linear-gradient(45deg, #8e24aa 0%, #ab47bc 100%) !important;
    color: white !important;
    border-color: #8e24aa !important;
}

.btn-secondary:hover,
.hero-buttons .btn:last-child:hover,
[class*="store"]:hover,
[class*="Store"]:hover {
    background: linear-gradient(45deg, #ab47bc 0%, #8e24aa 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(142, 36, 170, 0.4) !important;
    border-color: #ab47bc !important;
}

/* Button container styling */
.hero-buttons {
    display: flex !important;
    gap: 20px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin: 30px 0 !important;
}

/* Specific text area - remove any borders */
.hero-content p,
.banner-content p,
.hero-description,
.banner-description,
[class*="description"],
[class*="subtitle"] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* All sections with subtle transparency so gradient shows through */
.category-section,
.events-section,
.community-section,
.social-section,
.whatnot-section,
.about-section,
.contact-section {
    background: rgba(74, 13, 143, 0.3) !important;
    backdrop-filter: blur(5px) !important;
}

/* Footer with semi-transparent background */
.site-footer {
    background: rgba(74, 13, 143, 0.8) !important;
    backdrop-filter: blur(10px) !important;
}

/* ========================================
   CLEANED UP - CONSOLIDATED BUTTON STYLES
   ======================================== */
/* Remove rectangular backgrounds from buttons and content */
.hero-buttons, .btn, .button, [class*="btn"], [class*="button"],
.hero-content, .banner-content, .hero-section, .banner-section,
.hero-banner, .banner, #hero, #banner, [class*="hero"], [class*="banner"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Clean button styling */
.btn-primary {
    background: linear-gradient(45deg, #8e24aa 0%, #ab47bc 100%) !important;
    color: white !important;
    border: none !important;
}

.btn-primary:hover {
    background: linear-gradient(45deg, #ab47bc 0%, #8e24aa 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(142, 36, 170, 0.4) !important;
}

/* Force pill shape on ALL buttons with maximum specificity */
.hero-buttons .btn,
.hero-buttons .btn *,
.btn,
.btn *,
.button,
.button *,
[class*="btn"],
[class*="btn"] *,
[class*="button"],
[class*="button"] *,
.hero-buttons [class*="btn"],
.hero-buttons [class*="button"],
.hero-buttons [class*="btn"] *,
.hero-buttons [class*="button"] * {
    border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    -moz-border-radius: 50px !important;
    border-radius: 50px !important;
}

/* Force pill shape on specific button types */
.btn-primary,
.btn-secondary,
.hero-buttons .btn:first-child,
.hero-buttons .btn:last-child,
[class*="explore"],
[class*="Explore"],
[class*="store"],
[class*="Store"] {
    border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    -moz-border-radius: 50px !important;
    border-radius: 50px !important;
}

/* Override any theme CSS that might be setting border-radius */
.ct-container .btn,
.ct-container .button,
.ct-header .btn,
.ct-header .button,
.site-header .btn,
.site-header .button,
header .btn,
header .button {
    border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    -moz-border-radius: 50px !important;
    border-radius: 50px !important;
}
/* --- Background reset: keep child theme from nuking my custom bg --- */

/* Allow my Additional CSS to handle the site background */
html, body, #page, .site, .ct-main, .ct-container,
.ct-page-header, .ct-header, .ct-footer {
  background: transparent !important;
  background-image: none !important;
}

/* All sections with clean, clear backgrounds like social media section */
.hero-section,
.category-section,
.events-section,
.community-section,
.whatnot-section,
.about-section,
.contact-section {
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--medium-purple) 50%, var(--bright-purple) 100%) !important;
    backdrop-filter: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Remove any semi-transparent backgrounds that block the brickwall */
.hero-section,
.category-section,
.events-section,
.community-section,
.whatnot-section,
.about-section,
.contact-section {
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--medium-purple) 50%, var(--bright-purple) 100%) !important;
}

/* Header and footer with clean backgrounds */
.ct-header,
.site-header,
header,
.header-container,
.header-wrapper {
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--medium-purple) 100%) !important;
    backdrop-filter: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.site-footer {
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--medium-purple) 100%) !important;
    backdrop-filter: none !important;
}

/* All sections with subtle, semi-transparent backgrounds like social media section */
.hero-section,
.category-section,
.events-section,
.community-section,
.whatnot-section,
.about-section,
.contact-section {
    background: rgba(74, 13, 143, 0.3) !important;
    backdrop-filter: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Remove any solid backgrounds that completely block the brickwall */
.hero-section,
.category-section,
.events-section,
.community-section,
.whatnot-section,
.about-section,
.contact-section {
    background: rgba(74, 13, 143, 0.3) !important;
}

/* Header and footer with subtle backgrounds */
.ct-header,
.site-header,
header,
.header-container,
.header-wrapper {
    background: rgba(74, 13, 143, 0.7) !important;
    backdrop-filter: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.site-footer {
    background: rgba(74, 13, 143, 0.7) !important;
    backdrop-filter: none !important;
}

/* All sections with NO background - just like social media section */
.hero-section,
.category-section,
.events-section,
.community-section,
.whatnot-section,
.about-section,
.contact-section {
    background: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Remove any backgrounds that block the brickwall */
.hero-section,
.category-section,
.events-section,
.community-section,
.whatnot-section,
.about-section,
.contact-section {
    background: none !important;
    background-color: transparent !important;
}

/* Header and footer with minimal background for readability */
.ct-header,
.site-header,
header,
.header-container,
.header-wrapper {
    background: rgba(74, 13, 143, 0.8) !important;
    backdrop-filter: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.site-footer {
    background: rgba(74, 13, 143, 0.8) !important;
    backdrop-filter: none !important;
}

/* Header and footer with NO background - pure brickwall like sections */
.ct-header,
.site-header,
header,
.header-container,
.header-wrapper {
    background: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.site-footer {
    background: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Force remove ALL blur effects from header and navigation */
.ct-header *,
.site-header *,
header *,
.header-container *,
.header-wrapper *,
.nav-menu *,
.main-navigation *,
.navigation-menu *,
.menu * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Remove any theme-level backdrop filters */
.ct-header,
.site-header,
header,
.header-container,
.header-wrapper,
.nav-menu,
.main-navigation,
.navigation-menu,
.menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* EXTREMELY AGGRESSIVE blur removal for navigation and hero */
.ct-header,
.site-header,
header,
.header-container,
.header-wrapper,
.hero-section,
.hero-banner,
.banner,
.banner-section,
#hero,
#banner,
[class*="hero"],
[class*="banner"] {
    background: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: unset !important;
    -webkit-backdrop-filter: unset !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Force remove blur from ALL child elements */
.ct-header *,
.site-header *,
header *,
.header-container *,
.header-wrapper *,
.hero-section *,
.hero-banner *,
.banner *,
.banner-section *,
#hero *,
#banner *,
[class*="hero"] *,
[class*="banner"] * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: unset !important;
    -webkit-backdrop-filter: unset !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Override any CSS variables that might be setting blur */
:root {
    --theme-backdrop-blur: none !important;
    --backdrop-blur: none !important;
}

/* Force remove any inline styles or computed styles */
.ct-header,
.site-header,
header,
.header-container,
.header-wrapper,
.hero-section,
.hero-banner,
.banner,
.banner-section,
#hero,
#banner,
[class*="hero"],
[class*="banner"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: unset !important;
    -webkit-backdrop-filter: unset !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* SPECIFICALLY TARGET NAVIGATION BLUR - MAXIMUM FORCE */
.ct-header,
.ct-header *,
.ct-header .ct-container,
.ct-header .ct-container *,
.ct-header .ct-container .ct-container,
.ct-header .ct-container .ct-container *,
.ct-header .ct-container .ct-container .ct-container,
.ct-header .ct-container .ct-container .ct-container * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: unset !important;
    -webkit-backdrop-filter: unset !important;
    filter: none !important;
    -webkit-filter: none !important;
    background: none !important;
    background-color: transparent !important;
}

/* Target any navigation-specific classes */
.nav-menu,
.nav-menu *,
.main-navigation,
.main-navigation *,
.navigation-menu,
.navigation-menu *,
.menu,
.menu *,
.ct-header .ct-container .ct-container .ct-container,
.ct-header .ct-container .ct-container .ct-container * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: unset !important;
    -webkit-backdrop-filter: unset !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Force override any inline styles on navigation */
.ct-header[style*="backdrop-filter"],
.ct-header[style*="backdrop-filter"] *,
.ct-header .ct-container[style*="backdrop-filter"],
.ct-header .ct-container[style*="backdrop-filter"] * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: unset !important;
    -webkit-backdrop-filter: unset !important;
}

/* Remove the strange rectangular strip between nav and banner */
.ct-header + *,
.ct-header + *::before,
.ct-header + *::after,
.site-header + *,
.site-header + *::before,
.site-header + *::after,
header + *,
header + *::before,
header + *::after,
.header-container + *,
.header-container + *::before,
.header-container + *::after,
.header-wrapper + *,
.header-wrapper + *::before,
.header-wrapper + *::after {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    content: none !important;
}

/* Target any elements that might be creating the strip */
.ct-header ~ *,
.site-header ~ *,
header ~ *,
.header-container ~ *,
.header-wrapper ~ * {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Remove any pseudo-elements that might be creating the strip */
.ct-header::after,
.site-header::after,
header::after,
.header-container::after,
.header-wrapper::after,
.ct-header::before,
.site-header::before,
header::before,
.header-container::before,
.header-wrapper::before {
    content: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* EXTREMELY AGGRESSIVE removal of the rectangular strip - target everything possible */
.ct-page-header,
.ct-page-header *,
.ct-page-header::before,
.ct-page-header::after,
.ct-page-header + *,
.ct-page-header ~ *,
.ct-page-header + *::before,
.ct-page-header + *::after,
.ct-page-header ~ *::before,
.ct-page-header ~ *::after {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    content: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Target WordPress page header and content areas */
.page-header,
.page-header *,
.page-header::before,
.page-header::after,
.page-header + *,
.page-header ~ *,
.entry-header,
.entry-header *,
.entry-header::before,
.entry-header::after,
.entry-header + *,
.entry-header ~ *,
.content-header,
.content-header *,
.content-header::before,
.content-header::after,
.content-header + *,
.content-header ~ * {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    content: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================
   CLEANED UP - HEADER SPACING FIXES
   ======================================== */
/* Remove unwanted spacing between header and content */
.ct-header ~ .ct-page-header,
.ct-header + .ct-page-header,
.site-header ~ .page-header,
.site-header + .page-header {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================
   CLEANED UP - EVENTS PAGE BACKGROUND
   ======================================== */
/* Make Events page sections transparent to show brickwall */
.events-section, .events-page, .page-template-events, .page-id-events,
[class*="events"], [class*="Events"], .events-content, .events-container, .events-wrapper {
    background: transparent !important;
    backdrop-filter: none !important;
}

/* Remove any interactive states that might show backgrounds */
.events-section:hover, .events-section:focus, .events-section:active,
.events-page:hover, .events-page:focus, .events-page:active {
    background: transparent !important;
    backdrop-filter: none !important;
}

/* Fix product images to fit containers perfectly - more specific targeting */
.card-image img,
.card-item img,
.product-image img,
[class*="card"] img,
[class*="Card"] img,
[class*="product"] img,
[class*="Product"] img,
.wp-block-image img,
.entry-content img,
.post-content img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    max-width: none !important;
    max-height: none !important;
}

/* Fix image containers to expand and fit images properly - but don't cover text */
.card-image,
.card-item .image-container,
.product-image,
[class*="card"] .image-container,
[class*="Card"] .image-container,
[class*="product"] .image-container,
[class*="Product"] .image-container,
.wp-block-image,
.entry-content .wp-block-image,
.post-content .wp-block-image {
    width: 100% !important;
    height: auto !important;
    min-width: 100% !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* FORCE ALL BACKGROUND ATTACHMENTS TO SCROLL - OVERRIDE EVERYTHING */
html, body, #page, * {
    background-attachment: scroll !important;
}

/* Force brick wall background site-wide with FIXED effect for desktop */
html, body, .site, .ct-main {
    min-height: 100%;
    background: url('/wp-content/uploads/2025/08/brickwall.png') center center fixed no-repeat !important;
    background-size: cover !important;
}

/* Remove Blocksy/hero overlays */
.ct-page-header,
.ct-page-header::before,
.ct-container,
.entry-content > .wp-block-group,
[data-overlay],
[data-overlay]::before {
    background: transparent !important;
    box-shadow: none !important;
}

/* Remove any global gradients */
.has-background-gradient,
.has-background-gradient::before {
    background: none !important;
}

/* Make @youknowitcards text white in social media section */
.social-section [class*="youknowitcards"],
.social-section [class*="YouKnowItCards"],
.social-section [class*="social"],
.social-section [class*="Social"] {
    color: white !important;
}

/* Make @youknowitcards text white - more specific targeting */
.social-section *,
.social-section * *,
[class*="social"] *,
[class*="Social"] *,
[class*="youknowitcards"],
[class*="YouKnowItCards"],
[class*="youknowit"],
[class*="YouKnowIt"] {
    color: white !important;
}

/* Target any text containing @youknowitcards */
*:contains("@youknowitcards"),
*:contains("youknowitcards"),
*:contains("YouKnowItCards") {
    color: white !important;
}

/* Replace logo with new image while maintaining size */
.site-logo,
.header-logo,
[data-id="logo"] img,
.site-logo-container img,
.ct-header [data-id="logo"] img {
    content: url('/wp-content/themes/blocksy-child/ykicnewLogo.jpg') !important;
    max-height: 170px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin-left: -15px !important;
    transform: translateY(-10px) !important;
}

/* Logo hover effects - glow and scale */
.site-logo:hover,
.header-logo:hover,
[data-id="logo"] img:hover,
.site-logo-container img:hover,
.ct-header [data-id="logo"] img:hover {
    transform: scale(1.05) !important;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

/* Logo hover effects for parent containers */
.site-logo:hover .header-logo,
.site-logo:hover img,
.header-logo:hover img {
    transform: scale(1.05) !important;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)) !important;
    transition: all 0.3s ease !important;
}

/* Fix navigation bar overlapping hero content */
.ct-header {
    position: relative !important;
    z-index: 100 !important;
}

/* Ensure hero content is visible above navigation */
.hero-section {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Reduce spacing between banner and content below */
.hero-content {
    margin-top: -100px !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.hero-subtitle {
    margin-top: 0;
    margin-bottom: 20px;
}

.hero-buttons {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* ===== SIGNUP PAGE STYLING ===== */
.signup-page {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--medium-purple) 50%, var(--bright-purple) 100%);
    min-height: 100vh;
}

.signup-header {
    text-align: center;
    margin-bottom: 50px;
}

.signup-header h1 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.signup-header p {
    font-size: 1.2rem;
    color: #cccccc;
    max-width: 600px;
    margin: 0 auto;
}

.signup-form-container {
    max-width: 500px;
    margin: 0 auto;
    background: rgba(13, 6, 24, 0.9);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 15px;
    border: 2px solid var(--primary-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.signup-form .form-group {
    margin-bottom: 25px;
}

.signup-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--white);
    font-size: 1rem;
}

.signup-form input,
.signup-form select {
    width: 100%;
    padding: 15px;
    border: 2px solid #333333;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(13, 6, 24, 0.7);
    color: var(--white);
    box-sizing: border-box;
}

.signup-form input:focus,
.signup-form select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
    background: rgba(13, 6, 24, 0.9);
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.checkbox-label a {
    color: var(--primary-color);
    text-decoration: none;
}

.checkbox-label a:hover {
    text-decoration: underline;
}

.signup-submit-btn {
    width: 100%;
    padding: 18px;
    background: linear-gradient(45deg, var(--primary-color) 0%, #ffed4e 100%);
    color: var(--dark-bg);
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

.signup-submit-btn:hover {
    background: linear-gradient(45deg, #ffed4e 0%, var(--primary-color) 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.5);
}

.signup-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #333333;
}

.signup-footer p {
    color: #cccccc;
    margin: 0;
}

.signup-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.signup-footer a:hover {
    text-decoration: underline;
}

/* Responsive design for signup page */
@media (max-width: 768px) {
    .signup-page {
        padding: 40px 20px;
    }
    
    .signup-header h1 {
        font-size: 2.5rem;
    }
    
    .signup-form-container {
        padding: 30px 20px;
        margin: 0 20px;
    }
    
    .signup-form input,
    .signup-form select {
        padding: 12px;
    }
}

/* ===== SIGNUP SUCCESS PAGE STYLING ===== */
.signup-success-page {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--medium-purple) 50%, var(--bright-purple) 100%);
    min-height: 100vh;
}

.success-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    background: rgba(13, 6, 24, 0.9);
    backdrop-filter: blur(10px);
    padding: 50px;
    border-radius: 15px;
    border: 2px solid var(--primary-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.success-icon {
    font-size: 4rem;
    margin-bottom: 30px;
    animation: bounce 1s ease-in-out;
}

.success-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.success-message {
    font-size: 1.2rem;
    color: #cccccc;
    margin-bottom: 40px;
    line-height: 1.6;
}

.what-happens-next {
    text-align: left;
    margin-bottom: 40px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.what-happens-next h2 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-align: center;
}

.what-happens-next ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.what-happens-next li {
    color: var(--white);
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
}

.next-steps {
    margin-bottom: 40px;
}

.next-steps h2 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 25px;
}

.action-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.action-buttons .btn {
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    min-width: 150px;
}

.help-section {
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.help-section p {
    color: #cccccc;
    margin: 0;
}

.help-section a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.help-section a:hover {
    text-decoration: underline;
}

/* Navigation signup button styling */
.signup-nav-btn {
    background: linear-gradient(45deg, var(--primary-color) 0%, #ffed4e 100%) !important;
    color: var(--dark-bg) !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3) !important;
}

.signup-nav-btn:hover {
    background: linear-gradient(45deg, #ffed4e 0%, var(--primary-color) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5) !important;
    color: var(--dark-bg) !important;
}

/* Animation for success icon */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

/* Responsive design for success page */
@media (max-width: 768px) {
    .signup-success-page {
        padding: 40px 20px;
    }
    
    .success-content {
        padding: 30px 20px;
        margin: 0 20px;
    }
    
    .success-content h1 {
        font-size: 2rem;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .action-buttons .btn {
        width: 100%;
        max-width: 250px;
    }
}

/* ===== NAVIGATION SIGNUP BUTTON STYLING ===== */
.signup-nav-item {
    margin-left: 20px;
}

.signup-nav-btn {
    background: linear-gradient(45deg, var(--primary-color) 0%, #ffed4e 100%) !important;
    color: var(--dark-bg) !important;
    padding: 12px 24px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3) !important;
    display: inline-block !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.signup-nav-btn:hover {
    background: linear-gradient(45deg, #ffed4e 0%, var(--primary-color) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5) !important;
    color: var(--dark-bg) !important;
    text-decoration: none !important;
}

/* Alternative: Add signup button to header if navigation doesn't work */
.ct-header .signup-header-btn {
    background: linear-gradient(45deg, var(--primary-color) 0%, #ffed4e 100%) !important;
    color: var(--dark-bg) !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3) !important;
    display: inline-block !important;
    margin-left: 20px !important;
}

.ct-header .signup-header-btn:hover {
    background: linear-gradient(45deg, #ffed4e 0%, var(--primary-color) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5) !important;
    color: var(--dark-bg) !important;
}

/* ===== HEADER SIGNUP BUTTON POSITIONING ===== */
.header-signup {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.ct-header .ct-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-branding {
    flex-shrink: 0;
    margin-left: -20px;
    transform: translateY(-15px);
}

.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-signup {
    flex-shrink: 0;
    margin-left: 20px;
}

/* ===== SIGNUP FORM JAVASCRIPT ===== */

/* ===== MOBILE RESPONSIVENESS ===== */

/* Mobile-first responsive design */
@media (max-width: 768px) {
    
    /* Header and Navigation */
    .ct-header {
        padding: 10px 0 !important;
        position: relative !important;
        z-index: 100 !important;
    }
    
    .ct-header [data-row*="middle"] {
        --height: 80px !important;
    }
    
    .ct-header [data-row*="bottom"] {
        --height: 50px !important;
    }
    
    /* Mobile-specific hero content positioning - AGGRESSIVE OVERRIDE */
    .hero-content,
    .hero-section .hero-content,
    .hero-section > .hero-content,
    .hero-section div.hero-content,
    .hero-section [class*="hero"] .hero-content {
        margin-top: 120px !important;
        padding-top: 20px !important;
        position: relative !important;
        z-index: 5 !important;
    }
    
    /* Mobile-specific text positioning - AGGRESSIVE OVERRIDE */
    .hero-content p,
    .hero-content div:contains("Your premier destination"),
    .hero-content div:contains("premier destination"),
    .hero-content div:contains("Pokémon"),
    .hero-content div:contains("One Piece"),
    .hero-content div:contains("Sports cards"),
    .hero-content div,
    .hero-content span,
    .hero-content h1,
    .hero-content h2,
    .hero-content h3 {
        margin-top: 0 !important;
        margin-bottom: 25px !important;
        padding-top: 0 !important;
        position: relative !important;
        z-index: 6 !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
    
    /* Mobile-specific button positioning - AGGRESSIVE OVERRIDE */
    .hero-buttons,
    .hero-section .hero-buttons,
    .hero-section > .hero-buttons,
    .hero-section div.hero-buttons {
        margin-top: 40px !important;
        margin-bottom: 50px !important;
        position: relative !important;
        z-index: 7 !important;
    }
    
    /* Logo sizing for mobile */
    .site-logo,
    .header-logo,
    [data-id="logo"] img,
    .site-logo-container img,
    .ct-header [data-id="logo"] img {
        max-height: 120px !important;
        width: auto !important;
        margin-left: -10px !important;
        transform: translateY(-8px) !important;
    }
    
    .site-branding {
        margin-left: -15px;
        transform: translateY(-12px);
    }
    
    /* Navigation menu mobile optimization */
    .ct-header [data-id="menu"] > ul > li > a {
        --theme-font-size: 11px !important;
        padding: 8px 12px !important;
    }
    
    /* Hero section mobile optimization */
    .hero-section {
        padding: 40px 20px !important;
        text-align: center !important;
    }
    
    .hero-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    .hero-subtitle {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 25px !important;
    }
    
    /* Button mobile optimization */
    .hero-buttons {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }
    
    .btn {
        width: 100% !important;
        max-width: 280px !important;
        padding: 15px 25px !important;
        font-size: 16px !important;
        border-radius: 25px !important;
    }
    
    /* Product cards mobile grid */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .woocommerce ul.products li.product {
        margin-bottom: 20px !important;
    }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin: 10px 0 5px 0 !important;
    }
    
    .woocommerce ul.products li.product .price {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    
    /* Event cards mobile optimization */
    .event-card {
        margin-bottom: 20px !important;
        padding: 20px !important;
    }
    
    .event-card h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }
    
    .event-card p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    /* Social media section mobile */
    .social-section {
        padding: 30px 20px !important;
        text-align: center !important;
    }
    
    .social-section h2 {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }
    
    /* Footer mobile optimization */
    .ct-footer {
        padding: 30px 20px !important;
    }
    
    .ct-footer [data-row*="middle"] > div {
        --grid-template-columns: 1fr !important;
        --container-spacing: 30px !important;
    }
    
    .ct-footer [data-row*="top"] > div {
        --grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    
    /* Container spacing for mobile */
    .ct-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Banner image mobile optimization */
    .hero-banner-image {
        max-height: 200px !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    
    /* Signup form mobile optimization */
    .signup-page {
        padding: 30px 20px !important;
    }
    
    .signup-form {
        max-width: 100% !important;
        padding: 25px 20px !important;
    }
    
    .signup-form h2 {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }
    
    .form-group input,
    .form-group textarea {
        padding: 12px 15px !important;
        font-size: 16px !important;
    }
    
    .signup-submit-btn {
        width: 100% !important;
        padding: 15px !important;
        font-size: 16px !important;
    }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
    
    /* Header adjustments */
    .ct-header [data-row*="middle"] {
        --height: 120px !important;
    }
    
    /* Logo sizing for tablet */
    .site-logo,
    .header-logo,
    [data-id="logo"] img,
    .site-logo-container img,
    .ct-header [data-id="logo"] img {
        max-height: 140px !important;
        margin-left: -12px !important;
        transform: translateY(-9px) !important;
    }
    
    .site-branding {
        margin-left: -18px;
        transform: translateY(-13px);
    }
    
    /* Hero section tablet optimization */
    .hero-section {
        padding: 60px 40px !important;
    }
    
    .hero-title {
        font-size: 36px !important;
    }
    
    .hero-subtitle {
        font-size: 18px !important;
    }
    
    /* Product cards tablet grid */
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
    
    /* Event cards tablet */
    .event-card {
        padding: 25px !important;
    }
    
    /* Container spacing for tablet */
    .ct-container {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* Large mobile devices (landscape phones) */
@media (max-width: 480px) {
    
    /* Even smaller header */
    .ct-header [data-row*="middle"] {
        --height: 70px !important;
    }
    
    .ct-header [data-row*="bottom"] {
        --height: 45px !important;
    }
    
    /* Logo for very small screens */
    .site-logo,
    .header-logo,
    [data-id="logo"] img,
    .site-logo-container img,
    .ct-header [data-id="logo"] img {
        max-height: 100px !important;
    }
    
    /* Hero section for small screens */
    .hero-section {
        padding: 30px 15px !important;
    }
    
    .hero-title {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }
    
    .hero-subtitle {
        font-size: 15px !important;
        margin-bottom: 20px !important;
    }
    
    /* Mobile-specific hero content positioning for very small screens */
    .hero-content {
        margin-top: 120px !important;
        padding-top: 20px !important;
        position: relative !important;
        z-index: 5 !important;
    }
    
    /* Mobile-specific text positioning for very small screens */
    .hero-content p,
    .hero-content div:contains("Your premier destination"),
    .hero-content div:contains("premier destination"),
    .hero-content div:contains("Pokémon"),
    .hero-content div:contains("One Piece"),
    .hero-content div:contains("Sports cards") {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        padding-top: 0 !important;
        position: relative !important;
        z-index: 6 !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
    
    /* Mobile-specific button positioning for very small screens */
    .hero-buttons {
        margin-top: 25px !important;
        margin-bottom: 30px !important;
        position: relative !important;
        z-index: 7 !important;
    }
    
    /* Single column product grid for very small screens */
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Smaller buttons */
    .btn {
        padding: 12px 20px !important;
        font-size: 15px !important;
    }
    
    /* Container for very small screens */
    .ct-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    
    /* Larger touch targets */
    .btn {
        min-height: 44px !important;
    }
    
    .ct-header [data-id="menu"] > ul > li > a {
        padding: 12px 16px !important;
        min-height: 44px !important;
    }
    
    /* Better button spacing */
    .hero-buttons {
        gap: 20px !important;
    }
    
    /* Larger form inputs for mobile */
    .form-group input,
    .form-group textarea {
        min-height: 44px !important;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    
    /* Ensure crisp images on retina displays */
    .hero-banner-image,
    .site-logo img,
    .product-image img {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* Landscape orientation fixes */
@media (orientation: landscape) and (max-height: 500px) {
    
    /* Reduce vertical spacing for landscape mobile */
    .hero-section {
        padding: 20px 20px !important;
    }
    
    .hero-title {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }
    
    .hero-subtitle {
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }
    
    .hero-buttons {
        gap: 10px !important;
    }
    
    .btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}

/* Print styles */
@media print {
    
    /* Hide unnecessary elements when printing */
    .ct-header,
    .ct-footer,
    .hero-buttons,
    .social-section {
        display: none !important;
    }
    
    /* Ensure text is readable */
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt !important;
        line-height: 1.4 !important;
    }
    
    /* Remove backgrounds for printing */
    * {
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* ===== HERO TEXT SELECTION & BANNER INTERACTION FIXES ===== */

/* Fix hero text selection and banner interaction */
.hero-title,
.hero-subtitle,
.hero-content p,
.hero-content h1,
.hero-content h2,
.hero-content h3,
.hero-content div {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 3 !important;
}

/* Prevent banner image from interfering with text selection */
.hero-banner-image,
.hero-banner img,
[class*="banner"] img,
[class*="Banner"] img {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure hero content is properly layered */
.hero-content {
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    margin-top: -150px !important;
    padding-top: 0 !important;
}

/* Fix button clickability - ensure entire button area is clickable */
.hero-buttons .btn,
.btn,
.button,
[class*="btn"],
[class*="button"] {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Ensure buttons don't have overlapping elements */
.hero-buttons .btn::before,
.hero-buttons .btn::after,
.btn::before,
.btn::after,
.button::before,
.button::after {
    display: none !important;
    pointer-events: none !important;
}

/* ===== HERO POSITIONING - BRING CONTENT HIGHER ===== */

/* Bring hero text and buttons higher up */
.hero-title,
.hero-subtitle,
.hero-content h1,
.hero-content h2,
.hero-content h3 {
    margin-top: -50px !important;
    margin-bottom: 15px !important;
    position: relative !important;
    z-index: 6 !important;
}

/* Position buttons higher and closer to text */
.hero-buttons {
    margin-top: -30px !important;
    margin-bottom: 30px !important;
    position: relative !important;
    z-index: 7 !important;
}

/* ===== DESKTOP/WEB VERSION STYLING ===== */
@media (min-width: 1025px) {
    /* Desktop hero content positioning */
    .hero-section .hero-content {
        margin-top: -200px !important;
        padding-top: 0 !important;
        position: relative !important;
        z-index: 5 !important;
    }
    
    /* Desktop text positioning */
    .hero-content p,
    .hero-content div:contains("Your premier destination"),
    .hero-content div:contains("premier destination"),
    .hero-content div:contains("Pokémon"),
    .hero-content div:contains("One Piece"),
    .hero-content div:contains("Sports cards") {
        margin-top: -80px !important;
        margin-bottom: 20px !important;
        position: relative !important;
        z-index: 6 !important;
        font-size: 18px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
    
    /* Desktop button positioning */
    .hero-buttons {
        margin-top: -30px !important;
        margin-bottom: 30px !important;
        position: relative !important;
        z-index: 7 !important;
    }
}

/* Specific positioning for the destination text */
.hero-content p,
.hero-content div:contains("Your premier destination"),
.hero-content div:contains("premier destination"),
.hero-content div:contains("Pokémon"),
.hero-content div:contains("One Piece"),
.hero-content div:contains("Sports cards") {
    margin-top: -80px !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 6 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* ===== TABLET VERSION STYLING ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet hero content positioning */
    .hero-section .hero-content {
        margin-top: -150px !important;
        padding-top: 0 !important;
        position: relative !important;
        z-index: 5 !important;
    }
    
    /* Tablet text positioning */
    .hero-content p,
    .hero-content div:contains("Your premier destination"),
    .hero-content div:contains("premier destination"),
    .hero-content div:contains("Pokémon"),
    .hero-content div:contains("One Piece"),
    .hero-content div:contains("Sports cards") {
        margin-top: -60px !important;
        margin-bottom: 20px !important;
        position: relative !important;
        z-index: 6 !important;
        font-size: 17px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
    
    /* Tablet button positioning */
    .hero-buttons {
        margin-top: -20px !important;
        margin-bottom: 30px !important;
        position: relative !important;
        z-index: 7 !important;
    }
}

/* ===== UNIVERSAL MOBILE OVERRIDE - HIGHEST PRIORITY ===== */
@media (max-width: 768px) {
    /* Force mobile positioning with maximum specificity */
    html body .hero-section .hero-content,
    html body .hero-section > .hero-content,
    html body .hero-section div.hero-content {
        margin-top: 120px !important;
        padding-top: 20px !important;
        position: relative !important;
        z-index: 5 !important;
    }
    
    /* Force mobile text positioning */
    html body .hero-section .hero-content p,
    html body .hero-section .hero-content div,
    html body .hero-section .hero-content span,
    html body .hero-section .hero-content h1,
    html body .hero-section .hero-content h2,
    html body .hero-section .hero-content h3 {
        margin-top: 0 !important;
        margin-bottom: 25px !important;
        padding-top: 0 !important;
        position: relative !important;
        z-index: 6 !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
    
    /* Force mobile button positioning */
    html body .hero-section .hero-buttons,
    html body .hero-section > .hero-buttons,
    html body .hero-section div.hero-buttons {
        margin-top: 40px !important;
        margin-bottom: 50px !important;
        position: relative !important;
        z-index: 7 !important;
    }
}

/* ===== MOBILE BANNER IMAGE FIXES ===== */
@media (max-width: 768px) {
    /* Ensure banner image is visible on mobile */
    .hero-banner,
    .hero-banner-image,
    .hero-banner img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 200px !important;
        object-fit: cover !important;
        object-position: center !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Banner container mobile optimization */
    .hero-banner {
        margin-bottom: 20px !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Ensure banner doesn't interfere with text selection */
    .hero-banner *,
    .hero-banner-image *,
    .hero-banner img {
        pointer-events: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
}

/* Small mobile banner optimization */
@media (max-width: 480px) {
    .hero-banner,
    .hero-banner-image,
    .hero-banner img {
        max-height: 150px !important;
        width: 100% !important;
    }
    
    .banner-indicator {
        width: 8px !important;
        height: 8px !important;
    }
}

/* ===== MOBILE BACKGROUND OVERRIDE - UNIFIED SEAMLESS BACKGROUND ===== */
@media (max-width: 768px) {
    /* Create unified seamless background for mobile - ONLY on html */
    html {
        background: url('/wp-content/uploads/2025/08/brickwall.png') center center scroll no-repeat !important;
        background-size: cover !important;
        background-attachment: scroll !important;
        -webkit-background-attachment: scroll !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
    
    /* Remove ALL other backgrounds to prevent section separation */
    body, .site, .ct-main,
    .hero-section, .category-section, .events-section, .community-section, .whatnot-section,
    .ct-container, .entry-content, .wp-block-group,
    [data-overlay], [data-overlay]::before,
    .has-background-gradient, .has-background-gradient::before,
    .hero-content, .section-header, .card-item, .event-item, .tip-card {
        background: none !important;
        background-image: none !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Remove any remaining background conflicts */
    html * {
        background-image: none !important;
    }
}

/* ===== FINAL MOBILE BACKGROUND OVERRIDE - MAXIMUM PRIORITY ===== */
@media (max-width: 768px) {
    /* Force override WordPress Custom CSS with maximum specificity */
    html[data-useragent*="Mobile"] {
        background: url('/wp-content/uploads/2025/08/brickwall.png') center center scroll no-repeat !important;
        background-size: cover !important;
        background-attachment: scroll !important;
        -webkit-background-attachment: scroll !important;
    }
    
    /* Alternative approach - target mobile devices */
    @media (hover: none) and (pointer: coarse) {
        html {
            background: url('/wp-content/uploads/2025/08/brickwall.png') center center scroll no-repeat !important;
            background-size: cover !important;
            background-attachment: scroll !important;
            -webkit-background-attachment: scroll !important;
        }
    }
    
    /* Force remove all conflicting backgrounds */
    body, .site, .ct-main, .hero-section, .category-section, .events-section, 
    .community-section, .whatnot-section, .ct-container, .entry-content, 
    .wp-block-group, [data-overlay], [data-overlay]::before,
    .has-background-gradient, .has-background-gradient::before {
        background: none !important;
        background-image: none !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ===== ULTIMATE MOBILE OVERRIDE - END OF FILE ===== */
@media (max-width: 768px) {
    /* This should override everything */
    html {
        background: url('/wp-content/uploads/2025/08/brickwall.png') center center scroll no-repeat !important;
        background-size: cover !important;
        background-attachment: scroll !important;
        -webkit-background-attachment: scroll !important;
    }
    
    /* Remove all other backgrounds */
    * {
        background-image: none !important;
    }
    
    /* Only allow html background */
    html * {
        background: none !important;
        background-image: none !important;
        background-color: transparent !important;
    }
}



/* ===== SMALL MOBILE BACKGROUND FIX ===== */
@media (max-width: 480px) {
    /* Even more specific mobile background sizing */
    html, body {
        background: url('/wp-content/uploads/2025/08/brickwall.png') center center scroll no-repeat !important;
        background-size: 100% auto !important;
        background-position: center top !important;
        background-attachment: scroll !important;
        -webkit-background-attachment: scroll !important;
        -webkit-background-size: 100% auto !important;
        -moz-background-size: 100% auto !important;
        -o-background-size: 100% auto !important;
        min-height: 100vh !important;
    }
}





/* ===== SIMPLE MOBILE BACKGROUND FIX ===== */
@media (max-width: 768px) {
    /* Force the brickwall background on mobile */
    html, body {
        background: url('/wp-content/uploads/2025/08/brickwall.png') center center scroll no-repeat !important;
        background-size: 100% auto !important;
        background-position: center top !important;
        background-attachment: scroll !important;
        -webkit-background-attachment: scroll !important;
        -webkit-background-size: 100% auto !important;
        -moz-background-size: 100% auto !important;
        -o-background-size: 100% auto !important;
        min-height: 100vh !important;
    }
    
    /* Make ALL content sections transparent so background shows through */
    .hero-section, .category-section, .events-section, .community-section,
    .whatnot-section, .ct-container, .entry-content, .wp-block-group,
    [data-overlay], [data-overlay]::before, .has-background-gradient,
    .has-background-gradient::before, .section-header, .card-item,
    .event-item, .tip-card, .trading-tips-content, .social-media-section,
    .ct-footer, footer, .footer-content, .main-navigation, .nav-menu,
    .widget-area, .sidebar, .widget, .widget-title, .widget-content,
    .site, .ct-main, .main-content, .content-area {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    /* Force remove any remaining backgrounds */
    * {
        background-image: none !important;
    }
    
    /* Only allow the main page background */
    html * {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }
}

/* ===== TARGETED MOBILE TRANSPARENCY ===== */
@media (max-width: 768px) {
    /* Only make specific content sections transparent, don't touch html/body */
    .hero-section, .category-section, .events-section, .community-section,
    .whatnot-section, .ct-container, .entry-content, .wp-block-group,
    [data-overlay], [data-overlay]::before, .has-background-gradient,
    .has-background-gradient::before, .section-header, .card-item,
    .event-item, .tip-card, .trading-tips-content, .social-media-section {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }
    
    /* Target specific WordPress elements that might be blocking */
    .wp-block-group, .wp-block-column, .wp-block-row,
    .wp-block-buttons, .wp-block-button, .wp-block-image,
    .wp-block-gallery, .wp-block-cover, .wp-block-media-text {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }
}
