/* ============================================================
   HKDEV Nav Menu — Style Bangla BD
   nav-menu.css  v1.0
   ============================================================ */

@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 — overridden dynamically via wp_head CSS block ─── */
:root {
    /* Brand colors — set from Admin Panel → Colors */
    --hn-green      : #006747;
    --hn-green-dk   : #004d35;
    --hn-green-bg   : rgba(0,103,71,.08);
    --hn-red        : #DA291C;
    --hn-red-bg     : rgba(218,41,28,.08);
    --hn-gold       : #D4AF37;
    /* Topbar colors */
    --hn-topbar-bg    : #006747;
    --hn-topbar-text  : rgba(255,255,255,.88);
    --hn-topbar-offer : #D4AF37;
    /* Sizes — set from Admin Panel → Header & Logo */
    --hn-header-h     : 70px;
    --hn-header-h-sm  : 58px;
    --hn-logo-h       : 52px;
    --hn-logo-h-sm    : 40px;
    --hn-minicart-width: 420px;
    --hn-sidebar-width : 340px;
    /* Static */
    --hn-dark       : #1a1009;
    --hn-white      : #ffffff;
    --hn-cream      : #fdfaf6;
    --hn-gray       : #7a6a58;
    --hn-border     : rgba(0,103,71,.13);
    --hn-shadow     : 0 8px 32px rgba(0,0,0,.10);
    --hn-ease       : cubic-bezier(.25,.46,.45,.94);
    --hn-poppins    : 'Poppins', sans-serif;
    --hn-bengali    : 'Hind Siliguri', 'Poppins', sans-serif;
    --hn-serif      : 'Playfair Display', Georgia, serif;
    --hn-topbar-h   : 36px;
}

