/* ============================================================
   BANOLUZ PUBLIC WEBSITE
============================================================ */

:root {

    /* Banoluz core palette */
    --bl-primary: #8B8177;
    --bl-primary-dark: #71685F;
    --bl-primary-light: #EDEAE6;

    --bl-background: #FAF9F7;
    --bl-surface: #FFFFFF;
    --bl-soft-bg: #F3F1EE;

    --bl-text: #292725;
    --bl-muted: #77736E;
    --bl-border: #DEDAD4;

    --bl-dark: #111111;
    --bl-dark-hover: #292725;

    --bl-container: 1440px;
}


/* ============================================================
   RESET / BASE
============================================================ */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background:
        var(--bl-background);

    color:
        var(--bl-text);

    font-family: "Manrope", Arial, sans-serif;

    font-size: 15px;

    line-height: 1.6;

    -webkit-font-smoothing:
        antialiased;

}


a {

    color: inherit;

    text-decoration: none;

}


img {

    display: block;

    max-width: 100%;

}


button,
input,
select,
textarea {

    font: inherit;

}


/* ============================================================
   CONTAINER
============================================================ */

.bl-container {

    width: 100%;

    max-width:
        var(--bl-container);

    margin-left: auto;

    margin-right: auto;

    padding-left: 36px;

    padding-right: 36px;

}



/* ============================================================
   TYPOGRAPHY
============================================================ */

html,
body,
button,
input,
select,
textarea {
    font-family: "Manrope", Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Manrope", Arial, sans-serif;
}

/* ============================================================
   BANOLUZ HEADER - APPROVED ORIGINAL STYLE
   Reference: screenshot approved by user
============================================================ */


/* ============================================================
   TOP BAR
============================================================ */

.bl-topbar {

    height: 26px;

    background: #111111;

    color: #ffffff;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}


.bl-topbar .bl-container {

    height: 100%;

    padding-left: 24px;
    padding-right: 24px;

}


.bl-topbar-inner {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.bl-topbar-message {

    color: rgba(255,255,255,0.90);

}


.bl-topbar-contact {

    display: flex;

    align-items: center;

    gap: 15px;

}


.bl-topbar-contact a {

    color: rgba(255,255,255,0.90);

    text-decoration: none;

    transition: opacity .2s ease;

}


.bl-topbar-contact a:hover {

    opacity: .65;

}


.bl-topbar-divider {

    width: 1px;

    height: 9px;

    display: block;

    background: rgba(255,255,255,.35);

}



/* ============================================================
   MAIN HEADER
============================================================ */

.bl-header {

    position: relative;

    z-index: 1000;

    width: 100%;

    background: #ffffff;

    border: 0;

}


.bl-header > .bl-container {

    padding-left: 24px;
    padding-right: 24px;

}


.bl-header-inner {

    height: 75px;

    display: grid;

    grid-template-columns:
        minmax(210px, 1fr)
        auto
        minmax(210px, 1fr);

    align-items: center;

    gap: 30px;

}



/* ============================================================
   TEMPORARY BANOLUZ TEXT LOGO
============================================================ */

.bl-logo {

    width: fit-content;

    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    color: #111111;

    text-decoration: none;

}


.bl-logo:hover {

    color: #111111;

}


.bl-logo-main {

    font-family: "Manrope", Arial, sans-serif;

    font-size: 22px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: .16em;

}


.bl-logo-sub {

    margin-top: 6px;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 5px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: .20em;

    color: #77736e;

}



/* ============================================================
   DESKTOP NAV
============================================================ */

.bl-nav {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 38px;

}


.bl-nav a {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    color: #252525;

    text-decoration: none;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 12px;

    font-weight: 500;

    transition: color .2s ease;

}


.bl-nav a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 0;

    height: 1px;

    background: #8B8177;

    transform: translateX(-50%);

    transition: width .25s ease;

}


.bl-nav a:hover {

    color: #8B8177;

}


.bl-nav a:hover::after,
.bl-nav a.active::after {

    width: 28px;

}



/* ============================================================
   HEADER RIGHT SIDE
============================================================ */

.bl-header-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 26px;

}



/* Search */

.bl-search-button {

    width: 30px;

    height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 0;

    background: transparent;

    color: #111111;

}


.bl-search-button:hover {

    color: #8B8177;

}



/* ============================================================
   WHATSAPP BUTTON
============================================================ */

.bl-enquire-button {

    height: 38px;

    min-width: 123px;

    padding: 0 17px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 21px;

    background: #111111;

    border: 1px solid #111111;

    color: #ffffff;

    text-decoration: none;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 10px;

    font-weight: 600;

    transition:
        background .2s ease,
        border-color .2s ease;

}


.bl-enquire-button:hover {

    background: #8B8177;

    border-color: #8B8177;

    color: #ffffff;

}


.bl-enquire-arrow {

    font-size: 11px;

    line-height: 1;

}



/* ============================================================
   MOBILE MENU BUTTON
============================================================ */

.bl-menu-button {

    display: none;

    width: 40px;

    height: 40px;

    padding: 0;

    border: 0;

    background: transparent;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 6px;

}


.bl-menu-button span {

    width: 20px;

    height: 1px;

    display: block;

    background: #111111;

    transition: transform .25s ease;

}


.bl-menu-button.open span:first-child {

    transform:
        translateY(3.5px)
        rotate(45deg);

}


.bl-menu-button.open span:last-child {

    transform:
        translateY(-3.5px)
        rotate(-45deg);

}



/* ============================================================
   MOBILE NAV
============================================================ */

.bl-mobile-nav {

    display: none;

    background: #ffffff;

    border-top: 1px solid #eeeeee;

}


.bl-mobile-nav.open {

    display: block;

}


.bl-mobile-nav .bl-container {

    padding-top: 20px;

    padding-bottom: 25px;

}


.bl-mobile-nav-number {

    margin-top: 13px;

    margin-bottom: 3px;

    color: #9b958f;

    font-size: 10px;

    font-family: "Manrope", Arial, sans-serif;

    letter-spacing: .10em;

}


.bl-mobile-nav > .bl-container > a {

    display: block;

    padding: 9px 0 15px;

    border-bottom: 1px solid #eeeeee;

    color: #292725;

    text-decoration: none;

    font-size: 19px;

    font-family: "Manrope", Arial, sans-serif;

    font-weight: 500;

}


.bl-mobile-nav > .bl-container > a.active {

    color: #8B8177;

}


.bl-mobile-nav-footer {

    margin-top: 22px;

}


.bl-mobile-enquire {

    width: 100%;

    min-height: 48px;

    padding: 0 17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #111111;

    color: #ffffff !important;

    text-decoration: none;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 11px;

    font-weight: 600;

}



/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {

    .bl-header-inner {

        height: 72px;

        display: flex;

        justify-content: space-between;

    }


    .bl-nav {

        display: none;

    }


    .bl-enquire-button {

        display: none;

    }


    .bl-search-button {

        display: none;

    }


    .bl-menu-button {

        display: inline-flex;

    }


    .bl-logo-main {

        font-size: 20px;

    }

}



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

@media (max-width: 575px) {

    .bl-topbar {

        height: 25px;

    }


    .bl-topbar .bl-container {

        padding-left: 14px;
        padding-right: 14px;

    }


    .bl-topbar-message {

        font-size: 6.5px;

        letter-spacing: .10em;

    }


    .bl-topbar-contact {

        gap: 8px;

    }


    .bl-topbar-contact a {

        font-size: 6.5px;

    }


    .bl-topbar-divider {

        display: none;

    }


    .bl-header > .bl-container {

        padding-left: 14px;
        padding-right: 14px;

    }


    .bl-header-inner {

        height: 65px;

    }


    .bl-logo-main {

        font-size: 18px;

        letter-spacing: .14em;

    }


    .bl-logo-sub {

        margin-top: 5px;

        font-size: 4.5px;

    }

}

/* ============================================================
   FOOTER
============================================================ */

.bl-footer {
    padding: 85px 0 28px;
    background: #111111;
    color: #ffffff;
}


/* GRID */

.bl-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr .8fr .8fr 1fr;
    gap: 55px;

    padding-bottom: 60px;

    border-bottom: 1px solid rgba(255,255,255,.12);
}


/* BRAND */

.bl-footer-logo {
    display: inline-flex;
    flex-direction: column;

    text-decoration: none;

    color: #ffffff;
}

.bl-footer-logo-main {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1;
}

.bl-footer-logo-sub {
    margin-top: 8px;

    font-size: 9px;
    font-weight: 500;
    letter-spacing: .12em;

    text-transform: uppercase;

    color: #AFA9A3;
}

.bl-footer-brand p {
    max-width: 320px;

    margin: 28px 0 0;

    font-size: 14px;
    line-height: 1.8;

    color: #AFA9A3;
}


/* HEADINGS */

.bl-footer h4 {
    margin: 0 0 22px;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: #ffffff;
}


/* LINKS */

.bl-footer-links {
    margin: 0;
    padding: 0;

    list-style: none;
}

.bl-footer-links li {
    margin-bottom: 11px;
}

.bl-footer-links a {
    font-size: 13px;

    text-decoration: none;

    color: #AFA9A3;

    transition: color .2s ease;
}

.bl-footer-links a:hover {
    color: #ffffff;
}


/* CONTACT */

.bl-footer-contact p {
    margin: 0 0 20px;

    max-width: 230px;

    font-size: 13px;
    line-height: 1.7;

    color: #AFA9A3;
}

.bl-footer-contact-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    max-width: 190px;

    padding: 10px 0;

    border-bottom: 1px solid rgba(255,255,255,.22);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;

    text-decoration: none;

    color: #ffffff;

    transition: border-color .2s ease;
}

.bl-footer-contact-link + .bl-footer-contact-link {
    margin-top: 4px;
}

.bl-footer-contact-link:hover {
    border-color: #8B8177;
}

.bl-footer-contact-link span {
    transition: transform .25s ease;
}

.bl-footer-contact-link:hover span {
    transform: translateX(4px);
}


/* BOTTOM */

.bl-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-top: 25px;

    font-size: 11px;

    color: #77736E;
}

.bl-footer-bottom-note {
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* TABLET */

@media (max-width: 991px) {

    .bl-footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .bl-footer-grid > div:last-child {
        grid-column: 1 / -1;
    }

}


/* MOBILE */

@media (max-width: 767px) {

    .bl-footer {
        padding: 60px 0 24px;
    }

    .bl-footer-grid {
        grid-template-columns: 1fr 1fr;

        gap: 36px 28px;

        padding-bottom: 42px;
    }

    .bl-footer-brand {
        grid-column: 1 / -1;
    }

    .bl-footer-grid > div:last-child {
        grid-column: 1 / -1;
    }

    .bl-footer-logo-main {
        font-size: 26px;
    }

    .bl-footer-brand p {
        margin-top: 20px;
    }

    .bl-footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }

}
/* ============================================================
   HOMEPAGE HERO
============================================================ */

.bl-hero {

    position: relative;

    width: 100%;

    background: #191919;

}


/* ============================================================
   SLIDER
============================================================ */

.bl-hero-slider {

    position: relative;

    width: 100%;

    height: clamp(
        560px,
        calc(100vh - 124px),
        820px
    );

    overflow: hidden;

}


/* ============================================================
   SLIDE
============================================================ */

.bl-hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;

}


.bl-hero-slide.active {

    opacity: 1;

    visibility: visible;

    z-index: 2;

}


/* ============================================================
   IMAGE
============================================================ */

.bl-hero-image {

    position: absolute;

    inset: 0;

}


.bl-hero-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.02);

    transition:
        transform 7s ease;

}


.bl-hero-slide.active
.bl-hero-image img {

    transform: scale(1.07);

}


/* ============================================================
   OVERLAY
============================================================ */

.bl-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.62) 0%,
            rgba(0, 0, 0, 0.40) 38%,
            rgba(0, 0, 0, 0.10) 70%,
            rgba(0, 0, 0, 0.03) 100%
        );

}


/* ============================================================
   CONTENT
============================================================ */

.bl-hero-content-wrap {

    position: relative;

    z-index: 3;

    height: 100%;

    display: flex;

    align-items: center;

}


.bl-hero-content {

    width: 100%;

    max-width: 690px;

    padding-bottom: 20px;

    color: #ffffff;

}


