/**
 * Noir XIX storefront overrides (hero slider, header spacing).
 */

/* Home hero: stable height; tall images scale inside without stretching the slider */
.slider-home-2 .wrap-slider.home-hero-slide {
    position: relative;
}

.slider-home-2 .home-hero-slide__media {
    position: relative;
    width: 100%;
    height: clamp(400px, 70vw, 800px); /* Increased height so portrait images look better */
    max-height: 800px;
    overflow: hidden;
}

.slider-home-2 .home-hero-slide__media img.home-hero-slide__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%; /* Focus slightly higher on the subject */
    display: block;
}

/* Keep overlay content usable */
.slider-home-2 .home-hero-slide .box-content {
    pointer-events: none;
}

.slider-home-2 .home-hero-slide .box-content a {
    pointer-events: auto;
}

/* Ensure no unwanted top space */
body, #wrapper, #header, .announcement-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

/* Force stronger font weights for brand visibility */
.tf-slideshow .box-content h1 {
    font-weight: 700 !important;
}
.tf-slideshow .box-content p {
    font-weight: 600 !important;
}
.collection-title, .flat-title .title {
    font-weight: 700 !important;
}
.tf-btn {
    font-weight: 600 !important;
}

/* Tighter header (reduce perceived white band under announcement / nav rows) */
.header-default.header-style-2 .main-header {
    padding-top: 8px;
    padding-bottom: 8px;
}

.header-default.header-style-2 .main-header.line {
    border-bottom-width: 1px;
}

.header-default.header-style-2 .header-bottom {
    padding-top: 6px;
    padding-bottom: 6px;
}

.header-default.header-style-2 .header-bottom.line {
    border-bottom-width: 1px;
}

.header-default.header-style-2 .wrapper-header.gap_15 {
    gap: 10px !important;
}

/* Main header row: ensure logo stays centered by making side columns equally flexible */
@media (min-width: 1200px) {
    .noirxix-header-main-row > .col-xl-5 {
        flex: 1 1 0 !important;
        max-width: none !important;
    }

    .noirxix-header-main-row > .col-xl-2 {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* Marquee: NoirXIX branding overrides */
.tf-marquee.bg_blue-3 {
    background-color: #111 !important; /* Deep Noir black */
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.tf-marquee .marquee-item .text {
    letter-spacing: 0.1em;
    font-size: 13px;
}

/* Pickleball Slider specific fixes */
.tf-slideshow.slider-skincare,
.tf-slideshow.slider-skincare .wrap-slider {
    height: clamp(800px, 100vh, 1200px) !important;
    background-color: #000;
}

.tf-slideshow.slider-skincare .wrap-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.85; /* Slight fade for text contrast */
}

.card-box-2 {
    background: rgba(0, 0, 0, 0.4);
    padding: 40px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 500px;
}

.card-box-2 .text-extra-heading {
    font-size: clamp(40px, 8vw, 80px); /* Reduced from likely 100px+ */
    line-height: 0.9;
    margin-bottom: 20px;
    letter-spacing: -2px;
}

.card-box-2 .title {
    font-size: clamp(16px, 3vw, 24px) !important;
    line-height: 1.4;
}

/* Card product type-line-padding support */
.card-product.type-line-padding {
    border: 1px solid #eee;
    padding: 15px;
    transition: all 0.3s ease;
}

.card-product.type-line-padding:hover {
    border-color: #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Discovery box */
.discovery-new-item {
    background-color: #111;
    color: #fff;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.discovery-new-item h5 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 700;
}

.discovery-new-item i {
    font-size: 40px;
    color: #fff;
    transition: transform 0.3s ease;
}

.discovery-new-item:hover i {
    transform: rotate(-45deg);
}

/* Banner section colored backgrounds */
.bg_noir-promo {
    background-color: #f8f8f8;
}

.tf-content-wrap .heading {
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
}