/** Shopify CDN: Minification failed

Line 3064:0 Unexpected "<"

**/
/* Extracted from existing Safeline homepage to preserve header/footer design */


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

.welcome-enquiry-overlay {

    position: fixed;

    top: 0;
    left: 0;

    z-index: 999999;

    width: 100%;
    height: 100%;

    display: none;

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

    padding: 20px;

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

    backdrop-filter: blur(5px);

}


/* Show */

.welcome-enquiry-overlay.show {

    display: flex;

}


/* ============================================
   MODAL
============================================ */

.welcome-enquiry-modal {

    position: relative;

    width: 100%;
    max-width: 480px;

    background: #ffffff;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35);

    animation:
        welcomeModalAnimation
        .45s ease;

}


/* Top Gold Line */

.welcome-enquiry-modal::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 6px;

    background: #d5ad54;

}


/* Animation */

@keyframes welcomeModalAnimation {

    from {

        opacity: 0;

        transform:
            translateY(30px)
            scale(.96);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


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

.welcome-modal-content {

    padding: 45px 40px 40px;

}


/* Small Heading */

.welcome-modal-label {

    display: inline-block;

    margin-bottom: 12px;

    color: #b68c32;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


/* Heading */

.welcome-modal-content h2 {

    margin:
        0 0
        10px;

    color: #111111;

    font-size: 31px;

    line-height: 1.2;

    font-weight: 700;

}


/* Subtitle */

.welcome-modal-subtitle {

    margin-bottom: 28px;

    color: #777;

    font-size: 14px;

    line-height: 22px;

}


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

.welcome-modal-close {

    position: absolute;

    top: 15px;
    right: 15px;

    z-index: 10;

    width: 38px;
    height: 38px;

    padding: 0;

    background: #f5f5f5;

    border: 0;

    border-radius: 50%;

    color: #222;

    font-size: 26px;

    line-height: 36px;

    cursor: pointer;

    transition: .3s;

}


.welcome-modal-close:hover {

    background: #111;

    color: #fff;

}


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

.welcome-form-group {

    margin-bottom: 18px;

}


.welcome-form-group label {

    display: block;

    margin-bottom: 7px;

    color: #222;

    font-size: 13px;

    font-weight: 600;

}


.welcome-form-group label span {

    color: #d5ad54;

}


/* Inputs */

.welcome-form-group input {

    width: 100%;
    height: 50px;

    padding:
        0 16px;

    background: #fafafa;

    border:
        1px solid
        #e3e3e3;

    border-radius: 8px;

    outline: none;

    color: #222;

    font-size: 14px;

    transition: .3s;

}


.welcome-form-group input::placeholder {

    color: #aaa;

}


.welcome-form-group input:focus {

    background: #fff;

    border-color: #d5ad54;

    box-shadow:
        0 0 0 3px
        rgba(213, 173, 84, .10);

}


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

.welcome-submit-btn {

    display: flex;

    width: 100%;
    height: 52px;

    margin-top: 8px;

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

    gap: 12px;

    background: #111111;

    border: 0;

    border-radius: 8px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;

}


.welcome-submit-btn span {

    color: #d5ad54;

    font-size: 20px;

    transition: .3s;

}


.welcome-submit-btn:hover {

    background: #d5ad54;

    color: #111;

}


.welcome-submit-btn:hover span {

    color: #111;

    transform:
        translateX(5px);

}


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

@media (max-width: 576px) {

    .welcome-enquiry-overlay {

        padding: 15px;

    }


    .welcome-enquiry-modal {

        max-width: 100%;

        border-radius: 17px;

    }


    .welcome-modal-content {

        padding:
            42px 22px
            28px;

    }


    .welcome-modal-content h2 {

        font-size: 25px;

    }


    .welcome-modal-subtitle {

        margin-bottom: 22px;

        font-size: 13px;

    }


    .welcome-form-group {

        margin-bottom: 14px;

    }


    .welcome-form-group input {

        height: 48px;

    }

}





/* =========================================================
   SAFELINE HEADER
========================================================= */

.sf-header {

    --sf-gold: #d5ad54;
    --sf-gold-dark: #a78032;
    --sf-black: #111111;
    --sf-dark: #181818;
    --sf-light: #f8f6f1;

    position: relative;

    z-index: 999;

}


/* =========================================================
   SALE BAR
========================================================= */

.sf-sale-bar {

    position: relative;

    overflow: hidden;

    background: #111;

    border-bottom:
        1px solid
        rgba(213,173,84,.32);

    color: #fff;

}


.sf-sale-bar::before {

    content: "";

    position: absolute;

    top: -50px;
    left: -100px;

    width: 280px;
    height: 130px;

    border:
        1px solid
        rgba(213,173,84,.16);

    border-radius: 50%;

}


.sf-sale-inner {

    position: relative;

    display: flex;

    min-height: 48px;

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

    gap: 20px;

}


.sf-sale-main {

    display: flex;

    align-items: center;

    gap: 11px;

}


.sf-sale-icon {

    display: flex;

    width: 29px;
    height: 29px;

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

    background: var(--sf-gold);

    border-radius: 50%;

    color: #111;

    font-size: 11px;

    animation:
        sfGiftBounce
        2s ease-in-out infinite;

}


@keyframes sfGiftBounce {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0);

    }

    50% {

        transform:
            translateY(-3px)
            rotate(-7deg);

    }

}


.sf-sale-text {

    display: flex;

    align-items: center;

    gap: 12px;

}


.sf-sale-text strong {

    color: var(--sf-gold);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}


.sf-sale-text span {

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

    font-size: 12px;

}


.sf-sale-text b {

    color: var(--sf-gold);

    font-weight: 900;

}


.sf-sale-side {

    display: flex;

    align-items: center;

    gap: 18px;

}


.sf-limited {

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.sf-sale-side a {

    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--sf-gold);

    font-size: 10px;

    font-weight: 900;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: .6px;

}


.sf-sale-side a i {

    transition:
        transform .3s ease;

}


.sf-sale-side a:hover i {

    transform:
        translateX(4px);

}


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

.header-top {

    position: relative;

    overflow: hidden;

    background: #f5f2ea;

    border-bottom:
        1px solid
        #e7e0d1;

}


.header-top-wrap {

    position: relative;

    z-index: 2;

    display: flex;

    min-height: 42px;

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

    gap: 20px;

}


.header-top-list ul {

    display: flex;

    align-items: center;

    gap: 25px;

    margin: 0;

    padding: 0;

    list-style: none;

}


.header-top a {

    color: #555;

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    transition:
        color .3s ease;

}


.header-top a:hover {

    color: var(--sf-gold-dark);

}


.header-top a i {

    margin-right: 7px;

    color: var(--sf-gold-dark);

}


.header-top-right {

    display: flex;

    align-items: center;

    gap: 18px;

}


.sf-top-divider {

    width: 1px;
    height: 15px;

    background: #d8d0bf;

}


.header-top-social {

    display: flex;

    align-items: center;

    gap: 8px;

}


.header-top-social > span {

    margin-right: 3px;

    color: #777;

    font-size: 10px;

}


.header-top-social a {

    display: flex;

    width: 26px;
    height: 26px;

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

    background: #fff;

    border:
        1px solid
        #e0d9cc;

    border-radius: 50%;

}


.header-top-social a i {

    margin: 0;

    font-size: 10px;

}


.header-top-social a:hover {

    background: #111;

    border-color: #111;

}


.header-top-social a:hover i {

    color: var(--sf-gold);

}


/* =========================================================
   NAVBAR
========================================================= */

.main-navigation {

    position: relative;

    background: #fff;

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.055);

}


.main-navigation .navbar {

    min-height: 88px;

    padding: 0;

}


.navbar-brand {

    display: flex;

    align-items: center;

    margin-right: 35px;

}


.navbar-brand img {

    display: block;

    width: auto;

    max-width: 175px;

    max-height: 67px;

    object-fit: contain;

}


/* Desktop body */

@media(min-width:992px) {

    .offcanvas-body {

        display: flex;

        align-items: center;

        width: 100%;

        padding: 0;

    }


    .navbar-nav {

        display: flex;

        align-items: center;

        gap: 3px;

        margin-right: auto;

    }

}


/* =========================================================
   MAIN LINKS
========================================================= */

.navbar-nav .nav-link {

    position: relative;

    padding:
        34px 12px !important;

    color: #252525;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        color .3s ease;

}


.navbar-nav .nav-link::after {

    border: 0 !important;

}


.navbar-nav .nav-item:not(.dropdown)
.nav-link::before {

    content: "";

    position: absolute;

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

    height: 2px;

    background: var(--sf-gold);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform .3s ease;

}


.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {

    color: var(--sf-gold-dark);

}


.navbar-nav
.nav-item:not(.dropdown)
.nav-link:hover::before,
.navbar-nav
.nav-item:not(.dropdown)
.nav-link.active::before {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


/* Dropdown arrow */

.nav-item.dropdown >
.nav-link {

    display: flex;

    align-items: center;

    gap: 6px;

}


.nav-item.dropdown >
.nav-link::after {

    content: "\f107" !important;

    display: inline-block;

    margin: 0 !important;

   

    font-size: 10px;

    font-weight: 900;

    transition:
        transform .3s ease;

}


.nav-item.dropdown:hover >
.nav-link::after {

    transform:
        rotate(180deg);

}


/* =========================================================
   PREMIUM DROPDOWN
========================================================= */

.sf-dropdown {

    width: 300px;

    padding: 13px;

    background: #fff;

    border:
        1px solid
        #e8e1d5;

    border-radius: 15px;

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.13);

}


