/* ═══════════════════════════════════════════════════════════════
   Sushi Boom — Child Theme CSS
   Стиль: мінімалістичний японський, чорно-білий + акцент #E8001D
═══════════════════════════════════════════════════════════════ */

/* ── CSS ЗМІННІ ─────────────────────────────────────────────── */
:root {
    --sb-red:        #E8001D;
    --sb-red-dark:   #C0001A;
    --sb-black:      #111111;
    --sb-gray-900:   #1a1a1a;
    --sb-gray-700:   #444444;
    --sb-gray-400:   #999999;
    --sb-gray-200:   #e8e8e8;
    --sb-gray-100:   #f5f5f5;
    --sb-white:      #ffffff;

    --sb-radius:     8px;
    --sb-radius-lg:  16px;
    --sb-shadow:     0 4px 24px rgba(0,0,0,.12);
    --sb-shadow-lg:  0 8px 48px rgba(0,0,0,.18);

    --sb-font:       inherit; /* успадковуємо від Sakuri */
    --sb-transition: 0.2s ease;
}

/* ── ТАБИ КАТЕГОРІЙ ─────────────────────────────────────────── */
.sb-tabs-wrapper {
    display: flex;
    gap: 8px;
    overflow-x: auto;
/*     padding: 0 0 16px; */
    margin-bottom: 24px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

.sb-tabs-wrapper::-webkit-scrollbar { display: none; }
.sb-tabs-wrapper:active { cursor: grabbing; }

.sb-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 2px solid var(--sb-gray-200);
    border-radius: 100px;
    background: var(--sb-white);
    color: var(--sb-gray-700);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--sb-transition);
    user-select: none;
}

.sb-tab:hover {
    border-color: var(--sb-red);
    color: var(--sb-red);
}

.sb-tab--active {
    background: var(--sb-red);
    border-color: var(--sb-red);
    color: var(--sb-white);
}


.sb-tab--active:hover{
	color: var(--sb-white);
}

.sb-tab__icon img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

/* Лоадер табів */
.sb-tabs-loader {
    display: flex;
    justify-content: center;
    padding: 40px;
}

.sb-loader-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--sb-gray-200);
    border-top-color: var(--sb-red);
    border-radius: 50%;
    animation: sb-spin 0.7s linear infinite;
}

@keyframes sb-spin { to { transform: rotate(360deg); } }

/* ── МОДАЛЬНЕ ВІКНО ─────────────────────────────────────────── */
.sb-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
}

body.sb-modal-open {
    overflow: hidden;
}

.sb-modal {
    background: var(--sb-white);
    border-radius: var(--sb-radius-lg);
    width: 100%;
    max-width: 840px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    box-shadow: var(--sb-shadow-lg);
    animation: sb-modal-in .25s ease;
}

@keyframes sb-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 640px) {
    .sb-modal__content { display: grid; grid-template-columns: 45% 55%; }
}

.sb-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.08);
    color: var(--sb-gray-700);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--sb-transition);
}
.sb-modal__close:hover { background: rgba(0,0,0,.16); }

/* Фото */
.sb-modal__image-wrap {
    position: relative;
    background: var(--sb-gray-100);
    border-radius: var(--sb-radius-lg) 0 0 var(--sb-radius-lg);
    overflow: hidden;
}

.sb-modal__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 260px;
}

.sb-modal__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sb-badge {
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sb-badge--sale   { background: var(--sb-red); color: white; }
.sb-badge--custom { background: var(--sb-black); color: white; }

/* Body модалки */
.sb-modal__body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-modal__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--sb-black);
    margin: 0;
    line-height: 1.3;
}

.sb-modal__desc {
    font-size: 14px;
    color: var(--sb-gray-400);
    margin: 0;
    line-height: 1.6;
}

/* Секції інгредієнтів */
.sb-modal__section {
    background: var(--sb-gray-100);
    border-radius: var(--sb-radius);
    padding: 14px 16px;
}

