/* ============================================================
   HKDEV NAV MENU — KRISHIR HAT UI
   nav-menu.css  v3.0 (Topbar Hide Fix)
   Brand: Primary Green (#165E2E) & Secondary Red (#D85E5C)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Hind+Siliguri:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* ── Tokens ────────────────────────────────────────────────── */
:root {
    --hn-primary        : var(--krishirhat-primary, #165E2E);
    --hn-primary-dark   : var(--krishirhat-primary-dark, #10451F);
    --hn-primary-light  : var(--krishir-hat-primary-light, rgba(22, 94, 46, 0.10));
    --hn-white          : #ffffff;
    --hn-dark           : #1a1a1a;
    --hn-gray           : #6c757d;
    --hn-bg-light       : #f8f9fa;
    --hn-topbar-bg      : #ffffff;
    --hn-topbar-text    : #333333;
    --hn-topbar-accent  : var(--krishir-hat-secondary, #D85E5C);
    --hn-header-bg      : var(--krishir-hat-primary, #165E2E);
    --hn-header-text    : #ffffff;
    --hn-header-border  : rgba(255, 255, 255, 0.15);
    --hn-header-hover   : rgba(255, 255, 255, 0.12);
    --hn-header-shadow  : 0 4px 20px rgba(22, 94, 46, 0.15);
    --hn-header-h       : 70px;
    --hn-header-h-sm    : 60px;
    --hn-logo-h         : 50px;
    --hn-logo-h-sm      : 40px;
    --hn-minicart-width : 400px;
    --hn-sidebar-width  : 340px;
    --hn-topbar-h       : 36px;
    --hn-border-color   : rgba(0, 0, 0, 0.08);
    --hn-shadow-soft    : 0 8px 30px rgba(0, 0, 0, 0.08);
    --hn-ease           : cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --hn-poppins        : 'Poppins', sans-serif;
    --hn-bengali        : 'Hind Siliguri', 'Poppins', sans-serif;
    --hn-serif          : 'Playfair Display', Georgia, serif;
}

/* ── Global Reset ────────────────────────────────────────── */
.hn-topbar *, .hn-header *, .hn-sidebar *,
.hn-minicart *, .hn-search-overlay *, .hn-overlay {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.hn-no-scroll { overflow: hidden !important; }

/* ============================================================
   TOP BAR
   ============================================================ */
.hn-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--hn-topbar-h) !important;
    background: var(--hn-topbar-bg) !important;
    z-index: 10001 !important;
    font-family: var(--hn-poppins) !important;
    font-size: 12px !important;
    color: var(--hn-topbar-text) !important;
    border-bottom: 1px solid var(--hn-border-color) !important;
}
.hn-topbar-inner {
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 28px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
.hn-tb-left, .hn-tb-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.hn-tb-left i, .hn-tb-right i {
    font-size: 12px !important;
    color: var(--hn-primary) !important;
}
.hn-tb-offer {
    color: var(--hn-topbar-accent) !important;
    font-weight: 600 !important;
}
.hn-tb-sep {
    color: rgba(0,0,0,0.1) !important;
}

/* ============================================================
   MAIN HEADER
   ============================================================ */
.hn-header {
    position: fixed !important;
    top: var(--hn-topbar-h) !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--hn-header-h) !important;
    background: var(--hn-header-bg) !important;
    border-bottom: 1px solid var(--hn-header-border) !important;
    z-index: 10000 !important;
    transition: box-shadow 0.3s var(--hn-ease), background 0.3s !important;
    overflow: hidden !important;
}
body.hn-no-topbar .hn-header { top: 0 !important; }
body.hn-no-topbar { padding-top: var(--hn-header-h) !important; }

/* ✅ FIX: topbar পুরোপুরি লুকানো */
body.hn-no-topbar .hn-topbar {
    display: none !important;
}
/* অ্যাডমিন বার থাকলে */
body.admin-bar.hn-no-topbar .hn-header {
    top: 32px !important;
}

.hn-header.scrolled {
    box-shadow: var(--hn-header-shadow) !important;
    background: var(--hn-primary-dark) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: transparent !important;
}

body { padding-top: calc(var(--hn-topbar-h) + var(--hn-header-h)) !important; }
.admin-bar .hn-topbar  { top: 32px !important; }
.admin-bar .hn-header  { top: calc(32px + var(--hn-topbar-h)) !important; }

.hn-header-inner {
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 28px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    color: var(--hn-header-text) !important;
}

/* ── BD Flag Strip ────────────────────────────────────────── */
.hn-flag-strip {
    display: flex !important;
    height: 3px !important;
    width: 100% !important;
}
.hn-flag-green { flex: 1 !important; background: var(--krishirhat-primary, #165E2E) !important; }
.hn-flag-red   { flex: 1 !important; background: var(--krishirhat-accent, #D85E5C) !important; }
.hn-flag-gold  { flex: 1 !important; background: var(--krishirhat-accent-dark, #B94745) !important; }

/* ── Logo ─────────────────────────────────────────────────── */
.hn-logo {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.hn-logo a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    outline: none !important;
}
.hn-logo-img {
    max-height: var(--hn-logo-h) !important;
    max-width: 220px !important;
    display: block !important;
    object-fit: contain !important;
}
.hn-logo-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1 !important;
}
.hn-logo-text strong {
    font-family: var(--hn-serif) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: var(--hn-header-text) !important;
    letter-spacing: -0.01em !important;
    -webkit-text-fill-color: var(--hn-header-text) !important;
}
.hn-logo-text small {
    font-family: var(--hn-poppins) !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
}

/* ── Desktop Navigation ──────────────────────────────────── */
.hn-nav {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.hn-menu {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    gap: 4px !important;
}
.hn-menu li { position: relative !important; }
.hn-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    font-family: var(--hn-bengali) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}
.hn-menu > li > a:hover,
.hn-menu > li.current-menu-item > a,
.hn-menu > li.current-menu-ancestor > a {
    color: var(--hn-white) !important;
    background: var(--hn-header-hover) !important;
}
.hn-menu > li.menu-item-has-children > a::after {
    content: '\f107' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    margin-left: 4px !important;
    transition: transform 0.25s !important;
    opacity: 0.8 !important;
}
.hn-menu > li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg) !important;
    opacity: 1 !important;
}
.hn-menu .sub-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    min-width: 220px !important;
    background: var(--hn-white) !important;
    border: 1px solid var(--hn-border-color) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: all 0.3s var(--hn-ease) !important;
    box-shadow: var(--hn-shadow-soft) !important;
    z-index: 9999 !important;
}
.hn-menu > li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}
.hn-menu .sub-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    font-family: var(--hn-poppins) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--hn-dark) !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
}
.hn-menu .sub-menu a::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--hn-primary) !important;
    flex-shrink: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.2s, transform 0.2s !important;
    transform: scale(0.5) !important;
}
.hn-menu .sub-menu a:hover {
    color: var(--hn-primary) !important;
    background: var(--hn-primary-light) !important;
    padding-left: 18px !important;
}
.hn-menu .sub-menu a:hover::before {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ── Action Buttons ──────────────────────────────────────── */
.hn-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.hn-action-btn {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: var(--hn-white) !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}
.hn-action-btn:hover {
    background: var(--hn-header-hover) !important;
    transform: translateY(-2px) !important;
}

/* 🛒 Cart Trigger */
.hn-cart-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    width: auto !important;
    min-width: 48px !important;
    height: 48px !important;
    position: relative !important;
}
.hn-cart-trigger i {
    font-size: 24px !important;
}
.hn-cart-total {
    font-size: 0.85em !important;
    font-weight: 600 !important;
    color: var(--hn-white) !important;
    white-space: nowrap !important;
    margin-right: 2px !important;
}
/* Cart count badge */
.hn-cart-count {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--hn-white) !important;
    color: var(--hn-primary) !important;
    font-family: var(--hn-poppins) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    transform: scale(0) !important;
}
.hn-cart-count.has-items {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ── Hamburger ───────────────────────────────────────────── */
.hn-hamburger {
    display: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    transition: background 0.2s !important;
}
.hn-hamburger:hover { background: var(--hn-header-hover) !important; }
.hn-hamburger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: var(--hn-white) !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
}
.hn-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.hn-hamburger.open span:nth-child(2) { opacity: 0 !important; width: 0 !important; }
.hn-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

