:root {
    --bd-black: #0d0d0d;
    --bd-white: #ffffff;
    --bd-beige: #E8E3DB;
    --bd-sand: #DCD6CD;
    --bd-gray: #888888;
    --bd-lightgray: #E0E0E0;
    --text-3: #e7e7e7;
    --line: #E9E9E9;
}

html, body {
    height: 100%;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}


/* offcanvas-start/offcanvas-end mirror correctly for free via bootstrap.rtl.min.css now
   (see _Layout.cshtml/_HomeLayout.cshtml) - a legacy !important override with the wrong
   transform sign/border side used to live here and was removed so it can't fight that build. */

.rtl .me-2 {
    margin-left: .5rem !important;
}

[dir="rtl"] .offcanvas-header .btn-close {
    padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);
    margin: calc(-.5 * var(--bs-offcanvas-padding-y)) auto calc(-.5 * var(--bs-offcanvas-padding-y)) calc(-.5 * var(--bs-offcanvas-padding-x));
}


/* Pagination Container RTL Support */
/*.rtl #pagination-container {
    right: auto;
    left: 1rem;
}

@media (min-width: 576px) {
    .rtl #pagination-container {
        left: 1.5rem;
    }
}*/

.font-display {
    font-family: 'Syne', sans-serif;
}

/* Brand color helpers */
.text-byredo-gray {
    color: var(--bd-gray) !important;
}

.text-byredo-black {
    color: var(--bd-black) !important;
}

.bg-byredo-black {
    background-color: var(--bd-black) !important;
}

.bg-byredo-beige {
    background-color: var(--bd-beige) !important;
}

.bg-byredo-sand {
    background-color: var(--bd-sand) !important;
}

.border-byredo {
    border-color: var(--bd-lightgray) !important;
}

/* Letter spacing helpers (Tailwind's tracking-*) */
.ls-1 {
    letter-spacing: .12em;
}

.ls-2 {
    letter-spacing: .2em;
}

.ls-3 {
    letter-spacing: .3em;
}

.ls-4 {
    letter-spacing: .4em;
}

/* Small type sizes not covered by Bootstrap's fs-1..fs-6 */
.fs-9 {
    font-size: 9px;
}

.fs-10 {
    font-size: 10px;
}

.fs-11 {
    font-size: 11px;
}

.fs-xs {
    font-size: .75rem;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.vp-scroll {
    overflow-y: scroll;
    height: 100vh;
    max-height: 100vh;
    display: block;
}

/* Mandatory vertical scroll-snap slider */
.snap-container {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    height: 100vh;
    max-height: 100vh;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.snap-slide {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100vh;
}

.icon-fix {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-16 {
    width: 16px;
    height: 16px;
}

.icon-14 {
    width: 14px;
    height: 14px;
}

.icon-20 {
    width: 20px;
    height: 20px;
}

.icon-24 {
    width: 24px;
    height: 24px;
}

.icon-40 {
    width: 40px;
    height: 40px;
}

.mix-blend-difference {
    mix-blend-mode: difference;
}

/* Fixed dark fade behind the floating header, tall enough to cover the logo/icon row plus a
   soft trailing fade so it blends into whatever banner is showing rather than cutting off hard.
   Sits below the header's own z-index (1030) and doesn't intercept clicks. */
.tm-header-scrim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 170px;
    background: linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,.32) 50%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 1020;
}

/* Casts one soft shadow across the header's text AND its SVG icons/logo (filter, unlike
   text-shadow, affects the whole subtree) - a small extra contrast margin over the scrim alone. */
.tm-header-content {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}

.hover-fade {
    transition: opacity .2s ease;
}

    .hover-fade:hover {
        opacity: .7;
    }

.cursor-pointer {
    cursor: pointer;
}

/* Gradient scrim over hero media */
.overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.2) 100%);
    pointer-events: none;
}

/* Hero loading state: the shared .skeleton-banner (light gray, 460px) is built for
   light-background pages - against this page's black hero it left a pale box floating
   over a black viewport, then popped straight to the photo once it loaded. This fills
   the full viewport in the page's own dark tone instead, so there's no colour clash and
   no size jump between the placeholder and the real slide. */
.tm-hero-skeleton {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bd-black);
    background-image: linear-gradient(90deg, #0d0d0d 25%, #1a1a1a 50%, #0d0d0d 75%);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: skeleton-pulse 1.5s infinite;
}

/* Hero media fades in once decoded instead of popping in the instant it's painted. */
/* Hero slide's title/description/CTA block - top:33% left plenty of room on desktop, but on a
   short mobile viewport (address bar + status bar eat real content height) it sits too close to
   the floating product card pinned to the bottom of the same slide, so it moves higher there. */
.tm-hero-copy {
    top: 33%;
}

