/* --- PAINT GATE: prevent catalog flash until JS signals ready --- */
.seProductListContainer { visibility: hidden; }
body.page-initialized .seProductListContainer { visibility: visible; }

/* Reserve hero space for ANY hero page while hero is not ready */
body.catalog-tld-catalog:not(.hero-ready) .sePageMain::before,
body.catalog-goodr:not(.hero-ready) .sePageMain::before,
body.catalog-spy-optics:not(.hero-ready) .sePageMain::before,
body.catalog-akta:not(.hero-ready) .sePageMain::before {
  content: "";
  display: block;
  height: 700px; /* match your hero height */
}

/* Drop the placeholder once ANY hero is ready */
body.hero-ready .sePageMain::before {
  content: none;
  height: 0;
}

/* Reset page main margins for all hero pages */
.catalog-tld-catalog .sePageMain,
.catalog-goodr .sePageMain,
.catalog-spy-optics .sePageMain,
.catalog-akta .sePageMain {
    margin-top: 0px !important;
}

/* SHARED HERO STYLES - applies to all hero containers */
.tld-hero-container,
.goodr-hero-container,
.spy-hero-container,
.akta-hero-container {
    position: relative !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    height: 700px !important;
    margin-bottom: 40px !important;
    animation: fadeIn 0.6s ease !important;
}

/* INDIVIDUAL HERO BACKGROUNDS */
.tld-hero-image {
    width: 100% !important;
    height: 100% !important;
    background-image: url('https://www.sefiles.net/merchant/7792/images/site/TLD_B25_FALL_VAEA_VERBEECK_SKYLINE011.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.goodr-hero-image {
    width: 100% !important;
    height: 100% !important;
    background-image: url('https://www.sefiles.net/merchant/7792/images/site/goodr_banner.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.spy-hero-image {
    width: 100% !important;
    height: 100% !important;
    background-image: url('https://www.sefiles.net/merchant/7792/images/site/SPYgoggles-slimC.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.akta-hero-image {
    width: 100% !important;
    height: 100% !important;
    background-image: url('https://www.sefiles.net/merchant/7792/images/site/FR1D40481.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* SHARED DARK OVERLAY - applies to all hero images */
.tld-hero-image::before,
.goodr-hero-image::before,
.spy-hero-image::before,
.akta-hero-image::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

/* SHARED TEXT OVERLAY STYLES */
.hero-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    color: white !important;
    z-index: 2 !important;
    width: 100% !important;
}

.hero-h1-wrapper {
    overflow: hidden !important;
    height: 72px !important;
    margin-bottom: 15px !important;
}

.hero-p-wrapper {
    overflow: hidden !important;
    height: 35px !important;
}

.hero-text h1 {
    font-size: 60px !important;
    font-weight: 700 !important;
    color: white !important;
    margin: 0 !important;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8) !important;
    font-family: 'Montserrat', sans-serif !important;
    text-align: center !important;
    animation: slideUpH1 0.5s ease-out 0.5s both !important;
}

.hero-text p {
    font-size: 28px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    font-family: 'Montserrat', sans-serif !important;
    text-align: center !important;
    animation: slideUpP 0.5s ease-out 0.8s both !important;
}

/* Tablet screens (768px and below) */
@media (max-width: 768px) {
    /* Reduce hero height for tablets */
    body.catalog-tld-catalog:not(.hero-ready) .sePageMain::before,
    body.catalog-goodr:not(.hero-ready) .sePageMain::before,
    body.catalog-spy-optics:not(.hero-ready) .sePageMain::before,
    body.catalog-akta:not(.hero-ready) .sePageMain::before {
        height: 500px !important;
    }
    
    .tld-hero-container,
    .goodr-hero-container,
    .spy-hero-container,
    .akta-hero-container {
        height: 500px !important;
        margin-bottom: 30px !important;
    }
    
    /* Reduce text sizes for tablets */
    .hero-text h1 {
        font-size: 42px !important;
    }
    
    .hero-text p {
        font-size: 22px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.3 !important;
        animation: slideUpH1 0.5s ease-out 0.8s both !important;
    }
    
    .hero-h1-wrapper {
        height: 50px !important;
        margin-bottom: 12px !important;
    }
    
    .hero-p-wrapper {
        height: 55px !important;
    }
}

/* Mobile screens (480px and below) */
@media (max-width: 480px) {
    /* Further reduce hero height for mobile */
    body.catalog-tld-catalog:not(.hero-ready) .sePageMain::before,
    body.catalog-goodr:not(.hero-ready) .sePageMain::before,
    body.catalog-spy-optics:not(.hero-ready) .sePageMain::before,
    body.catalog-akta:not(.hero-ready) .sePageMain::before {
        height: 400px !important;
    }
    
    .tld-hero-container,
    .goodr-hero-container,
    .spy-hero-container,
    .akta-hero-container {
        height: 400px !important;
        margin-bottom: 20px !important;
    }
    
    /* Mobile text sizes */
    .hero-text h1 {
        font-size: 32px !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    }
    
    .hero-text p {
        font-size: 18px !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.3 !important;
        animation: slideUpH1 0.5s ease-out 0.8s both !important;
    }
    
    .hero-h1-wrapper {
        height: 38px !important;
        margin-bottom: 10px !important;
    }
    
    .hero-p-wrapper {
        height: 50px !important; /* Allow wrapper to expand for wrapped text */
        overflow: hidden !important; /* Show wrapped text */
    }
    
    /* Add padding to hero text on very small screens */
    /* .hero-text {
        padding: 0 20px !important;
    } */
}

/* ANIMATIONS */
@keyframes slideUpH1 {
    from {
        transform: translateY(60px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideUpP {
    from {
        transform: translateY(30px);
    }
    to {
        transform: translateY(0);
    }
}

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