/* OUTER */
            .outer {
                max-width: 1520px;
                margin: 0 auto;
                padding: 28px 28px 50px;
            }

            /* HERO */
            .shop-hero {
                background: var(--bg1);
                border: 1px solid var(--ln2);
                border-radius: 20px;
                overflow: hidden;
                margin-bottom: 22px;
                position: relative;
            }

            .hero-bg {
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg,rgba(13,71,161,.55) 0%,rgba(0,188,212,.12) 50%,rgba(206,147,216,.08) 100%);
            }

            .hero-bg::before {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(ellipse at 75% 50%,rgba(33,150,243,.1) 0%,transparent 70%);
            }

            .hero-grid {
                position: absolute;
                inset: 0;
                background-image: linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
                background-size: 32px 32px;
                mask-image: linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 40%,rgba(0,0,0,.4) 60%,transparent 100%);
            }

            .hero-inner {
                position: relative;
                z-index: 1;
                padding: 26px 28px 22px;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 20px;
                flex-wrap: wrap;
            }

            .hero-badge {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 4px 12px;
                border-radius: 20px;
                background: rgba(206,147,216,.12);
                border: 1px solid rgba(206,147,216,.3);
                color: var(--pu);
                font-size: 11px;
                font-weight: 800;
                letter-spacing: .4px;
                text-transform: uppercase;
                margin-bottom: 12px;
            }

            .hero-title {
                font-family: 'Rajdhani',sans-serif;
                font-size: 26px;
                font-weight: 700;
                letter-spacing: .5px;
                line-height: 1.1;
                margin-bottom: 6px;
            }

            .hero-title em {
                color: var(--pu);
                font-style: normal;
            }

            .hero-sub {
                font-size: 13px;
                color: var(--mid);
                font-weight: 600;
            }

            .hero-pills {
                display: flex;
                flex-direction: column;
                gap: 10px;
                flex-shrink: 0;
            }

            .info-pill {
                display: flex;
                align-items: flex-start;
                gap: 11px;
                padding: 12px 15px;
                background: rgba(255,255,255,.04);
                border: 1px solid var(--ln2);
                border-radius: 13px;
                min-width: 210px;
            }

            .iico {
                width: 30px;
                height: 30px;
                border-radius: 9px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .iico svg {
                width: 14px;
                height: 14px;
            }

            .ipu {
                background: rgba(206,147,216,.1);
                border: 1px solid rgba(206,147,216,.2);
            }

            .ipu svg {
                color: var(--pu);
            }

            .igr {
                background: rgba(41,194,122,.1);
                border: 1px solid rgba(41,194,122,.2);
            }

            .igr svg {
                color: var(--gr);
            }

            .ipt {
                font-size: 11px;
                font-weight: 800;
                color: var(--wh);
                margin-bottom: 2px;
            }

            .ips {
                font-size: 11px;
                color: var(--mid);
                line-height: 1.5;
            }

            /* 2-COL LAYOUT */
            .layout {
                display: grid;
                grid-template-columns: 262px 1fr;
                gap: 18px;
                align-items: start;
            }

            /* SIDEBAR */
            .sidebar {
                position: sticky;
                top: 86px;
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .scard {
                background: var(--bg1);
                border: 1px solid var(--ln2);
                border-radius: 16px;
                overflow: hidden;
            }

            .scard-hdr {
                padding: 12px 15px;
                border-bottom: 1px solid var(--ln);
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .scard-hdr svg {
                width: 14px;
                height: 14px;
                color: var(--bl2);
                flex-shrink: 0;
            }

            .scard-hdr-t {
                font-family: 'Rajdhani',sans-serif;
                font-size: 13px;
                font-weight: 700;
                letter-spacing: .4px;
            }

            .scard-body {
                padding: 8px;
            }

            .srv-list {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }

            .srv-btn {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px 11px;
                border-radius: 9px;
                font-size: 12px;
                font-weight: 700;
                color: var(--mid);
                cursor: pointer;
                transition: all .18s;
                user-select: none;
                border: 1px solid transparent;
            }

            .srv-btn:hover {
                background: var(--bg3);
                color: var(--wh);
                border-color: var(--ln2);
            }

            .srv-btn.on {
                background: rgba(33,150,243,.1);
                border-color: var(--bl);
                color: var(--bl2);
            }

            .srv-dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--gr);
                flex-shrink: 0;
                box-shadow: 0 0 6px rgba(41,194,122,.6);
            }

            .srv-label {
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 11.5px;
            }

            .srv-num {
                margin-left: auto;
                flex-shrink: 0;
                font-size: 10px;
                background: rgba(33,150,243,.12);
                border: 1px solid rgba(33,150,243,.2);
                color: var(--bl2);
                padding: 1px 6px;
                border-radius: 5px;
                font-weight: 700;
            }

            .cat-list {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .cat-btn {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 8px 11px;
                border-radius: 9px;
                font-size: 12.5px;
                font-weight: 700;
                color: var(--mid);
                cursor: pointer;
                transition: all .18s;
                user-select: none;
                border: 1px solid transparent;
            }

            .cat-btn:hover {
                background: var(--bg3);
                color: var(--wh);
            }

            .cat-btn.on {
                background: rgba(206,147,216,.09);
                border-color: rgba(206,147,216,.28);
                color: var(--pu);
            }

            .cat-count {
                font-size: 10px;
                font-weight: 700;
                padding: 1px 6px;
                border-radius: 5px;
                background: var(--bg2);
                border: 1px solid var(--ln);
                color: var(--dim);
            }

            .cat-btn.on .cat-count {
                background: rgba(206,147,216,.12);
                border-color: rgba(206,147,216,.22);
                color: var(--pu);
            }

            .stat-rows {
                display: flex;
                flex-direction: column;
            }

            .stat-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 8px 15px;
                border-bottom: 1px solid var(--ln);
            }

            .stat-row:last-child {
                border-bottom: none;
            }

            .stat-lbl {
                font-size: 11.5px;
                color: var(--dim);
                font-weight: 600;
            }

            .stat-val {
                font-family: 'Rajdhani',sans-serif;
                font-size: 15px;
                font-weight: 700;
            }

            .sv-wh {
                color: var(--wh);
            }

            .sv-gd {
                color: var(--gd);
            }

            .sv-gr {
                color: var(--gr);
            }

            /* CONTENT BLOCK */
            .content-block {
                background: var(--bg1);
                border: 1px solid var(--ln2);
                border-radius: 20px;
                overflow: hidden;
                position: relative;
            }

            .content-block::before {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 0;
                background-image: linear-gradient(rgba(33,150,243,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(33,150,243,.022) 1px,transparent 1px);
                background-size: 38px 38px;
            }

            .content-block::after {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 0;
                background: radial-gradient(ellipse at 80% 0%,rgba(206,147,216,.04) 0%,transparent 60%);
            }

            .ci {
                position: relative;
                z-index: 1;
            }
			/* topbar */
            .topbar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 14px 18px;
                border-bottom: 1px solid var(--ln2);
                background: rgba(255,255,255,.015);
                flex-wrap: wrap;
                gap: 10px;
            }

            .topbar-l {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .topbar-ttl {
                font-family: 'Rajdhani',sans-serif;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: .4px;
            }

            .topbar-cnt {
                font-size: 11.5px;
                color: var(--mid);
            }

            .topbar-cnt strong {
                color: var(--wh);
            }

            .sort-wrap {
                position: relative;
            }

            .sort-wrap::after {
                content: '';
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                width: 0;
                height: 0;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 5px solid var(--mid);
                pointer-events: none;
            }

            .sort-sel {
                padding: 7px 28px 7px 10px;
                background: var(--bg2);
                border: 1px solid var(--ln2);
                border-radius: 9px;
                color: var(--mid);
                font-family: 'Nunito',sans-serif;
                font-size: 12px;
                font-weight: 600;
                appearance: none;
                cursor: pointer;
                outline: none;
                transition: border-color .15s;
            }

            .sort-sel:hover,.sort-sel:focus {
                border-color: rgba(33,150,243,.4);
                color: var(--wh);
            }

            .sort-sel option {
                background: var(--bg2);
            }

            /* grid area */
            .grid-area {
                padding: 16px;
            }

            /* GRID */
            .skins-grid {
                display: grid;
                grid-template-columns: repeat(4,1fr);
                gap: 12px;
            }

            /* SKIN CARD */
            .skin-card {
                background: var(--bg2);
                border: 1px solid var(--ln2);
                border-radius: 15px;
                overflow: hidden;
                transition: border-color .22s,transform .22s,box-shadow .22s;
                position: relative;
                display: flex;
                flex-direction: column;
            }

            .skin-card:hover {
                border-color: rgba(206,147,216,.3);
                transform: translateY(-3px);
                box-shadow: 0 10px 36px rgba(0,0,0,.55);
            }

            .skin-card.th::before {
                content: 'ХИТ';
                position: absolute;
                top: 10px;
                right: -14px;
                background: var(--rd);
                color: #fff;
                font-size: 8px;
                font-weight: 900;
                padding: 3px 22px;
                transform: rotate(35deg);
                letter-spacing: .4px;
                z-index: 3;
            }

            .skin-card.tn::before {
                content: 'NEW';
                position: absolute;
                top: 10px;
                right: -14px;
                background: var(--gr);
                color: #000;
                font-size: 8px;
                font-weight: 900;
                padding: 3px 22px;
                transform: rotate(35deg);
                letter-spacing: .4px;
                z-index: 3;
            }

            .skin-card.ts::before {
                content: 'СКИДКА';
                position: absolute;
                top: 10px;
                right: -16px;
                background: var(--gd);
                color: #000;
                font-size: 7px;
                font-weight: 900;
                padding: 3px 23px;
                transform: rotate(35deg);
                letter-spacing: .3px;
                z-index: 3;
            }

            .skin-prev {
                height: 122px;
                position: relative;
                overflow: hidden;
                flex-shrink: 0;
            }

            .spbg {
                position: absolute;
                inset: 0;
            }

            .a {
                background: linear-gradient(135deg,rgba(80,110,40,.6),rgba(40,60,20,.4)),repeating-conic-gradient(rgba(255,255,255,.025) 0% 25%,transparent 0% 50%) 0 0/16px 16px;
            }

            .m {
                background: linear-gradient(135deg,rgba(21,101,192,.5),rgba(13,50,100,.4)),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px;
            }

            .f {
                background: linear-gradient(135deg,rgba(160,50,120,.45),rgba(90,20,80,.35)),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px;
            }

            .c {
                background: linear-gradient(135deg,rgba(0,188,212,.35),rgba(0,80,120,.4)),linear-gradient(rgba(0,188,212,.04) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,rgba(0,188,212,.04) 1px,transparent 1px) 0 0/18px 18px;
            }

            .skin-ico {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .skin-ico svg {
                width: 52px;
                height: 52px;
                opacity: .16;
            }

            .skin-badge {
                position: absolute;
                top: 7px;
                left: 7px;
                padding: 2px 7px;
                border-radius: 6px;
                font-size: 9px;
                font-weight: 800;
                letter-spacing: .3px;
            }

            .ba {
                background: rgba(100,150,40,.18);
                border: 1px solid rgba(100,150,40,.3);
                color: #9cbd5a;
            }

            .bm {
                background: rgba(33,150,243,.12);
                border: 1px solid rgba(33,150,243,.22);
                color: var(--bl2);
            }

            .bf {
                background: rgba(206,147,216,.12);
                border: 1px solid rgba(206,147,216,.22);
                color: var(--pu);
            }

            .bc {
                background: rgba(0,188,212,.1);
                border: 1px solid rgba(0,188,212,.2);
                color: var(--cy);
            }

            .skin-price {
                position: absolute;
                bottom: 7px;
                right: 7px;
                background: rgba(16,19,26,.88);
                border: 1px solid var(--ln2);
                border-radius: 7px;
                padding: 3px 8px;
                font-family: 'Rajdhani',sans-serif;
                font-size: 13px;
                font-weight: 700;
                color: var(--gd);
            }

            .skin-body {
                padding: 10px 12px 12px;
                flex: 1;
                display: flex;
                flex-direction: column;
            }

            .skin-name {
                font-family: 'Rajdhani',sans-serif;
                font-size: 13px;
                font-weight: 700;
                color: var(--wh);
                margin-bottom: 4px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .skin-desc {
                font-size: 11px;
                color: var(--mid);
                line-height: 1.45;
                flex: 1;
                margin-bottom: 9px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .skin-acts {
                display: flex;
                gap: 6px;
            }

            .sbuy {
                flex: 1;
                padding: 7px 6px;
                background: linear-gradient(135deg,var(--bl3),var(--bl));
                border: none;
                border-radius: 8px;
                color: #fff;
                font-family: 'Rajdhani',sans-serif;
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                transition: all .18s;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                position: relative;
                overflow: hidden;
            }

            .sbuy::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg,var(--bl),var(--cy));
                opacity: 0;
                transition: opacity .18s;
            }

            .sbuy:hover::before {
                opacity: 1;
            }

            .sbuy:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 14px rgba(33,150,243,.35);
            }

            .sbuy span,.sbuy svg {
                position: relative;
                z-index: 1;
            }

            .sbuy svg {
                width: 11px;
                height: 11px;
            }

            .sdet {
                width: 32px;
                height: 32px;
                border-radius: 8px;
                background: var(--bg3);
                border: 1px solid var(--ln2);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: var(--dim);
                transition: all .18s;
                flex-shrink: 0;
            }

            .sdet:hover {
                border-color: rgba(206,147,216,.4);
                color: var(--pu);
            }

            .sdet svg {
                width: 13px;
                height: 13px;
            }

            .empty-st {
                grid-column: 1/-1;
                text-align: center;
                padding: 50px 20px;
            }

            .empty-ico {
                width: 56px;
                height: 56px;
                border-radius: 16px;
                background: var(--bg2);
                border: 1px solid var(--ln2);
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 14px;
            }

            .empty-ico svg {
                width: 24px;
                height: 24px;
                color: var(--dim);
            }

            .empty-ttl {
                font-family: 'Rajdhani',sans-serif;
                font-size: 16px;
                font-weight: 700;
                color: var(--mid);
                margin-bottom: 5px;
            }

            .empty-sub {
                font-size: 12px;
                color: var(--dim);
            }

            /* PAGINATION */
            .pag-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 14px 18px;
                border-top: 1px solid var(--ln2);
                margin-top: 16px;
                flex-wrap: wrap;
                gap: 10px;
            }

            .pag-info {
                font-size: 11.5px;
                color: var(--dim);
            }

            .pag-info strong {
                color: var(--mid);
            }

            .pag-btns {
                display: flex;
                align-items: center;
                gap: 4px;
            }

            .pg {
                width: 32px;
                height: 32px;
                border-radius: 8px;
                background: var(--bg2);
                border: 1px solid var(--ln2);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: var(--mid);
                font-family: 'Rajdhani',sans-serif;
                font-size: 13px;
                font-weight: 700;
                transition: all .18s;
                user-select: none;
            }

            .pg:hover {
                border-color: rgba(33,150,243,.4);
                color: var(--wh);
                background: var(--bg3);
            }

            .pg.on {
                background: rgba(33,150,243,.13);
                border-color: var(--bl);
                color: var(--bl2);
            }

            .pg.off {
                opacity: .3;
                pointer-events: none;
            }

            .pg svg {
                width: 13px;
                height: 13px;
            }

            .pg-dots {
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--dim);
                font-size: 13px;
            }
			.mhdr {
                padding: 15px 17px;
                display: flex;
                align-items: center;
                gap: 10px;
                border-bottom: 1px solid var(--ln);
            }

            .mhdr-ico {
                width: 36px;
                height: 36px;
                border-radius: 10px;
                background: rgba(206,147,216,.12);
                border: 1px solid rgba(206,147,216,.2);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .mhdr-ico svg {
                width: 16px;
                height: 16px;
                color: var(--pu);
            }

            .mhdr-t {
                font-family: 'Rajdhani',sans-serif;
                font-size: 15px;
                font-weight: 700;
                flex: 1;
            }

            .mclose {
                width: 28px;
                height: 28px;
                border-radius: 7px;
                background: transparent;
                border: 1px solid var(--ln);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: var(--dim);
                transition: all .15s;
            }

            .mclose:hover {
                border-color: var(--rd);
                color: var(--rd);
            }

            .mclose svg {
                width: 12px;
                height: 12px;
            }

            .mbody {
                padding: 16px;
            }

            .mprev {
                height: 170px;
                border-radius: 12px;
                overflow: hidden;
                position: relative;
                margin-bottom: 14px;
            }

            .mprev-ico {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .mprev-ico svg {
                width: 84px;
                height: 84px;
                opacity: .2;
            }

            .mprev-price {
                position: absolute;
                bottom: 10px;
                right: 10px;
                background: rgba(16,19,26,.88);
                border: 1px solid rgba(255,179,0,.3);
                border-radius: 8px;
                padding: 4px 11px;
                font-family: 'Rajdhani',sans-serif;
                font-size: 16px;
                font-weight: 700;
                color: var(--gd);
            }

            .mdesc {
                font-size: 12.5px;
                color: var(--mid);
                line-height: 1.65;
                margin-bottom: 13px;
            }

            .mfeats {
                display: flex;
                flex-direction: column;
                gap: 5px;
                margin-bottom: 16px;
            }

            .mfeat {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 7px 10px;
                background: var(--bg2);
                border: 1px solid var(--ln);
                border-radius: 8px;
            }

            .mfi {
                width: 20px;
                height: 20px;
                border-radius: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .mfi svg {
                width: 10px;
                height: 10px;
            }

            .mfgr {
                background: rgba(41,194,122,.1);
                border: 1px solid rgba(41,194,122,.2);
            }

            .mfgr svg {
                color: var(--gr);
            }

            .mfbl {
                background: rgba(33,150,243,.08);
                border: 1px solid rgba(33,150,243,.15);
            }

            .mfbl svg {
                color: var(--bl2);
            }

            .mfpu {
                background: rgba(206,147,216,.08);
                border: 1px solid rgba(206,147,216,.15);
            }

            .mfpu svg {
                color: var(--pu);
            }

            .mfgd {
                background: rgba(255,179,0,.08);
                border: 1px solid rgba(255,179,0,.15);
            }

            .mfgd svg {
                color: var(--gd);
            }

            .mft {
                font-size: 11.5px;
                color: var(--wh);
                font-weight: 600;
            }

            .mslbl {
                font-size: 10px;
                font-weight: 800;
                color: var(--dim);
                letter-spacing: .4px;
                text-transform: uppercase;
                margin-bottom: 5px;
            }

            .mswrap {
                position: relative;
                margin-bottom: 13px;
            }

            .mswrap::after {
                content: '';
                position: absolute;
                right: 11px;
                top: 50%;
                transform: translateY(-50%);
                width: 0;
                height: 0;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 5px solid var(--mid);
                pointer-events: none;
            }

            .mswrap select {
                width: 100%;
                padding: 9px 32px 9px 12px;
                background: var(--bg2);
                border: 1px solid var(--ln2);
                border-radius: 9px;
                color: var(--wh);
                font-family: 'Nunito',sans-serif;
                font-size: 12.5px;
                font-weight: 600;
                appearance: none;
                cursor: pointer;
                outline: none;
                transition: border-color .18s;
            }

            .mswrap select:focus {
                border-color: var(--bl);
            }

            .mbuybtn {
                width: 100%;
                padding: 12px 16px;
                border-radius: 11px;
                background: linear-gradient(135deg,var(--bl3),var(--bl));
                border: none;
                color: #fff;
                font-family: 'Rajdhani',sans-serif;
                font-size: 15px;
                font-weight: 700;
                letter-spacing: .5px;
                cursor: pointer;
                transition: all .2s;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                position: relative;
                overflow: hidden;
            }

            .mbuybtn::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg,var(--bl),var(--cy));
                opacity: 0;
                transition: opacity .2s;
            }

            .mbuybtn:hover::before {
                opacity: 1;
            }

            .mbuybtn:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 22px rgba(33,150,243,.38);
            }

            .mbuybtn span,.mbuybtn svg {
                position: relative;
                z-index: 1;
            }

            .mbuybtn svg {
                width: 14px;
                height: 14px;
            }
			.skin-ico img, .mprev-ico img{
				width: 100%;
				object-fit: cover;
			}
			
			
			/* Полностью убираем все "точки" у toggle-кнопок */