.sf-dropdown-title {

    padding:
        5px
        10px
        10px;

    color: var(--sf-gold-dark);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.sf-dropdown .dropdown-item {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 3px;

    padding:
        10px;

    border-radius: 9px;

    color: #222;

    white-space: normal;

    transition:
        background .25s ease,
        transform .25s ease;

}


.sf-dropdown
.dropdown-item:hover {

    background: #f8f5ee;

    transform:
        translateX(3px);

}


.sf-menu-icon {

    display: flex;

    width: 35px;
    min-width: 35px;
    height: 35px;

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

    background: #f4efe4;

    border-radius: 8px;

    color: var(--sf-gold-dark);

}


.sf-dropdown
.dropdown-item strong {

    display: block;

    color: #222;

    font-size: 11px;

}


.sf-dropdown
.dropdown-item small {

    display: block;

    margin-top: 2px;

    color: #999;

    font-size: 9px;

}


.sf-dropdown
.sf-all-products {

    justify-content:
        space-between;

    margin-top: 7px;

    padding:
        11px 12px;

    background: #111;

    color: #fff;

    font-size: 10px;

    font-weight: 800;

}


.sf-dropdown
.sf-all-products:hover {

    background:
        var(--sf-gold);

    color: #111;

}


/* =========================================================
   NAV RIGHT
========================================================= */

.nav-right {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-left: 15px;

}


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

.sf-catalogue-btn {

    display: flex;

    min-width: 133px;

    align-items: center;

    gap: 9px;

    padding:
        8px
        11px;

    background: #f7f4ed;

    border:
        1px solid
        #e6ddca;

    border-radius: 9px;

    color: #111;

    text-decoration: none;

    transition:
        .3s ease;

}


.sf-catalogue-icon {

    display: flex;

    width: 31px;
    min-width: 31px;
    height: 31px;

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

    background: #111;

    border-radius: 7px;

    color: var(--sf-gold);

    font-size: 10px;

}


.sf-catalogue-btn small {

    display: block;

    color: #999;

    font-size: 7px;

    line-height: 1.2;

    text-transform: uppercase;

}


.sf-catalogue-btn strong {

    display: block;

    margin-top: 1px;

    color: #222;

    font-size: 10px;

    line-height: 1.2;

}


.sf-catalogue-btn:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--sf-gold);

    box-shadow:
        0 9px 20px
        rgba(0,0,0,.08);

}


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

.nav-btn .theme-btn {

    display: inline-flex;

    min-height: 48px;

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

    gap: 9px;

    padding:
        0
        17px;

    background: #111;

    border:
        1px solid
        #111;

    border-radius: 9px;

    color: #fff;

    font-size: 10px;

    font-weight: 800;

    white-space: nowrap;

    text-decoration: none;

    transition:
        .3s ease;

}


.nav-btn
.theme-btn i {

    color:
        var(--sf-gold);

    transition:
        transform .3s ease;

}


.nav-btn
.theme-btn:hover {

    background:
        var(--sf-gold);

    border-color:
        var(--sf-gold);

    color: #111;

}


.nav-btn
.theme-btn:hover i {

    color: #111;

    transform:
        translateX(3px);

}


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

.sidebar-btn {

    display: flex;

    width: 43px;
    height: 43px;

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

    flex-direction: column;

    gap: 4px;

    background: transparent;

    border:
        1px solid
        #ddd5c6;

    border-radius: 9px;

}


.sidebar-btn span {

    display: block;

    width: 17px;
    height: 1px;

    background: #111;

}


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

.mobile-menu-right {

    display: none;

    align-items: center;

    gap: 8px;

}


.sf-mobile-catalogue {

    display: flex;

    width: 42px;
    height: 42px;

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

    background:
        var(--sf-gold);

    border-radius: 8px;

    color: #111;

    text-decoration: none;

}


.navbar-toggler {

    display: flex;

    width: 44px;
    height: 42px;

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

    flex-direction: column;

    gap: 0px;

    padding: 0;

    background: #d3ac59;

    border: 0;

    border-radius: 8px;

}


.navbar-toggler span {

    display: block;

    width: 19px;
    height: 2px;

    background: #fff;

}


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

@media(max-width:1199px) and (min-width:992px) {

    .navbar-brand img {

        max-width: 145px;

    }


    .navbar-brand {

        margin-right: 15px;

    }


    .navbar-nav .nav-link {

        padding-left:
            8px !important;

        padding-right:
            8px !important;

        font-size: 11px;

    }


    .sf-catalogue-btn {

        min-width: auto;

    }


    .sf-catalogue-btn
    > span:last-child {

        display: none;

    }


    .nav-btn .theme-btn {

        padding:
            0 12px;

    }

}


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

@media(max-width:991px) {

    .sf-sale-inner {

        min-height: 44px;

    }


    .sf-sale-side {

        display: none;

    }


    .sf-sale-main {

        width: 100%;

        justify-content: center;

    }


    .sf-sale-text strong {

        display: none;

    }


    .header-top-right {

        display: none;

    }


    .header-top-wrap {

        justify-content: center;

    }


    .header-top-list ul {

        gap: 15px;

    }


    .main-navigation
    .navbar {

        min-height: 75px;

    }


    .navbar-brand img {

        max-width: 150px;

        max-height: 58px;

    }


    .mobile-menu-right {

        display: flex;

        margin-left: auto;

    }


    .offcanvas {

        width:
            min(340px,88vw) !important;

        background: #fff;

    }


    .offcanvas-header {

        padding:
            17px
            20px;

        border-bottom:
            1px solid
            #eee7da;

    }


    .offcanvas-brand img {

        max-width: 145px;

    }


    .offcanvas-header
    .btn-close {

        display: flex;

        width: 37px;
        height: 37px;

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

        padding: 0;

        background: #111;

        border-radius: 50%;

        color: #fff;

        opacity: 1;

    }


    .offcanvas-body {

        padding:
            12px
            20px
            25px;

    }


    .navbar-nav .nav-link {

        padding:
            14px
            3px !important;

        border-bottom:
            1px solid
            #eee9df;

        font-size: 13px;

    }


    .navbar-nav
    .nav-item:not(.dropdown)
    .nav-link::before {

        display: none;

    }


    .sf-dropdown {

        width: 100%;

        margin:
            5px 0
            12px !important;

        padding: 8px;

        border-radius: 10px;

        box-shadow: none;

    }


    .nav-right {

        align-items: stretch;

        flex-direction: column;

        margin:
            20px 0
            0;

    }


    .sf-catalogue-btn {

        width: 100%;

        padding: 11px;

    }


    .nav-btn
    .theme-btn {

        width: 100%;

    }


    .sidebar-btn {

        display: none;

    }

}


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

@media(max-width:575px) {

    .sf-sale-icon {

        width: 26px;
        height: 26px;

        min-width: 26px;

    }


    .sf-sale-text span {

        font-size: 10px;

        line-height: 1.3;

    }


    .header-top {

        display: none;

    }


    .navbar-brand img {

        max-width: 125px;

    }


    .main-navigation
    .navbar {

        min-height: 68px;

    }

}

.navbar .dropdown-toggle::after {
    display: inline-block;
    margin-left: 5px;
    vertical-align: baseline;

    font-family: "Font Awesome 6 Pro";
    content: "\f107";
    font-weight: 600;

    border: none;
    font-size: 14px;
}





/* =========================================================
   HERO SECTION
========================================================= */

.responsive-home-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}


/* Owl full width */

.responsive-home-hero .hero-slider,
.responsive-home-hero .owl-stage-outer,
.responsive-home-hero .owl-stage,
.responsive-home-hero .owl-item {
    width: 100%;
}


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

.responsive-home-hero .hero-single {
    width: 100%;

    height: 468px;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}


/* =========================================================
   DESKTOP IMAGES
========================================================= */

/* Desktop Slide 1 */

.responsive-home-hero .hero-slide-1 {
    background-image:
        url(images--5.jpg.jpeg) !important;
}


/* Desktop Slide 2 */

