/* ======================================================
   APP LAYOUT — sidebar sticky on mobile + polished
   ====================================================== */

.app{
  display:flex;
  min-height:100vh;
}

/* Sidebar */
.sidebar{
  flex: 0 0 var(--sidebarW);   /* НЕ даём сайдбару сжиматься/расширяться */
  width: var(--sidebarW); 

  padding: 14px; 
  display:flex;
  flex-direction:column;
  gap: 12px; 

  position: sticky;
  top: 15px; 
  align-self: flex-start;

  height: calc(100vh - 20px); 
  overflow: auto;

  scrollbar-gutter: stable; /* чтобы ширина не менялась из-за скроллбара */
}


/* чтобы скролл сайдбара не выглядел ужасно на ПК */
.sidebar::-webkit-scrollbar{ width: 6px; }
.sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); border-radius: 10px; }

.nav-top{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 10px;
  border-radius: var(--r22);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 900;
  letter-spacing: 0.2px;
}

.nav-item{
  width:100%;
  border:0;
  cursor:pointer;
  padding: 12px 10px;
  border-radius: var(--r22);
  color: var(--text);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
  text-align:center;
  transition: background 140ms ease, transform 120ms ease, border-color 140ms ease;
}

.nav-item:hover{
  background: rgba(255,255,255,0.085);
  border-color: rgba(255,255,255,0.14);
}
.nav-item:active{ transform: scale(0.99); }

.nav-item.active{
  background: linear-gradient(135deg, rgba(255,63,122,0.35), rgba(160,19,82,0.25));
  border-color: rgba(255,63,122,0.45);
}

.nav-ico{ font-size: 20px; line-height: 1; }
.nav-txt{ margin-top: 6px; font-size: 12px; opacity: 0.92; }

.nav-bottom{ margin-top:auto; }

.cart-widget{
  padding: 12px;
  border-radius: var(--r22);
  cursor:pointer;
  user-select:none;
}

.cart-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: 12px;
  padding: 6px 0;
}

.cart-label{ color: var(--muted); }
.cart-val{ font-weight: 900; }

/* Content */
.content{ 
  flex:1;
  padding: var(--pad); 
  display:flex;
  justify-content:center;
}

.page{
  width:100%; 
  max-width: var(--maxW);

  /* ВАЖНО: запас снизу, чтобы sticky футеры (меню/корзина)
     не перекрывали последние карточки на мобильных и desktop */
  padding-bottom: 220px; /* на десктопе обычно хватает 180px, но на мобиле может понадобиться чуть больше из-за меньшей высоты экрана */
}


/* Mobile */
@media (max-width: 480px){ 
  :root{ --sidebarW: 132px; } 
  .sidebar{ padding: 10px; top: 8px; height: calc(100vh - 16px); } 
}

/* =========================
   PAGE TRANSITIONS
   ========================= */
#content.page-enter{
  animation: pageEnter 160ms ease;
}

@keyframes pageEnter{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px){
  .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    overflow: hidden; /* чтобы он сам не скроллился */
    z-index: 1000;
  }

  .content{
    margin-left: var(--sidebarW);
  }
}
/* ======================================================
   MOBILE: FIXED SIDEBAR (never scrolls / never shifts)
   ====================================================== */
@media (max-width: 720px){

  /* убиваем горизонтальный скролл и “ползание” */
  html, body{
    overflow-x: hidden;
  }

  .app{
    width: 100%;
  }

  /* sidebar всегда на месте */
  .sidebar{
    position: fixed;
    top: 0;
    left: 0;

    width: var(--sidebarW);
    flex: 0 0 var(--sidebarW);

    height: 100dvh;
    overflow: hidden;

    z-index: 2000;

    /* если вдруг есть transform на родителях — fixed иногда глючит */
    transform: translateZ(0);
  }

  /* контент не залезает под sidebar */
  .content{
    margin-left: var(--sidebarW);
    min-width: 0;
    width: calc(100% - var(--sidebarW));
  }
}