:root{
  --bg:#0b0d10;--panel:#12161b;--muted:#8b97a8;--text:#e8edf3;--accent:#4452bb;--chip:#1b222b;--ok:#18c48f;--danger:#ff6b6b;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";}
.wrap{max-width:1200px;margin:24px auto;padding:0 16px}
html, body, .wrap { overflow-x: hidden; }

 header{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
  .badge{background:var(--chip);padding:2px 8px;border-radius:999px;color:var(--muted);font-size:12px}
  .panel{background:var(--panel);border:1px solid #1f2630;border-radius:14px;padding:14px}
  .controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .controls > #q{grid-column:1 / -1}
  input[type="search"],select{width:100%;background:#0c1116;border:1px solid #212a35;color:var(--text);padding:10px 12px;border-radius:10px;outline:none}
  input[type="search"]::placeholder{color:#647286}

  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
    gap:10px;
    margin-top:14px;
    min-width:0;
  }

  .card{
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    display:block;
    min-height:0;
    width:100%;
    min-width:0;
  }
  .card-media{
    position:relative;
    border:1px solid #1b222c;
    border-radius:12px;
    background:#0b1016;
    overflow:hidden;
    aspect-ratio:1/1;
    width:100%;
  }
  .title{
    font-weight:700;
    font-size:13px;
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    flex:1;
  }
  .fav-heart-btn{
    width:28px;
    height:28px;
    min-width:28px;
    border-radius:999px;
    border:1px solid #20252d;
    background:#0b0f14;
    color:#ffffff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
    font-size:14px;
    line-height:1;
  }
  .fav-heart-btn.active{
    color:#ff3c50;
  }
  .fav-heart-btn svg{
    width:14px;
    height:14px;
    display:block;
  }
  .card-preview-slot{
    position:absolute;
    inset:0;
    min-height:0;
  }
  .variant-swatches{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:6px;
    padding:0 2px;
    margin-top:2px;
    min-height:20px;
    max-height:20px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  .variant-swatches::-webkit-scrollbar{display:none}
  .variant-swatches.is-empty{visibility:hidden}
  .variant-dot{
    width:18px;
    height:18px;
    flex:0 0 18px;
    border-radius:999px;
    border:1px solid #2a3648;
    background:var(--dot-color,#7f8ea3);
    padding:0;
    cursor:pointer;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  }
  .variant-dot.active{
    border-color:#dce7f5;
    box-shadow:0 0 0 1px #dce7f5, inset 0 0 0 1px rgba(0,0,0,.18);
  }
  .price{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    font-size:11px;
    min-height:22px;
  }
  .price b{font-size:12px}
  .card-top{
    position:absolute;
    top:8px;
    left:8px;
    right:8px;
    z-index:3;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
  }
  .title-overlay{
    max-width:calc(100% - 40px);
    background:rgba(6,10,16,.55);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(2px);
    border-radius:8px;
    padding:4px 7px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    display:block;
    -webkit-line-clamp:unset;
    -webkit-box-orient:unset;
  }
  .card-bottom-overlay{
    position:absolute;
    left:8px;
    right:8px;
    bottom:8px;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  .add-to-cart-bottom{
    padding:8px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    background:#4452bb;
    border-color:#4452bb;
    color:#ffffff;
    min-width:128px;
  }
  .add-to-cart-bottom:hover{
    background:#3b48a7;
    border-color:#3b48a7;
  }
  .add-to-cart-icon{
    width:34px;
    min-width:34px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .add-to-cart-icon svg{
    display:block;
  }
  .add-to-cart-price{
    flex:1;
    min-width:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
    color:#ffffff;
    background:#4452bb;
    border-color:#4452bb;
  }
  .add-to-cart-price:hover{
    background:#3b48a7;
    border-color:#3b48a7;
    color:#ffffff;
  }
  .fav{
    width:34px;
    min-width:34px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    line-height:1;
    color:#ffffff;
    background:#4452bb;
    border-color:#4452bb;
  }
  .btn{
    appearance:none;
    border:1px solid #273142;
    background:#0e1319;
    color:var(--text);
    padding:6px 7px;
    border-radius:9px;
    cursor:pointer;
    font-size:11px;
    line-height:1.2;
  }
  .btn.primary{background:#4452bb;border-color:#4452bb;color:#ffffff}
  .btn.primary:hover{background:#3b48a7;border-color:#3b48a7;color:#ffffff}
  .btn.danger{background:#2a1012;border-color:#6b2328;color:#ffb2b2}
  .btn.danger:hover{background:#341416;border-color:#8a2d34;color:#ffd0d0}
  .btn.ok{background:#4452bb;border-color:#4452bb;color:#ffffff}
  .btn.ghost{background:#0c1116;border-color:#222b38;color:#9fb2ca}
  .btn.ok.add-to-cart-price{
    background:#4452bb;
    border-color:#4452bb;
    color:#ffffff;
  }
  .btn.ok.add-to-cart-price:hover{
    background:#3b48a7;
    border-color:#3b48a7;
    color:#ffffff;
  }
  .btn.ghost.fav{
    background:#4452bb;
    border-color:#4452bb;
    color:#ffffff;
  }
  .btn[aria-pressed="true"]{border-color:#4452bb;box-shadow:0 0 0 1px rgba(68,82,187,.25)}
  .btn-icon{display:inline-flex;align-items:center;gap:4px}
  .cart-btn{
    justify-content:center;
    min-width:40px;
  }
  .cart-icon{
    width:18px;
    height:18px;
    display:block;
    color:#ffffff;
  }
  .btn.ghost.fav.active,
  .fav.active{
    color:#ffd54a;
    border-color:#4452bb;
    background:#4452bb;
    box-shadow:none;
  }
  .fav-heart-btn.active{
    color:#ff3c50 !important;
    border-color:#20252d;
    background:#0b0f14;
    box-shadow:none;
  }
  .noc{opacity:.75;text-align:center;padding:24px}
  .footer{margin:18px 0 8px;color:var(--muted);font-size:12px;text-align:center}
  a{color:var(--accent);text-decoration:none}
  .counter{color:var(--muted)}

  .top-actions{display:flex;gap:8px;align-items:center}
  .pill{background:#0e1319;border:1px solid #223044;border-radius:999px;overflow:hidden;display:flex}
  .pill button{all:unset;padding:8px 12px;cursor:pointer;color:#a7b4c7}
  .pill button.active{background:#4452bb;color:#ffffff}

  .cart-btn{position:relative}
  .cart-count{position:absolute;right:-6px;top:-6px;background:#4452bb;border:1px solid #4452bb;color:#ffffff;font-size:11px;line-height:1;padding:3px 6px;border-radius:999px;min-width:20px;text-align:center}

  .drawer{position:fixed;inset:0;display:none;z-index:9999}
  .drawer.open{display:block}
  .drawer-back{position:absolute;inset:0;background:rgba(0,0,0,.4)}
  .drawer-panel{
    position:absolute;right:0;top:0;bottom:0;
    width:min(380px,100vw);
    background:#0d1116;border-left:1px solid #1b2330;padding:16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto
  }
  .drawer h2{margin:0 0 6px 0;font-size:18px}
  .cart-list{display:flex;flex-direction:column;gap:8px;padding-right:4px}
  .cart-item{display:grid;grid-template-columns:1fr;gap:8px;align-items:center;background:#0c1116;border:1px solid #1b222c;border-radius:10px;padding:10px}
  .cart-item-main{display:grid;grid-template-columns:56px 1fr;gap:8px;align-items:center;min-width:0}
  .cart-meta{min-width:0}
  .cart-thumb-wrap{width:56px;height:56px;border-radius:8px;overflow:hidden;background:#0a0f14;border:1px solid #1c2531}
  .cart-thumb{width:100%;height:100%;object-fit:contain;display:block}
  .cart-thumb-empty{display:grid;place-items:center;color:#7b8797;font-size:11px}
  .cart-thumb-rich .pic{
    width:100%;
    height:100%;
    border:0;
    border-radius:0;
    min-height:0;
    background:transparent;
  }
  .cart-thumb-rich .bundle-preview-grid{
    padding:2px;
    gap:1px;
  }
  .qty{display:flex;align-items:center;gap:6px}
  .qty button{width:28px;height:28px;border-radius:8px;background:#4452bb;border-color:#4452bb;color:#ffffff}
  .qty button:hover{background:#3b48a7;border-color:#3b48a7}
  .cart-total{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px dashed #273142}
  .cart-empty{color:var(--muted);text-align:center;padding:16px 0}
  .cart-items-summary{
    margin-top:6px;
    padding:8px 10px;
    border:1px solid #1b2532;
    border-radius:10px;
    background:#0b1016;
  }
  .cart-items-summary:empty{display:none}
  .cart-items-summary-title{
    font-size:12px;
    font-weight:600;
    color:#cfd9e8;
    margin-bottom:6px;
  }
  .cart-items-summary-row{
    font-size:12px;
    color:#9fb0c8;
    line-height:1.35;
  }

  body.drawer-open{overflow:hidden}

  @media (max-width: 560px){
    .wrap{padding:0 8px}
    .controls{grid-template-columns:1fr;gap:8px}
    .grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
    }
    .drawer-panel{width:100vw;max-width:100%}
  }

  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:8px 0; margin-bottom:8px;
  }
  .pill{background:#0e1319;border:1px solid #223044;border-radius:999px;overflow:hidden;display:flex}
  .pill button{all:unset;padding:6px 10px;cursor:pointer;color:#a7b4c7;font-size:13px}
  .pill button.active{background:#4452bb;color:#ffffff}
  .top-actions{display:flex;align-items:center;gap:8px}
  .cart-btn{position:relative;padding:6px 10px;font-size:13px}
  .cart-count{position:absolute;right:-6px;top:-6px;background:#4452bb;border:1px solid #4452bb;
    color:#ffffff;font-size:10px;line-height:1;padding:3px 6px;border-radius:999px;min-width:18px;text-align:center}

  input[type="search"], select{
    width:100%;
    background:#0e1319;
    border:1px solid #223044;
    color:var(--text);
    padding:10px 12px;
    border-radius:10px;
    outline:none;
    appearance:none; -webkit-appearance:none;
  }
  input[type="search"]::placeholder{color:#7e8da3}

  .controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .controls > #q{grid-column:1 / -1}

  @media (max-width:560px){
    .topbar{flex-wrap:wrap;gap:6px}
    .pill button{padding:6px 9px;font-size:12.5px}
    .cart-btn{padding:6px 9px}
    .controls{grid-template-columns:1fr 1fr;gap:8px}
    .controls > #q{grid-column:1 / -1}
  }

  @media (max-width:380px){
    .controls{grid-template-columns:1fr;gap:8px}
    .controls > #q{grid-column:1}
  }

  .collection-grid-header{
    grid-column:1 / -1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin:20px 2px 6px;
  }
  .collection-banner{
    width:100%;
    border-radius:16px;
    overflow:hidden;
    border:1px solid #1b2634;
    background:#05070a;
  }
.collection-banner .collection-banner-media{
    display:block;
    width:100%;
    height:auto;
  }
  .collection-header-text{
    flex:1;
    min-width:0;
  }
  .collection-header-text .collection-title{
    font-size:18px;
    font-weight:600;
  }
  .collection-header-text .collection-meta{
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
  }

  .pic{
    position:relative;
    border:1px solid #1b222c;
    border-radius:9px;
    background:#0b1016;
    overflow:hidden;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .pic.pic-effect{
    aspect-ratio:1 / 1;
  }

  .pic-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .pic.pic-effect .pic-layer{
    object-fit:cover;
    object-position:top center;
  }

  .pic > img.product-img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .pic .noimg{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:12px;
    color:#8b97a8;
  }

  /* Коллажи наборов */
  .bundle-preview-grid{
    width:100%;
    height:100%;
    display:grid;
    gap:2px;
    padding:5px;
    background-color:transparent;
  }
  .bundle-preview-1{
    grid-template-columns:1fr;
    grid-auto-rows:1fr;
  }
  .bundle-preview-2{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:1fr;
  }
  .bundle-preview-3{
    grid-template-areas:
      "deco deco"
      "name effect";
    grid-template-columns:1fr 1fr;
    grid-auto-rows:1fr;
  }
  .bundle-preview-3 .decoration-preview{ grid-area:deco; }
  .bundle-preview-3 .nameplate-preview{  grid-area:name; }
  .bundle-preview-3 .effect-preview{     grid-area:effect; }

  .bundle-item{
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:transparent;
    border-radius:4px;
    overflow:hidden;
  }

  .bundle-pic{
    position:relative;
    width:100%;
    height:100%;
    border-radius:4px;
    overflow:hidden;
  }
  .bundle-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .bundle-pic-effect .bundle-layer{
    object-fit:contain;
    object-position:center;
  }

  .bundle-item img{
    width:100%;
    height:100%;
    object-fit:contain;
  }

  .pagination{
    margin-top:16px;
    display:flex;
    justify-content:center;
  }
  .page-nav{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:var(--muted);
  }
  .page-btn{
    min-width:32px;
    height:32px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid #273142;
    background:#111822;
    color:var(--text);
    cursor:pointer;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .page-btn.round{border-radius:999px;}
  .page-btn.active{
    background:#4452bb;
    border-color:#4452bb;
    color:#ffffff;
  }
  .page-btn.disabled{
    opacity:.35;
    cursor:default;
  }
  .page-ellipsis{
    padding:0 4px;
    color:var(--muted);
  }

  /* Промокод + суммы */
  .promo-block{
    margin-top:8px;
    display:flex;
    gap:6px;
  }
  .promo-block input{
    flex:1;
    background:#0e1319;
    border:1px solid #223044;
    color:var(--text);
    padding:8px 10px;
    border-radius:8px;
    outline:none;
    font-size:13px;
  }
  .promo-block input::placeholder{
    color:#8e99aa;
    opacity:1;
  }
  .promo-message{
    margin-top:4px;
    font-size:12px;
    color:var(--muted);
  }
  .promo-message.ok{
    color:var(--ok);
  }
  .promo-message.err{
    color:var(--danger);
  }
  .cart-total-final{
    font-weight:600;
  }
  .order-credentials{
    margin-top:8px;
  }
  .order-credentials-grid{
    display:grid;
    gap:6px;
  }
  .order-credentials-grid input{
    width:100%;
    background:#0e1319;
    border:1px solid #223044;
    color:var(--text);
    padding:8px 10px;
    border-radius:8px;
    outline:none;
    font-size:13px;
  }
  .order-credentials-grid input::placeholder{
    color:#8e99aa;
    opacity:1;
  }
  .order-credentials-grid input.input-error{
    border-color:#b53b44;
    box-shadow:0 0 0 1px rgba(181,59,68,.35);
  }
  .field-error{
    min-height:0;
    font-size:12px;
    line-height:1.3;
    color:#ff9cab;
    display:none;
  }
  .field-error.show{
    display:block;
  }
  .password-wrap{
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px;
    align-items:center;
  }
  .password-wrap input{min-width:0}
  .password-toggle{
    width:38px;
    min-width:38px;
    height:36px;
    padding:0;
    display:grid;
    place-items:center;
  }
  .password-toggle svg{
    width:18px;
    height:18px;
    opacity:.92;
  }
  .password-toggle.is-visible{
    border-color:#4452bb;
    background:#4452bb;
    color:#ffffff;
  }
  .order-credentials-hint{
    margin-top:8px;
    font-size:10px;
    line-height:1.35;
    color:#7f90a8;
  }
  .saved-accounts-block{
    margin-bottom:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .saved-accounts-list{
    display:flex;
    flex-direction:column;
    gap:6px;
    max-height:170px;
    overflow:auto;
    border:1px solid #1b2737;
    border-radius:10px;
    padding:8px;
    background:#0b121b;
  }
  .saved-account-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
  }
  .saved-account-use{
    border:0;
    background:transparent;
    color:#cfe0ff;
    text-align:left;
    cursor:pointer;
    padding:2px 0;
    flex:1;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .saved-account-actions{
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
  }
  .saved-account-edit{
    padding:4px 8px;
    font-size:11px;
  }
  .saved-account-del{
    padding:4px 8px;
    min-width:30px;
  }
  .saved-account-empty{
    color:#8295ad;
    font-size:12px;
  }
  .checkout-message{
    min-height:16px;
    margin-top:4px;
    font-size:12px;
    color:#9fb0c8;
  }
  .checkout-message.err{color:#ff9cab}
  .checkout-link-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:8px;
    padding:6px 10px;
    border-radius:8px;
    border:1px solid #4452bb;
    background:#4452bb;
    color:#ffffff;
    font-size:12px;
    text-decoration:none;
  }
  .checkout-link-btn:hover{
    background:#3b48a7;
    color:#ffffff;
  }

  .wishlist-modal{
    position:fixed;
    inset:0;
    z-index:12000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:16px;
  }
  .wishlist-modal.open{display:flex}
  .wishlist-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.5);
  }
  .wishlist-modal-sheet{
    position:relative;
    width:min(420px,92vw);
    background:#141925;
    border:1px solid #263041;
    border-radius:18px;
    padding:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.45);
  }
  .wishlist-modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
  }
  .wishlist-modal-title{
    font-size:19px;
    font-weight:800;
    margin:0;
    color:#ffffff;
    text-align:center;
    width:100%;
  }
  .wishlist-modal-close{
    width:32px;
    height:32px;
    min-width:32px;
    border-radius:999px;
    border:1px solid #2d3441;
    background:#0f141d;
    color:#dbe5f5;
    font-size:18px;
    line-height:1;
    cursor:pointer;
  }
  .wishlist-modal-text{
    margin:6px 0 10px 0;
    color:#b4bfd4;
    font-size:13px;
    line-height:1.35;
    text-align:center;
  }
  .wishlist-preview-wrap{
    border-radius:12px;
    min-height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .wishlist-preview-wrap .pic{
    width:min(240px,70vw);
    min-height:0;
    height:min(240px,70vw);
    border-radius:12px;
    border:0;
    background:transparent;
  }
  .wishlist-modal-actions{
    display:flex;
    gap:8px;
    margin-top:10px;
  }
  .wishlist-modal-actions .btn{
    flex:1;
    padding:9px 12px;
    font-size:13px;
    font-weight:700;
  }
  .wishlist-modal-actions .btn.secondary{
    background:#0f141d;
    border-color:#2b3344;
    color:#d5e0f5;
  }

  @media (max-width: 900px){
    #promo-input,
    #discord-login,
    #discord-password,
    #discord-backup-code{
      font-size:16px !important;
    }
  }
  .card-swatches{
    position:absolute;
    left:8px;
    right:8px;
    bottom:48px;
    z-index:3;
    justify-content:center;
    padding:0;
    margin:0;
  }
  .card-swatches .variant-dot{
    border-color:#f2f6ff;
  }