.hn-hamburger-left { display: none !important; }

/* ============================================================
   MOBILE SIDEBAR
   ============================================================ */
.hn-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(var(--hn-sidebar-width), 88vw) !important;
    background: var(--hn-white) !important;
    z-index: 10002 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(-110%) !important;
    transition: transform 0.4s var(--hn-ease) !important;
    box-shadow: 10px 0 40px rgba(0,0,0,0.1) !important;
}
.hn-sidebar.open { transform: translateX(0) !important; }

.hn-sidebar-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px !important;
    background: var(--hn-primary) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
.hn-sidebar-head .hn-logo-text strong,
.hn-sidebar-head .hn-logo-text small {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
.hn-sidebar-head .hn-close-btn {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !important;
}
.hn-sidebar-head .hn-close-btn:hover {
    background: var(--hn-white) !important;
    color: var(--hn-primary) !important;
}
.hn-sidebar-logo img { height: 40px !important; }

.hn-sidebar-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 10px 0 !important;
}
.hn-sidebar-body::-webkit-scrollbar { width: 4px !important; }
.hn-sidebar-body::-webkit-scrollbar-thumb { background: #ddd !important; border-radius: 4px !important; }

/* ── Mobile Menu ─────────────────────────────────────────── */
.hn-mobile-menu { list-style: none !important; }
.hn-mobile-menu li { border-bottom: 1px solid rgba(0,0,0,0.04) !important; }
.hn-mobile-menu > li > a {
    display: flex !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    font-family: var(--hn-bengali) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--hn-dark) !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}
