.header-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
    user-select: none;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  }
  .header-brand-logo:hover {
    opacity: 0.92;
    transform: translateY(-1px);
  }
  .brand-logo-media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .brand-logo-img {
    max-height: 42px;
    max-width: 170px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.04));
    transition: transform 0.2s ease;
  }
  .header-brand-logo:hover .brand-logo-img {
    transform: scale(1.02);
  }
  .brand-logo-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: 0;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
  }
  .header-brand-logo:hover .brand-logo-icon {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22);
    transform: scale(1.03);
  }
  .brand-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    line-height: 1;
  }
  .brand-name-main {
    font-weight: 900;
    font-size: 1.05rem;
    color: #0f172a;
    display: block;
    line-height: 1.35;
    letter-spacing: -0.3px;
    transition: color 0.2s ease;
  }
  .brand-name-sub {
    font-size: 0.58rem;
    color: #64748b;
    letter-spacing: 1.2px;
    font-weight: 700;
    display: block;
    line-height: 1.2;
    margin-top: 2px;
    direction: ltr;
    text-align: right;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-transform: uppercase;
    unicode-bidi: isolate;
  }
  @media (max-width: 768px) {
    .header-brand-logo {
      gap: 0.55rem;
    }
    .brand-logo-img {
      max-height: 34px;
      max-width: 130px;
    }
    .brand-logo-icon {
      width: 32px;
      height: 32px;
      font-size: 0.95rem;
      border-radius: 8px;
    }
    .brand-name-main {
      font-size: 0.92rem;
      line-height: 1.3;
    }
    .brand-name-sub {
      font-size: 0.52rem;
      letter-spacing: 0.8px;
    }
  }

  /* Mobile Drawer Panel Styles (ایزوله و ضد نشت در کروم موبایل و RTL) */
  .mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9990;
    transition: opacity 0.25s ease;
  }
  .mobile-drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    z-index: 9999;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
    transform: translateX(110%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .mobile-drawer-panel.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  /* ==========================================================
     Responsive header tiers.
     The header is a size container, so every tier follows the header's own width: the same rules
     apply on a real device and inside the builder's narrow live-preview frame.
       >= 1600  full: nav + labelled tool buttons
       <  1600  tool buttons become icons
       <  1280  shorter categories label, no brand tagline
       <  1120  no sale badge, tighter nav
       <  1100  navigation moves into the hamburger drawer
       <  480   only search + cart stay (orders/account live in the drawer and bottom bar)
     ========================================================== */
  .vitrin-smart-header { container: vhdr / inline-size; }
  #smartHeader .header-inner-container {
    max-width: 1520px;
    box-sizing: border-box;
    gap: clamp(0.5rem, 1.6cqi, 1.5rem);
    padding: 0.7rem clamp(0.75rem, 2.2cqi, 1.5rem);
  }
  #smartHeader .header-brand-logo { flex-shrink: 0; min-width: 0; }
  #smartHeader .brand-logo-text { min-width: 0; }
  #smartHeader .brand-name-main,
  #smartHeader .brand-name-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #smartHeader .header-desktop-nav { flex: 1 1 auto; min-width: 0; justify-content: center; }
  #smartHeader .nav-menu-list { gap: clamp(0.35rem, 1.2cqi, 1.25rem); margin: 0; padding: 0; }
  #smartHeader .header-tools-box { flex-shrink: 0; gap: 0.5rem; }
  #smartHeader .header-tool-btn { min-height: 40px; box-sizing: border-box; white-space: nowrap; }
  #smartHeader .btn-mobile-hamburger {
    flex: 0 0 40px; width: 40px; height: 40px; padding: 0;
    align-items: center; justify-content: center; border-radius: 10px;
  }
  #smartHeader .btn-mobile-hamburger:active { background: #f1f5f9; }

  @container vhdr (max-width: 1599px) {
    #smartHeader .search-btn-label,
    #smartHeader .account-btn-label { display: none !important; }
    #smartHeader .header-tool-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
    #smartHeader .header-tool-btn .cart-count-bubble {
      position: absolute; top: -5px; inset-inline-end: -5px;
      box-shadow: 0 0 0 2px #fff;
    }
  }
  @container vhdr (max-width: 1279px) {
    #smartHeader .nav-cat-label-extra,
    #smartHeader .brand-name-sub { display: none; }
    #smartHeader .nav-item-link { font-size: 0.82rem; }
  }
  @container vhdr (max-width: 1119px) {
    #smartHeader .nav-badge-hot,
    #smartHeader .nav-arrow-down { display: none; }
    #smartHeader .nav-item-link { font-size: 0.8rem; padding-inline: 0.2rem; }
    #smartHeader .nav-categories-trigger { padding: 0.4rem 0.55rem !important; }
    #smartHeader .nav-highlight-red { padding-inline: 0.55rem; }
  }
  @container vhdr (max-width: 1099px) {
    #smartHeader .header-desktop-nav { display: none !important; }
    #smartHeader .btn-mobile-hamburger { display: flex !important; }
    #smartHeader .header-brand-logo { flex: 1 1 auto; }
    #smartHeader .brand-name-sub { display: block; }
  }
  @container vhdr (max-width: 479px) {
    #smartHeader .header-inner-container { padding-block: 0.5rem; }
    #smartHeader .my-orders-btn-wrap,
    #smartHeader .header-admin-btn,
    #smartHeader .header-account-btn { display: none !important; }
    #smartHeader .brand-name-main { font-size: 0.9rem; }
  }
  @container vhdr (max-width: 419px) {
    #smartHeader .brand-name-sub { display: none; }
  }
  @container vhdr (max-width: 359px) {
    #smartHeader .brand-name-main { font-size: 0.82rem; letter-spacing: -0.4px; }
    #smartHeader .header-brand-logo { gap: 0.4rem; }
    #smartHeader .header-inner-container { gap: 0.35rem; }
  }