/**
 * Bembi SEO & UX toolkit — v1 (стилі)
 * Префікс .bembi- — не перетинається з темою oct_showcase.
 */

/* ============ модалка ============ */
.bembi-ux-modal { display: none; position: fixed; inset: 0; z-index: 100000; }
.bembi-ux-modal--open { display: block; }
.bembi-ux-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.bembi-ux-modal__box {
    position: relative; max-width: 860px; width: calc(100% - 32px); max-height: 90vh;
    margin: 5vh auto 0; background: #fff; border-radius: 12px; overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.bembi-ux-modal__close {
    position: absolute; top: 8px; right: 12px; z-index: 2; border: 0; background: none;
    font-size: 28px; line-height: 1; cursor: pointer; color: #666;
}
.bembi-ux-modal__close:hover { color: #000; }
.bembi-ux-modal__body { padding: 24px; }

/* ============ швидкий перегляд ============ */
.bembi-qv__loader, .bembi-qv__error, .bembi-sizechart__empty { padding: 30px 10px; text-align: center; color: #666; }
.bembi-qv__grid { display: flex; gap: 24px; flex-wrap: wrap; }
.bembi-qv__gal { flex: 0 0 260px; max-width: 100%; }
.bembi-qv__gal img { width: 100%; border-radius: 10px; }
.bembi-qv__info { flex: 1 1 320px; min-width: 260px; }
.bembi-qv__name { display: block; font-size: 19px; font-weight: 700; color: #222; text-decoration: none; margin-bottom: 8px; }
.bembi-qv__name:hover { text-decoration: underline; }
.bembi-qv__prices { margin-bottom: 10px; }
.bembi-qv__price { font-size: 22px; font-weight: 700; }
.bembi-qv__price-old { font-size: 16px; color: #999; text-decoration: line-through; margin-left: 8px; }
.bembi-qv__label { font-weight: 600; font-size: 14px; margin: 12px 0 6px; }
.bembi-qv__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.bembi-qv__chip {
    width: 42px; height: 42px; border-radius: 50%; border: 2px solid #ddd; padding: 2px;
    cursor: pointer; background: #fff; overflow: hidden;
}
.bembi-qv__chip img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bembi-qv__chip.is-active { border-color: #2e7d32; box-shadow: 0 0 0 2px rgba(46, 125, 50, .25); cursor: default; }
.bembi-qv__chip:hover { border-color: #999; }
.bembi-qv__chip-txt { display: block; width: 100%; height: 100%; line-height: 32px; font-weight: 700; color: #555; }
.bembi-qv__color-name { font-size: 13px; color: #666; margin-top: 4px; }
.bembi-qv__size-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bembi-qv__size {
    min-width: 44px; padding: 7px 12px; border: 1px solid #d5d5d5; border-radius: 8px;
    background: #fff; cursor: pointer; font-size: 14px;
}
.bembi-qv__size:hover { border-color: #888; }
.bembi-qv__size.is-active { border-color: #2e7d32; background: #2e7d32; color: #fff; }
.bembi-qv__size.is-off { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.bembi-qv__buy { display: flex; gap: 10px; margin-top: 16px; align-items: center; }
.bembi-qv__qty {
    width: 70px; padding: 9px 8px; border: 1px solid #d5d5d5; border-radius: 8px; text-align: center;
}
.bembi-qv__cart {
    padding: 11px 26px; border: 0; border-radius: 8px; background: #2e7d32; color: #fff;
    font-size: 15px; font-weight: 600; cursor: pointer;
}
.bembi-qv__cart:hover { background: #256628; }
.bembi-qv__cart.is-added { background: #1b5e20; }
.bembi-qv__checkout { margin-left: 12px; font-weight: 600; }
.bembi-qv__warn { color: #c62828; font-size: 13px; margin-top: 8px; }
.bembi-qv__link { display: inline-block; margin-top: 16px; font-weight: 600; }
.bembi-qv__rating { font-size: 13px; color: #777; margin-bottom: 6px; }
.bembi-stars span { color: #ddd; }
.bembi-stars span.is-on { color: #f5a623; }

/* ============ штатний попап швидкого перегляду: наші доповнення ============ */
.bembi-hide-option { display: none !important; }

/* розміри текстом: ОДНА кнопка-пігулка (label теми) — без «подвійних» кіл */
.sc-product-options .radio label.radio-img.bembi-sz-label {
    width: auto !important; min-width: 42px; height: 42px;
    padding: 0 13px !important; border-radius: 21px !important;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.bembi-sz-label .bembi-sz-txt {
    font-size: 13px; font-weight: 600; line-height: 1; color: #333; white-space: nowrap;
}
.sc-product-options .radio label.radio-img.bembi-sz-label.selected { border-color: #4f43e3; }
.bembi-sz-label.selected .bembi-sz-txt { color: #4f43e3; }
.radio-img.bembi-sz-label.bembi-sz-off { opacity: .45; }
.bembi-sz-label.bembi-sz-off .bembi-sz-txt { text-decoration: line-through; }

/* чипи кольорів у попапі */
.bembi-qv-colors { margin-bottom: 14px; }
.bembi-qv-colors__label { font-weight: 600; font-size: 14px; margin-bottom: 8px; }

/* плавне перемикання кольору в попапі (без перезавантаження) */
#quickViewModal .modal-content { transition: opacity .18s ease; }
#quickViewModal .modal-content.bembi-qv-swap { opacity: .15; pointer-events: none; }

/* ============ таблиця розмірів ============ */
.bembi-size-chart-link {
    font-size: 12px; font-weight: 400; text-decoration: underline;
    color: #2e7d32; white-space: nowrap; cursor: pointer;
}
.bembi-sizechart__table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.bembi-sizechart__table th, .bembi-sizechart__table td {
    border: 1px solid #e2e2e2; padding: 8px 10px; text-align: center; font-size: 14px;
}
.bembi-sizechart__table th { background: #f6f6f6; font-weight: 600; }
.bembi-sizechart__yes { color: #2e7d32; font-weight: 700; }
.bembi-sizechart__no { color: #c62828; }
.bembi-sizechart__link { display: inline-block; font-weight: 600; }

/* ============ sticky «до кошика» (мобільні) ============ */
.bembi-sticky-buy {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    background: #fff; box-shadow: 0 -6px 24px rgba(0, 0, 0, .16);
    padding: 8px 12px; gap: 10px; align-items: center;
}
.bembi-sticky-buy--show { display: flex; }
.bembi-sticky-buy img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.bembi-sticky-buy__info { flex: 1 1 auto; min-width: 0; }
.bembi-sticky-buy__name {
    font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bembi-sticky-buy__price { font-size: 16px; font-weight: 700; }
.bembi-sticky-buy__btn {
    padding: 11px 18px; border: 0; border-radius: 8px; background: #2e7d32; color: #fff;
    font-weight: 600; cursor: pointer; white-space: nowrap;
}
@media (min-width: 768px) {
    .bembi-sticky-buy { display: none !important; }
}

/* ============ автодоповнення пошуку ============ */
.bembi-suggest-host { position: relative; }
.bembi-suggest {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
    background: #fff; border-radius: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
    max-height: 60vh; overflow: auto; z-index: 99999;
}
.bembi-suggest--open { display: block; }
.bembi-suggest__item {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    text-decoration: none; color: #222; border-bottom: 1px solid #f2f2f2;
}
.bembi-suggest__item:hover, .bembi-suggest__item.is-active { background: #f4faf4; }
.bembi-suggest__item img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: 0 0 44px; }
.bembi-suggest__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bembi-suggest__name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bembi-suggest__meta { font-size: 12px; color: #888; display: flex; align-items: center; gap: 6px; }
.bembi-suggest__dots { display: inline-flex; gap: 3px; }
.bembi-suggest__dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid #ddd; object-fit: cover; }
.bembi-suggest__price { font-weight: 700; font-size: 14px; white-space: nowrap; }
.bembi-suggest__empty { padding: 12px; color: #888; font-size: 14px; }

/* ============ довірчі блоки ============ */
.bembi-trust {
    display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 14px 0 6px;
    padding: 12px 14px; background: #f7faf7; border-radius: 10px;
}
.bembi-trust__item {
    display: flex; align-items: center; gap: 7px; font-size: 13px; color: #2c3e2c;
    text-decoration: none;
}
a.bembi-trust__item:hover { text-decoration: underline; }
.bembi-trust__ico { font-size: 17px; line-height: 1; }

/* ============ «повідомити про наявність» ============ */
.bembi-notify {
    margin: 14px 0; padding: 14px; border: 1px dashed #c9c9c9; border-radius: 10px;
    background: #fffdf5;
}
.bembi-notify__title { font-weight: 700; margin-bottom: 8px; }
.bembi-notify__row { display: flex; gap: 8px; flex-wrap: wrap; }
.bembi-notify__input {
    flex: 1 1 180px; padding: 10px 12px; border: 1px solid #d5d5d5; border-radius: 8px;
}
.bembi-notify__btn {
    padding: 10px 16px; border: 0; border-radius: 8px; background: #ef6c00; color: #fff;
    font-weight: 600; cursor: pointer;
}
.bembi-notify__btn:hover { background: #e65100; }
.bembi-notify__msg { margin-top: 8px; font-size: 13px; color: #2e7d32; }

/* ============ схожі товари ============ */
.bembi-related { margin: 26px 0 10px; }
.bembi-related__title { font-size: 19px; font-weight: 700; margin-bottom: 12px; }
.bembi-related__row {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
    scroll-snap-type: x mandatory;
}
.bembi-related__card {
    flex: 0 0 170px; scroll-snap-align: start; display: flex; flex-direction: column;
    gap: 6px; text-decoration: none; color: #222;
}
.bembi-related__card img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px;
    border: 1px solid #eee;
}
.bembi-related__name { font-size: 13px; line-height: 1.35; }
.bembi-related__card:hover .bembi-related__name { text-decoration: underline; }
.bembi-related__price { font-weight: 700; font-size: 14px; }
.bembi-related__price s { color: #999; font-weight: 400; margin-left: 6px; }

/* ============ h1 головної (з патчу шаблону) ============ */
.bembi-home-h1 { font-size: 22px; font-weight: 700; margin: 16px 0 10px; line-height: 1.3; }

/* ============ 404: популярні розділи ============ */
.bembi-404 { margin: 26px 0; }
.bembi-404__title { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.bembi-404__grid { display: flex; flex-wrap: wrap; gap: 10px; }
.bembi-404__link {
    padding: 9px 16px; border: 1px solid #ddd; border-radius: 22px; text-decoration: none;
    color: #222; font-size: 14px;
}
.bembi-404__link:hover { border-color: #2e7d32; color: #2e7d32; }
.bembi-404__search { margin: 16px 0 6px; }
.bembi-404__search input {
    width: min(420px, 100%); padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px;
}