/* ═══ header.css — مرجع واحد هدر عمومی، جستجوی زنده و دراپ‌داون.
   در v1.1.269 خروجی نهایی لایه‌های قدیمی v18/v52/v66/v84/v198 در این فایل ادغام شد. ═══ */
/* Unified site header. Grid owns the outer layout; child controls keep their
   internal flex/grid layout. These values reproduce the final pre-cleanup
   cascade from the former v18/v52/product-dark header layers. */
:root{
    --hg-header-bg:rgba(255,255,255,.72);
    --hg-header-shell-bg:rgba(246,246,242,.72);
    --hg-header-bg-2:rgba(255,255,255,.54);
    --hg-header-border:rgba(23,24,27,.085);
    --hg-header-border-soft:rgba(23,24,27,.045);
    --hg-header-text:#17181b;
    --hg-header-muted:#6d7277;
    --hg-header-solid:#17181b;
    --hg-header-solid-text:#fff;
    --hg-header-shadow:0 12px 36px rgba(20,23,28,.045);
    --hg-header-blur:blur(22px) saturate(1.08);
    --hg-header-action-bg:rgba(255,255,255,.58);
    --hg-header-action-border:rgba(22,24,28,.05);
    --hg-header-action-hover:rgba(255,255,255,.78);
}
html[data-hg-theme="dark"]{
    --hg-header-bg:rgba(18,22,29,.72);
    --hg-header-shell-bg:rgba(15,19,26,.72);
    --hg-header-bg-2:rgba(255,255,255,.07);
    --hg-header-border:rgba(255,255,255,.075);
    --hg-header-border-soft:rgba(255,255,255,.065);
    --hg-header-text:#eef2f7;
    --hg-header-muted:#a2adba;
    --hg-header-solid:#eef2f7;
    --hg-header-solid-text:#11161d;
    --hg-header-shadow:0 14px 38px rgba(0,0,0,.28);
    --hg-header-action-bg:rgba(255,255,255,.055);
    --hg-header-action-border:rgba(255,255,255,.075);
    --hg-header-action-hover:rgba(255,255,255,.055);
}
.hg-theme-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}
.hg-theme-toggle-icon{
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    font-size:16px;
    line-height:1;
}

.site-header{
    position:relative!important;
    z-index:999!important;
    isolation:isolate;
    width:min(1180px,calc(100vw - 28px))!important;
    height:auto!important;
    min-height:64px!important;
    margin:12px auto 0!important;
    padding:0!important;
    border:1px solid transparent!important;
    border-radius:999px!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    overflow:visible!important;
    transform:none!important;
    transition:box-shadow .25s ease!important;
}
.site-header::before{
    content:"";
    position:absolute;
    inset:-1px;
    z-index:0;
    border:1px solid rgba(255,255,255,.44);
    border-bottom-color:var(--hg-header-border);
    border-radius:inherit;
    background:var(--hg-header-shell-bg);
    box-shadow:var(--hg-header-shadow);
    backdrop-filter:var(--hg-header-blur);
    -webkit-backdrop-filter:var(--hg-header-blur);
    overflow:hidden;
    pointer-events:none;
}
html[data-hg-theme="dark"] .site-header::before{
    border-color:var(--hg-header-border)!important;
}
.header-inner{
    position:relative;
    z-index:1;
    width:100%!important;
    max-width:none!important;
    min-height:62px!important;
    height:auto!important;
    margin:0!important;
    padding:8px 10px!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:14px!important;
    background:transparent!important;
}

