﻿/* Local accessibility and responsive repairs for NOIR. */
:root { --noir-accent: #a63838; }

/* The collection bar occupies the first 48px in both header states. */
.landing-fashion-trends .navbar-top-default {
    top: 48px;
    background: #fff;
}
.landing-fashion-trends .navbar .navbar-nav .nav-link:hover,
.landing-fashion-trends .navbar .navbar-nav .nav-link.active,
.products-section .sub-heading,
.products-section .card:hover .subheading,
.about .cover:hover .card-title,
.look-hint b,
.look-modal__cat { color: var(--noir-accent); }
.btn.yellow-btn,
.btn.btn-hvr-black:hover,
.look-modal__close:hover {
    background-color: var(--noir-accent);
    border-color: var(--noir-accent);
    color: #fff;
}
.btn.btn-hvr-blue:hover { background-color: #212121; border-color: #212121; }

footer p.text { color: #595959; font-size: 14px; line-height: 1.7; }
.contact-form .form-control::placeholder { color: #626262; opacity: 1; }
.contact-section .contact-form .form-control { border-bottom-color: #767676; font-size: 16px; }
.contact-section .contact-form .form-control:focus { border-bottom-color: var(--noir-accent); }
.contact-section p.collection-form-note { font-size: 16px; line-height: 1.6; }

/* A localized fade supports both caption lines without dimming the clothes. */
.look-caption {
    padding-top: 42px;
    background: linear-gradient(to top, rgba(20,20,20,.88) 0%, rgba(20,20,20,.76) 65%, transparent 100%);
}
.look-caption span { opacity: 1; }

/* Keep the headline and photo in their own section's flow. */
.about-sec { background-color: #212121; }
.about-heading { color: #fff; line-height: 1.18; margin-bottom: 24px; }
.about-text { line-height: 1.65; }
.about-sec .owl-carousel,
.about-sec .owl-carousel.owl-loaded { position: relative; }
.owl-testimonial .owl-dots { justify-content: center; margin-top: 18px; }
.owl-testimonial .owl-dots .owl-dot span { transform: none; top: auto; left: auto; margin: 0 7px; border-color: #fff; }
.owl-testimonial .owl-dots .owl-dot.active span { background: var(--noir-accent); }
.about { padding-top: 120px; }

@media (min-width: 992px) {
    .banner-sec.banner-image {
        height: auto;
        min-height: 780px;
        padding-top: 190px;
        padding-bottom: 110px;
        background-image: linear-gradient(90deg, transparent 40%, rgba(245,243,238,.25) 65%, rgba(245,243,238,.42)), url('/assets/collection/landings/fashion-trends/images/banner-img.jpg');
    }
    .banner-area { padding-top: 100px; }
}
@media (max-width: 991px) {
    .landing-fashion-trends .navbar-top-default { position: relative; top: 0; }
    .landing-fashion-trends .header-appear .navbar-top-default { position: fixed; top: 48px; }
    /* Replace viewport-height/negative-margin positioning with image + content flow. */
    .banner-sec.banner-image {
        height: auto;
        margin-top: 0;
        padding: 0 0 64px;
        background: #fff;
    }
    .banner-sec.banner-image::before {
        content: '';
        display: block;
        width: 100%;
        aspect-ratio: 1920 / 1004;
        background: url('/assets/collection/landings/fashion-trends/images/banner-img.jpg') center / cover no-repeat;
    }
    .banner-area { padding: 36px 8px 0; text-align: center; }
    .banner-heading { font-size: clamp(64px, 10vw, 90px); line-height: 1.15; }
    .banner-text { font-size: 18px; line-height: 1.7; }
    .about-sec { padding: 72px 0; }
    .about-heading { font-size: clamp(54px, 9vw, 76px); }
    .about-area { padding-bottom: 40px; }
    .about { padding-top: 72px; }
    .about_img img { padding-right: 0; }
    .review-img { top: 0; margin-bottom: 40px; }
}
