:root {
    --navy: #102a56;
    --navy2: #145b73;
    --cream: #d7b66c;
    --cream2: #f5f1e8;
    --white: #fff;
    --ink: #17243a;
    --muted: #566473
}

html {
    background: var(--navy);
    scrollbar-color: #9f8b6b var(--navy);
    scrollbar-width: thin
}

::-webkit-scrollbar {
    width: 7px
}

::-webkit-scrollbar-track {
    background: var(--navy)
}

::-webkit-scrollbar-thumb {
    background: #9f8b6b;
    border-radius: 10px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 16px;
    color: var(--ink);
    overflow-x: hidden
}

h1,
h2,
h3,
h4,
.brand,
.btn,
.nav-link {
    font-family: "Noto Kufi Arabic", "Vazirmatn", sans-serif
}

a {
    text-decoration: none;
    color: inherit
}

button {
    font-family: inherit
}

.hero {
    height: 100svh;
    min-height: 760px;
    background: var(--navy);
    color: #fff;
    position: relative
}

.navbar {
    height: 96px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    transition: .3s;
    z-index: 1030
}

.navbar.scrolled {
    height: 76px;
    background: rgba(7, 26, 46, .94);
    backdrop-filter: blur(15px)
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    font-weight: 700;
    font-size: 22px
}

.brand span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cream);
    border-radius: 50%;
    color: var(--cream);
    font-family: serif
}

.nav-link {
    color: rgba(255, 255, 255, .75) !important;
    font-size: 14px;
    font-weight: 700;
    padding: 35px 8px !important
}

.nav-link:hover {
    color: var(--cream) !important
}

.nav-tools {
    display: flex;
    align-items: center;
    gap: 8px
}

.icon-btn,
.cart-btn {
    border: 0;
    background: transparent;
    color: #fff
}

.icon-btn {
    width: 44px;
    height: 44px;
    font-size: 17px
}

.cart-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px
}

.cart-btn b {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cream);
    color: var(--navy)
}

.navbar-toggler {
    color: #fff;
    font-size: 27px;
    padding: 4px
}

.mega-dropdown {
    position: static
}

.mega-menu {
    width: min(1100px, calc(100vw - 40px));
    right: 50% !important;
    left: auto !important;
    transform: translateX(50%) !important;
    top: 86px !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .2);
    overflow: hidden
}

.menu-column {
    padding: 34px;
    border-left: 1px solid #eee9e1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px
}

.menu-title {
    font-size: 12px;
    font-weight: 700;
    color: #a08763;
    margin-bottom: 7px
}

.menu-column a {
    font-size: 14px;
    color: #52606b
}

.menu-column a:hover {
    color: var(--navy);
    transform: translateX(-4px)
}

.menu-feature {
    position: relative;
    min-height: 245px;
    color: #fff
}

.menu-feature:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, rgba(7, 26, 46, .9))
}

.menu-feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute
}

.menu-feature>div {
    position: absolute;
    z-index: 2;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column
}

.menu-feature small {
    font-size: 10px;
    color: var(--cream)
}

.menu-feature strong {
    font-size: 18px;
    margin: 5px 0
}

.menu-feature a {
    font-size: 11px
}

.carousel {
    height: 100%
}

.hero-swiper {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
    height: 100%
}

.hero-swiper .swiper-slide {
    position: relative;
    overflow: hidden
}

.hero-bg {
    position: absolute;
    width: 58%;
    height: 100%;
    left: 0;
    object-fit: cover;
    animation: zoom 6s ease-out forwards
}

.hero-video {
    pointer-events: none;
    background: var(--navy)
}

.pos-two {
    object-position: 65% center;
    filter: saturate(.7)
}

.pos-three {
    object-position: 30% center;
    filter: saturate(.5) contrast(1.1)
}

.hero-video.pos-two,
.hero-video.pos-three {
    animation: none
}

@keyframes zoom {
    from {
        transform: scale(1.08)
    }

    to {
        transform: scale(1)
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 26, 46, .1), var(--navy) 58%)
}

.hero-content {
    height: 100%;
    position: relative;
    z-index: 2;
    padding-top: 90px
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--cream);
    font-size: 13px;
    letter-spacing: .5px
}

.eyebrow:before {
    content: "";
    width: 36px;
    height: 1px;
    background: currentColor
}

.eyebrow.dark {
    color: #937d5e
}

.hero h1,
.hero h2 {
    font-weight: 400;
    font-size: clamp(58px, 7vw, 96px);
    line-height: 1.22;
    letter-spacing: -4px;
    margin: 20px 0
}

.hero em,
.section-head em,
.story em,
.journal em {
    font-family: "Playfair Display", serif;
    color: var(--cream);
    font-weight: 600
}

.hero-content p {
    max-width: 520px;
    color: rgba(255, 255, 255, .72);
    line-height: 2.15;
    font-size: 16px
}

.btn {
    border-radius: 0;
    padding: 17px 27px;
    font-size: 14px
}

.btn-cream {
    background: var(--cream);
    color: var(--navy);
    border: 1px solid var(--cream)
}

.btn-cream:hover {
    background: #f1e7d5;
    border-color: #f1e7d5
}

.btn-cream i,
.btn-outline-navy i {
    margin-right: 30px
}

.btn-line {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .4)
}

.slide-name {
    position: absolute;
    bottom: 70px;
    left: 60px;
    z-index: 3;
    text-align: left;
    display: flex;
    flex-direction: column
}

.slide-name small {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--cream)
}

.slide-name strong {
    font-size: 20px
}

.carousel-indicators {
    left: 50px;
    right: auto;
    bottom: 26px;
    margin: 0;
    gap: 7px
}

.carousel-indicators [data-bs-target] {
    width: 34px;
    height: 3px;
    border: 0
}

.hero-swiper .swiper-pagination {
    width: auto;
    left: 50px;
    right: auto;
    bottom: 26px;
    display: flex;
    gap: 7px;
    z-index: 5
}

.hero-swiper .swiper-pagination-bullet {
    width: 34px;
    height: 3px;
    margin: 0 !important;
    border-radius: 0;
    background: rgba(255, 255, 255, .45);
    opacity: 1
}

.hero-swiper .swiper-pagination-bullet-active {
    background: var(--cream)
}

.hero-swiper .swiper-button-prev::after,
.hero-swiper .swiper-button-next::after {
    display: none
}

.carousel-control-prev,
.carousel-control-next {
    top: auto;
    bottom: 28px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .2);
    opacity: 1
}

.carousel-control-prev {
    right: auto;
    left: 200px
}

.carousel-control-next {
    right: auto;
    left: 153px
}

.hero-stats {
    position: absolute;
    z-index: 4;
    bottom: 50px;
    right: calc((100% - min(1140px, calc(100% - 48px)))/2);
    display: flex;
    gap: 40px;
    pointer-events: none
}

.hero-stats div {
    display: flex;
    flex-direction: column
}

.hero-stats div+div {
    border-right: 1px solid rgba(255, 255, 255, .15);
    padding-right: 40px
}

.hero-stats strong {
    font-size: 17px
}

.hero-stats span {
    font-size: 11px;
    color: rgba(255, 255, 255, .55)
}

.ticker {
    height: 68px;
    display: flex;
    align-items: center;
    background: var(--cream);
    overflow: hidden
}

.ticker-track {
    display: flex;
    gap: 28px;
    white-space: nowrap;
    width: max-content;
    animation: ticker 25s linear infinite
}

.ticker span {
    font-size: 13px;
    font-weight: 600
}

.ticker b {
    font-size: 9px;
    color: #9d8666
}

@keyframes ticker {
    to {
        transform: translateX(50%)
    }
}

.py-section {
    padding: 110px 0
}

.section-head h2,
.story h2,
.newsletter h2 {
    font-weight: 500;
    font-size: clamp(42px, 5vw, 62px);
    line-height: 1.5;
    margin: 10px 0 0;
    letter-spacing: -2px
}

.section-head em,
.journal em {
    color: #a28a68
}

.section-head p {
    color: var(--muted);
    font-size: 15px;
    line-height: 2.15;
    margin: 0
}

.product-tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid #e4ded5
}

.product-tabs button {
    border: 0;
    background: none;
    padding: 11px 0 14px;
    color: #8b9298;
    font-size: 14px;
    position: relative
}

.product-tabs button.active {
    color: var(--navy);
    font-weight: 600
}

.product-tabs button.active:after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 100%;
    height: 2px;
    background: var(--navy)
}

.product-tabs {
    gap: 12px;
    align-items: center;
    border-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.product-tabs::-webkit-scrollbar {
    display: none;
}

.product-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid #ded6ca;
    border-radius: 999px;
    background: #fff;
    color: #68747d;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.product-tabs button i {
    color: #b08d5d;
    font-size: 16px;
}

.product-tabs button.active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    box-shadow: 0 8px 20px rgba(7, 26, 46, .15);
    transform: translateY(-2px);
}

.product-tabs button.active i {
    color: var(--cream);
}

.product-tabs button.active:after {
    display: none;
}

.badge-offer {
    position: absolute;
    right: 17px;
    top: 19px;
    z-index: 2;
    padding: 8px 14px;
    background: #b64e45;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

@media(max-width:767px) {
    .product-tabs {
        margin-inline: -8px;
        padding-inline: 8px;
    }

    .product-tabs button {
        min-height: 42px;
        padding: 9px 14px;
        font-size: 13px;
    }
}

.product-col {
    transition: .35s
}

.product-image {
    height: 430px;
    position: relative;
    overflow: hidden;
    background: #e6ded1
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .7s
}

.product-image.cream img {
    filter: sepia(.22) brightness(1.14)
}

.product-image.light img {
    filter: grayscale(.3) brightness(1.28)
}

.product-card:hover img {
    transform: scale(1.05)
}

.favorite {
    position: absolute;
    left: 17px;
    top: 17px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    z-index: 2
}

.favorite.active {
    background: var(--navy);
    color: #fff
}

.badge-best {
    position: absolute;
    right: 17px;
    top: 19px;
    background: var(--navy);
    color: #fff;
    padding: 8px 14px;
    font-size: 11px;
    z-index: 2
}

.quick {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 16px 20px;
    background: rgba(7, 26, 46, .93);
    color: #fff;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    transform: translateY(100%);
    transition: .3s
}

.product-card:hover .quick {
    transform: none
}

.quick {
    display: none !important;
}

.product-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 20px
}

.product-info small {
    font-size: 10px;
    color: #999;
    letter-spacing: 1px
}

.product-info h3 {
    font-size: 19px;
    margin: 7px 0 0
}

.product-info p {
    font-size: 15px;
    margin: 0
}

.btn-outline-navy {
    border: 1px solid #c8c1b6;
    color: var(--navy)
}

.btn-outline-navy:hover {
    background: var(--navy);
    color: #fff
}

.story {
    background: var(--navy);
    color: #fff;
    padding: 110px 0
}

.story-image {
    height: 570px;
    position: relative
}

.story-image:before {
    content: "";
    position: absolute;
    inset: -22px 22px 22px -22px;
    border: 1px solid rgba(232, 220, 199, .2)
}

.story-image img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.55);
    z-index: 1
}

.story-image>span {
    position: absolute;
    z-index: 2;
    left: -38px;
    bottom: 40px;
    width: 98px;
    height: 98px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--navy);
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 12px
}

.story-copy p {
    color: rgba(255, 255, 255, .7);
    font-size: 15px;
    line-height: 2.3;
    max-width: 530px;
    margin: 26px 0
}

.story-link {
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding-bottom: 7px
}

.story-link i {
    margin-right: 20px
}

.signature {
    font-family: "Playfair Display", serif;
    color: rgba(232, 220, 199, .55);
    font-size: 30px;
    letter-spacing: 3px;
    margin-top: 70px
}

.signature small {
    font-family: Arial;
    font-size: 8px
}

.service {
    text-align: center;
    padding: 10px 45px;
    position: relative
}

.service+.service {
    border-right: 1px solid #e9e4dc
}

.service>span {
    position: absolute;
    right: 20px;
    top: 0;
    color: #b1a58f;
    font-size: 11px
}

.service>i {
    width: 68px;
    height: 68px;
    border: 1px solid #d6c8b4;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 25px;
    color: #a08865;
    font-size: 27px
}

.service h3 {
    font-size: 19px
}

.service p {
    font-size: 14px;
    line-height: 2;
    color: #7c8790
}

.journal {
    background: #faf8f4
}

.journal .section-head>a {
    font-size: 13px;
    border-bottom: 1px solid #aaa;
    padding-bottom: 5px
}

.journal-main {
    height: 460px;
    position: relative;
    overflow: hidden;
    color: #fff
}

