/* local css */
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap');


html,
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    /* Ensure body can grow with content */
}

p {
    margin-bottom: 0;
    font-size: 1.125rem;
}

li {
    font-size: 1.125rem;
}

h1 {
    font-size: 4.5rem;
    margin-bottom: 0;
}

h2 {
    font-size: 2.4rem;
    margin-bottom: 0;
}

h3 {
    font-size: 2rem;
    margin-bottom: 0;
}

h4 {
    font-size: 1.75rem;
    margin-bottom: 0;
}

h5 {
    font-size: 1.5rem;
    margin-bottom: 0;
}

h6 {
    font-size: 1rem;
    margin-bottom: 0;
}

.headerh1 {
    font-size: 15rem;
}

.headerh2 {
    font-size: 3.375rem;
}

.subheaderh1 {
    font-size: 6.2rem;
}

.xsso_text_overlay span {
    font-size: 4rem;
}

/* ── SplitType word-break fix ──────────────────────────────────────
   When SplitType splits text into characters (.char), the browser
   can wrap the line anywhere between inline spans — even mid-word.
   Wrapping chars inside a .word span (types: 'words, chars') and
   setting white-space: nowrap on .word prevents this.
   .char must be inline-block so GSAP y/opacity transforms work.
────────────────────────────────────────────────────────────────── */
.word {
    display: inline-block;
    white-space: nowrap;
}

.char {
    display: inline-block;
}







.home_page_header_area {
    display: block;
    position: relative;
    padding: 0 0 100px 0;
}

.home_page_introduction_area {
    display: block;
    position: relative;
}

.home_page_collection_area {
    display: block;
    position: relative;
}

/* Left Side Ruler Styles */
.left-side-ruler {
    position: fixed;
    left: 60px;
    top: 0;
    bottom: 0;
    width: 0;
    z-index: 999;
    pointer-events: none;
    display: flex;
    justify-content: center;
}

/* The Ladder Track (stacks of horizontal ticks) */
.ruler-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background-image: repeating-linear-gradient(to bottom, #8F9593 0px, #8F9593 1px, transparent 1px, transparent 10px);
}

/* The moving "Thumb" */
.ruler-progress {
    position: absolute;
    left: 50%;
    /* JS drives this with translate3d(-50%, Ypx, 0). The -50% must stay
       in the transform, not in a separate rule, or the thumb loses its
       horizontal centring the first time JS writes to it. */
    transform: translate3d(-50%, 0, 0);
    width: 3px;
    /* Thick pill thumb */
    height: 30px;
    /* Fixed height for the thumb */
    background-color: #023A3B;
    border-radius: 10px;
    top: 0;
    /* No transition: Lenis already eases the scroll, so a transition on
       top of it made the thumb visibly trail the page. */
    will-change: transform;
    z-index: 2;
}

/* The section markers (Longer horizontal lines) */
.ruler-point {
    position: absolute;
    left: -10px;
    transform: translateX(-50%);
    width: 20px;
    /* Longer than the track ticks */
    height: 1px;
    background-color: #1d1d1d;
    /* Black marker line */
    /* top set by JS */
}

/* Labels */
.ruler-label {
    position: absolute;
    left: 35px;
    /* To the right of the marker */
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 400;
    color: #1d1d1d;
    /* Slightly softer than black */
    white-space: nowrap;
    opacity: 1;
    font-family: inherit;
}

@media (max-width: 991px) {
    .left-side-ruler {
        display: none;
    }
}

.home_page_space_div {
    display: block;
    position: relative;
}

.width_95 {
    width: 95%;
}

.left_2 {
    left: 2%;
}

.xsso_home_header_main_content {
    display: block;
    position: relative;
    padding-top: 100px;
    text-align: center;
}

.xsso_home_header_main_content h1 {
    color: rgba(67, 67, 67, 0.20);
    font-family: "Albra";
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -0.05em;
    margin-bottom: 0;
    display: inline-block;
    position: relative;
}

.xsso_home_header_main_content h2 {
    color: #023A3B;
    font-family: "Brightclones";
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    position: absolute;
    right: 15%;
    bottom: -8%;
    border-bottom: 1px solid rgba(2, 58, 59, 0.5);
}

.pt-80 {
    padding-top: 80px;
}

.pb-80 {
    padding-bottom: 80px;
}


.pt-100 {
    padding-top: 100px;
}

.pl-50 {
    padding-left: 50px;
}

.pl-120 {
    padding-left: 120px;
}

.pl-150 {
    padding-left: 150px;
}

.pl-180 {
    padding-left: 180px;
}

.pl-200 {
    padding-left: 200px;
}

.pr-50 {
    padding-right: 50px;
}


.xsso_header_hero_image_area {
    display: block;
    position: relative;
}

.xsso_header_hero_image_area img {
    max-width: 100%;
}

.xsso_header_hero_content_area {
    display: block;
    position: relative;
    margin-bottom: 60px;
}

.xsso_header_hero_content_area p {
    color: #1d1d1d;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.03em;
}

.xsso_header_hero_content_area p strong {
    color: #023A3B;
    font-weight: 400;
}

.place-content-end {
    place-content: end;
}

.extra_side_padding_30 {
    padding: 0 30px;
}

/* Navbar Hide/Show on Scroll */
.navbar {
    transition: transform 0.3s ease-in-out;
}

.navbar-hidden {
    transform: translateY(-100%);
}

.nav-right-elements {
    display: flex;
    align-items: center;
}

/* Collection dropdown — editorial preview */
@media screen and (min-width: 992px) {
    .navbar .nav-item.dropdown .nav-link img {
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .navbar .nav-item.dropdown:hover .nav-link img {
        transform: rotate(180deg);
    }

    .navbar .dropdown-menu.dropdown-menu-editorial {
        display: flex;
        width: auto;
        min-width: 520px;
        padding: 12px;
        background-color: #ffffff;
        border: 1px solid rgba(2, 58, 59, 0.08);
        border-radius: 12px;
        overflow: hidden;
        list-style: none;
        box-shadow: 0 24px 60px -12px rgba(2, 58, 59, 0.18);
        gap: 12px;
    }

    .navbar .dropdown-menu.dropdown-menu-editorial li {
        border-bottom: none;
    }

    .dropdown-editorial-list {
        display: flex;
        flex-direction: column;
        min-width: 220px;
        padding: 0 12px;
        margin: 0;
        border-right: 1px solid rgba(2, 58, 59, 0.06);
        gap: 6px;
        justify-content: flex-start;
    }

    .dropdown-editorial-item {
        display: flex;
        align-items: center;
        padding: 12px 28px;
        font-size: 13px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(2, 58, 59, 0.65);
        text-decoration: none;
        white-space: nowrap;
        border-radius: 8px;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        line-height: 1;
        margin: 0;
    }

    .dropdown-editorial-item:hover,
    .dropdown-editorial-item.is-active {
        color: #023A3B;
        font-weight: 600;
        background-color: rgba(2, 58, 59, 0.05);
        transform: translateX(4px);
    }

    .dropdown-editorial-item:focus-visible {
        outline: 2px solid #023A3B;
        outline-offset: -2px;
    }

    .dropdown-editorial-preview {
        flex: 1;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-width: 270px;
        background-color: #FAF9F5;
        border-radius: 8px;
        border: 1px solid rgba(2, 58, 59, 0.03);
    }

    .dropdown-editorial-image-wrap {
        height: 160px;
        border-radius: 6px;
        overflow: hidden;
        background-color: #EFEBDD;
        border: 1px solid rgba(2, 58, 59, 0.06);
        box-shadow: 0 4px 12px rgba(2, 58, 59, 0.04);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .dropdown-editorial-preview:hover .dropdown-editorial-image-wrap {
        transform: scale(1.02);
    }

    .dropdown-editorial-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease, opacity 0.15s ease;
    }

    .dropdown-editorial-preview:hover .dropdown-editorial-image {
        transform: scale(1.03);
    }

    /* Fallback state: no real collection photo uploaded yet, so show the
       logo whole and centered instead of cropping it like a photo */
    .dropdown-editorial-image-wrap.is-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 36px;
    }

    .dropdown-editorial-image-wrap.is-placeholder .dropdown-editorial-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        opacity: 0.85;
    }

    .dropdown-editorial-caption {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 2px 4px;
    }

    .dropdown-editorial-caption-name {
        font-size: 13px;
        font-weight: 600;
        color: #023A3B;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .dropdown-editorial-caption-view {
        font-size: 11px;
        font-weight: 600;
        color: #023A3B;
        opacity: 0.65;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .dropdown-editorial-preview:hover .dropdown-editorial-caption-view {
        opacity: 1;
        transform: translateX(3px);
    }
}

/* Mobile: keep the existing simple stacked list, no preview panel */
@media screen and (max-width: 991px) {
    .navbar .dropdown-menu-editorial .dropdown-editorial-preview {
        display: none;
    }

    .dropdown-editorial-list {
        display: block;
    }

    .dropdown-editorial-item {
        display: block;
        padding: 10px 0;
        font-size: 24px;
        line-height: 1.2;
        color: rgba(2, 58, 59, 0.7);
        font-weight: 300;
        text-decoration: none;
    }

    .dropdown-editorial-item.is-active,
    .dropdown-editorial-item:hover {
        color: #023A3B;
    }
}

@media screen and (max-width: 991px) {
    .navbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px !important;
        height: 100px;
    }

    .logo-wrapper {
        float: none;
        padding: 0 !important;
        position: relative;
        z-index: 1001;
    }

    .nav-right-elements {
        gap: 30px;
        position: relative;
        z-index: 1001;
    }

    .menu_extra_search_area ul {
        gap: 30px;
    }

    .navbar-toggler {
        padding: 0;
        margin: 0;
    }
}


.xsso_intro_left_content,
.xsso_intro_left_image,
.xsso_right_intro_left_side_image_area {
    display: block;
    position: relative;
}

.xsso_intro_left_image img {
    width: 100%;
}


.xsso_intro_right_image_corners {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    /* On top of everything */
}

.xsso_intro_right_image_corners img {
    position: absolute;
    width: 90px !important;
    /* Adjust size as needed, default 90px was huge */
    max-width: none;
}

.xsso_intro_right_image_corners .left_top {
    left: -8px;
    top: -8px;
}

.xsso_intro_right_image_corners .right_top {
    right: -8px;
    top: -8px;
}

.xsso_intro_right_image_corners .left_bottom {
    left: -8px;
    bottom: -8px;
}

.xsso_intro_right_image_corners .right_bottom {
    right: -8px;
    bottom: -8px;
}










.xsso_right_intro_left_side_image_area img {
    width: 100%;
}

.text-align-right {
    text-align: right;
}

.xsso_intro_left_content p {
    color: #1d1d1d;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.03em;
    max-width: 430px;
}

.xsso_intro_left_side_content_area {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: space-between;
}

.xsso_intro_left_content {
    padding-top: 120px;
}

.xsso_intro_more_details_btn {
    display: block;
    position: relative;
    margin-top: 60px;
}

.xsso_intro_more_details_btn img {
    width: 48px;
}

/* Text Overlay Styles */
.xsso_right_intro_left_side_image_area {
    position: relative;
    /* Ensure z-index context if needed, but default is fine */
}

.xsso_image_wrapper {
    position: relative;
    overflow: hidden;
    /* Clips the white text to the image area */
    z-index: 5;
    /* Sit on top of the dark text */
    display: block;
    width: 100%;
}

.xsso_text_overlay {
    position: absolute;
    top: 50%;
    left: -20%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    text-align: left;
    pointer-events: none;
}

