* { scroll-behavior: smooth; box-sizing: border-box; }
        body { font-family: 'Cairo', sans-serif; margin: 0; padding: 0; }
        .arabic-text { font-family: 'Noto Naskh Arabic', serif; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #f5f0eb; }
        ::-webkit-scrollbar-thumb { background: #8B5E3C; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #6B4423; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideInRight { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
        @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }
        @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
        @keyframes spin { to { transform: rotate(360deg); } }
        .animate-fade-in-up { animation: fadeInUp 0.5s ease-out forwards; opacity: 0; }
        .animate-fade-in { animation: fadeIn 0.3s ease-out forwards; opacity: 0; }
        .animate-slide-in-right { animation: slideInRight 0.4s ease-out forwards; opacity: 0; }
        .animate-float { animation: float 3s ease-in-out infinite; }
        .animate-spin { animation: spin 1s linear infinite; }
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        .delay-400 { animation-delay: 0.4s; }
        .delay-500 { animation-delay: 0.5s; }
        .glass { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
        .glass-dark { background: rgba(26, 26, 26, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
        .product-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -10px rgba(107, 68, 35, 0.2); }
        .product-card:hover .product-image { transform: scale(1.05); }
        .product-image { transition: transform 0.4s ease; }
        .btn-primary { background: linear-gradient(135deg, #6B4423 0%, #8B5E3C 100%); transition: all 0.3s ease; border: none; cursor: pointer; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(107, 68, 35, 0.3); background: linear-gradient(135deg, #5C3A1E 0%, #7A4E2E 100%); }
        .cart-panel { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
        .cart-panel.open { transform: translateX(0); }
        .cart-panel.closed { transform: translateX(-100%); }
        .overlay { transition: opacity 0.3s ease; }
        .overlay.show { opacity: 1; pointer-events: all; }
        .overlay.hide { opacity: 0; pointer-events: none; }
        .weight-btn { transition: all 0.2s ease; }
        .weight-btn.active { background: #6B4423; color: white; border-color: #6B4423; }
        .qty-btn { transition: all 0.15s ease; }
        .qty-btn:active { transform: scale(0.9); }
        .toast { transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
        .toast.show { transform: translateX(0); opacity: 1; }
        .toast.hide { transform: translateX(150%); opacity: 0; }
        .skeleton { background: linear-gradient(90deg, #f0e1c2 25%, #f5ebd6 50%, #f0e1c2 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
        .hero-bg { background-attachment: fixed; }
        @media (max-width: 768px) { .hero-bg { background-attachment: scroll; } }
        .admin-sidebar { transition: all 0.3s ease; }
        .order-card { transition: box-shadow 0.3s ease; }
        .order-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .payment-card { transition: all 0.2s ease; cursor: pointer; }
        .payment-card:hover { border-color: #8B5E3C; }
        .payment-card.selected { border-color: #6B4423; background: #fdfbf7; }
        .category-pill { transition: all 0.2s ease; }
        .category-pill:hover { transform: translateY(-2px); }
        .category-pill.active { background: #6B4423; color: white; }
        .review-card { transition: all 0.3s ease; }
        .review-card:hover { transform: translateY(-4px); }
        .form-input:focus { border-color: #8B5E3C; box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.15); }
        .mobile-menu { transition: all 0.3s ease; }
        .mobile-menu.open { transform: translateX(0); }
        .mobile-menu.closed { transform: translateX(100%); }
        .badge-pulse::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: #D4A574; animation: pulse-ring 1.5s ease-out infinite; z-index: -1; }
        .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
        .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

        nav:not(.admin-sidebar nav):not(.admin-sidebar-mobile nav) { background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(12px); }
        .admin-sidebar nav, .admin-sidebar-mobile nav { background: transparent !important; backdrop-filter: none; }
        .text-white { color: #ffffff !important; }
        .text-cream-200 { color: #fff3db !important; }
        .text-cream-300 { color: #ffedc9 !important; }

        .social-icon { background: #6B4423 !important; color: white !important; transition: all 0.2s ease; }
        .social-icon:hover { transform: scale(1.1); opacity: 0.9; }

        .admin-sidebar-mobile { transform: translateX(100%); transition: transform 0.3s ease; z-index: 60; }
        .admin-sidebar-mobile.open { transform: translateX(0); }

        .admin-sidebar,
        .admin-sidebar-mobile {
            background: #1a1a1a !important;
            color: #ffffff !important;
            overflow-y: auto;
        }

        .admin-sidebar nav button,
        .admin-sidebar-mobile nav button {
            color: #e0e0e0 !important;
        }

        .admin-sidebar nav button:hover,
        .admin-sidebar-mobile nav button:hover {
            background: #2d2d2d !important;
            color: #ffffff !important;
        }

        .admin-sidebar nav button.active,
        .admin-sidebar-mobile nav button.active {
            background: #8B5E3C !important;
            color: #ffffff !important;
        }

        .admin-sidebar .border-coffee-800,
        .admin-sidebar-mobile .border-coffee-800 {
            border-color: #333333 !important;
        }

        .admin-sidebar .text-cream-300,
        .admin-sidebar-mobile .text-cream-300 {
            color: #b0b0b0 !important;
        }

        .admin-sidebar .text-red-400,
        .admin-sidebar-mobile .text-red-400 {
            color: #ff6b6b !important;
        }

        .menu-info-btn { transition: all 0.2s ease; }
        .menu-info-btn:hover { background: #6B4423; color: white; }

        .faq-item { transition: all 0.3s ease; }
        .faq-item.active { background: #f5f0eb; }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
        .faq-answer.open { max-height: 500px; padding-top: 1rem; }

        .founder-image-circular {
            border-radius: 50% !important;
            aspect-ratio: 1/1;
            object-fit: cover;
            width: 280px;
            height: 280px;
            max-width: 100%;
            margin: 0 auto;
            display: block;
        }

        @keyframes coffeeFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(10deg); }
        }
        @keyframes coffeeSteam {
            0% { transform: translateY(0) scaleX(1); opacity: 0.06; }
            50% { transform: translateY(-30px) scaleX(1.2); opacity: 0.03; }
            100% { transform: translateY(-60px) scaleX(0.8); opacity: 0; }
        }
        .coffee-frame-left {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: 8px;
            background: linear-gradient(180deg, #6B4423 0%, #8B5E3C 30%, #D4A574 50%, #8B5E3C 70%, #6B4423 100%);
            z-index: 1;
            opacity: 0.15;
        }
        .coffee-frame-right {
            position: fixed;
            right: 0;
            top: 0;
            bottom: 0;
            width: 8px;
            background: linear-gradient(180deg, #6B4423 0%, #8B5E3C 30%, #D4A574 50%, #8B5E3C 70%, #6B4423 100%);
            z-index: 1;
            opacity: 0.15;
        }
        .coffee-frame-top {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #6B4423 0%, #8B5E3C 30%, #D4A574 50%, #8B5E3C 70%, #6B4423 100%);
            z-index: 1;
            opacity: 0.12;
        }
        .coffee-corner-tl, .coffee-corner-tr, .coffee-corner-bl, .coffee-corner-br {
            position: fixed;
            width: 40px;
            height: 40px;
            z-index: 2;
            opacity: 0.2;
            pointer-events: none;
        }
        .coffee-corner-tl { top: 10px; left: 10px; }
        .coffee-corner-tr { top: 10px; right: 10px; transform: scaleX(-1); }
        .coffee-corner-bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
        .coffee-corner-br { bottom: 10px; right: 10px; transform: scale(-1, -1); }
        .coffee-corner-tl::before, .coffee-corner-tr::before, .coffee-corner-bl::before, .coffee-corner-br::before {
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border-top: 3px solid #8B5E3C;
            border-left: 3px solid #8B5E3C;
            border-radius: 8px 0 0 0;
        }
        .coffee-corner-tl::after, .coffee-corner-tr::after, .coffee-corner-bl::after, .coffee-corner-br::after {
            content: '';
            position: absolute;
            top: 5px;
            left: 5px;
            width: 8px;
            height: 8px;
            background: #D4A574;
            border-radius: 50%;
        }

        @media (max-width: 640px) {
            .product-card .p-5 { padding: 1rem !important; }
            .product-card img { height: 12rem !important; }
            section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
            .text-3xl { font-size: 1.75rem !important; }
            .text-4xl { font-size: 2rem !important; }
            .text-5xl { font-size: 2.25rem !important; }
            .p-6 { padding: 1.25rem !important; }
            .p-8 { padding: 1.5rem !important; }
            .hero-section { padding-top: 6rem !important; padding-bottom: 4rem !important; }
            .hero-section h1 { font-size: 2rem !important; }
            .cart-panel { max-width: 100% !important; }
            .mobile-menu { width: 100% !important; }
            .admin-sidebar-mobile { width: 100% !important; }
            .menu-table th, .menu-table td { padding: 0.625rem 0.875rem !important; }
            .menu-table img { width: 3rem !important; height: 3rem !important; }
            .about-founder-img { width: 220px !important; height: 220px !important; }
            .coffee-frame-left, .coffee-frame-right { display: none !important; }
            .coffee-corner-tl, .coffee-corner-tr, .coffee-corner-bl, .coffee-corner-br { display: none !important; }
        }

        .coffee-bean-shape {
            position: absolute;
            width: 40px;
            height: 60px;
            background: rgba(107, 68, 35, 0.05);
            border-radius: 50%;
            transform: rotate(45deg);
            pointer-events: none;
        }

        .coffee-steam {
            position: absolute;
            width: 2px;
            height: 30px;
            background: linear-gradient(to top, rgba(212, 165, 116, 0.2), transparent);
            border-radius: 2px;
            animation: float 2s ease-in-out infinite;
        }

        .compact-card { padding: 1rem; }
        .compact-icon { width: 2.5rem; height: 2.5rem; }
        .compact-text { font-size: 0.875rem; }

        @media (max-width: 1024px) {
            .admin-sidebar-mobile {
                width: 280px;
            }
        }

        .report-card {
            background: linear-gradient(135deg, #fff 0%, #fdfbf7 100%);
            border: 1px solid #f0e1c2;
        }

        .menu-table th, .menu-table td {
            padding: 0.75rem 1rem;
        }
    


        /* Mobile sidebar touch handling */
        .admin-sidebar-mobile {
            touch-action: pan-y;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        .admin-sidebar-mobile * {
            touch-action: auto;
        }
        .admin-sidebar-mobile nav {
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        /* Prevent body scroll when sidebar is open */
        body.sidebar-open {
            overflow: hidden !important;
            touch-action: none !important;
        }


/* ================================================================
   BEN RASMI — Visitor storefront visual refresh
   Scoped to .visitor-site so the admin interface remains unchanged.
   ================================================================ */
.visitor-site {
    --visitor-espresso: #21150f;
    --visitor-coffee: #42291b;
    --visitor-caramel: #d7aa75;
    --visitor-cream: #fff6e8;
    color: #302219;
}
.visitor-site nav:not(.admin-sidebar nav):not(.admin-sidebar-mobile nav) {
    background: rgba(255, 251, 244, .91) !important;
    border-bottom: 1px solid rgba(91, 59, 37, .09);
    box-shadow: 0 8px 32px rgba(34, 22, 14, .045);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.visitor-site nav a,
.visitor-site nav button { transition: color .22s ease, background-color .22s ease, transform .22s ease; }
.visitor-site nav a:hover,
.visitor-site nav button:hover { color: #8a552e !important; }
.visitor-site .mobile-menu {
    background: linear-gradient(155deg, #fffdf8 0%, #f5ead9 100%);
    border-left: 1px solid rgba(90, 54, 31, .12);
}
.visitor-site .mobile-menu > div:first-child > div:first-child button:first-child {
    color: #4b3322 !important;
}

/* Premium hero */
.visitor-site .visitor-hero {
    min-height: min(900px, 100svh);
    background: #1b120d;
    isolation: isolate;
    padding-top: 2.25rem;
}
.visitor-site .visitor-hero-media { overflow: hidden; z-index: -2; }
.visitor-site .visitor-hero-image {
    object-position: center 54%;
    transform: scale(1.025);
    animation: visitorHeroImageIn 1.2s ease-out both;
    filter: saturate(.83) contrast(1.04);
}
.visitor-site .visitor-hero-overlay {
    background:
        linear-gradient(90deg, rgba(17, 11, 7, .42) 0%, rgba(24, 15, 10, .57) 48%, rgba(22, 14, 9, .89) 100%),
        linear-gradient(0deg, rgba(22, 14, 9, .88) 0%, transparent 35%, rgba(22, 14, 9, .22) 100%);
}
.visitor-site .visitor-hero-glow {
    position: absolute;
    width: clamp(220px, 35vw, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(3px);
    opacity: .7;
}
.visitor-site .visitor-hero-glow-one {
    right: -12%; top: 8%;
    background: radial-gradient(circle, rgba(183, 117, 61, .17), rgba(183, 117, 61, 0) 68%);
}
.visitor-site .visitor-hero-glow-two {
    left: -12%; bottom: -28%;
    background: radial-gradient(circle, rgba(226, 181, 121, .12), rgba(226, 181, 121, 0) 70%);
}
.visitor-site .visitor-hero-grain {
    position: absolute; inset: 0; opacity: .10; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}
.visitor-site .visitor-hero-inner { padding-top: clamp(145px, 17vh, 210px); padding-bottom: 105px; }
.visitor-site .visitor-hero-copy { max-width: 710px; }
.visitor-site .visitor-hero-accent { display: flex; align-items: center; gap: 7px; height: 12px; margin-bottom: 24px; }
.visitor-site .visitor-hero-accent span { display: block; height: 3px; border-radius: 10px; background: #d7aa75; }
.visitor-site .visitor-hero-accent span:nth-child(1) { width: 44px; }
.visitor-site .visitor-hero-accent span:nth-child(2) { width: 18px; opacity: .64; }
.visitor-site .visitor-hero-accent span:nth-child(3) { width: 7px; opacity: .4; }
.visitor-site .visitor-hero-title {
    max-width: 700px; margin-bottom: 22px !important;
    font-size: clamp(2.65rem, 5vw, 4.75rem) !important;
    line-height: 1.25 !important; letter-spacing: -.045em;
    text-wrap: balance; text-shadow: 0 3px 28px rgba(0,0,0,.18);
}
.visitor-site .visitor-hero-subtitle {
    max-width: 590px; margin-bottom: 34px !important;
    color: rgba(255, 246, 232, .82) !important;
    font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
    line-height: 2 !important; text-wrap: pretty;
}
.visitor-site .visitor-hero-actions { width: min(100%, 620px); }
.visitor-site .visitor-btn {
    min-height: 64px; flex: 1 1 0; position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 13px;
    padding: 17px 23px; border-radius: 17px; font-family: inherit;
    font-size: 1.03rem; line-height: 1.35; font-weight: 800; text-decoration: none;
    cursor: pointer; outline-offset: 4px;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
.visitor-site .visitor-btn::before {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: linear-gradient(115deg, transparent 15%, rgba(255,255,255,.2) 48%, transparent 76%);
    transform: translateX(-120%); transition: transform .5s ease, opacity .3s ease;
}
.visitor-site .visitor-btn:hover::before { opacity: 1; transform: translateX(120%); }
.visitor-site .visitor-btn:hover { transform: translateY(-3px); }
.visitor-site .visitor-btn:active { transform: translateY(-1px) scale(.99); }
.visitor-site .visitor-btn > * { position: relative; z-index: 1; }
.visitor-site .visitor-btn-icon { display: inline-flex; align-items: center; justify-content: center; }
.visitor-site .visitor-btn-arrow { margin-inline-start: auto; opacity: .78; transition: transform .2s ease, opacity .2s ease; }
.visitor-site .visitor-btn:hover .visitor-btn-arrow { transform: translateX(-3px); opacity: 1; }
.visitor-site .visitor-btn-primary {
    color: #28180e; border: 1px solid #f3d3a7;
    background: linear-gradient(135deg, #f3d7af 0%, #d7aa75 52%, #c18d58 100%);
    box-shadow: 0 13px 30px rgba(8, 5, 3, .22), inset 0 1px rgba(255,255,255,.55);
}
.visitor-site .visitor-btn-primary:hover { color: #21140b; box-shadow: 0 17px 36px rgba(8, 5, 3, .3), 0 0 0 4px rgba(215,170,117,.11); }
.visitor-site .visitor-btn-secondary {
    color: #fff7ec; border: 1px solid rgba(255, 244, 225, .34);
    background: rgba(255, 248, 237, .075); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: inset 0 1px rgba(255,255,255,.10);
}
.visitor-site .visitor-btn-secondary:hover { color: #fff; background: rgba(255, 248, 237, .14); border-color: rgba(245, 211, 167, .72); }
.visitor-site .visitor-hero-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 620px); margin-top: 15px; }
.visitor-site .visitor-service-btn {
    min-width: 0; display: flex; align-items: center; gap: 12px; padding: 13px 15px;
    border: 1px solid rgba(255, 244, 225, .16); border-radius: 15px;
    background: rgba(31, 20, 13, .40); color: #fff5e8; text-align: right; font: inherit;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer;
    transition: background .24s ease, border-color .24s ease, transform .24s ease;
}
.visitor-site .visitor-service-btn:hover { transform: translateY(-2px); background: rgba(255, 246, 231, .10); border-color: rgba(215,170,117,.48); }
.visitor-site .visitor-service-icon {
    width: 43px; height: 43px; flex: 0 0 43px; display: inline-flex; align-items: center; justify-content: center;
    color: #e6bb86; background: rgba(215,170,117,.13); border: 1px solid rgba(215,170,117,.2); border-radius: 12px;
}
.visitor-site .visitor-service-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 2px; }
.visitor-site .visitor-service-copy strong { color: #fff6e8; font-size: .94rem; font-weight: 800; line-height: 1.45; }
.visitor-site .visitor-service-copy small { color: rgba(255,246,232,.58); font-size: .76rem; line-height: 1.5; }
.visitor-site .visitor-service-arrow { flex: 0 0 auto; color: rgba(230,187,134,.75); transition: transform .2s ease; }
.visitor-site .visitor-service-btn:hover .visitor-service-arrow { transform: translate(-2px,-2px); color: #f3d7af; }
.visitor-site .visitor-hero-stats {
    display: flex; align-items: stretch; gap: clamp(17px, 2.5vw, 35px); width: min(100%, 620px);
    margin-top: 34px; padding-top: 23px; border-top: 1px solid rgba(255, 246, 232, .15);
}
.visitor-site .visitor-stat { min-width: 0; flex: 1; }
.visitor-site .visitor-stat-value { color: #e5b981; font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 900; line-height: 1.2; letter-spacing: -.02em; }
.visitor-site .visitor-stat-label { margin-top: 7px; color: rgba(255,246,232,.69); font-size: .78rem; line-height: 1.6; }
.visitor-site .visitor-stat-label span { color: rgba(255,246,232,.48); }
.visitor-site .visitor-stat-divider { align-self: center; width: 1px; height: 37px; background: rgba(255,246,232,.16); }
.visitor-site .visitor-stat-rating { display: flex; align-items: center; gap: 7px; }
.visitor-site .visitor-stat-rating svg { fill: #e5b981; stroke: #e5b981; }
.visitor-site .visitor-hero-scroll {
    position: absolute; bottom: 29px; left: 50%; width: 27px; height: 43px; border: 1px solid rgba(255,246,232,.40);
    border-radius: 20px; display: flex; justify-content: center; padding-top: 8px; opacity: .72;
    transform: translateX(-50%); transition: opacity .2s ease; z-index: 2;
}
.visitor-site .visitor-hero-scroll:hover { opacity: 1; }
.visitor-site .visitor-hero-scroll span { width: 3px; height: 8px; border-radius: 3px; background: #e5b981; animation: visitorScrollDot 1.5s ease-in-out infinite; }
.visitor-site .visitor-hero-bean { position: absolute; z-index: -1; width: 84px; height: 122px; border: 1px solid rgba(231,187,132,.18); border-radius: 60% 40% 60% 40%; transform: rotate(38deg); pointer-events: none; }
.visitor-site .visitor-hero-bean::after { content: ''; position: absolute; top: 7%; bottom: 7%; left: 49%; width: 1px; background: rgba(231,187,132,.18); transform: rotate(8deg); }
.visitor-site .visitor-hero-bean-one { left: 9%; top: 25%; }
.visitor-site .visitor-hero-bean-two { left: 18%; bottom: 19%; width: 50px; height: 75px; transform: rotate(66deg); opacity: .7; }

/* Cleaner section rhythm and refined product/category cards */
.visitor-site #products,
.visitor-site #categories,
.visitor-site #about,
.visitor-site #why-us,
.visitor-site #reviews,
.visitor-site #contact { scroll-margin-top: 90px; }
.visitor-site #products,
.visitor-site #categories,
.visitor-site #about,
.visitor-site #why-us,
.visitor-site #reviews,
.visitor-site #contact { padding-top: clamp(64px, 7vw, 100px) !important; padding-bottom: clamp(64px, 7vw, 100px) !important; }
.visitor-site .mb-12:has(> h2) { margin-bottom: clamp(30px, 4vw, 48px) !important; }
.visitor-site .mb-12 > h2 { letter-spacing: -.025em; }
.visitor-site .mb-12 > p { font-size: 1rem !important; line-height: 1.9; }
.visitor-site .product-card {
    border: 1px solid rgba(99, 67, 43, .10) !important; border-radius: 22px !important;
    box-shadow: 0 5px 18px rgba(56, 36, 18, .035) !important;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.visitor-site .product-card:hover { transform: translateY(-6px); border-color: rgba(139,94,60,.24) !important; box-shadow: 0 22px 48px rgba(56,36,18,.12) !important; }
.visitor-site .product-card .product-image { transition: transform .55s cubic-bezier(.2,.75,.25,1), filter .3s ease; }
.visitor-site .product-card:hover .product-image { transform: scale(1.055); filter: saturate(1.04); }
.visitor-site .product-card > div:first-child { background: #f1e7d9; }
.visitor-site .product-card h3 { letter-spacing: -.01em; }
.visitor-site .product-card button { box-shadow: 0 5px 12px rgba(56,36,18,.08); }
.visitor-site .store-category-grid .category-pill {
    border: 1px solid rgba(99,67,43,.12) !important; border-radius: 22px !important;
    box-shadow: 0 7px 20px rgba(56,36,18,.035);
}
.visitor-site .store-category-grid .category-pill:hover { transform: translateY(-5px); box-shadow: 0 17px 32px rgba(56,36,18,.12); }
.visitor-site .store-category-grid .category-pill > div > div:first-child { border-radius: 16px !important; }
.visitor-site .visitor-btn:focus-visible,
.visitor-site .visitor-service-btn:focus-visible { outline: 3px solid rgba(215,170,117,.72); outline-offset: 3px; }

@keyframes visitorHeroImageIn { from { transform: scale(1.08); opacity: .78; } to { transform: scale(1.025); opacity: 1; } }
@keyframes visitorScrollDot { 0%, 100% { transform: translateY(0); opacity: 1; } 65% { transform: translateY(11px); opacity: .2; } }

@media (min-width: 1440px) {
    .visitor-site .visitor-hero-overlay { background: linear-gradient(90deg, rgba(17,11,7,.30) 0%, rgba(24,15,10,.52) 45%, rgba(22,14,9,.90) 100%), linear-gradient(0deg, rgba(22,14,9,.85) 0%, transparent 37%, rgba(22,14,9,.18) 100%); }
}
@media (max-width: 768px) {
    .visitor-site .visitor-hero { min-height: auto; }
    .visitor-site .visitor-hero-overlay { background: linear-gradient(90deg, rgba(18,11,7,.68), rgba(22,14,9,.81)), linear-gradient(0deg, rgba(22,14,9,.7), transparent 70%); }
    .visitor-site .visitor-hero-inner { padding-top: 138px; padding-bottom: 96px; }
    .visitor-site .visitor-hero-copy { max-width: 100%; }
    .visitor-site .visitor-hero-title { font-size: clamp(2.25rem, 8vw, 3.35rem) !important; line-height: 1.33 !important; margin-bottom: 18px !important; }
    .visitor-site .visitor-hero-subtitle { font-size: 1rem !important; line-height: 1.9 !important; margin-bottom: 26px !important; }
    .visitor-site .visitor-btn { min-height: 58px; border-radius: 15px; padding: 15px 17px; font-size: .96rem; }
    .visitor-site .visitor-hero-services { gap: 9px; margin-top: 11px; }
    .visitor-site .visitor-service-btn { gap: 9px; padding: 11px 10px; border-radius: 13px; }
    .visitor-site .visitor-service-icon { width: 37px; height: 37px; flex-basis: 37px; border-radius: 11px; }
    .visitor-site .visitor-service-copy strong { font-size: .82rem; }
    .visitor-site .visitor-service-copy small { font-size: .68rem; }
    .visitor-site .visitor-service-arrow { display: none; }
    .visitor-site .visitor-hero-stats { gap: 12px; margin-top: 27px; padding-top: 19px; }
    .visitor-site .visitor-stat-value { font-size: clamp(1.25rem, 5vw, 1.65rem); }
    .visitor-site .visitor-stat-label { font-size: .68rem; margin-top: 5px; }
    .visitor-site .visitor-stat-divider { height: 30px; }
    .visitor-site .visitor-hero-bean-one { left: -20px; top: 18%; }
    .visitor-site .visitor-hero-bean-two { display: none; }
    .visitor-site .visitor-hero-scroll { bottom: 24px; }
}
@media (max-width: 420px) {
    .visitor-site .visitor-hero-inner { padding-inline: 18px; }
    .visitor-site .visitor-hero-actions { gap: 10px; }
    .visitor-site .visitor-btn { gap: 9px; padding-inline: 13px; font-size: .9rem; }
    .visitor-site .visitor-btn-icon svg { width: 18px; height: 18px; }
    .visitor-site .visitor-hero-services { grid-template-columns: 1fr; }
    .visitor-site .visitor-service-arrow { display: block; }
    .visitor-site .visitor-stat-label { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
    .visitor-site .visitor-hero-image,
    .visitor-site .visitor-hero-scroll span,
    .visitor-site .animate-fade-in-up { animation: none !important; }
    .visitor-site .visitor-btn,
    .visitor-site .visitor-service-btn,
    .visitor-site .product-card,
    .visitor-site .category-pill { transition: none !important; }
}

/* =========================================================
   Visitor refresh — premium coffee motion and micro-interactions
   Scoped to the storefront only; admin styles and behavior stay untouched.
   ========================================================= */
.visitor-site .visitor-hero {
    min-height: min(920px, 100svh);
    isolation: isolate;
    background-color: #1b120d;
}
.visitor-site .visitor-hero-inner { z-index: 2; }
.visitor-site .visitor-hero-copy { position: relative; }
.visitor-site .visitor-hero-title {
    letter-spacing: -.055em;
    text-shadow: 0 8px 34px rgba(0,0,0,.28);
}
.visitor-site .visitor-hero-subtitle {
    max-width: 560px;
    color: rgba(255,247,236,.86) !important;
}

/* A softly animated coffee-bean emblem fills the quiet side of the hero. */
.visitor-site .visitor-hero-motion-art {
    position: absolute;
    z-index: 0;
    left: clamp(20px, 5.3vw, 92px);
    top: 49%;
    width: clamp(285px, 32vw, 455px);
    aspect-ratio: 1;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .9;
    filter: drop-shadow(0 22px 52px rgba(0,0,0,.12));
}
.visitor-site .visitor-art-halo {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(218,164,102,.17) 0%, rgba(171,105,56,.09) 36%, transparent 70%);
    filter: blur(13px);
    animation: visitorHaloBreath 7s ease-in-out infinite;
}
.visitor-site .visitor-art-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.visitor-site .visitor-art-orbit-outer {
    inset: 2%;
    border: 1px solid rgba(237,197,146,.29);
    border-left-color: rgba(237,197,146,.06);
    border-bottom-color: rgba(237,197,146,.13);
    transform: rotate(-22deg);
    animation: visitorOrbitSpin 38s linear infinite;
}
.visitor-site .visitor-art-orbit-outer::before,
.visitor-site .visitor-art-orbit-outer::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e9bd87;
    box-shadow: 0 0 18px rgba(233,189,135,.65);
}
.visitor-site .visitor-art-orbit-outer::before { top: 14%; left: 18%; }
.visitor-site .visitor-art-orbit-outer::after { bottom: 17%; right: 11%; width: 5px; height: 5px; opacity: .72; }
.visitor-site .visitor-art-orbit-inner {
    inset: 15%;
    border: 1px dashed rgba(235,190,137,.23);
    border-right-color: rgba(235,190,137,.05);
    transform: rotate(24deg) scaleY(.88);
    animation: visitorOrbitSpinReverse 31s linear infinite;
}
.visitor-site .visitor-art-bean {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 88px;
    height: 139px;
    border: 1px solid rgba(241,198,146,.62);
    border-radius: 59% 41% 59% 41% / 46% 44% 56% 54%;
    background: linear-gradient(145deg, rgba(230,184,128,.23), rgba(88,52,28,.11) 66%, rgba(244,207,159,.10));
    box-shadow: inset 7px 4px 22px rgba(255,233,200,.05), 0 0 55px rgba(219,165,105,.12);
    transform: translate(-50%, -50%) rotate(39deg);
    animation: visitorBeanLevitate 6s ease-in-out infinite;
}
.visitor-site .visitor-art-bean::after {
    content: '';
    position: absolute;
    top: 7%;
    bottom: 7%;
    left: 50%;
    width: 1.5px;
    border-radius: 100%;
    background: linear-gradient(180deg, transparent, rgba(247,211,167,.72) 18%, rgba(247,211,167,.55) 78%, transparent);
    transform: rotate(5deg);
    box-shadow: 0 0 10px rgba(247,211,167,.18);
}
.visitor-site .visitor-art-bean span {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 18%;
    right: 18%;
    border-radius: 50%;
    background: rgba(255,231,195,.6);
    filter: blur(5px);
}
.visitor-site .visitor-art-particle {
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e8bd8a;
    box-shadow: 0 0 15px rgba(232,189,138,.75);
    animation: visitorParticleFloat 5.5s ease-in-out infinite;
}
.visitor-site .visitor-art-particle-one { left: 25%; top: 26%; animation-delay: -.8s; }
.visitor-site .visitor-art-particle-two { right: 22%; top: 33%; width: 4px; height: 4px; animation-delay: -2.1s; }
.visitor-site .visitor-art-particle-three { left: 28%; bottom: 22%; width: 3px; height: 3px; animation-delay: -3s; }
.visitor-site .visitor-art-particle-four { right: 28%; bottom: 21%; animation-delay: -1.7s; }

/* More tactile calls to action. */
.visitor-site .visitor-btn {
    min-height: 67px;
    border-radius: 19px;
    gap: 12px;
    box-shadow: 0 10px 26px rgba(4,3,2,.16), inset 0 1px rgba(255,255,255,.15);
    transform: translateZ(0);
}
.visitor-site .visitor-btn-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), background .28s ease;
}
.visitor-site .visitor-btn-primary .visitor-btn-icon {
    color: #ffe8c8;
    background: rgba(52,31,17,.13);
    border: 1px solid rgba(71,43,23,.10);
}
.visitor-site .visitor-btn-secondary .visitor-btn-icon {
    color: #f5d2a6;
    background: rgba(243,215,175,.10);
    border: 1px solid rgba(243,215,175,.18);
}
.visitor-site .visitor-btn:hover .visitor-btn-icon { transform: scale(1.06) rotate(-4deg); }
.visitor-site .visitor-btn-primary {
    background: linear-gradient(118deg, #f6dfbd 0%, #dfb27c 46%, #c88f58 100%);
    background-size: 150% 150%;
    border-color: rgba(255,232,199,.8);
    box-shadow: 0 15px 34px rgba(5,3,2,.27), inset 0 1px rgba(255,255,255,.58);
}
.visitor-site .visitor-btn-primary:hover {
    background-position: 100% 0;
    box-shadow: 0 20px 44px rgba(5,3,2,.31), 0 0 0 4px rgba(221,174,119,.13), inset 0 1px rgba(255,255,255,.6);
}
.visitor-site .visitor-btn-secondary {
    border-color: rgba(255,244,225,.42);
    background: linear-gradient(135deg, rgba(255,250,241,.105), rgba(255,250,241,.035));
    box-shadow: inset 0 1px rgba(255,255,255,.13), 0 12px 30px rgba(0,0,0,.10);
}
.visitor-site .visitor-btn-secondary:hover {
    background: linear-gradient(135deg, rgba(255,250,241,.18), rgba(255,250,241,.075));
    border-color: rgba(244,207,159,.78);
}
.visitor-site .visitor-btn:focus-visible,
.visitor-site .visitor-service-btn:focus-visible {
    outline-color: #f0c995;
    outline-offset: 4px;
}
.visitor-site .visitor-service-btn {
    position: relative;
    overflow: hidden;
    min-height: 73px;
    border-radius: 17px;
    border-color: rgba(255,244,225,.19);
    background: linear-gradient(135deg, rgba(42,27,18,.57), rgba(26,17,12,.39));
    box-shadow: inset 0 1px rgba(255,255,255,.065), 0 8px 23px rgba(0,0,0,.08);
}
.visitor-site .visitor-service-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239,194,142,.55), transparent);
    opacity: .55;
}
.visitor-site .visitor-service-btn:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, rgba(74,47,30,.65), rgba(36,23,15,.55));
    border-color: rgba(229,183,129,.52);
    box-shadow: inset 0 1px rgba(255,255,255,.10), 0 16px 32px rgba(0,0,0,.17), 0 0 0 1px rgba(229,183,129,.07);
}
.visitor-site .visitor-service-icon {
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(225,178,120,.18), rgba(225,178,120,.055));
    box-shadow: inset 0 1px rgba(255,255,255,.08);
    transition: transform .3s ease, color .3s ease, border-color .3s ease;
}
.visitor-site .visitor-service-btn:hover .visitor-service-icon { transform: rotate(-5deg) scale(1.06); color: #ffe0b7; border-color: rgba(239,194,142,.42); }
.visitor-site .visitor-service-copy strong { font-size: .98rem; letter-spacing: -.01em; }
.visitor-site .visitor-service-copy small { font-size: .78rem; }
.visitor-site .visitor-stat-value { text-shadow: 0 0 22px rgba(229,185,129,.10); }

/* Storefront-wide visual polish. */
.visitor-site nav:not(.admin-sidebar nav):not(.admin-sidebar-mobile nav) {
    background: rgba(255,252,246,.88) !important;
    border-bottom-color: rgba(91,59,37,.10);
    box-shadow: 0 10px 35px rgba(34,22,14,.055);
}
.visitor-site nav a[href="#home"] { transition: transform .25s ease; }
.visitor-site nav a[href="#home"]:hover { transform: translateY(-1px); }
.visitor-site .product-card {
    position: relative;
    isolation: isolate;
    box-shadow: 0 8px 24px rgba(56,36,18,.045) !important;
}
.visitor-site .product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(220,171,116,0);
    pointer-events: none;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.visitor-site .product-card:hover::after { border-color: rgba(220,171,116,.32); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.visitor-site .category-pill { position: relative; isolation: isolate; }
.visitor-site .category-pill::before {
    content: '';
    position: absolute;
    width: 170px;
    height: 170px;
    top: -95px;
    left: -95px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,165,116,.17), transparent 70%);
    opacity: 0;
    transition: opacity .35s ease, transform .5s ease;
    transform: scale(.72);
    pointer-events: none;
}
.visitor-site .category-pill:hover::before { opacity: 1; transform: scale(1.18); }
.visitor-site .category-pill > div { transition: transform .3s ease; }
.visitor-site .category-pill:hover > div { transform: translateY(-2px); }
.visitor-site .review-card { border-color: rgba(99,67,43,.10); }
.visitor-site .review-card:hover { box-shadow: 0 16px 36px rgba(56,36,18,.09); }
.visitor-site .visitor-hero-scroll { backdrop-filter: blur(6px); }

@keyframes visitorOrbitSpin { from { transform: rotate(-22deg); } to { transform: rotate(338deg); } }
@keyframes visitorOrbitSpinReverse { from { transform: rotate(24deg) scaleY(.88); } to { transform: rotate(-336deg) scaleY(.88); } }
@keyframes visitorBeanLevitate {
    0%, 100% { transform: translate(-50%, -50%) rotate(39deg) translateY(0); }
    50% { transform: translate(-50%, -50%) rotate(35deg) translateY(-11px); }
}
@keyframes visitorHaloBreath { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes visitorParticleFloat { 0%, 100% { opacity: .35; transform: translate3d(0,0,0) scale(.8); } 50% { opacity: .95; transform: translate3d(5px,-13px,0) scale(1.25); } }
@keyframes visitorHeroImageDrift { from { transform: scale(1.025) translateX(0); } to { transform: scale(1.085) translateX(-1.2%); } }

@media (min-width: 769px) {
    .visitor-site .visitor-hero-image {
        animation: visitorHeroImageIn 1.2s ease-out both, visitorHeroImageDrift 28s ease-in-out 1.2s infinite alternate;
    }
}
@media (max-width: 1100px) {
    .visitor-site .visitor-hero-motion-art { left: 12px; width: clamp(230px, 29vw, 330px); opacity: .63; }
}
@media (max-width: 768px) {
    .visitor-site .visitor-hero-motion-art { display: none; }
    .visitor-site .visitor-hero-inner { padding-top: 132px; padding-bottom: 90px; }
    .visitor-site .visitor-hero-title { letter-spacing: -.035em; }
    .visitor-site .visitor-btn { min-height: 60px; border-radius: 16px; }
    .visitor-site .visitor-service-btn { min-height: 66px; }
}
@media (max-width: 420px) {
    .visitor-site .visitor-hero-actions { width: 100%; }
    .visitor-site .visitor-btn { padding-inline: 12px; gap: 8px; }
    .visitor-site .visitor-btn-icon { width: 34px; height: 34px; flex-basis: 34px; }
    .visitor-site .visitor-service-copy small { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .visitor-site .visitor-hero-motion-art,
    .visitor-site .visitor-art-halo,
    .visitor-site .visitor-art-orbit,
    .visitor-site .visitor-art-bean,
    .visitor-site .visitor-art-particle,
    .visitor-site .visitor-hero-image,
    .visitor-site .visitor-hero-scroll span,
    .visitor-site .visitor-hero-glow,
    .visitor-site .visitor-hero-bean,
    .visitor-site .animate-fade-in-up { animation: none !important; }
    .visitor-site .visitor-btn,
    .visitor-site .visitor-service-btn,
    .visitor-site .visitor-service-icon,
    .visitor-site .product-card,
    .visitor-site .category-pill,
    .visitor-site .category-pill > div { transition: none !important; }
}


/* =====================================================================
   BEN RASMI — Complete storefront design system (desktop + mobile)
   Final override layer: visitor-facing only. Admin screens are untouched.
   ===================================================================== */
.visitor-site {
    --br-ink: #2d2118;
    --br-espresso: #26170f;
    --br-roast: #4a2d1c;
    --br-caramel: #c99258;
    --br-gold: #e5bd8a;
    --br-paper: #fbf7f0;
    --br-line: rgba(76, 48, 29, .11);
    background: var(--br-paper) !important;
    color: var(--br-ink);
    overflow-x: clip;
    isolation: isolate;
}
.visitor-site * { min-width: 0; }
.visitor-site img { max-width: 100%; }
.visitor-site a, .visitor-site button, .visitor-site input, .visitor-site textarea, .visitor-site select { -webkit-tap-highlight-color: transparent; }
.visitor-site button { font-family: inherit; }
.visitor-site .max-w-7xl {
    width: min(100% - 48px, 1480px);
    max-width: none !important;
}
.visitor-site .max-w-6xl { max-width: 1240px !important; }
.visitor-site .max-w-3xl { max-width: 900px !important; }

/* Navigation: precise height, quieter glass, better spacing */
.visitor-site nav:not(.admin-sidebar nav):not(.admin-sidebar-mobile nav) {
    min-height: 76px;
    background: rgba(255, 252, 247, .94) !important;
    border-bottom: 1px solid rgba(81, 54, 34, .10) !important;
    box-shadow: 0 5px 28px rgba(41, 26, 15, .055) !important;
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
}
.visitor-site nav:not(.admin-sidebar nav):not(.admin-sidebar-mobile nav) > div { width: min(100% - 48px, 1480px); max-width: none !important; margin-inline: auto; }
.visitor-site nav:not(.admin-sidebar nav):not(.admin-sidebar-mobile nav) > div > div { min-height: 76px; height: 76px; }
.visitor-site nav a[href="#home"] { gap: 11px; padding: 5px 0; }
.visitor-site nav a[href="#home"] img:first-child { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 4px 12px rgba(63, 40, 24, .10); }
.visitor-site nav a[href="#home"] img:last-child { max-width: 118px; object-fit: contain; }
.visitor-site nav a:not([href="#home"]),
.visitor-site nav button:not([aria-label]) { border-radius: 11px; }
.visitor-site nav .lg\:flex { gap: 3px !important; }
.visitor-site nav .lg\:flex a,
.visitor-site nav .lg\:flex button { padding: 9px 10px !important; font-size: .84rem !important; font-weight: 700 !important; color: #594331 !important; }
.visitor-site nav .lg\:flex a:hover,
.visitor-site nav .lg\:flex button:hover { background: #f3e9dc !important; color: #6a3e20 !important; }
.visitor-site nav button[title="عرض المتجر"] { background: #6b4423 !important; color: white !important; }
.visitor-site nav button[title="عرض المتجر"] svg { color: white !important; }
.visitor-site nav button:has(svg.lucide-shopping-cart),
.visitor-site nav button:has(svg[data-lucide="shopping-cart"]) { border: 1px solid rgba(87, 54, 31, .10); }
.visitor-site .mobile-menu { box-shadow: -24px 0 64px rgba(23, 14, 8, .22); }
.visitor-site .mobile-menu > div { padding: 22px !important; }

/* Hero: remove the unused upper void; content now starts just under the nav */
.visitor-site .visitor-hero {
    display: block !important;
    position: relative;
    min-height: 0 !important;
    padding: 0 !important;
    background: #21150f !important;
    overflow: hidden;
    isolation: isolate;
}
.visitor-site .visitor-hero-inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    width: min(100% - 48px, 1480px) !important;
    max-width: none !important;
    min-height: clamp(690px, 88svh, 830px);
    box-sizing: border-box;
    margin-inline: auto !important;
    padding: clamp(108px, 12.5vh, 126px) 0 62px !important;
}
.visitor-site .visitor-hero-copy {
    position: relative;
    z-index: 4;
    width: min(58%, 720px);
    max-width: 720px !important;
    margin: 0 0 0 auto;
    text-align: right;
}
.visitor-site .visitor-hero-accent { margin-bottom: 17px; height: 8px; }
.visitor-site .visitor-hero-title {
    max-width: 720px;
    margin-bottom: 17px !important;
    font-size: clamp(2.65rem, 4.2vw, 4.35rem) !important;
    line-height: 1.24 !important;
    letter-spacing: -.045em;
    text-shadow: 0 6px 28px rgba(0,0,0,.24);
}
.visitor-site .visitor-hero-subtitle {
    max-width: 600px;
    margin-bottom: 26px !important;
    color: rgba(255, 247, 236, .82) !important;
    font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
    line-height: 1.95 !important;
}
.visitor-site .visitor-hero-media { z-index: -3; }
.visitor-site .visitor-hero-image { object-position: center 54%; filter: saturate(.76) contrast(1.08) brightness(.83); }
.visitor-site .visitor-hero-overlay {
    background:
        linear-gradient(90deg, rgba(16,10,6,.25) 0%, rgba(19,12,8,.30) 27%, rgba(26,16,10,.73) 56%, rgba(25,15,9,.95) 100%),
        linear-gradient(0deg, rgba(21,13,8,.86), transparent 37%, rgba(18,11,7,.30));
}
.visitor-site .visitor-hero-glow { opacity: .58; filter: blur(8px); }
.visitor-site .visitor-hero-motion-art {
    left: clamp(20px, 6vw, 100px);
    top: 49%;
    width: clamp(300px, 34vw, 490px);
    opacity: .93;
}
.visitor-site .visitor-art-orbit-outer { border-color: rgba(238,199,151,.32); border-left-color: rgba(238,199,151,.08); }
.visitor-site .visitor-art-orbit-inner { border-color: rgba(235,190,137,.25); }
.visitor-site .visitor-art-bean { width: 103px; height: 163px; box-shadow: inset 7px 4px 24px rgba(255,233,200,.08), 0 0 70px rgba(219,165,105,.15); }
.visitor-site .visitor-hero-bean { opacity: .55; }
.visitor-site .visitor-hero-actions { width: min(100%, 650px); gap: 13px !important; }
.visitor-site .visitor-btn {
    min-height: 61px;
    padding: 14px 20px;
    border-radius: 15px;
    font-size: .97rem;
    box-shadow: 0 9px 26px rgba(4,3,2,.17), inset 0 1px rgba(255,255,255,.2);
}
.visitor-site .visitor-btn-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; transition: transform .3s ease; }
.visitor-site .visitor-btn-primary { color: #2d1b0d !important; background: linear-gradient(132deg, #f0d1a4, #d7aa75 55%, #be854c); border-color: rgba(255,236,207,.7); }
.visitor-site .visitor-btn-primary .visitor-btn-icon { background: rgba(78,43,19,.09); }
.visitor-site .visitor-btn-secondary { background: rgba(255,248,237,.055); border-color: rgba(255,244,225,.25); }
.visitor-site .visitor-btn-secondary .visitor-btn-icon { background: rgba(255,246,232,.09); }
.visitor-site .visitor-btn:hover .visitor-btn-icon { transform: translateY(-1px) rotate(-4deg); }
.visitor-site .visitor-hero-services { width: min(100%, 650px); gap: 12px; margin-top: 13px; }
.visitor-site .visitor-service-btn {
    min-height: 76px;
    gap: 13px;
    padding: 13px 16px;
    border-radius: 16px;
    background: linear-gradient(125deg, rgba(255,249,238,.075), rgba(255,249,238,.025));
    border-color: rgba(255,241,222,.16);
    backdrop-filter: blur(14px);
    transition: transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.visitor-site .visitor-service-btn:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.15); }
.visitor-site .visitor-service-icon { width: 45px; height: 45px; flex-basis: 45px; border-radius: 13px; }
.visitor-site .visitor-service-copy strong { font-size: .95rem; }
.visitor-site .visitor-service-copy small { font-size: .74rem; }
.visitor-site .visitor-hero-stats { width: min(100%, 650px); margin-top: 25px; padding-top: 20px; gap: clamp(13px, 2vw, 28px); }
.visitor-site .visitor-stat-value { font-size: clamp(1.38rem, 2vw, 1.85rem); }
.visitor-site .visitor-stat-label { font-size: .76rem; }
.visitor-site .visitor-hero-scroll { bottom: 21px; width: 25px; height: 39px; }

/* Global content rhythm and headings */
.visitor-site .store-section { position: relative; scroll-margin-top: 94px; padding-block: clamp(58px, 6.1vw, 94px) !important; }
.visitor-site .products-section { background: linear-gradient(180deg, #fcf9f3 0%, #f8f2e8 100%) !important; }
.visitor-site .categories-section { background: #fffdf9 !important; }
.visitor-site .about-section { background: linear-gradient(180deg, #faf5eb 0%, #f7efe3 100%) !important; }
.visitor-site .reviews-section { background: linear-gradient(180deg, #fffdf9 0%, #f8f2e8 100%) !important; }
.visitor-site .contact-section { background: #fffdf9 !important; }
.visitor-site .section-heading { margin-bottom: clamp(28px, 3.6vw, 48px) !important; }
.visitor-site .section-heading h2 {
    color: #54351f !important;
    font-size: clamp(1.8rem, 2.8vw, 2.55rem) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    letter-spacing: -.035em;
}
.visitor-site .section-heading > div {
    width: 60px !important;
    height: 3px !important;
    margin-top: 13px !important;
    margin-bottom: 17px !important;
    background: linear-gradient(90deg, #e0bb8e, #9b673d) !important;
    border-radius: 999px !important;
    position: relative;
    overflow: hidden;
}
.visitor-site .section-heading > div::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); transform: translateX(-100%); animation: brHeadingShine 5.5s ease-in-out infinite; }
.visitor-site .section-heading p { color: #806b58 !important; font-size: clamp(.95rem, 1.1vw, 1.05rem) !important; line-height: 1.9 !important; }

/* Product cards: wider grid, generous internals, no cramped price row */
.visitor-site .store-product-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(22px, 2vw, 32px) !important;
    align-items: stretch;
}
.visitor-site .store-product-grid > div { min-width: 0; height: 100%; }
.visitor-site .store-product-grid > .product-card { height: 100%; }
.visitor-site .product-card {
    position: relative;
    display: flex !important;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    border: 1px solid rgba(78,50,30,.10) !important;
    border-radius: 24px !important;
    background: #fffdfa !important;
    box-shadow: 0 6px 24px rgba(56,36,18,.045) !important;
    overflow: hidden;
    transition: transform .38s cubic-bezier(.2,.75,.25,1), box-shadow .38s ease, border-color .3s ease !important;
}
.visitor-site .product-card:hover {
    transform: translateY(-7px);
    border-color: rgba(187,133,78,.38) !important;
    box-shadow: 0 24px 50px rgba(56,36,18,.13) !important;
}
.visitor-site .product-card > div:first-child { flex: 0 0 auto; background: #f1e7d9; }
.visitor-site .product-card > div:first-child:has(.product-image) { aspect-ratio: 1.28 / 1; }
.visitor-site .product-card .product-image {
    display: block;
    width: 100%;
    height: 100% !important;
    min-height: 220px;
    max-height: 330px;
    aspect-ratio: 1.28 / 1;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.75,.25,1), filter .35s ease;
}
.visitor-site .product-card:hover .product-image { transform: scale(1.045); filter: saturate(1.06); }
.visitor-site .product-card .p-5 { padding: clamp(18px, 1.7vw, 25px) !important; }
.visitor-site .product-card h3 { color: #342317 !important; font-size: clamp(1rem, 1.15vw, 1.15rem) !important; line-height: 1.55 !important; letter-spacing: -.015em; }
.visitor-site .product-card p { color: #85715e !important; font-size: .87rem !important; line-height: 1.85 !important; }
.visitor-site .product-card > div:last-child { display: flex; flex: 1 1 auto; flex-direction: column; }
.visitor-site .product-card > div:last-child > div.flex.items-center.justify-between { margin-top: auto !important; padding-top: 17px; gap: 12px; flex-wrap: wrap; align-items: center; }
.visitor-site .product-card > div:last-child > div.flex.items-center.justify-between > div { flex-wrap: wrap; row-gap: 5px; }
.visitor-site .product-card .text-xl { font-size: clamp(1.12rem, 1.3vw, 1.38rem) !important; font-weight: 900 !important; }
.visitor-site .product-card button { flex: 0 0 auto; border-radius: 11px !important; padding: 11px 13px !important; font-size: .82rem !important; box-shadow: none !important; transition: transform .22s ease, background .22s ease, box-shadow .22s ease; }
.visitor-site .product-card button:hover { transform: translateY(-2px); box-shadow: 0 7px 17px rgba(56,36,18,.15) !important; }
.visitor-site .product-card [class*="absolute top-3 right-3"] { top: 15px; right: 15px; }
.visitor-site .product-card .rounded-xl { border-radius: 11px !important; }
.visitor-site .product-card .line-clamp-1 { line-height: 1.55; }
.visitor-site .product-card .line-clamp-2 { min-height: 3.25em; }
.visitor-site .product-card:focus-within { outline: 3px solid rgba(197,143,84,.42); outline-offset: 3px; }
.visitor-site .products-section .max-w-7xl { width: min(100% - 48px, 1480px); }
.visitor-site .products-section .mt-12 button { width: auto !important; min-width: min(100%, 330px); padding: 16px 29px !important; border-radius: 14px !important; background: linear-gradient(135deg,#573820,#7f522f) !important; box-shadow: 0 12px 28px rgba(67,42,23,.15) !important; transition: transform .25s ease, box-shadow .25s ease !important; }
.visitor-site .products-section .mt-12 button:hover { transform: translateY(-3px); box-shadow: 0 17px 34px rgba(67,42,23,.22) !important; }

/* Category tiles */
.visitor-site .store-category-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 20px !important; }
.visitor-site .store-category-grid .category-pill {
    min-height: 205px;
    padding: 25px 19px !important;
    border: 1px solid rgba(88,59,37,.10) !important;
    border-radius: 21px !important;
    background: linear-gradient(145deg, #fffdfa, #f8f0e5) !important;
    box-shadow: 0 7px 24px rgba(56,36,18,.035) !important;
    transition: transform .32s cubic-bezier(.2,.75,.25,1), border-color .3s ease, box-shadow .3s ease, background .3s ease !important;
}
.visitor-site .store-category-grid .category-pill:hover { background: linear-gradient(145deg, #fffaf1, #f4e5d1) !important; border-color: rgba(187,133,78,.40) !important; box-shadow: 0 18px 36px rgba(56,36,18,.10) !important; transform: translateY(-5px); }
.visitor-site .store-category-grid .category-pill > div > div:first-child { width: 62px !important; height: 62px !important; margin-bottom: 16px !important; border: 1px solid rgba(151,102,60,.12); background: #f2e3d1 !important; border-radius: 18px !important; }
.visitor-site .store-category-grid .category-pill > div > div:first-child svg { color: #81552f !important; }
.visitor-site .store-category-grid .category-pill h3 { color: #44301f !important; font-size: 1rem; font-weight: 800; }
.visitor-site .store-category-grid .category-pill p { color: #8d7762 !important; font-size: .82rem !important; }
.visitor-site .store-category-grid .category-pill:hover h3 { color: #44301f !important; }
.visitor-site .store-category-grid .category-pill:hover p { color: #8d7762 !important; }

/* Editorial story / value proposition / review and contact blocks */
.visitor-site .about-section .founder-image-circular { width: clamp(200px, 22vw, 290px) !important; height: auto !important; aspect-ratio: 1; border: 6px solid #fffaf2; box-shadow: 0 16px 44px rgba(56,36,18,.13); }
.visitor-site .about-section .relative.bg-white.rounded-2xl { border: 1px solid rgba(91,60,35,.10); border-radius: 26px !important; box-shadow: 0 18px 46px rgba(56,36,18,.08) !important; padding: 23px !important; }
.visitor-site .about-section .bg-espresso-50 { background: rgba(255,253,249,.82) !important; border: 1px solid rgba(91,60,35,.09); border-radius: 16px !important; }
.visitor-site .why-us-section { background: radial-gradient(ellipse at 8% 18%, rgba(187,128,72,.16), transparent 38%), linear-gradient(135deg,#21150f,#322015 58%,#21150f) !important; }
.visitor-site .why-us-section .review-card { min-height: 205px; border-radius: 20px !important; border-color: rgba(244,221,190,.11) !important; background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)) !important; transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease !important; }
.visitor-site .why-us-section .review-card:hover { transform: translateY(-5px); background: linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045)) !important; border-color: rgba(229,189,138,.30) !important; box-shadow: 0 19px 38px rgba(0,0,0,.15) !important; }
.visitor-site .why-us-section .review-card > div:first-child { display: flex; align-items: center; justify-content: center; border-radius: 15px !important; }
.visitor-site .reviews-section .review-card { border: 1px solid rgba(78,50,30,.09) !important; border-radius: 20px !important; background: #fffdfa !important; box-shadow: 0 6px 22px rgba(56,36,18,.035) !important; transition: transform .28s ease, box-shadow .28s ease !important; }
.visitor-site .reviews-section .review-card:hover { transform: translateY(-4px); box-shadow: 0 17px 34px rgba(56,36,18,.09) !important; }
.visitor-site .contact-section .bg-cream-50.rounded-2xl { background: linear-gradient(145deg,#fffdf9,#f8f0e6) !important; border-color: rgba(78,50,30,.10) !important; border-radius: 24px !important; box-shadow: 0 18px 44px rgba(56,36,18,.07) !important; }
.visitor-site .contact-section input,
.visitor-site .contact-section textarea,
.visitor-site .contact-section select { border-radius: 13px !important; border-color: #e4d5c3 !important; background: rgba(255,255,255,.88) !important; padding-top: 13px; padding-bottom: 13px; }
.visitor-site .contact-section input:focus,
.visitor-site .contact-section textarea:focus,
.visitor-site .contact-section select:focus { border-color: #b88655 !important; box-shadow: 0 0 0 4px rgba(184,134,85,.12) !important; }
.visitor-site footer.footer-section { background: linear-gradient(135deg,#20140e,#302015) !important; border-top: 1px solid rgba(223,178,124,.20); }
.visitor-site footer.footer-section a,
.visitor-site footer.footer-section button { transition: color .2s ease, transform .2s ease; }
.visitor-site footer.footer-section a:hover,
.visitor-site footer.footer-section button:hover { transform: translateX(-2px); }

/* Shop page and filters */
.visitor-site .return-page { background: linear-gradient(180deg,#fbf7f0,#f6eee2) !important; }
.visitor-site .return-page > div > .text-center { margin-bottom: 34px !important; }
.visitor-site .return-page > div > .text-center h1 { color: #49301e !important; font-size: clamp(1.9rem,3vw,2.8rem) !important; font-weight: 900 !important; letter-spacing: -.035em; }
.visitor-site .return-page input[type="text"] { min-height: 50px; border-radius: 14px !important; border-color: #e4d4c1 !important; }
.visitor-site .return-page .view-mode,
.visitor-site .return-page .bg-white.rounded-xl { border-radius: 15px; }
.visitor-site .return-page .store-product-grid { margin-top: 10px; }

/* Entrance and motion language: restrained, smooth, and performant */
@keyframes brHeadingShine { 0%, 68%, 100% { transform: translateX(-110%); } 82% { transform: translateX(110%); } }
@keyframes brFloatIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes brHeroGlow { 0%,100% { opacity: .45; } 50% { opacity: .76; } }
.visitor-site .visitor-hero-glow-one { animation: brHeroGlow 8s ease-in-out infinite; }
.visitor-site .visitor-service-btn:nth-child(1) { animation: brFloatIn .65s .15s both; }
.visitor-site .visitor-service-btn:nth-child(2) { animation: brFloatIn .65s .28s both; }
.visitor-site .product-card { transform-origin: center bottom; }
.visitor-site .product-card .product-image { will-change: transform; }
.visitor-site .visitor-btn:focus-visible,
.visitor-site .visitor-service-btn:focus-visible,
.visitor-site .category-pill:focus-visible { outline: 3px solid rgba(215,170,117,.80) !important; outline-offset: 4px; }

@media (min-width: 1600px) {
    .visitor-site .store-product-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
    .visitor-site .visitor-hero-inner { min-height: clamp(760px, 86svh, 890px); }
    .visitor-site .visitor-hero-copy { width: min(57%, 760px); }
}
@media (max-width: 1180px) {
    .visitor-site nav .lg\:flex a,
    .visitor-site nav .lg\:flex button { padding-inline: 7px !important; font-size: .77rem !important; }
    .visitor-site .visitor-hero-copy { width: min(62%, 660px); }
    .visitor-site .visitor-hero-motion-art { left: 1%; width: clamp(260px, 30vw, 350px); opacity: .72; }
    .visitor-site .store-category-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width: 1023px) {
    .visitor-site .visitor-hero-inner { width: min(100% - 44px, 900px) !important; min-height: 700px; padding-top: 112px !important; padding-bottom: 60px !important; }
    .visitor-site .visitor-hero-copy { width: min(70%, 650px); }
    .visitor-site .visitor-hero-motion-art { left: -50px; width: 300px; opacity: .42; }
    .visitor-site .visitor-hero-overlay { background: linear-gradient(90deg,rgba(17,11,7,.45),rgba(22,14,9,.78) 48%,rgba(22,14,9,.92)),linear-gradient(0deg,rgba(22,14,9,.78),transparent 50%); }
    .visitor-site .store-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .visitor-site .why-us-section .grid { gap: 16px !important; }
}
@media (max-width: 768px) {
    .visitor-site .max-w-7xl { width: min(100% - 32px, 720px) !important; }
    .visitor-site nav:not(.admin-sidebar nav):not(.admin-sidebar-mobile nav) { min-height: 66px; }
    .visitor-site nav:not(.admin-sidebar nav):not(.admin-sidebar-mobile nav) > div { width: calc(100% - 28px); }
    .visitor-site nav:not(.admin-sidebar nav):not(.admin-sidebar-mobile nav) > div > div { height: 66px; min-height: 66px; }
    .visitor-site nav a[href="#home"] img:first-child { width: 35px; height: 35px; }
    .visitor-site nav a[href="#home"] img:last-child { max-width: 103px; }
    .visitor-site .visitor-hero { min-height: 0 !important; }
    .visitor-site .visitor-hero-inner { width: calc(100% - 36px) !important; min-height: 0 !important; padding: 94px 0 62px !important; }
    .visitor-site .visitor-hero-copy { width: min(100%, 620px); max-width: 620px !important; margin-inline: auto; }
    .visitor-site .visitor-hero-title { font-size: clamp(2.1rem, 7.2vw, 3.05rem) !important; line-height: 1.32 !important; margin-bottom: 15px !important; }
    .visitor-site .visitor-hero-subtitle { max-width: 540px; font-size: .98rem !important; line-height: 1.9 !important; margin-bottom: 22px !important; }
    .visitor-site .visitor-hero-motion-art { display: none; }
    .visitor-site .visitor-hero-overlay { background: linear-gradient(90deg,rgba(20,12,8,.76),rgba(22,14,9,.83)),linear-gradient(0deg,rgba(22,14,9,.76),transparent 65%); }
    .visitor-site .visitor-hero-actions { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 10px !important; }
    .visitor-site .visitor-btn { min-height: 56px; padding: 11px 12px; gap: 8px; font-size: .88rem; border-radius: 13px; }
    .visitor-site .visitor-btn-icon { width: 31px; height: 31px; flex-basis: 31px; }
    .visitor-site .visitor-btn-icon svg { width: 18px; height: 18px; }
    .visitor-site .visitor-btn-arrow { width: 15px; height: 15px; }
    .visitor-site .visitor-hero-services { width: 100%; gap: 10px; margin-top: 10px; }
    .visitor-site .visitor-service-btn { min-height: 66px; padding: 10px; gap: 8px; border-radius: 13px; }
    .visitor-site .visitor-service-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
    .visitor-site .visitor-service-copy strong { font-size: .79rem; }
    .visitor-site .visitor-service-copy small { font-size: .66rem; }
    .visitor-site .visitor-service-arrow { display: none; }
    .visitor-site .visitor-hero-stats { gap: 10px; margin-top: 24px; padding-top: 18px; }
    .visitor-site .visitor-stat-value { font-size: clamp(1.15rem,4vw,1.5rem); }
    .visitor-site .visitor-stat-label { font-size: .65rem; line-height: 1.5; }
    .visitor-site .visitor-stat-divider { height: 27px; }
    .visitor-site .visitor-hero-scroll { display: none; }
    .visitor-site .store-section { padding-block: 55px !important; }
    .visitor-site .section-heading { margin-bottom: 27px !important; }
    .visitor-site .section-heading p { font-size: .9rem !important; }
    .visitor-site .store-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; }
    .visitor-site .store-category-grid .category-pill { min-height: 170px; padding: 19px 11px !important; border-radius: 17px !important; }
    .visitor-site .store-category-grid .category-pill > div > div:first-child { width: 51px !important; height: 51px !important; margin-bottom: 12px !important; }
    .visitor-site .product-card { border-radius: 18px !important; }
    .visitor-site .product-card .product-image { min-height: 180px; }
    .visitor-site .product-card .p-5 { padding: 15px !important; }
    .visitor-site .product-card > div:last-child > div.flex.items-center.justify-between { gap: 9px; }
    .visitor-site .product-card button { padding: 9px 10px !important; font-size: .76rem !important; }
    .visitor-site .product-card p { font-size: .8rem !important; }
    .visitor-site .about-section .flex.flex-col.md\:flex-row { gap: 28px !important; }
}
@media (max-width: 560px) {
    .visitor-site .store-product-grid { grid-template-columns: minmax(0,1fr) !important; gap: 18px !important; }
    .visitor-site .store-product-grid > div { width: 100%; }
    .visitor-site .product-card .product-image { height: auto !important; min-height: 0; max-height: none; aspect-ratio: 1.32 / 1; }
    .visitor-site .product-card > div:first-child:has(.product-image) { aspect-ratio: 1.32 / 1; }
    .visitor-site .product-card h3 { font-size: 1.08rem !important; }
    .visitor-site .product-card p { font-size: .84rem !important; }
    .visitor-site .product-card .p-5 { padding: 18px !important; }
    .visitor-site .visitor-hero-inner { padding-top: 90px !important; padding-bottom: 48px !important; }
    .visitor-site .visitor-hero-title { font-size: clamp(1.9rem,8.5vw,2.45rem) !important; }
    .visitor-site .visitor-hero-actions { grid-template-columns: 1fr; }
    .visitor-site .visitor-btn { justify-content: flex-start; }
    .visitor-site .visitor-btn-arrow { margin-inline-start: auto; }
    .visitor-site .visitor-hero-services { grid-template-columns: 1fr; }
    .visitor-site .visitor-service-arrow { display: block; }
    .visitor-site .visitor-stat-label { font-size: .6rem; }
    .visitor-site .products-section .mt-12 button { width: 100% !important; min-width: 0; font-size: .95rem !important; }
    .visitor-site .contact-section .grid { gap: 22px !important; }
    .visitor-site footer.footer-section .grid { row-gap: 28px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .visitor-site .visitor-hero-image,
    .visitor-site .visitor-art-halo,
    .visitor-site .visitor-art-orbit,
    .visitor-site .visitor-art-bean,
    .visitor-site .visitor-art-particle,
    .visitor-site .visitor-hero-glow,
    .visitor-site .section-heading > div::after,
    .visitor-site .visitor-service-btn,
    .visitor-site .animate-fade-in-up { animation: none !important; }
    .visitor-site *, .visitor-site *::before, .visitor-site *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* All-products page: compact category chips and an intentional filter surface.
   Homepage category tiles keep their tall editorial treatment; filters stay compact. */
.visitor-site .return-page {
    background:
        radial-gradient(ellipse at 92% 5%, rgba(211, 168, 117, .13), transparent 34%),
        linear-gradient(180deg, #fcf8f2 0%, #f7f0e6 100%) !important;
}
.visitor-site .return-page > div.max-w-7xl {
    width: min(calc(100% - 48px), 1380px) !important;
    max-width: 1380px !important;
}
.visitor-site .return-page > div > button:first-child {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 7px 12px;
    border-radius: 11px;
    color: #795b43 !important;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.visitor-site .return-page > div > button:first-child:hover {
    background: rgba(255,255,255,.75);
    transform: translateX(2px);
}
.visitor-site .return-page > div > .text-center {
    margin-bottom: clamp(28px, 3.2vw, 42px) !important;
}
.visitor-site .return-page > div > .text-center h1 {
    font-size: clamp(2rem, 3vw, 2.8rem) !important;
    letter-spacing: -.045em;
    line-height: 1.25 !important;
    text-shadow: 0 2px 0 rgba(255,255,255,.7);
}
.visitor-site .return-page > div > .text-center p {
    color: #816c59 !important;
    font-size: clamp(.95rem, 1.2vw, 1.08rem);
}
.visitor-site .return-page .shop-toolbar {
    align-items: stretch;
    gap: 14px !important;
    margin-bottom: 22px !important;
}
.visitor-site .return-page .shop-toolbar > .relative {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
}
.visitor-site .return-page .shop-toolbar input[type="text"] {
    min-height: 58px !important;
    border: 1px solid #e6d6c3 !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 5px 20px rgba(67,42,23,.035);
    padding-inline: 46px 18px !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.visitor-site .return-page .shop-toolbar input[type="text"]:focus {
    border-color: #bd9163 !important;
    box-shadow: 0 0 0 4px rgba(189,145,99,.13), 0 8px 23px rgba(67,42,23,.06) !important;
}
.visitor-site .return-page .shop-toolbar > div:has(> button) {
    align-self: center;
    min-height: 58px;
    align-items: center;
    border: 1px solid #e6d6c3 !important;
    border-radius: 16px !important;
    padding: 4px !important;
    box-shadow: 0 5px 20px rgba(67,42,23,.035);
}
.visitor-site .return-page .shop-toolbar > div:has(> button) button {
    min-height: 46px;
    border-radius: 12px !important;
    padding-inline: 17px !important;
}
.visitor-site .return-page .shop-toolbar > div:has(> button) button.bg-espresso-700 {
    background: linear-gradient(135deg, #714a2a, #51331d) !important;
    box-shadow: 0 4px 10px rgba(81,51,29,.17);
}
.visitor-site .return-page .shop-filter-panel {
    padding: clamp(16px, 2vw, 23px);
    border: 1px solid rgba(133,96,62,.13);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,251,245,.88));
    box-shadow: 0 12px 34px rgba(67,42,23,.045), inset 0 1px 0 rgba(255,255,255,.9);
    margin-bottom: 30px !important;
}
.visitor-site .return-page .shop-filter-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 15px;
}
.visitor-site .return-page .shop-filter-heading h2 {
    margin: 0;
    color: #503521;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.5;
}
.visitor-site .return-page .shop-filter-heading p {
    margin: 3px 0 0;
    color: #947b65;
    font-size: .82rem;
    line-height: 1.6;
}
.visitor-site .return-page .shop-filter-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 5px 10px;
    border: 1px solid #ead9c4;
    border-radius: 999px;
    color: #8e6948;
    background: #fffaf3;
    font-size: .72rem;
    font-weight: 750;
}
.visitor-site .return-page .shop-category-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px !important;
}
.visitor-site .return-page .shop-category-filters .category-pill {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 0 !important;
    min-height: 39px !important;
    height: auto !important;
    max-width: 100%;
    padding: 8px 15px !important;
    border: 1px solid #e5d5c2 !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.9) !important;
    color: #735a43 !important;
    box-shadow: 0 2px 6px rgba(67,42,23,.025) !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    white-space: normal;
    text-align: center;
    transform: none;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
.visitor-site .return-page .shop-category-filters .category-pill.bg-espresso-700 {
    background: linear-gradient(135deg, #714a2a, #51331d) !important;
    border-color: #684326 !important;
    color: #fffaf3 !important;
    box-shadow: 0 5px 12px rgba(81,51,29,.15) !important;
}
.visitor-site .return-page .shop-category-filters .category-pill:hover {
    border-color: #c89a68 !important;
    color: #51331d !important;
    background: #fff4e4 !important;
    box-shadow: 0 5px 13px rgba(67,42,23,.07) !important;
    transform: translateY(-1px) !important;
}
.visitor-site .return-page .shop-category-filters .category-pill.bg-espresso-700:hover {
    background: linear-gradient(135deg, #7d5431, #5b3920) !important;
    color: #fffaf3 !important;
}
.visitor-site .return-page .shop-subcategory-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px !important;
    margin: 15px 0 0 !important;
    padding-top: 15px;
    border-top: 1px solid rgba(133,96,62,.12);
}
.visitor-site .return-page .shop-subcategory-filters button {
    min-height: 32px;
    padding: 6px 11px !important;
    border: 1px solid #e8d9c8 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #8c735c !important;
    font-size: .77rem !important;
    line-height: 1.3;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.visitor-site .return-page .shop-subcategory-filters button.bg-caramel-500 {
    border-color: #b98550 !important;
    background: #b98550 !important;
    color: #fff !important;
}
.visitor-site .return-page .shop-subcategory-filters button:hover {
    border-color: #c89a68 !important;
    transform: translateY(-1px);
}
.visitor-site .return-page .all-products-grid {
    margin-top: 0 !important;
    gap: clamp(18px, 2vw, 28px) !important;
}
@media (max-width: 768px) {
    .visitor-site .return-page > div.max-w-7xl { width: calc(100% - 30px) !important; }
    .visitor-site .return-page > div > button:first-child { margin-bottom: 17px !important; }
    .visitor-site .return-page .shop-toolbar { gap: 11px !important; margin-bottom: 18px !important; }
    .visitor-site .return-page .shop-toolbar > .relative { width: 100% !important; }
    .visitor-site .return-page .shop-toolbar > div:has(> button) { align-self: stretch; justify-content: center; }
    .visitor-site .return-page .shop-filter-panel { padding: 15px; border-radius: 17px; }
    .visitor-site .return-page .shop-category-filters { gap: 7px !important; }
    .visitor-site .return-page .shop-category-filters .category-pill { min-height: 36px !important; padding: 7px 11px !important; font-size: .81rem !important; }
    .visitor-site .return-page .shop-filter-heading h2 { font-size: .94rem; }
    .visitor-site .return-page .shop-filter-heading p { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
    .visitor-site .return-page .shop-category-filters .category-pill,
    .visitor-site .return-page .shop-toolbar input[type="text"],
    .visitor-site .return-page .shop-subcategory-filters button { transition: none !important; }
}

/* ==========================================================
   ADMIN VISUAL REFRESH — matched to the Ben Rasmi storefront
   Visual-only overrides; no data, routing, or action changes.
   ========================================================== */
.admin-app-shell {
    --admin-espresso: #4a2f1d;
    --admin-coffee: #68452d;
    --admin-caramel: #c58f5b;
    --admin-gold: #e7c69a;
    --admin-cream: #fffaf3;
    --admin-line: #eadbc9;
    --admin-muted: #8b7765;
    min-height: 100vh;
    color: #493323;
    background:
        radial-gradient(ellipse at 8% 0%, rgba(225, 190, 147, .16), transparent 32rem),
        linear-gradient(180deg, #fffaf4 0%, #f8f1e8 100%) !important;
    font-family: 'Cairo', sans-serif;
}
.admin-app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .22;
    background-image: radial-gradient(rgba(115, 79, 48, .11) .65px, transparent .65px);
    background-size: 19px 19px;
    mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
.admin-app-shell > * { position: relative; }
.admin-app-shell .admin-sidebar,
.admin-app-shell .admin-sidebar-mobile {
    background: linear-gradient(180deg, #fffaf4 0%, #f5eadc 100%) !important;
    border-left: 1px solid rgba(121, 82, 48, .13);
    box-shadow: -12px 0 38px rgba(75, 48, 27, .045);
}
.admin-app-shell .admin-sidebar > div:first-child,
.admin-app-shell .admin-sidebar-mobile > div:first-child { padding-bottom: 1.1rem; }
.admin-app-shell .admin-sidebar img,
.admin-app-shell .admin-sidebar-mobile img {
    border-radius: 15px !important;
    box-shadow: 0 5px 14px rgba(80, 49, 25, .12);
}
.admin-app-shell .admin-sidebar h1,
.admin-app-shell .admin-sidebar-mobile h1 {
    color: var(--admin-espresso) !important;
    letter-spacing: -.025em;
}
.admin-app-shell .admin-sidebar nav,
.admin-app-shell .admin-sidebar-mobile nav { scrollbar-width: thin; scrollbar-color: #ddc4a7 transparent; }
.admin-app-shell .admin-sidebar nav button,
.admin-app-shell .admin-sidebar-mobile nav button {
    min-height: 46px;
    border: 1px solid transparent;
    border-radius: 14px !important;
    transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}
.admin-app-shell .admin-sidebar nav button:not(.text-white):hover,
.admin-app-shell .admin-sidebar-mobile nav button:not(.text-white):hover {
    background: rgba(255,255,255,.86) !important;
    border-color: #ead7c0;
    transform: translateX(-2px);
}
.admin-app-shell .admin-sidebar nav button.text-white,
.admin-app-shell .admin-sidebar-mobile nav button.text-white {
    background: linear-gradient(135deg, #69462c 0%, #482d1b 100%) !important;
    box-shadow: 0 8px 20px rgba(74, 47, 29, .19) !important;
}
.admin-app-shell .admin-sidebar nav button > div,
.admin-app-shell .admin-sidebar-mobile nav button > div {
    border-radius: 11px !important;
}
.admin-app-shell .admin-sidebar > div:last-child,
.admin-app-shell .admin-sidebar-mobile > div:last-child { border-color: #e7d6c3 !important; }
.admin-app-shell .lg\:mr-64 { position: relative; z-index: 1; }
.admin-app-shell .lg\:mr-64 > .p-4,
.admin-app-shell .lg\:mr-64 > .p-4.lg\:p-8 { padding: clamp(18px, 2.25vw, 36px) !important; }
.admin-app-shell .lg\:mr-64 .max-w-6xl { max-width: 1480px !important; }
.admin-app-shell .lg\:mr-64 h2 {
    color: #49301e !important;
    letter-spacing: -.035em;
}
.admin-app-shell .lg\:mr-64 > div > .max-w-6xl > .flex.items-center.justify-between.mb-6 {
    position: relative;
    gap: 16px;
    margin-bottom: 25px !important;
    padding: 21px 24px;
    border: 1px solid rgba(226, 205, 181, .85);
    border-radius: 22px;
    background: linear-gradient(115deg, rgba(255,255,255,.96), rgba(255,249,240,.91));
    box-shadow: 0 9px 26px rgba(80, 52, 30, .045);
    overflow: hidden;
}
.admin-app-shell .lg\:mr-64 > div > .max-w-6xl > .flex.items-center.justify-between.mb-6::after {
    content: "";
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #d9ad7c, #714a2b);
}
.admin-app-shell .realtime-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid #e7ddce;
    border-radius: 999px;
    background: #fffdf9;
    font-size: 11px;
}
.admin-app-shell .realtime-dot { box-shadow: 0 0 0 4px rgba(34,197,94,.10); }
.admin-app-shell .lg\:mr-64 .bg-white.rounded-2xl,
.admin-app-shell .lg\:mr-64 .bg-white.rounded-xl,
.admin-app-shell .lg\:mr-64 .report-card,
.admin-app-shell .lg\:mr-64 .order-card,
.admin-app-shell .lg\:mr-64 .product-card,
.admin-app-shell .lg\:mr-64 .bg-cream-50.rounded-2xl {
    border-color: #eadbc9 !important;
    box-shadow: 0 7px 22px rgba(83, 54, 31, .045);
}
.admin-app-shell .lg\:mr-64 .bg-white.rounded-2xl,
.admin-app-shell .lg\:mr-64 .bg-white.rounded-xl,
.admin-app-shell .lg\:mr-64 .report-card {
    border-radius: 19px !important;
    transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.admin-app-shell .lg\:mr-64 .report-card:hover,
.admin-app-shell .lg\:mr-64 .order-card:hover {
    border-color: #d8b58e !important;
    box-shadow: 0 13px 30px rgba(83, 54, 31, .085);
}
.admin-app-shell .lg\:mr-64 .report-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #fff 0%, #fff9f1 100%) !important;
}
.admin-app-shell .lg\:mr-64 .report-card::after {
    content: "";
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, #e7c69a, #9a6a40, #e7c69a);
    opacity: .8;
}
.admin-app-shell .lg\:mr-64 .shadow-sm.border.border-cream-200,
.admin-app-shell .lg\:mr-64 .shadow-sm.border.border-cream-200.bg-white {
    background-color: rgba(255,255,255,.92) !important;
}
.admin-app-shell .lg\:mr-64 input:not([type="checkbox"]):not([type="radio"]),
.admin-app-shell .lg\:mr-64 select,
.admin-app-shell .lg\:mr-64 textarea,
.admin-login input:not([type="checkbox"]):not([type="radio"]) {
    border-color: #e4d1bb !important;
    border-radius: 12px !important;
    background-color: #fffdf9;
    color: #493323;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.admin-app-shell .lg\:mr-64 input:focus,
.admin-app-shell .lg\:mr-64 select:focus,
.admin-app-shell .lg\:mr-64 textarea:focus,
.admin-login input:focus {
    border-color: #b98550 !important;
    box-shadow: 0 0 0 4px rgba(197, 143, 91, .13) !important;
    outline: none !important;
    background: #fff !important;
}
.admin-app-shell .lg\:mr-64 button:not(.admin-sidebar button),
.admin-login button {
    transition: transform .18s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.admin-app-shell .lg\:mr-64 button:hover:not(:disabled),
.admin-login button:hover:not(:disabled) { filter: saturate(1.03); }
.admin-app-shell .lg\:mr-64 button:active:not(:disabled),
.admin-login button:active:not(:disabled) { transform: translateY(1px); }
.admin-app-shell .lg\:mr-64 table { border-collapse: separate; border-spacing: 0; }
.admin-app-shell .lg\:mr-64 table thead { background: #f8efe4 !important; }
.admin-app-shell .lg\:mr-64 table thead th {
    padding-top: 14px;
    padding-bottom: 14px;
    color: #6e4a2d !important;
    font-size: .78rem;
    font-weight: 800;
    border-bottom: 1px solid #e7d6c3 !important;
    white-space: nowrap;
}
.admin-app-shell .lg\:mr-64 table tbody tr { transition: background .16s ease; }
.admin-app-shell .lg\:mr-64 table tbody tr:hover { background: #fff9f1; }
.admin-app-shell .lg\:mr-64 table tbody td {
    padding-top: 13px;
    padding-bottom: 13px;
    border-color: #f0e6da !important;
    vertical-align: middle;
}
.admin-app-shell .lg\:mr-64 .overflow-x-auto,
.admin-app-shell .lg\:mr-64 .overflow-hidden:has(> table) { border-radius: 17px; }
.admin-app-shell .lg\:mr-64 .bg-cream-50.border-b,
.admin-app-shell .lg\:mr-64 thead.bg-cream-50 { background: #f8efe4 !important; }
.admin-app-shell .lg\:mr-64 .text-coffee-900 { color: #493323 !important; }
.admin-app-shell .lg\:mr-64 .text-coffee-800 { color: #5c3b24 !important; }
.admin-app-shell .lg\:mr-64 .text-coffee-700 { color: #6b4a31 !important; }
.admin-app-shell .lg\:mr-64 .text-coffee-500,
.admin-app-shell .lg\:mr-64 .text-coffee-400 { color: #927b66 !important; }
.admin-app-shell .lg\:mr-64 .border-cream-200 { border-color: #eadbc9 !important; }
.admin-app-shell .lg\:mr-64 .border-cream-300 { border-color: #e4d1bb !important; }
.admin-app-shell .lg\:mr-64 .bg-espresso-700,
.admin-app-shell .lg\:mr-64 .bg-espresso-800,
.admin-login button[type="submit"] {
    background: linear-gradient(135deg, #68452d 0%, #482d1b 100%) !important;
    box-shadow: 0 5px 13px rgba(72, 45, 27, .14);
}
.admin-app-shell .lg\:mr-64 .bg-espresso-700:hover,
.admin-app-shell .lg\:mr-64 .bg-espresso-800:hover,
.admin-login button[type="submit"]:hover { box-shadow: 0 8px 18px rgba(72,45,27,.22); }
.admin-app-shell .lg\:mr-64 .bg-cream-50 { background-color: #fff9f1; }
.admin-app-shell .lg\:mr-64 .bg-espresso-50 { background-color: #f8efe4; }
.admin-app-shell .lg\:mr-64 .animate-fade-in { animation: adminContentEnter .38s cubic-bezier(.2,.7,.2,1) both; }
.admin-app-shell .lg\:mr-64 .animate-fade-in-up { animation: adminContentRise .42s cubic-bezier(.2,.7,.2,1) both; }
.admin-app-shell .lg\:mr-64 .lg\:grid-cols-4 > *,
.admin-app-shell .lg\:mr-64 .md\:grid-cols-2 > * { min-width: 0; }
.admin-login {
    background: radial-gradient(ellipse at 50% 10%, rgba(224,190,150,.25), transparent 32rem), linear-gradient(145deg,#fffaf4,#f3e7d8) !important;
}
.admin-login > div > div:first-child { animation: adminContentRise .5s ease both; }
.admin-login > div > div:last-child {
    border-color: #e8d5bf !important;
    border-radius: 25px !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 24px 65px rgba(75,48,27,.11) !important;
    backdrop-filter: blur(14px);
}
.admin-login h1 { color: #49301e !important; letter-spacing: -.035em; }
.admin-login .text-coffee-500 { color: #8a725c !important; }
.admin-app-shell .lg\:hidden.fixed.top-0 {
    background: rgba(255,250,244,.94) !important;
    border-color: #eadbc9 !important;
    box-shadow: 0 5px 18px rgba(75,48,27,.055);
    backdrop-filter: blur(14px);
}
@keyframes adminContentEnter { from { opacity: 0; } to { opacity: 1; } }
@keyframes adminContentRise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1023px) {
    .admin-app-shell .lg\:mr-64 { margin-right: 0 !important; }
    .admin-app-shell .lg\:mr-64 > .p-4,
    .admin-app-shell .lg\:mr-64 > .p-4.lg\:p-8 { padding: 18px 14px !important; }
    .admin-app-shell .lg\:mr-64 > div > .max-w-6xl > .flex.items-center.justify-between.mb-6 {
        padding: 17px 16px;
        border-radius: 17px;
        margin-top: 2px;
    }
    .admin-app-shell .lg\:mr-64 .overflow-x-auto { max-width: 100%; }
}
@media (max-width: 640px) {
    .admin-app-shell .lg\:mr-64 h2 { font-size: 1.05rem; }
    .admin-app-shell .realtime-indicator { padding: 5px 8px; }
    .admin-app-shell .lg\:mr-64 .report-card { padding: 17px !important; }
    .admin-app-shell .lg\:mr-64 table { min-width: 640px; }
    .admin-login > div { max-width: 430px; }
    .admin-login > div > div:last-child { padding: 22px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .admin-app-shell *, .admin-login * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* Accessible coffee-bean theme switch shared by storefront and admin */
.coffee-theme-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 8px;
    border: 1px solid #e8d5bf;
    border-radius: 14px;
    background: linear-gradient(145deg, #fffdf9, #f7ead8);
    color: #68452d;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(67, 42, 23, .07);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.coffee-theme-toggle:hover {
    transform: translateY(-2px) rotate(-3deg);
    border-color: #c99b6b;
    box-shadow: 0 7px 17px rgba(67, 42, 23, .13);
}
.coffee-theme-toggle:active { transform: scale(.95); }
.coffee-theme-toggle:focus-visible { outline: 3px solid #d4a574; outline-offset: 3px; }
.coffee-theme-bean { width: 25px; height: 25px; display: block; }
.coffee-theme-bean .bean-surface { transition: fill .25s ease; }
.coffee-theme-bean.bean-icon-dark .bean-surface { fill: #68452d; }
.coffee-theme-bean.bean-icon-dark .bean-seam { stroke: #f7e8d6; }
.coffee-theme-bean.bean-icon-light { display: none; }
html[data-theme="dark"] .coffee-theme-toggle {
    background: linear-gradient(145deg, #34271d, #241b14);
    border-color: #59412e;
    color: #f4dfc5;
    box-shadow: 0 3px 12px rgba(0,0,0,.2);
}
html[data-theme="dark"] .coffee-theme-bean.bean-icon-dark { display: none; }
html[data-theme="dark"] .coffee-theme-bean.bean-icon-light { display: block; }
html[data-theme="dark"] .coffee-theme-bean.bean-icon-light .bean-surface { fill: #f4dfc5; }
html[data-theme="dark"] .coffee-theme-bean.bean-icon-light .bean-seam { stroke: #68452d; }

/* Fix the pale sidebar labels caused by a legacy important text-color rule. */
.admin-app-shell .admin-sidebar nav button:not(.text-white),
.admin-app-shell .admin-sidebar-mobile nav button:not(.text-white) {
    color: #60432d !important;
}
.admin-app-shell .admin-sidebar nav button:not(.text-white) span,
.admin-app-shell .admin-sidebar-mobile nav button:not(.text-white) span { color: inherit !important; }
.admin-app-shell .admin-sidebar nav button.text-white,
.admin-app-shell .admin-sidebar-mobile nav button.text-white { color: #fffdf9 !important; }
.admin-app-shell .admin-sidebar nav button:not(.text-white):hover,
.admin-app-shell .admin-sidebar-mobile nav button:not(.text-white):hover {
    color: #432a19 !important;
    background: #fffaf3 !important;
    border-color: #dfc6a9 !important;
}

/* The realtime indicator used to be an empty inline span with no dimensions. */
.admin-app-shell .realtime-indicator {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    color: #215b36;
    border: 1px solid #b7dfc2;
    border-radius: 999px;
    background: #f0fbf3;
    box-shadow: 0 2px 7px rgba(34, 120, 65, .06);
    white-space: nowrap;
}
.admin-app-shell .realtime-dot {
    display: inline-block;
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 0 11px rgba(34,197,94,.3);
}
.admin-app-shell .realtime-text { font-weight: 800; font-size: 11px; }

/* Full dark theme: storefront and administration, without changing app logic. */
html[data-theme="dark"] { color-scheme: dark; background: #17120e; }
html[data-theme="dark"] body {
    background: #17120e !important;
    color: #f0e4d6 !important;
}
html[data-theme="dark"] .visitor-site,
html[data-theme="dark"] .admin-app-shell,
html[data-theme="dark"] .min-h-screen.bg-cream-50 {
    background: #17120e !important;
    color: #f0e4d6 !important;
}
html[data-theme="dark"] .visitor-site nav:not(.admin-sidebar nav):not(.admin-sidebar-mobile nav),
html[data-theme="dark"] .visitor-site nav.glass,
html[data-theme="dark"] .visitor-site nav.bg-white\/90 {
    background: rgba(35, 27, 20, .96) !important;
    border-color: #443426 !important;
    box-shadow: 0 8px 26px rgba(0,0,0,.23) !important;
}
html[data-theme="dark"] .visitor-site nav a,
html[data-theme="dark"] .visitor-site nav button,
html[data-theme="dark"] .visitor-site nav .text-coffee-800,
html[data-theme="dark"] .visitor-site nav .text-coffee-700 { color: #f0e2d2 !important; }
html[data-theme="dark"] .visitor-site .mobile-menu,
html[data-theme="dark"] .visitor-site .cart-panel,
html[data-theme="dark"] .visitor-site .bg-white,
html[data-theme="dark"] .visitor-site .bg-cream-50,
html[data-theme="dark"] .visitor-site .bg-cream-100,
html[data-theme="dark"] .visitor-site .bg-cream-50\/90 {
    background-color: #261d16 !important;
    color: #f0e4d6 !important;
    border-color: #483728 !important;
}
html[data-theme="dark"] .visitor-site .bg-cream-200,
html[data-theme="dark"] .visitor-site .bg-espresso-50,
html[data-theme="dark"] .visitor-site .bg-caramel-50 {
    background-color: #33261b !important;
    color: #f0e4d6 !important;
}
html[data-theme="dark"] .visitor-site .text-coffee-950,
html[data-theme="dark"] .visitor-site .text-coffee-900,
html[data-theme="dark"] .visitor-site .text-coffee-800,
html[data-theme="dark"] .visitor-site .text-coffee-700,
html[data-theme="dark"] .visitor-site .text-coffee-600,
html[data-theme="dark"] .visitor-site .text-coffee-500,
html[data-theme="dark"] .visitor-site .text-espresso-900,
html[data-theme="dark"] .visitor-site .text-espresso-800,
html[data-theme="dark"] .visitor-site .text-espresso-700,
html[data-theme="dark"] .visitor-site .text-espresso-600,
html[data-theme="dark"] .visitor-site .text-gray-700,
html[data-theme="dark"] .visitor-site .text-gray-600 { color: #e8d7c5 !important; }
html[data-theme="dark"] .visitor-site .border-cream-200,
html[data-theme="dark"] .visitor-site .border-cream-300,
html[data-theme="dark"] .visitor-site .border-cream-100,
html[data-theme="dark"] .visitor-site .border-espresso-100,
html[data-theme="dark"] .visitor-site .border-espresso-200 {
    border-color: #4a3929 !important;
}
html[data-theme="dark"] .visitor-site .return-page,
html[data-theme="dark"] .visitor-site .maintenance-page,
html[data-theme="dark"] .visitor-site .menu-page,
html[data-theme="dark"] .visitor-site .checkout-page {
    background: linear-gradient(180deg, #1b1510, #211811) !important;
}
html[data-theme="dark"] .visitor-site .return-page > div > .text-center h1,
html[data-theme="dark"] .visitor-site h1:not(.visitor-hero-title),
html[data-theme="dark"] .visitor-site h2,
html[data-theme="dark"] .visitor-site h3,
html[data-theme="dark"] .visitor-site h4 { color: #f4e5d4 !important; }
html[data-theme="dark"] .visitor-site input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .visitor-site select,
html[data-theme="dark"] .visitor-site textarea {
    background: #1d1712 !important;
    border-color: #5a4430 !important;
    color: #f3e5d6 !important;
}
html[data-theme="dark"] .visitor-site input::placeholder,
html[data-theme="dark"] .visitor-site textarea::placeholder { color: #b39a82 !important; }
html[data-theme="dark"] .visitor-site .product-card,
html[data-theme="dark"] .visitor-site .order-card,
html[data-theme="dark"] .visitor-site .review-card,
html[data-theme="dark"] .visitor-site .payment-card,
html[data-theme="dark"] .visitor-site .store-category-card,
html[data-theme="dark"] .visitor-site .shop-filter-panel,
html[data-theme="dark"] .visitor-site .shop-category-filters .category-pill {
    background-color: #261d16 !important;
    border-color: #4a3929 !important;
    color: #f0e4d6 !important;
}
html[data-theme="dark"] .visitor-site .shop-category-filters .category-pill.bg-espresso-700,
html[data-theme="dark"] .visitor-site .category-pill.active {
    background: linear-gradient(135deg, #b9834f, #8d5c34) !important;
    color: #fffaf3 !important;
    border-color: #c89562 !important;
}
html[data-theme="dark"] .visitor-site footer.footer-section { background: #100c09 !important; }

html[data-theme="dark"] .admin-app-shell .admin-sidebar,
html[data-theme="dark"] .admin-app-shell .admin-sidebar-mobile {
    background: linear-gradient(180deg, #251b14 0%, #19120d 100%) !important;
    border-color: #443225 !important;
    box-shadow: -12px 0 38px rgba(0,0,0,.24) !important;
}
html[data-theme="dark"] .admin-app-shell .admin-sidebar h1,
html[data-theme="dark"] .admin-app-shell .admin-sidebar-mobile h1 { color: #f3dfc7 !important; }
html[data-theme="dark"] .admin-app-shell .admin-sidebar nav button:not(.text-white),
html[data-theme="dark"] .admin-app-shell .admin-sidebar-mobile nav button:not(.text-white) { color: #ead5bf !important; }
html[data-theme="dark"] .admin-app-shell .admin-sidebar nav button:not(.text-white) > div,
html[data-theme="dark"] .admin-app-shell .admin-sidebar-mobile nav button:not(.text-white) > div { background: rgba(221,178,131,.13) !important; }
html[data-theme="dark"] .admin-app-shell .admin-sidebar nav button:not(.text-white) svg,
html[data-theme="dark"] .admin-app-shell .admin-sidebar-mobile nav button:not(.text-white) svg { color: #d9bd9f !important; }
html[data-theme="dark"] .admin-app-shell .admin-sidebar nav button.text-white,
html[data-theme="dark"] .admin-app-shell .admin-sidebar-mobile nav button.text-white {
    background: linear-gradient(135deg, #8e603b, #684326) !important;
    color: #fffaf4 !important;
}
html[data-theme="dark"] .admin-app-shell .admin-sidebar > div:last-child,
html[data-theme="dark"] .admin-app-shell .admin-sidebar-mobile > div:last-child { border-color: #443225 !important; }
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 h2 { color: #f2e2d1 !important; }
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .bg-white,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .bg-cream-50,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .bg-cream-100,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .report-card,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .order-card,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .product-card,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .shadow-sm.border.border-cream-200,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .shadow-sm.border.border-cream-200.bg-white {
    background: #261d16 !important;
    color: #f0e3d4 !important;
    border-color: #4a3828 !important;
    box-shadow: 0 7px 22px rgba(0,0,0,.16) !important;
}
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .report-card { background: linear-gradient(145deg, #2b2119, #211811) !important; }
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .bg-cream-50.border-b,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 thead.bg-cream-50,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 table thead { background: #35271c !important; }
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 table thead th { color: #f0d6b8 !important; border-color: #4a3828 !important; }
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 table tbody td { border-color: #3b2d21 !important; }
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 table tbody tr:hover { background: #33261b !important; }
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .text-coffee-900,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .text-coffee-800,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .text-coffee-700,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .text-coffee-600,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .text-espresso-900,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .text-espresso-800 { color: #e8d7c5 !important; }
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .text-coffee-500,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .text-coffee-400 { color: #bda58d !important; }
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .border-cream-200,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .border-cream-300 { border-color: #4a3828 !important; }
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 select,
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 textarea,
html[data-theme="dark"] .admin-login input:not([type="checkbox"]):not([type="radio"]) {
    background: #1c1510 !important;
    border-color: #59432f !important;
    color: #f0e3d4 !important;
}
html[data-theme="dark"] .admin-app-shell .lg\:hidden.fixed.top-0 {
    background: rgba(35,27,20,.97) !important;
    border-color: #443225 !important;
}
html[data-theme="dark"] .admin-app-shell .realtime-indicator {
    background: #17291e !important;
    border-color: #28633d !important;
    color: #a8f0bd !important;
}
html[data-theme="dark"] .admin-app-shell .realtime-dot { box-shadow: 0 0 0 3px rgba(74,222,128,.2), 0 0 13px rgba(74,222,128,.4); }
html[data-theme="dark"] .admin-login { background: radial-gradient(ellipse at 50% 10%, rgba(168,112,56,.18), transparent 32rem), linear-gradient(145deg,#19120d,#261b13) !important; }
html[data-theme="dark"] .admin-login > div > div:last-child { background: rgba(38,29,22,.96) !important; border-color: #4a3828 !important; }
html[data-theme="dark"] .admin-login h1,
html[data-theme="dark"] .admin-login .text-coffee-900 { color: #f0e3d4 !important; }

@media (max-width: 640px) {
    .coffee-theme-toggle { width: 38px; height: 38px; border-radius: 12px; padding: 7px; }
    .coffee-theme-bean { width: 23px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
    .coffee-theme-toggle, .coffee-theme-bean { transition-duration: .01ms !important; }
}

/* Keep the live status readable in both themes. */
.admin-app-shell .realtime-text[style*="#22c55e"] { color: #18713b !important; }
html[data-theme="dark"] .admin-app-shell .realtime-text[style*="#22c55e"] { color: #9be9b1 !important; }


/* Contrast corrections for explicit light-mode design tokens in dark mode. */
html[data-theme="dark"] .visitor-site .categories-section,
html[data-theme="dark"] .visitor-site .products-section,
html[data-theme="dark"] .visitor-site .about-section,
html[data-theme="dark"] .visitor-site .reviews-section,
html[data-theme="dark"] .visitor-site .contact-section {
    background: linear-gradient(145deg, #1b1510, #241a13) !important;
    color: #f2e4d5 !important;
}
html[data-theme="dark"] .visitor-site .store-category-grid .category-pill {
    background: linear-gradient(145deg, #302319, #241a13) !important;
    border-color: #5b422d !important;
    color: #f5e6d5 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
}
html[data-theme="dark"] .visitor-site .store-category-grid .category-pill h3,
html[data-theme="dark"] .visitor-site .store-category-grid .category-pill:hover h3 {
    color: #f5e6d5 !important;
}
html[data-theme="dark"] .visitor-site .store-category-grid .category-pill p,
html[data-theme="dark"] .visitor-site .store-category-grid .category-pill:hover p {
    color: #cdb69e !important;
}
html[data-theme="dark"] .visitor-site .store-category-grid .category-pill > div > div:first-child {
    background: #4a3321 !important;
    border-color: #6b4a2e !important;
}
html[data-theme="dark"] .visitor-site .store-category-grid .category-pill > div > div:first-child svg { color: #f0c99a !important; }
html[data-theme="dark"] .visitor-site .store-category-grid .category-pill span {
    background: #3a2a1d !important;
    color: #e8d5c0 !important;
}
html[data-theme="dark"] .visitor-site .store-category-grid .category-pill:hover {
    background: linear-gradient(145deg, #46301f, #322217) !important;
    border-color: #b9834f !important;
}
html[data-theme="dark"] .visitor-site .about-section .relative.bg-white.rounded-2xl,
html[data-theme="dark"] .visitor-site .contact-section .bg-cream-50.rounded-2xl,
html[data-theme="dark"] .visitor-site .reviews-section .review-card {
    background: linear-gradient(145deg, #302319, #241a13) !important;
    border-color: #51402e !important;
    color: #f0e2d2 !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.2) !important;
}
html[data-theme="dark"] .visitor-site .about-section .bg-espresso-50,
html[data-theme="dark"] .visitor-site .contact-section .bg-white,
html[data-theme="dark"] .visitor-site .contact-section .bg-cream-100 {
    background: #2b2017 !important;
    border-color: #51402e !important;
    color: #f0e2d2 !important;
}
html[data-theme="dark"] .visitor-site .about-section .founder-image-circular { border-color: #493522 !important; }
html[data-theme="dark"] .visitor-site .about-section p,
html[data-theme="dark"] .visitor-site .reviews-section p,
html[data-theme="dark"] .visitor-site .contact-section p { color: #d5c1ac !important; }
html[data-theme="dark"] .visitor-site .section-header h2,
html[data-theme="dark"] .visitor-site .section-header p,
html[data-theme="dark"] .visitor-site .about-section h3,
html[data-theme="dark"] .visitor-site .reviews-section h3,
html[data-theme="dark"] .visitor-site .contact-section h3 { color: #f4e4d2 !important; }

/* Readable surfaces for admin pages that use custom light backgrounds. */
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 div[class*="bg-white"],
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 section[class*="bg-white"] {
    background-color: #261d16 !important;
    border-color: #4a3828 !important;
    color: #f0e3d4 !important;
}
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 div[class*="bg-cream-50"],
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 section[class*="bg-cream-50"] {
    background-color: #2b2118 !important;
    border-color: #4a3828 !important;
    color: #f0e3d4 !important;
}
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 .order-card {
    box-shadow: 0 8px 24px rgba(0,0,0,.2) !important;
}

/* Orders always communicate status through their card border in both themes. */
.admin-app-shell .order-card[data-order-status="pending"] { border: 1.5px solid #d59a37 !important; }
.admin-app-shell .order-card[data-order-status="prepared"] { border: 1.5px solid #2c9a63 !important; }
.admin-app-shell .order-card[data-order-status="completed"] { border: 1.5px solid #4e86d8 !important; }
.admin-app-shell .order-card[data-order-status="cancelled"] { border: 1.5px solid #dc5b5b !important; }
.admin-app-shell .order-card[data-order-status]:not([data-order-status="pending"]):not([data-order-status="prepared"]):not([data-order-status="completed"]):not([data-order-status="cancelled"]) { border: 1.5px solid #9b8a79 !important; }
html[data-theme="dark"] .admin-app-shell .order-card[data-order-status="pending"] { border-color: #e8b45c !important; background: linear-gradient(145deg,#302317,#261c14) !important; }
html[data-theme="dark"] .admin-app-shell .order-card[data-order-status="prepared"] { border-color: #45bd7e !important; background: linear-gradient(145deg,#1b2b20,#20251a) !important; }
html[data-theme="dark"] .admin-app-shell .order-card[data-order-status="completed"] { border-color: #73a9fa !important; background: linear-gradient(145deg,#1e2738,#211d1a) !important; }
html[data-theme="dark"] .admin-app-shell .order-card[data-order-status="cancelled"] { border-color: #f07a7a !important; background: linear-gradient(145deg,#321d1b,#261814) !important; }
html[data-theme="dark"] .admin-app-shell .order-card[data-order-status] .text-coffee-900,
html[data-theme="dark"] .admin-app-shell .order-card[data-order-status] .text-coffee-800,
html[data-theme="dark"] .admin-app-shell .order-card[data-order-status] .text-coffee-700,
html[data-theme="dark"] .admin-app-shell .order-card[data-order-status] .text-coffee-600,
html[data-theme="dark"] .admin-app-shell .order-card[data-order-status] .text-espresso-700,
html[data-theme="dark"] .admin-app-shell .order-card[data-order-status] .text-espresso-600 { color: #f1e2d2 !important; }
html[data-theme="dark"] .admin-app-shell .order-card[data-order-status] .text-coffee-500 { color: #c8b29c !important; }

/* Ensure muted/accent text does not disappear on dark admin surfaces. */
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 [class*="text-coffee-"],
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 [class*="text-espresso-"] {
    color: #f0e3d4 !important;
}
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 [class*="text-coffee-400"],
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 [class*="text-coffee-500"],
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 [class*="text-coffee-600"] {
    color: #c8b29c !important;
}
html[data-theme="dark"] .admin-app-shell .lg\:mr-64 [class*="text-caramel-"] {
    color: #e4b77e !important;
}
html[data-theme="dark"] .admin-app-shell .order-detail-line[data-order-status="pending"] {
    background: #38241b !important; color: #f3dfd1 !important; border: 1px solid #8e4c3f !important; opacity: 1 !important;
}
html[data-theme="dark"] .admin-app-shell .order-detail-line[data-order-status="prepared"] {
    background: #1d3025 !important; color: #def5e5 !important; border: 1px solid #327a51 !important;
}
html[data-theme="dark"] .admin-app-shell .order-detail-line[data-order-status="completed"] {
    background: #202c3d !important; color: #e0ebff !important; border: 1px solid #416ca8 !important;
}
html[data-theme="dark"] .admin-app-shell .order-detail-line[data-order-status="cancelled"] {
    background: #351e1e !important; color: #ffe1e1 !important; border: 1px solid #8d4545 !important;
}


/* ===== Final contrast pass (v9): force readable dark-mode surfaces and badges ===== */
html[data-theme="dark"] #root .admin-app-shell .lg\:mr-64 div.bg-white,
html[data-theme="dark"] #root .admin-app-shell .lg\:mr-64 section.bg-white,
html[data-theme="dark"] #root .admin-app-shell .lg\:mr-64 article.bg-white,
html[data-theme="dark"] #root .admin-app-shell .lg\:mr-64 .bg-white.rounded-2xl,
html[data-theme="dark"] #root .admin-app-shell .lg\:mr-64 .bg-white.rounded-xl,
html[data-theme="dark"] #root .admin-app-shell .lg\:mr-64 .bg-white.rounded-lg {
    background-color: #261d16 !important;
    color: #f3e5d6 !important;
    border-color: #57432f !important;
}
html[data-theme="dark"] #root .admin-app-shell .lg\:mr-64 [class~="bg-cream-50"],
html[data-theme="dark"] #root .admin-app-shell .lg\:mr-64 [class~="bg-cream-100"],
html[data-theme="dark"] #root .admin-app-shell .lg\:mr-64 [class~="bg-cream-200"],
html[data-theme="dark"] #root .admin-app-shell .lg\:mr-64 [class~="bg-gray-50"],
html[data-theme="dark"] #root .admin-app-shell .lg\:mr-64 [class~="bg-gray-100"] {
    background-color: #33261b !important;
    color: #f0e1d1 !important;
    border-color: #57432f !important;
}
html[data-theme="dark"] #root .admin-app-shell .admin-sidebar,
html[data-theme="dark"] #root .admin-app-shell .admin-sidebar-mobile {
    background: linear-gradient(180deg, #251b14 0%, #19120d 100%) !important;
    color: #f3e5d6 !important;
    border-color: #493625 !important;
}
html[data-theme="dark"] #root .admin-app-shell .admin-sidebar h1,
html[data-theme="dark"] #root .admin-app-shell .admin-sidebar p,
html[data-theme="dark"] #root .admin-app-shell .admin-sidebar-mobile h1,
html[data-theme="dark"] #root .admin-app-shell .admin-sidebar-mobile p {
    color: #f1dfcb !important;
}
html[data-theme="dark"] #root .admin-app-shell .admin-sidebar nav button:not(.text-white),
html[data-theme="dark"] #root .admin-app-shell .admin-sidebar-mobile nav button:not(.text-white) {
    color: #e8d2ba !important;
}
html[data-theme="dark"] #root .admin-app-shell .lg\:mr-64 > div > div > div > h2,
html[data-theme="dark"] #root .admin-app-shell .lg\:mr-64 h2.text-coffee-900 {
    color: #fff0df !important;
}
/* Readable role/status badges: do not put pale text on the original light gray chips. */
html[data-theme="dark"] #root .admin-app-shell .bg-coffee-100.text-coffee-800 {
    background: #49392a !important;
    color: #fff0df !important;
    border: 1px solid #6a523b !important;
}
html[data-theme="dark"] #root .admin-app-shell .bg-espresso-100.text-espresso-800 {
    background: #49301c !important;
    color: #ffe1bd !important;
    border: 1px solid #76502f !important;
}
html[data-theme="dark"] #root .admin-app-shell .bg-emerald-100.text-emerald-800,
html[data-theme="dark"] #root .admin-app-shell .bg-emerald-50.text-emerald-800 {
    background: #193a29 !important;
    color: #c8f8d8 !important;
    border-color: #2b7550 !important;
}
html[data-theme="dark"] #root .admin-app-shell .bg-amber-100.text-amber-800,
html[data-theme="dark"] #root .admin-app-shell .bg-amber-50.text-amber-800 {
    background: #3c2c14 !important;
    color: #ffebbd !important;
    border-color: #83632a !important;
}
html[data-theme="dark"] #root .admin-app-shell .bg-red-100.text-red-800,
html[data-theme="dark"] #root .admin-app-shell .bg-red-50.text-red-800 {
    background: #401f1e !important;
    color: #ffdfdd !important;
    border-color: #87413d !important;
}
html[data-theme="dark"] #root .admin-app-shell .bg-blue-100.text-blue-800,
html[data-theme="dark"] #root .admin-app-shell .bg-blue-50.text-blue-800 {
    background: #1e3047 !important;
    color: #dceaff !important;
    border-color: #3f6598 !important;
}
/* Strong contrast for the storefront category tiles in dark mode (including hover text). */
html[data-theme="dark"] #root .visitor-site .store-category-grid .category-pill {
    background: linear-gradient(145deg, #302319, #241a13) !important;
    border-color: #654a32 !important;
    color: #fff0df !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.24) !important;
}
html[data-theme="dark"] #root .visitor-site .store-category-grid .category-pill h3,
html[data-theme="dark"] #root .visitor-site .store-category-grid .category-pill:hover h3,
html[data-theme="dark"] #root .visitor-site .store-category-grid .category-pill p,
html[data-theme="dark"] #root .visitor-site .store-category-grid .category-pill:hover p {
    color: #f3e3d1 !important;
}
html[data-theme="dark"] #root .visitor-site .store-category-grid .category-pill > div > div:first-child {
    background: #493321 !important;
    border-color: #765333 !important;
}
html[data-theme="dark"] #root .visitor-site .store-category-grid .category-pill > div > div:first-child svg { color: #ffdbad !important; }
html[data-theme="dark"] #root .visitor-site .store-category-grid .category-pill span {
    background: #493321 !important;
    color: #f7e4cf !important;
}
html[data-theme="dark"] #root .visitor-site .store-category-grid .category-pill:hover {
    background: linear-gradient(145deg, #493321, #342316) !important;
    border-color: #c89562 !important;
}
html[data-theme="dark"] #root .visitor-site .shop-category-filters .category-pill:not(.active) {
    background: #2d2118 !important;
    border-color: #5c432e !important;
    color: #f0e0cf !important;
}
html[data-theme="dark"] #root .visitor-site .shop-category-filters .category-pill.active {
    background: #8b5e3c !important;
    border-color: #d3a16a !important;
    color: #fffaf4 !important;
}

/* ===== Targeted contrast repair: shop filters, contact details, social links and admin categories ===== */
/* The contact icon tiles use a dark coffee surface in both themes so the glyphs never wash out. */
.visitor-site .contact-section .space-y-6 > .flex.items-start.gap-4 > div:first-child {
    background: linear-gradient(145deg, #68452d, #4a2f1c) !important;
    border: 1px solid #9b7048 !important;
    box-shadow: 0 5px 14px rgba(73, 44, 22, .13) !important;
}
.visitor-site .contact-section .space-y-6 > .flex.items-start.gap-4 > div:first-child svg {
    color: #fff0dc !important;
    stroke: #fff0dc !important;
}
.visitor-site .contact-section .space-y-6 > .flex.items-start.gap-4 h4 {
    color: #49301e !important;
    font-weight: 850 !important;
}
.visitor-site .contact-section .space-y-6 > .flex.items-start.gap-4 p,
.visitor-site .contact-section .space-y-6 > .flex.items-start.gap-4 a {
    color: #6b5039 !important;
    font-weight: 550;
    overflow-wrap: anywhere;
}
.visitor-site .contact-section .space-y-6 > .flex.items-start.gap-4 a:hover {
    color: #8b5e3c !important;
}
.visitor-site .contact-section .social-icon {
    background: linear-gradient(145deg, #68452d, #432817) !important;
    color: #fffaf3 !important;
    border: 1px solid rgba(208, 166, 121, .65) !important;
    box-shadow: 0 5px 14px rgba(73, 44, 22, .15) !important;
}
.visitor-site .contact-section .social-icon svg {
    width: 22px !important;
    height: 22px !important;
    display: block;
    color: #fffaf3 !important;
    fill: #fffaf3 !important;
}
.visitor-site .contact-section .social-icon:hover {
    background: linear-gradient(145deg, #8b5e3c, #68452d) !important;
    border-color: #c99a68 !important;
    opacity: 1 !important;
    transform: translateY(-2px) !important;
}

/* All Products: readable heading, count and category chips in light mode. */
.visitor-site .return-page .shop-filter-panel {
    background: linear-gradient(145deg, #fffdf9, #f6eee3) !important;
    border-color: #e2cbb1 !important;
}
.visitor-site .return-page .shop-filter-heading h2 { color: #49301e !important; }
.visitor-site .return-page .shop-filter-heading p { color: #725a44 !important; }
.visitor-site .return-page .shop-filter-count {
    background: #fff8ee !important;
    border-color: #d9b995 !important;
    color: #67472b !important;
}
.visitor-site .return-page .shop-category-filters .category-pill:not(.bg-espresso-700) {
    background: #fffdf9 !important;
    color: #58422f !important;
    border-color: #d8c2a9 !important;
}
.visitor-site .return-page .shop-subcategory-filters button:not(.bg-caramel-500) {
    background: #fffdf9 !important;
    color: #58422f !important;
    border-color: #d8c2a9 !important;
}
.visitor-site .return-page .shop-category-filters .category-pill.bg-espresso-700,
.visitor-site .return-page .shop-subcategory-filters button.bg-caramel-500 {
    background: linear-gradient(135deg, #765034, #51331d) !important;
    color: #fffaf3 !important;
    border-color: #765034 !important;
}

/* Contact section, dark theme: force a dark surface and independent high-contrast icon colors. */
html[data-theme="dark"] #root .visitor-site .contact-section {
    background: linear-gradient(145deg, #1b1510, #241a13) !important;
    color: #f8ead9 !important;
}
html[data-theme="dark"] #root .visitor-site .contact-section .section-header h2,
html[data-theme="dark"] #root .visitor-site .contact-section h3,
html[data-theme="dark"] #root .visitor-site .contact-section .space-y-6 > .flex.items-start.gap-4 h4 {
    color: #fff0df !important;
}
html[data-theme="dark"] #root .visitor-site .contact-section .space-y-6 > .flex.items-start.gap-4 p,
html[data-theme="dark"] #root .visitor-site .contact-section .space-y-6 > .flex.items-start.gap-4 a,
html[data-theme="dark"] #root .visitor-site .contact-section .section-header p {
    color: #e4cfb8 !important;
}
html[data-theme="dark"] #root .visitor-site .contact-section .space-y-6 > .flex.items-start.gap-4 a:hover {
    color: #ffd39f !important;
}
html[data-theme="dark"] #root .visitor-site .contact-section .space-y-6 > .flex.items-start.gap-4 > div:first-child {
    background: linear-gradient(145deg, #56391f, #3b281a) !important;
    border-color: #92683f !important;
}
html[data-theme="dark"] #root .visitor-site .contact-section .space-y-6 > .flex.items-start.gap-4 > div:first-child svg {
    color: #ffe1bb !important;
    stroke: #ffe1bb !important;
}
html[data-theme="dark"] #root .visitor-site .contact-section .bg-cream-50.rounded-2xl,
html[data-theme="dark"] #root .visitor-site .contact-section .bg-white,
html[data-theme="dark"] #root .visitor-site .contact-section .bg-cream-100 {
    background: linear-gradient(145deg, #2c2118, #241a13) !important;
    border-color: #5a422d !important;
    color: #f5e5d3 !important;
}
html[data-theme="dark"] #root .visitor-site .contact-section input,
html[data-theme="dark"] #root .visitor-site .contact-section textarea,
html[data-theme="dark"] #root .visitor-site .contact-section select {
    background: #1b140f !important;
    color: #fff0df !important;
    border-color: #684a30 !important;
}
html[data-theme="dark"] #root .visitor-site .contact-section input::placeholder,
html[data-theme="dark"] #root .visitor-site .contact-section textarea::placeholder { color: #c4a98b !important; }
html[data-theme="dark"] #root .visitor-site .contact-section .social-icon {
    background: linear-gradient(145deg, #765033, #51341f) !important;
    border-color: #a77d50 !important;
    color: #fffaf3 !important;
}
html[data-theme="dark"] #root .visitor-site .contact-section .social-icon svg {
    color: #fffaf3 !important;
    fill: #fffaf3 !important;
}

/* All Products category filter panel in dark mode. */
html[data-theme="dark"] #root .visitor-site .return-page .shop-filter-panel {
    background: linear-gradient(145deg, #292017, #211811) !important;
    border-color: #58432f !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,225,187,.035) !important;
}
html[data-theme="dark"] #root .visitor-site .return-page .shop-filter-heading h2 { color: #fff0df !important; }
html[data-theme="dark"] #root .visitor-site .return-page .shop-filter-heading p { color: #d6bea5 !important; }
html[data-theme="dark"] #root .visitor-site .return-page .shop-filter-count {
    background: #3a291b !important;
    border-color: #765433 !important;
    color: #ffe0b7 !important;
}
html[data-theme="dark"] #root .visitor-site .return-page .shop-category-filters .category-pill:not(.bg-espresso-700),
html[data-theme="dark"] #root .visitor-site .return-page .shop-subcategory-filters button:not(.bg-caramel-500) {
    background: #34261b !important;
    color: #f7e8d7 !important;
    border-color: #654a32 !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.12) !important;
}
html[data-theme="dark"] #root .visitor-site .return-page .shop-category-filters .category-pill:not(.bg-espresso-700):hover,
html[data-theme="dark"] #root .visitor-site .return-page .shop-subcategory-filters button:not(.bg-caramel-500):hover {
    background: #49311f !important;
    color: #fff3e4 !important;
    border-color: #ae7e4e !important;
}
html[data-theme="dark"] #root .visitor-site .return-page .shop-category-filters .category-pill.bg-espresso-700,
html[data-theme="dark"] #root .visitor-site .return-page .shop-subcategory-filters button.bg-caramel-500 {
    background: linear-gradient(135deg, #a87542, #80532f) !important;
    color: #fffaf4 !important;
    border-color: #c29361 !important;
}

/* Admin category cards: dedicated high-contrast icon tile and subcategory chips. */
.admin-app-shell .admin-category-card {
    background: linear-gradient(145deg, #fffdf9, #f8f0e6) !important;
    border-color: #e2cbb2 !important;
    color: #49301e !important;
    box-shadow: 0 7px 22px rgba(83,54,31,.055) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.admin-app-shell .admin-category-card:hover {
    transform: translateY(-2px);
    border-color: #cda779 !important;
    box-shadow: 0 12px 28px rgba(83,54,31,.10) !important;
}
.admin-app-shell .admin-category-icon {
    background: linear-gradient(145deg, #765034, #4d311c) !important;
    border: 1px solid #a77c50 !important;
    color: #fff0dc !important;
}
.admin-app-shell .admin-category-icon svg {
    color: #fff0dc !important;
    stroke: #fff0dc !important;
}
.admin-app-shell .admin-category-name { color: #49301e !important; }
.admin-app-shell .admin-category-subcategory {
    background: #f0e2d1 !important;
    color: #5e432c !important;
    border: 1px solid #dfc4a4 !important;
}
.admin-app-shell .admin-category-edit { color: #714a2d !important; }
.admin-app-shell .admin-category-edit:hover { background: #efdfcc !important; color: #4d311c !important; }
.admin-app-shell .admin-category-delete { color: #c62828 !important; }
.admin-app-shell .admin-category-delete:hover { background: #fde8e7 !important; color: #a61b1b !important; }
html[data-theme="dark"] #root .admin-app-shell .admin-category-card {
    background: linear-gradient(145deg, #2c2118, #211811) !important;
    color: #fff0df !important;
    border-color: #5b422d !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
}
html[data-theme="dark"] #root .admin-app-shell .admin-category-card:hover {
    background: linear-gradient(145deg, #35271c, #281d14) !important;
    border-color: #a77b4b !important;
}
html[data-theme="dark"] #root .admin-app-shell .admin-category-icon {
    background: linear-gradient(145deg, #684529, #432b19) !important;
    border-color: #ad8050 !important;
}
html[data-theme="dark"] #root .admin-app-shell .admin-category-icon svg { color: #ffe3bd !important; stroke: #ffe3bd !important; }
html[data-theme="dark"] #root .admin-app-shell .admin-category-name { color: #fff0df !important; }
html[data-theme="dark"] #root .admin-app-shell .admin-category-subcategory {
    background: #3d2c1e !important;
    color: #f4dfc5 !important;
    border-color: #654a32 !important;
}
html[data-theme="dark"] #root .admin-app-shell .admin-category-edit { color: #f0c99a !important; }
html[data-theme="dark"] #root .admin-app-shell .admin-category-edit:hover { background: #493321 !important; color: #fff0df !important; }
html[data-theme="dark"] #root .admin-app-shell .admin-category-delete { color: #ff8585 !important; }
html[data-theme="dark"] #root .admin-app-shell .admin-category-delete:hover { background: #482321 !important; color: #ffd7d7 !important; }

/* Realtime status: the dot and label remain legible against either status pill. */
.admin-app-shell .realtime-indicator {
    background: #f0fbf3 !important;
    border-color: #8bc99a !important;
    color: #175b30 !important;
}
.admin-app-shell .realtime-dot {
    border: 2px solid #ffffff !important;
    outline: 1px solid rgba(24, 91, 48, .3);
    box-shadow: 0 0 0 3px rgba(34,197,94,.2), 0 0 12px rgba(34,197,94,.3) !important;
}
.admin-app-shell .realtime-text[style*="#22c55e"] { color: #176534 !important; }
.admin-app-shell .realtime-text[style*="#ef4444"] { color: #a51f1f !important; }
html[data-theme="dark"] #root .admin-app-shell .realtime-indicator {
    background: #14271b !important;
    border-color: #34764a !important;
    color: #c5f7d2 !important;
}
html[data-theme="dark"] #root .admin-app-shell .realtime-dot {
    border-color: #fff6e9 !important;
    outline-color: rgba(120, 245, 157, .4) !important;
    box-shadow: 0 0 0 3px rgba(74,222,128,.22), 0 0 14px rgba(74,222,128,.46) !important;
}
html[data-theme="dark"] #root .admin-app-shell .realtime-text[style*="#22c55e"] { color: #8ff0ad !important; }
html[data-theme="dark"] #root .admin-app-shell .realtime-text[style*="#ef4444"] { color: #ff9a9a !important; }

@media (prefers-reduced-motion: reduce) {
    .admin-app-shell .admin-category-card { transition: none !important; }
}