.sb-modal__section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sb-gray-700);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sb-section-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sb-modal__section--remove .sb-section-icon { color: var(--sb-red); }
.sb-modal__section--extras .sb-section-icon { color: #22a06b; font-size: 18px; }

/* Чекбокси */
.sb-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.sb-checkbox-label input[type="checkbox"] {
    display: none;
}

.sb-checkbox-box {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid var(--sb-gray-200);
    border-radius: 4px;
    transition: all var(--sb-transition);
    position: relative;
}

.sb-checkbox-label input:checked + .sb-checkbox-box {
    background: var(--sb-red);
    border-color: var(--sb-red);
}

.sb-checkbox-label input:checked + .sb-checkbox-box::after {
    content: '';
    position: absolute;
    left: 5px; top: 2px;
    width: 6px; height: 10px;
    border: 2px solid white;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.sb-checkbox-text {
    font-size: 14px;
    color: var(--sb-black);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-extra-price {
    font-size: 13px;
    color: #22a06b;
    font-weight: 600;
}

/* Footer модалки */
.sb-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Лічильник кількості */
.sb-qty-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid var(--sb-gray-200);
    border-radius: var(--sb-radius);
    overflow: hidden;
}

.sb-qty-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--sb-gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--sb-transition);
}
.sb-qty-btn:hover { background: var(--sb-gray-100); }

.sb-qty-input {
    width: 48px;
    text-align: center;
    border: none;
    border-left: 2px solid var(--sb-gray-200);
    border-right: 2px solid var(--sb-gray-200);
    font-size: 16px;
    font-weight: 600;
    color: var(--sb-black);
    padding: 0;
    -moz-appearance: textfield;
}
.sb-qty-input::-webkit-outer-spin-button,
.sb-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Ціна */
.sb-modal__price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.sb-modal__price-label {
    font-size: 12px;
    color: var(--sb-gray-400);
    text-transform: uppercase;
    letter-spacing: .04em;
	margin-bottom: 10px;
}
.sb-modal__price {
    font-size: 26px;
    font-weight: 700;
    color: var(--sb-red);
}

/* Кнопка Add to cart */
.sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: var(--sb-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--sb-transition);
    text-decoration: none;
}

.sb-btn--primary {
    background: var(--sb-red);
    color: white;
    width: 100%;
}
.sb-btn--primary:hover:not(:disabled) {
    background: var(--sb-red-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(232,0,29,.35);
}
.sb-btn--primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.sb-btn-icon { flex-shrink: 0; }

/* Повідомлення */
.sb-modal__notice {
    padding: 12px 16px;
    border-radius: var(--sb-radius);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}
.sb-notice--success {
    background: #e6f9f0;
    color: #22a06b;
}

/* Скелетон */
.sb-modal__skeleton { padding: 28px; display: grid; gap: 16px; }
.sb-skeleton {
    border-radius: var(--sb-radius);
    background: linear-gradient(90deg, var(--sb-gray-100) 25%, var(--sb-gray-200) 50%, var(--sb-gray-100) 75%);
    background-size: 200% 100%;
    animation: sb-shimmer 1.4s infinite;
}
.sb-skeleton--image  { height: 240px; }
.sb-skeleton--title  { height: 28px; width: 70%; }
.sb-skeleton--text   { height: 16px; }
.sb-skeleton--short  { width: 50%; }

@keyframes sb-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── КОШИК ──────────────────────────────────────────────────── */

/* Complimentary соуси в WC кошику */
.sb-complimentary-item {
    font-style: italic;
    color: var(--sb-gray-700);
}

.sb-complimentary-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #e6f9f0;
    color: #22a06b;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
}

.sb-free-label {
    color: #22a06b;
    font-weight: 600;
    font-size: 13px;
}

.sb-sauce-qty {
    font-size: 14px;
    color: var(--sb-gray-700);
}

/* Кастомний кошик-список (якщо використовується sb_get_cart AJAX) */
.sb-cart-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--sb-gray-200);
}

.sb-cart-item__img {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
}

.sb-cart-item__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--sb-black);
}

.sb-cart-item__mod {
    font-size: 12px;
    color: var(--sb-gray-400);
    display: block;
}

.sb-cart-item__controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sb-cart-qty-minus,
.sb-cart-qty-plus {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--sb-gray-200);
    background: var(--sb-white);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-gray-700);
    transition: all var(--sb-transition);
}
.sb-cart-qty-minus:hover,
.sb-cart-qty-plus:hover { border-color: var(--sb-red); color: var(--sb-red); }