/* ── Global reset inside our elements ────────────────────── */
.hn-topbar *, .hn-header *, .hn-sidebar *,
.hn-minicart *, .hn-search-overlay *, .hn-overlay {
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

body.hn-no-scroll { overflow: hidden !important; }

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

/* ============================================================
   MAIN HEADER
   ============================================================ */
.hn-header {
    position        : fixed;
    top             : var(--hn-topbar-h);
    left            : 0;
    width           : 100%;
    height          : var(--hn-header-h);
    background      : var(--hn-white);
    border-bottom   : 1px solid var(--hn-border);
    z-index         : 10000;
    transition      : box-shadow .3s var(--hn-ease);
    overflow        : hidden;
}
/* When topbar is hidden, header moves to top */
body.hn-no-topbar .hn-header { top: 0 !important; }
body.hn-no-topbar              { padding-top: var(--hn-header-h) !important; }
.hn-header.scrolled {
    box-shadow          : var(--hn-shadow);
    background          : rgba(255,255,255,.97);
    backdrop-filter     : blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Push page content below topbar + header */
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;
    margin          : 0 auto;
    padding         : 0 28px;
    height          : 100%;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 20px;
}

/* Bangladesh flag strip */
.hn-flag-strip {
    display : flex;
    height  : 3px;
    width   : 100%;
}
.hn-flag-green { flex: 1; background: var(--hn-green); }
.hn-flag-red   { flex: 1; background: var(--hn-red);   }
.hn-flag-gold  { flex: 1; background: var(--hn-gold);  }

/* ── Logo ─────────────────────────────────────────────────── */
.hn-logo {
    flex-shrink : 0;
    overflow    : hidden;          /* clips any overflow */
    max-height  : var(--hn-header-h);
    display     : flex;
    align-items : center;
}
.hn-logo a {
    display         : flex;
    align-items     : center;
    text-decoration : none;
    outline         : none;
    border          : none;
    overflow        : hidden;
    max-height      : var(--hn-header-h);
}
.hn-logo-img {
    max-height : var(--hn-logo-h);   /* controlled from Admin Panel */
    max-width  : 220px;
    width      : auto;
    height     : auto;
    display    : block;
    object-fit : contain;
}
@media (max-width: 768px) {
    .hn-logo-img { max-height: var(--hn-logo-h-sm); max-width: 170px; }
}
@media (max-width: 480px) {
    .hn-logo-img { max-height: var(--hn-logo-h-sm); max-width: 140px; }
}

/* Text logo (when no image) */
.hn-logo-text {
    display        : flex;
    flex-direction : column;
    gap            : 2px;
    line-height    : 1;
}
.hn-logo-text strong {
    font-family    : var(--hn-serif);
    font-size      : 1.6rem;
    font-weight    : 700;
    color          : var(--hn-green) !important;
    display        : block;
    letter-spacing : -.01em;
    line-height    : 1;
    /* Guarantee visibility against any theme override */
    -webkit-text-fill-color : var(--hn-green) !important;
    text-shadow    : none !important;
    background     : none !important;
}
.hn-logo-text small {
    font-family    : var(--hn-poppins);
    font-size      : .58rem;
    font-weight    : 700;
    color          : var(--hn-red) !important;
    -webkit-text-fill-color: var(--hn-red) !important;
    letter-spacing : .26em;
    text-transform : uppercase;
    display        : block;
    line-height    : 1;
    background     : none !important;
}
/* Also protect sidebar logo text */
.hn-sidebar-logo .hn-logo-text strong { font-size: 1.3rem; }
.hn-sidebar-logo .hn-logo-text small  { font-size: .55rem; }

/* ── Desktop Navigation ───────────────────────────────────── */
.hn-nav {
    flex            : 1;
    display         : flex;
    justify-content : center;
    align-items     : center;
}

/* Menu list */
.hn-menu {
    display     : flex;
    align-items : center;
    list-style  : none;
    gap         : 2px;
    margin      : 0;
    padding     : 0;
}
.hn-menu li {
    position   : relative;
    list-style : none;
}

/* Menu links */
.hn-menu > li > a {
    display         : flex;
    align-items     : center;
    gap             : 4px;
    padding         : 8px 14px;
    font-family     : var(--hn-bengali);
    font-size       : 13.5px;
    font-weight     : 500;
    color           : #3a2e24;
    text-decoration : none;
    border-radius   : 8px;
    white-space     : nowrap;
    transition      : background .2s, color .2s;
}
.hn-menu > li > a:hover,
.hn-menu > li.current-menu-item > a,
.hn-menu > li.current-menu-ancestor > a {
    color      : var(--hn-green);
    background : var(--hn-green-bg);
}

/* Dropdown caret */
.hn-menu > li.menu-item-has-children > a::after {
    content      : '\f107';
    font-family  : 'Font Awesome 6 Free';
    font-weight  : 900;
    font-size    : 10px;
    margin-left  : 3px;
    transition   : transform .25s;
}
.hn-menu > li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* Dropdown sub-menu */
.hn-menu .sub-menu {
    position      : absolute;
    top           : calc(100% + 6px);
    left          : 50%;
    transform     : translateX(-50%) translateY(8px);
    min-width     : 210px;
    background    : var(--hn-white);
    border        : 1px solid var(--hn-border);
    border-radius : 14px;
    padding       : 8px;
    list-style    : none;
    opacity       : 0;
    visibility    : hidden;
    pointer-events: none;
    transition    : opacity .25s, transform .25s, visibility .25s;
    box-shadow    : 0 12px 40px rgba(0,0,0,.12);
    z-index       : 9999;
}
.hn-menu > li:hover > .sub-menu {
    opacity       : 1;
    visibility    : visible;
    pointer-events: auto;
    transform     : translateX(-50%) translateY(0);
}
.hn-menu .sub-menu li { list-style: none; }
.hn-menu .sub-menu a {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    padding         : 9px 14px;
    font-family     : var(--hn-poppins);
    font-size       : 13px;
    font-weight     : 400;
    color           : #3a2e24;
    text-decoration : none;
    border-radius   : 8px;
    transition      : background .18s, color .18s, padding-left .18s;
}
.hn-menu .sub-menu a::before {
    content      : '';
    width        : 5px;
    height       : 5px;
    border-radius: 50%;
    background   : var(--hn-gold);
    flex-shrink  : 0;
    opacity      : 0;
    transition   : opacity .18s;
}
.hn-menu .sub-menu a:hover {
    color          : var(--hn-green);
    background     : var(--hn-green-bg);
    padding-left   : 18px;
}
.hn-menu .sub-menu a:hover::before { opacity: 1; }

/* ── Action Buttons ───────────────────────────────────────── */
.hn-actions {
    display     : flex;
    align-items : center;
    gap         : 4px;
    flex-shrink : 0;
}

.hn-action-btn {
    position        : relative;
    width           : 42px;
    height          : 42px;
    border-radius   : 10px;
    border          : none;
    background      : transparent;
    color           : #3a2e24;
    font-size       : 17px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    text-decoration : none;
    outline         : none;
    box-shadow      : none;
    transition      : background .2s, color .2s, transform .18s;
    flex-shrink     : 0;
}
.hn-action-btn:hover {
    background : var(--hn-green-bg);
    color      : var(--hn-green);
    transform  : translateY(-1px);
}
.hn-wishlist:hover {
    background : var(--hn-red-bg);
    color      : var(--hn-red);
}

/* Cart badge */
.hn-cart-count {
    position        : absolute;
    top             : 3px;
    right           : 3px;
    min-width       : 17px;
    height          : 17px;
    padding         : 0 4px;
    border-radius   : 20px;
    background      : var(--hn-green);
    color           : var(--hn-white);
    font-family     : var(--hn-poppins);
    font-size       : 9px;
    font-weight     : 700;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border          : 2px solid var(--hn-white);
    line-height     : 1;
    opacity         : 0;
    transform       : scale(0);
    transition      : opacity .2s, transform .2s;
}
.hn-cart-count.has-items { opacity: 1; transform: scale(1); }

/* Hamburger */
.hn-hamburger {
    display         : none;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    gap             : 5px;
    width           : 42px;
    height          : 42px;
    border          : none;
    background      : transparent;
    cursor          : pointer;
    border-radius   : 10px;
    padding         : 10px;
    outline         : none;
    transition      : background .2s;
}
.hn-hamburger:hover { background: var(--hn-green-bg); }
.hn-hamburger span {
    display       : block;
    width         : 20px;
    height        : 2px;
    background    : #3a2e24;
    border-radius : 2px;
    transition    : transform .3s, opacity .3s, width .3s;
}
.hn-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hn-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.hn-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

/* Sidebar head */
.hn-sidebar-head {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 16px 20px;
    border-bottom   : 1px solid var(--hn-border);
    flex-shrink     : 0;
}
.hn-sidebar-logo {
    text-decoration : none;
    display         : flex;
    align-items     : center;
}
.hn-sidebar-logo img { height: 40px; width: auto; display: block; }

/* Sidebar body */
.hn-sidebar-body {
    flex       : 1;
    overflow-y : auto;
    padding    : 8px 0;
}
.hn-sidebar-body::-webkit-scrollbar { width: 3px; }
.hn-sidebar-body::-webkit-scrollbar-thumb { background: var(--hn-border); border-radius: 3px; }

/* Mobile menu */
.hn-mobile-menu {
    list-style : none;
    margin     : 0;
    padding    : 0;
}
.hn-mobile-menu li {
    list-style  : none;
    position    : relative;
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.hn-mobile-menu > li > a {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 14px 22px;
    font-family     : var(--hn-bengali);
    font-size       : 15px;
    font-weight     : 500;
    color           : var(--hn-dark);
    text-decoration : none;
    transition      : color .2s, background .2s, padding-left .2s;
}
.hn-mobile-menu > li > a:hover {
    color          : var(--hn-green);
    background     : var(--hn-green-bg);
    padding-left   : 28px;
}
.hn-mobile-menu > li.current-menu-item > a {
    color       : var(--hn-green);
    font-weight : 700;
}

/* Mobile submenu toggle arrow */
.hn-mobile-menu li.menu-item-has-children > a::after {
    content     : '\f107';
    font-family : 'Font Awesome 6 Free';
    font-weight : 900;
    font-size   : 12px;
    color       : var(--hn-gray);
    transition  : transform .25s;
}
.hn-mobile-menu li.menu-item-has-children.open > a::after {
    transform : rotate(180deg);
    color     : var(--hn-green);
}

/* Mobile sub-menu */
.hn-mobile-menu .sub-menu {
    display      : none;
    list-style   : none;
    margin       : 0;
    padding      : 0;
    background   : var(--hn-cream);
    border-left  : 3px solid var(--hn-gold);
}
.hn-mobile-menu .sub-menu.open { display: block; }
.hn-mobile-menu .sub-menu a {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    padding         : 12px 22px 12px 30px;
    font-family     : var(--hn-poppins);
    font-size       : 13.5px;
    font-weight     : 400;
    color           : var(--hn-gray);
    text-decoration : none;
    border-bottom   : 1px solid rgba(0,0,0,.04);
    transition      : color .2s, background .2s;
}
.hn-mobile-menu .sub-menu a:hover {
    color      : var(--hn-green);
    background : var(--hn-green-bg);
}

/* Sidebar foot */
.hn-sidebar-foot {
    padding     : 16px 20px;
    border-top  : 1px solid var(--hn-border);
    flex-shrink : 0;
}
.hn-sidebar-cta {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    width           : 100%;
    padding         : 13px;
    border-radius   : 12px;
    background      : var(--hn-green);
    color           : var(--hn-white);
    font-family     : var(--hn-bengali);
    font-size       : 14px;
    font-weight     : 600;
    text-decoration : none;
    transition      : background .2s, transform .18s;
    margin-bottom   : 12px;
    border          : none;
    box-shadow      : 0 4px 16px rgba(0,103,71,.3);
}
.hn-sidebar-cta:hover { background: var(--hn-green-dk); transform: translateY(-1px); }

.hn-sidebar-payments {
    display         : flex;
    justify-content : center;
    gap             : 8px;
    flex-wrap       : wrap;
}
.hn-sidebar-payments span {
    padding       : 4px 10px;
    border-radius : 6px;
    background    : var(--hn-cream);
    border        : 1px solid var(--hn-border);
    font-family   : var(--hn-poppins);
    font-size     : 11px;
    font-weight   : 700;
    color         : var(--hn-gray);
}

/* ── Shared close button ──────────────────────────────────── */
.hn-close-btn {
    width           : 36px;
    height          : 36px;
    min-width       : 36px;
    border-radius   : 8px;
    border          : none;
    background      : var(--hn-red-bg);
    color           : var(--hn-red);
    font-size       : 16px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    outline         : none;
    transition      : background .2s, transform .2s;
}
.hn-close-btn:hover { background: var(--hn-red); color: var(--hn-white); transform: rotate(90deg); }

/* ============================================================
   MINI CART
   ============================================================ */
.hn-minicart {
    position        : fixed;
    top             : 0;
    right           : 0;
    bottom          : 0;
    width           : min(var(--hn-minicart-width), 96vw);
    background      : var(--hn-white);
    z-index         : 10002;
    display         : flex;
    flex-direction  : column;
    transform       : translateX(110%);
    transition      : transform .38s var(--hn-ease);
    box-shadow      : -12px 0 48px rgba(0,0,0,.14);
}
.hn-minicart.open { transform: translateX(0); }

.hn-minicart-head {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 18px 20px;
    border-bottom   : 3px solid var(--hn-green);
    flex-shrink     : 0;
}
.hn-minicart-head h3 {
    display     : flex;
    align-items : center;
    gap         : 8px;
    font-family : var(--hn-bengali);
    font-size   : 16px;
    font-weight : 700;
    color       : var(--hn-dark);
}
.hn-minicart-head h3 i { color: var(--hn-green); }

.hn-minicart-items {
    flex       : 1;
    overflow-y : auto;
    padding    : 14px;
}
.hn-minicart-items::-webkit-scrollbar { width: 3px; }
.hn-minicart-items::-webkit-scrollbar-thumb { background: var(--hn-border); border-radius: 3px; }

/* Empty cart */
.hn-cart-empty {
    text-align  : center;
    padding     : 56px 20px;
    font-family : var(--hn-poppins);
}
.hn-cart-empty i { font-size: 52px; color: rgba(0,103,71,.2); display: block; margin-bottom: 14px; }
.hn-cart-empty p { font-size: 14px; color: var(--hn-gray); margin-bottom: 18px; }
.hn-empty-shop-btn {
    display         : inline-block;
    padding         : 10px 24px;
    border-radius   : 50px;
    background      : var(--hn-green);
    color           : var(--hn-white);
    font-family     : var(--hn-bengali);
    font-size       : 13px;
    font-weight     : 600;
    text-decoration : none;
    transition      : background .2s;
    border          : none;
}
.hn-empty-shop-btn:hover { background: var(--hn-green-dk); }

/* Cart item */
.hn-cart-item {
    display       : flex;
    gap           : 12px;
    padding       : 12px;
    border-radius : 12px;
    border        : 1px solid var(--hn-border);
    background    : var(--hn-cream);
    margin-bottom : 10px;
    position      : relative;
    transition    : box-shadow .2s;
}
.hn-cart-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }

.hn-ci-img {
    width         : 72px;
    height        : 88px;
    border-radius : 8px;
    overflow      : hidden;
    flex-shrink   : 0;
    background    : #ede8e1;
    display       : block;
}
.hn-ci-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hn-ci-info { flex: 1; min-width: 0; padding-right: 20px; }

.hn-ci-name {
    display         : block;
    font-family     : var(--hn-poppins);
    font-size       : 13px;
    font-weight     : 600;
    color           : var(--hn-dark);
    text-decoration : none;
    line-height     : 1.4;
    margin-bottom   : 5px;
    display         : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow        : hidden;
}
.hn-ci-name:hover { color: var(--hn-green); }

.hn-ci-price {
    display     : flex;
    align-items : center;
    gap         : 8px;
    margin-bottom: 8px;
    flex-wrap   : wrap;
}
.hn-ci-unit {
    font-family : var(--hn-poppins);
    font-size   : 12px;
    color       : var(--hn-gray);
}
.hn-ci-sub {
    font-family : var(--hn-poppins);
    font-size   : 14px;
    font-weight : 700;
    color       : var(--hn-green);
}

/* Qty */
.hn-ci-qty {
    display       : inline-flex;
    align-items   : center;
    background    : var(--hn-white);
    border        : 1.5px solid var(--hn-border);
    border-radius : 50px;
    overflow      : hidden;
}
.hn-qty-btn {
    width           : 28px;
    height          : 28px;
    border          : none;
    background      : transparent;
    color           : var(--hn-green);
    font-size       : 11px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    outline         : none;
    transition      : background .18s;
}
.hn-qty-btn:hover { background: var(--hn-green); color: var(--hn-white); }
.hn-qty-val {
    width          : 36px;
    height         : 28px;
    border         : none;
    border-left    : 1px solid var(--hn-border);
    border-right   : 1px solid var(--hn-border);
    background     : transparent;
    text-align     : center;
    font-family    : var(--hn-poppins);
    font-size      : 13px;
    font-weight    : 700;
    color          : var(--hn-dark);
    outline        : none;
    pointer-events : none;
}

/* Cart item removing animation */
.hn-cart-item {
    transition : opacity .25s, transform .25s, box-shadow .2s;
}

/* Remove */
.hn-ci-remove {
    position        : absolute;
    top             : 10px;
    right           : 10px;
    width           : 24px;
    height          : 24px;
    border-radius   : 50%;
    background      : var(--hn-red-bg);
    color           : var(--hn-red);
    font-size       : 12px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    text-decoration : none;
    border          : none;
    transition      : background .18s, transform .18s;
}
.hn-ci-remove:hover { background: var(--hn-red); color: var(--hn-white); transform: scale(1.1); }

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

.hn-cart-btns { display: flex; gap: 10px; }
.hn-cart-btn {
    flex            : 1;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 13px 12px;
    border-radius   : 50px;
    font-family     : var(--hn-bengali);
    font-size       : 13px;
    font-weight     : 600;
    text-decoration : none;
    transition      : background .2s, transform .18s;
    border          : none;
    cursor          : pointer;
    white-space     : nowrap;
}
.hn-cart-btn:hover { transform: translateY(-1px); }
.hn-cart-btn-view {
    background : var(--hn-green-bg);
    color      : var(--hn-green);
    border     : 1.5px solid var(--hn-green);
}
.hn-cart-btn-view:hover { background: var(--hn-green-bg); }
.hn-cart-btn-checkout {
    background : var(--hn-green);
    color      : var(--hn-white);
    box-shadow : 0 4px 16px rgba(0,103,71,.3);
}
.hn-cart-btn-checkout:hover { background: var(--hn-green-dk); color: var(--hn-white); }

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.hn-search-overlay {
    position        : fixed;
    inset           : 0;
    z-index         : 10003;
    background      : rgba(20,10,5,.93);
    backdrop-filter : blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display         : flex;
    align-items     : flex-start;
    justify-content : center;
    padding-top     : 14vh;
    opacity         : 0;
    visibility      : hidden;
    transition      : opacity .3s, visibility .3s;
}
.hn-search-overlay.open { opacity: 1; visibility: visible; }

.hn-search-box {
    width      : min(680px, 92vw);
    position   : relative;
    transform  : translateY(-14px);
    transition : transform .35s var(--hn-ease);
}
.hn-search-overlay.open .hn-search-box { transform: translateY(0); }

.hn-search-input-wrap {
    display         : flex;
    align-items     : center;
    gap             : 12px;
    border-bottom   : 2px solid var(--hn-gold);
    padding-bottom  : 14px;
    margin-bottom   : 16px;
    color           : rgba(255,255,255,.5);
}
.hn-search-input-wrap > i { font-size: 20px; flex-shrink: 0; }

#hn-search-input {
    flex        : 1;
    background  : transparent;
    border      : none;
    outline     : none;
    font-family : var(--hn-bengali);
    font-size   : 26px;
    font-weight : 600;
    color       : var(--hn-white);
    padding     : 0;
    margin      : 0;
    width       : 100%;
}
#hn-search-input::placeholder { color: rgba(255,255,255,.3); }