.journal-main:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, rgba(7, 26, 46, .9))
}

.journal-main img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.journal-main>div {
    position: absolute;
    z-index: 2;
    right: 30px;
    bottom: 28px;
    left: 30px
}

.journal-main small,
.journal-list small {
    font-size: 11px;
    color: var(--cream)
}

.journal-main h3 {
    font-size: 25px;
    line-height: 1.8;
    max-width: 550px;
    margin-top: 10px
}

.journal-list article {
    height: calc(460px / 3);
    border-bottom: 1px solid #ddd5ca;
    padding: 22px 5px;
    display: flex;
    gap: 25px;
    align-items: center
}

.journal-list article>span {
    font-family: "Playfair Display";
    color: #a58d6c;
    font-size: 26px
}

.journal-list h4 {
    font-size: 16px;
    line-height: 1.9;
    margin: 7px 0
}

.newsletter {
    padding: 80px 0;
    background: var(--cream2)
}

.newsletter h2 {
    font-size: 42px
}

.newsletter p {
    font-size: 14px;
    color: var(--muted)
}

.subscribe {
    display: flex;
    border-bottom: 1px solid var(--navy)
}

.subscribe input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: 0;
    padding: 17px 3px;
    font-size: 15px
}

.subscribe button {
    border: 0;
    background: none;
    width: 50px;
    font-size: 21px
}

.newsletter #formMessage {
    display: block;
    color: #5d7962;
    margin-top: 8px
}

footer {
    background: #061524;
    color: #fff;
    padding: 75px 0 25px
}

.footer-main {
    padding-bottom: 60px
}

.footer-main p {
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
    margin-top: 16px
}

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

.socials a {
    width: 39px;
    height: 39px;
    border: 1px solid rgba(255, 255, 255, .15);
    display: grid;
    place-items: center
}

.footer-main h4 {
    font-size: 14px;
    color: var(--cream);
    margin-bottom: 20px
}

.footer-main>.col-lg:not(:first-child) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px
}

.footer-main>.col-lg a {
    font-size: 12px;
    color: rgba(255, 255, 255, .55)
}

.copyright {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255, 255, 255, .38)
}

.mobile-menu,
.search-modal {
    background: var(--navy);
    color: #fff
}

.mobile-menu {
    width: min(88vw, 390px) !important
}

.mobile-menu .offcanvas-header {
    padding: 22px
}

.mobile-menu .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 20px;
    padding: 12px 22px 30px
}

.mobile-menu .offcanvas-body>a,
.mobile-category-toggle {
    width: 100%;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: none;
    color: #fff;
    text-align: right;
    font-size: 19px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.mobile-category-toggle[aria-expanded="true"] i {
    transform: rotate(45deg)
}

.mobile-category-toggle i {
    transition: .25s
}

.mobile-submenu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
    padding: 10px 0 18px
}

.mobile-submenu a {
    padding: 12px 0;
    color: rgba(255, 255, 255, .62);
    font-size: 15px;
    border-bottom: 1px dashed rgba(255, 255, 255, .1)
}

.mobile-menu-footer {
    margin-top: auto;
    padding-top: 35px;
    display: flex;
    flex-direction: column
}

.mobile-menu-footer span {
    font-size: 11px;
    color: var(--cream)
}

.mobile-menu-footer a {
    font-size: 18px;
    margin-top: 5px
}

.search-form {
    width: min(700px, 90%)
}

.search-form label {
    font-size: 34px;
    margin-bottom: 30px
}

.search-form>div {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, .4)
}

.search-form input {
    flex: 1;
    border: 0;
    background: transparent;
    color: #fff;
    outline: 0;
    padding: 18px 0;
    font-size: 20px
}

.search-form button {
    background: none;
    border: 0;
    color: #fff;
    font-size: 23px
}

.toast {
    background: var(--cream);
    color: var(--navy);
    border-radius: 0
}

@media(max-width:991px) {
    .hero {
        height: 800px;
        min-height: 800px
    }

    .navbar,
    .navbar.scrolled {
        height: 78px
    }

    .navbar>.container {
        position: relative;
        display: block;
        height: 100%;
        max-width: 100%;
        padding-inline: 16px
    }

    .navbar-brand {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        white-space: nowrap
    }

    .navbar-toggler {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0
    }

    .nav-tools {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0
    }

    .hero-bg {
        width: 100%;
        opacity: .5
    }

    .hero-overlay {
        background: linear-gradient(180deg, rgba(7, 26, 46, .3), rgba(7, 26, 46, .92) 78%)
    }

    .hero-content {
        padding-top: 65px
    }

    .hero-content .row {
        align-items: center !important
    }

    .slide-name {
        left: 24px
    }

    .hero-stats {
        right: 24px
    }

    .carousel-control-prev,
    .carousel-control-next {
        display: none
    }

    .product-image {
        height: 410px
    }

    .story-image {
        height: 480px
    }

    .story-copy {
        padding-top: 25px
    }

    .mega-menu {
        display: none
    }
}

@media(max-width:767px) {
    body {
        font-size: 16px;
        width: 100%;
        max-width: 100%;
        margin: 0
    }

    .hero,
    .ticker,
    section,
    footer {
        width: 100%;
        max-width: 100vw
    }

    .container {
        --bs-gutter-x: 2rem
    }

    .hero {
        height: 780px;
        min-height: 780px
    }

    .navbar-brand {
        font-size: 19px
    }

    .brand span {
        width: 34px;
        height: 34px
    }

    .nav-tools {
        gap: 0
    }

    .icon-btn {
        width: 36px
    }

    .cart-btn {
        font-size: 0
    }

    .cart-btn i {
        font-size: 17px
    }

    .cart-btn b {
        font-size: 11px
    }

    .hero-content {
        padding-top: 62px;
        padding-bottom: 145px
    }

    .hero-content .row {
        height: 100% !important
    }

    .hero h1,
    .hero h2 {
        font-size: clamp(43px, 13vw, 55px);
        line-height: 1.35;
        letter-spacing: -2px;
        margin: 16px 0
    }

    .hero-content p {
        font-size: 15px;
        line-height: 2;
        max-width: 94%
    }

    .eyebrow {
        font-size: 12px
    }

    .hero .btn {
        padding: 14px 18px;
        font-size: 13px
    }

    .slide-name {
        display: none
    }

    .hero-stats {
        right: 16px;
        left: 16px;
        bottom: 25px;
        justify-content: space-between;
        gap: 5px;
        padding-top: 18px;
        border-top: 1px solid rgba(255, 255, 255, .12)
    }

    .hero-stats div+div {
        padding-right: 10px
    }

    .hero-stats strong {
        font-size: 15px
    }

    .hero-stats span {
        font-size: 10px
    }

    .hero-swiper .swiper-pagination {
        left: 16px;
        right: 16px;
        bottom: 105px;
        justify-content: flex-start
    }

    .hero-swiper .swiper-pagination-bullet {
        width: 48px
    }

    .ticker {
        height: 60px
    }

    .ticker span {
        font-size: 12px
    }

    .py-section {
        padding: 72px 0
    }

    .section-head h2,
    .story h2,
    .newsletter h2 {
        font-size: 34px;
        line-height: 1.65;
        letter-spacing: -1px
    }

    .section-head p,
    .story-copy p {
        font-size: 15px
    }

    .product-tabs {
        gap: 24px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none
    }

    .product-tabs::-webkit-scrollbar {
        display: none
    }

    .product-tabs button {
        font-size: 14px
    }

    .product-image {
        height: min(430px, 115vw)
    }

    .quick {
        transform: none;
        font-size: 13px
    }

    .product-info {
        align-items: flex-start;
        gap: 15px
    }

    .product-info h3 {
        font-size: 19px
    }

    .product-info p {
        font-size: 14px;
        white-space: nowrap
    }

    .story {
        padding: 80px 0
    }

    .story-image {
        height: min(420px, 110vw);
        margin: 0 14px
    }

    .story-image>span {
        left: -15px;
        width: 82px;
        height: 82px
    }

    .signature {
        margin-top: 45px
    }

    .service {
        padding: 42px 24px
    }

    .service+.service {
        border-right: 0;
        border-top: 1px solid #e9e4dc
    }

    .service h3 {
        font-size: 19px
    }

    .service p {
        font-size: 14px
    }

    .journal .section-head {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 20px
    }

    .journal-main {
        height: 390px
    }

    .journal-main h3 {
        font-size: 20px
    }

    .journal-list article {
        height: auto;
        min-height: 130px
    }

    .newsletter {
        padding: 65px 0
    }

    .subscribe input {
        min-width: 0
    }

    footer {
        padding-top: 62px
    }

    .footer-main {
        padding-bottom: 38px
    }

    .footer-main p {
        font-size: 15px;
        line-height: 1.9
    }

    .footer-main h4 {
        font-size: 16px;
        margin-bottom: 18px
    }

    .footer-main>.col-lg a {
        font-size: 15px;
        line-height: 1.8
    }

    .copyright {
        flex-direction: column;
        gap: 10px;
        font-size: 12px;
        line-height: 1.8
    }

    .search-form label {
        font-size: 24px
    }

    .search-form input {
        min-width: 0;
        font-size: 16px
    }
}

@media(max-width:380px) {
    .hero {
        height: 800px;
        min-height: 800px
    }

    .hero h1,
    .hero h2 {
        font-size: 40px
    }

    .hero-content p {
        font-size: 14px
    }

    .hero-stats span {
        font-size: 9px
    }

    .mobile-submenu {
        grid-template-columns: 1fr
    }

    .product-image {
        height: 370px
    }
}

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

.cart-wrap {
    position: relative
}

.cart-panel {
    position: absolute;
    top: calc(100% + 24px);
    left: 0;
    width: 380px;
    background: #fff;
    color: var(--navy);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: .25s;
    pointer-events: none
}

.cart-wrap:hover .cart-panel,
.cart-wrap:focus-within .cart-panel,
.cart-wrap.open .cart-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto
}

.cart-panel:before {
    content: "";
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px
}

.cart-head {
    height: 68px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee9e2
}

.cart-head strong {
    font-size: 16px
}

.cart-head span {
    font-size: 11px;
    color: #8b949b
}

.cart-items {
    max-height: 320px;
    overflow-y: auto
}

.empty-cart {
    text-align: center;
    padding: 45px 20px;
    color: #89929a
}

.empty-cart i {
    font-size: 30px
}

.empty-cart p {
    font-size: 13px;
    margin: 10px 0 0
}

.cart-item {
    display: grid;
    grid-template-columns: 65px 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #eee9e2
}

.cart-item img {
    width: 65px;
    height: 72px;
    object-fit: cover
}

.cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.cart-item-info strong {
    font-size: 13px
}

.cart-item-info span {
    font-size: 11px;
    color: #777
}

.cart-quantity {
    display: flex;
    align-items: center;
    gap: 8px
}

.cart-quantity button,
.cart-remove {
    border: 0;
    background: #f1ede7;
    color: var(--navy);
    width: 25px;
    height: 25px
}

.cart-quantity b {
    font-size: 12px
}

.cart-remove {
    background: none;
    color: #a35c55;
    font-size: 15px
}

.cart-footer {
    padding: 18px 20px;
    background: #f7f4ee
}

.cart-footer>div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 13px
}

.cart-footer>div strong {
    font-size: 15px
}

.cart-footer>a {
    display: block;
    background: var(--navy);
    color: #fff;
    text-align: center;
    padding: 13px;
    font-size: 13px
}

.add-cart {
    width: 100%;
    border: 1px solid #d4cec5;
    background: transparent;
    color: var(--navy);
    padding: 12px 15px;
    margin-top: 17px;
    font-size: 13px;
    transition: .25s
}

.add-cart:hover,
.add-cart.added {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy)
}

.add-cart i {
    margin-left: 7px
}

.featured-products {
    background: var(--navy);
    color: #fff
}

.featured-products .section-head p {
    color: rgba(255, 255, 255, .62)
}

.featured-main {
    height: 600px;
    position: relative;
    overflow: hidden
}

.featured-main:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 30%, rgba(4, 17, 30, .95))
}

.featured-main>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.featured-badge {
    position: absolute;
    z-index: 2;
    left: 25px;
    top: 25px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    background: var(--cream);
    color: var(--navy);
    font-size: 19px;
    font-weight: 700
}

.featured-badge small {
    font-size: 9px
}

.featured-content {
    position: absolute;
    z-index: 2;
    right: 35px;
    bottom: 35px;
    left: 35px
}

.featured-content>small,
.featured-side-content>small {
    font-size: 10px;
    color: var(--cream);
    letter-spacing: 1px
}

