/* Egy Online identity from the approved 2026 brand presentation. */
:root {
    --egy-orange: #ff9601;
    --egy-orange-deep: #ca7700;
    --egy-brown: #1e0d00;
    --egy-black: #000000;
    --egy-peach: #ffceb2;
    --egy-warm-surface: #fff8f2;
    --bs-primary: #ff9601;
    --bs-primary-rgb: 255, 150, 1;
}

/* Marketplace storefront, customer pages and seller portal. */
:root {
    --ink: #1e0d00;
    --muted: #71655c;
    --line: #eadfd6;
    --page: #fffdfb;
    --surface: #ffffff;
    --brand: #000000;
    --brand-dark: #1e0d00;
    --brand-soft: #fff1e5;
    --amber: #ff9601;
    --coral: #ca7700;
    --mint: #fff2e7;
    --shadow: 0 12px 34px rgba(30, 13, 0, .08);
}

body {
    color: var(--egy-brown);
}

.market-topbar {
    border-bottom: 2px solid var(--egy-orange);
    background: var(--egy-black);
    color: #f7eee8;
}

.market-topbar .topbar-message,
.market-topbar .topbar-links a,
.market-topbar .topbar-location strong {
    color: #fff;
}

.market-topbar .topbar-location > span,
.market-topbar .topbar-links a:hover {
    color: var(--egy-orange);
}

.market-header {
    background: #fff;
    border-bottom: 1px solid #f0e4da;
}

/* Keep the masthead white at tablet and mobile widths as well. The orange
   belongs on the search action and brand accents, where the logo stays clear. */
.market-header,
.market-header .header-main {
    background-color: #fff;
}

.brand-mark {
    flex: 0 0 154px;
    min-width: 120px;
    justify-content: center;
}

.brand-logo-image {
    max-width: 144px;
    max-height: 70px;
    object-fit: contain;
}

.footer-brand-mark {
    justify-content: flex-start;
    margin-bottom: 12px;
}

.footer-brand-mark .brand-logo-image {
    max-width: 150px;
    max-height: 90px;
}

.header-search {
    background: #fff;
    border-color: var(--egy-black);
}

.header-search input {
    background: #fff;
    color: var(--egy-brown);
}

.header-action,
.header-action strong {
    color: var(--egy-brown);
}

.header-search:focus-within {
    border-color: var(--egy-orange-deep);
    box-shadow: 0 0 0 3px rgba(255, 150, 1, .2);
}

.header-search button,
.hero-cta,
.category-promo-cta,
.btn-primary,
.consent-button-primary {
    background: var(--egy-orange);
    color: var(--egy-black);
}

.header-search button:hover,
.hero-cta:hover,
.category-promo-cta:hover,
.btn-primary:hover,
.consent-button-primary:hover {
    background: #e88800;
    color: var(--egy-black);
}

.header-action:hover,
.category-nav a:hover,
.section-heading > a,
.section-heading-actions > a:hover,
.section-kicker,
.category-nav .nav-highlight {
    color: var(--egy-orange-deep);
}

.category-nav .all-categories,
.category-nav .all-categories:hover {
    color: var(--egy-black);
}

.category-nav .all-categories span,
.all-categories span {
    color: var(--egy-orange-deep);
}

.action-icon {
    background: #fff2e7;
    color: var(--egy-brown);
}

.category-nav-wrap {
    border-top-color: #f0e4da;
}

/* Preserve each category's artwork while tinting its text side with the
   approved black, brown and orange palette. */
.category-promo-banner {
    border-color: rgba(30, 13, 0, .16);
    background: var(--egy-brown);
    box-shadow: 0 14px 34px rgba(30, 13, 0, .12);
}

.category-promo-shade {
    background: linear-gradient(270deg, rgba(30, 13, 0, .94) 0%, rgba(30, 13, 0, .76) 38%, rgba(30, 13, 0, .04) 82%);
}

html[dir="ltr"] .category-promo-shade {
    background: linear-gradient(90deg, rgba(30, 13, 0, .94) 0%, rgba(30, 13, 0, .76) 38%, rgba(30, 13, 0, .04) 82%);
}

.category-promo-kicker {
    color: #ffc46d;
}

.category-promo-kicker::before {
    background: var(--egy-orange);
    box-shadow: 0 0 0 5px rgba(255, 150, 1, .2);
}

.category-promo-cta,
.category-promo-cta:hover {
    background: var(--egy-orange);
    color: var(--egy-black);
}

.category-promo-cta:hover {
    background: #e88800;
}

.home-hero {
    background:
        radial-gradient(ellipse at 78% 48%, rgba(202, 119, 0, .72) 0, transparent 39%),
        linear-gradient(115deg, #1e0d00 0%, #000000 58%, #381f00 100%);
}

.hero-eyebrow i {
    background: var(--egy-orange);
    box-shadow: 0 0 0 5px rgba(255, 150, 1, .18);
}

.hero-bag {
    background: linear-gradient(145deg, #ffb347, var(--egy-orange));
}

.hero-bag::before {
    border-color: #e88800;
    border-bottom: 0;
}

.hero-bag span {
    color: var(--egy-black);
}

.promo-amber,
.category-tile:nth-child(6n+1) {
    --tile-tint: #ffceb2;
    --tile-icon: #1e0d00;
    background-color: #ffebd9;
}

.promo-coral,
.category-tile:nth-child(6n+2) {
    --tile-tint: #f7d9c8;
    --tile-icon: #ca7700;
    background-color: #f8e5d9;
}

.promo-sky,
.category-tile:nth-child(6n+3) {
    --tile-tint: #f4dfc7;
    --tile-icon: #975300;
    background-color: #f7eadb;
}

.category-tile:nth-child(6n+4) {
    --tile-tint: #e8d9ca;
    --tile-icon: #381f00;
}

.category-tile:nth-child(6n+5) {
    --tile-tint: #f2e6de;
    --tile-icon: #6b3400;
}

.category-tile:nth-child(6n+6) {
    --tile-tint: #fff0e5;
    --tile-icon: #ca7700;
}

.promo-icon {
    color: var(--egy-brown);
}

.section-heading h1,
.section-heading h2,
.category-promo h1,
.product-title,
.store-footer strong {
    color: var(--egy-brown);
}

.discount-tag,
.cart-icon i {
    background: var(--egy-orange-deep);
    color: #fff;
}

.deals-section,
.catalog-demo-note {
    border-color: #f2d6bd;
    background: var(--egy-warm-surface);
}

.deals-section .section-heading > a,
.catalog-demo-note strong {
    color: var(--egy-orange-deep);
}

.store-footer {
    border-top: 3px solid var(--egy-orange);
    background: #120900;
    color: #f8eee6;
}

.store-footer a,
.store-footer p,
.store-footer .footer-bottom {
    color: #eadfd6;
}

.store-footer a:hover,
.store-footer .footer-links a:hover {
    color: var(--egy-orange);
}

.consent-button-primary,
.btn-primary {
    border-color: var(--egy-orange);
    font-weight: 800;
}

.brand-mark:focus-visible,
.header-action:focus-visible,
.category-nav a:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--egy-orange-deep);
    outline-offset: 3px;
}

/* Administration dashboard, integration screens and authentication pages. */
body.theme-primary {
    --primary: #ff9601;
    --primary-rgb: 255, 150, 1;
    --bs-primary: #ff9601;
    --bs-primary-rgb: 255, 150, 1;
}

body.theme-primary .main-header .logo-box,
body.theme-primary .main-sidebar {
    background: #ffffff !important;
}

body.theme-primary .main-header .logo-box {
    border-bottom: 1px solid #f0e4da;
}

body.theme-primary .main-header .logo,
body.theme-primary .main-sidebar .logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.theme-primary .main-header .logo-mini img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