.btn-group-toggle input[type="radio"] {
    display: none;
}

.btn-group-toggle .btn:focus,
.btn-group-toggle .btn.focus,
.btn-group-toggle .btn:active:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Дополнительно: убираем синюю тень при клике (Bootstrap 4) */
.btn-group-toggle .btn-primary:focus {
    box-shadow: none;
}
			/* ── PAGE WRAPPER ── */
.page.rcon{max-width:1520px;margin:0 auto;padding:30px 28px 50px;display:grid;grid-template-columns:1fr 380px;gap:26px;align-items:start;}

/* ── SECTION TITLE ── */
.sec-title{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.sec-title svg{width:18px;height:18px;color:var(--bl2);flex-shrink:0;}
.sec-title-text{font-family:'Rajdhani',sans-serif;font-size:17px;font-weight:700;letter-spacing:.5px;}

/* ── CARD BASE ── */
.card{background:var(--bg1);border:1px solid var(--ln2);border-radius:18px;overflow:hidden;margin-bottom:20px;}
.card-hdr{padding:14px 20px;border-bottom:1px solid var(--ln);display:flex;align-items:center;gap:10px;}
.card-hdr svg{width:16px;height:16px;color:var(--bl2);flex-shrink:0;}
.card-hdr-t{font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;letter-spacing:.4px;flex:1;}
.card-body{padding:20px;}

/* ── HERO BANNER ── */
.shop-hero{background:var(--bg1);border:1px solid var(--ln2);border-radius:20px;overflow:hidden;margin-bottom:22px;position:relative;}
.shop-hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,71,161,.6) 0%,rgba(0,188,212,.15) 50%,rgba(255,179,0,.08) 100%);}
.shop-hero-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(33,150,243,.12) 0%,transparent 70%);}
.shop-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 40%,rgba(0,0,0,.4) 60%,transparent 100%);}
.shop-hero-inner{position:relative;z-index:1;padding:28px 28px 24px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
.shop-hero-left{}
.shop-hero-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;background:rgba(255,179,0,.12);border:1px solid rgba(255,179,0,.3);color:var(--gd);font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;margin-bottom:12px;}
.shop-hero-badge svg{width:11px;height:11px;}
.shop-hero-title{font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:700;letter-spacing:.5px;line-height:1.1;margin-bottom:6px;}
.shop-hero-title em{color:var(--bl2);font-style:normal;}
.shop-hero-sub{font-size:13px;color:var(--mid);font-weight:600;}
.shop-hero-right{display:flex;flex-direction:column;gap:10px;flex-shrink:0;}
.info-pill{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;background:rgba(255,255,255,.04);border:1px solid var(--ln2);border-radius:14px;min-width:220px;}
.info-pill-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.info-pill-ico svg{width:15px;height:15px;}
.info-pill-ico.bl{background:rgba(33,150,243,.1);border:1px solid rgba(33,150,243,.2);}
.info-pill-ico.bl svg{color:var(--bl2);}
.info-pill-ico.gr{background:rgba(41,194,122,.1);border:1px solid rgba(41,194,122,.2);}
.info-pill-ico.gr svg{color:var(--gr);}
.info-pill-body{}
.info-pill-title{font-size:11px;font-weight:800;color:var(--wh);margin-bottom:3px;letter-spacing:.2px;}
.info-pill-text{font-size:11.5px;color:var(--mid);line-height:1.5;}

