/* CSS баннеров CyberPulse (head / sidebar / footer).
   Раньше эти стили лежали <style>-блоками внутри parts/*.html и уезжали
   внутри HTML на каждой странице. Теперь это обычный файл: кэшируется
   браузером, а разметка баннеров осталась в parts/*.html.
   Классы с префиксами cpb__/cpv__/cwb__ — с темой не конфликтуют. */


.cpb-slot {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    container-type: inline-size;
    container-name: cpb;
}

.cpb,
.cpb *,
.cpb *::before,
.cpb *::after {
    box-sizing: border-box;
}

.cpb,
.cpb:hover,
.cpb:focus,
.cpb:active,
.cpb * {
    text-decoration: none;
}

.cpb {
    --cpb-accent: #00e05a;
    --cpb-accent-2: #00c94f;
    --cpb-glow: 0, 224, 90;
    --cpb-ink: #ffffff;
    --cpb-muted: #9db0a4;
    --cpb-btn-ink: #04140b;

    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 133px;
    padding: 11px 22px;
    border: 0;
    border-left: 3px solid var(--cpb-accent);
    border-radius: 0;
    overflow: hidden;
    isolation: isolate;
    background-image:
        radial-gradient(560px 240px at 1% 50%, rgba(var(--cpb-glow), 0.20), transparent 68%),
        radial-gradient(520px 260px at 100% 30%, rgba(var(--cpb-glow), 0.17), transparent 68%),
        linear-gradient(103deg, #1d2620 0%, #161c18 46%, #0e1411 100%);
    background-color: #141a16;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -26px 44px -38px rgba(0, 0, 0, 0.8);
    color: var(--cpb-ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    transition: border-color 0.3s ease;
}

.cpb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.75;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(var(--cpb-glow), 0.06) 8px 10px),
        repeating-linear-gradient(-45deg, transparent 0 8px, rgba(255, 255, 255, 0.025) 8px 10px);
    background-size: 16px 16px, 16px 16px;
    animation: cpb-grid 45s linear infinite;
}

@keyframes cpb-grid {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: -16px -8px, 8px -16px; }
}

.cpb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--cpb-glow), 0.5), rgba(255, 255, 255, 0.12), transparent);
}

.cpb > * {
    position: relative;
    z-index: 1;
}

.cpb:hover,
.cpb:focus-visible {
    border-left-color: var(--cpb-accent-2);
    outline: none;
}

.cpb__card {
    flex: none;
    width: 196px;
    padding: 4.5px 8px 3.5px;
    border: 1px solid rgba(var(--cpb-glow), 0.34);
    border-radius: 7px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(var(--cpb-glow), 0.12) 0%, transparent 58%),
        linear-gradient(165deg, #131d17 0%, #0b100d 100%);
    box-shadow:
        0 18px 30px -18px rgba(0, 0, 0, 0.95),
        0 0 26px -10px rgba(var(--cpb-glow), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition: border-color 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cpb:hover .cpb__card {
    border-color: rgba(var(--cpb-glow), 0.5);
    transform: translateY(-1px);
}

.cpb__card-top {
    display: flex;
    align-items: center;
    gap: 3.5px;
    padding-bottom: 4px;
    margin-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.cpb__card-top i {
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    flex: none;
}

.cpb__card-top i:first-child { background: rgba(255, 93, 93, 0.7); }
.cpb__card-top i:nth-child(2) { background: rgba(255, 190, 70, 0.65); }
.cpb__card-top i:nth-child(3) { background: rgba(0, 224, 90, 0.7); }

.cpb__name {
    margin-left: 4px;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.13em;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
}

.cpb__tag {
    margin-left: auto;
    flex: none;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1;
    padding: 3px 4px 2px;
    color: var(--cpb-btn-ink);
    background: var(--cpb-accent);
    border-radius: 3px;
}

.cpb__feed {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
    color: rgba(240, 250, 244, 0.9);
}

.cpb__feed li {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.045);
    white-space: nowrap;
    overflow: hidden;
}

.cpb .cpb__feed li b {
    font-size: 15px !important;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cpb__feed li::before {
    content: "";
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: #ff5d5d;
    box-shadow: 0 0 5px rgba(255, 93, 93, 0.85);
    flex: none;
    animation: cpb-blink 1.9s ease-in-out infinite;
}

.cpb__feed li:nth-child(2)::before { animation-delay: 0.32s; }
.cpb__feed li:nth-child(3)::before { animation-delay: 0.64s; }

@keyframes cpb-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.22; }
}

.cpb__feed span {
    margin-left: auto;
    flex: none;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 3.5px;
    color: #ff9b9b;
    background: rgba(255, 93, 93, 0.13);
    border: 1px solid rgba(255, 93, 93, 0.22);
}

.cpb__body {
    min-width: 0;
}

.cpb__title {
    margin: 0 0 5px;
    font-size: 23px;
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.022em;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

.cpb__title u {
    text-decoration: none;
    white-space: nowrap;
    color: var(--cpb-accent);
}

.cpb__sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--cpb-muted);
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

.cpb__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    flex: none;
}