.featured-content h3 {
    font-size: 29px;
    margin: 10px 0
}

.featured-content p {
    font-size: 14px;
    color: rgba(255, 255, 255, .66)
}

.featured-buy {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 25px
}

.featured-buy>span {
    display: flex;
    flex-direction: column
}

.featured-buy del {
    font-size: 11px;
    color: rgba(255, 255, 255, .45)
}

.featured-buy strong {
    font-size: 18px
}

.featured-buy .add-cart {
    width: auto;
    margin: 0;
    padding: 14px 20px;
    border-color: var(--cream);
    color: var(--navy);
    background: var(--cream)
}

.featured-side {
    height: 600px;
    background: #fff;
    color: var(--navy);
    display: flex;
    flex-direction: column
}

.featured-side-image {
    height: 330px;
    overflow: hidden
}

.featured-side-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(.18) brightness(1.12)
}

.featured-side-content {
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1
}

.featured-side-content>small {
    color: #9b8160
}

.featured-side-content h3 {
    font-size: 22px;
    margin: 7px 0
}

.featured-side-content p {
    font-size: 13px;
    color: #7a848b;
    margin-bottom: 9px
}

.featured-price {
    font-size: 15px;
    font-weight: 600
}

.featured-side-content .add-cart {
    margin-top: auto
}

@media(max-width:991px) {
    .cart-panel {
        position: fixed;
        top: 78px;
        left: 16px;
        right: 16px;
        width: auto;
        max-height: calc(100vh - 95px)
    }

    .cart-items {
        max-height: 45vh
    }

    .featured-main,
    .featured-side {
        height: 560px
    }

    .featured-side {
        margin-top: 0
    }

    .featured-side-image {
        height: 310px
    }
}

@media(max-width:767px) {
    .cart-panel {
        top: 72px;
        left: 10px;
        right: 10px
    }

    .cart-head {
        height: 60px
    }

    .cart-items {
        max-height: 48vh
    }

    .featured-main {
        height: 540px
    }

    .featured-content {
        right: 22px;
        left: 22px;
        bottom: 24px
    }

    .featured-content h3 {
        font-size: 23px
    }

    .featured-content p {
        font-size: 13px
    }

    .featured-buy {
        align-items: stretch;
        flex-direction: column
    }

    .featured-buy .add-cart {
        width: 100%
    }

    .featured-side {
        height: auto
    }

    .featured-side-image {
        height: 300px
    }

    .featured-side-content {
        min-height: 280px
    }

    .add-cart {
        font-size: 14px;
        padding: 13px
    }

    .featured-badge {
        width: 66px;
        height: 66px;
        font-size: 17px
    }
}

#collection {
    background: #f7f4ef
}

.product-grid {
    align-items: stretch
}

.product-col {
    display: flex
}

.product-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d2c8ba;
    transition: transform .3s, box-shadow .3s
}

.product-card:hover {
    border-color: #b9aa96;
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(20, 31, 40, .1)
}

.product-image {
    height: 335px;
    flex: none
}

.product-info {
    display: block;
    padding: 21px 20px 0
}

.product-info>div {
    min-height: 55px
}

.product-info h3 {
    font-size: 18px
}

.product-info>p {
    margin-top: 13px;
    font-size: 15px;
    font-weight: 600;
    color: var(--navy)
}

.product-info>p small {
    font-weight: 400
}

.product-card>.add-cart {
    width: calc(100% - 40px);
    margin: 18px 20px 20px;
    margin-top: auto
}

.badge-new {
    position: absolute;
    right: 17px;
    top: 19px;
    background: var(--cream);
    color: var(--navy);
    padding: 8px 14px;
    font-size: 11px;
    z-index: 2
}

.product-image.warm img {
    filter: sepia(.25) saturate(.8) brightness(1.08)
}

@media(max-width:1199px) and (min-width:992px) {
    .product-image {
        height: 290px
    }

    .product-info {
        padding-inline: 15px
    }

    .product-card>.add-cart {
        width: calc(100% - 30px);
        margin-inline: 15px;
        font-size: 12px
    }
}

@media(max-width:991px) {
    .product-image {
        height: 400px
    }

    .product-info>div {
        min-height: auto
    }

    .product-card>.add-cart {
        margin-top: 20px
    }
}

@media(max-width:767px) {
    #collection .section-head {
        margin-bottom: 30px !important
    }

    .product-col+.product-col {
        margin-top: 8px
    }

    .product-image {
        height: min(420px, 108vw)
    }

    .product-card {
        max-width: 460px;
        margin-inline: auto
    }

    .product-info {
        padding: 22px 20px 0
    }

    .product-info h3 {
        font-size: 20px
    }

    .product-info>p {
        font-size: 16px
    }

    .product-card>.add-cart {
        font-size: 15px;
        margin-bottom: 22px
    }
}

.cart-panel.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto
}

.cart-head>div {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.cart-head>button {
    display: none;
    border: 0;
    background: transparent;
    color: var(--navy);
    width: 40px;
    height: 40px;
    font-size: 18px
}

@media(max-width:991px) {
    body.cart-mobile-open {
        overflow: hidden
    }

    .cart-panel {
        position: fixed !important;
        z-index: 2000;
        inset: 78px 0 0 0 !important;
        width: 100% !important;
        height: calc(100dvh - 78px);
        max-height: none !important;
        display: flex;
        flex-direction: column;
        box-shadow: none;
        transform: translateY(-12px)
    }

    .cart-panel:before {
        display: none
    }

    .cart-head {
        height: 70px;
        flex: none;
        padding-inline: 20px
    }

    .cart-head>button {
        display: grid;
        place-items: center
    }

    .cart-head strong {
        font-size: 17px
    }

    .cart-head span {
        font-size: 12px
    }

    .cart-items {
        max-height: none !important;
        flex: 1;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 10px
    }

    .cart-footer {
        flex: none;
        padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
        box-shadow: 0 -8px 24px rgba(7, 26, 46, .08)
    }

    .cart-footer>a {
        padding: 15px;
        font-size: 14px
    }

    .cart-item {
        grid-template-columns: 74px 1fr auto;
        padding: 15px 18px
    }

    .cart-item img {
        width: 74px;
        height: 82px
    }

    .cart-item-info strong {
        font-size: 14px
    }

    .cart-item-info span {
        font-size: 12px
    }

    .empty-cart {
        padding-top: 20vh
    }
}

@media(max-width:767px) {
    .cart-panel {
        inset: 72px 0 0 0 !important;
        height: calc(100dvh - 72px)
    }

    .cart-head {
        height: 66px
    }

    .cart-item {
        grid-template-columns: 66px 1fr auto;
        gap: 11px;
        padding: 13px 14px
    }

    .cart-item img {
        width: 66px;
        height: 76px
    }

    .cart-footer {
        padding-inline: 16px
    }
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden
}

html {
    overflow-y: auto;
}

body {
    position: relative;
    overflow-y: hidden;
}

img {
    max-width: 100%
}

.hero,
.carousel,
.carousel-inner,
.carousel-item,
.story,
.featured-products,
#collection,
.services,
.journal,
.newsletter,
    footer {
    overflow-x: hidden;
    overflow-y: hidden;
}

.story-image:before {
    max-width: calc(100% + 22px)
}

@supports(overflow:clip) {

    html,
    body {
        overflow-x: clip
    }
}

@media(max-width:767px) {
    .story-image {
        max-width: calc(100% - 28px)
    }

    .story-image:before {
        left: -8px
    }

    .story-image>span {
        left: 0
    }

    .featured-content {
        max-width: calc(100% - 44px)
    }

    .offcanvas {
        max-width: 100vw
    }

    .row {
        margin-left: 0;
        margin-right: 0
    }

    .row>[class*="col-"] {
        min-width: 0
    }
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto
}

body {
    width: 100%;
    max-width: 100%;
    overflow: visible
}

@supports(overflow:clip) {
    html {
        overflow-x: clip
    }

    body {
        overflow: visible
    }
}

@media(max-width:991px) {

    html.cart-mobile-open,
    body.cart-mobile-open {
        overflow: hidden !important
    }
}

@media(min-width:992px) {
    .mega-dropdown:hover>.mega-menu {
        display: block
    }

    .brand-dropdown:hover>.brand-menu {
        display: block
    }

    .brand-dropdown:hover>.nav-link {
        color: var(--cream) !important
    }

    .mega-menu {
        width: min(1380px, calc(100vw - 64px));
        top: 88px !important;
        right: 50% !important;
        left: auto !important;
        transform: translateX(50%) !important;
        min-height: 470px;
        border: 0;
        border-top: 3px solid var(--cream);
        border-radius: 0 0 8px 8px;
        padding: 0;
        background: #fff;
        box-shadow: 0 30px 80px rgba(2, 12, 23, .28);
        overflow: hidden
    }

    .mega-menu>.row {
        min-height: 470px
    }

    .mega-sidebar {
        background: #f8f5ef;
        border-left: 1px solid #e7e0d6;
        padding: 10px 0
    }

    .mega-sidebar>a {
        height: 62px;
        padding: 0 20px;
        display: grid;
        grid-template-columns: 30px 1fr 20px;
        align-items: center;
        color: #384755;
        font-size: 14px;
        border-right: 3px solid transparent;
        transition: .2s
    }

    .mega-sidebar>a>i:first-child {
        font-size: 19px;
        color: #8b7659
    }

    .mega-sidebar>a>i:last-child {
        font-size: 10px;
        color: #a9afb4
    }

    .mega-sidebar>a:hover,
    .mega-sidebar>a.active {
        background:#d2d9e1;
        color: var(--navy);
        border-right-color: #aa906c
    }

    .mega-sidebar>a.active>i:first-child {
        color: #aa7952
    }

    .mega-content {
        padding: 34px 38px 0;
        display: flex;
        flex-direction: column
    }

    .mega-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 11px
    }

    .mega-links h4 {
        font-size: 14px;
        color: var(--navy);
        padding-right: 12px;
        border-right: 2px solid #aa906c;
        margin: 0 0 8px;
        font-weight: 700
    }

    .mega-links a {
        font-size: 12px;
        color: #8a9298;
        transition: .2s
    }

    .mega-links a:hover {
        color: var(--navy);
        transform: translateX(-4px)
    }

    .mega-bottom {
        margin-top: auto;
        min-height: 68px;
        border-top: 1px solid #eee9e2;
        display: flex;
        align-items: center;
        gap: 35px;
        color: #6e7b84;
        font-size: 11px
    }

    .mega-bottom span i {
        color: #a58a65;
        margin-left: 6px;
        font-size: 15px
    }

    .mega-bottom>a {
        margin-right: auto;
        color: var(--navy);
        font-weight: 600
    }

    .mega-bottom>a i {
        margin-right: 8px
    }

    .mega-dropdown>.nav-link:after {
        margin-right: 7px
    }

    .mega-dropdown:hover>.nav-link {
        color: var(--cream) !important
    }
}

.mega-content-grid {
    animation: megaFade .22s ease
}

@keyframes megaFade {
    from {
        opacity: .35;
        transform: translateY(4px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.brand-menu {
    min-width: 250px;
    padding: 8px 14px 12px;
    border: 0;
    border-top: 3px solid var(--cream);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 22px 55px rgba(2, 12, 23, .24)
}

.brand-menu .dropdown-header {
    padding: 10px 8px 12px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 800
}

.brand-menu .dropdown-item {
    padding: 11px 9px;
    color: #52606c;
    font-size: 13px;
    font-weight: 600;
    transition: color .2s, background-color .2s, padding .2s
}

.brand-menu li:nth-child(n+3) .dropdown-item {
    border-top: 1px solid #e9e3da
}

.brand-menu .dropdown-item:hover,
.brand-menu .dropdown-item:focus {
    padding-right: 14px;
    color: var(--navy);
    background: #f8f5ef
}

.mobile-category-list {
    padding: 5px 0 14px
}

.mobile-category {
    border-bottom: 1px solid rgba(255, 255, 255, .09)
}

.mobile-category>button {
    width: 100%;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .86);
    padding: 15px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;
    font-size: 16px
}

.mobile-category>button i {
    font-size: 12px;
    transition: .2s
}

.mobile-category>button[aria-expanded="true"] {
    color: var(--cream)
}

.mobile-category>button[aria-expanded="true"] i {
    transform: rotate(180deg)
}

.mobile-category .mobile-submenu {
    padding: 0 12px 14px;
    grid-template-columns: 1fr 1fr
}

.mobile-category .mobile-submenu a {
    font-size: 14px;
    padding: 10px 0
}

.mega-content-grid .mega-links {
    animation: megaFade .22s ease
}

.recommendations {
    background: #fff
}

.recommend-box {
    border: 1px solid #ded8ce;
    border-radius: 18px;
    padding: 30px 24px 24px
}

.recommend-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 35px;
    margin-bottom: 28px
}

.recommend-head h2 {
    font-size: 30px;
    line-height: 1.7;
    margin: 7px 0 2px
}

.recommend-head h2 em {
    color: #a28a68;
    font-family: "Playfair Display", serif
}

.recommend-head p {
    font-size: 13px;
    color: #7b858d;
    margin: 0
}

.recommend-head>a {
    flex: none;
    background: #f2eee8;
    padding: 11px 16px;
    border-radius: 7px;
    font-size: 12px
}

.recommend-head>a i {
    margin-right: 8px
}

.rail-wrap {
    position: relative
}

.product-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 1fr);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 2px
}