.responsive-home-hero .hero-slide-2 {
    background-image:
        url(images--5.jpg.jpeg) !important;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media screen and (min-width: 1400px) {

    .responsive-home-hero .hero-single {
        height: 700px;
    }

}


/* =========================================================
   NORMAL DESKTOP / LAPTOP
========================================================= */

@media screen and (min-width: 992px) and (max-width: 1399px) {

    .responsive-home-hero .hero-single {
        height: 450px;
    }

}


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

@media screen and (min-width: 768px) and (max-width: 991px) {

    .responsive-home-hero .hero-single {
        height: 480px;

        background-position: center center !important;
        background-size: cover !important;
    }

}


/* =========================================================
   MOBILE
   USE COMPLETELY DIFFERENT IMAGES
========================================================= */

@media screen and (max-width: 767px) {

    /*
       Uploaded mobile banners are portrait,
       therefore use 5:6 aspect ratio.

       500px x 600px = 5:6
    */

    .responsive-home-hero .hero-single {
        height: auto !important;

        aspect-ratio: 5 / 6;

        min-height: 0 !important;
        max-height: none !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }


    /* =====================================
       MOBILE SLIDE 1
    ====================================== */

    .responsive-home-hero .hero-slide-1 {
        background-image:
            url(images--1.jpg.jpeg) !important;
    }


    /* =====================================
       MOBILE SLIDE 2
    ====================================== */

    .responsive-home-hero .hero-slide-2 {
        background-image:
            url(images--2.jpg.jpeg) !important;
    }

}


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

@media screen and (max-width: 480px) {

    .responsive-home-hero .hero-single {
        width: 100% !important;

        height: auto !important;

        aspect-ratio: 5 / 6 !important;

        background-size: cover !important;

        background-position:
            center center !important;
    }

}


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

@media screen and (max-width: 360px) {

    .responsive-home-hero .hero-single {
        aspect-ratio: 5 / 6 !important;
    }

}


/* =========================================================
   OWL NAVIGATION
========================================================= */

.responsive-home-hero
.owl-nav
button.owl-prev,

.responsive-home-hero
.owl-nav
button.owl-next {

    position: absolute;

    top: 50%;

    z-index: 10;

    transform:
        translateY(-50%);

    width: 46px;
    height: 46px;

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

    margin: 0 !important;

    border: 1px solid
        rgba(255,255,255,.3) !important;

    border-radius: 50% !important;

    background:
        rgba(0,0,0,.32) !important;

    color: #ffffff !important;

    font-size: 26px !important;

    line-height: 1 !important;

    backdrop-filter: blur(5px);

    transition:
        background .3s ease,
        transform .3s ease;
}


/* Previous */

.responsive-home-hero
.owl-nav
button.owl-prev {

    left: 20px;
}


/* Next */

.responsive-home-hero
.owl-nav
button.owl-next {

    right: 20px;
}


/* Hover */

.responsive-home-hero
.owl-nav
button.owl-prev:hover,

.responsive-home-hero
.owl-nav
button.owl-next:hover {

    background:
        rgba(0,0,0,.65) !important;
}


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

.responsive-home-hero .owl-dots {

    position: absolute;

    left: 50%;
    bottom: 20px;

    z-index: 10;

    display: flex;

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

    gap: 5px;

    transform:
        translateX(-50%);
}


.responsive-home-hero
.owl-dots
.owl-dot {

    width: auto;
    height: auto;
}


.responsive-home-hero
.owl-dots
.owl-dot span {

    display: block;

    width: 8px;
    height: 8px;

    margin: 0 !important;

    border-radius: 50%;

    background:
        rgba(255,255,255,.55) !important;

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


/* Active Dot */

.responsive-home-hero
.owl-dots
.owl-dot.active span {

    width: 24px;

    border-radius: 20px;

    background:
        #ffffff !important;
}


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

@media screen and (max-width: 767px) {

    .responsive-home-hero
    .owl-nav
    button.owl-prev,

    .responsive-home-hero
    .owl-nav
    button.owl-next {

        width: 38px;
        height: 38px;

        font-size: 20px !important;
    }


    .responsive-home-hero
    .owl-nav
    button.owl-prev {

        left: 10px;
    }


    .responsive-home-hero
    .owl-nav
    button.owl-next {

        right: 10px;
    }


    .responsive-home-hero
    .owl-dots {

        bottom: 13px;
    }

}


/* =========================================================
   OPTIONAL - HIDE ARROWS ON VERY SMALL MOBILE
========================================================= */

@media screen and (max-width: 420px) {

    .responsive-home-hero
    .owl-nav
    button.owl-prev,

    .responsive-home-hero
    .owl-nav
    button.owl-next {

        width: 34px;
        height: 34px;

        font-size: 17px !important;
    }

}





/* ==========================================================
   SAFELINE PLUS
   CLEAN PREMIUM CATEGORY DESIGN
========================================================== */

.sf-clean-category-section {

    --gold: #d5ad54;
    --gold-dark: #a67f32;
    --black: #111111;
    --text: #282828;
    --muted: #747474;
    --border: #e9e5dc;
    --cream: #f8f6f1;

    position: relative;

    padding: 105px 0 115px;

    background: #ffffff;

    overflow: hidden;

}


/* ==========================================================
   SUBTLE BACKGROUND
   NO GRADIENT
========================================================== */

.sf-clean-category-section::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -250px;
    right: -220px;

    border: 1px solid rgba(213,173,84,.16);

    border-radius: 50%;

}


.sf-clean-category-section::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -190px;
    bottom: -180px;

    border: 1px solid rgba(213,173,84,.12);

    border-radius: 50%;

}


.sf-clean-category-section .container {

    position: relative;

    z-index: 2;

}


/* ==========================================================
   HEADING
========================================================== */

.sf-clean-heading {

    max-width: 760px;

    margin:
        0 auto
        58px;

    text-align: center;

}


.sf-clean-label {

    display: flex;

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

    gap: 13px;

    margin-bottom: 17px;

    color: var(--gold-dark);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

}


.sf-clean-label span {

    display: block;

    width: 32px;
    height: 1px;

    background: var(--gold);

}


.sf-clean-heading h2 {

    margin: 0;

    color: var(--black);

    font-size:
        clamp(
            40px,
            5vw,
            64px
        );

    line-height: 1.08;

    font-weight: 600;

    letter-spacing: -2px;

}


.sf-clean-heading h2 em {

    color: var(--gold-dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;

}


.sf-clean-heading p {

    max-width: 610px;

    margin:
        20px auto
        0;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;

}


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

.sf-clean-grid {

    display: grid;

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

    gap: 22px;

}


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

.sf-clean-card {

    position: relative;

    display: flex;

    min-width: 0;
    height: 100%;

    flex-direction: column;

    background: #fff;

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

    border-radius: 20px;

    overflow: hidden;

    color: inherit;

    text-decoration: none !important;

    box-shadow:
        0 10px 35px
        rgba(0,0,0,.055);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;

}


/* Gold top line */

.sf-clean-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    z-index: 5;

    width: 0;
    height: 4px;

    background: var(--gold);

    transition: width .45s ease;

}


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

.sf-clean-image {

    position: relative;

    display: flex;

    height: 310px;

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

    padding: 25px;

    overflow: hidden;

    background: var(--cream);

}


/*
IMPORTANT:
No overlay.
No gradient.
No dark layer.
*/

.sf-clean-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        transform .55s ease;

}


/* ==========================================================
   NUMBER
========================================================== */

.sf-clean-number {

    position: absolute;

    top: 17px;
    right: 17px;

    z-index: 4;

    display: flex;

    width: 43px;
    height: 43px;

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

    background: #fff;

    border:
        1px solid
        rgba(213,173,84,.50);

    border-radius: 50%;

    color: var(--gold-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow:
        0 6px 18px
        rgba(0,0,0,.07);

}


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

.sf-clean-content {

    position: relative;

    display: flex;

    flex: 1;

    flex-direction: column;

    padding:
        26px
        25px
        24px;

    background: #fff;

}


/* Category label */

.sf-clean-type {

    margin-bottom: 9px;

    color: var(--gold-dark);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


/* Heading */

.sf-clean-content h3 {

    margin:
        0 0
        11px;

    color: var(--black);

    font-size: 25px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -.5px;

}


/* Description */

.sf-clean-content p {

    margin:
        0 0
        24px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;

}


/* ==========================================================
   EXPLORE LINK
========================================================== */

.sf-clean-link {

    display: flex;

    width: 100%;

    margin-top: auto;

    padding-top: 17px;

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

    border-top:
        1px solid
        #eeeeee;

    color: var(--black);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .2px;

}


.sf-clean-link i {

    display: flex;

    width: 37px;
    height: 37px;

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

    background: var(--black);

    border-radius: 50%;

    color: #fff;

    font-size: 11px;

    transform: rotate(-35deg);

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;

}


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

@media (hover:hover) {

    .sf-clean-card:hover {

        transform:
            translateY(-9px);

        border-color:
            rgba(213,173,84,.55);

        box-shadow:
            0 25px 55px
            rgba(0,0,0,.11);

    }


    .sf-clean-card:hover::before {

        width: 100%;

    }


    .sf-clean-card:hover
    .sf-clean-image img {

        transform:
            scale(1.07);

    }


    .sf-clean-card:hover
    .sf-clean-link i {

        background:
            var(--gold);

        color:
            var(--black);

        transform:
            rotate(0deg);

    }

}


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

@media (max-width: 1199px) {

    .sf-clean-grid {

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

    }


    .sf-clean-image {

        height: 350px;

    }

}


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

@media (max-width: 991px) {

    .sf-clean-category-section {

        padding:
            85px 0
            95px;

    }


    .sf-clean-heading {

        margin-bottom: 45px;

    }

}


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

@media (max-width: 767px) {

    .sf-clean-category-section {

        padding:
            65px 0
            75px;

    }


    .sf-clean-heading {

        margin-bottom: 35px;

    }


    .sf-clean-heading h2 {

        font-size: 40px;

        letter-spacing: -1px;

    }


    .sf-clean-heading p {

        font-size: 14px;

        line-height: 1.7;

    }


    .sf-clean-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .sf-clean-image {

        height: 330px;

    }


    .sf-clean-content {

        padding:
            23px
            22px;

    }


    .sf-clean-content h3 {

        font-size: 25px;

    }

}


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

@media (max-width: 480px) {

    .sf-clean-category-section {

        padding:
            55px 0
            65px;

    }


    .sf-clean-heading h2 {

        font-size: 34px;

    }


    .sf-clean-label {

        font-size: 9px;

        letter-spacing: 2px;

    }


    .sf-clean-label span {

        width: 22px;

    }


    .sf-clean-image {

        height: 275px;

        padding: 20px;

    }


    .sf-clean-card {

        border-radius: 16px;

    }


    .sf-clean-content {

        padding:
            21px
            19px;

    }


    .sf-clean-content h3 {

        font-size: 23px;

    }


    .sf-clean-number {

        top: 14px;
        right: 14px;

        width: 39px;
        height: 39px;

    }

}

<style>
/* =========================================================
   SAFELINE CATEGORY - PREMIUM ANIMATIONS
   Add AFTER existing category CSS
========================================================= */

/* ---------- Background decorative rings ---------- */

.sf-clean-category-section .container::before,
.sf-clean-category-section .container::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(213, 173, 84, .16);
    border-radius: 50%;
    pointer-events: none;
}

.sf-clean-category-section .container::before {
    width: 120px;
    height: 120px;
    top: 110px;
    left: -55px;
    animation: sfRingFloat 6s ease-in-out infinite;
}

.sf-clean-category-section .container::after {
    width: 75px;
    height: 75px;
    right: -20px;
    bottom: 40px;
    animation: sfRingFloat 5s ease-in-out infinite reverse;
}

@keyframes sfRingFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-16px) rotate(12deg);
    }
}