.hn-search-close-btn {
    width           : 36px;
    height          : 36px;
    border-radius   : 8px;
    background      : rgba(218,41,28,.15);
    color           : var(--hn-red);
    border          : none;
    font-size       : 16px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    outline         : none;
    flex-shrink     : 0;
    transition      : background .18s;
}
.hn-search-close-btn:hover { background: var(--hn-red); color: var(--hn-white); }

.hn-search-results {
    background    : rgba(255,255,255,.04);
    border-radius : 16px;
    border        : 1px solid rgba(212,175,55,.18);
    overflow      : hidden;
    max-height    : 50vh;
    overflow-y    : auto;
}
.hn-search-results::-webkit-scrollbar { width: 3px; }
.hn-search-results::-webkit-scrollbar-thumb { background: rgba(212,175,55,.3); border-radius: 3px; }

/* Search result item */
.hn-search-result {
    display         : flex;
    align-items     : center;
    gap             : 14px;
    padding         : 12px 16px;
    border-bottom   : 1px solid rgba(255,255,255,.06);
    text-decoration : none;
    transition      : background .18s;
}
.hn-search-result:last-child { border-bottom: none; }
.hn-search-result:hover { background: rgba(212,175,55,.08); }

.hn-sr-img {
    width         : 54px;
    height        : 54px;
    border-radius : 10px;
    overflow      : hidden;
    flex-shrink   : 0;
    background    : rgba(255,255,255,.06);
    display       : flex;
    align-items   : center;
    justify-content: center;
    color         : rgba(255,255,255,.3);
    font-size     : 20px;
}
.hn-sr-img img { width:100%; height:100%; object-fit:cover; display:block; }