.product-rail::-webkit-scrollbar {
    display: none
}

.rail-card {
    scroll-snap-align: start;
    border: 1px solid #e9e4dc;
    border-radius: 10px;
    padding: 10px;
    min-height: 435px;
    display: flex;
    flex-direction: column;
    background: #fff
}

.rail-image {
    height: 210px;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    background: #eee9e1
}

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

.rail-image>span {
    position: absolute;
    right: 9px;
    top: 9px;
    background: #c94d46;
    color: #fff;
    border-radius: 14px;
    padding: 4px 9px;
    font-size: 9px
}

.rail-card>small {
    font-size: 8px;
    color: #a18a6a;
    letter-spacing: 1px;
    margin-top: 13px
}

.rail-card h3 {
    font-size: 15px;
    margin: 5px 0
}

.rail-card>p {
    font-size: 11px;
    color: #747f87;
    line-height: 1.9;
    height: 43px;
    overflow: hidden;
    margin-bottom: 9px
}

.rail-card del {
    font-size: 10px;
    color: #aaa
}

.rail-card>strong {
    font-size: 15px;
    color: var(--navy);
    display: block;
    margin-top: auto
}

.rail-card>strong small {
    font-size: 8px
}

.rail-card .add-cart {
    margin-top: 12px;
    padding: 10px;
    font-size: 11px
}

.tone-2 img,
.tone-6 img {
    filter: sepia(.25) brightness(1.12)
}

.tone-3 img,
.tone-7 img {
    filter: grayscale(.4) brightness(1.22)
}

.tone-4 img {
    filter: sepia(.18) saturate(.7)
}

.tone-5 img {
    filter: saturate(.6) contrast(1.1)
}

.rail-arrow {
    position: absolute;
    z-index: 3;
    top: 88px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #d8dfe3;
    background: #fff;
    color: #6d7780;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .08)
}

.rail-next {
    right: -19px
}

.rail-prev {
    left: -19px
}

.purchase-benefits {
    padding: 35px 0;
    background: #fff;
    border-top: 1px solid #eee9e2;
    border-bottom: 1px solid #eee9e2
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px
}

.benefit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 8px
}

.benefit>i {
    font-size: 30px;
    color: #a88d68
}

.benefit>div {
    display: flex;
    flex-direction: column
}

.benefit strong {
    font-size: 13px;
    color: var(--navy)
}

.benefit span {
    font-size: 10px;
    color: #8b949b;
    margin-top: 4px
}

@media(max-width:991px) {
    .product-rail {
        grid-auto-columns: minmax(220px, 38%)
    }

    .benefit-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .benefit {
        justify-content: flex-start
    }

    .rail-arrow {
        display: none
    }
}

@media(max-width:767px) {
    .recommendations {
        padding: 55px 0
    }

    .recommend-box {
        padding: 22px 14px;
        border-radius: 13px
    }

    .recommend-head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 22px;
        gap: 15px
    }

    .recommend-head h2 {
        font-size: 25px
    }

    .recommend-head p {
        font-size: 13px;
        line-height: 2
    }

    .product-rail {
        grid-auto-columns: 82%;
        gap: 10px;
        overscroll-behavior-inline: contain
    }

    .rail-card {
        min-height: 450px
    }

    .rail-image {
        height: 235px
    }

    .rail-card h3 {
        font-size: 17px
    }

    .rail-card>p {
        font-size: 12px
    }

    .rail-card .add-cart {
        font-size: 13px
    }

    .purchase-benefits {
        padding: 25px 0
    }

    .benefit-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5px
    }

    .benefit {
        padding: 14px 5px;
        align-items: flex-start
    }

    .benefit>i {
        font-size: 25px
    }

    .benefit strong {
        font-size: 12px
    }

    .benefit span {
        font-size: 9px
    }

    .benefit:last-child {
        grid-column: 1/-1;
        justify-content: center;
        border-top: 1px solid #eee9e2
    }
}

.product-rail {
    grid-auto-columns: calc((100% - 48px)/5);
    cursor: grab;
    user-select: none
}

.product-rail.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none
}

.product-rail.is-dragging * {
    pointer-events: none
}

@media(max-width:991px) {
    .product-rail {
        grid-auto-columns: minmax(220px, 38%)
    }
}

@media(max-width:767px) {
    .product-rail {
        grid-auto-columns: 82%
    }
}

footer .footer-main h4 {
    font-size: 16px
}

footer .footer-main>.col-lg a {
    font-size: 14px;
    line-height: 1.9
}

footer .footer-main p {
    font-size: 15px;
    line-height: 2
}

footer .copyright {
    font-size: 12px;
    line-height: 1.9
}

@media(max-width:767px) {
    footer .footer-main h4 {
        font-size: 18px
    }

    footer .footer-main>.col-lg a {
        font-size: 16px
    }

    footer .footer-main p {
        font-size: 16px
    }

    footer .copyright {
        font-size: 13px
    }
}

@media(max-width:767px) {
    html {
        scrollbar-width: none
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        right: 16px;
        left: 16px;
        width: auto;
        gap: 0;
        padding: 18px 0 0;
        text-align: center
    }

    .hero-stats div {
        min-width: 0;
        align-items: center;
        padding-inline: 8px
    }

    .hero-stats div+div {
        padding-right: 8px;
        border-right: 1px solid rgba(255, 255, 255, .18)
    }

    .hero-stats strong {
        font-size: 15px;
        white-space: nowrap
    }

    .hero-stats span {
        font-size: 10px;
        white-space: nowrap;
        overflow: visible
    }

    .hero-stats div:first-child {
        border-right: 0
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0
    }
}

.hero em,
.section-head em,
.story em,
.journal em,
.recommend-head h2 em {
    font-family: "Noto Kufi Arabic", "Vazirmatn", sans-serif;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -1.5px
}

.account-wrap {
    position: relative;
    padding-left: 12px;
    margin-left: 4px;
    border-left: 1px solid rgba(255, 255, 255, .18)
}

.account-btn {
    width: 48px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px
}

.account-btn .bi-person {
    font-size: 23px
}

.account-btn .bi-chevron-down {
    font-size: 9px;
    transition: .2s
}

.account-wrap.open .account-btn .bi-chevron-down {
    transform: rotate(180deg)
}

.account-panel {
    position: absolute;
    top: calc(100% + 25px);
    left: 0;
    width: 315px;
    background: #fff;
    color: #303c54;
    border-radius: 10px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: .22s;
    overflow: hidden
}

.account-panel.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto
}

.account-panel:before {
    content: "";
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px
}

.account-user {
    padding: 18px;
    display: grid;
    grid-template-columns: 43px 1fr 20px;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid #eee
}

.account-avatar {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cream);
    color: var(--navy);
    font-weight: 700
}

.account-user>div:nth-child(2) {
    display: flex;
    flex-direction: column
}

.account-user strong {
    font-size: 14px
}

.account-user span {
    font-size: 10px;
    color: #8a939c;
    margin-top: 3px
}

.account-user>i {
    font-size: 12px;
    color: #8d959c
}

.account-plan {
    height: 52px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fcfaf7;
    border-bottom: 1px solid #eee
}

.account-plan span {
    font-size: 12px;
    color: #a18a68
}

.account-plan span i {
    margin-left: 7px
}

.account-plan b {
    font-size: 10px;
    color: #b6449b
}

.account-plan b i {
    font-size: 8px;
    margin-right: 5px
}

.account-links {
    display: flex;
    flex-direction: column
}

.account-links>a {
    height: 55px;
    padding: 0 18px;
    display: grid;
    grid-template-columns: 27px 1fr auto;
    align-items: center;
    border-bottom: 1px solid #eee;
    color: #3f4960;
    font-size: 13px
}

.account-links>a:hover {
    background: #f8f5ef;
    color: var(--navy)
}

.account-links>a>i {
    font-size: 19px
}

.account-links>a>b {
    min-width: 22px;
    height: 22px;
    border-radius: 12px;
    background: #e9ddca;
    color: var(--navy);
    display: grid;
    place-items: center;
    font-size: 10px
}

.account-links>a:last-child {
    border-bottom: 0;
    color: #8b5555
}

@media(max-width:991px) {
    .account-wrap {
        padding-left: 7px;
        margin-left: 2px
    }

    .account-btn {
        width: 40px
    }

    .account-panel {
        position: fixed !important;
        z-index: 2100;
        top: 78px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-height: calc(100dvh - 90px);
        overflow-y: auto
    }

    .account-panel:before {
        display: none
    }
}

@media(max-width:767px) {
    .account-panel {
        top: 72px !important;
        right: 10px !important;
        left: 10px !important
    }

    .account-btn {
        width: 36px
    }

    .account-btn .bi-person {
        font-size: 21px
    }

    .account-wrap {
        padding-left: 4px
    }

    .account-user {
        padding: 16px
    }

    .account-links>a {
        height: 53px;
        font-size: 14px
    }
}

.footer-main>div:not(:first-child) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px
}

.footer-main>div:not(:first-child) a {
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .58)
}

.footer-main>div:not(:first-child) a:hover {
    color: var(--cream)
}

@media(max-width:767px) {
    .footer-main>div:not(:first-child) a {
        font-size: 16px
    }
}

.stores {
    background: #f7f4ef
}

.store-card {
    height: 100%;
    min-height: 315px;
    background: #fff;
    border: 1px solid #e4ded5;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    transition: .3s
}

.store-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(7, 26, 46, .09)
}

.store-card>span {
    font-size: 10px;
    color: var(--navy);
    background: var(--cream2);
    padding: 6px 10px
}

.store-card>i {
    font-size: 34px;
    color: #a08763;
    margin: 27px 0 17px
}

.store-card h3 {
    font-size: 19px;
    margin: 0 0 12px
}

.store-card p {
    font-size: 14px;
    color: #737f87;
    line-height: 2;
    margin: 0 0 25px
}

.store-card>a {
    margin-top: auto;
    font-size: 12px;
    color: var(--navy);
    border-bottom: 1px solid #b8aa96;
    padding-bottom: 6px
}

.store-card>a i {
    margin-right: 9px
}

.store-contact {
    margin-top: 28px;
    background: var(--navy);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 25px 32px
}

.store-contact>div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px
}

.store-contact>div+div {
    border-right: 1px solid rgba(255, 255, 255, .17)
}

.store-contact span {
    font-size: 12px;
    color: rgba(255, 255, 255, .58)
}

.store-contact a {
    font-size: 20px;
    color: var(--cream);
    direction: ltr
}

@media(max-width:767px) {
    .store-card {
        min-height: 285px;
        padding: 25px
    }

    .store-contact {
        grid-template-columns: 1fr;
        padding: 8px 20px
    }

    .store-contact>div {
        padding: 18px 0;
        flex-direction: column;
        gap: 5px
    }

    .store-contact>div+div {
        border-right: 0;
        border-top: 1px solid rgba(255, 255, 255, .17)
    }

    .store-contact a {
        font-size: 18px
    }
}

.hero h1,
.hero h2 {
    font-size: clamp(48px, 5.5vw, 76px);
    line-height: 1.3;
    letter-spacing: -2px
}

.section-head h2,
.story h2,
.newsletter h2 {
    font-size: clamp(34px, 3.7vw, 48px);
    line-height: 1.55;
    letter-spacing: -1px
}

.recommend-head h2 {
    font-size: 27px
}

.featured-content h3 {
    font-size: 25px
}

.journal-main h3 {
    font-size: 22px
}

@media(max-width:767px) {

    .hero h1,
    .hero h2 {
        font-size: clamp(37px, 10vw, 44px);
        line-height: 1.45;
        letter-spacing: -1px
    }

    .section-head h2,
    .story h2,
    .newsletter h2 {
        font-size: 29px;
        line-height: 1.7
    }

    .recommend-head h2 {
        font-size: 23px
    }

    .featured-content h3 {
        font-size: 21px
    }

    .journal-main h3 {
        font-size: 19px
    }
}