.hn-mobile-menu > li > a:hover, .hn-mobile-menu > li.current-menu-item > a {
    color: var(--hn-primary) !important;
    background: var(--hn-primary-light) !important;
    padding-left: 28px !important;
}
.hn-mobile-menu li.menu-item-has-children > a::after {
    content: '\f107' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    color: var(--hn-gray) !important;
    transition: transform 0.3s !important;
}
.hn-mobile-menu li.menu-item-has-children.open > a::after {
    transform: rotate(180deg) !important;
    color: var(--hn-primary) !important;
}
.hn-mobile-menu .sub-menu {
    display: none !important;
    background: var(--hn-bg-light) !important;
    border-left: 3px solid var(--hn-primary) !important;
}
.hn-mobile-menu .sub-menu.open { display: block !important; }
.hn-mobile-menu .sub-menu a {
    display: block !important;
    padding: 12px 24px 12px 32px !important;
    font-family: var(--hn-poppins) !important;
    font-size: 14px !important;
    color: var(--hn-gray) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.03) !important;
    transition: all 0.2s !important;
}
.hn-mobile-menu .sub-menu a:hover {
    color: var(--hn-primary) !important;
    background: rgba(168, 24, 23, 0.04) !important;
}

/* ── Sidebar Inline Search ───────────────────────────────── */
.hn-sidebar-search-section {
    padding: 0 16px 12px 16px !important;
    border-bottom: 1px solid var(--hn-border-color) !important;
    margin-bottom: 8px !important;
}
.hn-sidebar-search-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background: var(--hn-bg-light) !important;
    border: 1px solid var(--hn-border-color) !important;
    border-radius: 8px !important;
    font-family: var(--hn-bengali) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--hn-dark) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.hn-sidebar-search-toggle:hover {
    background: var(--hn-primary-light) !important;
    border-color: var(--hn-primary) !important;
}
.hn-sidebar-search-toggle i {
    color: var(--hn-primary) !important;
    font-size: 16px !important;
}
.hn-sidebar-search-wrap {
    display: none !important;
    margin-top: 12px !important;
    padding: 0 !important;
}
.hn-sidebar-search-wrap.open {
    display: block !important;
}
.hn-sidebar-search-input-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--hn-white) !important;
    border: 1.5px solid var(--hn-border-color) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    transition: border-color 0.2s !important;
}
.hn-sidebar-search-input-wrap:focus-within {
    border-color: var(--hn-primary) !important;
    box-shadow: 0 0 0 3px rgba(168,24,23,0.1) !important;
}
.hn-sidebar-search-input-wrap i {
    color: var(--hn-gray) !important;
    font-size: 16px !important;
}
#hn-sidebar-search-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: var(--hn-poppins) !important;
    font-size: 15px !important;
    color: var(--hn-dark) !important;
    padding: 8px 0 !important;
    min-height: 40px !important;
}
#hn-sidebar-search-input::placeholder {
    color: var(--hn-gray) !important;
    opacity: 0.7 !important;
}
.hn-sidebar-search-close {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--hn-bg-light) !important;
    border: none !important;
    color: var(--hn-gray) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
}
.hn-sidebar-search-close:hover {
    background: var(--hn-primary) !important;
    color: var(--hn-white) !important;
}
.hn-sidebar-search-results {
    margin-top: 12px !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    background: var(--hn-white) !important;
    border-radius: 8px !important;
    border: 1px solid var(--hn-border-color) !important;
    box-shadow: var(--hn-shadow-soft) !important;
}
.hn-sidebar-search-results .hn-search-result {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--hn-border-color) !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
}
.hn-sidebar-search-results .hn-search-result:last-child {
    border-bottom: none !important;
}
.hn-sidebar-search-results .hn-search-result:hover {
    background: var(--hn-primary-light) !important;
}
.hn-sidebar-search-results .hn-sr-img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #f0f0f0 !important;
    flex-shrink: 0 !important;
}
.hn-sidebar-search-results .hn-sr-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.hn-sidebar-search-results .hn-sr-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.hn-sidebar-search-results .hn-sr-name {
    font-family: var(--hn-poppins) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--hn-dark) !important;
}
.hn-sidebar-search-results .hn-sr-price {
    font-family: var(--hn-poppins) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--hn-primary) !important;
}
.hn-sidebar-search-results .hn-sr-arrow {
    color: var(--hn-gray) !important;
    font-size: 14px !important;
    transition: transform 0.2s !important;
}
.hn-sidebar-search-results .hn-search-result:hover .hn-sr-arrow {
    transform: translateX(4px) !important;
    color: var(--hn-primary) !important;
}
.hn-sidebar-search-results .hn-search-empty {
    padding: 20px !important;
    text-align: center !important;
    color: var(--hn-gray) !important;
    font-family: var(--hn-poppins) !important;
    font-size: 14px !important;
}
.hn-sidebar-search-results .hn-search-empty i {
    margin-right: 8px !important;
    color: var(--hn-gray) !important;
}
.hn-sidebar-search-results .hn-search-loading {
    padding: 20px !important;
    text-align: center !important;
    color: var(--hn-gray) !important;
    font-family: var(--hn-poppins) !important;
    font-size: 14px !important;
}
.hn-sidebar-search-results .hn-search-loading i {
    margin-right: 8px !important;
    color: var(--hn-primary) !important;
}

