/* custom-menu.css — isolated styles for /menu only */

/* --- Hero spacing --- */
.ss-menu-page .menu-hero.section-padding {
    padding-top: 30px !important;
    padding-bottom: 10px !important;
    min-height: auto !important;
}

/* --- Category spacing --- */
.ss-menu-page .menu-category.section-padding-top {
    padding-top: 10px !important;
}

/* --- Remove extra spacing inside hero --- */
.ss-menu-page .menu-hero .row.mb-4 {
    margin-bottom: 0 !important;
}

/* --- Fix huge card offset --- */
.ss-menu-page .single-food-items {
    margin-top: 0 !important;
}

/* --- Prevent vertical stretch issues --- */
.ss-menu-page .menu-category .row.g-4 {
    align-items: flex-start;
}

.ss-menu-page .menu-category .row.g-4>[class*="col-"] {
    align-self: flex-start;
}

.ss-menu-page .menu-category .single-food-items,
.ss-menu-page .menu-category .dishes-card {
    height: auto !important;
    min-height: 0 !important;
}

/* ===== Menu page: layout with sidebar — prevent cards from becoming too narrow ===== */
.ss-menu-page .menu-hero .col-lg-9 .menu-category .row.g-4>[class*="col-"] {
    /* 3 cards per row in the content area when sidebar exists */
    flex: 0 0 auto;
    width: 33.333333%;
}

@media (max-width: 991.98px) {

    /* On md and below — default bootstrap behavior (2 per row / 1 per row depending on existing col classes) */
    .ss-menu-page .menu-hero .col-lg-9 .menu-category .row.g-4>[class*="col-"] {
        width: 50%;
    }
}

@media (max-width: 575.98px) {
    .ss-menu-page .menu-hero .col-lg-9 .menu-category .row.g-4>[class*="col-"] {
        width: 100%;
    }
}

/* ===== Menu shop view toggle ===== */
.ss-menu-page[data-view="list"] .menu-category .row.g-4>[class*="col-"] {
    width: 100% !important;
}

.ss-menu-page[data-view="list"] .menu-category .dishes-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
}

.ss-menu-page[data-view="list"] .menu-category .dishes-card .thumb {
    flex: 0 0 140px;
    max-width: 140px;
}

/* ===== Breadcrumb ===== */
.breadcumb-section {
    background-size: cover;
    background-position: center;
    position: relative;
}

.breadcumb-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.breadcumb-content {
    position: relative;
    z-index: 2;
}

.breadcumb-title {
    color: #fff;
}

.breadcumb-menu li {
    color: #fff;
}

/* Menu breadcrumb uses JPG on purpose (stable + consistent); PNG kept as legacy backup */
.breadcumb-section {
    background-image: url("../img/breadcrumb/menu-breadcrumb.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Disable any template pseudo-elements on wrapper (keep our overlay on .breadcumb-section::before) */
.breadcumb-wrapper::before,
.breadcumb-wrapper::after {
    content: none !important;
    background-image: none !important;
}

.breadcumb-wrapper {
    background: transparent !important;
}

/* Mobile: make menu breadcrumb shorter than template */
@media (max-width: 575px) {
    .ss-menu-page .breadcumb-wrapper .breadcumb-content {
        padding: 60px 0;
        /* was 160px in template */
    }
}

/* =========================
   Sticky sidebar (MENU only)
   ========================= */

/* main.css: .fix { overflow:hidden } breaks sticky — override ONLY on menu page */

/* Most reliable: apply sticky to the Bootstrap column (not inner sidebar) */
/* ===== Menu: sticky sidebar (desktop) ===== */
@media (min-width: 992px) {
    .ss-menu-page .col-xl-3.col-lg-4 {
        align-self: flex-start;
        /* важно для flex-row */
    }

    .ss-menu-page .shop-sidebar.main-sidebar {
        position: sticky;
        top: 120px;
        /* можешь потом подогнать под высоту хедера */
    }
}

/* ===== Menu page: restore normal scroll context for sticky ===== */
.page-menu {
    overflow: visible !important;
}

.page-menu body {
    overflow: visible !important;
}

/* make html the scroll container instead of body */
html {
    overflow-y: auto;
}

/* Sidebar active link (premium subtle) */
.main-sidebar .single-sidebar-widget ul li a.active {
    font-weight: 700;
    text-decoration: none;
}

.main-sidebar .single-sidebar-widget ul li a.active::before {
    content: "• ";
}

/* === Menu sidebar: premium active states === */
.ss-menu-page .main-sidebar .single-sidebar-widget ul li a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    transition: all .15s ease-in-out;
}

.ss-menu-page .main-sidebar .single-sidebar-widget ul li a:hover {
    transform: translateX(2px);
}

/* Active link */
.ss-menu-page .main-sidebar .single-sidebar-widget ul li a.active {
    font-weight: 700;
    background: rgba(255, 255, 255, 0.10);
}

/* Small accent dot for active */
.ss-menu-page .main-sidebar .single-sidebar-widget ul li a.active::before {
    content: "●";
    display: inline-block;
    margin-right: 8px;
    font-size: 10px;
    line-height: 1;
    vertical-align: middle;
}

/* =========================
   Menu sidebar — premium UI
   ========================= */

/* Categories list like template screenshot */
.ss-menu-page .ss-sidebar-categories li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .5px;
}

