@scope ([data-bns-css="std"]) {
/* Змінні — міняйте значення тут */
.psk-bns {
    --bns-radius: 0;                             /* Заокруглення кутів (0 — рівний; заокруглення зазвичай задає блок, куди вставлено банер) */
    --bns-radius-mobile: var(--bns-radius);      /* Заокруглення на телефоні */
}
.psk-bns,
.psk-bn {
    --bns-height: 260px;                         /* Висота слайда */
    --bns-height-mobile: 220px;                  /* Висота слайда на телефоні */
    --bns-image-height: auto;                    /* Висота слайда «лише медіа» (auto — за пропорціями фото) */
    --bns-margin: 40px 0;                        /* Відступи навколо банера */
    --bns-margin-mobile: 24px 0;                 /* Відступи на телефоні */
    --bns-gap: 16px;                             /* Проміжок між слайдами в сітці */
    --bns-grid-min: 280px;                       /* Мінімальна ширина слайда в сітці */
    --bns-grid-height: 200px;                    /* Висота слайда в сітці */
    --bns-bg: #14121a;                           /* Тло, якщо у слайда не задано колір */
    --bns-photo-position: center;                /* Яку частину фото показувати: center, top, left… */
    --bns-shade: rgba(0,0,0,.6);                 /* Затемнення фото під текстом */
    --bns-shade-center: rgba(0,0,0,.45);         /* Затемнення при тексті по центру */
    --bns-body-width: 560px;                     /* Максимальна ширина текстового блоку */
    --bns-pad-y: 40px;                           /* Внутрішній відступ згори й знизу */
    --bns-pad-x: clamp(24px, 5vw, 56px);         /* Внутрішній відступ збоку */
    --bns-body-gap: 12px;                        /* Проміжок між рядками тексту */
    --bns-font: inherit;                         /* Шрифт банера */
    --bns-title-font: inherit;                   /* Шрифт заголовка */
    --bns-title-size: clamp(24px, 3.4vw, 40px);  /* Розмір заголовка */
    --bns-title-weight: 800;                     /* Товщина заголовка */
    --bns-accent: var(--primary, currentColor);  /* Колір акценту заголовка */
    --bns-eyebrow-size: 12px;                    /* Розмір надзаголовка */
    --bns-sub-size: 15px;                        /* Розмір опису */
    --bns-text-size: 14px;                       /* Розмір написів */
    --bns-btn-radius: 999px;                     /* Заокруглення кнопок */
    --bns-btn-pad: 12px 26px;                    /* Внутрішній відступ кнопок */
    --bns-btn-size: 14px;                        /* Розмір тексту кнопок */
    --bns-btn-bg: #fff;                          /* Тло основної кнопки */
    --bns-btn-ink: #14121a;                      /* Текст основної кнопки */
    --bns-badge-size: 64px;                      /* Розмір бейджа */
    --bns-badge-font: 18px;                      /* Розмір тексту бейджа */
    --bns-badge-radius: 999px;                   /* Заокруглення бейджа */
    --bns-badge-offset: 20px;                    /* Відступ бейджа від краю */
    --bns-badge-bg: var(--primary, #e11d48);     /* Тло бейджа */
    --bns-badge-ink: var(--on-primary, #fff);    /* Текст бейджа */
    --bns-card-width: 260px;                     /* Ширина картки товару */
    --bns-card-radius: 14px;                     /* Заокруглення картки товару */
    --bns-card-bg: #fff;                         /* Тло картки товару */
    --bns-card-ink: #14121a;                     /* Текст картки товару */
    --bns-nav-size: 44px;                        /* Розмір стрілок */
    --bns-nav-radius: 50%;                       /* Заокруглення стрілок */
    --bns-nav-bg: rgba(255,255,255,.92);         /* Тло стрілок */
    --bns-nav-bg-hover: #fff;                    /* Тло стрілок при наведенні */
    --bns-nav-ink: #14121a;                      /* Колір стрілок */
    --bns-dot: rgba(255,255,255,.55);            /* Колір крапок */
    --bns-dot-active: #fff;                      /* Колір активної крапки */
    --bns-speed: .6s;                            /* Швидкість перегортання */
}

.psk-bns-scope { display: contents; }
.psk-bns { position: relative; display: flex; flex-direction: column; margin: var(--bns-margin, 40px 0); container: bns / inline-size; font-family: var(--bns-font, inherit); }
.psk-bns-track { flex: 1; display: flex; gap: var(--bns-gap, 16px); min-height: 0; }
.psk-bns-track > [data-bns-item] { flex: 0 0 100%; min-width: 0; }

.psk-bn { position: relative; border-radius: var(--bns-radius, 0); overflow: hidden; }
.psk-bn--image { line-height: 0; }
.psk-bn-pic { display: block; width: 100%; height: var(--bns-image-height, auto); object-fit: cover; }
.psk-bn-link { position: absolute; inset: 0; z-index: 3; }

.psk-bn--html { --bn-ink: #fff; min-height: var(--bns-height, 260px); display: flex; align-items: center; color: var(--bn-ink); background-color: var(--bn-bg, var(--bns-bg, #14121a)); background-image: var(--bn, linear-gradient(135deg, #1b1824, #100e16)); background-size: cover; background-position: var(--bns-photo-position, center); background-repeat: no-repeat; }
.psk-bn--html:not(.has-photo)[style*="--bn-bg"] { background-image: none; }
.psk-bn--html.has-video { background-image: none; }
.psk-bn--html.has-photo.has-text::before, .psk-bn--html.has-video.has-text::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--bns-shade, rgba(0,0,0,.6)) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,0) 100%); }
.psk-bn--html.is-center { justify-content: center; text-align: center; }
.psk-bn--html.is-right { justify-content: flex-end; text-align: right; }
.psk-bn--html.has-video.has-text.is-center::before, .psk-bn--html.has-photo.has-text.is-center::before { background: var(--bns-shade-center, rgba(0,0,0,.45)); }
.psk-bn--html.has-photo.has-text.is-right::before { background: linear-gradient(270deg, var(--bns-shade, rgba(0,0,0,.6)) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,0) 100%); }
.psk-bn--html.has-photo[style*="--bn-overlay"]::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--bn-overlay); }
.psk-bn-body { position: relative; z-index: 2; max-width: var(--bns-body-width, 560px); padding: var(--bns-pad-y, 40px) var(--bns-pad-x, clamp(24px, 5vw, 56px)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--bns-body-gap, 12px); }
.psk-bn--html.is-center .psk-bn-body { align-items: center; }
.psk-bn--html.is-right .psk-bn-body { align-items: flex-end; }
.psk-bn-eyebrow { font-size: var(--bns-eyebrow-size, 12px); line-height: 1.35; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .86; }
.psk-bn-title { font-family: var(--bns-title-font, inherit); font-size: var(--bns-title-size, clamp(24px, 3.4vw, 40px)); font-weight: var(--bns-title-weight, 800); line-height: 1.12; letter-spacing: -.01em; }
.psk-bn-accent { color: var(--bn-accent, var(--bns-accent, var(--primary, currentColor))); }
.psk-bn-sub { font-size: var(--bns-sub-size, 15px); line-height: 1.6; opacity: .86; }
.psk-bn-text { font-size: var(--bns-text-size, 14px); line-height: 1.57; opacity: .8; }
.psk-bn-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.psk-bn-video.is-yt { overflow: hidden; container-type: size; }
.psk-bn-video.is-yt iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%); border: 0; }
.psk-bn--image .psk-bn-video { position: relative; height: auto; aspect-ratio: 16 / 9; }
.psk-bn--image .psk-bn-video.is-yt { height: auto; }
.psk-bn-btns { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.psk-bn-btn { display: inline-flex; align-items: center; gap: 8px; padding: var(--bns-btn-pad, 12px 26px); border-radius: var(--bns-btn-radius, 999px); background: var(--btn-bg, var(--bns-btn-bg, #fff)); color: var(--btn-ink, var(--bns-btn-ink, #14121a)); border: 1px solid var(--btn-bg, var(--bns-btn-bg, #fff)); font-weight: 700; font-size: var(--bns-btn-size, 14px); line-height: 20px; text-decoration: none; transition: all .3s; }
.psk-bn-btn.is-secondary { background: transparent; color: var(--btn-ink, var(--btn-bg, var(--bn-ink))); border-color: var(--btn-bg, var(--bn-ink)); }
.psk-bn-btn.is-ghost { background: var(--btn-bg, rgba(255,255,255,.14)); border-color: transparent; color: var(--btn-ink, var(--bn-ink)); backdrop-filter: blur(6px); }
.psk-bn-btn.is-link { padding: 12px 4px; background: none; border-color: transparent; color: var(--btn-ink, var(--btn-bg, var(--bn-ink))); text-decoration: underline; text-underline-offset: 4px; }
.psk-bn-btn:hover { transform: translateY(-2px); opacity: .92; }
.psk-bn-badge { position: absolute; z-index: 4; top: var(--bns-badge-offset, 20px); right: var(--bns-badge-offset, 20px); min-width: var(--bns-badge-size, 64px); height: var(--bns-badge-size, 64px); padding: 0 12px; display: flex; align-items: center; justify-content: center; border-radius: var(--bns-badge-radius, 999px); background: var(--bn-badge, var(--bns-badge-bg, var(--primary, #e11d48))); color: var(--bns-badge-ink, var(--on-primary, #fff)); font-weight: 800; font-size: var(--bns-badge-font, 18px); line-height: 1; }
.psk-bn-card { position: absolute; z-index: 4; right: 20px; bottom: 20px; max-width: var(--bns-card-width, 260px); padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; border-radius: var(--bns-card-radius, 14px); background: var(--bns-card-bg, #fff); color: var(--bns-card-ink, #14121a); text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: all .3s; }
a.psk-bn-card:hover { transform: translateY(-2px); }
.psk-bn--html.is-right .psk-bn-badge { right: auto; left: var(--bns-badge-offset, 20px); }
.psk-bn--html.is-right .psk-bn-card { right: auto; left: 20px; }
.psk-bn-card-note { font-size: 12px; line-height: 16px; opacity: .6; }
.psk-bn-card-title { font-size: 15px; line-height: 20px; font-weight: 700; }
.psk-bn-card-price { font-size: 15px; line-height: 20px; font-weight: 700; }
.psk-bn-card-price s { font-weight: 400; opacity: .5; }

.psk-bns.is-slider .psk-bns-track { gap: 0; overflow: hidden; border-radius: var(--bns-radius, 0); touch-action: pan-y; }
.psk-bns.is-slider .psk-bns-track > [data-bns-item] { transform: translateX(calc(var(--bns-i, 0) * -100%)); transition: transform var(--bns-speed, .6s) cubic-bezier(.22,.61,.36,1); }
.psk-bns-nav { position: absolute; top: 50%; z-index: 6; width: var(--bns-nav-size, 44px); height: var(--bns-nav-size, 44px); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--bns-nav-radius, 50%); background: var(--bns-nav-bg, rgba(255,255,255,.92)); color: var(--bns-nav-ink, #14121a); font-size: 16px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.16); opacity: 0; transition: all .3s; }
.psk-bns-nav.is-prev { left: 16px; }
.psk-bns-nav.is-next { right: 16px; }
.psk-bns:hover .psk-bns-nav, .psk-bns-nav:focus-visible { opacity: 1; }
.psk-bns-nav:hover { background: var(--bns-nav-bg-hover, #fff); }
.psk-bns-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 6; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.psk-bns-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--bns-dot, rgba(255,255,255,.55)); cursor: pointer; pointer-events: auto; transition: all .3s; }
.psk-bns-dot.is-active { width: 24px; background: var(--bns-dot-active, #fff); }

.psk-bns.is-random [data-bns-item]:not(.is-active) { display: none; }

.psk-bns.is-grid .psk-bns-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--bns-grid-min, 280px), 1fr)); }
.psk-bns.is-grid .psk-bn--html { min-height: var(--bns-grid-height, 200px); }
.psk-bns.is-grid .psk-bn-body { padding: 28px; }
.psk-bns.is-grid .psk-bn-title { font-size: 22px; line-height: 28px; }

@media (hover: none) { .psk-bns-nav { display: none; } }
@media (max-width: 640px) {
    .psk-bns { margin: var(--bns-margin-mobile, 24px 0); }
    .psk-bn, .psk-bns.is-slider .psk-bns-track { border-radius: var(--bns-radius-mobile, var(--bns-radius, 0)); }
    .psk-bn--html { min-height: var(--bns-height-mobile, 220px); align-items: flex-end; }
    .psk-bn-body { max-width: 100%; padding: 28px 20px 44px; }
    .psk-bn-badge { top: 14px; right: 14px; min-width: 52px; height: 52px; font-size: 15px; }
    .psk-bn--html.is-right .psk-bn-badge { left: 14px; }
}
@media (prefers-reduced-motion: reduce) { .psk-bns.is-slider .psk-bns-track > [data-bns-item] { transition: none; } }
@container bns (max-width: 820px) {
    .psk-bn--html:has(.psk-bn-card) { flex-direction: column; align-items: stretch; justify-content: center; }
    .psk-bn--html:has(.psk-bn-card) .psk-bn-body { padding-bottom: 20px; }
    .psk-bn--html .psk-bn-card { position: relative; z-index: 4; left: auto; right: auto; bottom: auto; max-width: none; margin: 0 clamp(20px, 5cqw, 56px) 24px; }
    .psk-bn--html.is-center .psk-bn-card { align-self: center; }
    .psk-bn--html.is-right .psk-bn-card { align-self: flex-end; }
}
.psk-bns.is-grid .psk-bn--html:has(.psk-bn-card) { flex-direction: column; align-items: stretch; }
.psk-bns.is-grid .psk-bn-card { position: relative; left: auto; right: auto; bottom: auto; max-width: none; margin: 0 28px 24px; }
}