/* ---- Банери категорій з оцінкою покупців ---- */
.catbns { margin: 36px 0 8px; }
.catbns__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.catbns__head h2 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.7rem); letter-spacing: -.02em; }
.catbns__head span { color: var(--muted); font-size: .86rem; }
.catbns__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.catbn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 42%; align-items: stretch; min-height: 210px; overflow: hidden; isolation: isolate;
  background: var(--night, #0b1118); color: #fff; text-decoration: none; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.catbn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 220px at 100% 50%, rgba(0,135,81,.32), transparent 70%); }
.catbn:hover { color: #fff; transform: translateY(-2px); }
.catbn__txt { display: flex; flex-direction: column; gap: 6px; padding: 20px 10px 20px 20px; min-width: 0; }
.catbn__kick { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6fd3a0; }
.catbn__t { font-family: 'Geologica', sans-serif; font-size: 1.22rem; line-height: 1.15; letter-spacing: -.015em; }
.catbn__rate { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .82rem; color: rgba(255,255,255,.72); }
.catbn__rate b { color: #fff; }
.catbn__stars { position: relative; display: inline-block; font-size: .95rem; line-height: 1; letter-spacing: 1px; }
.catbn__sb { color: rgba(255,255,255,.22); }
.catbn__sf { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #fbbc04; }
.catbn__from { font-size: .84rem; color: rgba(255,255,255,.72); }
.catbn__from b { font-family: 'Geologica', sans-serif; font-size: 1.05rem; color: #fff; }
.catbn__go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--cta); color: #fff; font-weight: 600; font-size: .86rem; transition: background .2s; }
.catbn:hover .catbn__go { background: #00a062; }
.catbn__img { display: grid; place-items: center; margin: 12px 12px 12px 0; background: #fff; }
.catbn__img img { width: 86%; height: 86%; max-height: 180px; object-fit: contain; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.catbn:hover .catbn__img img { transform: scale(1.05); }

/* широкий (сторінка товару, кошик) */
.catbn-one { margin: 18px 0; }
.catbn--wide { grid-template-columns: minmax(0, 1fr) 280px; min-height: 180px; }
.catbn--wide .catbn__txt { padding: 22px 16px 22px 26px; }
.catbn--wide .catbn__t { font-size: 1.4rem; }
.catbn-one--cart { margin: 6px 0 0; }

@media (max-width: 1024px) { .catbns__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .catbns__row > .catbn:nth-child(3) { display: none; } }
@media (max-width: 760px) {
  .catbns__row { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .catbns__row::-webkit-scrollbar { display: none; }
  .catbns__row > .catbn { scroll-snap-align: start; }
  .catbns__row > .catbn:nth-child(3) { display: grid; }
  .catbn, .catbn--wide { grid-template-columns: minmax(0, 1fr) 40%; min-height: 176px; }
  .catbn__txt, .catbn--wide .catbn__txt { padding: 16px 8px 16px 16px; gap: 5px; }
  .catbn__t, .catbn--wide .catbn__t { font-size: 1.05rem; }
  .catbn__go { padding: 8px 12px; font-size: .8rem; }
}

/* Головна: слайдер із 8 банерів — 3 видно на комп'ютері, стрілки */
.catbns__nav { margin-left: auto; display: flex; gap: 6px; align-self: center; }
.catbns__btn { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.catbns__btn:hover { background: var(--ink); color: #fff; }
.catbns__row { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 24px) / 3); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.catbns__row::-webkit-scrollbar { display: none; }
.catbns__row > .catbn { scroll-snap-align: start; display: grid !important; }
@media (max-width: 1024px) { .catbns__row { grid-auto-columns: calc((100% - 12px) / 2); } }
@media (max-width: 760px) { .catbns__nav { display: none; } .catbns__row { grid-auto-columns: 86%; } }