.xsso_text_overlay.text_dark {
    z-index: 1;
    /* Behind image wrapper */
}

.xsso_text_overlay.text_light {
    z-index: 10;
    /* Top of everything inside wrapper */
}

.xsso_text_overlay span {
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -0.03em;
}

.text_dark span {
    color: #023A3B;
}

.text_light span {
    color: #ffffff;
}

@media (max-width: 1400px) {


    .xsso_text_overlay {
        left: -10%;
    }
}

@media (max-width: 991px) {
    /* .xsso_text_overlay {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        margin-bottom: 20px;
        text-align: center;
        mix-blend-mode: normal;
    } */

    .xsso_text_overlay span {
        color: #023A3B;
        /* Use standard dark color on mobile */
    }
}

.xsso_home_collection_header_area {
    display: block;
    position: relative;
}

.xsso_home_collection_header_area h1 {
    color: #FFF;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.03em;
    display: inline-block;
    position: relative;
}

.xsso_home_collection_header_area .collection_stylish_area {
    color: #023A3B;
    font-family: "Brightclones";
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    position: absolute;
    left: 8%;
    bottom: -5%;
}

/* Collection Cards Styles */
.pt-50 {
    padding-top: 50px;
}


.xsso_collection_container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: 600px;
    width: 100%;
}

.xsso_collection_card {
    position: relative;
    flex: 1;
    /* Default collapsed state */
    background: #ffffff;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    padding: 40px;
    border: 1px solid transparent;
}

.xsso_collection_card.active {
    flex: 3;
    /* Expand active card */
    background-color: #F7F6D4;
    /* Pastel yellow default */
    cursor: default;
    padding: 30px;
}

.xsso_collection_card.active h2 br {
    display: none;
}

/* Background Image Wrapper */
.card_bg_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

.xsso_collection_card.active .card_bg_wrapper {
    opacity: 1;
}

.card_bg_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content */
.card_content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.xsso_collection_card h3 {
    color: #1d1d1d;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 0;
    white-space: normal;
    word-break: break-word;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.xsso_collection_card.active h3 {
    font-size: 90px;
    letter-spacing: -0.03em;
    color: #ADB19B;
    /* Muted greenish grey from design */
    white-space: nowrap;
    width: auto;
}

/* Hidden Content */
.hidden_content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.2s ease;
    /* Fast exit, no delay */
    display: flex;
    flex-direction: column;
    gap: 20px;
    pointer-events: none;
    margin-top: auto;
    /* Push to bottom */
}

.xsso_collection_card.active .hidden_content {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.3s;
    /* Smooth enter with delay */
    pointer-events: auto;
}

.hidden_content p {
    color: #1d1d1d;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.03em;
    max-width: 450px;
    margin-bottom: 20px;
}


.coming_soon_text {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ADB19B;
}

/* Expand Label */
.expand_label {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.expand_label span {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #aaa;
    position: relative;
    display: inline-block;
}

.expand_label span::before,
.expand_label span::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background-color: #ddd;
}

.expand_label span::before {
    right: 100%;
    margin-right: 10px;
}

.expand_label span::after {
    left: 100%;
    margin-left: 10px;
}

.xsso_collection_card.active .expand_label {
    opacity: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .xsso_collection_container {
        flex-direction: column;
        height: auto;
    }

    .xsso_collection_card {
        flex: none;
        height: 80px;
    }

    .xsso_collection_card.active {
        flex: none;
        height: 400px;
    }

    .hidden_content p {
        max-width: 100%;
    }
}

.xsso_home_detailing_image_area {
    display: block;
    position: relative;
}

.xsso_home_detailing_image_area img {
    width: 100%;
}

.xsso_home_detailing_content_area,
.xsso_home_detailing_content_image_area {
    display: block;
    position: relative;
}

.xsso_home_detailing_content_image_area img {
    max-width: 100%;
    margin-bottom: 70px;
}

.xsso_home_detailing_content_area {
    display: block;
    position: relative;
}

.xsso_home_detailing_content_area h2 {
    color: #023A3B;
    font-style: normal;
    font-weight: 300;
    line-height: 110%;
    letter-spacing: -0.03em;
    margin-bottom: 80px;
}

.xsso_home_detailing_content_area p {
    color: #1d1d1d;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.03em;
}

.xsso_home_defines_content_area {
    background-color: #fff;
    padding: 100px 0 100px 0;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.xsso_home_defines_header_area {
    position: relative;
    margin-bottom: 80px;
    display: inline-block;
}

.xsso_home_defines_header_area h1 {
    color: rgba(29, 29, 29, 0.10);
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.03em;
    text-align: center;
    margin: 0;
    pointer-events: none;
}

.xsso_home_defines_header_area .defines_stylish_header {
    color: #023A3B;
    font-family: "Brightclones", sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    border-bottom: none;
    white-space: nowrap;
}

.xsso_defines_stats_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 50px 100px;
    width: 100%;
    /* max-width: 1000px; */
    padding: 0 200px;
    margin: 0 auto;
    text-align: left;
}

.xsso_stat_item {
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: center;
    /* Center the pair in the grid cell */
}

.stat_number {
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px #8F9593;
    line-height: 1;
    font-family: sans-serif;
}

.stat_text {
    color: #1d1d1d;
    /* max-width: 180px; */
    line-height: 1.2;
    font-weight: 300;
    text-align: left;
    letter-spacing: -0.03em;
}

.xsso_defines_divider {
    height: 1px;
    background-color: #EAEAEA;
    width: 100%;
    max-width: 1100px;
    margin: 80px 0;
}

.xsso_defines_icons_row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* max-width: 1000px; */
    padding: 0 200px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 30px;
}

.xsso_icon_item {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    gap: 30px;
    width: 200px;
    text-align: left;
}

.icon_placeholder {
    font-size: 50px;
    color: #023A3B;
}

/* .icon_placeholder i {} removed */

.xsso_icon_item h5 {
    color: #023A3B;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 31.2px */
    letter-spacing: -1.04px;
}



@media (max-width: 991px) {
    .xsso_home_defines_content_area {
        padding: 60px 20px 40px 20px;
    }

    .xsso_home_defines_header_area {
        margin-bottom: 50px;
    }

    .xsso_defines_stats_grid {
        grid-template-columns: 1fr;
        gap: 40px;
        grid-gap: 40px;
        /* Polyfill */
    }

    .xsso_stat_item {
        justify-content: center;
        /* Center in mobile too */
        margin-left: 0;
    }

    .stat_text {
        max-width: none;
        width: auto;
    }

    .xsso_defines_divider {
        margin: 40px 0;
    }

    .xsso_defines_icons_row {
        justify-content: center;
        gap: 40px;
    }

    .xsso_icon_item {
        width: 45%;
    }
}

@media (max-width: 575px) {


    .xsso_stat_item {
        justify-content: flex-start;
        /* Align left on small screens might look better or center? Center is safer for 'layout' */
        /* justify-content: center; */
    }


    .stat_text {
        font-size: 18px;
    }

    .xsso_icon_item {
        width: 100%;
    }
}

/* Footer Styles */
.xsso_footer_section {
    background-color: #000000;
    /* Very dark teal/black */
    padding: 80px 0;
    color: #fff;
    z-index: 9999;
    position: relative;
}

.footer_form_input_area h6 {
    color: #ffffffad;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.footer_contact_form {
    max-width: 500px;
}

.footer_input_wrapper {
    border: 1px solid rgba(255, 255, 255, 0.30);
    position: relative;
    height: 60px;
    padding: 0 20px;
    margin-bottom: 20px;
    transition: border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer_input_wrapper:focus-within {
    border-color: #fff;
}

.footer_input_wrapper label {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    margin: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 1;
}

/* Floating Label State */
.footer_input_wrapper input:focus~label,
.footer_input_wrapper input:not(:placeholder-shown)~label {
    top: 4px;
    transform: translateY(0);
    font-size: 10px;
    color: rgba(248, 246, 195, 0.5);
}

.footer_input_wrapper input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    width: 100%;
    height: 100%;
    outline: none;
    font-weight: 300;
    padding: 18px 0 0 0;
    margin: 0;
    z-index: 2;
}

.footer_submit_btn {
    background-color: #ffffff;
    /* Light cream/yellow */
    color: #000;
    border: none;
    padding: 14px 44px;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    letter-spacing: -0.03em;
}

.footer_submit_btn:hover {
    transform: translateY(-2px);
    background-color: #fff;
}

.footer_form_input_area {
    display: block;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
}

.footer_form_input_area h6 {
    color: #ffffffad;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    text-transform: uppercase;
}

.footer_form_input_area h3 {
    color: #FFF;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.03em;
    margin-bottom: 40px;
}

.xsso_footer_info_area .xsso_footer_contact_area {
    display: block;
    position: relative;
}

.xsso_footer_info_area h6,
.xsso_footer_contact_area h6 {
    color: #ffffffad;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.xsso_footer_info_area ul li a {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.03em;
}

.xsso_footer_info_area ul {
    padding-left: 0;
    margin: 0;
}

.xsso_footer_info_area ul li {
    padding: 4px 0;
}

.xsso_footer_contact_area ul {
    padding-left: 0;
    margin: 0;
}

.xsso_footer_contact_area ul li p {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}

.xsso_footer_contact_area ul li a {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.03em;
}

.xsso_footer_contact_area ul li {
    margin-bottom: 32px;
}

.xsso_footer_logo_area img {
    width: 100%;
    ;
}

.footer_address_area {
    display: block;
    position: relative;
}

.footer_address_area h6 {
    color: #ffffffad;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.footer_address_area ul {
    padding: 0;
    margin: 0;
}

.footer_address_area ul li a {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.03em;
}

.email_subscription_area {
    display: block;
    position: relative;
}

.email_subscription_area h6 {
    color: #ffffffad;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    text-transform: uppercase;
    /* The 30px gap now sits under the description below, so the heading
       and its description read as one block. */
    margin-bottom: 10px;
}

.email_subscription_area .subscription_description {
    /* Dimmer than the heading so it reads as supporting text, and
       max-width keeps it to a comfortable line length instead of
       stretching the full width of the footer. */
    color: #ffffff70;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    /* Wide enough to hold the line on desktop instead of orphaning the
       last word; still wraps naturally on narrow screens. */
    max-width: 560px;
    margin-bottom: 30px;
}

/* Subscription Form Styles */
.subscription_input_wrapper {
    border: 1px solid rgba(255, 255, 255, 0.30);
    position: relative;
    height: 60px;
    padding: 0 20px;
    margin-bottom: 20px;
    transition: border-color 0.3s ease;
    display: flex;
    align-items: center;
}

.subscription_input_wrapper:focus-within {
    border-color: #fff;
}

.subscription_input_wrapper label {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    margin: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 1;
}

.subscription_input_wrapper input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    width: 100%;
    height: 100%;
    outline: none;
    font-weight: 300;
    padding: 18px 50px 0 0;
    margin: 0;
    z-index: 2;
}

.subscription_input_wrapper input::placeholder {
    color: transparent;
}

/* Floating Label State */
.subscription_input_wrapper input:focus~label,
.subscription_input_wrapper input:not(:placeholder-shown)~label {
    top: 4px;
    transform: translateY(0);
    font-size: 10px;
    color: rgba(248, 246, 195, 0.5);
}

.subscription_submit_btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 0 0 0 30px;
    height: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    transition: color 0.3s ease;
}

.subscription_submit_btn:hover {
    color: #F8F6C3;
}

.footer_social_icon ul {
    display: flex;
    position: relative;
    padding: 0;
    margin: 0;
    gap: 12px;
}