.ss-menu-page .ss-sidebar-categories li:first-child a {
    border-top: 1px solid rgba(0, 0, 0, .12);
}

.ss-menu-page .ss-sidebar-categories .ss-cat-arrow {
    color: #e51b24;
    /* theme red */
    font-size: 18px;
    line-height: 1;
    transform: translateY(-1px);
}

.ss-menu-page .ss-sidebar-categories li a.active {
    color: #e51b24;
}

.ss-menu-page .ss-sidebar-categories li a.active .ss-cat-arrow {
    color: #e51b24;
}

/* Ingredients tagcloud like shop.html */
.ss-menu-page .ss-ingredient-tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ss-menu-page .ss-ingredient-tagcloud li {
    display: inline-flex;
}

.ss-menu-page .ss-ingredient-tagcloud li a {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .12);
    font-weight: 700;
    line-height: 1;
    transition: all .15s ease-in-out;
}

.ss-menu-page .ss-ingredient-tagcloud li a:hover {
    transform: translateY(-1px);
}

.ss-menu-page .ss-ingredient-tagcloud li a.active {
    background: #e51b24;
    border-color: #e51b24;
    color: #fff;
}

/* =========================
   Unified sidebar typography (Categories + Ingredients)
   ========================= */

/* 1) Make typography consistent */
.ss-menu-page .ss-sidebar-categories li a,
.ss-menu-page .ss-ingredient-tagcloud li a {
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    /* same weight for both */
    letter-spacing: 0;
    text-transform: none;
    /* disable uppercase for categories */
}

/* 2) Categories: keep structure, soften aggressiveness */
.ss-menu-page .ss-sidebar-categories li a {
    padding: 14px 0;
    /* keep your spacing */
}

/* 3) Ingredients tags: keep pill look, align with categories weight */
.ss-menu-page .ss-ingredient-tagcloud li a {
    padding: 10px 14px;
    /* keep your pill sizing */
}

/* Optional: slightly soften the arrow so it feels premium, not “shouty” */
.ss-menu-page .ss-sidebar-categories .ss-cat-arrow {
    font-size: 16px;
    opacity: 0.85;
}

/* =========================
   Ingredients – clean premium style
   ========================= */

/* убираем жирность */
.ss-menu-page .ss-ingredient-tagcloud li a {
    font-weight: 500;
    /* вместо 700 */
}

/* убираем точку у активных */
.ss-menu-page .ss-ingredient-tagcloud li a::before {
    content: none !important;
}

/* делаем активный тег аккуратным */
.ss-menu-page .ss-ingredient-tagcloud li a.active {
    background: transparent;
    border-color: #e51b24;
    color: #e51b24;
}

/* =========================
   Ingredients color = Categories color
   ========================= */

/* обычные ингредиенты */
.ss-menu-page .ss-ingredient-tagcloud li a {
    color: #3a4a5b;
    /* тот же графит, что у категорий */
    font-weight: 500;
    /* лёгкая, не жирная */
}

