/* Index specific styles */
  .nav{display:flex;gap:18px;overflow:auto;padding:6px 0 12px}
  .nav a{color:#1f2937}
  .nav a.active{color:var(--brand-2);font-weight:600}

  /* Banners */
  .banners{display:grid;grid-auto-flow:column;grid-auto-columns:calc(20% - 10px);gap:12px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
  .banners::-webkit-scrollbar{display:none}
  .banner{height:96px;border-radius:16px;background:linear-gradient(135deg,#1f2335,#394264);box-shadow:var(--shadow);position:relative;scroll-snap-align:start}
  .banner::after{content:"";position:absolute;inset:0;border-radius:16px;border:1px solid rgba(255,255,255,.12)}

  /* Section header */
  .section{margin-top:24px}
  .section h2{margin:0 0 16px;font-size:20px;font-weight:700}

  /* Category chips */
  .categories{display:flex;gap:12px;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
  .categories::-webkit-scrollbar{display:none}
  .cat{width:74px;height:74px;border-radius:16px;background:#fff;border:1px solid var(--stroke);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--shadow)}

  /* Filter chips row */
  .filters{display:flex;gap:12px;overflow:auto;margin:14px 0;scrollbar-width:none;-ms-overflow-style:none}
  .filters::-webkit-scrollbar{display:none}

  /* Product grid - ИСПРАВЛЕННАЯ СЕТКА */
  .grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:12px}
  
  /* Десктоп: 4 в ряд */
  @media (min-width: 1025px){
    .grid{grid-template-columns:repeat(4, 1fr);gap:16px}
  }
  
  /* Планшет: 3 в ряд */
  @media (min-width: 769px) and (max-width: 1024px){
    .grid{grid-template-columns:repeat(3, 1fr);gap:14px}
  }
  .app2 {
    border-radius: 18px;
    overflow: hidden;
     place-items: center;
    /* display: flex; */
    
    /* justify-content: center; */
    /* aspect-ratio: 1 / 1; */
    /* background: linear-gradient(135deg, #f3f4f6, #dbeafe);*/
  }

  /* Мобильные: 2 в ряд (уже исправлено выше) */

  .card{position:relative;background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:14px;border:1px solid var(--stroke);transition:transform .15s ease, box-shadow .2s}
  .card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(16,24,40,.10)}
    .cards{ height: 350px; position:relative;background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:14px;border:1px solid var(--stroke);transition:transform .15s ease, box-shadow .2s}
  .cards:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(16,24,40,.10)}
  .app{border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f3f4f6,#dbeafe)}
  .badge{position:absolute;top:10px;left:10px;background:#fff;border:1px solid var(--stroke);border-radius:10px;padding:4px 6px;font-size:12px;box-shadow:var(--shadow);display:flex;align-items:center;gap:6px}
  .label{position:absolute;bottom:12px;left:16px;background:rgb(1 35 129);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px}
  .title{margin:10px 2px 2px;font-weight:600;font-size:14px;line-height:1.3}
  .subtitle{margin:0 2px 0;color:var(--muted);font-size:12px}


    .price {
    margin: 4px 2px 0;
    font-weight: 700;
    font-size: 20px;
    color: rgb(241 16 126);
  }
  
  /* Loading indicator */
  .loading {
    text-align: center;
    padding: 20px;
    display: none;
  }
  .loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--brand-2);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }