/* =========================================================
   МСК — НАПИСАТЬ НАМ
   Telegram / WhatsApp / MAX
   ========================================================= */


/* =========================================================
   ПК — БЛОК В КАРТОЧКЕ ТОВАРА
   ========================================================= */

.msk-product-chat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    box-sizing: border-box;

    width: auto !important;
    max-width: none !important;

    margin: 14px 24px 10px 0 !important;
    padding: 10px 12px;

    background: #fff;

    border: 1px solid rgba(190, 153, 88, .34);
    border-radius: 12px;
}


.msk-product-chat__text {
    min-width: 0;
}


.msk-product-chat__title {
    font-family: 'Manrope', Arial, sans-serif;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;

    color: #34312f;
}


.msk-product-chat__sub {
    margin-top: 3px;

    font-family: 'Manrope', Arial, sans-serif;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 400;

    color: #8a8580;
}


.msk-product-chat__icons {
    display: flex;
    align-items: center;
    gap: 8px;

    flex-shrink: 0;
}



/* =========================================================
   ОБЩИЙ ВИД ЗОЛОТЫХ ИКОНОК
   ========================================================= */

.msk-chat-icon-link {
    display: inline-flex !important;

    text-decoration: none !important;

    border: 0 !important;
    box-shadow: none !important;
}


.msk-chat-icon {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    box-sizing: border-box;

    background: #fcfaf6;

    border: 1px solid rgba(190, 153, 88, .48);
    border-radius: 50%;

    color: #ad8950;

    overflow: visible !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.msk-chat-icon-link:hover .msk-chat-icon,
.msk-chat-choice:hover .msk-chat-icon {
    background: #f3ebdf;

    border-color: rgba(177, 133, 68, .82);

    color: #8f682f;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .07);
}



/* =========================================================
   TELEGRAM
   ========================================================= */

.msk-chat-icon--telegram svg {
    display: block;

    width: 23px;
    height: 23px;

    overflow: visible !important;

    fill: currentColor;
    stroke: none;

    transform: scale(.91);
    transform-origin: center;
}



/* =========================================================
   WHATSAPP
   ========================================================= */

.msk-chat-icon--whatsapp svg {
    display: block;

    width: 23px;
    height: 23px;

    overflow: visible !important;

    fill: currentColor;
    stroke: none;

    transform: scale(.92);
    transform-origin: center;
}



/* =========================================================
   MAX
   Чуть меньше геометрически,
   чтобы визуально совпадал с Telegram / WhatsApp
   ========================================================= */

.msk-chat-icon--max svg {
    display: block;

    width: 22px !important;
    height: 22px !important;

    overflow: visible !important;

    fill: currentColor;
    stroke: none;
}



/* =========================================================
   В КАРТОЧКЕ ТОВАРА НА ПК
   ========================================================= */

.msk-product-chat .msk-chat-icon {
    width: 44px;
    height: 44px;
}


.msk-product-chat .msk-chat-icon--telegram svg,
.msk-product-chat .msk-chat-icon--whatsapp svg {
    width: 24px;
    height: 24px;
}


.msk-product-chat .msk-chat-icon--max svg {
    width: 23px !important;
    height: 23px !important;
}



/* =========================================================
   МОБИЛЬНОЕ НИЖНЕЕ МЕНЮ
   ========================================================= */

@media (max-width: 767px) {

    .msk-chat-nav-host {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: stretch !important;
    }


    /* Все 5 пунктов одинаковой ширины */
    .msk-chat-nav-host > * {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        box-sizing: border-box !important;
    }


    /* Каталог / Поиск / Избранное / Корзина */
    .msk-chat-nav-host > *:not(.msk-chat-nav-item) {
        background: transparent !important;

        border-color: transparent !important;

        box-shadow: none !important;
    }


    .msk-chat-nav-host > *:not(.msk-chat-nav-item) > a,
    .msk-chat-nav-host > *:not(.msk-chat-nav-item) > button {
        background: transparent !important;

        border-color: transparent !important;

        box-shadow: none !important;

        color: #5c5854 !important;
    }


    .msk-chat-nav-host > *:not(.msk-chat-nav-item),
    .msk-chat-nav-host > *:not(.msk-chat-nav-item) *,
    .msk-chat-nav-host > *:not(.msk-chat-nav-item) span {
        font-family: 'Manrope', Arial, sans-serif !important;
    }


    .msk-chat-nav-host > *:not(.msk-chat-nav-item) span {
        font-size: 11px !important;
        line-height: 1.15 !important;

        font-weight: 400 !important;

        color: #5c5854 !important;
    }


    /* На мобиле блок внутри товара не показываем */
    .msk-product-chat {
        display: none !important;
    }
}



/* =========================================================
   МОБИЛЬНАЯ КНОПКА "НАПИСАТЬ"
   ========================================================= */

.msk-chat-nav-item {
    margin: 0 !important;

    padding: 4px 3px !important;

    box-sizing: border-box !important;
}


.msk-chat-nav-link {
    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 3px !important;

    width: 100% !important;
    height: 100% !important;

    box-sizing: border-box !important;

    padding: 5px 2px !important;

    background: #f4eee4 !important;

    border: 1px solid rgba(190, 153, 88, .24) !important;
    border-radius: 13px !important;

    color: #8c7049 !important;

    text-decoration: none !important;
}


.msk-chat-nav-link svg {
    display: block;

    width: 24px !important;
    height: 24px !important;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.msk-chat-nav-label {
    font-family: 'Manrope', Arial, sans-serif !important;

    font-size: 11px !important;
    line-height: 1.15 !important;

    font-weight: 500 !important;

    color: #715a3c !important;
}



/* =========================================================
   МОБИЛЬНАЯ ПАНЕЛЬ МЕССЕНДЖЕРОВ
   ========================================================= */

.msk-chat-overlay {
    position: fixed;

    inset: 0;

    z-index: 99980;

    background: rgba(0, 0, 0, .18);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}


.msk-chat-sheet {
    position: fixed;

    left: 12px;
    right: 12px;
    bottom: 88px;

    z-index: 99990;

    max-width: 420px;

    margin: 0 auto;

    padding: 13px 14px 14px;

    box-sizing: border-box;

    background: #fff;

    border: 1px solid rgba(190, 153, 88, .35);
    border-radius: 16px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .13);

    opacity: 0;
    visibility: hidden;

    transform: translateY(12px);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}


.msk-chat-overlay.is-open,
.msk-chat-sheet.is-open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


.msk-chat-sheet.is-open {
    transform: translateY(0);
}


.msk-chat-sheet__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 10px;
}


.msk-chat-sheet__title {
    font-family: 'Manrope', Arial, sans-serif;

    font-size: 15px;
    line-height: 1.2;

    font-weight: 600;

    color: #34312f;
}


.msk-chat-sheet__sub {
    margin-top: 2px;

    font-family: 'Manrope', Arial, sans-serif;

    font-size: 11px;

    color: #999;
}


.msk-chat-sheet__close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    padding: 0;

    background: #f5f3f0;

    border: 0;
    border-radius: 50%;

    color: #777;

    font-size: 19px;
    line-height: 1;

    cursor: pointer;
}


.msk-chat-sheet__choices {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;
}


.msk-chat-choice {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-width: 0;

    padding: 10px 4px;

    box-sizing: border-box;

    background: #fff;

    border: 1px solid rgba(190, 153, 88, .25);
    border-radius: 11px;

    color: #444 !important;

    font-family: 'Manrope', Arial, sans-serif;
    font-size: 11px;

    text-decoration: none !important;
}


.msk-chat-choice:hover {
    background: #fcfaf7;

    border-color: rgba(190, 153, 88, .60);
}


/* Значки в мобильном окне */
.msk-chat-choice .msk-chat-icon {
    width: 42px;
    height: 42px;
}


.msk-chat-choice .msk-chat-icon--telegram svg,
.msk-chat-choice .msk-chat-icon--whatsapp svg {
    width: 23px;
    height: 23px;
}


/* MAX здесь тоже чуть меньше */
.msk-chat-choice .msk-chat-icon--max svg {
    width: 22px !important;
    height: 22px !important;
}



/* ПК — мобильные элементы скрываем */
@media (min-width: 768px) {

    .msk-chat-sheet,
    .msk-chat-overlay,
    .msk-chat-nav-item {
        display: none !important;
    }
}