.bl-hero-eyebrow {

    margin-bottom: 22px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.24em;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, 0.72);

}


.bl-hero-content h1 {

    margin:
        0 0 22px;

    max-width: 680px;

    font-family: "Manrope", Arial, sans-serif;

    font-size: clamp(
        48px,
        5.6vw,
        82px
    );

    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -0.025em;

}


.bl-hero-content p {

    max-width: 570px;

    margin:
        0 0 32px;

    font-size: 17px;

    line-height: 1.75;

    color:
        rgba(255, 255, 255, 0.78);

}


/* ============================================================
   HERO BUTTON
============================================================ */

.bl-hero-button {

    min-height: 50px;

    padding:
        0 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    background: #ffffff;

    color: #191919;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.03em;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;

}


.bl-hero-button span {

    font-size: 18px;

    line-height: 1;

}


.bl-hero-button:hover {

    background: #f0eee8;

    color: #191919;

    transform:
        translateY(-2px);

}


/* ============================================================
   HERO ARROWS
============================================================ */

.bl-hero-arrow {

    position: absolute;

    z-index: 10;

    top: 50%;

    width: 48px;

    height: 48px;

    border:
        1px solid
        rgba(255, 255, 255, 0.35);

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.18);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    backdrop-filter:
        blur(6px);

    transform:
        translateY(-50%);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;

}


.bl-hero-arrow:hover {

    background:
        rgba(0, 0, 0, 0.48);

    border-color:
        rgba(255, 255, 255, 0.7);

}


.bl-hero-arrow-prev {

    left: 28px;

}


.bl-hero-arrow-next {

    right: 28px;

}


/* ============================================================
   HERO DOTS
============================================================ */

.bl-hero-dots {

    position: absolute;

    z-index: 10;

    left: 50%;

    bottom: 28px;

    display: flex;

    align-items: center;

    gap: 9px;

    transform:
        translateX(-50%);

}


.bl-hero-dot {

    width: 7px;

    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.45);

    transition:
        width 0.25s ease,
        border-radius 0.25s ease,
        background-color 0.25s ease;

}


.bl-hero-dot.active {

    width: 28px;

    border-radius: 10px;

    background: #ffffff;

}


/* ============================================================
   NO-BANNER FALLBACK
============================================================ */

.bl-hero-empty {

    min-height: 620px;

    background: #f7f6f2;

    display: flex;

    align-items: center;

    justify-content: center;

}


.bl-hero-empty .bl-container {

    display: flex;

    justify-content: center;

}


.bl-hero-empty-content {

    max-width: 800px;

    text-align: center;

}


.bl-hero-empty-eyebrow {

    margin-bottom: 22px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.24em;

    text-transform: uppercase;

    color: #77746e;

}


.bl-hero-empty-content h1 {

    margin:
        0 0 22px;

    font-family: "Manrope", Arial, sans-serif;

    font-size: clamp(
        50px,
        6vw,
        82px
    );

    font-weight: 500;

    line-height: 1.04;

}


.bl-hero-empty-content p {

    margin: 0;

    font-size: 17px;

    color: #77746e;

}


/* ============================================================
   HERO TABLET
============================================================ */

@media (max-width: 991.98px) {

    .bl-hero-slider {

        height: 650px;

    }


    .bl-hero-content {

        max-width: 590px;

    }


    .bl-hero-arrow-prev {

        left: 18px;

    }


    .bl-hero-arrow-next {

        right: 18px;

    }

}


/* ============================================================
   HERO MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .bl-hero-slider {

        height: 620px;

    }


    .bl-hero-overlay {

        background:
            linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.65) 0%,
                rgba(0, 0, 0, 0.25) 70%,
                rgba(0, 0, 0, 0.12) 100%
            );

    }


    .bl-hero-content-wrap {

        align-items: flex-end;

        padding-bottom: 90px;

    }


    .bl-hero-content h1 {

        font-size: 45px;

    }


    .bl-hero-content p {

        font-size: 15px;

    }


    .bl-hero-arrow {

        display: none;

    }


    .bl-hero-dots {

        bottom: 28px;

    }


    .bl-hero-empty {

        min-height: 520px;

    }

}


/* ============================================================
   GENERAL SECTION HEADING
============================================================ */

.bl-section-heading {

    margin-bottom: 44px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

}


.bl-section-eyebrow {

    margin-bottom: 10px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color:
        var(--bl-muted);

}


.bl-section-heading h2 {

    margin: 0;

    font-family: "Manrope", Arial, sans-serif;

    font-size: clamp(
        40px,
        4.2vw,
        58px
    );

    font-weight: 500;

    line-height: 1.05;

    letter-spacing:
        -0.02em;

}


.bl-section-heading > p {

    max-width: 460px;

    margin: 0;

    font-size: 15px;

    line-height: 1.8;

    color:
        var(--bl-muted);

}


/* ============================================================
   CATEGORY SECTION
============================================================ */

.bl-category-section {

    padding:
        90px 0 110px;

    background:
        #ffffff;

}


.bl-category-heading-row {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        42px;

}


.bl-section-eyebrow {

    margin-bottom:
        10px;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        600;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    color:
        #8B8177;

}


.bl-category-heading-row h2 {

    margin:
        0;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        clamp(
            34px,
            3vw,
            52px
        );

    line-height:
        1.05;

    font-weight:
        500;

    letter-spacing:
        -0.045em;

    color:
        #292725;

}


.bl-category-view-all {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    padding-bottom:
        4px;

    border-bottom:
        1px solid #292725;

    color:
        #292725;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        11px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color .2s ease,
        border-color .2s ease;

}


.bl-category-view-all:hover {

    color:
        #8B8177;

    border-color:
        #8B8177;

}



/* ============================================================
   DESKTOP MOSAIC
============================================================ */

.bl-category-grid {

    display:
        grid;

    grid-template-columns:
        1.35fr 1fr;

    grid-template-rows:
        260px
        260px
        260px;

    gap:
        18px;

}


.bl-category-card {

    position:
        relative;

    display:
        block;

    overflow:
        hidden;

    background:
        #F3F1EE;

    color:
        #ffffff;

    text-decoration:
        none;

}


.bl-category-large {

    grid-column:
        1;

    grid-row:
        1 / span 2;

}


.bl-category-small-top {

    grid-column:
        2;

    grid-row:
        1;

}


.bl-category-small-bottom {

    grid-column:
        2;

    grid-row:
        2;

}


.bl-category-wide {

    grid-column:
        1 / span 2;

    grid-row:
        3;

}




.bl-category-wide .bl-category-image img {
    object-position: center 58%;
}

/* ============================================================
   IMAGE
============================================================ */

.bl-category-image {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

}


.bl-category-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

    transition:
        transform .7s
        cubic-bezier(.2,.7,.2,1);

}


.bl-category-card:hover
.bl-category-image img {

    transform:
        scale(1.045);

}


.bl-category-placeholder {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #F3F1EE;

    color:
        #8B8177;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        24px;

    font-weight:
        500;

}



/* ============================================================
   IMAGE OVERLAY
============================================================ */

.bl-category-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            rgba(20,20,20,.06),
            rgba(20,20,20,.12) 40%,
            rgba(20,20,20,.68) 100%
        );

    transition:
        background .3s ease;

}


.bl-category-card:hover
.bl-category-overlay {

    background:
        linear-gradient(
            to bottom,
            rgba(20,20,20,.05),
            rgba(20,20,20,.08) 35%,
            rgba(20,20,20,.75) 100%
        );

}



/* ============================================================
   CARD CONTENT
============================================================ */

.bl-category-top {

    position:
        absolute;

    top:
        22px;

    left:
        24px;

    z-index:
        2;

}


.bl-category-number {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        38px;

    height:
        26px;

    padding:
        0 9px;

    background:
        rgba(
            250,
            249,
            247,
            .92
        );

    color:
        #8B8177;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight:
        700;

    letter-spacing:
        .08em;

}


.bl-category-bottom {

    position:
        absolute;

    z-index:
        2;

    left:
        24px;

    right:
        24px;

    bottom:
        22px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

}


.bl-category-bottom h3 {

    margin:
        0;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size: 28px;

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        -0.035em;

    color:
        #ffffff;

}


.bl-category-link {

    display:
        inline-block;

    margin-top:
        10px;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

    color:
        rgba(
            255,
            255,
            255,
            .82
        );

}


.bl-category-arrow {

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .55
        );

    color:
        #ffffff;

    font-size:
        15px;

    transition:
        background .25s ease,
        border-color .25s ease;

}


.bl-category-card:hover
.bl-category-arrow {

    background:
        #8B8177;

    border-color:
        #8B8177;

}



/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {

    .bl-category-section {

        padding:
            70px 0 80px;

    }


    .bl-category-grid {

        grid-template-rows:
            230px
            230px
            220px;

    }

}



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

@media (max-width: 767px) {

    .bl-category-section {
        padding: 58px 0 65px;
        overflow: hidden;
    }


    .bl-category-heading-row {
        align-items: flex-start;
        margin-bottom: 26px;
    }


    .bl-category-heading-row h2 {
        font-size: 34px;
    }


    .bl-category-view-all {
        display: none;
    }


    .bl-category-grid {
        display: flex;

        gap: 14px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        /*
         * Let the carousel visually continue
         * closer to the right edge.
         */
        margin-right: -18px;

        padding-right: 55px;
        padding-bottom: 10px;

        scrollbar-width: none;
    }


    .bl-category-grid::-webkit-scrollbar {
        display: none;
    }


    .bl-category-card,
    .bl-category-large,
    .bl-category-small-top,
    .bl-category-small-bottom,
    .bl-category-wide {

        /*
         * IMPORTANT:
         * Smaller card = user can clearly
         * see the next category.
         */
        flex: 0 0 72vw;

        height: 390px;

        grid-column: auto;
        grid-row: auto;

        scroll-snap-align: start;
    }


    .bl-category-top {
        top: 16px;
        left: 16px;
    }


    .bl-category-bottom {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }


    .bl-category-bottom h3 {
        font-size: 27px;
    }


    .bl-category-arrow {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

}



/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

    .bl-category-card,
    .bl-category-large,
    .bl-category-small-top,
    .bl-category-small-bottom,
    .bl-category-wide {

        flex-basis:
            82vw;

        height:
            390px;

    }

}

/* ============================================================
   FEATURED PRODUCTS
============================================================ */

.bl-featured-section {
    padding: 95px 0 110px;
    background: #ffffff;
}


/* ============================================================
   FEATURED HEADER
============================================================ */

.bl-featured-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
}


.bl-featured-heading h2 {
    margin: 0;

    font-family: "Manrope", Arial, sans-serif;

    font-size: clamp(
        34px,
        3.2vw,
        50px
    );

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -0.045em;

    color: #292725;
}


.bl-view-all {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 4px;

    border-bottom: 1px solid #292725;

    color: #292725;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    transition:
        color .2s ease,
        border-color .2s ease;
}


.bl-view-all span {
    transition: transform .25s ease;
}


.bl-view-all:hover {
    color: #8B8177;
    border-color: #8B8177;
}


.bl-view-all:hover span {
    transform: translateX(4px);
}


/* ============================================================
   PRODUCT GRID
============================================================ */

.bl-product-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 34px 18px;
}


/* ============================================================
   PRODUCT CARD
============================================================ */

.bl-product-card {
    min-width: 0;
}


/* ============================================================
   PRODUCT IMAGE
============================================================ */

.bl-product-image {
    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio: 4 / 5;

    background: #F3F1EE;

    text-decoration: none;
}


.bl-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .65s
        cubic-bezier(.2,.65,.3,1);
}


.bl-product-card:hover
.bl-product-image img {
    transform: scale(1.035);
}


/* ============================================================
   PROMO BADGE
============================================================ */

.bl-product-sale {
    position: absolute;

    z-index: 2;

    top: 12px;
    left: 12px;

    min-width: 44px;

    padding: 7px 9px;

    background: #8B8177;

    color: #ffffff;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 10px;

    font-weight: 600;

    text-align: center;

    letter-spacing: .03em;
}


/* ============================================================
   VIEW PRODUCT
============================================================ */

.bl-product-view {
    position: absolute;

    z-index: 2;

    left: 12px;
    right: 12px;
    bottom: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 13px 14px;

    background:
        rgba(
            255,
            255,
            255,
            .95
        );

    color: #292725;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 10px;

    font-weight: 600;

    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.bl-product-card:hover
.bl-product-view {
    opacity: 1;

    transform: translateY(0);
}


/* ============================================================
   NO IMAGE
============================================================ */

.bl-product-no-image {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: #F3F1EE;

    color: #8B8177;
}


.bl-product-no-image span {
    font-family: "Manrope", Arial, sans-serif;

    font-size: 24px;

    font-weight: 500;
}


.bl-product-no-image small {
    font-size: 9px;

    letter-spacing: .12em;

    text-transform: uppercase;
}


/* ============================================================
   PRODUCT INFO
============================================================ */

.bl-product-info {
    padding-top: 14px;
}


.bl-product-meta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 7px;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: #8B8177;
}


.bl-product-info h3 {
    margin: 0;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 18px;

    font-weight: 500;

    line-height: 1.3;
}


.bl-product-info h3 a {
    color: #292725;

    text-decoration: none;
}


.bl-product-info h3 a:hover {
    color: #8B8177;
}


/* ============================================================
   BRAND / MODEL
============================================================ */

.bl-product-model {
    margin-top: 5px;

    font-size: 11px;

    color: #8C8782;
}


/* ============================================================
   AVAILABILITY
============================================================ */

.bl-product-availability {
    white-space: nowrap;
}


.bl-product-availability.in_stock {
    color: #55715b;
}


.bl-product-availability.limited_stock {
    color: #a4742c;
}


.bl-product-availability.out_of_stock,
.bl-product-availability.discontinued {
    color: #9b5650;
}


.bl-product-availability.pre_order {
    color: #556c83;
}


/* ============================================================
   PRICE
============================================================ */

.bl-product-price {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 10px;
}


.bl-price-current {
    font-size: 15px;

    font-weight: 600;

    color: #292725;
}


.bl-price-old {
    font-size: 12px;

    color: #9b9891;

    text-decoration: line-through;
}


.bl-price-enquire {
    font-size: 12px;

    font-weight: 500;

    color: #77736E;
}


/* ============================================================
   EMPTY FEATURED
============================================================ */

.bl-featured-empty {
    padding: 60px 20px;

    border: 1px solid #DEDAD4;

    text-align: center;

    color: #5F5B57;
}


.bl-featured-empty div {
    margin-bottom: 8px;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 23px;
}


.bl-featured-empty small {
    color: #8C8782;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199.98px) {

    .bl-product-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 991.98px) {

    .bl-featured-section {
        padding: 75px 0 85px;
    }


    .bl-product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 767.98px) {

    .bl-featured-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 16px;

        margin-bottom: 28px;
    }


    .bl-product-view {
        opacity: 1;

        transform: none;
    }

}


@media (max-width: 575.98px) {

    .bl-featured-section {
        padding: 60px 0 70px;
    }


    .bl-featured-heading h2 {
        font-size: 34px;
    }


    .bl-product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 28px 12px;
    }


    .bl-product-info {
        padding-top: 11px;
    }


    .bl-product-info h3 {
        font-size: 15px;

        line-height: 1.3;
    }


    .bl-product-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 3px;

        margin-bottom: 6px;

        font-size: 10px;
    }


    .bl-product-model {
        font-size: 10px;
    }


    .bl-price-current {
        font-size: 14px;
    }


    .bl-price-old {
        font-size: 11px;
    }


    .bl-product-view {
        left: 8px;
        right: 8px;
        bottom: 8px;

        padding: 10px;

        font-size: 9px;
    }


    .bl-product-sale {
        top: 8px;
        left: 8px;

        min-width: 38px;

        padding: 6px 7px;

        font-size: 9px;
    }

}


/* ============================================================
   PRODUCT GRID
============================================================ */

.bl-product-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 24px;

}


/* ============================================================
   PRODUCT CARD
============================================================ */

.bl-product-card {

    min-width: 0;

}


.bl-product-image {

    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio: 4 / 5;

    background: #f3f2ef;

    text-decoration: none;

}


.bl-product-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.7s
        cubic-bezier(
            0.2,
            0.65,
            0.3,
            1
        );

}


.bl-product-card:hover
.bl-product-image img {

    transform:
        scale(1.045);

}


/* ============================================================
   SALE BADGE
============================================================ */

.bl-product-sale {

    position: absolute;

    z-index: 2;

    top: 16px;

    left: 16px;

    min-width: 48px;

    padding: 8px 10px;

    background: #1d1d1b;

    color: #ffffff;

    font-size: 11px;

    font-weight: 600;

    text-align: center;

    letter-spacing: 0.03em;

}


/* ============================================================
   VIEW PRODUCT HOVER
============================================================ */

.bl-product-view {

    position: absolute;

    z-index: 2;

    right: 16px;

    bottom: 16px;

    left: 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px 17px;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    color: #1d1d1b;

    font-size: 12px;

    font-weight: 600;

    opacity: 0;

    transform:
        translateY(10px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;

}


.bl-product-card:hover
.bl-product-view {

    opacity: 1;

    transform:
        translateY(0);

}


/* ============================================================
   NO IMAGE
============================================================ */

.bl-product-no-image {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: #efede8;

    color: #77736b;

}


.bl-product-no-image span {

    font-family: "Manrope", Arial, sans-serif;

    font-size: 28px;

}


.bl-product-no-image small {

    font-size: 10px;

    letter-spacing: 0.15em;

    text-transform: uppercase;

}


/* ============================================================
   PRODUCT INFO
============================================================ */

.bl-product-info {

    padding-top: 18px;

}


.bl-product-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 9px;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.11em;

    text-transform: uppercase;

    color: #8b877f;

}


.bl-product-info h3 {

    margin: 0;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 22px;

    font-weight: 500;

    line-height: 1.25;

}


.bl-product-info h3 a {

    color: #1d1d1b;

    text-decoration: none;

}


.bl-product-info h3 a:hover {

    opacity: 0.65;

}


/* ============================================================
   BRAND / MODEL
============================================================ */

.bl-product-model {

    margin-top: 6px;

    font-size: 12px;

    color: #89857e;

}


/* ============================================================
   AVAILABILITY
============================================================ */

.bl-product-availability {

    white-space: nowrap;

}


.bl-product-availability.in_stock {

    color: #55715b;

}


.bl-product-availability.limited_stock {

    color: #a4742c;

}


.bl-product-availability.out_of_stock,
.bl-product-availability.discontinued {

    color: #9b5650;

}


.bl-product-availability.pre_order {

    color: #556c83;

}


/* ============================================================
   PRICE
============================================================ */

.bl-product-price {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 14px;

}


.bl-price-current {

    font-size: 16px;

    font-weight: 600;

    color: #1d1d1b;

}


.bl-price-old {

    font-size: 13px;

    color: #9b9891;

    text-decoration: line-through;

}


.bl-price-enquire {

    font-size: 13px;

    font-weight: 500;

    color: #77736b;

}


/* ============================================================
   EMPTY FEATURED
============================================================ */

.bl-featured-empty {

    padding: 75px 25px;

    border:
        1px solid #dedbd4;

    text-align: center;

    color: #55524c;

}


.bl-featured-empty div {

    margin-bottom: 8px;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 25px;

}


.bl-featured-empty small {

    color: #8b877f;

}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (
    max-width: 1199.98px
) {

    .bl-product-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }

}


@media (
    max-width: 991.98px
) {

    .bl-featured-section {

        padding:
            85px 0 95px;

    }


    .bl-product-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


@media (
    max-width: 767.98px
) {

    .bl-featured-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 20px;

    }


    .bl-product-view {

        opacity: 1;

        transform: none;

    }

}


@media (
    max-width: 575.98px
) {

    .bl-featured-section {

        padding:
            70px 0 80px;

    }


    .bl-product-grid {

        gap:
            32px 14px;

    }


    .bl-product-info h3 {

        font-size: 19px;

    }


    .bl-product-meta {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 5px;

    }


    .bl-product-view {

        right: 10px;

        bottom: 10px;

        left: 10px;

        padding: 12px;

        font-size: 11px;

    }

}

/* ============================================================
   CATALOGUE HERO
============================================================ */

.bl-catalogue-hero {
    padding: 5px 0 65px;
    background: #F3F1EE;
}

.bl-catalogue-hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
}

.bl-catalogue-hero h1 {
    margin: 12px 0 0;

    font-size: clamp(40px, 4vw, 58px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.045em;

    color: #292725;
}

.bl-catalogue-hero p {
    max-width: 440px;
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #77736E;
}


/* ============================================================
   CATALOGUE
============================================================ */

.bl-catalogue-section {
    padding: 42px 0 100px;
    background: #fff;
}


/* TOP SEARCH */

.bl-catalogue-topbar {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 22px;
}

.bl-catalogue-search {
    position: relative;
    flex: 1;
}

.bl-catalogue-search input {
    width: 100%;
    height: 52px;

    padding: 0 55px 0 18px;

    border: 1px solid #DEDAD4;
    border-radius: 0;
    outline: none;

    background: #fff;

    font-family: "Manrope", Arial, sans-serif;
    font-size: 13px;

    color: #292725;
}

.bl-catalogue-search input:focus {
    border-color: #8B8177;
}

.bl-catalogue-search button {
    position: absolute;
    top: 0;
    right: 0;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    background: transparent;

    color: #292725;

    cursor: pointer;
}


/* MOBILE FILTER BUTTON */

.bl-mobile-filter-toggle {
    display: none;
}


/* ============================================================
   FILTER ROW
============================================================ */

.bl-catalogue-filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;

    padding-bottom: 28px;

    border-bottom: 1px solid #DEDAD4;
}

.bl-filter-select {
    flex: 1;
}

.bl-filter-select label {
    display: block;

    margin-bottom: 7px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;

    color: #77736E;
}

.bl-filter-select select {
    width: 100%;
    height: 48px;

    padding: 0 40px 0 14px;

    border: 1px solid #DEDAD4;
    border-radius: 0;
    outline: none;

    background: #fff;

    font-family: "Manrope", Arial, sans-serif;
    font-size: 13px;

    color: #292725;
}

.bl-filter-select select:focus {
    border-color: #8B8177;
}


/* APPLY */

.bl-filter-button {
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding: 0 20px;

    border: 1px solid #292725;
    border-radius: 0;

    background: #292725;

    color: #fff;

    font-family: "Manrope", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;

    cursor: pointer;
}

.bl-filter-button:hover {
    background: #8B8177;
    border-color: #8B8177;
}


/* CLEAR */

.bl-filter-reset {
    height: 48px;

    display: inline-flex;
    align-items: center;

    padding: 0 12px;

    font-size: 11px;

    color: #77736E;

    text-decoration: none;
}


/* ============================================================
   TOOLBAR
============================================================ */

.bl-catalogue-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 22px 0 28px;
}

.bl-product-count {
    font-size: 12px;
    font-weight: 600;

    color: #292725;
}

.bl-catalogue-view-label {
    font-size: 10px;
    font-weight: 600;

    letter-spacing: .12em;
    text-transform: uppercase;

    color: #8B8177;
}


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

@media (max-width: 767px) {

    .bl-catalogue-hero {
        padding: 5px 0 40px;
    }

    .bl-catalogue-hero-inner {
        display: block;
    }

    .bl-catalogue-hero h1 {
        font-size: 36px;
    }

    .bl-catalogue-hero p {
        margin-top: 15px;

        font-size: 13px;
    }


    .bl-catalogue-section {
        padding: 30px 0 70px;
    }


    /* SEARCH + FILTER */

    .bl-catalogue-topbar {
        margin-bottom: 16px;
    }

    .bl-catalogue-search input {
        height: 48px;
    }

    .bl-catalogue-search button {
        width: 48px;
        height: 48px;
    }


    .bl-mobile-filter-toggle {
        min-width: 92px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;

        padding: 0 13px;

        border: 1px solid #292725;
        border-radius: 0;

        background: #292725;

        color: #fff;

        font-family: "Manrope", Arial, sans-serif;
        font-size: 10px;
        font-weight: 600;

        text-transform: uppercase;
    }


    /* FILTERS HIDDEN BY DEFAULT */

    .bl-catalogue-filters {
        display: none;

        padding:
            18px
            0
            22px;

        border-top: 1px solid #DEDAD4;
    }

    .bl-catalogue-filters.open {
        display: grid;

        grid-template-columns: 1fr;

        gap: 15px;
    }

    .bl-filter-button {
        width: 100%;
    }

    .bl-filter-reset {
        height: auto;

        justify-content: center;

        padding: 4px 0;
    }


    /* TOOLBAR */

    .bl-catalogue-toolbar {
        padding: 17px 0 22px;
    }

    .bl-catalogue-view-label {
        display: none;
    }

}


/* ============================================================
   CATALOGUE
============================================================ */

.bl-catalogue-section {

    padding:
        55px 0 120px;

    background: #ffffff;

}



/* ============================================================
   FILTERS
============================================================ */

.bl-catalogue-filters {

    display: grid;

    grid-template-columns:
        1.6fr 1fr 1fr auto;

    align-items: end;

    gap: 16px;

    padding-bottom: 32px;

    border-bottom:
        1px solid
        #dedbd4;

}


.bl-catalogue-filters label {

    display: block;

    margin-bottom: 8px;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #77736b;

}



/* ============================================================
   SEARCH
============================================================ */

.bl-search-field {

    position: relative;

}


.bl-search-field input {

    width: 100%;

    height: 50px;

    padding:
        0 52px 0 16px;

    border:
        1px solid
        #dcd9d2;

    border-radius: 0;

    outline: none;

    background: #ffffff;

    color: #1d1d1b;

}


.bl-search-field input:focus {

    border-color:
        #77736b;

}


.bl-search-field button {

    position: absolute;

    top: 0;

    right: 0;

    width: 50px;

    height: 50px;

    border: 0;

    background: transparent;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #1d1d1b;

}



/* ============================================================
   SELECTS
============================================================ */

.bl-filter-select select {

    width: 100%;

    height: 50px;

    padding:
        0 42px 0 14px;

    border:
        1px solid
        #dcd9d2;

    border-radius: 0;

    outline: none;

    background-color: #ffffff;

    color: #1d1d1b;

}



/* ============================================================
   FILTER BUTTON
============================================================ */

.bl-filter-button {

    min-height: 50px;

    padding:
        0 24px;

    border: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        #1d1d1b;

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;

    letter-spacing:
        0.04em;

    text-decoration: none;

    transition:
        background-color
        0.2s ease;

}


.bl-filter-button:hover {

    background:
        #393834;

    color: #ffffff;

}



/* ============================================================
   TOOLBAR
============================================================ */

.bl-catalogue-toolbar {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

}


.bl-product-count {

    font-size: 13px;

    color:
        #77736b;

}


.bl-clear-filters {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 12px;

    color:
        #77736b;

}


.bl-clear-filters span {

    font-size: 18px;

}



/* ============================================================
   CATALOGUE PRODUCT GRID
============================================================ */

.bl-catalogue-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        52px 24px;

}



/* ============================================================
   CATALOGUE PRODUCT IMAGE SIZE
============================================================ */

.bl-catalogue-card
.bl-product-image {

    aspect-ratio:
        4 / 4.6;

}



/* ============================================================
   PAGINATION
============================================================ */

.bl-pagination {

    margin-top: 80px;

    padding-top: 32px;

    border-top:
        1px solid
        #dedbd4;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 20px;

}


.bl-page-arrow {

    font-size: 12px;

    font-weight: 600;

    color: #1d1d1b;

}


.bl-page-arrow:last-child {

    justify-self: end;

}


.bl-page-arrow.disabled {

    color: #bbb7af;

}


.bl-page-numbers {

    display: flex;

    align-items: center;

    gap: 6px;

}


.bl-page-numbers a,
.bl-page-numbers span {

    min-width: 38px;

    height: 38px;

    padding: 0 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    color: #77736b;

}


.bl-page-numbers .active {

    background:
        #1d1d1b;

    color: #ffffff;

}



/* ============================================================
   EMPTY RESULTS
============================================================ */

.bl-catalogue-empty {

    padding:
        100px 30px;

    border-top:
        1px solid
        #dedbd4;

    text-align: center;

}


.bl-catalogue-empty-title {

    margin-bottom: 10px;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 34px;

}


.bl-catalogue-empty p {

    margin-bottom: 25px;

    color:
        #77736b;

}



/* ============================================================
   CATALOGUE RESPONSIVE
============================================================ */

@media (
    max-width: 1199.98px
) {

    .bl-catalogue-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }


    .bl-catalogue-filters {

        grid-template-columns:
            1.5fr 1fr 1fr;

    }


    .bl-filter-action {

        grid-column:
            1 / -1;

    }


    .bl-filter-button {

        width: 100%;

    }

}



@media (
    max-width: 991.98px
) {

    .bl-catalogue-hero {

        padding:
            5px 0 55px;

    }


    .bl-catalogue-hero-inner {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap: 22px;

    }


    .bl-catalogue-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .bl-catalogue-filters {

        grid-template-columns:
            1fr 1fr;

    }


    .bl-filter-search {

        grid-column:
            1 / -1;

    }

}



@media (
    max-width: 575.98px
) {

    .bl-catalogue-hero {

        padding:
            55px 0 45px;

    }


    .bl-catalogue-hero h1 {

        font-size:
            48px;

    }


    .bl-catalogue-section {

        padding:
            35px 0 80px;

    }


    .bl-catalogue-filters {

        grid-template-columns:
            1fr;

    }


    .bl-filter-search,
    .bl-filter-action {

        grid-column:
            auto;

    }


    .bl-catalogue-grid {

        gap:
            38px 14px;

    }


    .bl-catalogue-toolbar {

        min-height:
            65px;

    }


    .bl-pagination {

        margin-top:
            55px;

        grid-template-columns:
            1fr 1fr;

    }


    .bl-page-numbers {

        grid-column:
            1 / -1;

        grid-row: 1;

        justify-content:
            center;

    }


    .bl-page-arrow {

        grid-row: 2;

    }

}
/* ============================================================
   PRODUCT DETAIL BREADCRUMB
============================================================ */

.bl-product-breadcrumb {

    border-bottom:
        1px solid
        var(--bl-border);

    background: #ffffff;

}


.bl-product-breadcrumb-inner {

    min-height: 58px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    font-size: 11px;

    color: #8a867e;

}


.bl-product-breadcrumb a {

    color: #68645e;

}


.bl-product-breadcrumb a:hover {

    color: #1d1d1b;

}


/* ============================================================
   PRODUCT DETAIL
============================================================ */

.bl-product-detail {

    padding:
        70px 0 100px;

    background: #ffffff;

}


.bl-product-detail-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(360px, 0.85fr);

    gap: clamp(
        55px,
        7vw,
        110px
    );

    align-items: start;

}


/* ============================================================
   GALLERY
============================================================ */

.bl-product-main-image {

    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #f3f1ed;

}


.bl-product-main-image > img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}


.bl-product-detail-no-image {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 10px;

    color: #817d75;

}


.bl-product-detail-no-image div {

    font-family: "Manrope", Arial, sans-serif;

    font-size: 38px;

}


.bl-product-detail-no-image small {

    font-size: 10px;

    letter-spacing: 0.18em;

    text-transform: uppercase;

}


.bl-detail-sale-badge {

    position: absolute;

    top: 20px;

    left: 20px;

    padding:
        9px 13px;

    background: #1d1d1b;

    color: #ffffff;

    font-size: 11px;

    font-weight: 600;

}


/* ============================================================
   THUMBNAILS
============================================================ */

.bl-product-thumbnails {

    margin-top: 15px;

    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 10px;

}


.bl-product-thumbnail {

    padding: 0;

    aspect-ratio: 1;

    border:
        1px solid
        transparent;

    background: #f3f1ed;

    overflow: hidden;

    cursor: pointer;

}


.bl-product-thumbnail img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.bl-product-thumbnail.active {

    border-color:
        #1d1d1b;

}


/* ============================================================
   PRODUCT INFO
============================================================ */

.bl-product-detail-info {

    position: sticky;

    top: 25px;

    padding-top: 10px;

}


.bl-product-detail-category {

    margin-bottom: 18px;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: #817d75;

}


.bl-product-detail-info h1 {

    margin:
        0 0 15px;

    font-family: "Manrope", Arial, sans-serif;

    font-size: clamp(
        42px,
        4.8vw,
        68px
    );

    font-weight: 500;

    line-height: 1.02;

    letter-spacing:
        -0.025em;

}


.bl-product-detail-model {

    margin-bottom: 8px;

    color: #77736b;

    font-size: 14px;

}


.bl-product-detail-code {

    margin-bottom: 28px;

    font-size: 12px;

    color: #8b877f;

}


/* ============================================================
   PRICE

============================================================ */

.bl-detail-price {

    min-height: 45px;

    margin:
        28px 0 22px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

}


.bl-detail-price-current {

    font-size: 26px;

    font-weight: 600;

    color: #1d1d1b;

}


.bl-detail-price-old {

    font-size: 15px;

    color: #9e9a92;

    text-decoration: line-through;

}


.bl-detail-discount {

    padding:
        6px 9px;

    background: #1d1d1b;

    color: #ffffff;

    font-size: 10px;

    font-weight: 600;

    letter-spacing:
        0.05em;

    text-transform: uppercase;

}


.bl-detail-enquire-price {

    font-family: "Manrope", Arial, sans-serif;

    font-size: 24px;

}


/* ============================================================
   AVAILABILITY
============================================================ */

.bl-detail-availability-row {

    padding:
        18px 0;

    border-top:
        1px solid
        #e3e0d9;

    border-bottom:
        1px solid
        #e3e0d9;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

}


.bl-detail-label {

    font-size: 10px;

    font-weight: 600;

    letter-spacing:
        0.13em;

    text-transform: uppercase;

    color: #77736b;

}


.bl-detail-availability {

    font-size: 11px;

    font-weight: 600;

    letter-spacing:
        0.05em;

    text-transform: uppercase;

}


.bl-detail-availability.in-stock {

    color: #55715b;

}


.bl-detail-availability.limited-stock {

    color: #a4742c;

}


.bl-detail-availability.out-of-stock,
.bl-detail-availability.discontinued {

    color: #a15650;

}


.bl-detail-availability.pre-order {

    color: #526d88;

}


.bl-detail-availability.display-set {

    color: #77665a;

}


/* ============================================================
   DESCRIPTION
============================================================ */

.bl-product-short-description {

    margin-top: 24px;

    font-size: 15px;

    line-height: 1.8;

    color: #6e6a64;

}


/* ============================================================
   VARIANTS
============================================================ */

.bl-product-variant-section {

    margin-top: 28px;

}


.bl-product-variant-section
.bl-detail-label {

    display: block;

    margin-bottom: 10px;

}


.bl-product-variant-select {

    width: 100%;

    height: 52px;

    padding:
        0 45px 0 15px;

    border:
        1px solid
        #d9d6cf;

    border-radius: 0;

    outline: none;

    background: #ffffff;

    color: #1d1d1b;

}


.bl-product-variant-select:focus {

    border-color: #77736b;

}


.bl-selected-sku {

    min-height: 18px;

    margin-top: 8px;

    font-size: 11px;

    color: #99958d;

}


/* ============================================================
   PRODUCT ACTIONS
============================================================ */

.bl-product-detail-actions {

    margin-top: 30px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

}


.bl-detail-primary-button,
.bl-detail-secondary-button {

    min-height: 54px;

    padding:
        0 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 600;

    letter-spacing:
        0.04em;

}


.bl-detail-primary-button {

    border:
        1px solid
        #1d1d1b;

    background: #1d1d1b;

    color: #ffffff;

}


.bl-detail-primary-button:hover {

    background: #35342f;

    color: #ffffff;

}


.bl-detail-secondary-button {

    border:
        1px solid
        #d7d4cd;

    color: #1d1d1b;

    background: #ffffff;


}


.bl-detail-secondary-button:hover {

    border-color:
        #1d1d1b;

}


/* ============================================================
   PRODUCT INFORMATION
============================================================ */

.bl-product-information {

    padding:
        100px 0;

    background:
        #f7f6f2;

}


.bl-product-information-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: clamp(
        60px,
        9vw,
        140px
    );

}