.cpb__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 18px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    color: var(--cpb-btn-ink);
    background: var(--cpb-accent);
    overflow: hidden;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.cpb:hover .cpb__btn {
    background: var(--cpb-accent-2);
    transform: translateY(-1px);
}

.cpb:active .cpb__btn {
    transform: translateY(0);
}

.cpb__btn svg {
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform 0.25s ease;
}

.cpb:hover .cpb__btn svg {
    transform: translateX(3px);
}

.cpb__price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    font-size: 9.5px; 
    line-height: 1.2;
    color: var(--cpb-muted);
    white-space: nowrap;
}

.cpb__price svg {
    width: 9px;
    height: 9px;
    flex: none;
}

.cpb__price b {
    color: var(--cpb-muted);
    font-weight: 500;
    font-size: 9.5px; 
    letter-spacing: 0.01em;
}

.cpb.is-swapping .cpb__title,
.cpb.is-swapping .cpb__sub {
    opacity: 0;
}

.cpb--light {
    --cpb-ink: #131313;
    --cpb-muted: #5d6b62;

    background-color: #ffffff;
    background-image:
        radial-gradient(520px 220px at 2% 45%, rgba(var(--cpb-glow), 0.06), transparent 72%),
        radial-gradient(460px 240px at 99% 35%, rgba(var(--cpb-glow), 0.05), transparent 70%),
        linear-gradient(103deg, #ffffff 0%, #fcfdfc 50%, #f6faf7 100%);
    border-left-color: #00b83c;
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.cpb--light::before {
    opacity: 0.8;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(0, 0, 0, 0.02) 8px 10px),
        repeating-linear-gradient(-45deg, transparent 0 8px, rgba(0, 0, 0, 0.014) 8px 10px);
}

.cpb--light::after {
    background: linear-gradient(90deg, transparent, rgba(var(--cpb-glow), 0.35), transparent);
}

.cpb--light .cpb__title,
.cpb--light .cpb__price b {
    color: #131313;
}

.cpb--light .cpb__btn {
    color: #ffffff;
    background: #00b83c;
}

.cpb--light:hover .cpb__btn {
    background: #00c94a;
}

@container cpb (max-width: 1000px) {
    .cpb {
        gap: 18px;
        padding: 12px 19px 12px 15px;
    }
    .cpb__card { width: 184px; }
    .cpb__title { font-size: 21px; }
    .cpb__sub { font-size: 12px; }
    .cpb__btn { padding: 11px 16px; font-size: 13.5px; }
}

@container cpb (max-width: 820px) {
    .cpb { gap: 16px; }
    .cpb__card { width: 184px; padding: 5px 8px 3.5px; }
    .cpb__feed { gap: 2px; }
    .cpb__feed li { padding: 2.5px 4px; gap: 4px; }
    .cpb .cpb__feed li b { font-size: 13px !important; } /* На планшетах чуть меньше */
    .cpb__feed span { font-size: 7px; padding: 2px 3px; }
    .cpb__name { font-size: 8px; letter-spacing: 0.1em; }
    .cpb__title { font-size: 19px; }
    .cpb__sub { font-size: 11.5px; }
    .cpb__btn { padding: 12px 15px 12px 18px; font-size: 13px; }
    .cpb__price { font-size: 8.5px; }
    .cpb__price b { font-size: 8.5px; }
}

@container cpb (max-width: 680px) {
    .cpb__card { display: none; }
    .cpb { grid-template-columns: minmax(0, 1fr) auto; }
    .cpb__title { font-size: 18px; }
}

@container cpb (max-width: 560px) {
    .cpb {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 12px;
        min-height: 96px;
        padding: 12px 14px;
    }
    .cpb__card {
        display: flex;
        grid-column: 1 / -1;
        width: auto;
        align-items: center;
        gap: 8px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .cpb__card-top {
        border: 0;
        padding: 0;
        margin: 0;
        gap: 4px;
    }
    .cpb__card-top i { display: none; }
    
    .cpb__name { font-size: 9.5px; letter-spacing: 0.12em; color: #fff; }
    .cpb__tag { font-size: 8px; padding: 3px 4px 2px; margin-left: 4px; }
    
    .cpb__feed { display: none; }
    .cpb__title { font-size: 16px; margin-bottom: 0; -webkit-line-clamp: 2; }
    .cpb__sub { display: none; }
    .cpb__btn { padding: 10px 13px; font-size: 12.5px; border-radius: 4px; }
    .cpb__btn svg { display: none; }
    .cpb__price { display: none; }
    .cpb__cta { gap: 0; }
}

@container cpb (max-width: 400px) {
    .cpb__tag { display: none; }
    .cpb__title { font-size: 14.5px; }
    .cpb__btn { padding: 9px 11px; font-size: 11.5px; }
}

@supports not (container-type: inline-size) {
    @media (max-width: 1000px) {
        .cpb__card { width: 184px; }
        .cpb__title { font-size: 21px; }
    }
    @media (max-width: 680px) {
        .cpb__card { display: none; }
        .cpb { grid-template-columns: minmax(0, 1fr) auto; }
    }
    @media (max-width: 560px) {
        .cpb { min-height: 0; padding: 12px 14px; gap: 10px 12px; }
        .cpb__sub, .cpb__price { display: none; }
        .cpb__title { font-size: 16px; }
        .cpb__btn { padding: 10px 13px; font-size: 12.5px; }
    }
}

.cpb--xs {
    min-height: 90px;
    padding: 11px 18px;
    gap: 14px;
}

.cpb--xs .cpb__card,
.cpb--xs .cpb__sub,
.cpb--xs .cpb__price { display: none; }

.cpb--xs .cpb__title { font-size: 17px; margin-bottom: 0; -webkit-line-clamp: 1; }
.cpb--xs .cpb__btn { padding: 11px 16px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
    .cpb *,
    .cpb::before,
    .cpb::after {
        animation: none !important;
        transition: none !important;
    }
}


.cpv-slot {
    width: 100%;
    display: flex;
    container-type: inline-size;
    container-name: cpv;
}

.cpv,
.cpv *,
.cpv *::before,
.cpv *::after {
    box-sizing: border-box;
}

.cpv a,
.cpv a:hover,
.cpv a:focus,
.cpv a:active,
.cpv a * {
    text-decoration: none !important;
}

.cpv {
    --cpv-accent: #00b83c;
    --cpv-accent-2: #00a041;
    --cpv-accent-bright: #00e05a;
    --cpv-glow: 0, 184, 60;
    --cpv-ink: #0f1411;
    --cpv-muted: #5f6b63;
    --cpv-line: #e8ece9;
    --cpv-btn-ink: #ffffff;

    position: relative;
    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 310px;

    border: 1px solid var(--cpv-line);
    border-radius: 0;

    background: #ffffff;
    color: var(--cpv-ink);

    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cpv::before {
    content: "";
    position: absolute;
    right: -90px;
    top: -110px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--cpv-glow), 0.07) 0%, transparent 70%);
}

.cpv::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--cpv-glow), 0.55) 18%,
        var(--cpv-accent-bright) 50%,
        rgba(var(--cpv-glow), 0.55) 82%,
        transparent 100%);
    opacity: 0.85;
}