/* ── HOW-TO BOX ── */
.howto-card{background:var(--bg1);border:1px solid var(--ln2);border-radius:18px;overflow:hidden;margin-bottom:20px;}
.howto-tabs{display:flex;border-bottom:1px solid var(--ln);}
.htab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 10px;font-size:12.5px;font-weight:700;color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;transition:all .16s;text-align:center;}
.htab svg{width:14px;height:14px;flex-shrink:0;}
.htab:hover{color:var(--wh);}
.htab.on{color:var(--bl2);border-bottom-color:var(--bl2);}
.htab-panel{display:none;padding:18px 20px;}
.htab-panel.on{display:block;}
.htab-steps{display:flex;flex-direction:column;gap:10px;}
.htab-step{display:flex;align-items:flex-start;gap:12px;}
.htab-num{width:22px;height:22px;border-radius:7px;background:rgba(33,150,243,.12);border:1px solid rgba(33,150,243,.22);color:var(--bl2);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.htab-step-text{font-size:12.5px;color:var(--mid);line-height:1.55;}
.htab-step-text strong{color:var(--wh);font-weight:700;}
.cmd{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.4);border:1px solid rgba(33,150,243,.2);border-radius:7px;padding:3px 10px;font-family:monospace;font-size:12px;color:var(--cy);margin-top:5px;cursor:pointer;transition:all .15s;user-select:all;}
.cmd:hover{border-color:var(--cy);background:rgba(0,188,212,.06);}
.cmd svg{width:11px;height:11px;color:var(--dim);}
.bind-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
.bind-row{display:flex;align-items:center;gap:10px;}
.bind-key{padding:3px 9px;background:rgba(33,150,243,.08);border:1px solid rgba(33,150,243,.2);border-radius:6px;font-family:monospace;font-size:11px;color:var(--bl2);font-weight:700;white-space:nowrap;}
.bind-arrow{color:var(--dim);font-size:11px;}
.bind-val{font-size:12px;color:var(--mid);}

