:root{--accent:#000000;--muted:#666;--bg:#f8f8fb}
    *{box-sizing:border-box}
    body{font-family:Inter,Segoe UI,Roboto,Arial; margin:0; background:var(--bg); color:#111; -webkit-font-smoothing:antialiased;}
    header{background:#fff; padding:18px 20px; box-shadow:0 2px 6px rgba(0,0,0,.06); position:sticky; top:0; z-index:20}
    .brand{font-weight:700; font-size:20px; color:var(--accent)}

    /* categories */
    .cat-wrap{display:flex; align-items:center; gap:8px; padding:12px 18px; background:#fff}
    .cat-scroll{display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth; padding:6px}
    .cat-scroll::-webkit-scrollbar{height:8px}
    .cat{flex:0 0 auto; padding:8px 14px; border-radius:18px; background:#f1f1f6; cursor:pointer; white-space:nowrap; border:none}
    .cat.active{background:var(--accent); color:#fff}
    .cat-btn{border:none; background:#fff; padding:8px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.06); cursor:pointer}

    main{padding:18px}
    .grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px}

    .card{background:#fff; border-radius:12px; padding:12px; box-shadow:0 8px 20px rgba(16,24,40,.04); display:flex;
    flex-direction:column; gap:10px}
    .card img{width:100%; height:250px; object-fit:cover; border-radius:8px; cursor:zoom-in}
    .descshort{font-size:14px; color:#747272;  min-height:36px}
    .cardtitle{font-size:14px; color:#000; text-align: center; font-weight: bold; min-height:36px}
    .price-row{display:flex; align-items:center; justify-content:center; gap:10px}
    .price{font-weight:700; font-size:18px}
    .qty-controls{display:flex; align-items:center; gap:10px}
    .qty-btn{width:36px; height:36px; border-radius:50%; border:none; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; font-weight:700; background:#f3f4f6}

    /* floating cart */
    .cart-float{position:fixed; right:18px; bottom:18px; background:var(--accent); color:#fff; padding:12px 16px; border-radius:999px; box-shadow:0 10px 30px rgba(214,51,132,.18); display:flex; align-items:center; gap:10px; cursor:pointer; z-index:40}
    .badge{background:#fff; color:var(--accent); width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; font-weight:700}

    /* modal/order */
    .overlay{position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; align-items:flex-end; justify-content:center; z-index:50}
    .overlay.show{display:flex}
    .order-panel{width:100%; max-width:480px; background:#fff; border-top-left-radius:12px; border-top-right-radius:12px; padding:16px; max-height:85vh; overflow:auto}
    .order-item{display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #f1f1f4}
    .order-item img{width:64px; height:64px; object-fit:cover; border-radius:8px}
    .order-meta{flex:1}
    .order-row{display:flex; justify-content:space-between; align-items:center}
    .total{font-size:18px; font-weight:800}
    .phone{width:100%; padding:10px; border-radius:8px; border:1px solid #e6e6ea}
    .btn-primary{background:var(--accent); color:#fff; border:none; padding:10px 14px; border-radius:8px; cursor:pointer}

    /* full-screen product modal */
    .prod-modal{
      position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; z-index:90;
      color:#fff; overflow:hidden; touch-action:pan-y pinch-zoom;
      align-items:center; justify-content:center; flex-direction:column;
    }
    .prod-modal.show {
        display: flex
    }

    .prod-top {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        padding: 20px
    }

    .prod-img {
        max-width: 100%;
        max-height: 100%;
        transition: transform .18s ease;
        border-radius: 10px;
        will-change: transform;
        touch-action: none
    }

    .prod-bottom {
        width: 100%;
        max-height: 40vh;
        overflow: auto;
        padding: 18px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.12));
        box-sizing: border-box
    }

    .prod-title {
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 10px
    }

    .prod-desc {
        font-size: 14px;
        line-height: 1.5;
        color: #ddd;
        /* white-space: pre-wrap */
    }

    .prod-desc ul,
    .descslong ul {
        padding-left: 20px;
        margin: 0px 0;
    }

    .prod-desc li,
    .descslong li {
        margin-bottom: 0px;
    }

    .prod-price-modal {
        font-size: 18px;
        font-weight: 800;
        margin-top: 10px;
        text-align: center
    }

    .prod-close {
        position: absolute;
        top: 14px;
        right: 18px;
        font-size: 28px;
        cursor: pointer;
        z-index: 95;
        background: rgba(0, 0, 0, 0.3);
        padding: 6px 10px;
        border-radius: 10px
    }

    .nav-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 36px;
        cursor: pointer;
        z-index: 95;
        background: rgba(0, 0, 0, 0.3);
        padding: 8px 10px;
        border-radius: 10px
    }

    .nav-left {
        left: 12px
    }

    .nav-right {
        right: 12px
    }

    /* responsive */
    @media (min-width:900px){
      .order-panel{border-radius:12px}
      .prod-bottom{max-width:900px; margin:0 auto; border-radius:12px}
    }

.price-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.qty-num {
  min-width: 16px;
  text-align: center;
  font-weight: 600;
}

/* .qty-btn {
  border: 1px solid #000;
  background: #fff;
  color: #000;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: .2s;
} */

.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%; /* делает круглыми */
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-size: 18px;
  cursor: pointer;
  transition: .2s ease;
}


.qty-btn:active {
  transform: scale(0.92);
}
.qty-btn:hover {
  transform: scale(1.08);
}