.bl-product-information h2 {

    margin:
        0 0 28px;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 42px;

    font-weight: 500;

}


.bl-product-description {

    max-width: 620px;

    font-size: 15px;

    line-height: 1.9;

    color: #69665f;

}


/* ============================================================
   SPECIFICATIONS
============================================================ */

.bl-specification-list {

    border-top:
        1px solid
        #dcd9d2;

}


.bl-specification-row {

    display: grid;

    grid-template-columns:
        minmax(120px, 0.8fr)
        minmax(0, 1.2fr);

    gap: 30px;

    padding:
        17px 0;

    border-bottom:
        1px solid
        #dcd9d2;

}


.bl-specification-name {

    font-size: 12px;

    color: #817d75;

}


.bl-specification-value {

    font-size: 13px;

    font-weight: 500;

    color: #1d1d1b;

}


.bl-no-specifications {

    padding:
        25px 0;

    border-top:
        1px solid
        #dcd9d2;

    border-bottom:
        1px solid
        #dcd9d2;

    color: #817d75;

}


/* ============================================================
   PRODUCT NOT FOUND
============================================================ */

.bl-product-not-found {

    min-height: 600px;

    padding:
        100px 0;

    display: flex;

    align-items: center;

    text-align: center;

}


.bl-product-not-found-inner {

    max-width: 700px;

    margin: auto;

}


.bl-product-not-found h1 {

    margin:
        0 0 20px;

    font-family: "Manrope", Arial, sans-serif;

    font-size: 60px;

    font-weight: 500;

}


.bl-product-not-found p {

    margin-bottom: 30px;

    color: #77736b;

}


/* ============================================================
   TABLET
============================================================ */

@media (
    max-width: 991.98px
) {

    .bl-product-detail {

        padding:
            50px 0 75px;

    }


    .bl-product-detail-grid {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .bl-product-detail-info {

        position: static;

    }


    .bl-product-information {

        padding:
            75px 0;

    }


    .bl-product-information-grid {

        grid-template-columns:
            1fr;

        gap: 65px;

    }

}


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

@media (
    max-width: 575.98px
) {

    .bl-product-breadcrumb-inner {

        min-height: 50px;

    }


    .bl-product-detail {

        padding:
            30px 0 60px;

    }


    .bl-product-detail-info h1 {

        font-size: 42px;

    }


    .bl-product-thumbnails {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

    }


    .bl-product-detail-actions {

        grid-template-columns:
            1fr;

    }


    .bl-product-information {

        padding:
            60px 0;

    }


    .bl-product-information h2 {

        font-size: 34px;

    }


    .bl-specification-row {

        grid-template-columns:
            1fr;

        gap: 5px;

    }

}







/* ============================================================
   CONTACT HERO
============================================================ */

.bl-contact-hero {
    padding: 105px 0 90px;
    background: #f7f6f2;
    border-bottom: 1px solid var(--bl-border);
}

.bl-contact-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: 80px;
}

.bl-contact-hero h1 {
    margin: 0;
    font-family: "Manrope", Arial, sans-serif;
    font-size: clamp(58px, 7vw, 92px);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.bl-contact-hero-copy {
    max-width: 500px;
    padding-bottom: 5px;
}

.bl-contact-hero-copy p {
    margin: 0 0 14px;
    color: #716d66;
    font-size: 15px;
    line-height: 1.85;
}


/* ============================================================
   CONTACT INFORMATION
============================================================ */

.bl-contact-info-section {
    background: #fff;
    border-bottom: 1px solid #e3e0d9;
}

.bl-contact-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.bl-contact-info-card {
    min-height: 230px;
    padding: 42px 30px;
    border-right: 1px solid #e3e0d9;
}

.bl-contact-info-card:first-child {
    border-left: 1px solid #e3e0d9;
}

.bl-contact-number {
    margin-bottom: 35px;
    color: #aaa69e;
    font-size: 10px;
    letter-spacing: 0.12em;
}

.bl-contact-info-title {
    margin-bottom: 15px;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 22px;
    color: #1d1d1b;
}

.bl-contact-info-text {
    color: #77736b;
    font-size: 13px;
    line-height: 1.8;
}

.bl-contact-info-text a {
    color: #1d1d1b;
    border-bottom: 1px solid #aaa69e;
}


/* ============================================================
   ENQUIRY
============================================================ */

.bl-contact-enquiry {
    padding: 120px 0;
    background: #fff;
}

.bl-contact-enquiry-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(70px, 10vw, 150px);
}