/* =========================================================
   HEADING REVEAL
========================================================= */

.sf-clean-heading {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.sf-clean-heading.sf-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Gold label lines */

.sf-clean-label span {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .8s ease .35s;
}

.sf-clean-heading.sf-visible .sf-clean-label span {
    transform: scaleX(1);
}


/* Heading */

.sf-clean-heading h2 {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity .7s ease .15s,
        transform .7s ease .15s;
}

.sf-clean-heading.sf-visible h2 {
    opacity: 1;
    transform: translateY(0);
}


/* Description */

.sf-clean-heading p {
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity .7s ease .3s,
        transform .7s ease .3s;
}

.sf-clean-heading.sf-visible p {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   CARD SCROLL REVEAL
========================================================= */

.sf-clean-card {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.7,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


/* Different delay for each card */

.sf-clean-card:nth-child(1) {
    transition-delay: .05s;
}

.sf-clean-card:nth-child(2) {
    transition-delay: .14s;
}

.sf-clean-card:nth-child(3) {
    transition-delay: .23s;
}

.sf-clean-card:nth-child(4) {
    transition-delay: .32s;
}


.sf-clean-card.sf-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   IMAGE AREA DECORATION
========================================================= */

.sf-clean-image {
    position: relative;
}


/* Decorative gold ring behind product */

.sf-clean-image::before {
    content: "";
    position: absolute;

    width: 180px;
    height: 180px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(.85);

    border:
        1px solid
        rgba(213,173,84,.24);

    border-radius: 50%;

    opacity: .65;

    transition:
        transform .7s ease,
        opacity .5s ease;
}


/* Second ring */

.sf-clean-image::after {
    content: "";
    position: absolute;

    width: 225px;
    height: 225px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(.85);

    border:
        1px dashed
        rgba(213,173,84,.13);

    border-radius: 50%;

    transition:
        transform 1s ease;
}


/* Keep image above rings */

.sf-clean-image img {
    position: relative;
    z-index: 2;
}


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

.sf-clean-card.sf-visible
.sf-clean-image img {
    animation:
        sfProductFloat
        4.5s ease-in-out
        infinite;
}


.sf-clean-card:nth-child(2)
.sf-clean-image img {
    animation-delay: .4s;
}

.sf-clean-card:nth-child(3)
.sf-clean-image img {
    animation-delay: .8s;
}

.sf-clean-card:nth-child(4)
.sf-clean-image img {
    animation-delay: 1.2s;
}


@keyframes sfProductFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* =========================================================
   NUMBER ANIMATION
========================================================= */

.sf-clean-number {
    transform:
        scale(.7)
        rotate(-15deg);

    opacity: 0;

    transition:
        transform .6s ease .4s,
        opacity .6s ease .4s,
        background .3s ease,
        color .3s ease;
}


.sf-clean-card.sf-visible
.sf-clean-number {
    transform:
        scale(1)
        rotate(0deg);

    opacity: 1;
}


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

.sf-clean-type,
.sf-clean-content h3,
.sf-clean-content p,
.sf-clean-link {
    opacity: 0;
    transform: translateY(12px);
}


.sf-clean-card.sf-visible
.sf-clean-type {
    animation:
        sfContentReveal
        .55s ease .35s forwards;
}


.sf-clean-card.sf-visible
.sf-clean-content h3 {
    animation:
        sfContentReveal
        .55s ease .43s forwards;
}


.sf-clean-card.sf-visible
.sf-clean-content p {
    animation:
        sfContentReveal
        .55s ease .51s forwards;
}


.sf-clean-card.sf-visible
.sf-clean-link {
    animation:
        sfContentReveal
        .55s ease .59s forwards;
}


@keyframes sfContentReveal {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   GOLD SHINE EFFECT
========================================================= */

.sf-clean-card::after {
    content: "";

    position: absolute;

    z-index: 6;

    top: 0;
    left: -150%;

    width: 65%;
    height: 4px;

    background: #d5ad54;

    transform: skewX(-25deg);

    transition: left .7s ease;

}


/* =========================================================
   PREMIUM HOVER
========================================================= */

@media (hover:hover) {

    .sf-clean-card.sf-visible:hover {
        transform:
            translateY(-12px);

        border-color:
            rgba(213,173,84,.65);

        box-shadow:
            0 30px 65px
            rgba(17,17,17,.14);
    }


    /* Gold top line */

    .sf-clean-card:hover::before {
        width: 100%;
    }


    /* Shine */

    .sf-clean-card:hover::after {
        left: 150%;
    }


    /* Product image */

    .sf-clean-card.sf-visible:hover
    .sf-clean-image img {
        animation-play-state: paused;

        transform:
            translateY(-5px)
            scale(1.08);
    }


    /* First ring */

    .sf-clean-card:hover
    .sf-clean-image::before {
        transform:
            translate(-50%, -50%)
            scale(1.13);

        opacity: 1;
    }


    /* Second ring */

    .sf-clean-card:hover
    .sf-clean-image::after {
        transform:
            translate(-50%, -50%)
            scale(1.08)
            rotate(35deg);
    }


    /* Number */

    .sf-clean-card:hover
    .sf-clean-number {
        background: #111;
        border-color: #111;
        color: #d5ad54;

        transform:
            scale(1.08)
            rotate(6deg);
    }


    /* Heading */

    .sf-clean-card:hover
    .sf-clean-content h3 {
        color: #a67f32;
    }


    /* Arrow */

    .sf-clean-card:hover
    .sf-clean-link i {
        background: #d5ad54;
        color: #111;

        transform:
            rotate(0deg)
            translateX(2px);
    }

}


/* =========================================================
   EXPLORE LINK ANIMATION
========================================================= */

.sf-clean-link span {
    position: relative;
}


.sf-clean-link span::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 0;
    height: 1px;

    background: #d5ad54;

    transition: width .35s ease;
}


.sf-clean-card:hover
.sf-clean-link span::after {
    width: 100%;
}


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

@media (max-width: 767px) {

    .sf-clean-image::before {
        width: 150px;
        height: 150px;
    }

    .sf-clean-image::after {
        width: 195px;
        height: 195px;
    }

}


/* =========================================================
   ACCESSIBILITY
   Disable continuous animation if user prefers reduced motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sf-clean-heading,
    .sf-clean-card,
    .sf-clean-type,
    .sf-clean-content h3,
    .sf-clean-content p,
    .sf-clean-link,
    .sf-clean-number {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .sf-clean-image img {
        animation: none !important;
    }

    .sf-clean-category-section .container::before,
    .sf-clean-category-section .container::after {
        animation: none !important;
    }

}




.sf-shop{padding:80px 0 95px;background:radial-gradient(ellipse at 94% 0%,#f1eadb 0,transparent 38%),#f8f8f4}.sf-wrap{max-width:1320px;padding:0 24px;margin:auto}.sf-eyebrow{font-size:11px;letter-spacing:2.8px;font-weight:800;color:#967038;display:flex;align-items:center;gap:11px}.sf-eyebrow:before{content:'';height:2px;width:26px;background:var(--gold)}.sf-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:31px}.sf-head h2{font-family:Manrope,sans-serif;font-size:clamp(32px,4vw,55px);letter-spacing:-2.3px;line-height:1.14;margin:15px 0}.sf-head h2 em{font-style:normal;color:#aa8442}.sf-head p{max-width:590px;line-height:1.75;color:var(--muted);margin:0}.sf-filters{display:flex;gap:8px;flex-wrap:wrap}.sf-filters button{background:white;border:1px solid #e5e4dc;padding:12px 17px;border-radius:9px;font:700 12px 'DM Sans';color:#5a6059;cursor:pointer}.sf-filters button.active,.sf-filters button:hover{background:#1e2923;color:#fff;border-color:#1e2923}.sf-promo{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#1d2922;color:white;padding:20px 28px;border-radius:15px;margin-bottom:28px;overflow:hidden;position:relative}.sf-promo:after{content:'✦';position:absolute;right:25%;top:-48px;font-size:160px;color:#ffffff09}.sf-promo strong{font-size:17px;font-family:Manrope}.sf-promo p{font-size:12px;color:#d4dbd3;margin:6px 0 0}.sf-promo-mark{border:1px solid #8c774e;color:#e8ce94;padding:10px 14px;border-radius:8px;font-size:11px;letter-spacing:1px;font-weight:800;white-space:nowrap}.sf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}.sf-card{background:white;border:1px solid #e9e9e2;border-radius:17px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;min-width:0}.sf-card:hover{transform:translateY(-6px);box-shadow:0 20px 45px #16251c17}.sf-card[hidden]{display:none!important}.sf-photo{height:292px;background:linear-gradient(145deg,#f6f7f3,#eceee8);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.sf-photo>img{width:100%;height:100%;object-fit:contain;padding:30px 20px;transition:transform .4s}.sf-card:hover .sf-photo>img{transform:scale(1.06)}.sf-number{position:absolute;top:17px;left:18px;font-weight:800;font-size:11px;letter-spacing:1.2px;color:#677167;z-index:1}.sf-type{position:absolute;bottom:15px;left:17px;background:#fff;border:1px solid #e5e8e2;border-radius:6px;padding:7px 10px;font-size:10px;font-weight:800;letter-spacing:.8px;color:#536157}.sf-gift{position:absolute;right:0;top:17px;padding:9px 13px;background:#c6a25d;color:#211d13;font-size:10px;font-weight:800;letter-spacing:.7px;border-radius:7px 0 0 7px;z-index:2}.sf-gift-overlay{position:absolute;inset:0;background:#142019ed;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:3;text-align:center;padding:15px}.sf-gift-overlay img{width:125px;height:120px;object-fit:contain;background:#fff;border-radius:12px;padding:10px}.sf-gift-overlay strong{font-size:17px;color:#f0d395}.sf-gift-overlay span{font-size:11px;color:#e0e7de}.sf-card:hover .sf-gift-overlay,.sf-card:focus-within .sf-gift-overlay{opacity:1}.sf-body{padding:24px 24px 22px;display:flex;flex-direction:column;flex:1}.sf-brand{font-size:10px;letter-spacing:1.6px;font-weight:800;color:#a08049}.sf-body h3{font:800 19px/1.4 Manrope,sans-serif;letter-spacing:-.5px;margin:9px 0 10px;min-height:53px}.sf-desc{color:#777e77;font-size:12px;line-height:1.7;min-height:41px;margin:0 0 17px}.sf-prices{border-top:1px solid var(--line);padding-top:17px;display:flex;justify-content:space-between;align-items:end;gap:8px}.sf-price-label{display:block;font-size:9px;letter-spacing:1.2px;color:#899087;font-weight:800;margin-bottom:5px}.sf-manual{font:800 26px Manrope,sans-serif;letter-spacing:-1.3px}.sf-auto{color:#999;font-size:17px;font-weight:700;text-decoration:line-through;text-decoration-thickness:1px}.sf-size{margin:17px 0 0;padding:12px 13px;background:#f8f8f4;border:1px solid #ecece5;border-radius:9px;color:#656c65;font-size:11px;line-height:1.7;min-height:58px}.sf-size b{color:#303a31;display:block;letter-spacing:.6px;font-size:10px;margin-bottom:3px}.sf-cta{margin-top:auto;padding-top:17px}.sf-cta a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:#fff;background:#233128;padding:14px 16px;border-radius:9px;font-weight:800;font-size:12px;transition:background .2s}.sf-cta a:hover{background:#9c783d}.sf-all{text-align:center;margin-top:37px}.sf-all a{color:#26382c;font-weight:800;font-size:13px;text-underline-offset:5px}.sf-note{font-size:11px;color:#7a8178;text-align:center;line-height:1.6;margin-top:15px}@media(max-width:960px){.sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-head{align-items:start;flex-direction:column}}@media(max-width:540px){.sf-shop{padding:48px 0 60px}.sf-wrap{padding:0 12px}.sf-head h2{letter-spacing:-1.5px}.sf-grid{gap:11px}.sf-photo{height:190px}.sf-photo>img{padding:17px 9px}.sf-body{padding:13px 12px 14px}.sf-body h3{font-size:13px;min-height:54px}.sf-desc{font-size:10px;min-height:69px}.sf-manual{font-size:19px}.sf-auto{font-size:13px}.sf-price-label{font-size:8px}.sf-size{font-size:9px;padding:9px;min-height:76px}.sf-gift{font-size:8px;padding:7px}.sf-number{top:10px;left:10px}.sf-type{font-size:8px;bottom:9px;left:9px;padding:5px}.sf-promo{padding:17px;align-items:start}.sf-promo strong{font-size:14px}.sf-promo-mark{font-size:9px;padding:8px}.sf-cta a{padding:12px 9px;font-size:10px}.sf-gift-overlay img{height:75px;width:90px}.sf-gift-overlay strong{font-size:12px}}




/* =========================================
   WARRANTY IMAGE WRAPPER
========================================= */

.sf-performance-visual{
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;

    background: #111;
    border-radius: 22px;

    box-shadow:
        0 20px 55px rgba(0,0,0,.14);
}


/* =========================================
   IMAGE
   IMPORTANT:
   height:auto prevents cropping
========================================= */

.sf-performance-visual .sf-warranty-image{
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    object-fit: contain;
    object-position: center;

    border: 0;
    border-radius: 22px;
}


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

@media (max-width: 991px){

    .sf-performance-visual{
        width: 100%;
        border-radius: 18px;
    }

    .sf-performance-visual .sf-warranty-image{
        width: 100%;
        height: auto;
        border-radius: 18px;
    }

}


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

@media (max-width: 767px){

    .sf-performance-visual{
        width: 100%;
        max-width: 100%;
        border-radius: 14px;
    }

    .sf-performance-visual .sf-warranty-image{
        display: block;

        width: 100%;
        height: auto;

        object-fit: contain;
        object-position: center;

        border-radius: 14px;
    }

}


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

@media (max-width: 480px){

    .sf-performance-visual{
        border-radius: 10px;
    }

    .sf-performance-visual .sf-warranty-image{
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

}




/* ==================================================
   SAFELINE PLUS — PERFORMANCE PROMO
================================================== */

.sf-performance {
    --sf-gold: #d5b268;
    --sf-gold-light: #f0d797;
    --sf-red: #d52030;
    --sf-black: #090909;

    position: relative;
    overflow: hidden;
    padding: 110px 0;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(213, 178, 104, 0.13),
            transparent 29%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(213, 32, 48, 0.10),
            transparent 25%
        ),
        #090909;
}

.sf-performance::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.13;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px
        );
    background-size: 60px 60px;
}

.sf-performance::after {
    content: "";
    position: absolute;
    top: -200px;
    right: -160px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(213, 178, 104, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.sf-performance .container {
    position: relative;
    z-index: 2;
}

.sf-performance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(45px, 7vw, 100px);
    align-items: center;
}

/* ================= PRODUCT VISUAL ================= */

.sf-performance-visual {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 590px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 34px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.015)
        );
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    isolation: isolate;
}