.cpv:hover,
.cpv:focus-within {
    border-color: #d6ddd8;
    box-shadow:
        0 1px 2px rgba(15, 20, 17, 0.04),
        0 8px 24px -12px rgba(var(--cpv-glow), 0.18);
}

.cpv__top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 15px 15px 0;
}

.cpv__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 24px;
    flex: none;
}

.cpv__mark svg {
    width: 22px;
    height: 24px;
    display: block;
    overflow: visible;
}

.cpv__mark .cpv-heart {
    stroke-dasharray: 30 30;
    stroke-dashoffset: 30;
    animation: cpv-ekg 2.4s linear infinite;
}

@keyframes cpv-ekg {
    0%   { stroke-dashoffset: 30;  opacity: 0.35; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { stroke-dashoffset: -30; opacity: 0.35; }
}

.cpv__name {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    color: var(--cpv-ink);
    white-space: nowrap;
}

.cpv__tag {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 3px 5px 2px;
    color: #04140b;
    background: var(--cpv-accent-bright);
    border-radius: 3px;
    flex: none;
    margin-bottom: 1px;
}

.cpv__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--cpv-accent-2);
    white-space: nowrap;
}

.cpv__live i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cpv-accent);
    box-shadow: 0 0 0 0 rgba(var(--cpv-glow), 0.5);
    animation: cpv-pulse 2.4s ease-in-out infinite;
}