/* hover — лёгкое затемнение */
.ss-menu-page .ss-ingredient-tagcloud li a:hover {
    color: #2c3946;
}

/* активный */
.ss-menu-page .ss-ingredient-tagcloud li a.active {
    background: #e51b24;
    border-color: #e51b24;
    color: #fff;
    /* белый текст на красном */
}

/* ================================
   Sidebar Popular Products
================================ */

.ss-recent-img {
    width: 78px;
    height: 78px;
    object-fit: cover;
    border-radius: 50%;
    background: #f4f4f4;
}

.recent-box {
    padding: 18px;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 20px;
    background: #fff;
    transition: all 0.25s ease;
}

.recent-box:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.ss-recent-title {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    display: block;
    margin-bottom: 6px;
    text-decoration: none;
}

.ss-recent-title:hover {
    color: #ff3c00;
}

.ss-recent-price {
    font-size: 16px;
    font-weight: 700;
    color: #ff3c00;
    /* красная цена */
}

/* =========================
   Menu List View (view=list)
   Minimal + isolated
   ========================= */

.ss-menu-page[data-view="list"] .dishes-card-wrap.style3 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ss-menu-page[data-view="list"] .dishes-card.style4.ss-menu-list-card {
    display: flex;
    gap: 24px;
    align-items: center;
    /* центрируем по высоте */
}

.ss-menu-page[data-view="list"] .dishes-card.style4 .dishes-thumb {
    flex: 0 0 160px;
    max-width: 160px;
}

/* Красный пунктирный ободок вокруг картинки */
.ss-menu-page[data-view="list"] .dishes-card.style4 .dishes-thumb {
    flex: 0 0 180px;
    max-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ff0000;
    border-radius: 16px;
    padding: 8px;
    background: #fff;
}

.ss-menu-page[data-view="list"] .dishes-card.style4 .dishes-thumb img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
}

.ss-menu-page[data-view="list"] .dishes-card.style4 .dishes-content {
    flex: 1 1 auto;
    min-width: 0;
    /* важно для ellipsis/clamp */
}

.ss-menu-page[data-view="list"] .dishes-card.style4 .ss-menu-list-actions {
    margin-top: 12px;
}

/* Чтобы ингредиенты не “выпирали” в list */
.ss-menu-page[data-view="list"] .ss-clamp-ingredients {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Menu: category header spacing polish */
.menu-category.section-padding-top {
    padding-top: 0 !important;
    /* убираем шаблонный "воздух" сверху */
}

.menu-category .row.align-items-center.mb-3 {
    margin-bottom: 12px !important;
    /* меньше пустоты под заголовком */
}

.menu-category__title {
    margin-bottom: 8px !important;
    line-height: 1.15;
}

.menu-category__description {
    margin-bottom: 0 !important;
}

/* Menu: reduce sort-bar extra whitespace */
.sort-bar .nav.nav-pills {
    margin-bottom: 0 !important;
}

.sort-bar {
    margin-top: 10px;
    /* чуть отделить от заголовка категории */
}

/* Menu page: reduce excessive section padding */
.shop-section.section-padding {
    padding-top: 40px !important;
    padding-bottom: 80px !important;
}

/* Menu empty state */
.menu-empty-state {
    text-align: center;
    max-width: 720px;
    margin: 40px auto;
    padding: 28px 20px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.menu-empty-state h3 {
    margin: 0 0 10px;
}

.menu-empty-state p {
    margin: 0 0 18px;
    opacity: .8;
}

/* Checkout privacy link */
[data-checkout-page] #privacy_consent+.form-check-label a {
    color: #e74c3c;
    /* фирменный красный */
    text-decoration: underline;
    font-weight: 500;
}

[data-checkout-page] #privacy_consent+.form-check-label a:hover {
    opacity: 0.8;
}

/* =========================
   MENU GRID: equal card heights (SAFE)
   ========================= */

/* Grid only: make bootstrap columns stretch cards equally */
.ss-menu-page[data-view="grid"] .row.g-4>[class*="col-"] {
    display: flex;
}

