.topbar{background:var(--black);color:#fff;font-size:12px;font-weight:500;padding:9px 16px;text-align:center}
.topbar span{color:var(--pink);font-weight:700}
.topbar__inner{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar__offer{color:var(--pink-light);font-weight:500}
.topbar__link,.topbar__social{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.8);transition:color .15s}
.topbar__link:hover,.topbar__social:hover{color:#fff}
.site-header{position:sticky;top:0;z-index:1000;background:var(--white);border-bottom:1px solid var(--gray-100);box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .25s}
.site-header.is-scrolled{box-shadow:var(--sh-md)}
.site-header.is-hidden{transform:translateY(-100%)}
.header__inner{max-width:var(--container);margin:0 auto;padding:0 24px;height:var(--header-h);display:flex;align-items:center;gap:24px;flex-wrap:nowrap}
.header__logo{flex-shrink:0}
.header__logo a{display:flex;align-items:center;gap:10px}
.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--pink),var(--red));border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.logo-text__main{display:block;font-size:15px;font-weight:800;color:var(--black)}
.logo-text__sub{font-size:10px;font-weight:500;color:var(--gray-400);letter-spacing:.06em;text-transform:uppercase}
.header__search{flex:1;max-width:500px;position:relative;min-width:0}
.header__search input{width:100%;height:44px;border:1.5px solid var(--gray-200);border-radius:var(--r-full);padding:0 48px 0 18px;font-size:14px;color:var(--black);background:var(--gray-50);outline:none;transition:border-color .2s,box-shadow .2s}
.header__search input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,77,143,.12);background:var(--white)}
.header__search input::placeholder{color:var(--gray-400)}
.header__search button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;background:var(--pink);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}
.header__search button:hover{background:var(--red)}
.header__actions{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0}
.header__desktop-nav{flex:1;display:flex;justify-content:center;min-width:0}
.header__desktop-nav .desktop-menu-items{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0;white-space:nowrap}
.header__desktop-nav .desktop-menu-items li a{font-size:13px;font-weight:700;color:var(--black);text-transform:uppercase;letter-spacing:.02em;transition:color .2s}
.header__desktop-nav .desktop-menu-items li a:hover{color:var(--pink)}
.header-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--r-md);background:transparent;color:var(--gray-600);font-size:10px;font-weight:600;letter-spacing:.02em;gap:3px;transition:background .15s,color .15s}
.header-btn:hover{background:var(--gray-100);color:var(--black)}
.header-btn svg{width:22px;height:22px}
.header-btn.cart-btn{position:relative}
.cart-badge,.cart-count{position:absolute;top:6px;right:6px;background:var(--pink);color:#fff;font-size:10px;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.header__mobile-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-md);background:transparent;gap:5px;cursor:pointer}
.header__mobile-toggle span{display:block;width:22px;height:2px;background:var(--gray-800);border-radius:2px;transition:all .25s}
.header__mobile-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.header__mobile-toggle.is-active span:nth-child(2){opacity:0}
.header__mobile-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-pills{background:var(--white);border-bottom:1px solid var(--gray-100)}
.nav-pills__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}
.nav-pills__inner::-webkit-scrollbar { display: none; }

.nav-pill{flex-shrink:0;padding:10px 16px;font-size:13px;font-weight:600;color:var(--gray-600);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:all .15s}
.nav-pill:hover{color:var(--pink)}
.nav-pill.active,.nav-pill.current-cat{color:var(--pink);border-bottom-color:var(--pink)}

@media(max-width: 768px) {
  .nav-pill { padding: 8px 12px; font-size: 12px; }
}

.mobile-drawer{position:fixed;inset:0;z-index:3000;visibility:hidden;pointer-events:none;max-width: 100vw; overflow: hidden;}
.mobile-drawer.is-open{visibility:visible;pointer-events:all}
.mobile-drawer__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s}
.mobile-drawer.is-open .mobile-drawer__overlay{opacity:1}
.mobile-drawer__panel { 
  position: absolute; top: 0; left: 0; bottom: 0; 
  width: min(300px, 90vw); max-width: 100vw; overflow-x: hidden;
  background: #fff; transform: translateX(-100%); transition: transform 0.3s; display: flex; flex-direction: column; 
}
.mobile-drawer.is-open .mobile-drawer__panel{transform:translateX(0)}
.mobile-drawer__head{padding:20px;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between}
.mobile-drawer__close{width:36px;height:36px;border-radius:8px;background:var(--gray-100);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none}
.mobile-drawer__body{flex:1;overflow-y:auto}
.mobile-nav a{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font-size:14px;font-weight:600;color:var(--gray-800);border-bottom:1px solid var(--gray-100)}
.mobile-nav a:hover{color:var(--pink)}
.mobile-nav .sub-menu{padding-left:16px;display:none}
.mobile-nav .sub-menu.is-open{display:block}
.mobile-drawer__footer{padding:16px 20px;border-top:1px solid var(--gray-100);display:flex;flex-direction:column;gap:8px}
@media(max-width:991px) { .hide-on-mobile { display: none !important; } }

@media(max-width:768px){
  .header__inner {
    padding: 0 12px;
    height: 56px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .header__mobile-toggle { display: flex; }
  .header__search {
    flex: 1;
    min-width: 0;
    max-width: none;
  }
  .header__search input {
    height: 38px;
    font-size: 13px;
  }
  .header__logo .logo-text { display: none; }
  .header__actions { gap: 2px; flex-shrink: 0; }
  .header-btn { width: 40px; height: 40px; font-size: 9px; }
  .topbar__left, .topbar__right { display: none; }
  .topbar__center { flex: 1; text-align: center; }
  .header__desktop-nav { display: none !important; }
}

@media(max-width:400px){
  .header__inner { padding: 0 10px; gap: 6px; }
  .header-btn { width: 36px; height: 36px; }
  .header-btn svg { width: 18px; height: 18px; }
  .header__search input { padding: 0 36px 0 12px; }
}