.swiper-slide:first-child h1 {
    font-size: clamp(42px, 4.7vw, 64px)
}

.journal .section-head h2 {
    font-size: clamp(31px, 3.2vw, 42px)
}

.newsletter h2 {
    font-size: 34px
}

@media(max-width:767px) {
    .swiper-slide:first-child h1 {
        font-size: 36px
    }

    .journal .section-head h2 {
        font-size: 27px
    }

    .newsletter h2 {
        font-size: 27px
    }
}

.account-btn.logged-out {
    width: 132px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 10px;
    padding: 0 12px
}

.account-btn .account-label {
    font-size: 12px;
    white-space: nowrap
}

.account-btn.logged-out .bi-person {
    font-size: 20px
}

.modal-backdrop.show {
    opacity: .62;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.login-modal .modal-dialog {
    width: min(440px, calc(100% - 28px));
    margin-inline: auto
}

.login-modal .modal-content {
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 18px;
    padding: 30px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 30px 90px rgba(2, 12, 23, .35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden
}

.login-close {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f2eee8;
    color: var(--navy)
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e8e2d9
}

.login-brand>span {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--navy);
    color: var(--cream);
    font-weight: 700;
    font-size: 20px
}

.login-brand>div {
    display: flex;
    flex-direction: column
}

.login-brand strong {
    font-size: 15px
}

.login-brand small {
    font-size: 10px;
    color: #8b949b;
    margin-top: 3px
}

.login-step {
    padding-top: 26px
}

.login-step h2 {
    font-size: 21px;
    line-height: 1.7;
    margin: 0 0 7px
}

.login-step>p {
    font-size: 13px;
    line-height: 2;
    color: #747f87;
    margin-bottom: 23px
}

.login-step label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px
}

.login-input {
    display: flex;
    align-items: center;
    border: 1px solid #d8d2ca;
    border-radius: 9px;
    padding: 0 13px;
    background: #fff
}

.login-input i {
    font-size: 20px;
    color: #9b8564
}

.login-input input {
    height: 52px;
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0 11px;
    background: transparent;
    direction: ltr;
    text-align: right
}

.login-step form>button {
    width: 100%;
    height: 52px;
    margin-top: 14px;
    border: 0;
    border-radius: 9px;
    background: var(--navy);
    color: #fff;
    font-size: 14px;
    font-weight: 600
}

.login-step form>button i {
    margin-right: 12px
}

.login-error {
    display: block;
    min-height: 20px;
    color: #b64242;
    font-size: 10px;
    padding-top: 5px
}

.login-back {
    border: 0;
    background: transparent;
    color: #8b7659;
    padding: 0 0 12px;
    font-size: 11px
}

.otp-input {
    width: 100%;
    height: 58px;
    border: 1px solid #d8d2ca;
    border-radius: 9px;
    outline: 0;
    text-align: center;
    direction: ltr;
    font-size: 25px;
    letter-spacing: 12px;
    background: #fff
}

.resend-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    font-size: 10px;
    color: #8b949b
}

.resend-code button {
    border: 0;
    background: transparent;
    color: #a28762;
    font-size: 11px
}

.resend-code button:disabled {
    color: #aaa
}

.login-modal .modal-content:before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(232, 220, 199, .3);
    left: -80px;
    top: -90px;
    pointer-events: none
}

@media(max-width:767px) {
    .navbar-brand {
        right: 62px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        font-size: 17px
    }

    .navbar-brand span {
        width: 32px;
        height: 32px
    }

    .account-btn.logged-out {
        width: 112px;
        height: 42px;
        padding: 0 9px
    }

    .account-btn .account-label {
        font-size: 11px
    }

    .nav-tools {
        left: 10px
    }

    .login-modal .modal-dialog {
        width: calc(100% - 20px);
        margin: 10px
    }

    .login-modal .modal-content {
        min-height: min(520px, calc(100dvh - 20px));
        justify-content: center;
        padding: 25px 22px;
        border-radius: 16px
    }

    .login-step h2 {
        font-size: 19px
    }

    .login-step>p {
        font-size: 12px
    }

    .login-close {
        top: 14px;
        left: 14px
    }
}

.cart-btn.cart-icon-theme {
    position: relative;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #d8dee5;
    border-radius: 9px;
    background: #fff;
    color: #1d2935;
    box-shadow: 0 2px 8px rgba(4, 17, 30, .05);
    transition: transform .2s, border-color .2s, box-shadow .2s
}

.cart-btn.cart-icon-theme:hover,
.cart-wrap.open .cart-btn.cart-icon-theme {
    color: var(--navy);
    border-color: #9ba9b6;
    box-shadow: 0 5px 16px rgba(4, 17, 30, .12);
    transform: translateY(-1px)
}

.cart-btn.cart-icon-theme>i {
    font-size: 20px;
    line-height: 1
}

.cart-btn.cart-icon-theme>b {
    position: absolute;
    left: -5px;
    bottom: -9px;
    width: 22px;
    height: 23px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--navy2);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 7px rgba(0, 77, 124, .34);
}

@media(max-width:767px) {
    .cart-btn.cart-icon-theme {
        width: 40px;
        height: 40px;
        border-radius: 8px
    }

    .cart-btn.cart-icon-theme>i {
        font-size: 19px
    }

    .cart-btn.cart-icon-theme>b {
        width: 20px;
        height: 20px;
        left: -4px;
        bottom: -4px
    }
}

.account-btn,
.account-btn.logged-out {
    width: 136px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d8dee5;
    border-radius: 9px;
    background: #fff;
    color: #1d2935;
    box-shadow: 0 2px 8px rgba(4, 17, 30, .05);
    transition: transform .2s, border-color .2s, box-shadow .2s
}

.account-btn:hover,
.account-wrap.open .account-btn {
    color: var(--navy);
    border-color: #9ba9b6;
    box-shadow: 0 5px 16px rgba(4, 17, 30, .12);
    transform: translateY(-1px)
}

.account-btn .account-label {
    font-size: 13.5px;
    font-weight: 600
}

.account-btn .bi-person,
.account-btn.logged-out .bi-person {
    font-size: 20px
}

.account-btn .bi-chevron-down {
    font-size: 10px
}

@media(max-width:767px) {

    .account-btn,
    .account-btn.logged-out {
        width: 118px;
        height: 40px;
        padding: 0 9px
    }

    .account-btn .account-label {
        font-size: 12.5px
    }

    .account-btn .bi-person,
    .account-btn.logged-out .bi-person {
        font-size: 19px
    }
}

.testimonials {
    background: #f8f5ef;
    overflow: hidden
}

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

.testimonial-intro h2 {
    font-size: clamp(34px, 3.7vw, 48px);
    line-height: 1.55;
    letter-spacing: -1px;
    margin: 8px 0 0
}

.testimonial-intro h2 em {
    color: #a28a68;
    font-family: "Noto Kufi Arabic", "Vazirmatn", sans-serif;
    font-style: normal;
    font-weight: 600
}

.rating-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #e5ddd1;
    border-radius: 14px;
    padding: 18px 24px;
    min-width: 360px
}

.rating-score {
    font-family: "Estedad", "Vazirmatn", Tahoma, sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    color: var(--navy)
}

.rating-summary>div:last-child {
    display: flex;
    flex-direction: column
}

.rating-stars {
    display: flex;
    gap: 4px;
    color: #c49b62;
    font-size: 13px
}

.rating-summary strong {
    font-size: 14px;
    color: var(--navy);
    margin-top: 7px
}

.rating-summary span {
    font-size: 12px;
    color: #667987;
    margin-top: 3px
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.testimonial-card {
    position: relative;
    min-height: 310px;
    background: #fff;
    border: 1px solid #e4ddd2;
    border-radius: 14px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 30px rgba(7, 26, 46, .04);
    transition: transform .25s, box-shadow .25s
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 38px rgba(7, 26, 46, .1)
}

.testimonial-card.featured-review {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy)
}

.quote-mark {
    position: absolute;
    left: 25px;
    top: 7px;
    font-family: "Playfair Display", serif;
    font-size: 78px;
    line-height: 1;
    color: #e4d6bd;
    opacity: .55
}

.testimonial-card .rating-stars {
    position: relative;
    font-size: 11px
}

.testimonial-card p {
    position: relative;
    font-size: 16px;
    line-height: 2.2;
    color: #405467;
    font-weight: 500;
    margin: 22px 0 28px
}

.testimonial-card.featured-review p {
    color: rgba(255, 255, 255, .76)
}

.reviewer {
    display: grid;
    grid-template-columns: 42px 1fr 18px;
    gap: 10px;
    align-items: center;
    margin-top: auto
}

.reviewer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700
}

.avatar-rose {
    background: #edd5d1;
    color: #854c46
}

.avatar-navy {
    background: #dce6ef;
    color: #1b486c
}

.avatar-cream {
    background: #eee1c8;
    color: #806844
}

.reviewer>div {
    display: flex;
    flex-direction: column
}

.reviewer strong {
    font-size: 13px;
    color: #102b63
}

.featured-review .reviewer strong {
    color: #fff
}

.reviewer small {
    font-size: 11px;
    color: #667987;
    margin-top: 3px
}

.featured-review .reviewer small {
    color: rgba(255, 255, 255, .52)
}

.reviewer>i {
    font-size: 16px;
    color: #b59161
}

@media(max-width:991px) {
    .testimonial-intro {
        align-items: flex-start;
        flex-direction: column
    }

    .testimonial-grid {
        grid-template-columns: 1fr 1fr
    }

    .testimonial-card.featured-review {
        grid-column: 1/-1
    }
}

@media(max-width:767px) {
    .testimonials {
        padding: 60px 0
    }

    .testimonial-intro {
        gap: 20px;
        margin-bottom: 28px
    }

    .testimonial-intro h2 {
        font-size: 29px;
        line-height: 1.7
    }

    .rating-summary {
        width: 100%;
        min-width: 0;
        padding: 15px
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .testimonial-card,
    .testimonial-card.featured-review {
        grid-column: auto;
        min-height: 280px;
        padding: 25px
    }

    .testimonial-card p {
        font-size: 15px;
        line-height: 2.2;
        margin: 18px 0 23px
    }
}

.testimonial-tools {
    display: flex;
    align-items: center;
    gap: 12px
}

.testimonial-controls {
    display: flex;
    gap: 7px
}

.testimonial-controls button {
    width: 42px;
    height: 42px;
    border: 1px solid #d7d0c5;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    transition: .2s
}

.testimonial-controls button:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff
}

.testimonial-slider-wrap {
    overflow: hidden;
    padding: 2px
}

.testimonial-slider {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none
}

.testimonial-slider::-webkit-scrollbar {
    display: none
}

.testimonial-slider .testimonial-card {
    flex: 0 0 calc((100% - 36px)/3);
    scroll-snap-align: start
}

.testimonial-slider .testimonial-card.featured-review {
    grid-column: auto
}

@media(max-width:991px) {
    .testimonial-tools {
        width: 100%;
        justify-content: space-between
    }

    .testimonial-slider .testimonial-card,
    .testimonial-slider .testimonial-card.featured-review {
        flex-basis: calc((100% - 18px)/2)
    }
}

@media(max-width:767px) {
    .testimonial-tools {
        align-items: flex-end;
        gap: 10px
    }

    .rating-summary {
        width: auto;
        flex: 1
    }

    .testimonial-controls button {
        width: 38px;
        height: 38px
    }

    .testimonial-slider {
        gap: 12px
    }

    .testimonial-slider .testimonial-card,
    .testimonial-slider .testimonial-card.featured-review {
        flex-basis: 100%
    }
}

@media(max-width:767px) {
    .navbar>.container {
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        align-items: center;
        gap: 7px;
        padding-inline: 10px
    }

    .navbar-brand {
        position: static !important;
        grid-column: 2;
        justify-self: center;
        transform: none !important;
        gap: 6px;
        font-size: 15px;
        white-space: nowrap
    }

    .navbar-brand span {
        width: 29px;
        height: 29px;
        font-size: 15px
    }

    .navbar-toggler {
        position: static !important;
        grid-column: 1;
        justify-self: start;
        transform: none !important;
        width: 40px;
        height: 40px;
        padding: 0
    }

    .nav-tools {
        position: static !important;
        grid-column: 3;
        justify-self: end;
        transform: none !important;
        gap: 5px
    }

    .account-wrap {
        padding-left: 0;
        margin-left: 0;
        border-left: 0
    }

    .account-btn,
    .account-btn.logged-out {
        width: 100px;
        height: 38px;
        padding: 0 6px;
        gap: 4px
    }

    .account-btn .account-label {
        font-size: 10.5px
    }

    .account-btn .bi-person,
    .account-btn.logged-out .bi-person {
        font-size: 17px
    }

    .account-btn .bi-chevron-down {
        font-size: 8px
    }

    .cart-btn.cart-icon-theme {
        width: 38px;
        height: 38px
    }

    .cart-btn.cart-icon-theme>i {
        font-size: 18px
    }

    .cart-btn.cart-icon-theme>b {
        width: 22px;
        height: 23px;
        font-size: 12px;
        left: -5px;
        bottom: -9px;
    }
}