/* ── Sidebar Mobile Actions ──────────────────────────────── */
.hn-sidebar-actions-mobile {
    padding: 12px 0 !important;
    border-top: 1px solid var(--hn-border-color) !important;
    margin-top: 8px !important;
}
.hn-sidebar-action-btn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px 24px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    font-family: var(--hn-bengali) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--hn-dark) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}
.hn-sidebar-action-btn:hover {
    color: var(--hn-primary) !important;
    background: var(--hn-primary-light) !important;
    padding-left: 28px !important;
}
.hn-sidebar-action-btn i {
    font-size: 18px !important;
    width: 24px !important;
    color: var(--hn-primary) !important;
}

.hn-sidebar-foot {
    padding: 20px !important;
    border-top: 1px solid var(--hn-border-color) !important;
}
.hn-sidebar-payments {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}
.hn-sidebar-payments span {
    background: var(--hn-bg-light) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-family: var(--hn-poppins) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--hn-dark) !important;
    border: 1px solid var(--hn-border-color) !important;
}
.hn-sidebar-contact-social {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--hn-border-color) !important;
}
.hn-sidebar-contact {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-bottom: 14px !important;
}
.hn-sidebar-contact span {
    font-family: var(--hn-poppins) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--hn-gray) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.hn-sidebar-contact span i {
    color: var(--hn-primary) !important;
    font-size: 14px !important;
}
.hn-sidebar-contact a {
    font-family: var(--hn-bengali) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--hn-dark) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.hn-sidebar-contact a:hover {
    color: var(--hn-primary) !important;
}
.hn-sidebar-socials {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.hn-sidebar-socials a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--hn-bg-light) !important;
    color: var(--hn-gray) !important;
    font-size: 18px !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}
.hn-sidebar-socials a:hover {
    background: var(--hn-primary) !important;
    color: var(--hn-white) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(168, 24, 23, 0.25) !important;
}

/* ============================================================
   MINI CART
   ============================================================ */
.hn-minicart {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(var(--hn-minicart-width), 95vw) !important;
    background: var(--hn-white) !important;
    z-index: 10002 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(110%) !important;
    transition: transform 0.4s var(--hn-ease) !important;
    box-shadow: -10px 0 40px rgba(0,0,0,0.1) !important;
}
.hn-minicart.open { transform: translateX(0) !important; }

.hn-minicart-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px !important;
    background: var(--hn-white) !important;
    border-bottom: 3px solid var(--hn-primary) !important;
}
.hn-minicart-head h3 {
    font-family: var(--hn-bengali) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--hn-dark) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.hn-minicart-head h3 i { color: var(--hn-primary) !important; }

.hn-minicart-items {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    background: var(--hn-bg-light) !important;
}

.hn-cart-empty {
    text-align: center !important;
    padding: 56px 20px !important;
}
.hn-cart-empty i { color: rgba(168,24,23,.2) !important; font-size: 52px !important; margin-bottom: 14px !important; }
.hn-cart-empty p { color: var(--hn-gray) !important; font-family: var(--hn-poppins) !important; }

.hn-cart-item {
    display: flex !important;
    gap: 16px !important;
    padding: 16px !important;
    border-radius: 10px !important;
    background: var(--hn-white) !important;
    margin-bottom: 12px !important;
    position: relative !important;
    border: 1px solid var(--hn-border-color) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    transition: box-shadow 0.2s !important;
}
.hn-cart-item:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important; }

.hn-ci-img {
    width: 75px !important;
    height: 75px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f0f0f0 !important;
}
.hn-ci-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.hn-ci-info { flex: 1 !important; padding-right: 24px !important; }
.hn-ci-name {
    font-family: var(--hn-poppins) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--hn-dark) !important;
    text-decoration: none !important;
    margin-bottom: 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.hn-ci-name:hover { color: var(--hn-primary) !important; }

.hn-ci-price { margin-bottom: 10px !important; font-family: var(--hn-poppins) !important; }
.hn-ci-sub { font-size: 15px !important; font-weight: 700 !important; color: var(--hn-primary) !important; }

/* Qty Display Only */
.hn-ci-qty {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border: 1px solid var(--hn-border-color) !important;
    border-radius: 6px !important;
    background: var(--hn-primary-light) !important;
}
.hn-qty-display {
    font-family: var(--hn-poppins) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--hn-primary) !important;
    line-height: 1 !important;
}