.footer_social_icon ul li a img {
    width: 54px;
}

.social_copyright_area {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
}

.full_width_footer_bar {
    display: block;
    position: relative;
}

.fill_width_path_image {
    position: absolute;
    bottom: 0;
    z-index: 9999;
}


/* About Page Motto Section */

.xsso_about_motto_header_content {
    position: relative;
    z-index: 5;
    padding-top: 0;
}

/* Common heading style */
.xsso_about_motto_header_content h2 {
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin-bottom: 80px;
}

/* Normal dark text */
.xsso_about_motto_header_content h2.base {
    color: #023A3B;
    position: relative;
    z-index: 2;
}

/* White overlay version */
.xsso_about_motto_header_content h2.overlay {
    color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    pointer-events: none;
    clip-path: inset(120px 0 0 81%);
}

.xsso_about_motto_header_content p {
    color: #1d1d1d;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.03em;
    max-width: 350px;
}

.xsso_about_motto_image_content {
    display: block;
    position: relative;
}

.xsso_about_motto_image_content img {
    max-width: 100%;
}

@media (min-width: 992px) {
    .xsso_about_motto_image_content {
        margin-left: -65px;
        z-index: 1;
        padding-top: 120px;
    }

    .xsso_about_motto_header_content h2 {
        white-space: nowrap;
    }
}

@media (max-width: 991px) {
    .xsso_about_motto_header_content h2.overlay {
        display: none;
    }
}

.motto_features_row {
    padding-top: 80px;
    margin-top: 80px;
    border-top: 1px dashed rgba(22, 22, 22, 0.20);
    ;
}

.xsso_about_motto_feeatures_area {
    display: block;
    position: relative;
}

.xsso_about_motto_feeatures_area img {
    width: 40px;
    margin-bottom: 40px;
}

.xsso_about_motto_feeatures_area h3 {
    color: #161616;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.03em;
    margin-bottom: 30px;
}

.xsso_about_motto_feeatures_area p {
    color: #161616;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.03em;
}

.pr-80 {
    padding-right: 80px;
}