.tm-hero-cta {
    /* Hero photos can land in the same warm/tan tones as the button's own fill, which makes it
       blend into the background instead of standing out - a shadow keeps it visually distinct
       regardless of what's behind it. */
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

@media (max-width: 576px) {
    .tm-hero-copy {
        /* Sit in the upper third on phones so the raised floating product card (see site.css) has room
           below the Discover button without covering it. */
        top: 26%;
        transform: none;
        /* The heading/description stay start-aligned (RTL-natural), but the CTA button below them
           reads better centered on a narrow phone screen rather than pinned under the text - this
           widens the block to (most of) the viewport so centering the button within it actually
           centers it on screen, without touching the text's own alignment. */
        width: calc(100vw - 3rem);
    }

    /* Narrower than the heading so a long description wraps onto a second line instead of running
       the full block width - 80% of the (already viewport-wide) tm-hero-copy container. */
    .tm-hero-desc {
        width: 80%;
    }

    .tm-hero-cta {
        display: block;
        width: fit-content;
        /* Align the Discover button to the start of the hero copy: left in English, right in Arabic
           (margin-inline is direction-aware, so RTL flips it automatically). Was centered. */
        margin-inline: 0;
    }
}

.tm-fade-img {
    opacity: 0;
    transition: opacity .5s ease;
}

    .tm-fade-img.is-loaded {
        opacity: 1;
    }

.video-controls-pill {
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.12);
}

.promo-banner {
    background: rgba(74,69,63,.95);
}