.sf-performance-visual::before,
.sf-performance-visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.sf-performance-visual::before {
    width: 390px;
    height: 390px;
    border: 1px solid rgba(213, 178, 104, 0.28);
    box-shadow:
        0 0 0 55px rgba(213, 178, 104, 0.04),
        0 0 0 110px rgba(213, 178, 104, 0.025);
}

.sf-performance-visual::after {
    right: 0;
    bottom: 0;
    width: 180px;
    height: 180px;
    background: rgba(213, 32, 48, 0.09);
    filter: blur(65px);
}

.sf-performance-glow {
    position: absolute;
    left: 50%;
    bottom: 55px;
    width: 68%;
    height: 80px;
    border-radius: 50%;
    background: rgba(213, 178, 104, 0.2);
    filter: blur(45px);
    transform: translateX(-50%);
}

.sf-performance-visual > img {
    position: relative;
    z-index: 2;
    display: block;
    width: 87%;
    max-width: 570px;
    max-height: 440px;
    object-fit: contain;
    filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.58));
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sf-performance-visual:hover > img {
    transform: translateY(-8px) scale(1.04);
}

/* Top Tag */

.sf-performance-tag {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(7, 7, 7, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sf-performance-tag i {
    color: var(--sf-gold);
}

/* 2mm Badge */

.sf-performance-badge {
    position: absolute;
    right: 25px;
    bottom: 25px;
    z-index: 4;
    display: flex;
    width: 112px;
    height: 112px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 6px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: #17130d;
    background: var(--sf-gold);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.sf-performance-badge strong {
    font-size: 26px;
    line-height: 1;
}

.sf-performance-badge span {
    margin-top: 6px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Floating Feature */

.sf-performance-feature {
    position: absolute;
    left: 25px;
    bottom: 25px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 17px 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    background: rgba(10, 10, 10, 0.68);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.24);
}

.sf-feature-icon {
    display: grid;
    width: 42px;
    min-width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 11px;
    color: #111;
    background: var(--sf-gold);
}

.sf-performance-feature > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sf-performance-feature small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sf-performance-feature strong {
    color: #fff;
    font-size: 12px;
}

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

.sf-performance-kicker {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--sf-gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.sf-performance-kicker span {
    width: 38px;
    height: 2px;
    background: var(--sf-gold);
}

.sf-performance-content h2 {
    margin: 19px 0 23px;
    color: #fff;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -2.5px;
}

.sf-performance-content h2 em {
    color: var(--sf-gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.sf-performance-description {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 15px;
    line-height: 1.85;
}

/* Feature Points */

.sf-performance-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin: 31px 0 35px;
}

.sf-point {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 11px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.035);
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.sf-point:hover {
    border-color: rgba(213, 178, 104, 0.4);
    background: rgba(213, 178, 104, 0.07);
    transform: translateY(-3px);
}

.sf-point > i {
    display: grid;
    width: 25px;
    min-width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 50%;
    color: #111;
    background: var(--sf-gold);
    font-size: 10px;
}

.sf-point > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.sf-point strong {
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
}

.sf-point small {
    color: rgba(255, 255, 255, 0.52);
    font-size: 10px;
    line-height: 1.5;
}

/* Buttons */

.sf-performance-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
}

.sf-shop-btn {
    display: inline-flex;
    min-height: 55px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 23px;
    border-radius: 12px;
    color: #fff;
    background: var(--sf-red);
    box-shadow: 0 15px 35px rgba(213, 32, 48, 0.28);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        gap 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.sf-shop-btn:hover {
    gap: 19px;
    color: #fff;
    background: #ec3040;
    transform: translateY(-3px);
}

.sf-text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.sf-text-link:hover {
    color: var(--sf-gold-light);
}

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

@media (max-width: 1100px) {
    .sf-performance-grid {
        gap: 45px;
    }

    .sf-performance-visual {
        min-height: 510px;
    }

    .sf-performance-points {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .sf-performance {
        padding: 85px 0;
    }

    .sf-performance-grid {
        grid-template-columns: 1fr;
    }

    .sf-performance-visual {
        max-width: 720px;
        width: 100%;
        margin: 0 auto;
    }

    .sf-performance-content {
        max-width: 720px;
        margin: 0 auto;
    }

    .sf-performance-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .sf-performance {
        padding: 70px 0;
    }

    .sf-performance-grid {
        gap: 42px;
    }

    .sf-performance-visual {
        min-height: 430px;
        border-radius: 24px;
    }

    .sf-performance-visual::before {
        width: 280px;
        height: 280px;
        box-shadow:
            0 0 0 40px rgba(213, 178, 104, 0.04),
            0 0 0 80px rgba(213, 178, 104, 0.025);
    }

    .sf-performance-tag {
        top: 17px;
        left: 17px;
    }

    .sf-performance-badge {
        right: 17px;
        bottom: 17px;
        width: 90px;
        height: 90px;
    }

    .sf-performance-badge strong {
        font-size: 21px;
    }

    .sf-performance-feature {
        left: 17px;
        bottom: 17px;
    }

    .sf-performance-content h2 {
        font-size: 45px;
        letter-spacing: -1.5px;
    }
}

@media (max-width: 575px) {
    .sf-performance-visual {
        min-height: 360px;
    }

    .sf-performance-visual > img {
        width: 92%;
    }

    .sf-performance-tag {
        font-size: 8px;
    }

    .sf-performance-feature {
        display: none;
    }

    .sf-performance-badge {
        width: 78px;
        height: 78px;
        border-width: 4px;
    }

    .sf-performance-badge strong {
        font-size: 18px;
    }

    .sf-performance-badge span {
        font-size: 7px;
    }

    .sf-performance-content h2 {
        font-size: 38px;
    }

    .sf-performance-description {
        font-size: 14px;
    }

    .sf-performance-points {
        grid-template-columns: 1fr;
    }

    .sf-performance-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .sf-shop-btn {
        width: 100%;
    }

    .sf-text-link {
        justify-content: center;
    }
}

@media (max-width: 380px) {
    .sf-performance-visual {
        min-height: 315px;
    }

    .sf-performance-tag {
        padding: 9px 11px;
        letter-spacing: 0.7px;
    }

    .sf-performance-content h2 {
        font-size: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-performance * {
        transition: none !important;
    }
}



/* =========================================================
   CUSTOMER REVIEW SECTION
========================================================= */

.customer-reviews{
    --gold:#d5ad54;
    --gold-dark:#a77b23;
    --black:#111111;
    --text:#222222;
    --muted:#777777;
    --border:#ece6db;
    --green:#20a45a;

    position:relative;
    overflow:hidden;
    padding:90px 20px;
    background:#faf9f6;
}

.customer-reviews *,
.customer-reviews *::before,
.customer-reviews *::after{
    box-sizing:border-box;
}

/* Background decoration */

.customer-reviews::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border:1px solid rgba(213,173,84,.18);
    border-radius:50%;
    top:-280px;
    right:-160px;
}

.customer-reviews::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border:1px solid rgba(213,173,84,.14);
    border-radius:50%;
    bottom:-190px;
    left:-130px;
}

.review-container{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1420px;
    margin:0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.review-heading{
    max-width:760px;
    margin:0 auto 28px;
    text-align:center;
}

.review-kicker{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-bottom:12px;
    color:var(--gold-dark);
    font-size:11px;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
}

.review-kicker::before,
.review-kicker::after{
    content:"";
    width:35px;
    height:1px;
    background:var(--gold);
}

.review-heading h2{
    margin:0 0 12px;
    color:var(--black);
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(34px,4vw,54px);
    line-height:1.08;
    font-weight:700;
    letter-spacing:-1.4px;
}

.review-heading h2 span{
    color:var(--gold-dark);
}

.review-heading p{
    max-width:580px;
    margin:0 auto;
    color:var(--muted);
    font-size:15px;
    line-height:1.7;
}


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

.review-filter{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:9px;
    margin:0 0 35px;
}

.review-filter-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-height:43px;
    padding:0 18px;

    background:#fff;
    border:1px solid #e5e1da;
    border-radius:50px;

    color:#333;
    font-size:11px;
    font-weight:800;

    cursor:pointer;

    box-shadow:0 5px 15px rgba(0,0,0,.04);

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

.review-filter-btn:hover{
    transform:translateY(-2px);
    border-color:var(--gold);
}

.review-filter-btn.active{
    background:#111;
    border-color:#111;
    color:#fff;
}

.review-filter-btn.active i{
    color:var(--gold);
}


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

.review-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
    align-items:stretch;
}


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

.review-card{
    position:relative;
    min-width:0;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;

    box-shadow:
        0 10px 35px rgba(34,27,16,.07);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.review-card:hover{
    transform:translateY(-8px);
    border-color:rgba(213,173,84,.55);

    box-shadow:
        0 24px 50px rgba(34,27,16,.13);
}

.review-card.hide-review{
    display:none;
}


/* =========================================================
   MEDIA
========================================================= */

.review-media{
    position:relative;
    width:100%;
    aspect-ratio:4 / 4.35;
    overflow:hidden;
    background:#151515;
}

.review-media > img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

.review-card:hover .review-media > img{
    transform:scale(1.035);
}


/* subtle bottom overlay */

.review-media::after{
    content:"";
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    bottom:0;
    height:30%;
    pointer-events:none;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.35),
            transparent
        );
}


/* =========================================================
   TYPE BADGE
========================================================= */

.review-type{
    position:absolute;
    z-index:6;
    top:14px;
    left:14px;

    display:inline-flex;
    align-items:center;
    gap:6px;

    min-height:31px;
    padding:0 11px;

    border-radius:50px;

    color:#fff;
    font-size:9px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;

    box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.video-type{
    background:rgba(17,17,17,.88);
    border:1px solid rgba(213,173,84,.65);
}

.video-type i{
    color:var(--gold);
}

.whatsapp-type{
    background:var(--green);
}

.whatsapp-type i{
    font-size:13px;
}


/* =========================================================
   VIDEO PLAY BUTTON
========================================================= */

.review-play{
    position:absolute;
    z-index:8;

    top:50%;
    left:50%;

    width:66px;
    height:66px;

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

    padding:0;

    border:1px solid rgba(255,255,255,.5);
    border-radius:50%;

    background:rgba(12,12,12,.72);
    color:#fff;

    cursor:pointer;
    backdrop-filter:blur(7px);

    transform:translate(-50%,-50%);
    transition:.3s ease;
}

.review-play::before{
    content:"";
    position:absolute;
    inset:-9px;
    border:1px solid rgba(213,173,84,.55);
    border-radius:50%;
    animation:reviewPulse 1.8s infinite;
}

.review-play i{
    position:relative;
    z-index:2;
    margin-left:4px;
    color:#fff;
    font-size:20px;
}

.review-play:hover{
    background:var(--gold);
    transform:translate(-50%,-50%) scale(1.08);
}

.review-play:hover i{
    color:#111;
}

@keyframes reviewPulse{
    0%{
        transform:scale(.88);
        opacity:1;
    }

    100%{
        transform:scale(1.35);
        opacity:0;
    }
}


/* =========================================================
   DURATION
========================================================= */

.review-duration{
    position:absolute;
    z-index:6;

    right:12px;
    bottom:12px;

    padding:5px 9px;

    background:rgba(0,0,0,.75);
    border-radius:30px;

    color:#fff;
    font-size:10px;
    font-weight:700;
}


/* =========================================================
   VIDEO
========================================================= */

.review-video{
    display:none;

    position:absolute;
    z-index:10;
    inset:0;

    width:100%;
    height:100%;

    background:#000;
    object-fit:contain;
}

.review-card.playing .review-video{
    display:block;
}

.review-card.playing .review-media::after,
.review-card.playing .review-play,
.review-card.playing .review-type,
.review-card.playing .review-duration{
    display:none;
}


/* =========================================================
   WHATSAPP SCREENSHOT
========================================================= */

.whatsapp-media{
    background:#efe9df;
}

.whatsapp-media > img{
    object-fit:cover;
    object-position:top center;
}


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

.review-content{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:19px;
}


/* =========================================================
   RATING
========================================================= */

.review-rating{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.review-stars{
    color:#f5aa19;
    font-size:14px;
    letter-spacing:1px;
    white-space:nowrap;
}

.review-verified{
    display:inline-flex;
    align-items:center;
    gap:5px;

    padding:4px 8px;

    background:#f7f7f5;
    border:1px solid #eceae5;
    border-radius:50px;

    color:#666;
    font-size:8px;
    font-weight:800;
    white-space:nowrap;
}

.review-verified i{
    display:flex;
    align-items:center;
    justify-content:center;

    width:15px;
    height:15px;

    background:#17a45b;
    border-radius:50%;

    color:#fff;
    font-size:6px;
}


/* =========================================================
   TEXT
========================================================= */

.review-content h3{
    margin:0 0 8px;

    color:#171717;

    font-size:16px;
    font-weight:800;
    line-height:1.35;
}

.review-content > p{
    margin:0 0 17px;

    color:#747474;

    font-size:11px;
    line-height:1.7;
}


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

.review-product{
    display:flex;
    align-items:center;
    gap:11px;

    margin-top:auto;
    padding-top:14px;

    border-top:1px solid #eeeae3;
}

.review-product-image{
    width:58px;
    height:43px;

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

    flex:0 0 58px;

    overflow:hidden;

    background:#fafafa;
    border:1px solid #eee;
    border-radius:7px;
}

.review-product-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.review-product-info{
    min-width:0;
}

.review-product-info span{
    display:block;
    margin-bottom:2px;

    color:#999;
    font-size:8px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.6px;
}

.review-product-info strong{
    display:block;

    overflow:hidden;

    color:var(--gold-dark);

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

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


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

.review-cta{
    position:relative;
    overflow:hidden;

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

    margin-top:32px;
    padding:24px 27px;

    background:#111;
    border:1px solid rgba(213,173,84,.25);
    border-radius:14px;

    box-shadow:0 16px 40px rgba(0,0,0,.12);
}

.review-cta::after{
    content:"";
    position:absolute;

    width:160px;
    height:160px;

    top:-90px;
    right:140px;

    border:1px solid rgba(213,173,84,.15);
    border-radius:50%;
}

.review-cta-text{
    position:relative;
    z-index:2;
}

.review-cta-text small{
    display:block;
    margin-bottom:5px;

    color:var(--gold);

    font-size:9px;
    font-weight:800;
    letter-spacing:1.3px;
    text-transform:uppercase;
}

.review-cta-text strong{
    display:block;

    color:#fff;

    font-size:17px;
    font-weight:700;
}

.review-cta-btn{
    position:relative;
    z-index:2;

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

    min-height:44px;
    padding:0 18px;

    background:var(--gold);
    border:1px solid var(--gold);
    border-radius:7px;

    color:#111;

    font-size:9px;
    font-weight:900;
    letter-spacing:.2px;

    text-decoration:none;
    white-space:nowrap;

    transition:.3s ease;
}

.review-cta-btn:hover{
    background:#fff;
    border-color:#fff;
    color:#111;
    transform:translateY(-2px);
}

.review-cta-btn i{
    transition:transform .3s ease;
}

.review-cta-btn:hover i{
    transform:translateX(4px);
}


/* =========================================================
   RESPONSIVE — SMALL DESKTOP
========================================================= */

@media(max-width:1199px){

    .customer-reviews{
        padding:75px 20px;
    }

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

    .review-media{
        aspect-ratio:4 / 3.5;
    }

}


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

@media(max-width:767px){

    .customer-reviews{
        padding:60px 15px;
    }

    .review-heading{
        margin-bottom:24px;
    }

    .review-heading p{
        font-size:13px;
    }

    .review-kicker{
        font-size:9px;
        letter-spacing:2px;
    }

    .review-filter{
        margin-bottom:25px;
    }

    .review-filter-btn{
        min-height:39px;
        padding:0 13px;
        font-size:9px;
    }

    .review-grid{
        gap:16px;
    }

    .review-media{
        aspect-ratio:1 / 1;
    }

    .review-cta{
        align-items:flex-start;
        flex-direction:column;
        padding:21px;
    }

    .review-cta-btn{
        width:100%;
    }

}


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

@media(max-width:575px){

    .customer-reviews{
        padding:50px 12px;
    }

    .review-heading h2{
        font-size:30px;
        letter-spacing:-.8px;
    }

    .review-heading p{
        max-width:330px;
        font-size:12px;
    }

    .review-kicker::before,
    .review-kicker::after{
        width:22px;
    }

    .review-filter{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .review-filter-btn{
        width:100%;
        padding:0 8px;
    }

    .review-filter-btn:first-child{
        grid-column:1 / -1;
    }

    .review-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .review-media{
        aspect-ratio:4 / 3.8;
    }

    .review-content{
        padding:17px;
    }

    .review-content h3{
        font-size:15px;
    }

    .review-content > p{
        font-size:11px;
    }

    .review-play{
        width:58px;
        height:58px;
    }

    .review-play i{
        font-size:17px;
    }

    .review-cta-text strong{
        font-size:15px;
    }

}


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

@media(max-width:360px){

    .review-heading h2{
        font-size:27px;
    }

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

    .review-filter{
        grid-template-columns:1fr;
    }

    .review-filter-btn:first-child{
        grid-column:auto;
    }

}



/* ==================================================
   SAFELINE PLUS — PREMIUM FOOTER
================================================== */

.sf-footer {
    --sf-gold: #d6b56e;
    --sf-gold-light: #f1d895;
    --sf-red: #d51f2e;
    --sf-black: #080808;
    --sf-border: rgba(255, 255, 255, 0.10);

    position: relative;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(214, 181, 110, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(213, 31, 46, 0.10),
            transparent 26%
        ),
        #080808;
}

.sf-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.12;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        );
    background-size: 60px 60px;
}

.sf-footer .container {
    position: relative;
    z-index: 2;
}

/* Decorative Glow */

.sf-footer-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(5px);
}

.sf-glow-one {
    top: 160px;
    left: -250px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(214, 181, 110, 0.18);
    box-shadow:
        0 0 0 60px rgba(214, 181, 110, 0.025),
        0 0 0 120px rgba(214, 181, 110, 0.018);
}

.sf-glow-two {
    right: -160px;
    bottom: -160px;
    width: 380px;
    height: 380px;
    background: rgba(213, 31, 46, 0.06);
    filter: blur(80px);
}

/* ==================================================
   NEWSLETTER
================================================== */

.sf-newsletter {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.8fr);
    gap: 45px;
    align-items: center;
    margin-top: 0;
    padding: 38px 42px;
    overflow: hidden;
    border: 1px solid rgba(214, 181, 110, 0.28);
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            rgba(214, 181, 110, 0.15),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.sf-newsletter::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(214, 181, 110, 0.09);
    pointer-events: none;
}

.sf-newsletter-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
}

.sf-newsletter-icon {
    display: grid;
    width: 66px;
    min-width: 66px;
    height: 66px;
    place-items: center;
    border: 1px solid rgba(214, 181, 110, 0.42);
    border-radius: 18px;
    color: #15110a;
    background: var(--sf-gold);
    box-shadow: 0 13px 28px rgba(0, 0, 0, 0.25);
    font-size: 23px;
}

.sf-newsletter-content small {
    display: block;
    margin-bottom: 5px;
    color: var(--sf-gold-light);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sf-newsletter-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(22px, 2vw, 31px);
    font-weight: 700;
    line-height: 1.2;
}

.sf-newsletter-content p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    line-height: 1.6;
}

.sf-newsletter-form {
    position: relative;
    z-index: 2;
    width: 100%;
}

.sf-email-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 7px 7px 7px 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.4);
}