.sb-cart-qty-val {
    min-width: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.sb-cart-item-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sb-gray-400);
    font-size: 18px;
    padding: 4px;
    transition: color var(--sb-transition);
}
.sb-cart-item-remove:hover { color: var(--sb-red); }

.sb-cart-total-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--sb-red);
}

/* ── CHECKOUT ───────────────────────────────────────────────── */
.sb-checkout-wrapper {
    max-width: 760px;
    margin: 0 auto;
}

.sb-delivery-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 32px;
}

.sb-delivery-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    border: 2px solid var(--sb-gray-200);
    border-radius: var(--sb-radius-lg);
    background: var(--sb-white);
    color: var(--sb-gray-700);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--sb-transition);
}
.sb-delivery-btn:hover { border-color: var(--sb-red); color: var(--sb-red); }
.sb-delivery-btn--active {
    border-color: var(--sb-red);
    background: var(--sb-red);
    color: white;
}

.sb-checkout-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Summary замовлення */
.sb-order-summary {
    background: var(--sb-gray-100);
    border-radius: var(--sb-radius-lg);
    padding: 20px;
    margin-bottom: 24px;
}

.sb-summary-item {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--sb-gray-200);
}
.sb-summary-item:last-child { border: none; }

.sb-summary-item__img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
}

.sb-summary-item__name   { font-size: 14px; font-weight: 600; }
.sb-summary-item__mod    { font-size: 12px; color: var(--sb-gray-400); display: block; }
.sb-summary-item__qty    { font-size: 14px; color: var(--sb-gray-400); }
.sb-summary-item__price  { font-size: 14px; font-weight: 600; }

.sb-summary-item__right  { text-align: right; }

.sb-summary-sauces {
    padding: 10px 0;
    font-size: 13px;
    color: var(--sb-gray-400);
    display: flex;
    gap: 6px;
}
.sb-complimentary-label { font-weight: 600; }

.sb-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    margin-top: 8px;
    border-top: 2px solid var(--sb-gray-900);
    font-size: 18px;
}
.sb-summary-total strong { color: var(--sb-red); font-size: 22px; }

/* Форма Pickup */
.sb-pickup-form { display: flex; flex-direction: column; gap: 16px; }

.sb-form-group { display: flex; flex-direction: column; gap: 6px; }
.sb-form-group label { font-size: 13px; font-weight: 600; color: var(--sb-gray-700); }

.sb-form-group input,
.sb-form-group textarea {
    padding: 12px 14px;
    border: 2px solid var(--sb-gray-200);
    border-radius: var(--sb-radius);
    font-size: 15px;
    color: var(--sb-black);
    background: var(--sb-white);
    transition: border-color var(--sb-transition);
    font-family: var(--sb-font);
}

.sb-form-group input:focus,
.sb-form-group textarea:focus {
    outline: none;
    border-color: var(--sb-red);
}

.sb-pickup-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--sb-gray-700);
    background: var(--sb-gray-100);
    padding: 12px 14px;
    border-radius: var(--sb-radius);
}

/* DoorDash */
.sb-doordash-banner {
    background: var(--sb-gray-100);
    border-radius: var(--sb-radius-lg);
    padding: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sb-doordash-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
}

.sb-doordash-desc { color: var(--sb-gray-700); font-size: 15px; margin: 0; }

.sb-doordash-order-hint {
    background: white;
    border-radius: var(--sb-radius);
    padding: 16px;
    font-size: 14px;
    text-align: left;
    width: 100%;
}

.sb-hint-item { padding: 4px 0; color: var(--sb-black); }
.sb-hint-note {
    margin-top: 10px;
    font-size: 13px;
    color: var(--sb-gray-400);
    background: #fffbe6;
    padding: 8px 12px;
    border-radius: 6px;
}

.sb-btn--doordash {
    background: #FF3008;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}
.sb-btn--doordash:hover {
    background: #d42800;
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255,48,8,.35);
}

/* ── ПОРОЖНІЙ CHECKOUT ────────────────────── */
.sb-checkout-empty {
    text-align: center;
    padding: 48px;
    color: var(--sb-gray-400);
}