/* Way of Living Section */
.xsso_way_of_living_section {
    position: relative;
    padding: 150px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.xsso_wayofliving_card {
    background: #ffffff;
    padding: 20px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.xsso_wayofliving_cutout {
    width: 100%;
    height: 300px;
    margin-bottom: 40px;
    background-color: #e9e6df;
    /* neutral placeholder until the JS-clipped mask layer paints over it */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.xsso_wayofliving_card_content h3 {
    color: #161616;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.xsso_wayofliving_card_content p {
    color: #161616;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.03em;
    margin-top: 50px;
    margin-bottom: 30px;
}

@media (max-width: 991px) {
    .xsso_way_of_living_section {
        padding: 80px 0;
    }


}

.xsso_about_expertise_header_area {
    display: block;
    position: relative;
}

.xsso_about_expertise_header_area h3 {
    color: rgba(2, 58, 59, 0.70);
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.03em;
}

.xsso_about_expertise_header_area_span {
    font-weight: 400;
    color: #023A3B;
}

.xsso_about_expertise_video_area {
    display: block;
    position: relative;
}

.xsso_about_expertise_video_area video {
    width: 100%;
    height: auto;
    display: block;
}

.xsso_experise_content_leftcontentarea {
    display: block;
    position: relative;
}


.xsso_experise_content_leftcontentarea {
    display: block;
    position: relative;
}

.xsso_experise_content_leftcontentarea h2 {
    color: #023A3B;
    font-style: normal;
    font-weight: 300;
    line-height: 110%;
    letter-spacing: -0.03em;
    margin-bottom: 0;
}

.xsso_experise_content_rightimagearea {
    display: block;
    position: relative;
}

.xsso_experise_content_rightimagearea img {
    width: 100%;
    border-radius: 0;
}

.pl-96 {
    padding-left: 96px;
}

.xsso_experise_content_rightcontentarea {
    display: block;
    position: relative;
}

.xsso_experise_content_rightcontentarea p {
    color: #161616;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.03em;
}

.our_team_main_title_area {
    display: block;
    position: relative;
}

.our_team_main_title_area h1 {
    color: #FFF;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.03em;
    display: inline-block;
    position: relative;
}

.our_team_main_title_area h2 {
    color: #023A3B;
    font-family: "Brightclones";
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    position: absolute;
    left: 8%;
    bottom: -5%;
}

.our_team_title_description_area {
    display: block;
    position: relative;
}

.our_team_title_description_area p {
    color: #161616;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.03em;
}

.single_team_member_area {
    display: block;
    position: relative;
}

.single_team_member_image_area {
    display: block;
    position: relative;
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(2, 58, 59, 0.20);
}

.single_team_member_image_area img {
    width: 100%;
}

.single_team_member_content_area {
    display: block;
    position: absolute;
    top: 40px;
    left: 40px;
}

.single_team_member_content_area h3 {
    color: #023A3B;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.03em;
}

.single_team_member_content_area span {
    color: #023A3B;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.03em;
}

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

.xsso_collection_bredcrumb_area {
    display: block;
    position: relative;
}

.xsso_collection_bredcrumb_area ul {
    display: flex;
    position: relative;
    margin: 0;
    padding: 0;
}

.xsso_collection_bredcrumb_area ul li {
    color: #1d1d1d;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.03em;
}

.xsso_collection_bredcrumb_area ul li a {
    color: #1d1d1d;
}

.xsso_collection_bredcrumb_area ul li a.active {
    color: #1d1d1d;
    font-weight: 500;
}

.bredcumb-padding {
    padding: 60px 0;
}

/* Collection Filter UI Styles */


.main_collection_filter_area_block {
    background: #fff;
    padding: 22px 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    justify-content: center;
}

.filter_section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.filter_section h6 {
    color: rgba(22, 22, 22, 0.5);
    font-weight: 300;
    margin-bottom: 20px;
}

.filter_items {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.filter_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
}

.filter_icon_wrapper {
    width: 62px;
    height: 80px;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.filter_icon_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.filter_icon_wrapper.rounded {
    border-radius: 12px;
}

.filter_item span {
    color: #161616;
    font-size: 14px;
    font-weight: 300;
    /* Was a hard 62px (the swatch width) with overflow hidden and nowrap,
       so any label longer than the swatch was cut mid-word — 'Solid Color'
       rendered as 'Solid Colo'. The row has a 50px gap, so there is room
       to let labels size to their text and wrap instead of being clipped. */
    max-width: 96px;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
    display: block;
    position: relative;
    text-align: center;
}

/* The marquee existed only to scroll labels that did not fit. They fit
   now, so the mask and the animation are switched off — a permanently
   scrolling label is hard to read and pulls the eye away from the
   swatches. The markup is left alone so collection.php needs no change. */
.filter_item span.marquee {
    mask-image: none;
}

.filter_item span.marquee span {
    display: inline;
    padding-left: 0;
    max-width: none;
    animation: none;
    margin: 0;
    width: auto;
    overflow: visible;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(0);
    }

    80% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.filter_divider {
    width: 1px;
    height: 170px;
    background-color: #DDDDDD;
    margin: 0 50px;
    opacity: 0.5;
}

/* Colors */
.color-soft-sage {
    background-color: #C8D7D2;
    border: none;
}

.color-pale-olive {
    background-color: #C6D8AF;
    border: none;
}

.color-muted-lilac {
    background-color: #DDC9E2;
    border: none;
}

.color-dusty-plum {
    background-color: #8A6691;
    border: none;
}

.more_colors {
    background: #F9F9F9;
    border: 1px dashed #CCC;
    display: flex;
    align-items: center;
    justify-content: center;
}

.more_color_dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.more_color_dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #999;
    display: block;
    margin: 0 !important;
}

.more_color_dots .bottom_row {
    display: flex;
    gap: 4px;
}

/* Responsive */
@media (max-width: 1199px) {
    .main_collection_filter_area_block {
        padding: 30px;
    }

    .filter_items {
        gap: 20px;
    }

    .filter_divider {
        margin: 0 20px;
    }
}

@media (max-width: 991px) {
    .main_collection_filter_area_block {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .filter_divider {
        width: 100%;
        height: 1px;
        margin: 0;
    }

    .filter_items {
        flex-wrap: wrap;
    }
}

/* Color Modal Styles */
.color_modal_trigger {
    cursor: pointer;
}

.xsso_modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.xsso_modal_overlay.active {
    opacity: 1;
    visibility: visible;
}

.xsso_modal_container {
    background: #fff;
    width: 95%;
    max-width: 600px;
    border-radius: 30px;
    padding: 40px;
    position: relative;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.xsso_modal_overlay.active .xsso_modal_container {
    transform: translateY(0);
}

.xsso_modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.xsso_modal_header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    color: #161616;
    letter-spacing: -0.03em;
}

.xsso_modal_close {
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: #999;
    transition: color 0.3s ease;
    line-height: 1;
}

.xsso_modal_close:hover {
    color: #161616;
}

.color_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 15px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
    overscroll-behavior: contain;
}

/* Custom Scrollbar */
.color_grid::-webkit-scrollbar {
    width: 4px;
}

.color_grid::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.color_grid::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}

.color_swatch_item {
    aspect-ratio: 1;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.color_swatch_item:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

@media (max-width: 575px) {
    .xsso_modal_container {
        padding: 30px 20px;
    }

    .color_grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Refined Modal Swatch Styles */
.color_swatch_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.color_swatch_item {
    width: 62px;
    height: 80px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.color_swatch_name {
    font-size: 14px;
    color: #161616;
    font-weight: 300;
    text-align: left;
    width: 62px;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    position: relative;
}

.color_swatch_name.marquee {
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
}

.color_swatch_name.marquee span {
    display: inline-block;
    width: auto;
    overflow: visible;
    animation: marquee 5s linear infinite;
    margin: 0;
}


.color_grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}

/* Product Search Area Styles */
.xsso_laminate_product_search_area {
    padding: 80px 0 100px 0;
}

.xsso_laminate_product_search_area .search_container {
    max-width: 800px;
    margin: 0 auto;
}

.search_form {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
}

.search_input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 36px;
    font-weight: 300;
    color: #666;
    outline: none;
    padding: 0;
    letter-spacing: -0.01em;
}

.search_input::placeholder {
    color: #BBBBBB;
    opacity: 0.8;
}

.search_button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #161616;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.search_button:hover {
    transform: scale(1.1);
}

.search_button svg {
    width: 28px;
    height: 28px;
    stroke-width: 1px;
    color: #161616;
}

@media (max-width: 991px) {
    .search_input {
        font-size: 28px;
    }

    .xsso_laminate_product_search_area {
        padding: 60px 0;
        margin-top: 60px;
    }
}

@media (max-width: 767px) {
    .search_input {
        font-size: 22px;
    }

    .xsso_laminate_product_search_area .search_container {
        padding: 0 20px;
    }
}

.search_container input[type="text"] {
    border: none;
    color: rgba(29, 29, 29, 1);
    font-size: 30px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.03em;
    padding: 0;
}

.search_container input[type="text"]::placeholder {
    color: rgba(29, 29, 29, 0.30);
    font-size: 30px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.03em;
}

.xsso_single_product_details_area {
    display: block;
    position: relative;
}

.xsso_top_single_product_details_area {
    display: flex;
    position: relative;
    justify-content: space-between;
}

.xsso_size_box_area {
    display: block;
    position: relative;
    padding: 6px 18px;
    border: 1px solid #ccc;
}

.xsso_size_box_area h6 {
    color: rgba(22, 22, 22, 0.60);
    font-family: "Azeret Mono";
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: 0.017em;
    margin-bottom: 0;
}

.xsso_bookmark_area {
    display: block;
    position: relative;
}

.xsso_bookmark_area img {
    max-width: 24px;
}

.xsso_single_product_details_area {
    background: #fff;
}

.xsso_main_product_image_area {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.xsso_main_product_image_area img {
    max-width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    display: block;
    width: 100%;
}

.xsso_main_product_image_area:hover img {
    transform: scale(1.1);
}

.xsso_single_product_details_area {
    padding: 20px;
}

.xsso_main_product_details_name {
    display: block;
    position: relative;
}

.xsso_main_product_details_name h3 {
    color: #161616;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-top: 20px;
    margin-bottom: 40px;
}

/* .xsso_main_product_image_area img {
    border-radius: 8px;
    aspect-ratio: 1/1;
} */

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

.xsso_product_details_image_area {
    display: block;
    position: relative;
}

.xsso_product_details_image_area img {
    max-width: 100%;
}

.full_size_view {
    position: absolute;
    background-color: #ffffff00;
    top: 20px;
    right: 20px;
}

.full_size_view a i {
    font-size: 24px;
}

.full_size_view a {
    color: #ffffff;
    font-family: "Azeret Mono";
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: 0.015em;
    display: flex;
    align-items: center;
    padding: 5px 12px;
    gap: 15px;
    border-radius: 2px;
}





/* Common block structure */
.xsso_product_details_content_area,
.xsso_product_details_header,
.xsso_product_details_desc,
.xsso_product_details_more_detail,
.xsso_product_characteristics,
.xsso_product_available_colors_area,
.xsso_product_available_finish_area {
    display: block;
    position: relative;
}

/* Sections with bottom border */
.xsso_product_details_header,
.xsso_product_details_desc,
.xsso_product_details_more_detail,
.xsso_product_characteristics,
.xsso_product_available_colors_area {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ddd;
}

/* Headings */
.xsso_product_details_header h2 {
    color: #161616;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.xsso_product_details_header h6 {
    color: #664C31;
    font-size: 16px;
    font-style: italic;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: 0.18em;
    font-family: "Azeret Mono";
}

/* Labels / section titles */
.xsso_product_details_desc span,
.xsso_product_details_more_detail span,
.xsso_product_characteristics span,
.xsso_product_available_colors_area span,
.xsso_product_available_finish_area span {
    display: block;
    margin-bottom: 20px;
    color: #664C31;
    font-family: "Azeret Mono";
    font-size: 14px;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Body text */
.xsso_product_details_desc p,
.xsso_product_characteristics p,
.all_details_info_area ul li {
    color: #161616;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.03em;
}

/* Lists */
.all_details_info_area ul {
    padding: 0;
    margin: 0;
}

.all_details_info_area ul li {
    margin-bottom: 6px;
}

.all_details_info_area ul li:last-child {
    margin-bottom: 0;
}

/* Utility */
.pl-80 {
    padding-left: 80px;
}

.available_colors_image_area {
    display: flex;
    position: relative;
    gap: 10px;
}

.available_colors_image_area .color-switch-link {
    display: block;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border: 2px solid transparent;
    /* Reserve space for border */
}

.available_colors_image_area .color-switch-link img {
    display: block;
    width: 50px;
    height: 70px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover State */
.available_colors_image_area .color-switch-link:hover {
    transform: translateY(-3px);
}

.available_colors_image_area .color-switch-link:hover img {
    transform: scale(1.1);
    /* Zoom effect */
}

/* Product Detail Buttons Styles */
.xsso_product_details_all_btns_area {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 30px;
}

.xsso_btn_icon_square {
    width: 60px;
    height: 60px;
    border: 1px solid #664C31;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #664C31;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.xsso_btn_icon_square i,
.xsso_btn_icon_square img {
    position: relative;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.xsso_btn_icon_square img {
    width: 24px;
    height: auto;
    object-fit: contain;
    /* Color filter for #664C31 */
    filter: invert(34%) sepia(21%) saturate(1185%) hue-rotate(345deg) brightness(88%) contrast(92%);
}

.xsso_btn_icon_square i {
    font-size: 24px;
}

.xsso_btn_download {
    flex-grow: 1;
    height: 60px;
    background-color: #664C31;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: "Azeret Mono", monospace;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Hover Effects - Minimal */
.xsso_btn_icon_square:hover,
.xsso_btn_download:hover {
    transform: translateY(-2px);
}

/* Hover Effects - Advanced (Slide Fill for Icon Buttons) */
.xsso_btn_icon_square::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #664C31;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.xsso_btn_icon_square:hover::before {
    left: 0;
}

.xsso_btn_icon_square:hover {
    color: #FFFFFF;
    border-color: #664C31;
}

.xsso_btn_icon_square:hover i,
.xsso_btn_icon_square:hover img {
    transform: scale(1.1);
}

.xsso_btn_icon_square:hover img {
    filter: brightness(0) invert(1);
}


/* Hover Effects - Advanced (Shine for Download Button) */
.xsso_btn_download::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

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

.xsso_btn_download:hover {
    letter-spacing: 0.20em;
    background-color: #5d452d;
    box-shadow: 0 10px 20px rgba(102, 76, 49, 0.2);
}

@media (max-width: 575px) {
    .xsso_product_details_all_btns_area {
        gap: 10px;
    }

    .xsso_btn_icon_square {
        width: 50px;
        height: 50px;
    }

    .xsso_btn_download {
        width: 100%;
        flex-grow: 1;
        font-size: 14px;
        letter-spacing: 0.2em;
        height: 50px;
    }
}

.xsso_product_details_all_btns_area i {
    font-size: 20px;
}

/* Product Slideshow Section */
.bg-light-beige {
    background-color: #F8F7F3;
}

.xsso_product_slideshow_section {
    padding: 100px 0 0 0;
    overflow: hidden;
}

.xsso_product_slideshow .item {
    padding: 0 15px;
}

.slideshow_img_wrapper {
    background: #FFFFFF;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s ease;
}

.slideshow_img_wrapper img {
    border-radius: 15px;
    width: 100%;
    height: auto;
    display: block;
}

.xsso_product_slideshow .owl-nav {
    display: block !important;
}

.xsso_product_slideshow .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: #FFFFFF !important;
    border-radius: 50% !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    color: #664C31 !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.xsso_product_slideshow .owl-nav button:hover {
    background: #664C31 !important;
    color: #FFFFFF !important;
}

.xsso_product_slideshow .owl-nav .owl-prev {
    left: 20px;
}

.xsso_product_slideshow .owl-nav .owl-next {
    right: 20px;
}

/* Centering for few items */
.xsso_product_slideshow.centering .owl-stage {
    display: flex;
    justify-content: center;
}

@media (max-width: 991px) {
    .xsso_product_slideshow_section {
        padding: 60px 0;
    }
}

.slideshow_img_wrapper {
    background: #FFFFFF;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s ease;
}

.slideshow_img_wrapper img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    display: block;
}

.xsso_product_slideshow .owl-nav {
    display: block !important;
}

.xsso_product_slideshow .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: #FFFFFF !important;
    border-radius: 50% !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    color: #664C31 !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.xsso_product_slideshow .owl-nav button:hover {
    background: #664C31 !important;
    color: #FFFFFF !important;
}

.xsso_product_slideshow .owl-nav .owl-prev {
    left: 20px;
}

.xsso_product_slideshow .owl-nav .owl-next {
    right: 20px;
}

@media (max-width: 991px) {
    .xsso_product_slideshow_section {
        padding: 60px 0;
    }
}

/* Specific override for centered items when loop is disabled */
.xsso_product_slideshow:not(.owl-loaded) .item,
.xsso_product_slideshow.owl-loaded .owl-item>.item {
    opacity: 1;
    transform: scale(1);
}

/* Centering and Width Control for 1-2 Items */
.xsso_product_slideshow.xsso-fewer-items {
    max-width: 1200px;
    margin: 0 auto;
}

.xsso_product_slideshow.xsso-fewer-items .owl-stage {
    display: flex;
    justify-content: center;
    margin: 0 auto !important;
}

.xsso_product_slideshow.xsso-fewer-items .owl-item {
    max-width: 550px;
}

@media (max-width: 1000px) {
    .xsso_product_slideshow.xsso-fewer-items .owl-item {
        max-width: none;
    }
}

.xsso_product_details_mix_match_header_area {
    display: block;
    position: relative;
}

.xsso_product_details_mix_match_header_area h2 {
    color: #161616;
    font-style: normal;
    font-weight: 300;
    line-height: 110%;
    letter-spacing: -0.03em;
    margin-bottom: 0;
}

.pt-60 {
    padding-top: 60px;
}


.process_animated_image {
    display: block;
    position: relative;
    overflow: hidden;
}

.process_animated_image img {
    width: 100%;
}

.process_animated_image {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.process_animated_image video {
    width: 100%;
    height: auto;
    display: block;
}


/* --- Process Video Styles --- */
.process_animated_image {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.process_animated_image video {
    width: 100%;
    height: auto;
    display: block;
}

.video-controls-group {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    gap: 12px;
    z-index: 5;
}

.video-control-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #1d1d1f;
    /* Apple's dark grey/black for icons */
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

@media (max-width: 767px) {
    .video-controls-group {
        bottom: 20px;
        right: 20px;
        gap: 10px;
    }

    .video-control-btn {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
}

.video-control-btn:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.video-control-btn:active {
    transform: scale(0.94);
}

.video-control-btn i {
    transition: transform 0.3s ease;
}

.main_xsso_home_footage {
    display: block;
    position: relative;
}

.main_xsso_home_footage img {
    max-width: 100%;
}

.xsso_footer_contact_area ul li:last-child {
    margin-bottom: 0;
}

.owl-carousel .owl-stage {
    margin-bottom: 0;
}

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

/* Enhanced Video Controls */
.video-custom-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 20px);
    /* Hidden state: shifted down */
    width: 90%;
    background: rgba(255, 255, 255, 0.15);
    /* Glassmorphism */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 50px;
    /* Pillow shape */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    z-index: 10;
    transition: opacity 0.4s ease, transform 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    /* Hidden by default */
    pointer-events: none;
    /* Prevent clicks when hidden */
}

.video-custom-controls.video-controls-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    /* Visible state: centered and back to position */
    pointer-events: auto;
}

/* Button Groups */
.video-btn-group,
.video-fullscreen-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.video-custom-controls button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    transition: transform 0.2s ease, color 0.2s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-custom-controls button:hover {
    color: #023A3B;
    /* Brand color or accent */
    transform: scale(1.1);
}

#videoTimeDisplay {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    font-family: monospace;
    /* helper for alignment */
    min-width: 80px;
}

/* Timeline */
.video-timeline-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

#videoProgress {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    transition: height 0.2s ease;
}

#videoProgress:hover {
    height: 6px;
}

/* Slider Thumb */
#videoProgress::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#videoProgress::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

#videoProgress::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.footer_copyright_area p {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.03em;
    margin-top: 24px;
}














/* create for Y css D = 12/2 */

/* bookmark page */
.xsso_bookmarkheader_area {
    display: block;
    position: relative;
}

.xsso_bookmarkheader_area h2 {
    color: #161616;
    font-style: normal;
    font-weight: 300;
    line-height: 110%;
    letter-spacing: -0.03em;
    margin-bottom: 0;
}

.xsso_bookmark_share_btn_area {
    display: flex;
    justify-content: flex-end;
}