.site-logo{
    min-width:0!important;
    max-width:min(var(--hg-logo-max-w,180px),34vw)!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    padding-inline:2px!important;
    overflow:hidden!important;
    text-decoration:none;
}
.site-logo .custom-logo,
.site-logo .hg-header-logo-img{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:var(--hg-logo-max-w,180px)!important;
    max-height:var(--hg-logo-max-h,38px)!important;
    object-fit:contain!important;
    flex:0 1 auto!important;
}
.logo-icon{
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,var(--hg-header-solid),#4b5563)!important;
    box-shadow:none!important;
    display:flex;
    align-items:center;
    justify-content:center;
}
html[data-hg-theme="dark"] .logo-icon{background:linear-gradient(145deg,#eef2f7,#98a6b8)!important;}
.logo-icon svg{width:20px!important;height:20px!important;}
html[data-hg-theme="dark"] .logo-icon svg{stroke:#11161d!important;}
.logo-text{
    color:var(--hg-header-text)!important;
    font-size:15px!important;
    font-weight:1000!important;
    letter-spacing:-.25px!important;
    line-height:1!important;
}

.site-header .nav-desktop{
    justify-self:center!important;
    display:flex!important;
    min-width:0!important;
    align-items:center;
}
.site-header .nav-desktop .nav-list,
.site-header .nav-desktop ul{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    list-style:none!important;
    border:1px solid var(--hg-header-border-soft)!important;
    border-radius:999px!important;
    background:var(--hg-header-bg-2)!important;
    backdrop-filter:var(--hg-header-blur)!important;
    -webkit-backdrop-filter:var(--hg-header-blur)!important;
}
.site-header .nav-desktop li{margin:0!important;padding:0!important;list-style:none!important;}
.site-header .nav-desktop .nav-list>li>a,
.site-header .nav-desktop li>a,
.site-header .nav-desktop .nav-link{
    min-height:36px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    padding:0 14px!important;
    border-radius:999px!important;
    color:var(--hg-header-muted)!important;
    background:transparent!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-decoration:none!important;
    transition:background .16s ease,color .16s ease,transform .16s ease!important;
}
.nav-link .nav-icon{width:16px;height:16px;display:flex;align-items:center;}
.nav-link .nav-icon svg{width:15px;height:15px;}
.site-header .hasti-categories-nav-link{gap:7px!important;}
.site-header .hasti-categories-nav-link .nav-icon,
.site-header .hasti-categories-nav-link .nav-icon svg{
    width:16px!important;
    height:16px!important;
    display:block!important;
    flex:0 0 auto!important;
}
.site-header .nav-desktop li>a:hover,
.site-header .nav-desktop li.current-menu-item>a,
.site-header .nav-desktop .nav-link:hover{
    color:var(--hg-header-text)!important;
    background:var(--hg-header-action-bg)!important;
}
.site-header .nav-desktop .nav-link.active{
    color:var(--hg-header-text)!important;
    background:rgba(255,255,255,.58)!important;
}
html[data-hg-theme="dark"] .site-header .nav-desktop li.current-menu-item>a{
    background:var(--hg-header-action-bg)!important;
}

.header-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
}
.header-actions .icon-btn,
.site-header .icon-btn,
.site-header .hg-theme-toggle{
    position:relative;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    border-radius:15px!important;
    border:1px solid var(--hg-header-action-border)!important;
    background:var(--hg-header-action-bg)!important;
    color:var(--hg-header-text)!important;
    box-shadow:none!important;
    display:grid!important;
    place-items:center!important;
    text-decoration:none;
    transition:background .16s ease,transform .16s ease,color .16s ease!important;
}
.header-actions .icon-btn:hover,
.site-header .icon-btn:hover,
.site-header .hg-theme-toggle:hover{
    background:var(--hg-header-action-hover)!important;
    transform:translateY(-1px)!important;
}
.site-header svg,
.header-actions svg{
    display:block!important;
    max-width:none!important;
}
.header-actions svg,
.site-header .icon-btn svg,
.site-header .hg-theme-toggle svg{
    width:18px!important;
    height:18px!important;
    display:block!important;
    max-width:none!important;
}
.site-header .icon-btn svg,
.site-header .hg-theme-toggle svg{stroke:currentColor!important;fill:none!important;}
.site-header .hg-theme-toggle img.emoji,
.site-header .hg-theme-toggle-icon img{width:17px!important;height:17px!important;margin:0!important;display:block!important;}
.site-header .hg-theme-toggle-icon{width:100%!important;height:100%!important;display:grid!important;place-items:center!important;line-height:1!important;}
.cart-badge{
    position:absolute;
    top:-5px;
    left:-5px;
    min-width:17px;
    height:17px;
    padding:0 4px;
    background:var(--black);
    color:#fff;
    font-size:10px;
    font-weight:700;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}
.search-toggle-btn{display:none;}

.hg-header-search{display:none;}
@media(min-width:782px){
    .header-inner{grid-template-columns:auto minmax(0,1fr) auto auto!important;}
    .site-header .nav-desktop{justify-self:end!important;}
    .hg-header-search{
        position:relative;
        display:flex!important;
        align-items:center;
        gap:8px;
        min-width:0;
        height:44px;
        padding:0 14px;
        border-radius:999px;
        border:1px solid var(--hg-header-border-soft);
        background:var(--hg-header-bg-2);
    }
    .hg-hs-ico{flex:0 0 auto;display:grid;place-items:center;color:var(--hg-header-muted);}
    .hg-hs-ico svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;}
    .hg-hs-input{
        flex:1 1 auto;
        min-width:0;
        width:100%;
        height:100%;
        border:0!important;
        outline:0!important;
        background:transparent!important;
        box-shadow:none!important;
        padding:0!important;
        margin:0!important;
        font-size:13px!important;
        font-weight:800!important;
        color:var(--hg-header-text)!important;
        text-align:right!important;
    }
    .hg-hs-input::placeholder{color:var(--hg-header-muted)!important;opacity:.85;font-weight:650;}
    .hg-hs-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
    .hg-hs-dropdown{
        position:absolute;
        top:calc(100% + 10px);
        right:0;
        left:0;
        z-index:1000;
        display:none;
        max-height:min(70vh,520px);
        overflow-y:auto;
        border-radius:20px;
        background:var(--hg-header-bg);
        border:1px solid var(--hg-header-border);
        box-shadow:0 26px 60px rgba(15,23,42,.20);
        backdrop-filter:var(--hg-header-blur);
        -webkit-backdrop-filter:var(--hg-header-blur);
    }
    .hg-hs-dropdown.open{display:block;}
}

@media(max-width:781px){
    .site-header{
        width:min(100vw - 14px,100%)!important;
        min-height:58px!important;
        margin:8px auto 0!important;
        border-radius:24px!important;
    }
    .header-inner{
        min-height:56px!important;
        grid-template-columns:auto minmax(0,1fr) auto!important;
        gap:8px!important;
        padding:8px!important;
    }
    .site-logo{max-width:min(var(--hg-logo-max-w,180px),42vw)!important;}
    .site-logo .custom-logo,
    .site-logo .hg-header-logo-img{max-height:min(var(--hg-logo-max-h,38px),38px)!important;}
    .logo-icon{width:38px!important;height:38px!important;flex-basis:38px!important;border-radius:14px!important;}
    .logo-text{display:none!important;}
    .site-header .nav-desktop{display:none!important;}
    .header-actions{gap:5px!important;}
    .header-actions .hg-theme-toggle{display:flex!important;}
    .header-actions .icon-btn,
    .site-header .icon-btn,
    .site-header .hg-theme-toggle{width:36px!important;height:36px!important;min-width:36px!important;border-radius:13px!important;}
    .header-actions .search-toggle-btn{display:none!important;}
    .cart-btn{display:none!important;}
    .hg-header-search{
        display:flex!important;
        align-items:center;
        gap:7px;
        min-width:0;
        height:40px;
        padding:0 13px;
        border-radius:999px;
        border:1px solid var(--hg-header-border-soft);
        background:var(--hg-header-bg-2);
        cursor:pointer;
    }
    .hg-header-search .hg-hs-ico{flex:0 0 auto;display:grid;place-items:center;color:var(--hg-header-muted);}
    .hg-header-search .hg-hs-ico svg{width:17px;height:17px;display:block;stroke:currentColor;fill:none;}
    .hg-header-search .hg-hs-input{
        flex:1 1 auto;
        min-width:0;
        width:100%;
        height:100%;
        border:0!important;
        outline:0!important;
        background:transparent!important;
        box-shadow:none!important;
        padding:0!important;
        margin:0!important;
        font-size:16px!important;
        font-weight:700!important;
        color:var(--hg-header-text)!important;
        text-align:right!important;
        cursor:pointer;
        pointer-events:none;
    }
    .hg-header-search .hg-hs-input::placeholder{color:var(--hg-header-muted)!important;opacity:.9;font-weight:600;font-size:13px!important;}
    .hg-header-search .hg-hs-dropdown{display:none!important;}
}
@media(max-width:760px){
    .site-header{color-scheme:inherit;}
    html[data-hg-theme="dark"] .site-header::before{background-color:#0f131a!important;}
    html[data-hg-theme="light"] .site-header::before{background-color:#f6f6f2!important;}
}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
    padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem) clamp(1.5rem, 4vw, 3rem);
}
.hero-inner {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-600);
    background: var(--gray-50);
    border: 0.5px solid var(--gray-100);
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 1.2rem;
    letter-spacing: 0.3px;
}
.hero-tag svg { width: 12px; height: 12px; }
.hero h1 {
    font-size: clamp(24px, 5vw, 40px);
    font-weight: 700;
    color: var(--black);
    line-height: 1.3;
    margin-bottom: 0.7rem;
    letter-spacing: -0.5px;
}
.hero h1 span { color: var(--gray-400); }
.hero-sub {
    font-size: clamp(14px, 2.5vw, 16px);
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* ═══════════════════════════════════════
   SEARCH BOX
═══════════════════════════════════════ */
/* حذف x پیشفرض مرورگر */

.search-prefix {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-400);
    pointer-events: none;
}
.search-prefix svg { width: 18px; height: 18px; }
.search-prefix-divider {
    width: 1px;
    height: 18px;
    background: var(--gray-200);
}

