/* ==================================================================
   FILE:   public_html/assets/css/rf-header.css
   ACTION: REPLACE (update 1 Nov 2026: product sliders no longer jump while the page loads)
   Site header, search box, link bar, phone header. Colours come from Website settings
   through the --site-bg / --main-bg / --accent variables set in parts/header/head.php.
   CHANGE (1 Nov): soft cross-fade between pages (browsers that support it; others ignore it).
   CHANGE (1 Nov): product sliders keep their final one-row shape while the page loads (no jump / blink).
   ================================================================== */
        /* --- Global CSS Reset for Outline / Focus Rings --- */
        a, button, input, select, textarea, .nav-icon, .hamb-btn, .side-close, .side-link, .search-btn, .mob-menu-icon, .icon-only-btn {
            outline: none !important;
            -webkit-tap-highlight-color: transparent !important;
        }
        
        a:focus, button:focus, input:focus, select:focus, textarea:focus, .nav-icon:focus, .hamb-btn:focus, .side-close:focus, .side-link:focus, .search-btn:focus, .mob-menu-icon:focus, .icon-only-btn:focus {
            outline: none !important;
        }
        /* ---------------------------------------------------- */

        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 100vw; overflow-x: clip; background: var(--site-bg); }

        @keyframes pulseGlow {
            0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.6); transform: scale(1); }
            70% { box-shadow: 0 0 0 6px rgba(225, 29, 72, 0); transform: scale(1.05); }
            100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); transform: scale(1); }
        }
        .anim-highlight {
            background: #e11d48;
            color: #fff !important;
            border-radius: 4px;
            padding: 3px 7px;
            font-size: 10px;
            font-weight: 800;
            margin-left: 8px;
            animation: pulseGlow 1.5s infinite;
            display: inline-block;
            vertical-align: middle;
            text-transform: uppercase;
        }

        .search-results-dropdown {
            position: absolute; top: 100%; left: 0; right: 0; background: #fff; z-index: 100000;
            border: 1px solid #ddd; border-top: none; border-radius: 0 0 8px 8px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15); display: none; max-height: 400px; overflow-y: auto;
        }

        .pc-header { display: block; }

        .pc-sticky-wrapper { background: var(--site-bg); width: 100%; z-index: 9999; transition: box-shadow 0.3s; }
        .pc-sticky-wrapper.is-fixed { position: fixed; top: 0; left: 0; box-shadow: 0 4px 15px rgba(0,0,0,0.08); animation: slideDown 0.3s forwards; }

        .header-main { border-bottom: 1px solid #f0f0f0; padding: 15px 0; }
        .flex-row-pc { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 95%; margin: 0 auto; }

        .brand-area { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none !important; }
        .brand-area img { max-height: 45px; }

        .brand-text {
            font-family: 'Arial Black', Impact, sans-serif;
            font-size: 26px;
            font-weight: 900;
            color: #1a1a1a;
            letter-spacing: -0.5px;
            text-transform: uppercase;
        }

        .search-area { flex-grow: 1; max-width: 700px; position: relative; }
        .search-form { display: flex; background: #fff; border-radius: 8px; overflow: hidden; border: 1.5px solid #e0e0e0; height: 44px; transition: 0.2s; }
        .search-form:focus-within { border-color: var(--amz-orange); box-shadow: 0 0 0 3px rgba(254, 189, 105, 0.2); }
        .search-input { flex-grow: 1; border: none; padding: 10px 18px; background: transparent; outline: none; font-size: 15px; color: #333; }
        .search-btn { background: var(--amz-orange); color: #111; border: none; width: 55px; cursor: pointer; font-size: 18px; transition: background 0.2s; }
        .search-btn:hover { background: var(--amz-orange-hover); filter: brightness(0.92); }

        .icon-area { display: flex; align-items: center; gap: 28px; }
        .nav-icon { font-size: 26px; color: #444; position: relative; text-decoration: none !important; transition: 0.2s; }
        .nav-icon span.badge {
            position: absolute;
            top: -6px;
            right: -10px;
            background: #B4352C;
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            min-width: 19px;
            height: 19px;
            padding: 0 4px;
            border-radius: 50px;
            border: 2px solid #ffffff;
            box-shadow: 0 2px 5px rgba(180, 53, 44, 0.4);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            box-sizing: border-box;
            overflow: visible;
        }

        .online-dot { position: absolute; bottom: 0; right: -2px; width: 10px; height: 10px; background: #2ecc71; border-radius: 50%; border: 2px solid #fff; }
        /* Wishlist heart + signed-in avatar (also styled by assets/js/rf-wishlist.js) */
        .rf-wl-nav svg { display: inline-block; width: 26px; height: 26px; vertical-align: middle; fill: #5C1F2E; stroke: #3F1019; stroke-width: 1.4; stroke-linejoin: round; transition: transform .2s ease; }
        .rf-wl-nav:hover svg { transform: scale(1.08); }
        .rf-wl-nav .badge { display: none !important; }
        .rf-wl-nav.has-items .badge { display: flex !important; }
        .rf-wl-nav-m { margin-left: auto; margin-right: 9px; text-decoration: none !important; }
        .rf-wl-nav-m svg { width: 19px; height: 19px; }
        .rf-wl-nav-m .badge { position: absolute; top: -5px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #B4352C; color: #fff; font: 700 10px/17px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; text-align: center; align-items: center; justify-content: center; }
        .rf-me { display: flex !important; align-items: center; gap: 9px; }
        .rf-me-av { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #5C1F2E; color: #E3CC93; border: 1.5px solid #C9A961; font: 600 16px/1 Georgia, 'Times New Roman', serif; }
        .rf-me-av img { width: 100%; height: 100%; object-fit: cover; }
        .rf-me-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
        .rf-me-txt small { font-size: 11.5px; color: #867B74; font-weight: 500; white-space: nowrap; }
        .rf-me-txt b { font-size: 13.5px; color: #3F1019; font-weight: 700; white-space: nowrap; }
        .rf-me:hover .rf-me-txt b { color: #5C1F2E; text-decoration: underline; text-underline-offset: 3px; }
        .mob-user-btn.rf-me-m { padding: 0; overflow: hidden; background: #5C1F2E !important; border-color: #C9A961 !important; }
        .mob-user-btn.rf-me-m .rf-me-av { width: 100%; height: 100%; border: 0; font-size: 15px; }

        .header-nav { background: var(--main-bg); color: #fff; }
        .nav-links-bar {
            display: flex;
            align-items: center;
            gap: 25px;
            padding: 10px 2.5%;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
        }
        .nav-links-bar::-webkit-scrollbar { display: none; }
        .hamb-btn { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; font-size: 15px; letter-spacing: 0.5px; }

        /* =========================================================
           LUXURY PRODUCT SLIDER NAVIGATION ARROWS (CIRCULAR & TACTILE)
           ========================================================= */
        .owl-theme .owl-nav {
            margin-top: 24px !important;
            margin-bottom: 10px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 12px !important;
            text-align: center !important;
            -webkit-tap-highlight-color: transparent !important;
        }
        .owl-theme .owl-nav [class*=owl-] {
            width: 42px !important;
            height: 42px !important;
            min-width: 42px !important;
            border-radius: 50% !important;
            background: #ffffff !important;
            border: 1.5px solid #E2D9CC !important;
            color: #244B2E !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            margin: 0 !important;
            cursor: pointer !important;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
            transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), 
                        background-color 0.22s ease, 
                        border-color 0.22s ease, 
                        color 0.22s ease, 
                        box-shadow 0.22s ease !important;
            user-select: none !important;
            outline: none !important;
            position: relative !important;
        }
        .owl-theme .owl-nav [class*=owl-] i {
            font-size: 18px !important;
            line-height: 1 !important;
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            transition: transform 0.2s ease !important;
            color: inherit !important;
        }
        .owl-theme .owl-nav [class*=owl-]:hover {
            background: #244B2E !important;
            border-color: #244B2E !important;
            color: #ffffff !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 6px 18px rgba(36, 75, 46, 0.25) !important;
            text-decoration: none !important;
        }
        .owl-theme .owl-nav .owl-prev:hover i {
            transform: translateX(-2px) !important;
        }
        .owl-theme .owl-nav .owl-next:hover i {
            transform: translateX(2px) !important;
        }
        .owl-theme .owl-nav [class*=owl-]:active {
            transform: scale(0.92) !important;
            box-shadow: 0 2px 5px rgba(36, 75, 46, 0.2) !important;
        }
        .owl-theme .owl-nav .disabled,
        .owl-theme .owl-nav [class*=owl-].disabled {
            opacity: 0.32 !important;
            cursor: not-allowed !important;
            pointer-events: none !important;
            transform: none !important;
            box-shadow: none !important;
            background: #FAF7F2 !important;
            border-color: #EADBCE !important;
            color: #94A3B8 !important;
        }

        .mobile-header { display: none; }
        @media (max-width: 768px) {
            .pc-header { display: none; }
            .mobile-header { display: block; background: var(--site-bg); }

            .mob-top-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 14px;
                border-bottom: 1px solid #E7DFD4;
                box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
                background: var(--site-bg);
            }
            .mob-brand-link { display: flex; align-items: center; gap: 9px; text-decoration: none !important; }
            .mob-top-row img { max-height: 35px; width: auto; object-fit: contain; }
            .mob-brand-wrap { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
            .mob-brand-text { font-size: 17px; font-weight: 800; color: #1a1a1a; text-transform: uppercase; letter-spacing: -0.3px; line-height: 1.1; margin: 0; padding: 0; }
            .mob-brand-slogan { font-size: 9px; font-weight: 600; color: #8c6b5b; letter-spacing: 0.35px; line-height: 1.1; margin-top: 2px; text-transform: none; white-space: nowrap; font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif; }

            .mob-user-btn {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #ffffff;
                border: 1px solid #E7DFD4;
                box-shadow: 0 2px 5px -1px rgba(31, 41, 55, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
                color: #2B3647;
                font-size: 18px;
                position: relative;
                text-decoration: none !important;
                transition: transform 0.15s, background-color 0.15s;
                cursor: pointer;
            }
            .mob-user-btn:active {
                transform: scale(0.94);
                background: #FAF7F2;
            }

            .mob-sticky-bar {
                background: var(--site-bg);
                padding: 8px 12px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
                width: 100%;
                box-sizing: border-box;
                z-index: 9999;
                border-bottom: 1px solid #E7DFD4;
                box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
                transition: box-shadow 0.25s ease, background-color 0.25s ease;
            }

            .mob-sticky-bar.is-fixed {
                position: fixed;
                top: 0;
                left: 0;
                background: rgba(247, 243, 238, 0.96);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border-bottom: 1px solid #E7DFD4;
                box-shadow: 0 6px 18px rgba(31, 41, 55, 0.08), 0 1px 3px rgba(31, 41, 55, 0.04);
                animation: slideDown 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            }

            @keyframes slideDown {
                from { transform: translateY(-100%); }
                to { transform: translateY(0); }
            }

            .mob-search { flex-grow: 1; margin: 0; position: relative; }
            .mob-search .search-form {
                height: 42px;
                border-radius: 10px;
                background: #ffffff;
                border: 1px solid #E7DFD4;
                display: flex;
                overflow: hidden;
                box-shadow: 0 2px 6px -1px rgba(31, 41, 55, 0.07), 0 1px 2px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 1);
                transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
            }
            .mob-search .search-form:focus-within {
                border-color: #E9A23B;
                background: #ffffff;
                box-shadow: 0 4px 14px rgba(233, 162, 59, 0.25), 0 0 0 2px rgba(254, 189, 105, 0.35);
            }
            .mob-search .search-input {
                flex-grow: 1;
                border: none;
                padding: 0 13px;
                outline: none;
                font-size: 13.5px;
                font-weight: 500;
                color: #1F2937;
                background: transparent;
                min-width: 0;
                width: 100%;
            }
            .mob-search .search-input::placeholder {
                color: #8A7F77;
                font-weight: 400;
            }
            .mob-search .search-btn {
                background: linear-gradient(135deg, #FDBD60 0%, #E9A23B 100%);
                color: #1F2937;
                padding: 0 15px;
                border: none;
                font-size: 15px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0,0,0,0.05);
                transition: filter 0.2s, transform 0.1s;
            }
            .mob-search .search-btn:active {
                filter: brightness(0.92);
                transform: scale(0.97);
            }

            .mob-search .search-results-dropdown {
                border: 1px solid #E7DFD4;
                border-top: none;
                border-radius: 0 0 12px 12px;
                box-shadow: 0 10px 25px rgba(31, 41, 55, 0.12);
                margin-top: 4px;
            }

            .mob-menu-icon {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #ffffff;
                border: 1px solid #E7DFD4;
                box-shadow: 0 2px 6px -1px rgba(31, 41, 55, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
                font-size: 17px;
                color: #1F2937;
                cursor: pointer;
                flex-shrink: 0;
                transition: transform 0.15s, background-color 0.15s;
            }
            .mob-menu-icon:active {
                transform: scale(0.94);
                background: #FAF7F2;
            }

            .mob-cart-wrapper {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #ffffff;
                border: 1px solid #E7DFD4;
                box-shadow: 0 2px 6px -1px rgba(31, 41, 55, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
                font-size: 17px;
                color: #1F2937;
                position: relative;
                flex-shrink: 0;
                text-decoration: none !important;
                transition: transform 0.15s, background-color 0.15s;
            }
            .mob-cart-wrapper:active {
                transform: scale(0.94);
                background: #FAF7F2;
            }
            .mob-cart-wrapper .badge {
                position: absolute;
                top: -6px;
                right: -6px;
                background: #B4352C;
                color: #ffffff;
                font-size: 10.5px;
                font-weight: 700;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
                min-width: 19px;
                height: 19px;
                padding: 0 4px;
                border-radius: 50px;
                border: 2px solid #ffffff;
                box-shadow: 0 2px 5px rgba(180, 53, 44, 0.4);
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                line-height: 1;
                box-sizing: border-box;
                overflow: visible;
                pointer-events: none;
            }

            .mob-featured-line {
                background: var(--main-bg);
                display: flex; gap: 18px;
                padding: 9px 15px;
                overflow-x: auto;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }
            .mob-featured-line::-webkit-scrollbar { display: none; }
            .mob-feat-link { color: #fdfdfd; white-space: nowrap; font-size: 13px; font-weight: 500; text-decoration: none !important; display: flex; align-items: center; letter-spacing: 0.3px; }
        }
            /* small badge next to a menu link (Admin > Menu builder) */
        .rf-nb { display:inline-flex; align-items:center; height:16px; margin-left:6px; padding:0 6px; border-radius:8px; font-size:9.5px; font-weight:700; letter-spacing:.04em; line-height:1; vertical-align:2px; white-space:nowrap; }

/* Soft cross-fade from page to page (Chrome / Edge / Samsung Internet; other browsers simply ignore this) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Product sliders (home page sections): until the slider script starts, the products used to show
   one under another (page 27,000 px tall on phones, then suddenly 11,000 px) - that jump was the
   blink when coming back to the page. Now they sit in one row with the same sizes as the slider:
   2 per row on phones, 3 on tablets, 4 on computers (same numbers as the slider settings). */
.owl-carousel[class*="product-slider-"]:not(.owl-loaded):not(.owl-loading) { display: flex !important; flex-wrap: nowrap; overflow: hidden; gap: 5px; padding-bottom: 76px; } /* room for the arrows that appear under the slider */
.owl-carousel[class*="product-slider-"]:not(.owl-loaded):not(.owl-loading) > * { flex: 0 0 calc((100% - 5px) / 2); max-width: calc((100% - 5px) / 2); min-width: 0; }
@media (min-width: 600px) {
    .owl-carousel[class*="product-slider-"]:not(.owl-loaded):not(.owl-loading) { gap: 10px; padding-bottom: 86px; }
    .owl-carousel[class*="product-slider-"]:not(.owl-loaded):not(.owl-loading) > * { flex-basis: calc((100% - 20px) / 3); max-width: calc((100% - 20px) / 3); }
}
@media (min-width: 1000px) {
    .owl-carousel[class*="product-slider-"]:not(.owl-loaded):not(.owl-loading) { gap: 15px; padding-bottom: 86px; }
    .owl-carousel[class*="product-slider-"]:not(.owl-loaded):not(.owl-loading) > * { flex-basis: calc((100% - 45px) / 4); max-width: calc((100% - 45px) / 4); }
}