.sf-email-field > i {
    color: var(--sf-gold);
    font-size: 15px;
}

.sf-email-field input {
    width: 100%;
    min-width: 0;
    height: 46px;
    border: 0;
    outline: 0;
    color: #ffffff;
    background: transparent;
    font-size: 13px;
}

.sf-email-field input::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.sf-email-field button {
    display: inline-flex;
    min-width: 135px;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    background: var(--sf-red);
    box-shadow: 0 10px 25px rgba(213, 31, 46, 0.27);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition:
        gap 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.sf-email-field button:hover {
    gap: 15px;
    background: #ee3040;
    transform: translateY(-2px);
}

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

.sf-footer-main {
    padding: 90px 0 75px;
}

.sf-footer-grid {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.35fr)
        minmax(145px, 0.65fr)
        minmax(160px, 0.75fr)
        minmax(260px, 1.05fr);
    gap: clamp(35px, 5vw, 75px);
}

/* Brand */

.sf-footer-logo {
    display: inline-flex;
    margin-bottom: 24px;
}

.sf-footer-logo img {
    display: block;
    width: auto;
    max-width: 210px;
    height: 70px;
    object-fit: contain;
}

.sf-footer-brand > p {
    max-width: 390px;
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    line-height: 1.85;
}

.sf-brand-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 23px;
}