.testimonial-slider-wrap {
    overflow: visible
}

.testimonial-slider {
    display: block;
    overflow: visible;
    scroll-snap-type: none
}

.testimonial-slider .owl-stage {
    display: flex
}

.testimonial-slider .owl-item {
    padding: 2px
}

.testimonial-slider .owl-item .testimonial-card {
    min-height: 310px;
    flex: none
}

.testimonial-slider .owl-nav {
    display: flex;
    justify-content: space-between;
    position: absolute;
    right: -21px;
    left: -21px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none
}

.testimonial-slider .owl-nav button {
    width: 42px;
    height: 42px;
    border: 1px solid #d7d0c5 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--navy) !important;
    box-shadow: 0 6px 18px rgba(7, 26, 46, .1);
    pointer-events: auto
}

.testimonial-slider .owl-nav button:hover {
    background: var(--navy) !important;
    color: #fff !important
}

.testimonial-slider .owl-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 25px
}

.testimonial-slider .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1c6b7;
    transition: width .25s, background .25s
}

.testimonial-slider .owl-dot.active span {
    width: 28px;
    border-radius: 8px;
    background: var(--navy)
}

@media(max-width:991px) {
    .testimonial-slider .owl-nav {
        right: -14px;
        left: -14px
    }
}

@media(max-width:767px) {
    .testimonial-slider .owl-item .testimonial-card {
        min-height: 280px
    }

    .testimonial-slider .owl-nav {
        display: none
    }

    .testimonial-slider .owl-dots {
        margin-top: 20px
    }
}

@media(max-width:767px) {
    .navbar>.container {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding-inline: 14px
    }

    .navbar-brand {
        display: none !important
    }

    .navbar-toggler,
    .nav-tools {
        position: static !important;
        transform: none !important
    }

    .navbar-toggler {
        width: 40px;
        height: 40px;
        padding: 0
    }

    .nav-tools {
        gap: 6px
    }

    .account-btn,
    .account-btn.logged-out {
        width: 106px;
        height: 40px
    }

    .cart-btn.cart-icon-theme {
        width: 40px;
        height: 40px
    }
}

.product-rail {
    display: block !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    cursor: default !important
}

.product-rail .owl-stage {
    display: flex
}

.product-rail .owl-item {
    padding: 2px
}

.product-rail .owl-item .rail-card {
    min-height: 510px;
    flex: none
}

.product-rail .owl-nav {
    display: flex;
    justify-content: space-between;
    position: absolute;
    right: -21px;
    left: -21px;
    top: 42%;
    transform: translateY(-50%);
    pointer-events: none
}

.product-rail .owl-nav button {
    width: 42px;
    height: 42px;
    border: 1px solid #d7d0c5 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--navy) !important;
    box-shadow: 0 6px 18px rgba(7, 26, 46, .1);
    pointer-events: auto
}

.product-rail .owl-nav button:hover {
    background: var(--navy) !important;
    color: #fff !important
}

.product-rail .owl-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 24px
}

.product-rail .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1c6b7;
    transition: width .25s, background .25s
}

.product-rail .owl-dot.active span {
    width: 28px;
    border-radius: 8px;
    background: var(--navy)
}

@media(max-width:1199px) {
    .product-rail .owl-item .rail-card {
        min-height: 480px
    }

    .product-rail .owl-nav {
        right: -14px;
        left: -14px
    }
}

@media(max-width:767px) {
    .product-rail .owl-item .rail-card {
        min-height: 0
    }

    .product-rail .owl-nav {
        display: none
    }

    .product-rail .owl-dots {
        margin-top: 20px
    }
}

.recommend-box {
    overflow: hidden
}

.rail-wrap {
    overflow: hidden;
    padding: 2px
}

.product-rail {
    width: 100% !important;
    max-width: 100%;
    overflow: hidden !important
}

.product-rail .owl-stage-outer {
    width: 100%;
    overflow: hidden !important
}

.product-rail .owl-stage {
    display: flex !important
}

.product-rail .owl-item {
    min-width: 0
}

.product-rail .owl-nav {
    right: 8px;
    left: 8px
}

.product-rail .owl-item .rail-card {
    min-height: 510px;
    padding: 14px
}

.product-rail .owl-item .rail-image {
    height: 270px
}

.product-rail .owl-item .rail-card>small {
    font-size: 9px;
    margin-top: 15px
}

.product-rail .owl-item .rail-card h3 {
    font-size: 17px;
    margin: 7px 0
}

.product-rail .owl-item .rail-card>p {
    height: 50px;
    font-size: 12px;
    margin-bottom: 12px
}

.product-rail .owl-item .rail-card>strong {
    font-size: 17px
}

.product-rail .owl-item .rail-card .add-cart {
    padding: 12px;
    font-size: 12px
}

@media(max-width:991px) {
    .product-rail .owl-item .rail-image {
        height: 300px
    }
}

@media(max-width:767px) {
    .product-rail .owl-item .rail-card {
        min-height: 0;
        padding: 12px
    }

    .product-rail .owl-item .rail-image {
        height: 300px
    }

    .product-rail .owl-item .rail-card h3 {
        font-size: 18px
    }

    .product-rail .owl-item .rail-card>p {
        height: auto
    }

    .product-rail .owl-item .rail-card .add-cart {
        font-size: 13px
    }
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
.brand,
.btn,
.nav-link,
.account-btn,
.product-tabs button,
.hero em,
.section-head em,
.story em,
.journal em,
.recommend-head h2 em,
.testimonial-intro h2 em {
    font-family: "Estedad", "Vazirmatn", Tahoma, sans-serif
}

.trust-badges {
    display: flex;
    gap: 8px;
    margin-top: 24px
}

.trust-badge {
width: 115px;
    height: 115px;
    border-radius: 7px;
    background-image: url(../images/trust-badges.png);
    background-repeat: no-repeat;
    background-size: 334px;
    background-color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .13);
}

.trust-badge-enamad {
    background-position: 0 center
}

.trust-badge-license {
    background-position: center center
}

.trust-badge-samandehi {
    background-position: right center
}

@media(max-width:767px) {
    .trust-badges {
        gap: 6px;
        margin-top: 22px
    }

    .trust-badge {
        width: 92px;
        height: 108px;
        background-size: 312px 115px
    }
}

.testimonial-slider-wrap {
    position: relative;
    overflow: hidden;
}

.testimonial-slider .owl-nav,
.product-rail .owl-nav {
    right: 8px !important;
    left: 8px !important;
}

.testimonial-slider .owl-nav button,
.product-rail .owl-nav button {
    flex: 0 0 42px;
}

@media(max-width:767px) {
    .testimonial-slider-wrap {
        overflow: hidden;
    }
}

.testimonial-slider .owl-dots,
.product-rail .owl-dots {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 26px;
    direction: ltr;
}

.testimonial-slider .owl-dots .owl-dot,
.product-rail .owl-dots .owl-dot {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}

.testimonial-slider .owl-dots .owl-dot span,
.product-rail .owl-dots .owl-dot span {
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    border: 1px solid rgba(7, 26, 46, .28) !important;
    border-radius: 999px !important;
    background: #d7d0c5 !important;
    transition: width .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.testimonial-slider .owl-dots .owl-dot:hover span,
.product-rail .owl-dots .owl-dot:hover span {
    border-color: var(--navy) !important;
    background: #a79a89 !important;
    transform: scale(1.15);
}

.testimonial-slider .owl-dots .owl-dot.active span,
.product-rail .owl-dots .owl-dot.active span {
    width: 28px !important;
    border-color: var(--navy) !important;
    background: var(--navy) !important;
}

@media(max-width:767px) {
    .testimonial-slider .owl-dots,
    .product-rail .owl-dots {
        margin-top: 20px;
    }
}

/* Readability pass */
.eyebrow {
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.section-head p,
.story-copy p,
.service p,
.recommend-head p,
.featured-content p,
.featured-side-content p,
.newsletter p {
    font-size: 16px;
    line-height: 2.1;
}

.section-head > a,
.journal .section-head > a,
.story-link,
.recommend-head > a,
.store-card > a {
    font-size: 15px !important;
    font-weight: 600;
}

.product-info small,
.journal-main small,
.journal-list small,
.rail-card > small,
.featured-content > small,
.featured-side-content > small,
.service > span,
.store-card > span {
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: 0;
}

.product-info h3,
.rail-card h3,
.store-card h3 {
    font-size: 20px;
}

.product-info p,
.rail-card > p,
.rail-card > strong,
.featured-price {
    font-size: 16px;
}

.journal-main h3 {
    font-size: 28px;
    line-height: 1.75;
}

.journal-list article {
    gap: 28px;
}

.journal-list article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    min-width: 38px;
    font-family: "Estedad", "Vazirmatn", Tahoma, sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: #765b34;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    text-align: center;
}

.journal-list small {
    color: #9a6b1f;
    font-family: "Estedad", "Vazirmatn", Tahoma, sans-serif;
    font-size: 15px !important;
    font-weight: 700;
}

.journal-list h4 {
    font-size: 18px;
    line-height: 1.9;
    font-weight: 600;
    color: #172c4d;
}

.footer-main p,
.footer-main > .col-lg a {
    font-size: 14px;
    line-height: 2;
}

.footer-main h4 {
    font-size: 16px;
}

.copyright {
    font-size: 13px;
    line-height: 1.9;
}

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

    .section-head p,
    .story-copy p,
    .service p,
    .recommend-head p,
    .featured-content p,
    .featured-side-content p,
    .newsletter p {
        font-size: 15px;
    }

    .journal-main h3 {
        font-size: 23px;
    }

    .journal-list h4 {
        font-size: 16px;
    }

    .journal-list small {
        font-size: 14px !important;
    }

    .footer-main h4 {
        font-size: 15px;
    }

    .footer-main p,
    .footer-main > .col-lg a,
    .copyright {
        font-size: 13px;
    }
}

.brands-section {
    padding: 46px 0 52px;
    background: #fff;
    border-top: 1px solid #eee8df;
    border-bottom: 1px solid #eee8df;
}

.brands-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.brands-heading h2 {
    flex: 0 0 auto;
    margin: 0;
    color: var(--navy);
    font-size: 17px;
    font-weight: 700;
}

.brands-line {
    height: 1px;
    flex: 1;
    background: #b6a58d;
}

.brands-slider {
    direction: ltr;
}

.brands-slider .owl-stage {
    display: flex;
}

.brands-slider .owl-item {
    display: flex;
    height: auto;
}

.brand-card {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 126px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 12px 14px;
    border: 1px solid #eee8df;
    border-radius: 14px;
    background: #fff;
    color: var(--navy);
    box-shadow: 0 5px 18px rgba(7, 26, 46, .05);
    text-align: center;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.brand-card:hover {
    border-color: #b79b73;
    box-shadow: 0 10px 24px rgba(7, 26, 46, .1);
    transform: translateY(-4px);
}

.brand-mark {
    display: flex;
    min-height: 45px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #1b1b1b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.1;
}

.brand-image-placeholder {
    display: flex;
    width: 100%;
    min-height: 124px;
    align-items: center;
    justify-content: center;
    border: 1px dashed #c8b99f;
    border-radius: 10px;
    background: linear-gradient(135deg, #faf8f4, #f1eadf);
    color: #a18b6c;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.brand-mark small {
    margin-top: 5px;
    font-family: inherit;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 1.5px;
}

.brand-patek {
    font-size: 13px;
    letter-spacing: .5px;
}

.brand-police {
    font-size: 25px;
    letter-spacing: 3px;
}

.brand-polo {
    font-size: 25px;
    font-style: italic;
    letter-spacing: 2px;
}

.brand-exchange {
    font-size: 12px;
    letter-spacing: .5px;
}

.brand-beverly,
.brand-santa {
    font-size: 11px;
    letter-spacing: .5px;
}

.brand-card > strong {
    overflow: hidden;
    max-width: 100%;
    color: #66717a;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media(max-width:767px) {
    .brands-section {
        padding: 34px 0 40px;
    }

    .brands-heading {
        gap: 10px;
        margin-bottom: 20px;
    }

    .brands-heading h2 {
        font-size: 15px;
    }

    .brand-card {
        min-height: 160px;
        padding: 18px 8px 12px;
    }

    .brand-image-placeholder {
        min-height: 112px;
    }

    .brand-mark {
        font-size: 13px;
    }

    .brand-police,
    .brand-polo {
        font-size: 20px;
    }

    .brand-card > strong {
        font-size: 12px;
    }
}

@media(min-width:768px) {
    .product-card .favorite,
    .showcase-card .favorite,
    .rail-card .favorite {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px) scale(.9);
        transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background-color .25s ease;
    }

    .product-card:hover .favorite,
    .showcase-card:hover .favorite,
    .rail-card:hover .favorite,
    .product-card .favorite.active,
    .showcase-card .favorite.active,
    .rail-card .favorite.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .product-card > .add-cart {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: background-color .25s ease, color .25s ease;
    }
}

.category-showcase {
    padding: 86px 0;
}

.category-showcase-offer {
    background: #f7f1e8;
}

.category-showcase-best {
    background: #fff;
}

.category-showcase-new {
    background: #eef3f5;
}

.category-showcase-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
}