/* Make the wrapper and card fill the column height */
.ss-menu-page[data-view="grid"] .row.g-4>[class*="col-"] .single-food-items {
    width: 100%;
    height: 100% !important;
    /* overrides earlier height:auto !important */
}

.ss-menu-page[data-view="grid"] .row.g-4>[class*="col-"] .dishes-card {
    height: auto !important;
    /* overrides earlier height:auto !important */
}

/* =========================
   MENU: fixed text blocks (2 lines title + 3 lines ingredients)
   ========================= */

/* Title clamp = 2 lines */
.ss-menu-page .ss-clamp-title {
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(1.2em * 2);
}

/* Ingredients clamp = 3 lines (grid + list) */
.ss-menu-page .ss-clamp-ingredients {
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    /* so cards don't jump */
    min-height: calc(1.35em * 3);
}

/* Remove the old list-only clamp effect (optional but clean):
   your old rule clamps list to 2 lines; this ensures 3 lines everywhere */
.ss-menu-page[data-view="list"] .ss-clamp-ingredients {
    -webkit-line-clamp: 3;
}

/* Menu card: variant buttons like reference pill */
.ss-variant-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* можно 8-12 по вкусу */
}

/* Force same "pill" feel and prevent ugly wraps */
.ss-variant-buttons .ss-variant-btn.theme-btn.style6 {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap;
    text-align: center;
    line-height: normal;

    /* если где-то перебивается — фиксируем как у рефа */
    border-radius: 100px;
    padding: 12px 22px;
}

/* optional: чуть компактнее на мобилке */
@media (max-width: 667px) {
    .ss-variant-buttons .ss-variant-btn.theme-btn.style6 {
        padding: 11px 18px;
        font-size: 13px;
    }
}

.ss-dish-weight {
    color: var(--text);
    /* спокойный цвет текста */
    font-weight: 500;
    /* чуть легче */
    font-size: 14px;
    /* немного компактнее */
}

.ss-clamp-title {
    color: var(--title);
    font-weight: 700;
}

.popular-ingredients {
    color: var(--muted);
}

.ss-dish-weight {
    color: #9CA3AF;
    font-weight: 500;
    font-size: 13px;
}

.ss-dish-weight {
    color: var(--text);
    opacity: .65;
    font-size: 13px;
}

/* =================================
   MENU GRID
================================= */