/* ── SELECT WRAPPER ── */
.sel-group{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.sel-label{font-size:11.5px;font-weight:800;color:var(--mid);letter-spacing:.3px;text-transform:uppercase;display:flex;align-items:center;gap:6px;}
.sel-label svg{width:13px;height:13px;color:var(--bl2);}
.sel-wrap{position:relative;}
.sel-wrap::after{content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--mid);pointer-events:none;transition:border-color .15s;}
.sel-wrap:hover::after{border-top-color:var(--bl2);}
select{width:100%;padding:11px 38px 11px 14px;background:var(--bg2);border:1px solid var(--ln2);border-radius:12px;color:var(--wh);font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;appearance:none;cursor:pointer;transition:border-color .18s,background .18s;outline:none;}
select:hover{border-color:rgba(33,150,243,.4);background:var(--bg3);}
select:focus{border-color:var(--bl);box-shadow:0 0 0 3px rgba(33,150,243,.12);}
select option{background:var(--bg2);color:var(--wh);}
select:disabled{opacity:.4;cursor:not-allowed;}

/* ── TARIFF CARDS ── */
.tariff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
.tariff-card{padding:13px 14px;background:var(--bg2);border:1px solid var(--ln2);border-radius:13px;cursor:pointer;transition:all .18s;position:relative;overflow:hidden;}
.tariff-card:hover{border-color:rgba(33,150,243,.35);background:var(--bg3);}
.tariff-card.selected{border-color:var(--bl);background:rgba(33,150,243,.08);box-shadow:0 0 0 1px rgba(33,150,243,.3);}
.tariff-card.popular::before{content:'ХИТ';position:absolute;top:8px;right:-14px;background:var(--gd);color:#000;font-size:8.5px;font-weight:900;padding:2px 20px;transform:rotate(35deg);letter-spacing:.5px;}
.tariff-days{font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;color:var(--wh);line-height:1;}
.tariff-days span{font-size:12px;font-weight:600;color:var(--dim);}
.tariff-price{font-family:'Rajdhani',sans-serif;font-size:16px;font-weight:700;color:var(--bl2);margin-top:4px;}
.tariff-disc{font-size:10px;color:var(--gr);font-weight:700;margin-top:2px;}
.tariff-check{position:absolute;top:9px;right:9px;width:18px;height:18px;border-radius:50%;background:var(--bl);display:none;align-items:center;justify-content:center;}
.tariff-check svg{width:10px;height:10px;color:#fff;}
.tariff-card.selected .tariff-check{display:flex;}
.tariff-card.selected .tariff-days,.tariff-card.selected .tariff-price{color:var(--bl2);}

/* ── CHECKBOX ── */
.chk-row{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;background:rgba(33,150,243,.03);border:1px solid var(--ln);border-radius:12px;cursor:pointer;transition:all .16s;margin-bottom:18px;}
.chk-row:hover{border-color:rgba(33,150,243,.25);}
.chk-box{width:20px;height:20px;border-radius:6px;border:2px solid var(--dim);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .16s;margin-top:1px;}
.chk-box svg{width:11px;height:11px;color:#fff;display:none;}
input[type=checkbox]:checked + .chk-row .chk-box{background:var(--bl);border-color:var(--bl);}
input[type=checkbox]:checked + .chk-row .chk-box svg{display:block;}
.chk-text{font-size:12.5px;color:var(--mid);line-height:1.5;}
.chk-text a{color:var(--bl2);text-decoration:underline;}

.noty-block {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    background: rgba(33, 150, 243, .03);
    border: 1px solid var(--ln);
    border-radius: 12px;
    cursor: pointer;
    transition: all .16s;
    margin-bottom: 18px;
}

.noty-block:hover {
    border-color: rgba(33, 150, 243, .25);
}

.btn.disabled{
	opacity: 0.5;
}

.btn{
	    width: 100%;
    padding: 15px 20px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--bl3), var(--bl));
    border: none;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.btn:hover{
	transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(33, 150, 243, .38);
	
}

.form-check{
	display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: rgba(33, 150, 243, .03);
    border: 1px solid var(--ln);
    border-radius: 12px;
    cursor: pointer;
    transition: all .16s;
    margin-bottom: 18px;
}

.form-check:hover {
    border-color: rgba(33, 150, 243, .25);
}

/* manual checkbox toggle */
.chk-row.checked .chk-box{background:var(--bl);border-color:var(--bl);}
.chk-row.checked .chk-box svg{display:block;}

/* ── BUY BUTTON ── */
.buy-btn{width:100%;padding:15px 20px;border-radius:13px;background:linear-gradient(135deg,var(--bl3),var(--bl));border:none;color:#fff;font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;}
.buy-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--bl),var(--cy));opacity:0;transition:opacity .2s;}
.buy-btn:hover::before{opacity:1;}
.buy-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(33,150,243,.38);}
.buy-btn:active{transform:translateY(0);}
.buy-btn svg{width:18px;height:18px;position:relative;z-index:1;}
.buy-btn span{position:relative;z-index:1;}
.buy-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}