@keyframes cpv-pulse {
    0%, 100% { opacity: 1;    transform: scale(1);   box-shadow: 0 0 0 0 rgba(var(--cpv-glow), 0.5); }
    50%      { opacity: 0.45; transform: scale(0.8); box-shadow: 0 0 0 4px rgba(var(--cpv-glow), 0); }
}

.cpv__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 13px 16px 16px;
}

.cpv__h {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.022em;
    color: var(--cpv-ink);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cpv__h em {
    font-style: normal;
    color: var(--cpv-accent-2);
}

.cpv.is-swapping .cpv__h {
    opacity: 0;
    transform: translateY(4px);
}

.cpv__sub {
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cpv-muted);
}

.cpv__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.cpv__list li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.35;
    color: #2f3a33;
}

.cpv__list li::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: none;
    margin-top: 1px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 4.8 8.5 9.4 3.6' fill='none' stroke='%2300a041' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 11px 11px no-repeat;
    background-color: rgba(var(--cpv-glow), 0.10);
    border: 1px solid rgba(var(--cpv-glow), 0.16);
}

.cpv__cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.cpv__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: 100%;
    padding: 13px 16px;
    border: 0;
    border-radius: 9px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;

    color: var(--cpv-btn-ink);
    background: linear-gradient(180deg, #00c247 0%, #00a838 100%);
    box-shadow:
        0 1px 2px rgba(0, 60, 25, 0.18),
        0 6px 16px -6px rgba(var(--cpv-glow), 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    overflow: hidden;
    isolation: isolate;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.cpv__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 65%);
    transform: translateX(-130%);
    animation: cpv-shine 5.4s ease-in-out infinite;
}

@keyframes cpv-shine {
    0%, 65% { transform: translateX(-130%); }
    85%     { transform: translateX(130%); }
    100%    { transform: translateX(130%); }
}

.cpv__btn,
.cpv__btn:hover,
.cpv__btn:focus,
.cpv__btn:focus-visible,
.cpv__btn:active,
.cpv__btn:visited,
.cpv__btn *,
.cpv__btn:hover *,
.cpv__btn:focus *,
.cpv__btn:active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    text-transform: none !important;
}

.cpv__btn svg {
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform 0.25s ease;
}