.xsso_btn_share {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: #161616;
    color: #fff;
    padding: 10px 24px;
    font-size: 12px;
    font-family: "Azeret Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid #161616;
}

.xsso_btn_share:hover {
    background-color: transparent;
    color: #161616;
}

.xsso_btn_share i {
    display: flex;
    align-items: center;
    line-height: 0;
}

.xsso_btn_share i img {
    transition: transform 0.3s ease;
}

.xsso_btn_share:hover i img {
    filter: invert(1);
    /* Invert icon color to match text */
    transform: scale(1.1);
    /* Subtle scale without rotation */
}

.xsso_bookmark_warning_area {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(204, 147, 120, 0.08);
    border: 1px dashed #8D4E30;
    padding: 20px 30px;
    margin-top: 40px;
    border-radius: 10px;
}

.xsso_bookmark_warning_area .icon_box {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8D4E30;
    font-size: 24px;
    flex-shrink: 0;
}

.xsso_bookmark_warning_area .icon_box img {
    width: 100%;
    height: auto;
}

.xsso_bookmark_warning_area p {
    margin: 0;
    color: #8D4E30;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.03em;
}

@media (max-width: 991px) {
    .xsso_btn_share {
        margin-top: 20px;
    }

    .xsso_bookmark_share_btn_area {
        justify-content: flex-start;
    }

}


/* Share Modal Styles */
.xsso_share_modal_content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.xsso_share_modal_content .modal-header {
    padding: 30px 30px 10px 30px;
}

.xsso_share_modal_content .modal-title {
    font-size: 20px;
    font-weight: 300;
    color: #161616;
    font-style: normal;
    line-height: 110%;
    letter-spacing: -0.03em;
}

.xsso_share_modal_content .modal-body {
    padding: 30px;
}

.xsso_share_modal_content .form-control {
    border: none;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 300;
    color: #161616;
    background: transparent;
}

.xsso_share_modal_content .form-control:focus {
    box-shadow: none;
    border-color: #8D4E30;
}

.xsso_share_modal_content .form-control::placeholder {
    color: #bbb;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.1em;
}

.xsso_share_modal_content .xsso_btn_share {
    margin-top: 20px;
    justify-content: center;
}

.xsso_share_modal_content_note {
    color: #8D4E30;
    font-size: 12px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.03em;
}

.xsso_modal_copy_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #161616;
    color: #fff;
    font-weight: 400;
    padding: 10px 24px;
    border: 1px solid #161616;
    cursor: pointer;
    font-size: 12px;
    font-family: "Azeret Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
}

.xsso_modal_copy_btn:hover {
    background-color: transparent;
    color: #161616;
    border: 1px solid #161616;
}

.xsso_modal_copy_btn i {
    transition: transform 0.3s ease;
}

.xsso_modal_copy_btn:hover i {
    transform: scale(1.1);
}

.xsso_single_product_details_area {
    position: relative;
    overflow: hidden;
}

.xsso_bookmark_overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    z-index: 10;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s ease,
        visibility 0.4s;
}

.xsso_bookmark_overlay_content {
    padding: 20px 30px;
}

.xsso_bookmark_overlay.active {
    transform: translateY(0%);
    opacity: 1;
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s ease,
        visibility 0s;
}

.xsso_bookmark_overlay_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.xsso_bookmark_overlay_header span {
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #16161699;
    font-weight: 500;
}

.xsso_bookmark_close_btn {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0;
}

.xsso_bookmark_close_btn:hover {
    color: #161616;
}

.xsso_bookmark_overlay_body {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.xsso_bookmark_swatch {
    position: relative;
    aspect-ratio: 1/1;
    max-width: 38px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    display: block;
}

.xsso_bookmark_swatch:hover,
.xsso_bookmark_swatch.active {
    border-color: #161616;
}

.xsso_bookmark_swatch img {
    max-width: 38px;
    object-fit: cover;
    display: block;
}

.xsso_bookmark_icon_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.xsso_bookmark_swatch:hover .xsso_bookmark_icon_overlay,
.xsso_bookmark_swatch.active .xsso_bookmark_icon_overlay {
    opacity: 1;
}

.xsso_bookmark_icon_overlay .material-symbols-outlined {
    font-size: 18px;
    color: #161616;
}

.xsso_custom_placeholder_input::-webkit-input-placeholder {
    color: #161616 !important;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 400;
    font-family: "Azeret Mono", monospace;
}

.xsso_custom_placeholder_input::-moz-placeholder {
    color: #161616 !important;
    font-size: 14px;
    letter-spacing: 0.05em;
    font-weight: 400;
    font-family: "Azeret Mono", monospace;
    opacity: 0.3;
    text-transform: none !important
}

.xsso_custom_placeholder_input:-ms-input-placeholder {
    color: #161616 !important;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 400;
    font-family: "Azeret Mono", monospace;
    opacity: 0.3;
    text-transform: none !important
}

.xsso_custom_placeholder_input::placeholder {
    color: #161616 !important;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 400;
    font-family: "Azeret Mono", monospace;
    opacity: 0.3;
    text-transform: none !important
}


.xsso_custom_placeholder_input {
    color: #161616 !important;
    font-size: 14px;
    letter-spacing: 0.05em;
    font-weight: 400;
    font-family: "Azeret Mono", monospace;
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 300;
    background: transparent;
}


/* ================================
   Contact Page - Exact Design
================================ */
/* Left Heading */
.xsso_contact_hadding {
    display: flex;
    align-items: center;
    gap: 15px;
}

.xsso_contact_hadding::before {
    content: "";
    width: 5px;
    height: 5px;
    background: #161616;
    display: inline-block;
}

.xsso_contact_hadding span {
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
    color: rgba(22, 22, 22, 0.7);
    font-size: 14px;
}

/* Right Content */
.xsso_contact_content_area {
    padding-left: 40px;
}

/* .xsso_contact_intro {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 32px;
    line-height: 1.4;
    color: #555;
    margin-bottom: 70px;
    font-style: Light;
    line-height: 130%;
    letter-spacing: -4%;
} */

.xsso_contact_intro h3 {
    color: #5A5A5A;
    font-style: normal;
    font-weight: 200;
    line-height: 130%;
    letter-spacing: -0.04em;
}

/* Form */
.xsso_contact_form_area {
    margin-top: 100px;
}

.xsso_contact_form_group {
    margin-bottom: 45px;
}

.xsso_contact_form_control {
    width: 100%;
    background: transparent;
    border: none !important;
    border-bottom: 1px solid #dcdcdc !important;
    padding: 8px 0;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    color: #161616;
    transition: border-color 0.3s ease;
}

.xsso_contact_form_control::placeholder {
    color: #1D1D1D99;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 15%;
}

.xsso_contact_form_control:focus {
    outline: none;
    border-bottom: 1px solid #161616 !important;
}

textarea.xsso_contact_form_control {
    min-height: 120px;
    resize: none;
}


/* Checkbox */
.xsso_contact_checkbox_group {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 0px;
}

.xsso_contact_checkbox_group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 18px;
    height: 18px;
    margin-top: 4px;
    cursor: pointer;

    background-color: transparent;
    border: 1.5px solid #BBBBBB;
    border-radius: 2px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Checked State */
.xsso_contact_checkbox_group input[type="checkbox"]:checked {
    background-color: #000;
    border-color: #000;
}

/* Optional: white tick mark */
.xsso_contact_checkbox_group input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.xsso_contact_checkbox_group p {
    color: rgba(29, 29, 29, 0.6);
    margin: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.02em;
}

/* Submit Button */
.xsso_contact_submit_btn {
    background: #023A3B;
    color: rgba(255, 255, 255, 0.80);
    border: 1px solid #023A3B;
    font-family: "Azeret Mono";
    padding: 18px 46px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
    margin-left: auto;
    line-height: 100%;
    position: relative;
    overflow: hidden;
}

.xsso_contact_submit_btn:hover {
    background: transparent;
    color: #023A3B;
    border: 1px solid #023A3B;
    letter-spacing: 0.22em;
}

.xsso_map_area {
    margin-top: 60px;
}

/* Responsive */
@media (max-width: 991px) {
    .xsso_contact_content_area {
        padding-left: 0;
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .section-padding {
        padding: 80px 0;
    }



    .xsso_contact_submit_btn {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }
}


/* search page */
.xsso_search_area {
    padding: 0px 0 0px 0;
}

.xsso_search_area .search_box_container {
    width: 100%;
    margin: 0 auto;
}

.search_box_form {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
}

.search_box_input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 36px;
    font-weight: 300;
    color: #666;
    outline: none;
    padding: 0;
    letter-spacing: -0.01em;
}

.search_box_input::placeholder {
    color: #BBBBBB;
    opacity: 0.8;
}

.search_box_button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #161616;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.search_box_button:hover {
    transform: scale(1.1);
}

.search_box_button svg {
    width: 28px;
    height: 28px;
    stroke-width: 1px;
    color: #161616;
}

@media (max-width: 991px) {
    .search_box_input {
        font-size: 28px;
    }

    .xsso_search_area {
        padding: 0px 0;
        margin-top: 0px;
    }
}

@media (max-width: 767px) {
    .search_box_input {
        font-size: 22px;
    }

    .xsso_search_area .search_box_container {
        padding: 0 20px;
    }
}

.search_box_container input[type="text"] {
    border: none;
    color: rgba(29, 29, 29, 1);
    font-size: 30px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.03em;
    padding: 0;
}

.search_box_container input[type="text"]::placeholder {
    color: rgba(29, 29, 29, 0.30);
    font-size: 30px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.03em;
}

.xsso_search_results_count {
    display: block;
    position: relative;
    margin-top: 40px;
}

.xsso_search_results_count span {
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.15em;
    color: rgba(22, 22, 22, 0.70);
}


.xsso_search_product_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    color: #fff;
    padding-bottom: 30px;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid #CCCCCC;
}

/* Left Image */
.xsso_search_product_left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    color: #fff;
    /* padding: 20px; */
    gap: 20px;
    flex-wrap: wrap;
}

.xsso_search_product_img img {
    max-width: 45px;
    max-height: 60px;
    object-fit: cover;
}

.xsso_search_product_details h6 {
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #161616;
}

.xsso_search_product_details p {
    color: #838280;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.02em;
    margin-top: 5px;
    margin-bottom: 0;

}

/* Middle Content */
.xsso_search_product_middle {
    display: block;
    position: relative;
}

.xsso_search_product_attributes {
    display: flex;
    gap: 50px;
    /* margin-top: 10px; */
    flex-wrap: wrap;
}

.xsso_search_product_attributes span {
    color: #838280;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.02em;
}

/* Right Button */
.xsso_search_product_right {
    text-align: right;
}