/* ── АДМІНКА ─────────────────────────────── */
.sb-admin-wrap h1 { font-size: 24px; margin-bottom: 8px; }

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 639px) {
    .sb-modal { margin: 0; border-radius: var(--sb-radius-lg) var(--sb-radius-lg) 0 0; }
    .sb-modal-overlay { align-items: flex-end; padding: 0; }
    .sb-modal__image-wrap { border-radius: var(--sb-radius-lg) var(--sb-radius-lg) 0 0; }
    .sb-modal__image { min-height: 200px; max-height: 220px; }
    .sb-modal__body { padding: 20px; }

    .sb-delivery-toggle { grid-template-columns: 1fr; }
    .sb-summary-item { grid-template-columns: 40px 1fr auto; }
}




/* ── СТРІЛКИ ПРОКРУТКИ ТАБІВ ────────────────────────────────── */
.sb-tabs-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
}

.sb-tabs-wrapper {
    flex: 1;
    margin-bottom: 0 !important; /* скидаємо старий margin */
}

.sb-tabs-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--sb-gray-200);
    background: var(--sb-white);
    color: var(--sb-gray-700);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--sb-transition);
    user-select: none;
    z-index: 2;
}
.sb-tabs-arrow:hover { border-color: var(--sb-red); color: var(--sb-red); }
.sb-tabs-arrow--hidden { opacity: 0; pointer-events: none; }

/* На десктопі стрілки не показуємо */
@media (min-width: 1025px) {
    .sb-tabs-arrow { display: none; }
}

/* ── STICKY ТАБИ ─────────────────────────────────────────────── */
.sb-tabs-nav--sticky {
    position: fixed;
    left: 0;
    right: 0;
    /* z-index нижче хедера Sakuri (який ~9999), але вище контенту */
    z-index: 9;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    padding: 10px 20px;
    margin-bottom: 0;
    /* top встановлюється динамічно через JS = висота #lte-nav-wrapper */
}

/* Placeholder щоб контент не стрибав коли таби стають sticky */
.sb-tabs-nav--sticky ~ #sb-products-ajax-wrapper,
.sb-tabs-nav--sticky ~ #sb-wc-original-loop {
    margin-top: 70px;
}

/* ── КНОПКИ EXTRA СОУСІВ В КОШИКУ ───────────────────────────── */
.sb-extra-sauces-row th {
    vertical-align: top;
    padding-top: 14px;
    font-size: 14px;
    font-weight: 600;
}

.sb-sauce-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.sb-add-sauce-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 2px solid var(--sb-gray-200);
    border-radius: 100px;
    background: var(--sb-white);
    color: var(--sb-black);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--sb-transition);
    white-space: nowrap;
}
.sb-add-sauce-btn:hover:not(:disabled) {
    border-color: var(--sb-red);
    color: var(--sb-red);
}
.sb-add-sauce-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.sb-sauce-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--sb-gray-400);
    background: var(--sb-gray-100);
    padding: 2px 6px;
    border-radius: 100px;
}
.sb-add-sauce-btn:hover .sb-sauce-price { background: rgba(232,0,29,.08); color: var(--sb-red); }

.sb-sauce-hint {
    font-size: 12px;
    color: var(--sb-gray-400);
    margin: 0;
    font-style: italic;
}

/* ── SAFARI FIX — додаткові стилі ───────────────────────────── */
/* Safari не підтримує gap в flex для деяких версій */
.sb-tabs-wrapper {
    -webkit-overflow-scrolling: touch;
}

/* ── МОБІЛЬНИЙ КОШИК ПОЗА БУРГЕР-МЕНЮ ───────────────────────── */

/* Контейнер для кошика який ми переносимо в хедер */
.sb-mobile-cart, .sb-mobile-cart-wrap {
    display: none; /* ховаємо на десктопі */
}