.bl-contact-enquiry-intro h2 {
    margin: 0 0 30px;
    font-family: "Manrope", Arial, sans-serif;
    font-size: clamp(45px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.bl-contact-enquiry-intro > p {
    max-width: 430px;
    color: #716d66;
    font-size: 15px;
    line-height: 1.85;
}

.bl-contact-whatsapp-note {
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid #dfdcd5;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.bl-contact-whatsapp-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid #1d1d1b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 18px;
}

.bl-contact-whatsapp-note strong,
.bl-contact-whatsapp-note span {
    display: block;
}

.bl-contact-whatsapp-note strong {
    margin-bottom: 5px;
    font-size: 13px;
}

.bl-contact-whatsapp-note span {
    max-width: 310px;
    color: #88847d;
    font-size: 12px;
    line-height: 1.6;
}


/* ============================================================
   FORM
============================================================ */

.bl-contact-form-wrap {
    padding: 50px;
    background: #f7f6f2;
}

.bl-contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.bl-contact-field {
    margin-bottom: 24px;
}

.bl-contact-field label {
    display: block;
    margin-bottom: 9px;
    color: #6e6a63;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bl-contact-field input,
.bl-contact-field select,
.bl-contact-field textarea {
    width: 100%;
    border: 1px solid #d8d5ce;
    border-radius: 0;
    outline: none;
    background: #fff;
    color: #1d1d1b;
    font-family: inherit;
    font-size: 13px;
    transition: border-color 0.2s ease;
}

.bl-contact-field input,
.bl-contact-field select {
    height: 52px;
    padding: 0 15px;
}

.bl-contact-field textarea {
    min-height: 150px;
    padding: 15px;
    resize: vertical;
    line-height: 1.7;
}

.bl-contact-field input:focus,
.bl-contact-field select:focus,
.bl-contact-field textarea:focus {
    border-color: #77736b;
}

.bl-contact-submit {
    width: 100%;
    min-height: 56px;
    padding: 0 22px;
    border: 1px solid #1d1d1b;
    background: #1d1d1b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease;
}

.bl-contact-submit:hover {
    background: #373631;
}

.bl-contact-submit-arrow {
    font-size: 19px;
    font-weight: 400;
}

.bl-contact-form-note {
    margin-top: 13px;
    color: #99958e;
    font-size: 10px;
    line-height: 1.6;
}


/* ============================================================
   SHOWROOM
============================================================ */

.bl-contact-showroom {
    padding: 110px 0 120px;
    background: #f7f6f2;
}

.bl-contact-showroom-heading {
    margin-bottom: 55px;
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    align-items: end;
    gap: 70px;
}

.bl-contact-showroom-heading h2 {
    margin: 0;
    font-family: "Manrope", Arial, sans-serif;
    font-size: clamp(45px, 5vw, 65px);
    font-weight: 500;
    line-height: 1.05;
}

.bl-contact-showroom-copy {
    max-width: 450px;
}

.bl-contact-showroom-copy p {
    margin: 0 0 12px;
    color: #77736b;
    font-size: 14px;
    line-height: 1.8;
}


/* ============================================================
   MAP PLACEHOLDER
============================================================ */

.bl-map-placeholder {
    min-height: 460px;
    padding: 40px;
    background:
        linear-gradient(
            135deg,
            #e7e4dc 0%,
            #d9d6ce 100%
        );
    display: flex;
    align-items: center;
    justify-content: center;
}

.bl-map-placeholder-inner {
    text-align: center;
}

.bl-map-pin {
    width: 70px;
    height: 70px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #1d1d1b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bl-map-title {
    margin-bottom: 8px;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 28px;
}

.bl-map-address {
    color: #716d66;
    font-size: 13px;
}

.bl-map-coming {
    margin-top: 25px;
    color: #918d85;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}


/* ============================================================
   CONTACT RESPONSIVE
============================================================ */

@media (max-width: 991.98px) {

    .bl-contact-hero {
        padding: 75px 0 65px;
    }

    .bl-contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .bl-contact-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bl-contact-info-card:nth-child(3) {
        border-left: 1px solid #e3e0d9;
    }

    .bl-contact-enquiry {
        padding: 85px 0;
    }

    .bl-contact-enquiry-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .bl-contact-showroom {
        padding: 80px 0;
    }

    .bl-contact-showroom-heading {
        grid-template-columns: 1fr;
        gap: 30px;
    }

}


@media (max-width: 575.98px) {

    .bl-contact-hero {
        padding: 55px 0 50px;
    }

    .bl-contact-hero h1 {
        font-size: 49px;
    }

    .bl-contact-info-grid {
        grid-template-columns: 1fr;
    }

    .bl-contact-info-card {
        min-height: auto;
        padding: 32px 5px;
        border-right: 0;
        border-left: 0 !important;
        border-bottom: 1px solid #e3e0d9;
    }

    .bl-contact-number {
        margin-bottom: 18px;
    }

    .bl-contact-enquiry {
        padding: 65px 0;
    }

    .bl-contact-form-wrap {
        padding: 30px 20px;
    }

    .bl-contact-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .bl-contact-showroom {
        padding: 65px 0;
    }

    .bl-map-placeholder {
        min-height: 350px;
        padding: 25px;
    }

}


/* ============================================================
   ABOUT HERO
============================================================ */

.bl-about-hero {
    padding: 110px 0 90px;
    background: #f7f6f2;
}

.bl-about-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: end;
    gap: 90px;
}

.bl-about-hero h1 {
    margin: 0;
    font-family: "Manrope", Arial, sans-serif;
    font-size: clamp(62px, 7.5vw, 100px);
    font-weight: 500;
    line-height: 0.94;
    letter-spacing: -0.04em;
}

.bl-about-hero-copy {
    max-width: 500px;
    padding-bottom: 5px;
}

.bl-about-hero-copy p {
    margin: 0 0 18px;
    color: #716d66;
    font-size: 15px;
    line-height: 1.85;
}

.bl-about-hero-copy .bl-about-lead {
    margin-bottom: 25px;
    color: #1d1d1b;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 25px;
    line-height: 1.45;
}


/* ============================================================
   ABOUT MAIN VISUAL
============================================================ */

.bl-about-visual {
    padding: 0;
    background: #f7f6f2;
}

.bl-about-visual-placeholder {
    min-height: min(720px, 65vw);
    background:
        linear-gradient(
            135deg,
            #d9d5cc,
            #bdb8ad
        );
    display: flex;
    align-items: center;
    justify-content: center;
}

.bl-about-visual-content {
    text-align: center;
    color: rgba(255,255,255,0.85);
}

.bl-about-visual-content span {
    display: block;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 48px;
}

.bl-about-visual-content small {
    display: block;
    margin-top: 8px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


/* ============================================================
   ABOUT INTRO
============================================================ */

.bl-about-intro {
    padding: 130px 0;
    background: #fff;
}

.bl-about-intro-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(70px, 11vw, 170px);
}

.bl-about-intro h2 {
    margin: 0;
    font-family: "Manrope", Arial, sans-serif;
    font-size: clamp(46px, 5vw, 66px);
    font-weight: 500;
    line-height: 1.05;
}

.bl-about-intro-content {
    max-width: 650px;
}

.bl-about-intro-content p {
    color: #716d66;
    font-size: 15px;
    line-height: 1.9;
}

.bl-about-intro-content
.bl-about-intro-large {
    margin-top: 0;
    margin-bottom: 30px;
    color: #1d1d1b;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 28px;
    line-height: 1.5;
}


/* ============================================================
   COLLECTIONS
============================================================ */

.bl-about-collections {
    padding: 120px 0;
    background: #f7f6f2;
}

.bl-about-section-heading {
    margin-bottom: 60px;
    display: grid;
    grid-template-columns: 1fr 0.6fr;
    align-items: end;
    gap: 60px;
}

.bl-about-section-heading h2 {
    margin: 0;
    font-family: "Manrope", Arial, sans-serif;
    font-size: clamp(46px, 5vw, 66px);
    font-weight: 500;
    line-height: 1.05;
}

.bl-about-section-heading > p {
    max-width: 400px;
    margin: 0;
    color: #77736b;
    font-size: 14px;
    line-height: 1.8;
}

.bl-about-collection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #d7d4cd;
    border-bottom: 1px solid #d7d4cd;
}

.bl-about-collection-card {
    min-height: 430px;
    padding: 35px;
    border-right: 1px solid #d7d4cd;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #1d1d1b;
    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

.bl-about-collection-card:first-child {
    border-left: 1px solid #d7d4cd;
}

.bl-about-collection-card:hover {
    background: #1d1d1b;
    color: #fff;
}

.bl-about-collection-number {
    font-size: 10px;
    letter-spacing: 0.12em;
    opacity: 0.55;
}

.bl-about-collection-content h3 {
    margin: 0 0 18px;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 42px;
    font-weight: 500;
}

.bl-about-collection-content p {
    max-width: 310px;
    margin-bottom: 35px;
    font-size: 13px;
    line-height: 1.8;
    opacity: 0.7;
}

.bl-about-collection-content span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid currentColor;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.bl-about-collection-content b {
    font-size: 19px;
    font-weight: 400;
}


/* ============================================================
   PHILOSOPHY
============================================================ */

.bl-about-philosophy {
    padding: 130px 0;
    background: #1d1d1b;
    color: #fff;
}

.bl-about-philosophy-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(70px, 11vw, 170px);
}

.bl-about-philosophy
.bl-section-eyebrow {
    color: #aaa69e;
}

.bl-about-philosophy-title h2 {
    margin: 0;
    font-family: "Manrope", Arial, sans-serif;
    font-size: clamp(48px, 5.5vw, 72px);
    font-weight: 500;
    line-height: 1.05;
}

.bl-about-values {
    border-top: 1px solid rgba(255,255,255,0.2);
}

.bl-about-value {
    padding: 35px 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 25px;
}

.bl-about-value-number {
    padding-top: 5px;
    color: #8f8b84;
    font-size: 10px;
}

.bl-about-value h3 {
    margin: 0 0 12px;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 26px;
    font-weight: 500;
}

.bl-about-value p {
    max-width: 470px;
    margin: 0;
    color: #aaa69e;
    font-size: 13px;
    line-height: 1.8;
}


/* ============================================================
   SHOWROOM
============================================================ */

.bl-about-showroom {
    padding: 120px 0;
    background: #fff;
}

.bl-about-showroom-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(60px, 8vw, 120px);
    align-items: center;
}

.bl-about-showroom-image {
    min-height: 650px;
    background:
        linear-gradient(
            145deg,
            #e1ddd4,
            #bbb5aa
        );
    display: flex;
    align-items: center;
    justify-content: center;
}

.bl-about-showroom-image > div {
    text-align: center;
    color: #fff;
}

.bl-about-showroom-image span {
    display: block;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 42px;
}

.bl-about-showroom-image small {
    display: block;
    margin-top: 8px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.bl-about-showroom-content h2 {
    margin: 0 0 30px;
    font-family: "Manrope", Arial, sans-serif;
    font-size: clamp(48px, 5vw, 67px);
    font-weight: 500;
    line-height: 1.02;
}

.bl-about-showroom-content > p {
    max-width: 500px;
    color: #716d66;
    font-size: 14px;
    line-height: 1.85;
}

.bl-about-showroom-details {
    margin: 38px 0;
    border-top: 1px solid #dedbd4;
}

.bl-about-showroom-details > div {
    padding: 17px 0;
    border-bottom: 1px solid #dedbd4;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
}

.bl-about-showroom-details small {
    color: #918d85;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bl-about-showroom-details span {
    color: #1d1d1b;
    font-size: 13px;
}

.bl-about-button {
    min-height: 54px;
    padding: 0 23px;
    background: #1d1d1b;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 60px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.bl-about-button:hover {
    color: #fff;
    background: #393834;
}

.bl-about-button span {
    font-size: 18px;
}


/* ============================================================
   FINAL CTA
============================================================ */

.bl-about-cta {
    padding: 90px 0;
    background: #ece9e2;
}

.bl-about-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.bl-about-cta-small {
    margin-bottom: 10px;
    color: #77736b;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bl-about-cta h2 {
    margin: 0;
    font-family: "Manrope", Arial, sans-serif;
    font-size: clamp(45px, 5vw, 65px);
    font-weight: 500;
}

.bl-about-cta-actions {
    display: flex;
    gap: 10px;
}

.bl-about-cta-primary,
.bl-about-cta-secondary {
    min-height: 52px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.bl-about-cta-primary {
    background: #1d1d1b;
    color: #fff;
    border: 1px solid #1d1d1b;
}

.bl-about-cta-primary:hover {
    color: #fff;
    background: #393834;
}

.bl-about-cta-secondary {
    border: 1px solid #aaa69e;
    color: #1d1d1b;
}

.bl-about-cta-secondary:hover {
    border-color: #1d1d1b;
}


/* ============================================================
   ABOUT RESPONSIVE
============================================================ */

@media (max-width: 991.98px) {

    .bl-about-hero {
        padding: 75px 0 65px;
    }

    .bl-about-hero-grid,
    .bl-about-intro-grid,
    .bl-about-philosophy-grid,
    .bl-about-showroom-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .bl-about-section-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .bl-about-collection-grid {
        grid-template-columns: 1fr;
    }

    .bl-about-collection-card {
        min-height: 320px;
        border-left: 1px solid #d7d4cd;
        border-bottom: 1px solid #d7d4cd;
    }

    .bl-about-intro,
    .bl-about-philosophy,
    .bl-about-showroom,
    .bl-about-collections {
        padding: 85px 0;
    }

    .bl-about-showroom-image {
        min-height: 520px;
    }

}


@media (max-width: 575.98px) {

    .bl-about-hero {
        padding: 55px 0 50px;
    }

    .bl-about-hero h1 {
        font-size: 50px;
    }

    .bl-about-visual-placeholder {
        min-height: 420px;
    }

    .bl-about-intro,
    .bl-about-philosophy,
    .bl-about-showroom,
    .bl-about-collections {
        padding: 65px 0;
    }

    .bl-about-intro-content
    .bl-about-intro-large {
        font-size: 23px;
    }

    .bl-about-collection-card {
        min-height: 280px;
        padding: 28px 22px;
    }

    .bl-about-collection-content h3 {
        font-size: 36px;
    }

    .bl-about-value {
        grid-template-columns: 40px 1fr;
        gap: 15px;
    }

    .bl-about-showroom-image {
        min-height: 400px;
    }

    .bl-about-showroom-details > div {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .bl-about-cta {
        padding: 65px 0;
    }

    .bl-about-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .bl-about-cta-actions {
        width: 100%;
        flex-direction: column;
    }

    .bl-about-cta-primary,
    .bl-about-cta-secondary {
        width: 100%;
    }

}
/* ============================================================
   BANOLUZ STORY
============================================================ */

.bl-story-section {
    padding: 90px 0 70px;
    background: #F3F1EE;
}


.bl-story-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .85fr);

    min-height: 650px;
}


/* ============================================================
   IMAGE
============================================================ */

.bl-story-image {
    position: relative;

    overflow: hidden;

    min-height: 650px;

    background: #DEDAD4;
}


.bl-story-image img {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    display: block;

    object-fit: cover;
}


/* ============================================================
   CONTENT
============================================================ */

.bl-story-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    padding:
        70px
        clamp(45px, 6vw, 100px);

    background: #FFFFFF;
}


.bl-story-content h2 {
    margin:
        14px
        0
        28px;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        clamp(
            38px,
            4vw,
            58px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.045em;

    color: #292725;
}


.bl-story-content p {
    max-width: 470px;

    margin:
        0
        0
        30px;

    font-size: 15px;

    line-height: 1.8;

    color: #77736E;
}


/* ============================================================
   CATEGORY WORDS
============================================================ */

.bl-story-categories {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 0;

    margin-bottom: 38px;

    border-top:
        1px solid #DEDAD4;

    border-bottom:
        1px solid #DEDAD4;
}


.bl-story-categories span {
    position: relative;

    padding:
        15px
        22px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: #77736E;
}


.bl-story-categories span:first-child {
    padding-left: 0;
}


.bl-story-categories span:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 1px;
    height: 14px;

    background: #DEDAD4;

    transform: translateY(-50%);
}


/* ============================================================
   BUTTON
============================================================ */

.bl-story-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    min-width: 185px;

    padding:
        15px
        20px;

    border:
        1px solid #292725;

    background: #292725;

    color: #FFFFFF;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .04em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        background .25s ease,
        color .25s ease;
}


.bl-story-button span {
    transition:
        transform .25s ease;
}


.bl-story-button:hover {
    background: transparent;

    color: #292725;
}


.bl-story-button:hover span {
    transform: translateX(4px);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .bl-story-section {
        padding: 80px 0;
    }


    .bl-story-grid {
        grid-template-columns: 1fr 1fr;

        min-height: 560px;
    }


    .bl-story-image {
        min-height: 560px;
    }


    .bl-story-content {
        padding: 50px 38px;
    }


    .bl-story-content h2 {
        font-size: 40px;
    }

}


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

@media (max-width: 767.98px) {

    .bl-story-section {
        padding: 65px 0;

        background: #F3F1EE;
    }


    .bl-story-grid {
        display: block;

        min-height: 0;
    }


    .bl-story-image {
        min-height: 0;

        aspect-ratio: 4 / 4.5;
    }


    .bl-story-content {
        padding:
            38px
            24px
            42px;
    }


    .bl-story-content h2 {
        margin:
            10px
            0
            20px;

        font-size: 32px;

        line-height: 1.12;
    }


    .bl-story-content p {
        margin-bottom: 25px;

        font-size: 14px;

        line-height: 1.7;
    }


    .bl-story-categories {
        width: 100%;

        margin-bottom: 28px;
    }


    .bl-story-categories span {
        flex: 1;

        padding:
            13px
            10px;

        text-align: center;

        font-size: 10px;
    }


    .bl-story-categories span:first-child {
        padding-left: 10px;
    }


    .bl-story-button {
        width: 100%;

        justify-content:
            space-between;

        padding: 15px 17px;
    }

}















/* ============================================================
   WHY BANOLUZ - EDITORIAL
============================================================ */

.bl-why-section {
    padding: 85px 0 95px;
    background: #FAF9F7;
}


/* HEADER */

.bl-why-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
}

.bl-why-mini {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8B8177;
}


/* GRID */

.bl-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #DEDAD4;
    border-bottom: 1px solid #DEDAD4;
}

.bl-why-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 390px;
}

.bl-why-item:not(:last-child) {
    border-right: 1px solid #DEDAD4;
}


/* TEXT */

.bl-why-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 34px 26px 30px;
}

.bl-why-number {
    margin-bottom: 20px;
    font-size: 50px;
    font-weight: 300;
    line-height: 1;
    color: #C9C3BC;
}

.bl-why-text h3 {
    margin: 0 0 16px;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #292725;
}

.bl-why-text p {
    margin: 0 0 28px;
    font-size: 13px;
    line-height: 1.7;
    color: #77736E;
}

.bl-why-text a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-bottom: 5px;
    border-bottom: 1px solid #8B8177;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: #5F5953;
}

.bl-why-text a span {
    transition: transform .25s ease;
}

.bl-why-text a:hover span {
    transform: translateX(4px);
}


/* IMAGE */

.bl-why-image {
    overflow: hidden;
    background: #E9E5E0;
}

.bl-why-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .6s ease;
}

.bl-why-item:hover .bl-why-image img {
    transform: scale(1.035);
}


/* TABLET */

@media (max-width: 1199px) {

    .bl-why-item {
        grid-template-columns: 1fr;
    }

    .bl-why-image {
        min-height: 220px;
        order: -1;
    }

}


/* MOBILE */