/* ── RIGHT SIDEBAR ── */
.priv-info-card{background:var(--bg1);border:1px solid var(--ln2);border-radius:18px;overflow:hidden;position:sticky;top:90px;}
.priv-info-hdr{padding:18px 20px;background:linear-gradient(135deg,rgba(255,179,0,.12),rgba(255,179,0,.04));border-bottom:1px solid rgba(255,179,0,.15);display:flex;align-items:center;gap:12px;}
.priv-info-ico{width:40px;height:40px;border-radius:12px;background:rgba(255,179,0,.12);border:1px solid rgba(255,179,0,.25);display:flex;align-items:center;justify-content:center;}
.priv-info-ico svg{width:18px;height:18px;color:var(--gd);}
.priv-info-t{font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;color:var(--wh);}
.priv-info-s{font-size:11px;color:var(--gd);font-weight:600;margin-top:2px;}

/* service tabs */
.stabs{display:flex;border-bottom:1px solid var(--ln);padding:0 6px;}
.stab{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 6px;font-size:11.5px;font-weight:700;color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;text-align:center;white-space:nowrap;}
.stab.on{color:var(--bl2);border-bottom-color:var(--bl);}
.stab:hover{color:var(--wh);}
.spanel{display:none;padding:16px;}
.spanel.on{display:block;}