@media (max-width: 1024px) {
    /* Показуємо наш перенесений кошик */
    .sb-mobile-cart {
        display: flex;
        align-items: center;
    }

    /* Ховаємо оригінальний кошик всередині бургер-меню */
    .lte-navbar-custom-mobile-wrapper .lte-mobile-controls {
        display: none !important;
    }

    /* Позиціонуємо кошик в хедері поруч з бургером */
    #lte-nav-wrapper .e-con-inner {
        position: relative;
    }

    .sb-mobile-cart-wrap {
		display: flex;
        position: absolute;
        right: 0; /* відступ від правого краю, щоб не перекрити бургер */
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

    /* Стилізуємо під оригінал теми */
    .sb-mobile-cart-wrap .lte-cart {
        display: flex;
        align-items: center;
        position: relative;
        color: inherit;
        text-decoration: none;
    }

    .sb-mobile-cart-wrap .lte-icon-cart {
        font-size: 20px;
        color: #000;
    }

    .sb-mobile-cart-wrap .lte-count {
        position: absolute;
        top: -8px;
        right: -8px;
        background: var(--sb-red);
        color: #fff;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
}

/* ── МОБІЛЬНА/ПЛАНШЕТНА КАРТКА ТОВАРУ ───────────────────────
   Реальна структура lte-item:
   div.lte-item
     div.lte-image > [кнопки] + [sb-card-text дублікат] + a>img
     div.lte-item-descr > [назва] + [excerpt]
     div.lte-descr-right > [кнопки]
──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    /* Сітка товарів — 1 колонка */
    #sb-products-ajax-wrapper ul.products,
    .sb-products-grid.products {
        display: block !important;
        columns: unset !important;
        grid-template-columns: unset !important;
    }

    /* Картка */
    #sb-products-ajax-wrapper ul.products li.product,
    .sb-products-grid li.product {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #efefef !important;
        box-shadow: none !important;
        display: block !important;
    }
    #sb-products-ajax-wrapper ul.products li.product:last-child,
    .sb-products-grid li.product:last-child { border-bottom: none !important; }

    /* lte-item — горизонтальний flex */
    #sb-products-ajax-wrapper .product .lte-item,
    .sb-products-grid .product .lte-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 14px 16px !important;
        gap: 12px !important;
        min-height: unset !important;
        background: #fff !important;
    }
    #sb-products-ajax-wrapper ul.products li.product:hover .lte-item,
    .sb-products-grid li.product:hover .lte-item {
        background: #fafafa !important;
    }

    /* lte-image → праворуч, фіксований розмір */
    #sb-products-ajax-wrapper .product .lte-image,
    .sb-products-grid .product .lte-image {
        order: 2 !important;
        flex: 0 0 88px !important;
        width: 88px !important;
        height: 88px !important;
        min-height: unset !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        position: relative !important;
        background: #f5f5f5 !important;
    }

    /* Посилання з фото займає весь .lte-image */
    #sb-products-ajax-wrapper .product .lte-image > a.woocommerce-loop-product__link,
    .sb-products-grid .product .lte-image > a.woocommerce-loop-product__link {
        display: block !important;
        width: 88px !important;
        height: 88px !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important;
    }

    #sb-products-ajax-wrapper .product .lte-image img,
    .sb-products-grid .product .lte-image img {
        width: 88px !important;
        height: 88px !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 0 !important;
        max-width: unset !important;
    }

    /* Ховаємо кнопки поверх фото і дублікат sb-card-text */
    #sb-products-ajax-wrapper .product .lte-image .lte-buttons-wrapper,
    #sb-products-ajax-wrapper .product .lte-image .sb-card-text,
    #sb-products-ajax-wrapper .product .lte-image .lte-wc-new,
    .sb-products-grid .product .lte-image .lte-buttons-wrapper,
    .sb-products-grid .product .lte-image .sb-card-text,
    .sb-products-grid .product .lte-image .lte-wc-new {
        display: none !important;
    }

    /* lte-item-descr → ліворуч, займає решту */
    #sb-products-ajax-wrapper .product .lte-item-descr,
    .sb-products-grid .product .lte-item-descr {
        order: 1 !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        padding: 0 !important;
        min-height: unset !important;
    }

    /* Назва — перебиваємо будь-який display:none від теми */
    #sb-products-ajax-wrapper .product .lte-item-descr .woocommerce-loop-product__title,
    #sb-products-ajax-wrapper .product .lte-item-descr .sb-card-text h2,
    #sb-products-ajax-wrapper .product .lte-item-descr .sb-card-text .woocommerce-loop-product__title,
    .sb-products-grid .product .lte-item-descr .woocommerce-loop-product__title,
    .sb-products-grid .product .lte-item-descr .sb-card-text h2,
    .sb-products-grid .product .lte-item-descr .sb-card-text .woocommerce-loop-product__title {
        display: block !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #111 !important;
        margin: 0 0 2px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow: hidden !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        position: static !important;
    }

    /* Ціна */
    #sb-products-ajax-wrapper .product .lte-item-descr .price,
    .sb-products-grid .product .lte-item-descr .price {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #111 !important;
        margin: 2px 0 0 !important;
        order: 3 !important;
        display: block !important;
    }

    /* Інгредієнти */
    #sb-products-ajax-wrapper .product .lte-item-descr .lte-excerpt,
    .sb-products-grid .product .lte-item-descr .lte-excerpt {
        font-size: 12px !important;
        color: #000 !important;
        margin: 0 !important;
        line-height: 1.4 !important;
        order: 2 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
		text-align: left;
    }

    /* Ховаємо зайве в lte-item-descr */
    #sb-products-ajax-wrapper .product .lte-item-descr .lte-product-attributes,
    #sb-products-ajax-wrapper .product .lte-item-descr .woocommerce-loop-product__link,
    .sb-products-grid .product .lte-item-descr .lte-product-attributes,
    .sb-products-grid .product .lte-item-descr .woocommerce-loop-product__link {
        display: block !important;
		text-align: left;
    }

    /* sb-card-text в lte-item-descr — показуємо (там назва і ціна) */
    #sb-products-ajax-wrapper .product .lte-item-descr .sb-card-text,
    .sb-products-grid .product .lte-item-descr .sb-card-text {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
    }

    /* Назва всередині sb-card-text */
    #sb-products-ajax-wrapper .product .lte-item-descr .sb-card-text .woocommerce-loop-product__title,
    .sb-products-grid .product .lte-item-descr .sb-card-text .woocommerce-loop-product__title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #111 !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        white-space: normal !important;
    }

    /* Ціна після переміщення — пряме дитя lte-item-descr */
    #sb-products-ajax-wrapper .product .lte-item-descr > .price,
    .sb-products-grid .product .lte-item-descr > .price {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #111 !important;
        margin: 4px 0 0 !important;
        display: block !important;
    }

    /* Ціна ще всередині sb-card-text (до переміщення JS) — ховаємо дублікат */
    #sb-products-ajax-wrapper .product .lte-item-descr .sb-card-text .price,
    .sb-products-grid .product .lte-item-descr .sb-card-text .price {
        display: none !important;
    }

    /* Ховаємо lte-descr-right повністю */
    #sb-products-ajax-wrapper .product .lte-descr-right,
    .sb-products-grid .product .lte-descr-right {
        display: none !important;
    }

    /* ── Планшет: 2 колонки ────────────────────────── */
    @media (min-width: 600px) {
        #sb-products-ajax-wrapper ul.products,
        .sb-products-grid.products {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
        }
        #sb-products-ajax-wrapper ul.products li.product,
        .sb-products-grid li.product {
            border-bottom: 1px solid #efefef !important;
            border-right: none !important;
        }
        #sb-products-ajax-wrapper ul.products li.product:nth-child(odd),
        .sb-products-grid li.product:nth-child(odd) {
            border-right: 1px solid #efefef !important;
        }
        #sb-products-ajax-wrapper ul.products li.product:nth-last-child(-n+2):nth-child(odd),
        #sb-products-ajax-wrapper ul.products li.product:last-child,
        .sb-products-grid li.product:nth-last-child(-n+2):nth-child(odd),
        .sb-products-grid li.product:last-child {
            border-bottom: none !important;
        }
    }
}