.hn-ci-remove {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(168, 24, 23, 0.1) !important;
    color: var(--hn-primary) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.hn-ci-remove:hover {
    background: var(--hn-primary) !important;
    color: var(--hn-white) !important;
    transform: rotate(90deg) !important;
}

.hn-cart-footer {
    padding: 20px !important;
    border-top: 1px solid var(--hn-border-color) !important;
    background: var(--hn-white) !important;
}
.hn-cart-fee-row, .hn-cart-total-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-family: var(--hn-poppins) !important;
}
.hn-cart-fee-row {
    font-size: 13px !important;
    color: var(--hn-gray) !important;
    margin-bottom: 8px !important;
}
.hn-cart-total-row {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--hn-dark) !important;
    margin-bottom: 20px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px dashed var(--hn-border-color) !important;
}
.hn-cart-total-price { color: var(--hn-primary) !important; }

.hn-cart-btns { display: flex !important; gap: 12px !important; }
.hn-cart-btn {
    flex: 1 !important;
    padding: 14px !important;
    border-radius: 8px !important;
    font-family: var(--hn-bengali) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.hn-cart-btn-view {
    background: var(--hn-primary-light) !important;
    color: var(--hn-primary) !important;
    border: 1px solid rgba(168, 24, 23, 0.2) !important;
}
.hn-cart-btn-view:hover { background: rgba(168, 24, 23, 0.15) !important; }
.hn-cart-btn-checkout {
    background: var(--hn-primary) !important;
    color: var(--hn-white) !important;
    box-shadow: 0 4px 15px rgba(168, 24, 23, 0.25) !important;
    border: none !important;
}
.hn-cart-btn-checkout:hover { background: var(--hn-primary-dark) !important; transform: translateY(-2px) !important; }

/* ============================================================
   SEARCH OVERLAY (Desktop)
   ============================================================ */
.hn-search-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10003 !important;
    background: rgba(26, 26, 26, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    justify-content: center !important;
    padding-top: 15vh !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s !important;
}
.hn-search-overlay.open { opacity: 1 !important; visibility: visible !important; }

.hn-search-box {
    width: min(720px, 90vw) !important;
    transform: translateY(-20px) !important;
    transition: transform 0.4s var(--hn-ease) !important;
}
.hn-search-overlay.open .hn-search-box { transform: translateY(0) !important; }

.hn-search-input-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    border-bottom: 2px solid var(--hn-primary) !important;
    padding-bottom: 16px !important;
    margin-bottom: 24px !important;
}
.hn-search-input-wrap > i { font-size: 24px !important; color: var(--hn-primary) !important; }
#hn-search-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-family: var(--hn-poppins) !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    color: var(--hn-white) !important;
}
.hn-search-close-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--hn-white) !important;
    border: none !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.hn-search-close-btn:hover { background: var(--hn-primary) !important; transform: rotate(90deg) !important; }

.hn-search-results {
    max-height: 60vh !important;
    overflow-y: auto !important;
}
.hn-search-results .hn-search-result {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
}
.hn-search-results .hn-search-result:hover {
    background: rgba(255,255,255,0.1) !important;
}
.hn-search-results .hn-sr-img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.1) !important;
    flex-shrink: 0 !important;
}
.hn-search-results .hn-sr-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.hn-search-results .hn-sr-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.hn-search-results .hn-sr-name {
    font-family: var(--hn-poppins) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--hn-white) !important;
}
.hn-search-results .hn-sr-price {
    font-family: var(--hn-poppins) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--hn-primary) !important;
}
.hn-search-results .hn-sr-arrow {
    color: rgba(255,255,255,0.4) !important;
    font-size: 16px !important;
    transition: transform 0.2s !important;
}
.hn-search-results .hn-search-result:hover .hn-sr-arrow {
    transform: translateX(4px) !important;
    color: var(--hn-white) !important;
}
.hn-search-results .hn-search-empty {
    padding: 40px !important;
    text-align: center !important;
    color: rgba(255,255,255,0.6) !important;
    font-family: var(--hn-poppins) !important;
    font-size: 16px !important;
}
.hn-search-results .hn-search-empty i {
    margin-right: 10px !important;
    color: var(--hn-primary) !important;
}
.hn-search-results .hn-search-loading {
    padding: 40px !important;
    text-align: center !important;
    color: rgba(255,255,255,0.6) !important;
    font-family: var(--hn-poppins) !important;
    font-size: 16px !important;
}
.hn-search-results .hn-search-loading i {
    margin-right: 10px !important;
    color: var(--hn-primary) !important;
}