body.theme-primary .main-header .logo-lg img {
    width: auto;
    max-width: 168px;
    max-height: 62px;
    object-fit: contain;
}

body.theme-primary.light-skin .sidebar-menu > li:hover > a,
body.theme-primary.light-skin .sidebar-menu > li:active > a,
body.theme-primary.light-skin .sidebar-menu > li.active > a {
    color: var(--egy-brown) !important;
}

body.theme-primary.light-skin .sidebar-menu > li.active > a {
    background: var(--egy-orange) !important;
    color: var(--egy-black) !important;
}

body.theme-primary.light-skin .sidebar-menu > li.active > a > i,
body.theme-primary.light-skin .sidebar-menu > li.active > a > svg {
    color: var(--egy-black) !important;
}

body.theme-primary .sidebar a:hover,
body.theme-primary .sidebar-menu > li > a:hover,
body.theme-primary .main-header .navbar .nav > li > a:hover,
body.theme-primary .main-header .navbar .nav > li > a:focus {
    color: var(--egy-orange-deep) !important;
}

body.theme-primary .btn-primary,
body.theme-primary .bg-primary,
body.theme-primary .badge-primary,
body.theme-primary .label-primary,
body.theme-primary .page-item.active .page-link,
body.theme-primary .progress-bar,
body.theme-primary .nav-tabs .nav-link.active {
    border-color: var(--egy-orange) !important;
    background-color: var(--egy-orange) !important;
    color: var(--egy-black) !important;
}

body.theme-primary .bg-gradient-primary,
body.theme-primary .bg-gradient-primary-dark {
    background: linear-gradient(135deg, #ff9601 0%, #ca7700 100%) !important;
    color: var(--egy-black) !important;
}

body.theme-primary .btn-primary:hover,
body.theme-primary .page-item.active .page-link:hover {
    border-color: #e88800 !important;
    background-color: #e88800 !important;
}

body.theme-primary .btn-outline-primary {
    border-color: var(--egy-orange-deep) !important;
    color: var(--egy-orange-deep) !important;
}

body.theme-primary .btn-outline-primary:hover {
    background: var(--egy-orange) !important;
    color: var(--egy-black) !important;
}

body.theme-primary .text-primary,
body.theme-primary a.text-primary {
    color: var(--egy-orange-deep) !important;
}

body.theme-primary .form-control:focus,
body.theme-primary .form-select:focus,
body.theme-primary .custom-select:focus {
    border-color: var(--egy-orange) !important;
    box-shadow: 0 0 0 .2rem rgba(255, 150, 1, .2) !important;
}

body.theme-primary #loader::before {
    border-color: rgba(255, 150, 1, .2);
    border-top-color: var(--egy-orange);
}

body.dark-skin.theme-primary .main-header .logo-box {
    background: #ffffff !important;
}

body.dark-skin.theme-primary .main-sidebar {
    background: #1e0d00 !important;
}

body.dark-skin.theme-primary .sidebar-menu > li.active > a {
    background: var(--egy-orange) !important;
    color: var(--egy-black) !important;
}

body.dark-skin.theme-primary .sidebar-menu > li.active > a > i,
body.dark-skin.theme-primary .sidebar-menu > li.active > a > svg {
    color: var(--egy-black) !important;
}

body.brand-auth-page {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 14% 12%, rgba(255, 150, 1, .52), transparent 38%),
        linear-gradient(135deg, #1e0d00 0%, #000000 72%, #381f00 100%) !important;
}

.brand-auth-logo {
    display: block;
    width: 142px;
    max-width: 48%;
    max-height: 92px;
    margin: 0 auto 10px;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .brand-mark {
        flex-basis: 112px;
        min-width: 94px;
    }

    .brand-logo-image {
        max-width: 106px;
        max-height: 60px;
    }

    .footer-brand-mark .brand-logo-image {
        max-width: 132px;
        max-height: 78px;
    }

    body.theme-primary .main-header .logo-lg img {
        max-width: 122px;
        max-height: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}