/* feature list */
.feat-list{display:flex;flex-direction:column;gap:8px;}
.feat-item{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;background:var(--bg2);border:1px solid var(--ln);border-radius:11px;}
.feat-ico{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.feat-ico svg{width:12px;height:12px;}
.feat-ico.gd{background:rgba(255,179,0,.1);border:1px solid rgba(255,179,0,.18);}
.feat-ico.gd svg{color:var(--gd);}
.feat-ico.bl{background:rgba(33,150,243,.08);border:1px solid rgba(33,150,243,.15);}
.feat-ico.bl svg{color:var(--bl2);}
.feat-ico.gr{background:rgba(41,194,122,.08);border:1px solid rgba(41,194,122,.15);}
.feat-ico.gr svg{color:var(--gr);}
.feat-ico.rd{background:rgba(244,67,54,.08);border:1px solid rgba(244,67,54,.15);}
.feat-ico.rd svg{color:var(--rd);}
.feat-text{font-size:12px;color:var(--mid);line-height:1.45;flex:1;}
.feat-text strong{color:var(--wh);font-weight:700;font-size:12.5px;}

/* order summary */
.order-sum{padding:16px;}
.os-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--ln);}
.os-row:last-of-type{border-bottom:none;}
.os-lbl{font-size:12px;color:var(--dim);font-weight:600;}
.os-val{font-size:13px;font-weight:700;color:var(--wh);}
.os-val.gd{color:var(--gd);}
.os-val.gr{color:var(--gr);}
.os-total{margin-top:10px;padding:14px;background:rgba(33,150,243,.06);border:1px solid rgba(33,150,243,.18);border-radius:13px;display:flex;align-items:center;justify-content:space-between;}
.os-total-lbl{font-size:13px;font-weight:700;color:var(--mid);}
.os-total-price{font-family:'Rajdhani',sans-serif;font-size:24px;font-weight:700;color:var(--bl2);}

@media (max-width: 991.99px){
	
	.layout {
    grid-template-columns: 1fr;
}
.sidebar {
    position: relative;
    top: 0;
}
.skins-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.page.rcon {
    grid-template-columns: 1fr;
}
}