.xsso_search_product_view_btn {
    padding: 14px 20px;
    background: #1f1f1f;
    color: rgba(255, 255, 255, 0.8);
    font-family: "Azeret Mono";
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid #1f1f1f;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.xsso_search_product_view_btn i {
    display: inline-flex;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.xsso_search_product_view_btn:hover {
    background: transparent;
    color: #1f1f1f;
    border: 1px solid #1f1f1f;
}

.xsso_search_product_view_btn:hover i {
    transform: translateX(4px);
}

.xsso_search_product_view_btn:hover i img {
    filter: invert(1);
}

/* ✅ Responsive */
@media (max-width: 768px) {

    .xsso_search_product_card {
        flex-direction: column;
        align-items: flex-start;
    }

    .xsso_search_product_right {
        width: 100%;
        text-align: left;
        margin-top: 15px;
    }

    .xsso_search_product_attributes {
        gap: 45px;
    }

    .xsso_search_product_view_btn {
        width: 100%;
        text-align: center;
    }
}

.xsso_contact_form_group input[type="password"],
.xsso_contact_form_group input[type="email"],
.xsso_contact_form_group input[type="text"],
.xsso_contact_form_group input[type="file"],
.xsso_contact_form_group textarea {
    color: #1d1d1d;
    max-width: 100%;
    letter-spacing: 0;
    font-size: 14px;
    margin-bottom: 12px;
    padding: 12px 0 12px 12px;
    height: auto;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-style: solid;
    display: block;
    width: 100%;
    line-height: 1.5em;
    font-weight: 400;

}

.xsso_contact_form_group input[type="password"]::placeholder,
.xsso_contact_form_group input[type="email"]::placeholder,
.xsso_contact_form_group input[type="text"]::placeholder,
.xsso_contact_form_group input[type="file"]::placeholder,
.xsso_contact_form_group textarea::placeholder {
    color: rgba(29, 29, 29, 0.40);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.15em;
}

.pl-100 {
    padding-left: 100px;
}


.main_xsso_home_footage {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.main_xsso_home_footage video {
    width: 100%;
    height: auto;
    display: block;
}

/* Way of Living Section Animations */
.xsso_way_of_living_section {
    position: relative;
    overflow: hidden;
    /* Height handled by content or min-height */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xsso_way_of_living_bg_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.xsso_wol_bg_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    /* smooth fallback */
}

.xsso_wol_bg_image.active {
    opacity: 1;
}

.container_way_of_living {
    position: relative;
    z-index: 5;
    /* Above BG */
    width: 100%;
}

/* Cutout "window" mask: painted above the card, clipped via JS (clip-path) to
   exactly the cutout box's rect, so only that rectangle of the background is visible. */
.xsso_way_of_living_bg_wrapper_mask {
    z-index: 6;
    /* Above the card (5) */
    pointer-events: none;
    clip-path: inset(50% 50% 50% 50%);
    /* Hidden by default until JS measures and sets the real rect */
}

/* Way of Living Cutout Styles */
.xsso_wayofliving_cutout {
    position: relative;
    overflow: hidden;
    /* Ensure existing dimensions are respected */
}

/* Re-use wrapper styles but scoped if needed, or rely on general class */
.xsso_wayofliving_cutout .xsso_way_of_living_bg_wrapper {
    z-index: 0;
    /* Behind setup inside cutout */
}

.xsso_wayofliving_cutout .xsso_wol_bg_image {
    /* Ensure it covers the cutout area */
    /* background-size: cover;
    background-position: center; */
}

.collection_slide_image {
    display: block;
    position: relative;
    height: 100%;
}

.collection_slide_image img {
    width: auto;
    height: 650px;
    object-fit: contain;
}

@media (max-width: 991px) {
    .collection_slide_image img {
        height: 500px;
    }
}

@media (max-width: 767px) {
    .collection_slide_image img {
        height: 400px;
    }
}

.xsso_infra_image_header_area {
    margin-bottom: 50px;
}

.xsso_infra_header_content_area {
    display: block;
    position: relative;
}

.xsso_infra_header_content_area h2 {
    color: #023A3B;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin-bottom: 0px;
}

.xsso_infra_custom_nav {
    gap: 15px;
}

.xsso_custom_nav_btn {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #fff;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.xsso_custom_nav_btn:hover {
    transform: scale(1.05);
}

.xsso_custom_nav_btn img {
    width: 60px;
    transition: all 0.3s ease;
    border: 1px solid #ddd;
    border-radius: 50px;
}

@media (max-width: 767px) {
    .xsso_infra_image_header_area {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 30px;
        margin-bottom: 50px;
    }
}

.xsso_infra_process_image_area {
    display: block;
    position: relative;
}

.xsso_infra_process_image_area img {
    max-width: 100%;
}

.xsso_infra_process_content_area {
    display: block;
    position: relative;
}

.xsso_infra_process_content_area h3 {
    color: #161616;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.03em;
    margin-bottom: 40px;
}

.xsso_infra_process_content_span {
    font-weight: 400;
}

.xsso_infra_process_content_area p {
    color: #161616;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.02em;
}

.xssoinfra_process_image {
    display: block;
    position: relative;
}

.xssoinfra_process_image img {
    max-width: 100%;
}



.xsso_certificate_single_area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background-color: #fff;
    padding: 25px;
    min-height: 520px;
}

.xsso_top_header_area {
    display: block;
    position: relative;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px dotted #ccc;
}

.xsso_top_header_area::before,
.xsso_top_header_area::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: #F0EEE9;
    border-radius: 50%;
    bottom: -10px;
    z-index: 2;
}

.xsso_top_header_area::before {
    left: -40px;
}

.xsso_top_header_area::after {
    right: -40px;
}

.xsso_top_header_area img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
}

.xsso_top_header_area p {
    color: #161616;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.02em;
}

.xsso_bottom_desc_area {
    display: block;
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.xsso_certificate_name {
    color: #161616;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.xsso_bottom_desc_area span {
    color: #161616;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.xsso_bottom_desc_area p {
    color: #5A5A5A;
    font-style: normal;
    font-weight: 300;
    line-height: 160%;
    letter-spacing: -0.01em;
    margin-top: 0;
}

.xsso_bottom_desc_area p+p {
    margin-top: 14px;
}

.xsso_certificate_area {
    padding: 16px 0;
    background: #023A3B;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0.15em;
    text-align: center;
    margin-top: 30px;
    transition: background-color 0.3s ease;
}

.xsso_certificate_area:hover {
    background: #012425;
}

.xsso_certificate_area a {
    display: block;
    text-align: center;
    color: #EEF5E5;
    text-decoration: none;
    font-family: "Azeret Mono", monospace;
}

.career_all_available_job_header_area {
    display: block;
    position: relative;
}

.career_all_available_job_header_area h2 {
    color: #161616;
    text-align: center;
    font-style: normal;
    font-weight: 200;
    line-height: 120%;
    letter-spacing: -0.04em;
}

.career_search_box {
    background: #fff;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.03);
}

.career_search_box img {
    width: 25px;
    margin-right: 15px;
    height: 25px;
}

.career_search_box input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 18px;
    color: #1c1c1c;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

.career_search_box input::placeholder {
    color: #86868B;
    font-size: 18px;
    font-weight: 200;
}

.career_search_connector_line {
    width: 180px;
    height: 4px;
    background-color: #ffffff;
    margin: 0 auto;
}

.career_all_available_jobs_content {
    display: block;
    position: relative;
    background-color: #fff;
    padding: 35px;
}

.career_single_job_position_area {
    display: block;
    position: relative;
}

.career_single_job_position_area h3 {
    color: #161616;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}

.career_single_full_box_area {
    display: flex;
    position: relative;
    justify-content: space-between;
    border-bottom: 1px dashed #ddd;
    margin-bottom: 25px;
    padding-bottom: 25px;
}

.career_single_full_box_area:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.career_single_icon_text_area {
    display: flex;
    position: relative;
    gap: 12px;
    align-items: center;
}

.career_single_icon_text_area img {
    width: 20px;
}

.career_single_icon_text_area p {
    color: #5A5A5A;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.02em;
    margin: 0;
}

.career_single_icon_text_area:not(:last-child) {
    padding-right: 24px;
    border-right: 1.5px solid #E2E2E2;
}

.career_single_job_more_details_area {
    display: flex;
    position: relative;
    gap: 24px;
    align-items: center;
}

.career_single_job_apply_btn_area {
    padding: 16px 40px;
    background: #023A3B;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0.15em;
    text-align: center;
    transition: background-color 0.3s ease;
    height: max-content;
}

.career_single_job_apply_btn_area a {
    display: block;
    text-align: center;
    color: #EEF5E5;
    text-decoration: none;
    font-family: "Azeret Mono", monospace;
    line-height: 100%;
}


/* Premium Pagination Styling */
.xsso-pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    width: 100%;
}

.xsso-pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;
}

.xsso-pagination li a,
.xsso-pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #EAEAEA;
    color: #161616;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #FFF;
}

.xsso-pagination li a:hover {
    border-color: #023A3B;
    color: #023A3B;
    background: rgba(2, 58, 59, 0.05);
    transform: translateY(-2px);
}

.xsso-pagination li.active span {
    background: #023A3B;
    color: #FFF;
    border-color: #023A3B;
    font-weight: 600;
}

.xsso-pagination li.disabled span {
    color: #CCC;
    border-color: #EAEAEA;
    background: #F9F9F9;
    cursor: not-allowed;
}



.xsso_career_single_details_area {
    display: flex;
    position: relative;
    justify-content: space-between;
}

.career_single_job_position_area {
    display: block;
    position: relative;
}

.career_single_job_position_area h2 {
    color: #161616;
    font-style: normal;
    font-weight: 300;
    line-height: 110%;
    letter-spacing: -4%;
    margin-bottom: 12px;
}

.xsso_job_description_main_area {
    display: block;
    position: relative;
    margin-top: 60px;
}

.xsso_job_description_content_area {
    display: block;
    position: relative;
}

.xsso_job_description_content_area h3 {
    color: #161616;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.03em;
    margin-top: 50px;
    margin-bottom: 12px;
}

.xsso_job_description_content_area p {
    font-weight: 300;
    font-style: normal;
    line-height: 130%;
    letter-spacing: -2%;
    color: #5A5A5A;
}

.xsso_job_description_content_area h4 {
    font-weight: 400;
    font-size: 20px;
    font-style: normal;
    line-height: 130%;
    letter-spacing: -2%;
    color: #161616;
    margin-bottom: 10px;
    margin-top: 40px;
}

.xsso_job_description_content_area ul li {
    font-weight: 300;
    font-style: normal;
    line-height: 150%;
    letter-spacing: -2%;
    list-style-type: disc;
    color: #5A5A5A;
}

/* ====================================
   Career Details Page - Apply Form Card Design
================================================ */
.xsso_career_apply_card {
    background-color: #FFFFFF;
    padding: 60px;
}

.xsso_career_apply_heading h2 {
    font-weight: 300;
    font-style: normal;
    line-height: 110%;
    letter-spacing: -4%;
    color: #161616;
}

.xsso_career_apply_form_area {
    padding-left: 0;
}

.xsso_career_form_group {
    margin-bottom: 35px;
    position: relative;
}

.xsso_career_form_control {
    width: 100%;
    background: transparent;
    border: none !important;
    border-bottom: 1px solid #DDDDDD !important;
    padding: 12px 10px !important;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 15%;
    color: #161616;
    transition: border-color 0.3s ease;
}

.xsso_career_form_control::placeholder {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 15%;
    text-transform: uppercase;
    color: #1D1D1D99;
}

.xsso_career_form_control:focus {
    outline: none;
    border-bottom: 1px solid #161616 !important;
}

textarea.xsso_career_form_control {
    min-height: 100px;
    resize: none;
}

/* File Upload Field */
.xsso_career_file_group {
    border-bottom: 1px solid #DCDCDC;
    padding-bottom: 12px;
}

.xsso_career_file_label {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 15%;
    color: #1D1D1D99;
    cursor: pointer;
    display: block;
    margin-bottom: 0;
    text-transform: uppercase;
    transition: color 0.3s ease;
    padding: 10px;
}

/* Checkbox Style */
.xsso_career_checkbox_group {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.xsso_career_checkbox_group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    background-color: transparent;
    border: 2px solid #DDDDDD;
    border-radius: 2px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.xsso_career_checkbox_group input[type="checkbox"]:checked {
    background-color: #023A3B;
    border-color: #023A3B;
}

.xsso_career_checkbox_group input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.xsso_career_checkbox_group p {
    font-weight: 400;
    font-style: normal;
    line-height: 130%;
    letter-spacing: -2%;
    color: #1D1D1D99;
}

/* Submit Button */
.xsso_career_submit_btn {
    background: #023A3B;
    color: #FFFFFF;
    border: 1px solid #023A3B;
    padding: 16px 47px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
    margin-left: auto;
    line-height: 100%;
    font-family: "Azeret Mono";
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 17%;
    text-transform: uppercase;
}

.xsso_career_submit_btn:hover {
    background: transparent;
    color: #023A3B;
    border: 1px solid #023A3B;
}

/* Form Validation Styles */
.xsso_career_form_control.is-invalid {
    border-bottom: 1px solid #d9534f !important;
}

.xsso_career_form_control.is-invalid::placeholder {
    color: #d9534f !important;
}

.xsso_career_file_group.is-invalid {
    border-bottom: 1px solid #d9534f !important;
}

.xsso_career_file_group.is-invalid .xsso_career_file_label {
    color: #d9534f !important;
}

.xsso_career_checkbox_group.is-invalid input[type="checkbox"] {
    border-color: #d9534f !important;
}

.xsso_career_checkbox_group.is-invalid p {
    color: #d9534f !important;
}

/* Contact Form Validation Styles */
.xsso_contact_form_control.is-invalid {
    border-bottom: 1px solid #d9534f !important;
}

.xsso_contact_form_control.is-invalid::placeholder {
    color: #d9534f !important;
}

.xsso_contact_checkbox_group.is-invalid input[type="checkbox"] {
    border-color: #d9534f !important;
}

.xsso_contact_checkbox_group.is-invalid p {
    color: #d9534f !important;
}



/* download page */
.xsso_download_single_area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    padding: 25px;
    height: 100%;
}

.xsso_download_top_header_area {
    display: block;
    position: relative;
    padding-bottom: 32px;
    margin-bottom: 25px;
    border-bottom: 1px dotted #ccc;
}

.xsso_download_top_header_area::before,
.xsso_download_top_header_area::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: #F0EEE9;
    border-radius: 50%;
    bottom: -12px;
    z-index: 2;
}

.xsso_download_top_header_area::before {
    left: -37px;
}

.xsso_download_top_header_area::after {
    right: -37px;
}

.xsso_download_top_header_area img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.xsso_download_top_header_area p {
    color: #161616;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.02em;
}

.xsso_download_bottom_desc_area {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: flex-start;
}

.xsso_download_bottom_desc_area span {
    color: #161616;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-bottom: 40px;
    display: block;
}

.xsso_download_bottom_desc_area p {
    color: #5A5A5A;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.01em;
    margin-top: 0;
}

.xsso_download_area {
    padding: 16px 0;
    background: #161616;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0.15em;
    text-align: center;
    margin-top: auto;
    transition: background-color 0.3s ease;
}

.xsso_download_area:hover {
    background: #012425;
}

.xsso_download_area a {
    display: block;
    text-align: center;
    color: #EEF5E5;
    text-decoration: none;
    font-family: "Azeret Mono", monospace;
}

.career_hero_header_area {
    display: block;
    position: relative;
}

.career_hero_header_area img {
    max-width: 100%;
}

/* =====================================================================
   Download request modal
   ---------------------------------------------------------------------
   Matches the site's form idiom rather than Bootstrap's: no boxes, no
   rounded corners, just a hairline underline that darkens on focus —
   the same treatment as the contact and career forms.
   Scoped to this modal so the bookmark modals keep their own styling.
   ===================================================================== */

#xssoDownloadRequestModal .modal-body {
    padding: 10px 30px 30px 30px;
}

/* The file being requested, called out above the fields so it is obvious
   what is about to be sent. */
#xssoDownloadRequestModal .dr_file_label {
    font-family: "Azeret Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1D1D1D99;
    margin-bottom: 4px;
}

#xssoDownloadRequestModal .dr_file_name {
    font-size: 17px;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: #161616;
    padding-bottom: 22px;
    margin-bottom: 26px;
    border-bottom: 1px solid #ededed;
}

#xssoDownloadRequestModal .dr_field {
    margin-bottom: 24px;
}

/* Underline-only inputs, matching .xsso_contact_form_control. !important
   is needed to beat Bootstrap's .form-control, which is still on these
   elements for its layout defaults. */
#xssoDownloadRequestModal .dr_input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #dcdcdc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    color: #161616;
    transition: border-color 0.3s ease;
}

#xssoDownloadRequestModal .dr_input::placeholder {
    color: #1D1D1D99;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#xssoDownloadRequestModal .dr_input:focus {
    outline: none;
    border-bottom-color: #023A3B !important;
}

/* A native select still paints its own chevron and inner padding, so it
   is reset and given the site's own arrow to sit level with the inputs. */
#xssoDownloadRequestModal select.dr_input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 24px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23161616' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 2px center !important;
}

/* Placeholder option reads muted; real choices read as entered values. */
#xssoDownloadRequestModal select.dr_input:invalid,
#xssoDownloadRequestModal select.dr_input option[value=""] {
    color: #1D1D1D99;
}

/* Country slides in when "Outside India" is chosen instead of appearing
   abruptly and shifting the button down. */
#xssoDownloadRequestModal .dr_country {
    overflow: hidden;
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s ease, margin-bottom .35s ease;
}

#xssoDownloadRequestModal .dr_country.is-open {
    max-height: 80px;
    margin-bottom: 24px;
    opacity: 1;
}

#xssoDownloadRequestModal .dr_note {
    color: #1D1D1D99;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: -0.01em;
    margin: 4px 0 26px 0;
}

/* Primary form action, so it takes the green CTA used by the contact
   form rather than the black utility button of the bookmark modals. */
#xssoDownloadRequestModal .dr_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background-color: #023A3B;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid #023A3B;
    border-radius: 0;
    padding: 16px 28px;
    font-family: "Azeret Mono", monospace;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 100%;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#xssoDownloadRequestModal .dr_submit:hover:not(:disabled) {
    background-color: transparent;
    color: #023A3B;
}

#xssoDownloadRequestModal .dr_submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

#xssoDownloadRequestModal .dr_status {
    display: none;
    margin-top: 18px;
    font-size: 13px;
    line-height: 145%;
    letter-spacing: -0.01em;
}

#xssoDownloadRequestModal .dr_status.is-error {
    color: #A5342A;
}

#xssoDownloadRequestModal .dr_status.is-success {
    color: #023A3B;
}

/* Flag the offending field rather than only naming it in the message. */
#xssoDownloadRequestModal .dr_input.is-invalid {
    border-bottom-color: #A5342A !important;
}

@media (max-width: 575px) {
    #xssoDownloadRequestModal .modal-body {
        padding: 10px 20px 24px 20px;
    }

    #xssoDownloadRequestModal .dr_field {
        margin-bottom: 20px;
    }
}

/* On short viewports the form is taller than the screen, and a centred
   Bootstrap dialog simply clips — the note and submit button fell outside
   the card with no way to reach them. Cap the card to the viewport and let
   the body scroll inside it instead. */
#xssoDownloadRequestModal .modal-dialog {
    max-height: calc(100vh - 32px);
}

#xssoDownloadRequestModal .modal-content {
    max-height: calc(100vh - 32px);
    overflow: hidden;
}

/* .modal-content is a flex column. A flex child will not shrink below
   its content height unless min-height is cleared, so without this the body
   grew past the capped card and was simply clipped by overflow:hidden —
   taking the submit button with it once the Country field opened. */
#xssoDownloadRequestModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#xssoDownloadRequestModal .modal-header {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
   Bootstrap modal stacking
   ---------------------------------------------------------------------
   The footer carries z-index: 9999 and this site's own overlay uses
   99999, but Bootstrap ships modals at 1055 — so any modal opened on a
   page tall enough to reach the footer was painted over by it. The
   submit button was not merely hidden, it was unclickable, because the
   footer sat on top of the hit area.

   Raised to sit just under .xsso_modal_overlay (99999), leaving the
   preloader (999999) above everything as before. Applied to all modals
   rather than only the download one, since the bookmark modals on
   bookmark.php sit in exactly the same trap. */
.modal-backdrop {
    z-index: 99990;
}

.modal {
    z-index: 99995;
}

/* ---------------------------------------------------------------------
   Intro video (replaces the still image in .xsso_image_wrapper)
   ---------------------------------------------------------------------
   An <img> sizes itself from its intrinsic dimensions; a <video> falls
   back to 300x150 unless told otherwise, so it needs explicit sizing to
   occupy the same box the image did.
   aspect-ratio keeps the frame reserved at the poster's proportions, so
   the layout does not jump between the poster loading and the first
   video frame — and object-fit covers the box if the mp4's own ratio
   differs slightly from the poster's. */
.xsso_intro_video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 692 / 880;
    object-fit: cover;
    /* The overlay text sits above this; keep the video in the same
       stacking flow the image occupied. */
    position: relative;
    z-index: 1;
}

/* The <img> inside <video> is the no-playback fallback. It only paints in
   browsers that cannot render the source at all. */
.xsso_intro_video img {
    display: block;
    width: 100%;
    height: auto;
}

/* Older browsers without aspect-ratio support still get a sane box rather
   than the 300x150 default. */
@supports not (aspect-ratio: 1 / 1) {
    .xsso_intro_video {
        height: 0;
        padding-bottom: 127.17%;
        /* 880 / 692 */
    }
}

/* Motto video (about page) — replaces the still image.
   Same reasoning as .xsso_intro_video: a <video> defaults to 300x150, so
   it needs explicit sizing to fill the box the image occupied. This one
   is landscape (1780x820) rather than portrait. */
.xsso_motto_video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1780 / 820;
    object-fit: cover;
}

.xsso_motto_video img {
    display: block;
    width: 100%;
    height: auto;
}

@supports not (aspect-ratio: 1 / 1) {
    .xsso_motto_video {
        height: 0;
        padding-bottom: 46.07%;
        /* 820 / 1780 */
    }
}

/* =====================================================================
   Share panel (product pages)
   Desktop fallback for browsers with no native share sheet.
   ===================================================================== */

#xssoShareModal .modal-body {
    padding: 10px 30px 30px 30px;
}

#xssoShareModal .sh_preview_label {
    font-family: "Azeret Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1D1D1D99;
    margin-bottom: 4px;
}

#xssoShareModal .sh_preview_name {
    font-size: 17px;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: #161616;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid #ededed;
}

/* Four across on desktop, two on the narrowest screens. auto-fit keeps the
   row balanced if targets are ever added or removed. */
#xssoShareModal .sh_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 8px;
    margin-bottom: 26px;
}

#xssoShareModal .sh_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #161616;
    padding: 6px 2px;
    border-radius: 8px;
    transition: background-color .2s ease, transform .2s ease;
}

#xssoShareModal .sh_item:hover {
    background: #f6f6f4;
    transform: translateY(-2px);
}

#xssoShareModal .sh_icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #fff;
    /* Brand colours, so each target is recognisable at a glance rather than
       a row of identical grey circles. */
}

#xssoShareModal .sh_wa  { background: #25D366; }
#xssoShareModal .sh_em  { background: #6B6B6B; }
#xssoShareModal .sh_sms { background: #34C759; }
#xssoShareModal .sh_tg  { background: #229ED9; }
#xssoShareModal .sh_fb  { background: #1877F2; }
#xssoShareModal .sh_x   { background: #000000; }
#xssoShareModal .sh_li  { background: #0A66C2; }
#xssoShareModal .sh_pin { background: #E60023; }