/* ── Shared ──────────────────────────────────────────────── */
.hn-close-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: var(--hn-bg-light) !important;
    color: var(--hn-dark) !important;
    border: 1px solid var(--hn-border-color) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.hn-close-btn:hover { background: var(--hn-primary) !important; color: var(--hn-white) !important; }

.hn-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 10001 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s !important;
}
.hn-overlay.open { opacity: 1 !important; visibility: visible !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .hn-nav { display: none !important; }
    .hn-hamburger-left { display: flex !important; justify-self: start !important; }
    .hn-actions .hn-hamburger { display: none !important; }
    .hn-action-search,
    .hn-action-account,
    .hn-action-wishlist {
        display: none !important;
    }
    .hn-header-inner {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        gap: 12px !important;
        align-items: center !important;
    }
    .hn-logo { justify-self: center !important; margin: 0 auto !important; }
    .hn-actions { justify-self: end !important; }
    .hn-search-overlay { display: none !important; }
}

@media (max-width: 768px) {
    :root {
        --hn-header-h : var(--hn-header-h-sm);
        --hn-topbar-h : 32px;
    }
    .hn-header-inner { padding: 0 16px !important; gap: 12px !important; }
    .hn-topbar-inner { padding: 0 16px !important; font-size: 11px !important; }
    .hn-logo-text strong { font-size: 1.4rem !important; }
    .hn-cart-btns { flex-direction: column !important; }
    .hn-actions { gap: 4px !important; }
    .hn-cart-trigger {
        gap: 4px !important;
        padding: 0 6px !important;
    }
    .hn-cart-total { display: none !important; }
    .hn-sidebar-search-section { padding: 0 12px 10px 12px !important; }
    .hn-sidebar-search-toggle { font-size: 14px !important; padding: 10px 14px !important; }
    #hn-sidebar-search-input { font-size: 14px !important; }
    .hn-sidebar-search-results .hn-sr-name { font-size: 13px !important; }
    .hn-sidebar-search-results .hn-sr-price { font-size: 12px !important; }
    .hn-sidebar-search-results .hn-sr-img { width: 38px !important; height: 38px !important; }
}

@media (max-width: 480px) {
    .hn-action-btn { width: 38px !important; height: 38px !important; font-size: 17px !important; }
    .hn-cart-trigger { gap: 5px !important; padding: 0 8px !important; min-width: 44px !important; height: 44px !important; }
    .hn-cart-trigger i { font-size: 30px !important; }
    .hn-cart-count { top: -5px !important; right: -5px !important; min-width: 20px !important; height: 20px !important; font-size: 10px !important; }
    .hn-wishlist { display: none !important; }
    .hn-logo-text small { display: none !important; }
    .hn-sidebar-search-toggle { font-size: 13px !important; padding: 8px 12px !important; }
    #hn-sidebar-search-input { font-size: 13px !important; min-height: 34px !important; }
    .hn-sidebar-search-results .hn-sr-name { font-size: 12px !important; }
    .hn-sidebar-search-results .hn-sr-price { font-size: 11px !important; }
    .hn-sidebar-search-results .hn-sr-img { width: 32px !important; height: 32px !important; }
    .hn-sidebar-search-results .hn-search-result { padding: 10px 12px !important; gap: 10px !important; }
}

@media (max-width: 400px) {
    .hn-action-btn { width: 34px !important; height: 34px !important; font-size: 15px !important; }
    .hn-cart-trigger { gap: 4px !important; padding: 0 6px !important; min-width: 40px !important; height: 40px !important; }
    .hn-cart-trigger i { font-size: 20px !important; }
    .hn-cart-count { top: -4px !important; right: -4px !important; min-width: 18px !important; height: 18px !important; font-size: 9px !important; }
}