/* Live Dropdown */

.dropdown-header {
    padding: 10px 16px 6px;
    font-size: 11px;
    color: var(--gray-400);
    border-bottom: 0.5px solid var(--gray-50);
}
.result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 0.5px solid var(--gray-50);
    text-decoration: none;
    color: inherit;
}
.result-item:last-child { border-bottom: none; }
.result-item:hover { background: var(--off); }
.result-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    border: 0.5px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.result-thumb img { width: 100%; height: 100%; object-fit: cover; }
.result-thumb svg { width: 20px; height: 20px; stroke: var(--gray-600); }
.result-info { flex: 1; text-align: right; min-width: 0; }
.result-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.result-cat { font-size: 11px; color: var(--gray-400); margin-top: 2px; }
.result-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    white-space: nowrap;
    text-align: left;
}
.result-price span {
    font-size: 10px;
    font-weight: 400;
    color: var(--gray-400);
    display: block;
    text-align: left;
}
.dropdown-footer {
    padding: 10px 16px;
    font-size: 12px;
    color: var(--gray-400);
    text-align: center;
    border-top: 0.5px solid var(--gray-50);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.dropdown-footer:hover { color: var(--black); background: var(--off); }
.dropdown-loading,
.dropdown-empty {
    padding: 20px;
    font-size: 13px;
    color: var(--gray-400);
    text-align: center;
}