:root{
      --bg:#0b0d11;
      --text:#e9eef7;
      --muted:#a8b3c7;
      --line:rgba(255,255,255,.08);
      --shadow: 0 12px 30px rgba(0,0,0,.45);
      --r:18px;

      --overlay: rgba(0,0,0,.72);
      --overlay2: rgba(0,0,0,.82);
      --panel: rgba(0,0,0,.28);
      --panelHover: rgba(255,255,255,.05);
    }
    *{box-sizing:border-box}
    html,body{height:100%}

    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: var(--bg);
      color:var(--text);
      overflow:hidden;
      position:relative;
      isolation:isolate;
    }

    body::before{
      content:"";
      position:fixed;
      inset:-20vh -20vw;
      z-index:-1;
      pointer-events:none;
      background:
        radial-gradient(1100px 700px at 35% -10%, rgba(50,220,150,.25), transparent 55%),
        radial-gradient(900px 600px at 75% 10%, rgba(120,90,255,.22), transparent 55%),
        var(--bg);
      filter: blur(18px) saturate(1.05);
      transform: translateZ(0);
      will-change: transform;
    }

    *{
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.18) rgba(0,0,0,.25);
    }
    *::-webkit-scrollbar{width:10px;height:10px}
    *::-webkit-scrollbar-track{background:rgba(0,0,0,.25); border-radius:999px}
    *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:999px; border:2px solid rgba(0,0,0,.25)}
    *::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}

    .app{display:grid; grid-template-columns: 280px 1fr; height:100vh; gap:16px; padding:16px;}

    .sidebar{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid var(--line);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      overflow:hidden;

      display:flex;
      flex-direction:column;
      min-height:0;
    }
    .sb-top{
      padding:18px 18px 10px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      flex:0 0 auto;
    }
    .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px;}
    .dot{width:10px;height:10px;border-radius:50%; background:linear-gradient(135deg,#22c55e,#60a5fa);}
    .pill{
      padding:8px 10px; border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid var(--line);
      color:var(--muted);
      font-size:12px;
      white-space:nowrap;
    }

    .sb-nav{padding:6px; display:grid; gap:6px; flex:0 0 auto;}
    .nav-item{
      display:flex; align-items:center; gap:10px;
      padding:10px 12px;
      border-radius:12px;
      color:var(--muted);
      text-decoration:none;
      border:1px solid transparent;
    }
    .nav-item:hover{background:rgba(255,255,255,.05); color:var(--text);}
    .nav-item.active{
      background:rgba(34,197,94,.12);
      border-color: rgba(34,197,94,.22);
      color:var(--text);
    }

    .sb-scroll{
      flex:1 1 auto;
      min-height:0;
      overflow:auto;
      padding:6px 6px 10px;
      position:relative;
    }

    .sb-scroll:before,
    .sb-scroll:after{
      content:"";
      position:sticky;
      left:0; right:0;
      height:14px;
      pointer-events:none;
      z-index:2;
      display:block;
    }
    .sb-scroll:before{
      top:0;
      background: linear-gradient(180deg, rgba(11,13,17,.95), rgba(11,13,17,0));
    }
    .sb-scroll:after{
      bottom:0;
      background: linear-gradient(0deg, rgba(11,13,17,.95), rgba(11,13,17,0));
    }

    .sb-section{
      padding:14px 12px 10px;
      display:flex; align-items:center; justify-content:space-between;
      color:var(--muted);
      font-size:12px;
      letter-spacing:.6px;
      text-transform:uppercase;
    }

    .selectedWrap{padding:0 6px 10px; display:none;}
    .selectedBar{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(34,197,94,.25);
      background:rgba(34,197,94,.10);
    }
    .selectedLeft{min-width:0;}
    .selectedTitle{font-size:12px; font-weight:900; color:var(--text); margin:0 0 4px; letter-spacing:.2px;}
    .selectedList{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;}
    .clearBtn{
      flex:0 0 auto;
      border:none;
      cursor:pointer;
      padding:8px 10px;
      border-radius:12px;
      background:rgba(0,0,0,.25);
      border:1px solid var(--line);
      color:var(--text);
      font-weight:900;
      line-height:1;
    }
    .clearBtn:hover{background:rgba(255,255,255,.06)}

    .list{display:grid; gap:6px; padding:0 0 10px;}
    .item{
      padding:10px 12px;
      border-radius:12px;
      border:1px solid transparent;
      background:rgba(255,255,255,.03);
      color:var(--text);
      cursor:pointer;
      user-select:none;
    }
    .item:hover{background:rgba(255,255,255,.05)}
    .item small{display:block; color:var(--muted); margin-top:4px}
    .item.active{background:rgba(34,197,94,.12); border-color: rgba(34,197,94,.22);}

    .main{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid var(--line);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-width:0;
    }
    .topbar{
      padding: calc(16px + env(safe-area-inset-top)) 18px 16px;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      border-bottom:1px solid var(--line);
      background: linear-gradient(180deg, rgba(34,197,94,.14), rgba(0,0,0,0));
      flex:0 0 auto;
    }
    .top-left{display:flex; align-items:center; gap:10px; min-width:0}
    .h-title{font-weight:900; font-size:18px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .sub{color:var(--muted); font-size:12px; margin-top:4px}

    .search{
      flex:1; max-width:520px; min-width:220px;
      display:flex; align-items:center; gap:10px;
      padding:10px 12px;
      border-radius:999px;
      background:rgba(0,0,0,.25);
      border:1px solid var(--line);
      min-height:44px;
    }
    .search input{
      width:100%;
      background:transparent;
      border:none;
      outline:none;
      color:var(--text);
      font-size:14px;
    }
    .top-right{display:flex; align-items:center; gap:10px}

    .filtersBtn,.cartBtn,.toggle,.currency,.shipCountry{
      min-height:44px;
      line-height:1.1;
      align-items:center;
    }

    .toggle{
      display:flex; align-items:center; gap:8px;
      padding:10px 12px;
      border-radius:999px;
      background:rgba(0,0,0,.25);
      border:1px solid var(--line);
      color:var(--muted);
      font-size:13px;
      user-select:none;
      cursor:pointer;
      white-space:nowrap;
    }
    .toggle input{accent-color:#22c55e; width:16px; height:16px}
    .currency,.shipCountry{
      padding:10px 12px;
      border-radius:999px;
      background:rgba(0,0,0,.25);
      border:1px solid var(--line);
      color:var(--text);
      font-size:13px;
      outline:none;
      white-space:nowrap;
      appearance:none;
    }

    .filtersBtn{
      display:none;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      background:rgba(0,0,0,.28);
      border:1px solid var(--line);
      color:var(--text);
      cursor:pointer;
      font-weight:900;
      white-space:nowrap;
    }
    .filtersBtn:hover{background:rgba(255,255,255,.06)}
    .filtersBadge{
      padding:4px 8px;
      border-radius:999px;
      background:rgba(34,197,94,.18);
      border:1px solid rgba(34,197,94,.25);
      color:var(--text);
      font-size:12px;
      font-weight:900;
      line-height:1;
    }

    .cartBtn{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      background:rgba(0,0,0,.28);
      border:1px solid var(--line);
      color:var(--text);
      cursor:pointer;
      font-weight:900;
      white-space:nowrap;
    }
    .cartBtn:hover{background:rgba(255,255,255,.06)}
    .cartBadge{
      padding:4px 8px;
      border-radius:999px;
      background:rgba(34,197,94,.18);
      border:1px solid rgba(34,197,94,.25);
      color:var(--text);
      font-size:12px;
      font-weight:900;
      line-height:1;
      min-width:24px;
      text-align:center;
    }

    .content{padding:18px; overflow:auto; min-height:0;}
    .grid{
      display:grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap:14px;
    }
    @media (max-width:1200px){ .grid{grid-template-columns:repeat(4,1fr)} }

    /* ====== MOBILE LAYOUT ====== */
    @media (max-width:980px){
      body{overflow:auto}
      .app{grid-template-columns:1fr; height:auto; min-height:100vh}
      .sidebar{display:none}
      .main{height:auto; min-height:100vh}

      .topbar{flex-wrap:wrap; gap:10px}
      .top-left{width:100%}

      .search{order:3; width:100%; max-width:none; min-width:0}

      .top-right{
        order:2;
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
        gap:10px;
      }
      .top-right > *{flex: 1 1 auto}
      .filtersBtn,.cartBtn,.currency,.toggle,.shipCountry{justify-content:center}

      .filtersBtn{display:inline-flex}
      .content{padding:14px}

      .main{padding-bottom: env(safe-area-inset-bottom);}
      .grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
    }
    @media (max-width:520px){
      .grid{grid-template-columns:1fr}
      .top-right > *{flex: 1 1 48%}
      .currency{flex:1 1 48%}
      .shipCountry{flex:1 1 48%}
    }

    .card{
      border-radius:16px;
      border:1px solid var(--line);
      background:rgba(0,0,0,.22);
      overflow:hidden;
      position:relative;
      transition: transform .15s ease, background .15s ease;
      cursor:pointer;
      display:flex;
      flex-direction:column;
    }
    .card:hover{transform: translateY(-2px); background:rgba(255,255,255,.04)}
    .thumb{
      aspect-ratio: 1/1;
      background:linear-gradient(135deg, rgba(34,197,94,.14), rgba(96,165,250,.10));
      display:flex; align-items:center; justify-content:center;
      position:relative;
    }
    .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
    .badge{
      position:absolute; left:10px; top:10px;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      border:1px solid var(--line);
      background:rgba(0,0,0,.55);
      color:var(--text);
      backdrop-filter: blur(10px);
    }
    .sold{background:rgba(239,68,68,.22); border-color:rgba(239,68,68,.28)}
    .meta{
      padding:12px;
      flex:1 1 auto;
      display:flex;
      flex-direction:column;
    }
    .name{font-weight:800; font-size:14px; margin:0 0 6px}
    .desc{
      margin:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow:hidden;
      min-height: 32px;
      white-space: pre-line;
    }
    .card-chips{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-top:8px;
      min-height:28px;
      align-content:flex-start;
    }
    .card-chip{
      display:inline-flex;
      align-items:center;
      min-height:24px;
      padding:4px 8px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.045);
      color:var(--muted);
      font-size:11px;
      line-height:1.15;
      font-weight:700;
      white-space:nowrap;
    }
    .row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px}
    .card .row{
      margin-top:auto;
      padding-top:10px;
    }
    .price{font-weight:900}
    .btn{
      border:none; cursor:pointer;
      padding:10px 12px;
      border-radius:12px;
      background:linear-gradient(135deg,#22c55e,#16a34a);
      color:#07110b;
      font-weight:900;
      box-shadow: 0 10px 18px rgba(34,197,94,.18);
      transition: filter .15s ease, transform .15s ease;
      white-space:nowrap;
    }
    .btn:hover{filter:brightness(1.05); transform: translateY(-1px)}
    .btn:disabled{
      cursor:not-allowed;
      background:rgba(255,255,255,.10);
      color:rgba(255,255,255,.55);
      box-shadow:none;
    }

    .btn2{
      border:none; cursor:pointer;
      padding:10px 12px;
      border-radius:12px;
      background:rgba(255,255,255,.06);
      border:1px solid var(--line);
      color:var(--text);
      font-weight:900;
      transition: background .15s ease, transform .15s ease;
      white-space:nowrap;
    }
    .btn2:hover{background:rgba(255,255,255,.10); transform: translateY(-1px)}
    .btn2:disabled{opacity:.45; cursor:not-allowed}

    .toast{
      position: fixed;
      right: 16px;
      bottom: 16px;
      background: rgba(0,0,0,.65);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px 14px;
      color: var(--text);
      box-shadow: var(--shadow);
      max-width: 360px;
      display:none;
      z-index:999;
      backdrop-filter: blur(10px);
    }
    .toast.show{display:block}
    .toast small{color:var(--muted)}

/* Mobile Filters Sheet */
    .sheetBack{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.72);
      display:none;
      z-index:1000;
      backdrop-filter: blur(6px);
    }
    .sheetBack.show{display:block}

    .sheet{
      position:fixed;
      left:0; right:0; bottom:0;
      border-top-left-radius:18px;
      border-top-right-radius:18px;
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.78));
      box-shadow: 0 -18px 40px rgba(0,0,0,.55);
      transform: translateY(100%);
      transition: transform .18s ease;
      z-index:1001;

      max-height: 82vh;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      backdrop-filter: blur(10px);
    }
    .sheet.show{transform: translateY(0)}
    .sheetHead{
      padding:14px 14px 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border-bottom:1px solid var(--line);
      background: linear-gradient(180deg, rgba(34,197,94,.14), rgba(0,0,0,0));
    }
    .sheetTitle{font-weight:950; letter-spacing:.2px;}
    .sheetClose{
      border:none;
      cursor:pointer;
      padding:10px 12px;
      border-radius:12px;
      background:rgba(0,0,0,.30);
      border:1px solid var(--line);
      color:var(--text);
      font-weight:950;
      line-height:1;
    }
    .sheetClose:hover{background:rgba(255,255,255,.06)}
    .sheetBody{padding:12px; overflow:auto; min-height:0;}
    .mSelectedWrap{display:none; margin-bottom:10px;}
    .mList .item{padding:12px 12px; border-radius:14px;}

    /* Cart Drawer */
    .cartBack{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.74);
      display:none;
      z-index:1100;
      backdrop-filter: blur(6px);
    }
    .cartBack.show{display:block}
    .cartDrawer{
      position:fixed;
      top:0; right:0; bottom:0;
      width:min(420px, 92vw);
      border-left:1px solid var(--line);
      background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.78));
      box-shadow: -18px 0 40px rgba(0,0,0,.60);
      transform: translateX(100%);
      transition: transform .18s ease;
      z-index:1101;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      backdrop-filter: blur(10px);
    }
    .cartDrawer.show{transform: translateX(0)}
    .cartHead{
      padding:14px 14px 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border-bottom:1px solid var(--line);
      background: linear-gradient(180deg, rgba(34,197,94,.14), rgba(0,0,0,0));
    }
    .cartTitle{font-weight:950; letter-spacing:.2px;}
    .cartClose{
      border:none;
      cursor:pointer;
      padding:10px 12px;
      border-radius:12px;
      background:rgba(0,0,0,.30);
      border:1px solid var(--line);
      color:var(--text);
      font-weight:950;
      line-height:1;
    }
    .cartClose:hover{background:rgba(255,255,255,.06)}
    .cartBody{padding:12px; overflow:auto; min-height:0;}
    .cartEmpty{
      padding:14px;
      border:1px solid var(--line);
      border-radius:14px;
      background:rgba(255,255,255,.04);
      color:var(--muted);
    }
    .cartItem{
      display:grid;
      grid-template-columns:64px 1fr;
      gap:10px;
      padding:10px;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      margin-bottom:10px;
    }
    .cartImg{
      width:64px;height:64px;border-radius:12px;
      border:1px solid var(--line);
      background:rgba(0,0,0,.25);
      overflow:hidden;
      display:flex;align-items:center;justify-content:center;
      color:var(--muted);
      font-size:12px;
    }
    .cartImg img{width:100%;height:100%;object-fit:cover;display:block;}
    .cartName{font-weight:900; font-size:13px; margin:0}
    .cartMeta{color:var(--muted); font-size:12px; margin:4px 0 0}
    .cartRow{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px;}
    .cartQty{
      display:flex; align-items:center; gap:6px;
      padding:6px 8px;
      border-radius:12px;
      border:1px solid var(--line);
      background:rgba(0,0,0,.25);
    }
    .cartQty button{
      width:30px;height:30px;border-radius:10px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:var(--text);
      cursor:pointer;
      font-weight:900;
    }
    .cartQty input{
      width:44px;
      background:transparent;
      border:none;
      outline:none;
      color:var(--text);
      text-align:center;
      font-weight:900;
    }
    .cartRemove{
      border:none;
      cursor:pointer;
      padding:8px 10px;
      border-radius:12px;
      background:rgba(0,0,0,.25);
      border:1px solid var(--line);
      color:var(--text);
      font-weight:900;
      line-height:1;
    }
    .cartRemove:hover{background:rgba(255,255,255,.06)}
    .cartFoot{
      padding:12px;
      border-top:1px solid var(--line);
      background:rgba(0,0,0,.40);
    }
    .cartSumRow{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-bottom:10px; color:var(--text); font-weight:950;
    }

    /* =========================
       ✅ NEW: 3 buttons in a row одинакового размера (как Clear cart)
       PayPal / Checkout / Clear cart
       ========================= */
    .cartActions{display:grid; gap:10px;}

    .actionRow{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:10px;
      align-items:stretch;
    }
    .actionBtn{
      width:100%;
      min-height:44px;
      height:44px;
      padding:0 12px;
      line-height:44px;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden; /* важно для PayPal iframe */
    }

    /* PayPal wrapper выглядит как обычная кнопка */
    .ppWrap{
      display:none; /* показываем только когда корзина не пустая */
      padding:0;
    }
    #paypal-button-container{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    /* note under row */
    .ppNote{
      color:var(--muted);
      font-size:12px;
      margin-top:0;
      line-height:1.35;
      display:none;
      text-align:center;
    }

    @media (max-width:520px){
      .actionRow{grid-template-columns:1fr;}
      .actionBtn{height:46px; min-height:46px; line-height:46px;}
    }

    /* Footer */
    .footer{
      margin-top:auto;
      border-top:1px solid var(--line);
      background: rgba(0,0,0,.25);
      padding:14px 18px;
      flex: 0 0 auto;
    }
    .footerRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .footerBrand{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--muted);
      font-size:12px;
      white-space:nowrap;
    }
    .footerLinks{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .footerLinks a{
      text-decoration:none;
      color:var(--muted);
      font-size:12px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      transition: background .15s ease, transform .15s ease;
      white-space:nowrap;
    }
    .footerLinks a:hover{
      background:rgba(255,255,255,.08);
      transform: translateY(-1px);
      color:var(--text);
    }
    @media (max-width:980px){
      .footer{padding:12px 14px;}
      .footerRow{justify-content:center;}
      .footerLinks{justify-content:center;}
    }
  
/* ✅ Checkout green (only this button) */
#cartCheckout{
  background: linear-gradient(135deg,#22c55e,#16a34a);
  color:#07110b;
  border:none;
  box-shadow: 0 10px 18px rgba(34,197,94,.18);
}

#cartCheckout:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

#cartCheckout:disabled{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.55);
  box-shadow:none;
  transform:none;
}

/* DHL live shipping inside cart */
.cartShippingPanel{
  display:grid;
  gap:8px;
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.cartShippingLabel{
  font-size:12px;
  font-weight:900;
  color:var(--muted);
  letter-spacing:.02em;
}
.cartShippingSelect{
  width:100%;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0d1014;
  color:var(--text);
  padding:0 12px;
  font:inherit;
  outline:none;
}
.cartShippingSelect:focus{
  border-color:rgba(34,197,94,.7);
  box-shadow:0 0 0 3px rgba(34,197,94,.12);
}
.shippingService{
  min-height:16px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.cartSumRows{display:grid;gap:7px;margin-bottom:12px;}
.cartSumRows .cartSumRow{margin-bottom:0;}
.cartGrandTotal{
  padding-top:8px;
  margin-top:2px;
  border-top:1px solid var(--line);
  font-size:15px;
}