#xssoShareModal .sh_label {
    font-size: 11.5px;
    font-weight: 300;
    letter-spacing: -0.01em;
    text-align: center;
    color: #1D1D1DCC;
}

#xssoShareModal .sh_link_row {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid #e3e3e0;
    border-radius: 0;
    overflow: hidden;
}

#xssoShareModal .sh_link_input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: #fafaf8;
    padding: 12px 14px;
    font-size: 13px;
    color: #1D1D1DCC;
    font-family: "Roboto", sans-serif;
    /* Long product URLs would otherwise stretch the modal. */
    text-overflow: ellipsis;
}

#xssoShareModal .sh_link_input:focus {
    outline: none;
    background: #fff;
}

#xssoShareModal .sh_copy_btn {
    flex: 0 0 auto;
    border: none;
    background: #023A3B;
    color: #fff;
    padding: 12px 20px;
    font-family: "Azeret Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .3s ease;
    white-space: nowrap;
}

#xssoShareModal .sh_copy_btn:hover {
    background: #012526;
}

#xssoShareModal .sh_status {
    display: none;
    margin-top: 14px;
    font-size: 13px;
    letter-spacing: -0.01em;
}

#xssoShareModal .sh_status.is-success { color: #023A3B; }
#xssoShareModal .sh_status.is-error   { color: #A5342A; }

@media (max-width: 480px) {
    #xssoShareModal .modal-body { padding: 10px 20px 24px 20px; }
    #xssoShareModal .sh_grid { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================================
   Search results — grouped cards, pager, states, autocomplete
   ===================================================================== */

/* Shades belonging to one product, listed under its name so a decor with
   several colourways is one result rather than several. */
.xs_shades {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.xs_shade,
.xs_shade_more {
    font-family: "Azeret Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border: 1px solid #E4E1D8;
    color: #4A463D;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.xs_shade:hover {
    border-color: #023A3B;
    color: #023A3B;
    background: #F7F9F8;
}

.xs_shade_more {
    border-style: dashed;
    color: #857F72;
}

.xsso_search_results_count .xs_fuzzy_note {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: 12.5px;
    letter-spacing: -0.01em;
    color: #8D4E30;
    text-transform: none;
}

/* ---- empty / short / no-match ---------------------------------------- */

.xs_state {
    text-align: center;
    padding: 64px 20px;
}

.xs_state h4 {
    font-size: 21px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #161616;
    margin: 0 0 10px;
}

.xs_state p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #6E6759;
    margin: 0 auto 8px;
    max-width: 46ch;
}

.xs_state .xs_did {
    font-size: 15px;
    color: #161616;
    margin-bottom: 18px;
}

.xs_state .xs_did a {
    color: #023A3B;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.xs_state_links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.xs_state_links a {
    font-family: "Azeret Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 11px 20px;
    border: 1px solid #023A3B;
    color: #023A3B;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease;
}

.xs_state_links a:hover {
    background: #023A3B;
    color: #fff;
}

/* ---- pagination ------------------------------------------------------ */

.xs_pager {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 48px;
}

.xs_pager a {
    font-family: "Azeret Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    min-width: 38px;
    padding: 10px 12px;
    text-align: center;
    border: 1px solid #E4E1D8;
    color: #4A463D;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.xs_pager a:hover {
    border-color: #023A3B;
    color: #023A3B;
}

.xs_pager a.is-current {
    background: #023A3B;
    border-color: #023A3B;
    color: #fff;
    pointer-events: none;
}

.xs_pager .xs_gap {
    color: #A9A396;
    padding: 0 2px;
}

/* ---- autocomplete ---------------------------------------------------- */

/* The autocomplete panel is anchored to this wrapper, which is inserted
   around the input at runtime. Both search forms are flex rows, so the
   wrapper has to take over the sizing the input used to do itself —
   without this it collapses to the width of the typed text and drags the
   submit button in with it, instead of the button sitting at the far end
   of the rule. min-width:0 lets it shrink rather than overflow. */
.xs_ac_wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.xs_ac_wrap > input {
    width: 100%;
}

.xs_ac {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid #E4E1D8;
    box-shadow: 0 12px 34px rgba(22, 22, 22, .10);
    /* Above the footer, which carries z-index 9999. */
    z-index: 10050;
    max-height: 380px;
    overflow-y: auto;
    /* Stop the scroll continuing into the page once the list hits its end —
       otherwise reaching the bottom of the suggestions jumps the page. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: none;
}

.xs_ac.is-open {
    display: block;
}

.xs_ac_item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    text-decoration: none;
    color: #161616;
    border-bottom: 1px solid #F2F0EA;
    cursor: pointer;
    transition: background-color .15s ease;
}

.xs_ac_item:last-child {
    border-bottom: none;
}

.xs_ac_item:hover,
.xs_ac_item.is-active {
    background: #F7F6F1;
}

/* The material itself, not a placeholder box. */
.xs_ac_thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    object-fit: cover;
    background: #EFEBDD;
    display: block;
}

.xs_ac_thumb.is-empty {
    background: linear-gradient(135deg, #EFEBDD 0%, #E2DCCB 100%);
}

.xs_ac_text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xs_ac_label {
    font-size: 14.5px;
    line-height: 1.25;
    color: #161616;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xs_ac_label b {
    font-weight: 600;
    color: #023A3B;
}

/* Where the match came from — the product it belongs to, or the kind of
   attribute — kept quiet so the name stays the thing you read. */
.xs_ac_sub {
    font-size: 11.5px;
    line-height: 1.2;
    color: #A09A8C;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Type marker as a small word, no box — the border around it was what
   made the old row read as a missing image. */
.xs_ac_tag {
    flex: 0 0 auto;
    font-family: "Azeret Mono", monospace;
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #B5AFA1;
}

.xs_ac_tag--code    { color: #023A3B; }
.xs_ac_tag--surface { color: #8D4E30; }
.xs_ac_tag--decor   { color: #664C31; }

@media (max-width: 767px) {
    .xs_ac_tag { display: none; }
    .xs_state { padding: 44px 14px; }
}

/* Grouped search results.
   .xsso_search_product_card carries padding-bottom and a border-bottom but
   no top padding — the original markup spaced cards with an mt-30 class on
   every card after the first, which the grouped rewrite no longer emits.
   Padding rather than margin, so the space sits inside the card and the
   rule stays hard against the row below it. */
.xsso_search_product_card.xs_grouped {
    padding-top: 30px;
    align-items: flex-start;
}

/* The shade chips add a third line to the left column, so centring the
   columns against each other left the attributes and button floating.
   Aligning to the top keeps the product name, its attributes and the
   button on one baseline. */
.xs_grouped .xsso_search_product_middle,
.xs_grouped .xsso_search_product_right {
    padding-top: 2px;
}

/* =====================================================================
   Bookmarks — count badge and confirmation
   ===================================================================== */

.xsso_bm_badge {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #023A3B;
    color: #fff;
    font-family: "Azeret Mono", monospace;
    font-size: 9.5px;
    line-height: 17px;
    text-align: center;
    letter-spacing: 0;
    pointer-events: none;
}

/* Brief confirmation that a bookmark landed. Bottom-left so it never
   covers the header icon the visitor just looked at, and above the
   footer's z-index so it is not painted over. */
.xsso_bm_toast {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 100000;
    background: #161616;
    color: #fff;
    font-family: "Azeret Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 13px 20px;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}

.xsso_bm_toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .xsso_bm_toast {
        transition: opacity .01ms;
        transform: none;
    }
}

@media (max-width: 575px) {
    .xsso_bm_toast {
        left: 14px;
        right: 14px;
        bottom: 14px;
        text-align: center;
    }
}

/* Bookmark page: saved count and Clear all */
.xsso_bookmark_count {
    margin: 8px 0 0;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    color: #857F72;
}

.xsso_bookmark_count span {
    font-family: "Azeret Mono", monospace;
    font-size: 12.5px;
    color: #161616;
}

/* Destructive, so it reads quieter than Share until you reach for it. */
.xsso_btn_clear {
    margin-left: 10px;
    opacity: .72;
    transition: opacity .2s ease, color .2s ease;
}

.xsso_btn_clear:hover {
    opacity: 1;
    color: #A5342A;
}

/* --------------------------------------------------------------------
   Bookmark controls are buttons, not links

   They were anchors carrying href="javascript:void(0);" or the raw
   endpoint URL, which the browser prints in the status bar on hover —
   distracting, and none of them ever navigated.

   The reset sits inside :where() so it has zero specificity. That matters:
   .xsso_btn_icon_square and .xsso_bookmark_swatch both set their own
   border, and a plain button.class selector would outrank them and strip
   it. This way the browser's button chrome is cleared and every existing
   rule still wins.
   -------------------------------------------------------------------- */
:where(button.xsso_bookmark_swatch,
       button.bookmark-icon-btn,
       button.xsso_btn_icon_square,
       button.xsso_bm_remove,
       button.nav-link.dropdown-toggle) {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

/* The anchors these replaced were inline-level with no line box of their own. */
:where(button.bookmark-icon-btn, button.xsso_bm_remove) {
    display: inline-block;
    line-height: 0;
}

/* Shared list shows a bookmark icon that is decoration, not a control. */
.xsso_bm_static {
    display: inline-block;
    line-height: 0;
}

/* --------------------------------------------------------------------
   reCAPTCHA widget

   Google's iframe is a fixed 304x78 and cannot be restyled, so the work
   here is making it sit correctly in forms it was never designed for:
   room above it, and a scale-down on narrow screens where 304px would
   otherwise push the form sideways.
   -------------------------------------------------------------------- */
.xsso_recaptcha_field {
    margin: 24px 0 4px;
}

.xsso_recaptcha_field.xsso_recaptcha_right {
    display: flex;
    justify-content: flex-end;
}

.xsso_recaptcha_error {
    margin: 8px 0 0;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: #C0392B;
}

.xsso_recaptcha_right .xsso_recaptcha_error {
    text-align: right;
}

/* The widget is 304px wide and will not shrink. Below roughly 360px of
   form width it has to be scaled, or it overflows the page. */
@media screen and (max-width: 400px) {
    .xsso_recaptcha {
        transform: scale(0.85);
        transform-origin: left top;
    }

    .xsso_recaptcha_right .xsso_recaptcha {
        transform-origin: right top;
    }

    .xsso_recaptcha_field {
        /* scale() does not change layout height, so reclaim the gap it leaves */
        margin-bottom: -8px;
    }
}

/* --------------------------------------------------------------------
   Footer callback form

   The footer ground is black, so the widget is rendered in Google's dark
   theme and the status line needs colours that hold against it — the
   red used elsewhere for errors is unreadable on this background.
   -------------------------------------------------------------------- */
.xsso_recaptcha_field.xsso_recaptcha_dark {
    margin: 20px 0 22px;
}

.xsso_recaptcha_dark .xsso_recaptcha_error {
    color: #FF8A75;
}

.footer_form_status {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.footer_form_status.is-ok {
    color: #9FD8B4;
}

.footer_form_status.is-error {
    color: #FF8A75;
}

.footer_submit_btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* The widget is 304px and will not shrink; the footer column is narrower
   than that on small screens. */
@media screen and (max-width: 480px) {
    .xsso_recaptcha_dark .xsso_recaptcha {
        transform: scale(0.82);
        transform-origin: left top;
    }

    .xsso_recaptcha_field.xsso_recaptcha_dark {
        margin-bottom: 8px;
    }
}