@media (max-width: 767px) {

    .bl-why-section {
        padding: 58px 0 65px;
    }

    .bl-why-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 25px;
    }

    .bl-why-mini {
        font-size: 10px;
    }

    .bl-why-grid {
        grid-template-columns: 1fr;
    }

    .bl-why-item {
        grid-template-columns: 42% 58%;
        min-height: 260px;
    }

    .bl-why-item:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid #DEDAD4;
    }

    .bl-why-image {
        min-height: 260px;
        order: 0;
    }

    .bl-why-text {
        padding: 22px 16px;
    }

    .bl-why-number {
        margin-bottom: 12px;
        font-size: 38px;
    }

    .bl-why-text h3 {
        margin-bottom: 10px;
        font-size: 20px;
    }

    .bl-why-text p {
        margin-bottom: 18px;
        font-size: 12px;
        line-height: 1.55;
    }

    .bl-why-text a {
        font-size: 9px;
    }

}





/* ============================================================
   WHY BANOLUZ - MOBILE
   01 = TEXT | IMAGE
   02 = IMAGE | TEXT
   03 = TEXT | IMAGE
============================================================ */

@media (max-width: 767px) {

    .bl-why-section {
        padding: 58px 0 65px;
    }

    .bl-why-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 25px;
    }

    .bl-why-mini {
        font-size: 10px;
    }


    /* ALL ITEMS */

    .bl-why-grid {
        grid-template-columns: 1fr;
    }

    .bl-why-item {
        display: grid;
        grid-template-columns: 58% 42%;
        min-height: 270px;
    }

    .bl-why-item:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid #DEDAD4;
    }


    /* TEXT */

    .bl-why-text {
        order: 1;

        padding: 22px 16px;

        justify-content: center;
    }


    /* IMAGE */

    .bl-why-image {
        order: 2;

        min-height: 270px;
    }

    .bl-why-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* ========================================================
       SECOND ITEM
       IMAGE LEFT | TEXT RIGHT
    ======================================================== */

    .bl-why-item:nth-child(2) {
        grid-template-columns: 42% 58%;
    }

    .bl-why-item:nth-child(2) .bl-why-image {
        order: 1;
    }

    .bl-why-item:nth-child(2) .bl-why-text {
        order: 2;
    }


    /* NUMBER */

    .bl-why-number {
        margin-bottom: 12px;

        font-size: 38px;
    }


    /* TITLE */

    .bl-why-text h3 {
        margin-bottom: 10px;

        font-size: 20px;

        line-height: 1.2;
    }


    /* DESCRIPTION */

    .bl-why-text p {
        margin-bottom: 18px;

        font-size: 12px;

        line-height: 1.55;
    }


    /* LINK */

    .bl-why-text a {
        font-size: 9px;
    }

}

/* ============================================================
   FINAL SHOWROOM / WHATSAPP CTA
============================================================ */

.bl-final-cta {
    padding: 90px 0;
    background: #171615;
    color: #ffffff;
}

.bl-final-cta-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
}

.bl-final-cta-copy {
    max-width: 720px;
}

.bl-final-cta-eyebrow {
    color: #B8AEA5;
}

.bl-final-cta-copy h2 {
    margin: 14px 0 20px;

    font-family: "Manrope", Arial, sans-serif;
    font-size: clamp(38px, 3.7vw, 54px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.045em;

    color: #ffffff;
}

.bl-final-cta-copy p {
    max-width: 520px;
    margin: 0;

    font-size: 15px;
    line-height: 1.75;

    color: #B8B3AE;
}


/* ACTIONS */

.bl-final-cta-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bl-final-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    min-width: 190px;

    padding: 16px 18px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.bl-final-cta-btn span {
    transition: transform .25s ease;
}

.bl-final-cta-btn:hover span {
    transform: translateX(4px);
}


/* LIGHT BUTTON */

.bl-final-cta-btn-light {
    border: 1px solid #ffffff;
    background: #ffffff;
    color: #171615;
}

.bl-final-cta-btn-light:hover {
    background: #8B8177;
    border-color: #8B8177;
    color: #ffffff;
}


/* OUTLINE BUTTON */

.bl-final-cta-btn-outline {
    border: 1px solid #5D5955;
    background: transparent;
    color: #ffffff;
}

.bl-final-cta-btn-outline:hover {
    border-color: #8B8177;
    background: #8B8177;
}


/* MOBILE */

@media (max-width: 767px) {

    .bl-final-cta {
        padding: 62px 0;
    }

    .bl-final-cta-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 34px;
    }

    .bl-final-cta-copy h2 {
        font-size: 34px;
    }

    .bl-final-cta-copy p {
        font-size: 14px;
    }

    .bl-final-cta-actions {
        width: 100%;
        flex-direction: column;
    }

    .bl-final-cta-btn {
        width: 100%;
        min-width: 0;
    }

}



/* ============================================================
   PRODUCTS - COMPACT CATALOGUE CONTROLS
============================================================ */

.bl-catalogue-compactbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 0 0 18px;

    border-bottom: 1px solid #DEDAD4;
}

.bl-catalogue-compact-actions {
    display: flex;
    align-items: center;
    gap: 28px;
}

.bl-product-count {
    font-size: 12px;
    font-weight: 600;
    color: #292725;
}

.bl-catalogue-view-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8B8177;
}


/* SEARCH BUTTON */

.bl-search-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 0;

    border: 0;
    background: transparent;

    font-family: "Manrope", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;

    color: #292725;

    cursor: pointer;
}

.bl-search-toggle svg {
    width: 17px;
    height: 17px;
}

.bl-search-toggle:hover {
    color: #8B8177;
}


/* ============================================================
   COLLAPSIBLE SEARCH
============================================================ */

.bl-catalogue-search-wrap {
    display: grid;
    grid-template-rows: 0fr;

    opacity: 0;

    transition:
        grid-template-rows .25s ease,
        opacity .2s ease,
        margin .25s ease;

    margin: 0;

    overflow: hidden;
}

.bl-catalogue-search-wrap.open {
    grid-template-rows: 1fr;

    opacity: 1;

    margin-top: 18px;
    margin-bottom: 18px;
}

.bl-catalogue-search {
    position: relative;

    min-height: 0;
}

.bl-catalogue-search-wrap .bl-catalogue-search {
    overflow: hidden;
}

.bl-catalogue-search input {
    display: block;

    width: 100%;
    height: 50px;

    padding: 0 100px 0 17px;

    border: 1px solid #DEDAD4;
    border-radius: 0;
    outline: 0;

    background: #FFFFFF;

    font-family: "Manrope", Arial, sans-serif;
    font-size: 13px;

    color: #292725;
}

.bl-catalogue-search input:focus {
    border-color: #8B8177;
}

.bl-catalogue-search button {
    position: absolute;

    top: 0;
    right: 42px;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    background: transparent;

    color: #292725;

    cursor: pointer;
}


/* CLOSE SEARCH */

.bl-search-close {
    position: absolute;

    top: 0;
    right: 0;

    width: 42px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-left: 1px solid #DEDAD4;

    background: transparent;

    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 300;

    color: #77736E;

    cursor: pointer;
}

.bl-search-close:hover {
    color: #292725;
}


/* ============================================================
   FILTERS - MORE COMPACT
============================================================ */

.bl-catalogue-filters {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(0, .85fr)
        minmax(210px, .8fr)
        auto;

    align-items: end;

    gap: 16px;

    padding: 20px 0 22px;

    border-bottom: 1px solid #DEDAD4;
}

.bl-filter-select label {
    display: block;

    margin-bottom: 7px;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;

    color: #77736E;
}

.bl-filter-select select {
    width: 100%;
    height: 46px;

    padding: 0 40px 0 15px;

    border: 1px solid #DEDAD4;
    border-radius: 0;
    outline: 0;

    background: #FFFFFF;

    font-family: "Manrope", Arial, sans-serif;
    font-size: 12px;

    color: #292725;
}

.bl-filter-select select:focus {
    border-color: #8B8177;
}


/* APPLY */

.bl-filter-button {
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 35px;

    padding: 0 24px;

    border: 1px solid #292725;
    border-radius: 0;

    background: #292725;

    font-family: "Manrope", Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;

    color: #FFFFFF;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease;
}

.bl-filter-button:hover {
    background: #8B8177;
    border-color: #8B8177;
}


/* CLEAR */

.bl-filter-reset {
    height: 46px;

    display: inline-flex;
    align-items: center;

    font-size: 10px;
    font-weight: 500;

    color: #77736E;

    text-decoration: none;
}

.bl-filter-reset:hover {
    color: #292725;
}


/* MOBILE FILTER BUTTON */

.bl-mobile-filter-toggle {
    display: none;
}


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

@media (max-width: 767px) {

    .bl-catalogue-compactbar {
        padding-bottom: 14px;
    }

    .bl-catalogue-compact-actions {
        gap: 14px;
    }

    .bl-catalogue-view-label {
        display: none;
    }


    /* SEARCH */

    .bl-search-toggle span {
        display: none;
    }

    .bl-search-toggle {
        width: 38px;
        height: 38px;

        justify-content: center;
    }

    .bl-catalogue-search-wrap.open {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .bl-catalogue-search input {
        height: 46px;
        padding-left: 14px;
    }

    .bl-catalogue-search button {
        height: 46px;
    }

    .bl-search-close {
        height: 46px;
    }


    /* FILTER BUTTON */

    .bl-mobile-filter-toggle {
        height: 38px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;

        padding: 0 13px;

        border: 1px solid #292725;
        border-radius: 0;

        background: #292725;

        font-family: "Manrope", Arial, sans-serif;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;

        color: #FFFFFF;

        cursor: pointer;
    }


    /* FILTER PANEL */

    .bl-catalogue-filters {
        display: none;

        padding: 17px 0 20px;

        border-bottom: 1px solid #DEDAD4;
    }

    .bl-catalogue-filters.open {
        display: grid;

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .bl-filter-select select {
        height: 45px;
    }

    .bl-filter-button {
        width: 100%;
        height: 45px;
    }

    .bl-filter-reset {
        height: auto;

        justify-content: center;

        padding-top: 2px;
    }

}



/* ============================================================
   PRODUCTS - COLLAPSIBLE DESKTOP FILTERS
============================================================ */

/* Show filter button on desktop too */
.bl-mobile-filter-toggle {
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 14px;

    border: 1px solid #DEDAD4;
    border-radius: 0;

    background: transparent;

    font-family: "Manrope", Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;

    color: #292725;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

.bl-mobile-filter-toggle:hover {
    border-color: #292725;
}


/* Hide filter panel by default */
.bl-catalogue-filters {
    display: none;
}


/* Open when FILTERS is clicked */
.bl-catalogue-filters.open {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(0, .85fr)
        minmax(210px, .8fr)
        auto;

    align-items: end;
    gap: 16px;

    padding: 20px 0 22px;

    border-bottom: 1px solid #DEDAD4;
}


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

@media (max-width: 767px) {

    .bl-mobile-filter-toggle {
        height: 38px;

        padding: 0 13px;

        background: #292725;
        border-color: #292725;

        color: #FFFFFF;
    }

    .bl-catalogue-filters.open {
        grid-template-columns: 1fr;

        gap: 14px;

        padding: 17px 0 20px;
    }

}









/* ============================================================
   PRODUCTS - PRODUCT CARD REFINEMENT
============================================================ */

.bl-catalogue-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    column-gap: 22px;
    row-gap: 58px;
}


/* CARD */

.bl-catalogue-card {
    min-width: 0;
}

.bl-product-image {
    position: relative;

    display: block;

    width: 100%;
    aspect-ratio: 1 / 1.08;

    overflow: hidden;

    background: #F1EFEB;

    text-decoration: none;
}

.bl-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    transition: transform .35s ease;
}

.bl-product-card:hover .bl-product-image img {
    transform: scale(1.025);
}


/* ============================================================
   MISSING IMAGE
============================================================ */

.bl-product-no-image {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    background: #F1EFEB;

    color: #8B8177;
}

.bl-product-no-image span {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.03em;
}

.bl-product-no-image small {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;

    color: #9A938D;
}


/* ============================================================
   PROMO BADGE
============================================================ */

.bl-product-sale {
    position: absolute;

    top: 14px;
    left: 14px;

    min-width: 44px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    background: #1D1C1B;

    font-size: 10px;
    font-weight: 600;

    color: #FFFFFF;

    z-index: 3;
}


/* ============================================================
   HOVER LINK
============================================================ */

.bl-product-view {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 14px;

    background: rgba(29, 28, 27, .92);

    color: #FFFFFF;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;

    transform: translateY(100%);

    transition: transform .25s ease;
}

.bl-product-card:hover .bl-product-view {
    transform: translateY(0);
}


/* ============================================================
   PRODUCT INFO
============================================================ */

.bl-product-info {
    padding-top: 14px;
}

.bl-product-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 10px;
}