.category-showcase-head h2 {
    margin: 10px 0 0;
    color: var(--navy);
    font-size: clamp(30px, 3.2vw, 44px);
}

.category-showcase-head h2 em {
    color: #a3865d;
}

.category-showcase-head > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #a58d6c;
    padding-bottom: 7px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.category-showcase-head > a i {
    font-size: 17px;
}

.showcase-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid #e5ddd1;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7, 26, 46, .07);
    transition: transform .3s ease, box-shadow .3s ease;
}

.showcase-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 38px rgba(7, 26, 46, .13);
}

.showcase-card .product-image {
    height: 310px;
}

.showcase-card-body {
    display: flex;
    min-height: 185px;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 22px 22px;
}

.showcase-card-body small {
    color: #9d8666;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.showcase-card-body h3 {
    margin: 7px 0 12px;
    color: var(--navy);
    font-size: 21px;
}

.showcase-card-body strong {
    color: var(--navy);
    font-size: 16px;
}

.showcase-card-body .add-cart {
    margin-top: auto;
    padding: 10px 14px;
    font-size: 13px;
}

.showcase-card-body .add-cart:hover,
.showcase-card-body .add-cart.added {
    background: var(--navy);
}

.category-slider {
    display: block !important;
    overflow: visible !important;
}

.category-slider .owl-stage {
    display: flex;
}

.category-slider .owl-item {
    display: flex;
    padding: 2px;
}

.category-slider .owl-item > div {
    display: flex;
    width: 100%;
}

.category-slider .showcase-card {
    width: 100%;
}

.category-slider .owl-nav {
    display: flex;
    position: absolute;
    top: 42%;
    right: -20px;
    left: -20px;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.category-slider .owl-nav button {
    width: 42px;
    height: 42px;
    border: 1px solid #d7d0c5 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--navy) !important;
    box-shadow: 0 6px 18px rgba(7, 26, 46, .12);
    pointer-events: auto;
}

.category-slider .owl-nav button:hover {
    background: var(--navy) !important;
    color: #fff !important;
}

.category-slider .owl-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    direction: rtl;
}

.product-rail .owl-dots,
.testimonial-slider .owl-dots {
    direction: rtl;
}

.category-slider .owl-dot {
    display: inline-flex !important;
    width: 24px !important;
    height: 24px !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.category-slider .owl-dot span {
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #d7d0c5 !important;
    transition: width .25s ease, background-color .25s ease;
}

.category-slider .owl-dot.active span {
    width: 28px !important;
    background: var(--navy) !important;
}

@media(max-width:767px) {
    .category-showcase {
        padding: 58px 0;
    }

    .category-showcase-head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 25px;
    }

    .category-showcase-head h2 {
        font-size: 29px;
    }

    .showcase-card .product-image {
        height: 270px;
    }

    .showcase-card-body {
        min-height: 170px;
        padding: 17px 18px 19px;
    }

    .showcase-card-body h3 {
        font-size: 19px;
    }

    .category-slider .owl-nav {
        display: none;
    }

    .category-slider .owl-dots {
        margin-top: 18px;
    }
}

/* Material 3 luxury theme */
:root {
    --md-primary: #102a56;
    --md-on-primary: #fff;
    --md-primary-container: #e8dec9;
    --md-on-primary-container: #102a56;
    --md-secondary: #145b73;
    --md-secondary-container: #d7b66c;
    --md-on-secondary-container: #17243a;
    --md-surface: #f5f1e8;
    --md-surface-container-low: #fbf9f5;
    --md-surface-container: #e8e0d3;
    --md-surface-container-high: #d9cdbc;
    --md-on-surface: #17243a;
    --md-on-surface-variant: #536273;
    --md-outline: #796b59;
    --md-outline-variant: #c4b7a5;
    --md-radius-sm: 8px;
    --md-radius-md: 12px;
    --md-radius-lg: 16px;
    --md-radius-xl: 20px;
    --md-elevation-1: 0 1px 2px rgba(7, 26, 46, .12), 0 1px 3px 1px rgba(7, 26, 46, .06);
    --md-elevation-2: 0 2px 6px 2px rgba(7, 26, 46, .08), 0 1px 2px rgba(7, 26, 46, .12);
    --md-elevation-3: 0 8px 18px 4px rgba(7, 26, 46, .10), 0 3px 5px rgba(7, 26, 46, .12)
}

body {
    background: var(--md-surface);
    color: var(--md-on-surface)
}

.py-section,
.category-showcase,
.journal,
.stores {
    background: var(--md-surface)
}

.py-section:nth-of-type(even),
.category-showcase.alt,
.recommendations,
.purchase-benefits {
    background: var(--md-surface-container-low)
}

.featured-products.py-section {
    background: linear-gradient(135deg, #0b2275 0%, #004d7c 100%);
    color: #fff
}

.featured-products .section-head h2 {
    color: #fff
}

.featured-products .section-head h2 em {
    color: #dfc88d
}

.featured-products .section-head p {
    color: rgba(255, 255, 255, .72)
}

.featured-products .eyebrow {
    border-color: rgba(223, 199, 159, .42);
    background: rgba(255, 255, 255, .08);
    color: #dfc88d
}

.navbar {
    transition: height .3s ease, background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease
}

.navbar.scrolled {
    background: rgba(7, 26, 46, .90);
    box-shadow: var(--md-elevation-2)
}

.account-btn,
.cart-btn.cart-icon-theme {
    min-height: 48px;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease
}

.account-btn:hover,
.cart-btn.cart-icon-theme:hover {
    transform: translateY(-1px);
    box-shadow: var(--md-elevation-2)
}

.btn,
.add-cart,
.featured-buy button,
.featured-side button,
.subscribe button,
.story-link,
.store-card > a,
.category-showcase-head > a,
.recommend-head > a {
    border-radius: var(--md-radius-md) !important;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease
}

.btn:hover,
.add-cart:hover,
.featured-buy button:hover,
.featured-side button:hover,
.store-card > a:hover {
    transform: translateY(-2px);
    box-shadow: var(--md-elevation-2)
}

.btn-cream {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    box-shadow: var(--md-elevation-1)
}

.btn-line {
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px)
}

.section-head h2,
.category-showcase-head h2,
.recommend-head h2 {
    letter-spacing: -.7px
}

.category-showcase-head h2,
.category-showcase-head h2 em {
    font-family: "Estedad", "Vazirmatn", Tahoma, sans-serif;
    font-style: normal;
    letter-spacing: -.6px
}

.category-showcase-head h2 {
    font-size: clamp(28px, 2.8vw, 39px);
    font-weight: 700;
    line-height: 1.45
}

.category-showcase-head h2 em {
    color: #004d7c;
    font-weight: 800
}

.eyebrow {
    width: fit-content;
    padding: 7px 13px;
    border: 1px solid rgba(232, 220, 199, .32);
    border-radius: 999px;
    background: rgba(7, 26, 46, .12)
}

.eyebrow.dark {
    border-color: var(--md-outline-variant);
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container)
}

.product-tabs {
    width: fit-content;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-md);
    background: var(--md-surface-container-low)
}

.product-tabs button {
    min-height: 42px;
    padding: 8px 18px;
    border: 0;
    border-radius: var(--md-radius-sm);
    background: transparent;
    color: var(--md-on-surface-variant);
    transform: none !important;
    transition: background-color .2s ease, color .2s ease
}

.product-tabs button.active {
    margin: 0;
    background: var(--md-primary);
    color: var(--md-on-primary);
    box-shadow: none;
    transform: none !important
}

.product-tabs button.active i {
    color: #dfc88d
}

.product-tabs button.active:after {
    display: none
}

.product-card,
.showcase-card,
.rail-card,
.store-card,
.journal-main,
.journal-list,
.testimonial-card,
.recommend-box,
.featured-main,
.featured-side {
    overflow: hidden;
    border: 1px solid #c5b8a8;
    border-radius: var(--md-radius-lg);
    background: var(--md-surface);
    box-shadow: var(--md-elevation-1);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.product-card:hover,
.showcase-card:hover,
.rail-card:hover,
.store-card:hover,
.testimonial-card:hover {
    border-color: #8f7b61;
    transform: translateY(-5px);
    box-shadow: var(--md-elevation-3)
}

.product-image,
.rail-image,
.showcase-card .product-image,
.featured-side-image {
    overflow: hidden;
    border-radius: var(--md-radius-lg) var(--md-radius-lg) 0 0
}

.favorite {
    width: 44px;
    height: 44px;
    border: 1px solid #b9ab99;
    border-radius: 50%;
    background: rgba(252, 249, 245, .92);
    color: var(--md-primary);
    box-shadow: var(--md-elevation-1);
    backdrop-filter: blur(10px)
}

.favorite:hover,
.favorite.active {
    background: var(--md-secondary-container);
    color: #8c2f39;
    box-shadow: var(--md-elevation-2)
}

.badge-best,
.badge-new,
.badge-offer,
.rail-image > span,
.featured-side-content > small {
    border-radius: 999px !important;
    box-shadow: var(--md-elevation-1)
}

.product-card > .add-cart,
.showcase-card-body .add-cart,
.rail-card .add-cart {
    min-height: 44px;
    border: 0;
    background: var(--md-primary);
    color: var(--md-on-primary)
}

.brand-menu,
.mega-menu,
.account-panel,
.cart-panel {
    border: 1px solid #b9ab99;
    border-radius: var(--md-radius-lg) !important;
    background: rgba(252, 249, 245, .98);
    box-shadow: var(--md-elevation-3);
    backdrop-filter: blur(18px)
}

.brand-menu {
    overflow: hidden;
    padding: 8px
}

.brand-menu .dropdown-header {
    margin: 3px 4px 7px;
    padding: 10px 12px;
    border-radius: var(--md-radius-sm);
    background: var(--md-secondary-container)
}

.brand-menu .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: var(--md-radius-sm)
}

.brand-menu li:nth-child(n+3) .dropdown-item {
    border-top-color: rgba(197, 199, 203, .55)
}

.brand-menu .dropdown-item:hover,
.brand-menu .dropdown-item:focus {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container)
}

.mega-menu {
    border-top: 1px solid rgba(197, 199, 203, .72) !important
}

.mega-sidebar {
    background: var(--md-surface-container-low)
}

.mega-sidebar > a {
    margin: 4px 8px;
    border: 0;
    border-radius: var(--md-radius-sm)
}

.mega-sidebar > a:hover,
.mega-sidebar > a.active {
    border: 0;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container)
}

.account-panel,
.cart-panel {
    overflow: hidden
}

.account-plan {
    border-radius: var(--md-radius-md);
    background: var(--md-secondary-container) !important;
    color: var(--md-on-secondary-container) !important
}

.account-links a,
.cart-item {
    border-radius: var(--md-radius-sm)
}

.cart-quantity {
    width: fit-content;
    align-self: flex-start;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none
}

.purchase-benefits {
    padding-block: 20px
}

.benefit-grid {
    gap: 12px;
    border: 0;
    background: transparent
}

.benefit {
    border: 1px solid #c5b8a8 !important;
    border-radius: var(--md-radius-md);
    background: var(--md-surface);
    box-shadow: var(--md-elevation-1)
}

.benefit > i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--md-secondary-container);
    color: var(--md-secondary)
}

.store-card > i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--md-primary-container);
    color: var(--md-primary)
}

.newsletter {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container)
}