/* large laptop */
@media (max-width: 1200px) {
    .ss-menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* tablet */
@media (max-width: 992px) {
    .ss-menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* mobile */
@media (max-width: 575px) {
    .ss-menu-grid {
        grid-template-columns: 1fr;
    }
}

/* mobile menu fix */

@media (max-width: 575px) {

    .row>[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

}

.dishes-thumb {
    position: relative;
    text-align: center;
}

.dishes-thumb img {
    position: relative;
    z-index: 2;
}

@media (max-width:575px) {

    .ss-menu-page[data-view="grid"] .row.g-4 [class*="col-"] .dishes-card {
        height: auto !important;
    }

}

@media (max-width:575px) {

    .dishes-card.style2 {
        margin-top: 90px;
    }

}

/* НЕ трогаем .dishes-thumb (пусть остаётся как в шаблоне) */

/* ссылка вокруг картинки становится "рамкой" */
.dishes-card.style2 .dishes-thumb>a.d-block {
    position: relative;
    display: inline-block;
    /* важно: ширина = ширине картинки */
}

/* круг рисуем относительно ссылки (т.е. относительно картинки) */
.dishes-card.style2 .dishes-thumb>a.d-block::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;

    width: 100%;
    /* как картинка */
    aspect-ratio: 1 / 1;
    /* круг */
    transform: translate(-50%, -50%);

    border: 2px dashed #ff5a5f;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    /* выше картинки */
}

/* картинку НЕ ужимаем */
.dishes-card.style2 .dishes-thumb img {
    display: block;
    /* убирает лишние зазоры */
}

@media (max-width: 991px) {
    .ss-langs--sticky {
        display: none !important;
    }
}

.dishes-thumb img {
    max-width: 200px;
}

/* Центруем содержимое thumbnails, не трогая размеры картинки */
.dishes-card.style2 .dishes-thumb {
    text-align: center;
}

/* Обёртка картинки должна быть inline-block, чтобы центрироваться text-align */
.dishes-card.style2 .dishes-thumb>a.d-block {
    position: relative;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.dishes-card.style2 .dishes-thumb>a.d-block::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border: 2px dashed #ff5a5f;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
}

.dishes-card.style2 .dishes-thumb img {
    display: block;
    margin: 0 auto;
}

/* 1) сам контейнер просто центрирует */
.dishes-card.style2 .dishes-thumb {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2) ссылка должна быть ровно по размеру картинки (НЕ растягиваться) */
.dishes-card.style2 .dishes-thumb>a.d-block {
    position: relative;
    display: inline-block !important;
    /* важно: НЕ flex */
    width: fit-content;
    line-height: 0;
    /* убираем "лишнюю высоту" вокруг img */
}

/* 3) картинка задаёт размер ссылке */
.dishes-card.style2 .dishes-thumb>a.d-block>img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* 4) пунктирный круг ПРИВЯЗАН к размеру ссылки (=картинки) */
.dishes-card.style2 .dishes-thumb>a.d-block::before {
    content: "";
    position: absolute;
    inset: 0;
    /* ровно по картинке */
    border: 2px dashed #ff5a5f;
    border-radius: 100%;
    transform: scale(1.00);
    /* хочешь “рамка без отступа” — оставь 1.00 */
    z-index: 3;
    pointer-events: none;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .ss-menu-page[data-view="grid"] .row.g-4>[class*="col-lg-4"] {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (max-width: 767.98px) {
    .ss-menu-page[data-view="grid"] .row.g-4>[class*="col-6"] {
        flex: 0 0 auto;
        width: 100%;
    }
}

.page-nav-wrap {
    margin-top: 32px !important;
}

.dishes-card:hover {
    transform: translateY(-4px);
    transition: all .25s ease;
}

.dishes-card {
    transition: all .25s ease;
}

.dishes-thumb img {
    position: relative;
    z-index: 2;

    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.10));
    transition: transform .25s ease, filter .25s ease;
}

.dishes-card:hover .dishes-thumb img {
    transform: translateY(-4px);
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.16));
}

.dishes-card {
    transition: transform .25s ease, box-shadow .25s ease;
}

.dishes-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}

.dishes-thumb img {
    transition: transform .35s ease;
}

.dishes-card:hover .dishes-thumb img {
    transform: scale(1.06);
}

.ss-cart-btn {
    transition: transform .2s ease, box-shadow .2s ease;
}

.ss-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.dishes-thumb img {
    position: relative;
    z-index: 2;

    filter:
        drop-shadow(0 10px 14px rgba(0, 0, 0, 0.10)) brightness(1.04) saturate(1.08);

    transition: transform .35s ease, filter .35s ease;
}

.dishes-card:hover .dishes-thumb img {
    transform: scale(1.06);

    filter:
        drop-shadow(0 18px 26px rgba(0, 0, 0, 0.16)) brightness(1.06) saturate(1.12);
}

.dishes-thumb {
    position: relative;
}

/* мягкий свет под роллами */
.dishes-thumb::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);

    width: 70%;
    height: 25%;

    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.08) 40%,
            rgba(0, 0, 0, 0.00) 70%);

    filter: blur(10px);
    z-index: 1;
    pointer-events: none;
}

.dishes-card {
    background: linear-gradient(180deg,
            #ffffff 0%,
            #ffffff 60%,
            #fafafa 100%);
}

/* micro-interaction for add-to-cart buttons */
.theme-btn.style6 {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, filter .18s ease;
    will-change: transform;
}

/* лёгкое "поднятие" на hover */
.theme-btn.style6:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.10);
}

/* приятный "нажим" */
.theme-btn.style6:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

/* клавиатурный фокус (важно для UX) */
.theme-btn.style6:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(235, 0, 41, 0.22), 0 10px 18px rgba(0, 0, 0, 0.10);
}

/* micro pop after add-to-cart */
.ss-added {
    animation: ssAddedPop .45s ease-out;
}

@keyframes ssAddedPop {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

.ss-old-price {
    font-size: 15px;
    line-height: 1;
    color: #9ca3af;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-align: center;
    font-weight: 700;
}