.cpv__btn:hover,
.cpv__btn:focus-visible {
    background: linear-gradient(180deg, #00cc4b 0%, #00b23c 100%);
    box-shadow:
        0 2px 4px rgba(0, 60, 25, 0.22),
        0 10px 22px -8px rgba(var(--cpv-glow), 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
    outline: none;
    transform: translateY(-1px);
}

.cpv__btn:hover svg,
.cpv__btn:focus-visible svg {
    transform: translateX(3px) !important;
}

.cpv__btn:active {
    background: linear-gradient(180deg, #00b23c 0%, #009e33 100%);
    transform: translateY(0);
    box-shadow:
        0 1px 2px rgba(0, 60, 25, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.cpv__price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 10.5px;
    line-height: 1.3;
    text-align: center;
    color: #7a857e;
    white-space: nowrap;
}

.cpv__price b {
    font-weight: 700;
    color: var(--cpv-ink);
}

.cpv__price svg {
    width: 12px;
    height: 12px;
    flex: none;
    animation: cpv-heart 2.6s ease-in-out infinite;
}

@keyframes cpv-heart {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.14); }
}

@container cpv (max-width: 300px) {
    .cpv__h { font-size: 19px; }
    .cpv__list { grid-template-columns: 1fr; }
    .cpv__btn { font-size: 12.5px; padding: 11px 12px; }
    .cpv__name { font-size: 10px; }
    .cpv__price { font-size: 9.5px; white-space: normal; }
}

@container cpv (min-width: 380px) {
    .cpv__body { padding: 15px 18px 18px; }
    .cpv__h { font-size: 24px; }
    .cpv__sub { font-size: 13px; }
    .cpv__list li { font-size: 12px; }
    .cpv__btn { font-size: 14px; padding: 13px 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .cpv *, .cpv::before, .cpv::after,
    .cpv__mark .cpv-heart,
    .cpv__btn::before {
        animation: none !important;
        transition: none !important;
    }
}


.cwb-slot {
    width: 100%;
    display: flex;
    container-type: inline-size;
    container-name: cwb;
}

.cwb,
.cwb *,
.cwb *::before,
.cwb *::after {
    box-sizing: border-box;
}

.cwb,
.cwb:hover,
.cwb:focus,
.cwb:active,
.cwb * {
    text-decoration: none !important;
}

.cwb {
    --cwb-accent: #00e05a;
    --cwb-accent-2: #00c94f;
    --cwb-glow: 0, 224, 90;
    --cwb-ink: #ffffff;
    --cwb-muted: #93a39a;

    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 30px;

    width: 100%;
    height: 118px;
    padding: 0 26px;

    border: 1px solid rgba(var(--cwb-glow), 0.38);
    border-radius: 0;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(480px 220px at 100% 40%, rgba(var(--cwb-glow), 0.08), transparent 72%),
        linear-gradient(103deg, #171e19 0%, #111614 52%, #0b0f0c 100%);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    color: var(--cwb-ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.2;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cwb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(var(--cwb-glow), 0.05) 8px 10px),
        repeating-linear-gradient(-45deg, transparent 0 8px, rgba(255, 255, 255, 0.02) 8px 10px);
    background-size: 16px 16px, 16px 16px;
    animation: cwb-grid 45s linear infinite;
}

@keyframes cwb-grid {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: -16px -8px, 8px -16px; }
}

.cwb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--cwb-glow), 0.55), rgba(255,255,255,0.15), transparent);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: cwb-scan 6s ease-in-out infinite;
}

@keyframes cwb-scan {
    0%   { background-position: -60% 0; }
    50%  { background-position: 110% 0; }
    100% { background-position: -60% 0; }
}

.cwb > * {
    position: relative;
    z-index: 1;
}

.cwb:hover,
.cwb:focus-visible {
    border-color: rgba(var(--cwb-glow), 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 30px -8px rgba(var(--cwb-glow), 0.35);
    outline: none;
}

.cwb__brand {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 11px;
    flex: none;
}

.cwb__brand * { line-height: 1 !important; }

.cwb__mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 52px;
    flex: none;
}

.cwb__mark svg {
    width: 46px;
    height: 52px;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 0 3px rgba(var(--cwb-glow), 0.45));
    transition: filter 0.35s ease, transform 0.35s ease;
}

.cwb:hover .cwb__mark svg {
    filter: drop-shadow(0 0 8px rgba(var(--cwb-glow), 0.7));
    transform: translateY(-1px) scale(1.03);
}

.cwb__mark .cwb-heart {
    stroke-dasharray: 40 40;
    stroke-dashoffset: 40;
    animation: cwb-ekg 2.2s linear infinite;
}

@keyframes cwb-ekg {
    0%   { stroke-dashoffset: 40;  opacity: 0.35; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { stroke-dashoffset: -40; opacity: 0.35; }
}

.cwb__name {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #ffffff;
    white-space: nowrap;
}

.cwb__tag {
    position: relative;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 4px 8px 3px;
    color: #04140b;
    background: var(--cwb-accent);
    flex: none;
    border-radius: 5px;
    box-shadow: 0 0 0 0 rgba(var(--cwb-glow), 0.6);
    animation: cwb-tag-glow 3s ease-in-out infinite;
}

@keyframes cwb-tag-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--cwb-glow), 0.45); }
    50%      { box-shadow: 0 0 0 5px rgba(var(--cwb-glow), 0.0); }
}

.cwb__body {
    min-width: 0;
    text-align: center;
}

.cwb__claim {
    display: block;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #ffffff;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cwb__claim em {
    font-style: normal;
    color: var(--cwb-accent);
    position: relative;
    white-space: nowrap;
}

.cwb__claim em::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--cwb-glow), 0.85), transparent);
    opacity: 0.8;
    animation: cwb-underline 3.2s ease-in-out infinite;
}