.sf-brand-points span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid var(--sf-border);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.035);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.sf-brand-points i {
    color: var(--sf-gold);
}

/* Social Media */

.sf-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 25px;
}

.sf-socials a {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--sf-border);
    border-radius: 11px;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.035);
    text-decoration: none;
    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.sf-socials a:hover {
    color: #111;
    border-color: var(--sf-gold);
    background: var(--sf-gold);
    transform: translateY(-4px);
}

/* Footer Headings */

.sf-footer-column h4,
.sf-footer-contact > h4 {
    position: relative;
    margin: 6px 0 27px;
    padding-bottom: 14px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.sf-footer-column h4::after,
.sf-footer-contact > h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 38px;
    height: 2px;
    border-radius: 10px;
    background: var(--sf-gold);
}

/* Links */

.sf-footer-column ul {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sf-footer-column a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
    transition:
        gap 0.3s ease,
        color 0.3s ease;
}

.sf-footer-column a i {
    color: var(--sf-gold);
    font-size: 8px;
}

.sf-footer-column a:hover {
    gap: 13px;
    color: var(--sf-gold-light);
}

/* ==================================================
   CONTACT CARDS
================================================== */

.sf-contact-list {
    display: grid;
    gap: 11px;
}

.sf-contact-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
    padding: 13px;
    border: 1px solid var(--sf-border);
    border-radius: 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.035);
    text-decoration: none;
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.sf-contact-card:hover {
    color: #ffffff;
    border-color: rgba(214, 181, 110, 0.45);
    background: rgba(214, 181, 110, 0.075);
    transform: translateX(5px);
}

