/* Переваги магазину (Benefits_Showcase) */
.bs { --bs-text: #1d2433; --bs-muted: #7a8291; margin: 16px 0 24px; }
.bs-heading { margin: 0 0 14px; color: var(--bs-text); font-size: 24px; font-weight: 700; line-height: 1.2; }
.bs-list { display: grid; grid-template-columns: repeat(var(--bs-cols, 4), minmax(0, 1fr)); gap: 16px; }
.bs-item { position: relative; display: flex; align-items: flex-start; gap: 14px; min-width: 0; color: var(--bs-text) !important; text-decoration: none !important; }
.bs-icon {
	position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: 0 0 52px; width: 52px; height: 52px;
	border-radius: 16px; background: #eef3fe; background: color-mix(in srgb, var(--bs-c, #1E66D0) 11%, #fff); color: var(--bs-c, #1E66D0);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.bs .bs-icon svg { width: 30px; height: 30px; }
.bs-icon img { width: 32px; height: 32px; object-fit: contain; }
.bs-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 3px; }
.bs-title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.bs-desc { color: var(--bs-muted); font-size: 14px; line-height: 1.45; }

/* ---------- Картки ---------- */
.bs-cards .bs-item { flex-direction: column; gap: 14px; overflow: hidden; padding: 22px 20px 20px; border-radius: 20px; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.bs-cards .bs-text { padding: 0; }
/* Велика бліда іконка в куті — «водяний знак» */
.bs-mark { position: absolute; right: -14px; bottom: -18px; width: 108px; height: 108px; color: var(--bs-c, #1E66D0); opacity: .07; pointer-events: none; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.bs-go {
	position: absolute; right: 16px; top: 22px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
	border-radius: 50%; background: color-mix(in srgb, var(--bs-c, #1E66D0) 10%, #fff); color: var(--bs-c, #1E66D0);
	opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s;
}
@media (hover: hover) {
	.bs-cards .bs-item:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -18px rgba(16, 24, 40, .35); }
	.bs-item:hover .bs-icon { transform: rotate(-8deg) scale(1.06); box-shadow: 0 0 0 7px color-mix(in srgb, var(--bs-c, #1E66D0) 9%, transparent); }
	.bs-item:hover .bs-mark { transform: rotate(-10deg) scale(1.1); opacity: .11; }
	a.bs-item:hover .bs-go { opacity: 1; transform: none; }
	a.bs-item:hover .bs-title { color: var(--bs-c, #1E66D0); }
}
a.bs-item:focus-visible { outline: 3px solid var(--bs-c, #1E66D0); outline-offset: 2px; }

/* ---------- Стрічка: один блок з роздільниками ---------- */
.bs-strip, .bs-strip.content-block { padding: 22px 8px; border-radius: 20px; }
.bs-strip .bs-heading { padding: 0 16px; }
.bs-strip .bs-list { gap: 0; }
.bs-strip .bs-item { align-items: center; padding: 6px 20px; }
.bs-strip .bs-item + .bs-item { border-left: 1px solid #eef0f3; }
.bs-strip .bs-icon { flex-basis: 46px; width: 46px; height: 46px; border-radius: 14px; }
.bs-strip .bs-icon svg { width: 26px; height: 26px; }
.bs-strip .bs-title { font-size: 15px; }
.bs-strip .bs-desc { font-size: 13px; }
.bs-strip .bs-go { display: none; }

@media (max-width: 1199.98px) {
	.bs-list { grid-template-columns: repeat(min(var(--bs-cols, 4), 3), minmax(0, 1fr)); }
	.bs-strip .bs-item:nth-child(3n + 1) { border-left: 0; }
}

/* ---------- Телефон ---------- */
@media (max-width: 767.98px) {
	.bs { margin: 12px 0 20px; }
	.bs-heading { font-size: 19px; }
	.bs-desc { font-size: 13px; }

	.bs-m-scroll .bs-list {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 12px;
		margin: 0 -12px; padding: 2px 12px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 12px; scrollbar-width: none;
	}
	.bs-m-scroll .bs-list::-webkit-scrollbar { display: none; }
	.bs-m-scroll .bs-item { scroll-snap-align: start; }
	.bs-m-grid .bs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.bs-m-grid.bs-cards .bs-item { padding: 16px 14px; }
	.bs-cards .bs-item { padding: 18px 16px; border-radius: 16px; }
	.bs-icon { flex-basis: 46px; width: 46px; height: 46px; border-radius: 14px; }
	.bs .bs-icon svg { width: 26px; height: 26px; }
	.bs-title { font-size: 15px; }

	.bs-strip, .bs-strip.content-block { padding: 12px 4px; border-radius: 16px; }
	.bs-strip.bs-m-scroll .bs-list { margin: 0; padding: 0 8px; grid-auto-columns: 78%; }
	.bs-strip .bs-item, .bs-strip .bs-item + .bs-item { padding: 8px 10px; border-left: 0; }
	.bs-strip.bs-m-grid .bs-list { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.bs-item, .bs-icon, .bs-mark, .bs-go { transition: none !important; }
}

.dark-theme .bs { --bs-text: #f1f3f5; --bs-muted: #9aa1a9; }
.dark-theme .bs-icon, .dark-theme .bs-go { background: color-mix(in srgb, var(--bs-c, #1E66D0) 22%, #161616); }
.dark-theme .bs-strip .bs-item + .bs-item { border-color: #262626; }