/* Card glassmorphism effect */
.floating-card-bg {
    background: rgba(205, 194, 183, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-top: none;
}

/* Floating product card enter/exit animation */
.product-card {
    /* min() instead of a flat 320px so the card + its mb-4/me-4 offset can't overflow
       narrower phones (~320-360px viewports) off the left edge of the screen. */
    width: min(320px, calc(100vw - 2rem));
    transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .6s ease-out;
    transform: translateY(-4rem) scale(.96);
    opacity: 0;
    pointer-events: none;
}

    .product-card.card-visible {
        /*transform: translateY(0) scale(1);*/
        opacity: 1;
        pointer-events: auto;
    }

@media (min-width: 576px) {
    .product-card {
        width: 26rem;
    }
}

@media (max-width: 576px) {
    /* More clearance above the bottom nav pill and below the now vertically-centered hero text -
       Bootstrap's own mb-4 (1.5rem) sat too close to the bottom edge on a real phone viewport.
       Both the card and the bottom nav pill share the same bottom-0 anchor, so this margin has
       to clear the pill's own height (~44px) plus its own mb-4 offset, not just look right in
       a short screenshot. */
    .product-card {
        margin-bottom: 4.75rem !important;
    }
}

.product-thumb {
    width: 96px;
    height: 112px;
}

.cart-thumb {
    width: 64px;
    height: 80px;
}

/* Pagination dots */
.dot-btn {
    width: 24px;
    height: 24px;
}

.dot-pill {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    transition: all .35s cubic-bezier(.16,1,.3,1);
    margin: 0 auto;
}

    .dot-pill.dot-active {
        height: 32px;
        background: #fff;
    }

.dot-btn:hover .dot-pill:not(.dot-active) {
    background: rgba(255,255,255,.8);
}

/* Profile tab underline */
.tab-active {
    border-bottom: 2px solid var(--bd-black);
    font-weight: 700;
}

/* Search category chips */
.search-cat-btn {
    background: var(--bd-sand);
    color: var(--bd-black);
    border: none;
}

    .search-cat-btn.active, .search-cat-btn:hover {
        background: var(--bd-black);
        color: #fff;
    }

.tm-logo-svg {
    width: 100%;
    height: auto;
    max-width: 280px;

    .tm-logo-svg text {
        letter-spacing: 0; /* or -0.5px for tighter look */
    }

    @media (max-width: 768px) {
        .tm-logo-svg {
            max-width: 200px;
        }
    }

    @media (max-width: 480px) {
        .tm-logo-svg {
            max-width: 160px;
        }
    }

    .offcanvas-search {
        max-height: 100vh;
    }

    .btn-checkout:hover {
        background: var(--bd-gray) !important;
    }

    .btn-add-modal:hover {
        background: var(--bd-gray) !important;
    }

    .btn-signout:hover {
        background: var(--bd-black) !important;
        color: #fff !important;
    }
    /* Orther */
    .text-primary {
        font-size: 14px;
        color: var(--primary) !important;
    }

    .cl-text-3 {
        color: var(--text-3) !important;
    }

    .text-caption-01 {
        font-size: 12px;
        line-height: 14px;
        color: var(--white-60);
    }


    .price-wrap {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

        .price-wrap .price-old {
            text-decoration: line-through;
        }

    [dir="rtl"] .btn-close {
    }
    /* Container Background & Typography */
    .custom-menu-container {
        background-color: #0b0b0b; /* Deep almost-black background */
        color: #ffffff;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        /*max-width: 450px;*/ /* Adjust based on your layout needs */
    }
    /* Subtle Dark Dividers */
    .menu-divider {
        border-top: 1px solid #1a1a1a;
        opacity: 1;
        margin: 0;
    }

    .mb-5.override-mb {
        margin-bottom: 1.5rem !important;
    }
    /* Reduce the gap by targeting the header and body connection */
    ::deep .offcanvas-header {
        padding-bottom: 0.5rem !important;
    }

    ::deep .offcanvas-body {
        padding-top: 0rem !important;
    }
        /* Optional: Make the line sit closer if it's an hr element */
        ::deep .offcanvas-body hr:first-of-type {
            margin-top: 0.5rem !important;
            margin-bottom: 1rem !important;
        }
    /* Small, muted section titles */
    .menu-label {
        font-size: 0.75rem;
        letter-spacing: 0.09em;
        color: #666666;
        font-weight: 600;
    }
    /* Big bold navigation items */
    .category-list .nav-link {
        color: #ffffff;
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        padding: 0.3rem 0;
        transition: color 0.2s ease;
    }

    [dir="ltr"] .category-list .nav-link {
        color: #ffffff;
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        padding: 0 0.3rem;
        transition: color 0.2s ease;
    }
    /* Fragrance Pills/Buttons */
    .btn-fragrance {
        background-color: #1c1c1c !important; /* Slightly lighter than the background */
        border: 1px solid #1c1c1c !important;
        color: #ffffff !important;
        font-size: 0.9rem;
        font-weight: 700;
        padding: 0.75rem 1rem;
        border-radius: 4px;
        transition: all 0.2s ease !important;
    }

        .btn-fragrance:hover {
            background-color: #141414 !important;
            border-color: #333333 !important;
            color: #ffffff !important;
        }
    /* LoadingScreen Component Styles - Matches index.html */
    .loading-screen-component {
        position: fixed;
        inset: 0;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99998;
        animation: fadeOut 0.6s ease forwards;
        animation-delay: 2.5s;
    }

        .loading-screen-component.active {
            opacity: 1;
            visibility: visible;
        }

        .loading-screen-component.hide {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

    .loading-screen-mist {
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at 50% 30%, rgba(255,255,255,0.08), transparent 60% );
        animation: mistMove 6s ease-in-out infinite alternate;
        filter: blur(40px);
        pointer-events: none;
    }

    .loading-screen-content {
        text-align: center;
        color: white;
        position: relative;
        z-index: 1;
    }

    .loading-screen-logo {
        width: 160px;
        height: auto;
        margin-bottom: 25px;
        animation: fadeIn 1s ease forwards;
        border-radius: 35px;
        position: relative;
        overflow: hidden;
    }

        .loading-screen-logo::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100% );
            animation: shimmer 2.5s infinite;
        }

    .loading-screen-line {
        width: 220px;
        height: 5px;
        background: #e8e8e8;
        margin: 0 auto 15px;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .loading-screen-line-progress {
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #d4af37, #f7e9b5, #d4af37);
        background-size: 200% 100%;
        animation: shimmerGold 3s ease-in-out infinite;
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
    }

    .loading-screen-percent {
        margin-top: 12px;
        font-size: 1.3rem;
        font-weight: 700;
        color: #d4af37;
        letter-spacing: 2px;
        text-shadow: 0 0 8px rgba(212,175,55,0.4);
        min-width: 50px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .loading-screen-text {
        margin-top: 20px;
        font-size: 0.95rem;
        letter-spacing: 0.5px;
        opacity: 0;
        animation: fadeIn 1.5s ease forwards;
        animation-delay: 0.8s;
        color: #666;
        font-weight: 500;
    }

    .modal-share .modal-dialog {
        max-width: 620px;
    }

    .modal-share .wrap-code {
        position: relative;
        border-radius: 999px;
        padding: 12px 20px;
        background-color: var(--bg-2);
    }

    .modal-share .btn-action-copy {
        position: absolute;
        top: 3px;
        right: 3px;
        bottom: 3px;
        min-width: 100px;
        height: unset;
    }

    .modal-share .modal-content {
        position: relative;
        padding: 20px 15px;
        border-radius: 20px;
        overflow: hidden;
    }

    @media (min-width: 992px) {
        .modal-share .modal-content {
            padding: 32px;
        }
    }

    @media (min-width: 1200px) {
        .modal-share .tf-social-icon {
            margin-bottom: 40px;
        }
    }

    .rtl .modal-share .btn-action-copy {
        right: auto;
        left: 3px;
    }