@keyframes cwb-underline {
    0%, 100% { transform: scaleX(0.55); opacity: 0.55; }
    50%      { transform: scaleX(1);    opacity: 1; }
}

.cwb__sub {
    display: block;
    margin-top: 9px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cwb-muted);
}

.cwb__sub i {
    font-style: normal;
    color: rgba(var(--cwb-glow), 0.55);
    margin: 0 8px;
}

.cwb.is-swapping .cwb__claim {
    opacity: 0;
    transform: translateY(4px);
}

.cwb__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 15px 30px;
    border-radius: 10px;

    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;

    color: #04140b;
    background: var(--cwb-accent);
    box-shadow: 0 4px 14px rgba(var(--cwb-glow), 0.22);
    overflow: hidden;
    isolation: isolate;

    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    flex: none;
}

.cwb__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 7px, rgba(4, 20, 11, 0.06) 7px 8px),
        repeating-linear-gradient(-45deg, transparent 0 7px, rgba(255, 255, 255, 0.08) 7px 8px);
    background-size: 16px 16px, 16px 16px;
    animation: cwb-grid-btn 40s linear infinite;
    transition: opacity 0.3s ease;
}

@keyframes cwb-grid-btn {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: -16px -8px, 8px -16px; }
}

.cwb__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.30) 50%,
        rgba(255, 255, 255, 0.0) 65%);
    transform: translateX(-130%);
    animation: cwb-shine 5.6s ease-in-out infinite;
}

@keyframes cwb-shine {
    0%, 60% { transform: translateX(-130%); }
    80%     { transform: translateX(130%); }
    100%    { transform: translateX(130%); }
}

.cwb:hover .cwb__btn {
    background: var(--cwb-accent-2);
    box-shadow:
        0 6px 22px rgba(var(--cwb-glow), 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    transform: translateY(-1px);
}

.cwb:hover .cwb__btn::before {
    opacity: 0.28;
}

.cwb__btn svg {
    width: 16px;
    height: 16px;
    flex: none;
    transition: transform 0.3s ease;
}

.cwb:hover .cwb__btn svg {
    transform: translateX(4px);
}

/* ================= АДАПТИВ ================= */
@container cwb (max-width: 1200px) {
    .cwb { gap: 20px; padding: 0 22px; height: 100px; }
    .cwb__claim { font-size: 27px; }
    .cwb__name { font-size: 18px; }
    .cwb__mark, .cwb__mark svg { width: 40px; height: 45px; }
    .cwb__btn { padding: 13px 24px 15px 24px; font-size: 15px; }
}

@container cwb (max-width: 980px) {
    .cwb__claim { font-size: 23px; }
    .cwb__sub { font-size: 10.5px; letter-spacing: 0.08em; }
    .cwb__brand { gap: 10px; }
    .cwb__name { font-size: 16.5px; }
    .cwb__mark, .cwb__mark svg { width: 34px; height: 38px; }
}

@container cwb (max-width: 820px) {
    .cwb {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand btn"
            "body  btn";
        gap: 10px 16px;
        height: auto;
        min-height: 110px;
        padding: 18px 20px;
    }
    .cwb__brand { grid-area: brand; justify-self: start; }
    .cwb__body  { grid-area: body; text-align: left; }
    .cwb__btn   { grid-area: btn; }
    .cwb__claim { font-size: 22px; }
    .cwb__sub   { display: none; }
}

@container cwb (max-width: 560px) {
    .cwb {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "body"
            "btn";
        align-content: space-evenly;
        justify-items: stretch;
        gap: 18px;
        min-height: 300px;
        padding: 20px 18px;
    }

    .cwb__brand {
        grid-area: brand;
        justify-self: center;
        align-self: flex-start;
        gap: 10px;
    }

    .cwb__body { grid-area: body; text-align: center; }
    .cwb__name { font-size: 17px; }

    .cwb__btn {
        grid-area: btn;
        width: 100%;
        padding: 16px 18px;
        font-size: 16px;
    }

    .cwb__claim { font-size: 25px; line-height: 1.2; }
    .cwb__sub {
        display: block;
        margin-top: 10px;
        font-size: 10px;
        letter-spacing: 0.06em;
    }
    .cwb__sub i { margin: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .cwb *, .cwb::before, .cwb::after,
    .cwb__mark .cwb-heart,
    .cwb__btn::before, .cwb__btn::after {
        animation: none !important;
        transition: none !important;
    }
}