.subscribe {
    min-height: 66px;
    align-items: center;
    padding: 5px;
    border: 1px solid rgba(113, 93, 64, .32);
    border-radius: var(--md-radius-md);
    background: var(--md-surface);
    box-shadow: var(--md-elevation-1)
}

.subscribe input {
    height: 54px;
    min-width: 0;
    padding: 0 14px;
    line-height: 54px;
    border: 0;
    background: transparent;
    direction: rtl;
    text-align: right
}

.subscribe input::placeholder {
    direction: rtl;
    text-align: right
}

.subscribe button {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--md-radius-sm) !important;
    background: var(--md-primary);
    color: var(--md-on-primary)
}

.category-slider .owl-nav button,
.product-rail .owl-nav button,
.testimonial-slider .owl-nav button {
    border: 1px solid var(--md-outline-variant) !important;
    background: var(--md-surface) !important;
    box-shadow: var(--md-elevation-2)
}

.category-slider .owl-dot.active span,
.product-rail .owl-dot.active span,
.testimonial-slider .owl-dot.active span {
    background: var(--md-primary) !important
}

.toast {
    overflow: hidden;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-md);
    background: var(--md-on-surface);
    color: #fff;
    box-shadow: var(--md-elevation-3)
}

.offcanvas,
.login-modal .modal-content {
    border: 0;
    border-radius: var(--md-radius-xl);
    background: var(--md-surface);
    box-shadow: var(--md-elevation-3)
}

@media(max-width:991px) {
    /* Mobile panels must stay above the isolated hero/header stacking context. */
    .mobile-menu.offcanvas {
        z-index: 6000 !important;
    }

    .offcanvas-backdrop {
        z-index: 5900 !important;
    }

    .cart-panel {
        z-index: 6000 !important;
    }

    .mobile-menu.offcanvas {
        border: 0;
        border-radius: 0 !important;
        background:
            radial-gradient(circle at 12% 8%, rgba(223, 200, 141, .18), transparent 30%),
            linear-gradient(155deg, #0b2275 0%, #081c64 62%, #004d7c 100%);
        color: #fff;
        box-shadow: 18px 0 48px rgba(4, 13, 52, .34)
    }

    .mobile-menu .offcanvas-header {
        border-bottom: 1px solid rgba(223, 200, 141, .24);
        background: rgba(5, 18, 68, .18)
    }

    .mobile-menu .offcanvas-body {
        background: transparent
    }

    .mobile-menu .offcanvas-body > a,
    .mobile-menu .mobile-category-toggle,
    .mobile-menu .mobile-category > button {
        color: rgba(255, 255, 255, .94)
    }

    .mobile-menu .offcanvas-body > a,
    .mobile-menu .mobile-category,
    .mobile-menu .mobile-category-toggle {
        border-color: rgba(223, 200, 141, .20)
    }

    .mobile-menu .mobile-submenu a {
        color: rgba(244, 241, 233, .72);
        border-color: rgba(244, 241, 233, .12)
    }

    .mobile-menu .mobile-category > button[aria-expanded="true"],
    .mobile-menu .mobile-category-toggle[aria-expanded="true"],
    .mobile-menu-footer span {
        color: #dfc88d
    }

    .mobile-menu-footer {
        border-top: 1px solid rgba(223, 200, 141, .20)
    }

    .offcanvas-backdrop.show {
        background: #06113d;
        opacity: .58
    }

    .mega-menu,
    .account-panel,
    .cart-panel {
        border-radius: var(--md-radius-xl) var(--md-radius-xl) 0 0 !important
    }

    .product-tabs {
        width: 100%;
        border-radius: var(--md-radius-md)
    }
}

@media(max-width:767px) {
    .category-showcase-head h2 {
        font-size: 26px
    }

    .product-card,
    .showcase-card,
    .rail-card,
    .store-card,
    .journal-main,
    .journal-list,
    .testimonial-card,
    .recommend-box {
        border-radius: var(--md-radius-md)
    }

    .product-image,
    .rail-image,
    .showcase-card .product-image {
        border-radius: var(--md-radius-md) var(--md-radius-md) 0 0
    }

    .eyebrow {
        padding: 6px 11px
    }

    .hero-content .btn {
        min-height: 48px
    }
}

/* Header polish */
.hero {
    isolation: isolate;
    background:
        radial-gradient(circle at 12% 22%, rgba(223, 200, 141, .16), transparent 30%),
        linear-gradient(135deg, #071a2e 0%, var(--navy) 56%, #004d7c 100%);
}

/* Keep the header and its menus above page sections and cards. */
.hero {
    position: relative;
    z-index: 4000;
}

.hero .navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 5000;
}

.hero .dropdown-menu,
.hero .mega-menu,
.hero .account-panel,
.hero .cart-panel {
    z-index: 5100;
}

.hero:before {
    content: "";
    position: absolute;
    inset: 96px 0 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(223, 200, 141, .08) 1px, transparent 1px),
        linear-gradient(rgba(223, 200, 141, .06) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 72%);
    opacity: .28;
}

.navbar {
    background: linear-gradient(180deg, rgba(4, 17, 30, .5), transparent);
    border-bottom-color: rgba(223, 200, 141, .24);
}

.navbar.scrolled {
    background: rgba(7, 26, 46, .86);
    border-bottom-color: rgba(223, 200, 141, .35);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .2);
}

.brand {
    text-shadow: 0 4px 18px rgba(0, 0, 0, .28);
}

.brand span {
    background: linear-gradient(145deg, rgba(223, 200, 141, .2), transparent);
    box-shadow: 0 0 0 5px rgba(223, 200, 141, .06), 0 6px 22px rgba(0, 0, 0, .2);
}

.nav-link {
    position: relative;
    transition: color .2s ease, transform .2s ease;
}

.nav-link:after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 22px;
    left: 8px;
    height: 2px;
    border-radius: 999px;
    background: var(--cream);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .25s ease;
}

.nav-link:hover {
    transform: translateY(-1px);
}

.nav-link:hover:after,
.nav-link[aria-expanded="true"]:after {
    transform: scaleX(1);
}

.hero-bg {
    width: 100%;
    left: 0;
    filter: saturate(1.08) contrast(1.04);
}

.hero-overlay {
    background:
        linear-gradient(90deg, rgba(4, 17, 30, .08) 0%, rgba(7, 26, 46, .3) 34%, rgba(7, 26, 46, .88) 78%, var(--navy) 100%),
        linear-gradient(180deg, rgba(4, 17, 30, .08), rgba(4, 17, 30, .3));
}

.hero-content {
    z-index: 3;
}

.hero-content > .row > div {
    padding: 34px 38px;
    border-right: 2px solid rgba(223, 200, 141, .55);
    background: linear-gradient(90deg, rgba(7, 26, 46, .02), rgba(7, 26, 46, .2));
    backdrop-filter: blur(2px);
}

.hero h1,
.hero h2 {
    text-shadow: 0 8px 32px rgba(0, 0, 0, .24);
}

.hero-content p {
    color: rgba(255, 255, 255, .8);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.btn-cream {
    box-shadow: 0 10px 24px rgba(223, 200, 141, .18);
}

.slide-name {
    padding: 12px 16px;
    border-left: 1px solid rgba(223, 200, 141, .48);
    background: rgba(4, 17, 30, .24);
    backdrop-filter: blur(8px);
}

.hero-stats {
    padding: 16px 22px;
    border: 1px solid rgba(223, 200, 141, .24);
    border-radius: 18px;
    background: rgba(4, 17, 30, .26);
    backdrop-filter: blur(12px);
}

.hero-stats.container {
    width: auto;
    max-width: none;
}

@media(max-width:991px) {
    .hero:before {
        inset: 78px 0 0;
    }

    .hero-bg {
        width: 100%;
        filter: saturate(1.05) contrast(1.03);
    }

    .hero-content > .row > div {
        padding: 24px 22px;
        border-right: 0;
        border-top: 2px solid rgba(223, 200, 141, .5);
        background: linear-gradient(180deg, rgba(7, 26, 46, .06), rgba(7, 26, 46, .24));
    }

    .nav-link:after {
        display: none;
    }

    .hero-stats {
        padding: 12px 14px;
        border-radius: 14px;
    }
}

/* Smooth reveal for content as it enters the viewport. */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    filter: blur(3px);
    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.22, 1, .36, 1),
        filter .75s ease;
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter
}

[data-reveal="left"] {
    transform: translate3d(34px, 0, 0)
}

[data-reveal="right"] {
    transform: translate3d(-34px, 0, 0)
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none
    }
}

/* Unified accessible color balance */
.section-head p,
.recommend-head p,
.story-copy p,
.service p,
.newsletter p,
.showcase-card-body > small,
.rail-card > small {
    color: var(--md-on-surface-variant);
}

.eyebrow.dark,
.journal-list small,
.product-info small,
.featured-side-content > small {
    color: #8a611c;
}

.product-card,
.showcase-card,
.rail-card,
.brand-card,
.testimonial-card,
.journal-list,
.store-card {
    border-color: var(--md-outline-variant);
}

.badge-best,
.badge-new,
.badge-offer {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
}

.rail-image > span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
}

.newsletter .eyebrow.dark {
    border-color: rgba(16, 42, 86, .38);
    background: rgba(255, 255, 255, .28);
    color: var(--navy);
    box-shadow: 0 2px 8px rgba(16, 42, 86, .08);
}

/* Refined footer */
footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 82px 0 28px;
    border-top: 3px solid var(--cream);
    background:
        radial-gradient(circle at 88% 12%, rgba(20, 91, 115, .22), transparent 32%),
        linear-gradient(145deg, #071827 0%, #0a2033 58%, #071522 100%);
}

footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

footer .footer-main {
    align-items: stretch;
    margin-inline: 0;
    padding: 30px 24px 34px;
    border: 1px solid rgba(215, 182, 108, .2);
    border-radius: 22px;
    background: rgba(255, 255, 255, .028);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}

footer .footer-main > .col-lg-4:first-child {
    padding: 0 18px !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

footer .footer-main > div:not(:first-child) {
    padding-right: 24px;
    border-right: 1px solid rgba(215, 182, 108, .13);
}

footer .footer-brand {
    font-size: 22px;
}

footer .footer-main p {
    max-width: 460px;
    color: rgba(255, 255, 255, .7);
}

footer .footer-main h4 {
    position: relative;
    width: 100%;
    margin-bottom: 18px;
    padding-bottom: 13px;
    color: #e5c16f;
    font-size: 17px;
}

footer .footer-main h4::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--cream));
}

footer .footer-main > div:not(:first-child) a {
    position: relative;
    color: rgba(255, 255, 255, .68);
    transition: color .2s ease, transform .2s ease;
}

footer .footer-main > div:not(:first-child) a:hover {
    color: #fff;
    transform: translateX(-4px);
}

footer .socials a {
    width: 42px;
    height: 42px;
    border-color: rgba(215, 182, 108, .35);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

footer .socials a:hover {
    border-color: var(--cream);
    background: var(--navy2);
    transform: translateY(-3px);
}

footer .trust-badge {
    width: 96px;
    height: 104px;
    border: 3px solid rgba(255, 255, 255, .88);
    border-radius: 12px;
    background-size: 298px 104px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

footer .copyright {
    position: relative;
    align-items: center;
    margin-top: 38px;
    padding: 28px 24px 2px;
    border-top: 0;
    color: rgba(255, 255, 255, .52);
}

footer .copyright::before {
    content: "";
    position: absolute;
    top: 0;
    right: 24px;
    left: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(215, 182, 108, .42) 18%, rgba(215, 182, 108, .42) 82%, transparent);
}

@media(max-width:991px) {
    footer .footer-main {
        padding: 24px 18px 28px;
    }

    footer .footer-main > .col-lg-4:first-child {
        margin-bottom: 16px;
        padding: 0 12px 24px !important;
        border-bottom: 1px solid rgba(215, 182, 108, .15);
    }

    footer .footer-main > div:not(:first-child) {
        padding-right: 12px;
        border-right: 0;
    }
}

@media(max-width:767px) {
    footer {
        padding-top: 54px;
    }

    footer .footer-main > .col-lg-4:first-child {
        padding: 0 12px 22px !important;
    }

    footer .footer-main h4 {
        font-size: 16px;
    }

    footer .copyright {
        align-items: flex-start;
        margin-top: 28px;
        padding-inline: 0;
    }

    footer .copyright::before {
        right: 0;
        left: 0;
    }
}

/* Keep the account modal above the high-z-index hero and navigation layers. */
.modal-backdrop.show {
    z-index: 5900;
}

.login-modal {
    z-index: 6000;
}

.login-modal .modal-dialog,
.login-modal .modal-content {
    position: relative;
    z-index: 6001;
}