.bl-product-meta > span:first-child {
    min-width: 0;

    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: .11em;
    text-transform: uppercase;

    color: #8B8177;
}


/* ============================================================
   AVAILABILITY
============================================================ */

.bl-product-availability {
    flex-shrink: 0;

    font-size: 8px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: .10em;
    text-transform: uppercase;
}

.bl-product-availability.in_stock {
    color: #54685A;
}

.bl-product-availability.limited_stock {
    color: #9A7438;
}

.bl-product-availability.out_of_stock,
.bl-product-availability.discontinued {
    color: #9B5A53;
}

.bl-product-availability.pre_order,
.bl-product-availability.display_set {
    color: #8B8177;
}


/* ============================================================
   TITLE
============================================================ */

.bl-product-info h3 {
    margin: 0 0 7px;

    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;

    letter-spacing: -.025em;
}

.bl-product-info h3 a {
    color: #292725;
    text-decoration: none;

    transition: color .2s ease;
}

.bl-product-info h3 a:hover {
    color: #8B8177;
}


/* ============================================================
   BRAND / MODEL
============================================================ */

.bl-product-model {
    min-height: 18px;

    margin-bottom: 13px;

    overflow: hidden;

    font-size: 10px;
    line-height: 1.5;

    color: #918B85;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   PRICE
============================================================ */

.bl-product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 8px;

    min-height: 26px;
}

.bl-price-current {
    font-size: 16px;
    font-weight: 600;

    letter-spacing: -.02em;

    color: #191817;
}

.bl-price-old {
    font-size: 11px;

    color: #A29C96;

    text-decoration: line-through;
}

.bl-price-enquire {
    font-size: 11px;
    font-weight: 500;

    color: #77736E;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

    .bl-catalogue-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        column-gap: 18px;
        row-gap: 48px;
    }

}


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

@media (max-width: 767px) {

    .bl-catalogue-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 12px;
        row-gap: 34px;
    }


    .bl-product-image {
        aspect-ratio: 1 / 1.08;
    }


    .bl-product-sale {
        top: 9px;
        left: 9px;

        min-width: 38px;
        height: 27px;

        padding: 0 8px;

        font-size: 9px;
    }


    .bl-product-view {
        display: none;
    }


    .bl-product-info {
        padding-top: 10px;
    }


    .bl-product-meta {
        display: block;

        margin-bottom: 7px;
    }

    .bl-product-meta > span:first-child {
        display: block;

        margin-bottom: 4px;

        font-size: 7px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .bl-product-availability {
        display: block;

        font-size: 7px;
    }


    .bl-product-info h3 {
        margin-bottom: 5px;

        font-size: 14px;
        line-height: 1.3;
    }


    .bl-product-model {
        margin-bottom: 8px;

        font-size: 8px;
    }


    .bl-price-current {
        font-size: 14px;
    }

    .bl-price-old,
    .bl-price-enquire {
        font-size: 9px;
    }


    .bl-product-no-image span {
        font-size: 19px;
    }

    .bl-product-no-image small {
        font-size: 7px;
    }

}





/* ============================================================
   PRODUCTS - MODERN EDITORIAL HERO
============================================================ */

.bl-catalogue-hero {
    position: relative;
    overflow: hidden;

    padding: 5px 0 5px;

    background:
        linear-gradient(
            135deg,
            #F3F1EE 0%,
            #F8F6F3 55%,
            #F1EFEB 100%
        );
}


/* subtle architectural lines */

.bl-catalogue-hero::before,
.bl-catalogue-hero::after {
    content: "";

    position: absolute;

    pointer-events: none;
}

.bl-catalogue-hero::before {
    width: 520px;
    height: 520px;

    top: -250px;
    right: 8%;

    border: 1px solid rgba(139, 129, 119, .16);

    transform: rotate(45deg);
}

.bl-catalogue-hero::after {
    width: 1px;
    height: 160%;

    top: -30%;
    right: 31%;

    background: rgba(139, 129, 119, .16);

    transform: rotate(18deg);
}


/* main layout */

.bl-catalogue-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, .75fr);

    align-items: end;

    gap: 70px;
}


/* LEFT */

.bl-catalogue-hero .bl-section-eyebrow {
    margin-bottom: 16px;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .16em;
    text-transform: uppercase;

    color: #8B8177;
}

.bl-catalogue-hero h1 {
    margin: 0;

    max-width: 720px;

    font-size: clamp(52px, 5.2vw, 78px);
    font-weight: 500;

    line-height: .98;

    letter-spacing: -.055em;

    color: #292725;
}


/* RIGHT */

.bl-catalogue-hero p {
    position: relative;

    max-width: 430px;

    margin: 0 0 7px auto;

    padding-top: 18px;

    font-size: 13px;
    line-height: 1.75;

    color: #77736E;
}


/* small line above description */

.bl-catalogue-hero p::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 52px;
    height: 1px;

    background: #8B8177;
}


/* ============================================================
   OVERSIZED BACKGROUND WORDS
============================================================ */

.bl-catalogue-hero-inner::after {
    content: "BATH  ·  LIGHTING  ·  KITCHEN";

    position: absolute;

    right: -10px;
    bottom: -24px;

    font-family: "Manrope", Arial, sans-serif;

    font-size: clamp(34px, 4.5vw, 68px);
    font-weight: 600;

    letter-spacing: .05em;

    white-space: nowrap;

    color: rgba(139, 129, 119, .055);

    z-index: -1;
}


/* ============================================================
   SUBTLE MOTION
============================================================ */

@keyframes blHeroLineDrift {

    0% {
        transform:
            rotate(45deg)
            translate(0, 0);
    }

    50% {
        transform:
            rotate(45deg)
            translate(8px, -8px);
    }

    100% {
        transform:
            rotate(45deg)
            translate(0, 0);
    }

}

.bl-catalogue-hero::before {
    animation:
        blHeroLineDrift
        14s
        ease-in-out
        infinite;
}


/* respect reduced-motion settings */

@media (prefers-reduced-motion: reduce) {

    .bl-catalogue-hero::before {
        animation: none;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {

    .bl-catalogue-hero {
        padding: 5px 0 5px;
    }

    .bl-catalogue-hero-inner {
        grid-template-columns:
            1fr
            minmax(260px, .7fr);

        gap: 45px;
    }

    .bl-catalogue-hero h1 {
        font-size: clamp(46px, 7vw, 64px);
    }

}


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

@media (max-width: 767px) {

    .bl-catalogue-hero {
        padding: 5px 0 5px;
    }

    .bl-catalogue-hero-inner {
        display: block;
    }

    .bl-catalogue-hero h1 {
        font-size: 42px;

        line-height: 1;
    }

    .bl-catalogue-hero p {
        max-width: 100%;

        margin: 22px 0 0;

        padding-top: 14px;

        font-size: 12px;
    }

    .bl-catalogue-hero-inner::after {
        right: -5px;
        bottom: -18px;

        font-size: 28px;
    }

    .bl-catalogue-hero::before {
        width: 320px;
        height: 320px;

        top: -160px;
        right: -80px;
    }

    .bl-catalogue-hero::after {
        right: 20%;

        opacity: .7;
    }

}


/* ============================================================
   CATALOGUE HERO - FINAL POLISH
============================================================ */

.bl-catalogue-hero-inner::after {
    bottom: -42px;

    font-size: clamp(32px, 4.2vw, 62px);

    color: rgba(139, 129, 119, .035);
}

.bl-catalogue-hero::before {
    border-color: rgba(139, 129, 119, .10);
}

.bl-catalogue-hero::after {
    background: rgba(139, 129, 119, .10);
}

/* description line slightly more subtle */
.bl-catalogue-hero p::before {
    width: 42px;
    background: rgba(139, 129, 119, .75);
}







/* ============================================================
   BANOLUZ — FINAL GLOBAL HEADER / FOOTER POLISH
   Add this ONCE at the END of assets/css/style.css
============================================================ */

/* Prevent page scroll while the mobile navigation is open */
body.bl-menu-open {
    overflow: hidden;
}


/* ------------------------------------------------------------
   TEMPORARY TEXT LOGO
------------------------------------------------------------ */

.bl-logo,
.bl-footer-logo {
    text-decoration: none;
}

.bl-logo-main,
.bl-footer-logo-main {
    letter-spacing: 0.08em;
}

.bl-logo-sub {
    letter-spacing: 0.035em;
    line-height: 1.25;
}


/* ------------------------------------------------------------
   HEADER
------------------------------------------------------------ */

.bl-header {
    position: relative;
    z-index: 1000;
}

.bl-header-inner {
    min-height: 88px;
}

.bl-nav a,
.bl-search-button,
.bl-enquire-button {
    transition:
        opacity 0.2s ease,
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.bl-nav a:hover,
.bl-search-button:hover {
    opacity: 0.68;
}

.bl-nav a.active {
    font-weight: 600;
}


/* ------------------------------------------------------------
   MOBILE NAV
------------------------------------------------------------ */

.bl-mobile-nav-contact {
    display: grid;
    gap: 3px;
    margin-top: 22px;
    font-size: 12px;
    line-height: 1.55;
    color: #77736E;
}


/* ------------------------------------------------------------
   FOOTER
------------------------------------------------------------ */

.bl-footer-address {
    line-height: 1.7;
}

.bl-footer-contact-link span {
    transition: transform 0.2s ease;
}

.bl-footer-contact-link:hover span {
    transform: translateX(3px);
}


/* ------------------------------------------------------------
   TABLET / MOBILE
------------------------------------------------------------ */

@media (max-width: 991.98px) {

    .bl-header-inner {
        min-height: 76px;
    }

    .bl-logo-sub {
        max-width: 190px;
        white-space: normal;
    }

}


@media (max-width: 575.98px) {

    .bl-topbar-message {
        font-size: 10px;
        letter-spacing: 0.02em;
    }

    .bl-topbar-contact a:first-child,
    .bl-topbar-divider {
        display: none;
    }

    .bl-header-inner {
        min-height: 70px;
    }

    .bl-logo-main {
        font-size: 20px;
    }

    .bl-logo-sub {
        max-width: 155px;
        font-size: 8px;
        line-height: 1.3;
    }

    .bl-footer-logo-sub {
        line-height: 1.4;
    }

}




/* ============================================================
   BANOLUZ — HD SVG LOADER
   Replace the OLD loader CSS with this block.
============================================================ */

.bl-page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #FAF9F7;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.38s ease,
        visibility 0.38s ease;
}

.bl-page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.bl-page-loader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bl-page-loader-inner {
    width: min(340px, 82vw);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bl-loader-icons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 18px;
}

.bl-loader-svg {
    width: 100%;
    max-width: 62px;
    height: auto;

    margin: 0 auto;

    fill: none;
    stroke: #8B8177;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 0.18;
    transform: scale(0.96);
    transform-origin: center;

    animation:
        blLoaderIconCycle 2.8s ease-in-out infinite;
}

.bl-loader-svg-1 {
    animation-delay: 0s;
}

.bl-loader-svg-2 {
    animation-delay: 0.7s;
}

.bl-loader-svg-3 {
    animation-delay: 1.4s;
}

.bl-loader-svg-4 {
    animation-delay: 2.1s;
}

@keyframes blLoaderIconCycle {

    0%,
    18%,
    100% {
        opacity: 0.18;
        transform: scale(0.96);
    }

    7%,
    11% {
        opacity: 1;
        transform: scale(1.06);
    }

}

@media (max-width: 575.98px) {

    .bl-page-loader-inner {
        width: min(285px, 82vw);
    }

    .bl-loader-icons {
        gap: 12px;
    }

    .bl-loader-svg {
        max-width: 54px;
        stroke-width: 1.7;
    }

}

@media (prefers-reduced-motion: reduce) {

    .bl-page-loader {
        transition: none;
    }

    .bl-loader-svg {
        animation: none;
        opacity: 0.65;
        transform: none;
    }

}