/* ── ДЕСКТОПНА КАРТКА ТОВАРУ (1025px+) ──────────────────────
   Структура: lte-image | lte-item-descr(назва+excerpt+price) | lte-descr-right(кнопка)
   Ціль: зображення / назва+інгредієнти / ціна+кнопка в одному рядку
──────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {

    /* lte-item-descr — flex колонка: назва, інгредієнти, потім ціна+кнопка внизу */
    .products .product .lte-item-descr {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    /* Верхня частина: назва + інгредієнти */
    .products .product .lte-item-descr .woocommerce-LoopProduct-link,
    .products .product .lte-item-descr .lte-excerpt {
        flex-shrink: 0 !important;
    }

    /* Назва */
/*     .products .product .lte-item-descr .woocommerce-loop-product__title {
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        white-space: normal !important;
    } */

    /* Інгредієнти */
    .products .product .lte-item-descr .lte-excerpt {
        font-size: 13px !important;
        color: #999 !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-bottom: 0 !important;
    }

    /* Нижня частина: ціна і кнопка — в одному рядку */
    .products .product .lte-item-descr .price {
        margin-top: auto !important;
        padding-top: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    /* Ховаємо lte-descr-right (окремий блок з кнопкою) */
    .products .product .lte-descr-right {
        display: none !important;
    }

    /* Переміщуємо кнопку "Додати в кошик" всередину .price через JS
       Поки JS не відпрацював — ховаємо кнопку зі старого місця */
    .products .product .lte-item-descr .sb-desktop-add-btn {
        display: inline-flex !important;
        align-items: center !important;
        padding: 6px 14px !important;
        background: var(--sb-red) !important;
        color: #fff !important;
        border-radius: 100px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        border: none !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: background 0.2s !important;
    }
    .products .product .lte-item-descr .sb-desktop-add-btn:hover {
        background: var(--sb-red-dark) !important;
    }
}
/* ── ГРУПОВАНИЙ БЛОК СОУСІВ В КОШИКУ ────────────────────────── */
.sb-sauces-group {
    margin: 0 0 8px;
    border: 1px solid #e8e8e8;
    border-radius: var(--sb-radius);
    overflow: hidden;
    background: #fff;
}

.sb-sauces-group__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background var(--sb-transition);
}
.sb-sauces-group__header:hover { background: #fafafa; }

.sb-sauces-group__icon { font-size: 18px; flex-shrink: 0; }

.sb-sauces-group__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--sb-black);
    flex: 1;
}