@media (min-width: 1025px) {
    .hn-sidebar-search-section { display: none !important; }
    .hn-sidebar-actions-mobile { display: none !important; }










/* ── Header Scroll Fix ────────────────────────────────── */
.hn-header {
    /* সব অবস্থায় টপ ঠিক রাখার জন্য */
    position: fixed !important;
    top: 0 !important;                     /* ডিফল্ট টপ 0 */
    left: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    transform: translateZ(0);              /* GPU acceleration – flicker দূর করে */
    will-change: transform;                /* স্ক্রলের সময় লাফাবে না */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* যখন টপবার দেখানো হবে */
body:not(.hn-no-topbar) .hn-header {
    top: var(--hn-topbar-h) !important;    /* টপবার থাকলে সেটি ছেড়ে দাও */
}

/* টপবার হাইড থাকলে */
body.hn-no-topbar .hn-header {
    top: 0 !important;
}

/* অ্যাডমিন বার অ্যাকাউন্টেড */
body.admin-bar .hn-header {
    top: 32px !important;
}
body.admin-bar:not(.hn-no-topbar) .hn-header {
    top: calc(32px + var(--hn-topbar-h)) !important;
}
body.admin-bar.hn-no-topbar .hn-header {
    top: 32px !important;
}

/* বডির প্যাডিং পুনরায় নিশ্চিত করো */
body {
    padding-top: calc(var(--hn-topbar-h) + var(--hn-header-h)) !important;
}
body.hn-no-topbar {
    padding-top: var(--hn-header-h) !important;
}
}






/* ==========================================
   মোবাইল সহ সর্বত্র হেডার পজিশন পারমানেন্ট ফিক্স
   ========================================== */
#hn-header,
.hn-header {
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    
    /* সব ট্রানজিশন ও ট্রান্সফর্ম নিষ্ক্রিয় – স্ক্রলে নড়বে না */
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
    
    /* ডিফল্ট – টপবার হাইড থাকলে */
    top: 0 !important;
}

/* যদি টপবার চালু থাকে */
body:not(.hn-no-topbar) #hn-header,
body:not(.hn-no-topbar) .hn-header {
    top: var(--hn-topbar-h) !important;
}

/* টপবার বন্ধ থাকলে (ডাবল লক) */
body.hn-no-topbar #hn-header,
body.hn-no-topbar .hn-header {
    top: 0 !important;
}

/* অ্যাডমিন বার */
body.admin-bar #hn-header,
body.admin-bar .hn-header {
    top: 32px !important;
}
body.admin-bar:not(.hn-no-topbar) #hn-header,
body.admin-bar:not(.hn-no-topbar) .hn-header {
    top: calc(32px + var(--hn-topbar-h)) !important;
}
body.admin-bar.hn-no-topbar #hn-header,
body.admin-bar.hn-no-topbar .hn-header {
    top: 32px !important;
}

/* মোবাইলের জন্য বাড়তি জোর (1024px পর্যন্ত) */
@media (max-width: 1024px) {
    #hn-header,
    .hn-header,
    body:not(.hn-no-topbar) #hn-header,
    body.hn-no-topbar #hn-header {
        /* আবারও সব কিছু ওভাররাইড */
        position: fixed !important;
        top: 0 !important;
        transition: none !important;
        transform: none !important;
    }
    body:not(.hn-no-topbar) #hn-header,
    body:not(.hn-no-topbar) .hn-header {
        top: var(--hn-topbar-h) !important;
    }
    body.admin-bar #hn-header {
        top: 32px !important;
    }
    body.admin-bar:not(.hn-no-topbar) #hn-header {
        top: calc(32px + var(--hn-topbar-h)) !important;
    }
    
    /* বডি প্যাডিং নিশ্চিত করো */
    body {
        padding-top: calc(var(--hn-topbar-h) + var(--hn-header-h)) !important;
    }
    body.hn-no-topbar {
        padding-top: var(--hn-header-h) !important;
    }
}