.sf-contact-icon {
    display: grid;
    width: 42px;
    min-width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 11px;
    color: #15110a;
    background: var(--sf-gold);
    font-size: 14px;
}

.sf-contact-details {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.sf-contact-details small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sf-contact-details strong {
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

/* ==================================================
   COPYRIGHT
================================================== */

.sf-footer-bottom {
    position: relative;
    z-index: 3;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(0, 0, 0, 0.24);
}

.sf-bottom-wrap {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 30px;
    align-items: center;
    min-height: 84px;
}

.sf-bottom-wrap p {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
}

.sf-bottom-wrap p a {
    color: var(--sf-gold-light);
    font-weight: 700;
    text-decoration: none;
}

.sf-bottom-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sf-bottom-links a {
    color: rgba(255, 255, 255, 0.48);
    font-size: 10px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.sf-bottom-links a:hover {
    color: var(--sf-gold-light);
}

.sf-bottom-links span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--sf-gold);
}

.sf-back-top {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(214, 181, 110, 0.35);
    border-radius: 11px;
    color: #111;
    background: var(--sf-gold);
    text-decoration: none;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.sf-back-top:hover {
    color: #ffffff;
    background: var(--sf-red);
    transform: translateY(-4px);
}

/* Accessibility Helper */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    white-space: nowrap !important;
}

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

@media (max-width: 1199px) {
    .sf-footer-grid {
        grid-template-columns: 1.1fr 0.65fr 0.75fr 1fr;
        gap: 35px;
    }
}

@media (max-width: 991px) {
    .sf-newsletter {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .sf-footer-main {
        padding: 75px 0 60px;
    }

    .sf-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 50px 45px;
    }

    .sf-footer-brand > p {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .sf-newsletter {
        padding: 28px;
        border-radius: 21px;
    }

    .sf-newsletter-content {
        align-items: flex-start;
    }

    .sf-newsletter-icon {
        width: 55px;
        min-width: 55px;
        height: 55px;
        border-radius: 15px;
    }

    .sf-footer-main {
        padding: 65px 0 50px;
    }

    .sf-bottom-wrap {
        grid-template-columns: 1fr auto;
        padding: 22px 0;
    }

    .sf-bottom-links {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 575px) {
    .sf-newsletter {
        padding: 24px 18px;
    }

    .sf-newsletter-content {
        gap: 14px;
    }

    .sf-newsletter-content p {
        display: none;
    }

    .sf-email-field {
        align-items: stretch;
        flex-wrap: wrap;
        padding: 9px;
    }

    .sf-email-field > i {
        display: none;
    }

    .sf-email-field input {
        height: 45px;
        padding: 0 10px;
    }

    .sf-email-field button {
        width: 100%;
    }

    .sf-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 42px 24px;
    }

    .sf-footer-brand,
    .sf-footer-contact {
        grid-column: 1 / -1;
    }

    .sf-footer-logo img {
        max-width: 180px;
        height: 62px;
    }

    .sf-bottom-wrap {
        gap: 18px;
    }
}

@media (max-width: 390px) {
    .sf-newsletter-content h3 {
        font-size: 20px;
    }

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

    .sf-footer-brand,
    .sf-footer-contact {
        grid-column: auto;
    }

    .sf-footer-column h4,
    .sf-footer-contact > h4 {
        margin-bottom: 22px;
    }

    .sf-bottom-wrap {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .sf-bottom-links {
        grid-column: auto;
        grid-row: auto;
        justify-content: center;
    }

    .sf-back-top {
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-footer * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ===== FIX: PHONE NUMBERS + INSTAGRAM / MOBILE FOOTER ===== */
.sf-phone-card {
    cursor: default;
}

.sf-phone-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.sf-phone-links a {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    color: rgba(255,255,255,.88);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: none;
    white-space: nowrap;
}

.sf-phone-links a:hover {
    color: var(--sf-gold-light);
}

@media (max-width: 575px) {
    .sf-contact-card {
        width: 100%;
        padding: 15px 14px;
        gap: 14px;
        align-items: flex-start;
    }

    .sf-contact-icon {
        width: 46px;
        min-width: 46px;
        height: 46px;
    }

    .sf-contact-details {
        flex: 1 1 auto;
        width: calc(100% - 60px);
        min-width: 0;
    }

    .sf-contact-details strong {
        display: block;
        font-size: 12px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .sf-phone-links {
        gap: 7px;
    }

    .sf-phone-links a {
        font-size: 13px;
        line-height: 1.45;
    }

    .sf-socials a {
        width: 44px;
        height: 44px;
    }

    .sf-bottom-links {
        flex-wrap: wrap;
        row-gap: 10px;
    }
}




.sf-main-gift-img{display:flex!important;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.sf-main-gift-img img{width:150px!important;height:150px!important;object-fit:contain!important;background:#fff;border-radius:18px;padding:8px}
.sf-free-gift-visual img{object-fit:contain!important;background:#fff}
.sf-phone-card a{color:inherit;text-decoration:none}.sf-phone-card a:hover{color:#d6b56e}
@media(max-width:767px){.sf-main-gift-img img{width:105px!important;height:105px!important}.sf-contact-details strong{font-size:14px;line-height:1.6}}



/* Site-wide responsive safeguards */
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{overflow-x:clip}
img{max-width:100%}
.sf-shop .sf-grid{align-items:stretch}
.sf-shop .sf-card{height:100%;min-width:0}
.sf-shop .sf-photo{isolation:isolate}
.sf-shop .sf-photo>img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.sf-shop .sf-body{min-width:0}
.sf-shop .sf-cta a{min-height:44px;position:relative;z-index:4}
.sf-shop .sf-gift-overlay{pointer-events:none}
.welcome-enquiry-modal{max-height:min(92dvh,760px);overflow-y:auto}
/* Fixed controls: outside banners, product pictures and footer layout */
.sf-floating-actions{position:fixed!important;right:22px;bottom:24px;z-index:99990!important;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.sf-floating-actions>*{pointer-events:auto}
.sf-float-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 19px;border:2px solid #fff;border-radius:999px;background:#20b858;color:#fff!important;box-shadow:0 8px 28px rgba(0,0,0,.23);font:700 13px/1.2 Arial,sans-serif;text-decoration:none!important;transition:transform .2s,background .2s}
.sf-float-whatsapp i{font-size:25px}.sf-float-whatsapp:hover{background:#128c43;transform:translateY(-3px)}
.sf-float-top{width:48px;height:48px;border:1px solid rgba(213,173,84,.7);border-radius:50%;background:#151515;color:#d5ad54;box-shadow:0 8px 25px rgba(0,0,0,.2);font-size:17px;display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s}
.sf-float-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}.sf-float-top:hover{background:#d5ad54;color:#111}
.sf-floating-actions a:focus-visible,.sf-floating-actions button:focus-visible{outline:3px solid #d5ad54;outline-offset:3px}
@media(max-width:991px){.sf-shop .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-floating-actions{right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}}
@media(max-width:575px){.sf-shop .sf-grid{gap:12px}.sf-shop .sf-photo{height:clamp(145px,43vw,215px)}.sf-shop .sf-body{padding:13px 11px}.sf-shop .sf-prices{flex-wrap:wrap;align-items:flex-start}.sf-shop .sf-cta a{font-size:11px;line-height:1.4}.sf-floating-actions{right:12px;gap:9px}.sf-float-whatsapp{width:52px;height:52px;min-height:52px;padding:0;border-radius:50%}.sf-float-whatsapp span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.sf-float-whatsapp i{font-size:27px}.sf-float-top{width:44px;height:44px}.sf-shop .sf-gift-overlay{display:none}}
@media(max-width:360px){.sf-shop .sf-grid{gap:8px}.sf-shop .sf-body{padding:11px 8px}.sf-shop .sf-manual{font-size:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sf-floating-actions *{transition:none!important}}