.sb-sauces-group__free {
    font-size: 13px;
    font-weight: 600;
    color: #22a06b;
    background: #e6f9f0;
    padding: 2px 10px;
    border-radius: 100px;
    flex-shrink: 0;
}

.sb-sauces-group__arrow {
    font-size: 20px;
    color: var(--sb-gray-400);
    flex-shrink: 0;
    transition: transform var(--sb-transition);
    line-height: 1;
}
.sb-sauces-group--open .sb-sauces-group__arrow {
    transform: rotate(90deg);
}

.sb-sauces-group__detail {
    padding: 10px 16px 14px 44px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}
.sb-sauces-group__detail-text {
    font-size: 13px;
    color: var(--sb-gray-700);
    line-height: 1.6;
}

/* ── ПОЗИЦІЯ КНОПКИ QUICK ADD — між текстом і фото ────────── */
/* Додати в кінець sushi-boom.css                              */
@media (max-width: 1024px) {

    /* Кнопка тепер flex-елемент в lte-item, а не absolute в lte-image */
    #sb-products-ajax-wrapper .product .lte-item .sb-quick-add, .sb-products-grid .product .lte-item .sb-quick-add {
        position: absolute !important;
        order: 2 !important;
        flex-shrink: 0 !important;
        align-self: center !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: var(--sb-red) !important;
        color: #fff !important;
        border: none !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        font-weight: 300 !important;
        box-shadow: 0 2px 8px rgba(232, 0, 29, .35) !important;
        transition: background 0.2s, transform 0.15s !important;
        padding: 0 !important;
        bottom: 15px;
        right: 30%;
        margin: 0 6px !important;
    }

    #sb-products-ajax-wrapper .product .lte-item .sb-quick-add:hover,
    .sb-products-grid .product .lte-item .sb-quick-add:hover {
        background: var(--sb-red-dark) !important;
        transform: scale(1.1) !important;
    }

    #sb-products-ajax-wrapper .product .lte-item .sb-quick-add--added,
    .sb-products-grid .product .lte-item .sb-quick-add--added {
        background: #22a06b !important;
    }

    /* lte-item-descr — order 1 (ліворуч) */
    #sb-products-ajax-wrapper .product .lte-item .lte-item-descr,
    .sb-products-grid .product .lte-item .lte-item-descr {
        order: 1 !important;
    }

    /* lte-image — order 3 (праворуч) */
    #sb-products-ajax-wrapper .product .lte-image,
    .sb-products-grid .product .lte-image {
        order: 3 !important;
    }
}

/* Розмір іконки всередині кнопки */
#sb-products-ajax-wrapper .product .lte-item .sb-quick-add i,
.sb-products-grid .product .lte-item .sb-quick-add i {
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}