/* =====================================================================
   TGRank — «Оптовые предложения» v2 (02.11.2026): список-строки, как «Скидочные каналы» и таблица каталога.
   Строка = набор: стопка аватарок · название, охват и состав · цены форматов · скидка с экономией · кнопка.
   Подключается после wholesale.css (scripts/patch_wholesale_pro.php).
   ===================================================================== */
@media (min-width: 993px) {
    html body:not(#tpx) .wholesale-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; border-radius: 16px; overflow: hidden;
        border: 1px solid #e6ebf2; background: #fff; box-shadow: 0 16px 34px -28px rgba(15,23,42,.45); }

    html body:not(#tpx) .wholesale-grid .premium-bundle-card {
        display: grid !important; align-items: center; column-gap: 16px; row-gap: 4px; height: auto !important; min-height: 0 !important;
        grid-template-columns: 74px minmax(220px, 1.6fr) minmax(200px, 1fr) 118px 196px;
        grid-template-areas: "a t p b c" "a i p b c" "a l p b c";
        padding: 14px 16px !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid #eef2f6 !important; border-radius: 0 !important;
        background: #fff !important; box-shadow: none !important; transform: none !important; position: relative; overflow: visible !important; transition: background .2s !important;
    }
    html body:not(#tpx) .wholesale-grid .premium-bundle-card:last-child { border-bottom: 0 !important; }
    html body:not(#tpx) .wholesale-grid .premium-bundle-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; height: auto; border-radius: 0;
        background: linear-gradient(#8b5cf6, #06b6d4) !important; opacity: 0; transition: opacity .2s; }
    html body:not(#tpx) .wholesale-grid .premium-bundle-card:hover { background: #fbfcfe !important; transform: none !important; box-shadow: none !important; }
    html body:not(#tpx) .wholesale-grid .premium-bundle-card:hover::before { opacity: 1; }
    html body:not(#tpx) .wholesale-grid .premium-bundle-card::after { display: none !important; }

    /* обёртки растворяются — их дети встают в общую сетку строки */
    html body:not(#tpx) .wholesale-grid .premium-bundle-card > div:first-child,
    html body:not(#tpx) .wholesale-grid .card-top-flex-header,
    html body:not(#tpx) .wholesale-grid .header-left-side { display: contents !important; }
    html body:not(#tpx) .wholesale-grid .premium-bundle-card > div:last-child { grid-area: c; }

    /* ---- стопка аватарок ---- */
    html body:not(#tpx) .wholesale-grid .avatar-stack-container { grid-area: a; align-self: center; display: flex; margin: 0 !important; }
    html body:not(#tpx) .wholesale-grid .avatar-stack-item { width: 34px !important; height: 34px !important; border: 2px solid #fff !important; margin-left: -12px !important; box-shadow: 0 3px 8px -3px rgba(15,23,42,.4); }
    html body:not(#tpx) .wholesale-grid .avatar-stack-item:first-child { margin-left: 0 !important; }

    /* ---- название, мета, состав ---- */
    html body:not(#tpx) .wholesale-grid .card-bundle-title { grid-area: t; margin: 0 !important; font-size: 14.5px !important; font-weight: 800 !important; color: #0f172a !important;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: none !important; }
    html body:not(#tpx) .wholesale-grid .card-bundle-info { grid-area: i; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
    html body:not(#tpx) .wholesale-grid .card-bundle-meta-row { border: 0 !important; padding: 0 !important; margin: 0 !important; display: flex !important; gap: 12px; justify-content: flex-start !important; font-size: 11.5px !important; color: #64748b !important; }
    html body:not(#tpx) .wholesale-grid .meta-subs { color: #0f766e !important; font-weight: 700; }
    html body:not(#tpx) .wholesale-grid .bundle-channels-list-box { grid-area: l; display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 5px; margin: 2px 0 0 !important; padding: 0 !important;
        border: 0 !important; background: none !important; box-shadow: none !important; min-width: 0; }
    html body:not(#tpx) .wholesale-grid .bundle-channels-list-box::before { display: none !important; }
    html body:not(#tpx) .wholesale-grid .bundle-channel-item { display: inline-flex !important; align-items: center; gap: 5px; padding: 3px 8px 3px 3px !important; margin: 0 !important;
        border-radius: 999px !important; background: #f5f7fb !important; border: 1px solid #edf1f6 !important; max-width: 220px; min-width: 0; width: auto !important; flex: 0 1 auto !important; justify-content: flex-start !important; }
    html body:not(#tpx) .wholesale-grid .channel-link-anchor { display: inline-flex !important; align-items: center; gap: 5px; min-width: 0; }
    html body:not(#tpx) .wholesale-grid .channel-item-avatar { width: 18px !important; height: 18px !important; }
    html body:not(#tpx) .wholesale-grid .channel-item-title { font-size: 11.5px !important; font-weight: 600; color: #334155 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
    html body:not(#tpx) .wholesale-grid .channel-item-subs-badge { padding: 0 !important; background: none !important; border: 0 !important; font-size: 10.5px !important; color: #64748b !important; }
    html body:not(#tpx) .wholesale-grid .channel-item-subs-badge svg { display: none; }

    /* ---- цены ---- */
    html body:not(#tpx) .wholesale-grid .card-price-list { grid-area: p; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; display: flex; flex-direction: column; gap: 2px; }
    html body:not(#tpx) .wholesale-grid .price-item-row { display: flex !important; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 !important; padding: 0 !important; }
    html body:not(#tpx) .wholesale-grid .price-label { font-size: 11px !important; color: #94a3b8 !important; font-weight: 600; white-space: nowrap; }
    html body:not(#tpx) .wholesale-grid .price-values { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
    html body:not(#tpx) .wholesale-grid .price-old { font-size: 10.5px !important; }
    html body:not(#tpx) .wholesale-grid .price-current { font-size: 13px !important; font-weight: 800 !important; color: #0f172a !important; }
    html body:not(#tpx) .wholesale-grid .price-item-row:last-child .price-current { color: #059669 !important; }

    /* ---- скидка + экономия ---- */
    html body:not(#tpx) .wholesale-grid .bundle-badge-discount {
        grid-area: b; position: relative !important; top: auto !important; right: auto !important; justify-self: center;
        display: flex !important; flex-direction: column; align-items: center; gap: 3px; padding: 6px 10px !important; border-radius: 12px !important;
        font-size: 15px !important; font-weight: 900 !important; line-height: 1; color: #fff !important; min-width: 84px;
        background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important; box-shadow: 0 8px 16px -10px rgba(109,40,217,.9) !important; overflow: hidden;
    }
    html body:not(#tpx) .wholesale-grid .bundle-badge-discount::after {
        content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; transform: skewX(-18deg);
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); animation: wpShine 5s ease-in-out infinite;
    }
    @keyframes wpShine { 0%, 70% { left: -80%; } 100% { left: 160%; } }
    html body:not(#tpx) .wholesale-grid .bnd-save { font-size: 9.5px; font-weight: 700; white-space: nowrap; opacity: .95; }

    /* ---- кнопка ---- */
    html body:not(#tpx) .wholesale-grid .btn-bundle-action {
        margin: 0 !important; padding: 9px 10px !important; border-radius: 10px !important; font-size: 12.5px !important; font-weight: 800 !important; white-space: nowrap;
        background: linear-gradient(135deg, #10b981, #06b6d4) !important; color: #fff !important; box-shadow: 0 6px 14px -8px rgba(6,182,212,.8) !important; transition: transform .2s, filter .2s !important;
    }
    html body:not(#tpx) .wholesale-grid .btn-bundle-action:hover { transform: translateY(-1px); filter: saturate(1.15) brightness(1.05); }

    /* ---- тёмная тема ---- */
    html[data-theme="dark"] body:not(#tpx) .wholesale-grid { background: #111d33; border-color: rgba(125,165,220,.16); }
    html[data-theme="dark"] body:not(#tpx) .wholesale-grid .premium-bundle-card { background: #111d33 !important; border-bottom-color: rgba(125,165,220,.12) !important; }
    html[data-theme="dark"] body:not(#tpx) .wholesale-grid .premium-bundle-card:hover { background: #14223b !important; }
    html[data-theme="dark"] body:not(#tpx) .wholesale-grid :is(.card-bundle-title, .price-current) { color: #e6edf7 !important; }
    html[data-theme="dark"] body:not(#tpx) .wholesale-grid .price-item-row:last-child .price-current { color: #34d399 !important; }
    html[data-theme="dark"] body:not(#tpx) .wholesale-grid .bundle-channel-item { background: rgba(255,255,255,.04) !important; border-color: rgba(125,165,220,.14) !important; }
    html[data-theme="dark"] body:not(#tpx) .wholesale-grid .channel-item-title { color: #c6d4e6 !important; }
    html[data-theme="dark"] body:not(#tpx) .wholesale-grid .avatar-stack-item { border-color: #111d33 !important; }
}

/* телефон: бейдж «−15% · экономия» */
@media (max-width: 992px) {
    html body:not(#tpx) .wholesale-grid .bundle-badge-discount { display: inline-flex !important; flex-direction: column; align-items: center; line-height: 1.05; }
    html body:not(#tpx) .wholesale-grid .bnd-save { font-size: 9px; font-weight: 700; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { html body:not(#tpx) .wholesale-grid .bundle-badge-discount::after { animation: none; } }