.hn-sr-info { flex: 1; min-width: 0; }
.hn-sr-name {
    display         : block;
    font-family     : var(--hn-poppins);
    font-size       : 14px;
    font-weight     : 600;
    color           : var(--hn-white);
    margin-bottom   : 3px;
    white-space     : nowrap;
    overflow        : hidden;
    text-overflow   : ellipsis;
}
.hn-sr-price {
    font-family : var(--hn-poppins);
    font-size   : 13px;
    font-weight : 700;
    color       : var(--hn-gold);
}
.hn-sr-arrow {
    color      : rgba(255,255,255,.25);
    font-size  : 13px;
    flex-shrink: 0;
    transition : color .18s, transform .18s;
}
.hn-search-result:hover .hn-sr-arrow { color: var(--hn-gold); transform: translateX(3px); }

/* No result / loading */
.hn-search-loading, .hn-search-empty {
    text-align  : center;
    padding     : 30px 20px;
    font-family : var(--hn-bengali);
    font-size   : 14px;
    color       : rgba(255,255,255,.4);
    display     : flex;
    flex-direction: column;
    align-items : center;
    gap         : 10px;
}
.hn-search-loading i { color: var(--hn-gold); font-size: 22px; }
.hn-search-empty   i { font-size: 32px; opacity: .3; }

/* ============================================================
   OVERLAY (behind sidebars)
   ============================================================ */
.hn-overlay {
    position        : fixed;
    inset           : 0;
    background      : rgba(0,0,0,.5);
    backdrop-filter : blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index         : 10001;
    opacity         : 0;
    visibility      : hidden;
    transition      : opacity .35s, visibility .35s;
}
.hn-overlay.open { opacity: 1; visibility: visible; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .hn-nav       { display: none; }
    .hn-hamburger { display: flex; }
}
@media (max-width: 768px) {
    :root {
        --hn-header-h  : var(--hn-header-h-sm);
        --hn-topbar-h  : 32px;
    }
    .hn-header-inner { padding: 0 16px; }
    .hn-topbar-inner { padding: 0 16px; font-size: 11px; }
    .hn-logo-text strong { font-size: 1.3rem; }
    .hn-search-overlay { padding-top: 10vh; }
    #hn-search-input   { font-size: 20px; }
    .hn-cart-btns      { flex-direction: column; }
}
@media (max-width: 480px) {
    .hn-header-inner { padding: 0 12px; gap: 6px; }
    .hn-action-btn   { width: 36px; height: 36px; font-size: 15px; }
    .hn-wishlist     { display: none; }
}

/* Utility */
@media (max-width: 640px) { .hide-sm { display: none !important; } }