/* ==========================================================================
   mstroy.ru — карточка товара в каталоге, версия 2
   Накладывается поверх штатных стилей шаблона redigital_default.
   Разметку Битрикса не трогает: все классы и имена полей формы прежние.
   Включается классом .ms-cards на <ul class="showcase catalog-list">.
   Тема одна — светлая, как и весь сайт. Тёмной у шаблона нет.
   ========================================================================== */

body {
    .ms-cards {
        /* токены взяты из самого сайта: template_styles.css + /include/color.css */
        --ms-red:        #CF1717;  /* --colorMain */
        --ms-red-dark:   #AB1212;  /* :hover из custom.css */
        --ms-blue:       #00458F;  /* --colorBlue */
        --ms-blue-soft:  #E7EFF8;  /* --colorBlueLight */
        --ms-border:     #E3E3E3;  /* --colorBorder */
        --ms-line:       #EFEFEF;
        --ms-ink:        #202020;  /* --colorTextDark */
        --ms-muted:      #666666;  /* --colorTextMuted */
        --ms-wash:       #F7F7F7;

        /* состояния наличия. Сайтовый #4AAD66 даёт 2.81:1 на белом и не проходит
           AA для мелкого текста, поэтому текстовый зелёный затемнён до 5.07:1 */
        --ms-ok:         #2E7D46;
        --ms-low:        #A8620A;

        /* радиусы: карточка 8, все органы управления 6 (--defaultRadius сайта) */
        --ms-r:          6px;
        --ms-r-card:     8px;

        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        margin: 0 0 24px;
        padding: 0;
        list-style: none;
    }

    .ms-cards:after,
    .ms-cards:before { content: none; }

    @media (max-width: 1100px) { .ms-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 820px)  { .ms-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

    /* --------------------------------------------------------------------------
       1. Сама карточка
       -------------------------------------------------------------------------- */

    .ms-cards > li.catalog__item,
    .ms-cards > .catalog__item {
        float: none !important;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
        padding: 0;
        box-sizing: border-box;
        position: relative;
        display: flex;
        border: 1px solid var(--ms-border);
        border-radius: var(--ms-r-card);
        background: #fff;
        text-align: left;
        transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .ms-cards > .catalog__item:hover,
    .ms-cards > .catalog__item.catalog__item_active {
        border-color: var(--ms-red);
        border-radius: var(--ms-r-card);
        /* тень подкрашена в фирменный синий, не чистый чёрный */
        box-shadow: 0 8px 24px rgba(0, 69, 143, .10), 0 2px 8px rgba(0, 69, 143, .06);
        z-index: 2;
    }

    .ms-cards > .catalog__item:focus-within {
        border-color: var(--ms-red);
        box-shadow: 0 8px 24px rgba(0, 69, 143, .10);
        z-index: 2;
    }

    @media (prefers-reduced-motion: no-preference) {
        .ms-cards > .catalog__item:hover { transform: translateY(-2px); }
    }

    /* Вес селекторов здесь не случаен: в template_styles.css лежит правило
       .catalog__item .catalog__wrap > .catalog-product { height:100%; display:flex;
       justify-content:space-between }, и оно перебивает более короткий селектор.
       Из-за него у товаров без цены кнопка не доезжала до низа карточки. */
    .ms-cards .catalog__item .catalog__wrap {
        display: flex;
        flex-direction: column;
        /*justify-content: flex-start;*/
        justify-content: space-between;
        width: 100%;
        height: 100%;
        min-width: 0;
        padding: 12px 12px 14px;
        box-sizing: border-box;
    }

    .ms-cards .catalog__item .catalog__wrap > .catalog-product {
        display: block;
        height: auto;
        flex: 0 0 auto;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    /* У товара под заказ шаблон вкладывает .catalog-description внутрь
       .catalog-product, а у товара с ценой кладёт её рядом. Поддерживаем обе
       структуры, иначе у части карточек кнопка не доезжает до низа. */
    .ms-cards .catalog__item .catalog__wrap > .catalog-product:has(.catalog-description) {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }

    /* вся свободная площадь карточки ведёт на товар */
    .ms-cards .catalog-label {
        display: block;
        text-decoration: none;
    }

    .ms-cards .catalog-label:after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: var(--ms-r-card);
    }

    /* ...а органы управления лежат над этим слоем */
    .ms-cards .catalog-description__tocart,
    .ms-cards .product-button,
    .ms-cards .icon-button--favorite,
    .ms-cards .catalog-item-labels,
    .ms-cards .ms-pricenote {
        position: relative;
        z-index: 2;
    }

    /* --------------------------------------------------------------------------
       2. Обложка — квадрат фиксированной пропорции.
          Раньше высота была 225px с line-height 215px, и товары плавали
          в кадре в разном масштабе: сетка выглядела рваной.
       -------------------------------------------------------------------------- */

    .ms-cards .catalog-cover {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1 / 1;
        height: auto;
        margin: 0 0 12px;
        padding: 10px;
        box-sizing: border-box;
        line-height: 0;
        background: #fff;
        border-radius: var(--ms-r);
        overflow: hidden;
    }

    .ms-cards .catalog__img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto !important;
        height: auto;
        object-fit: contain;
    }

    @media (prefers-reduced-motion: no-preference) {
        .ms-cards .catalog__img { transition: transform .25s ease; }
        .ms-cards > .catalog__item:hover .catalog__img { transform: scale(1.04); }
    }

    /* --------------------------------------------------------------------------
       3. Промо-метки и стикеры.
          В шаблоне они залиты ключевыми словами red / green / darkgoldenrod /
          cadetblue. Приводим к двум фирменным цветам плюс нейтральный.
       -------------------------------------------------------------------------- */

    .ms-cards .catalog-item-labels {
        position: absolute;
        top: 12px;
        left: 12px;
        /* справа место под «в избранное», иначе метки лезут под сердце */
        right: 58px;
        width: auto;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        z-index: 3;
    }

    .ms-cards .catalog-item-labels__item {
        padding: 3px 8px;
        border-radius: var(--ms-r);
        background: var(--ms-ink);
        color: #fff;
        font: 600 11px/15px "PT Sans", Arial, sans-serif;
        letter-spacing: .01em;
        white-space: nowrap;
    }

    .ms-cards .catalog-item-labels__item--sale   { background: var(--ms-red); }
    .ms-cards .catalog-item-labels__item--action { background: var(--ms-blue); }
    .ms-cards .catalog-item-labels__item--new    { background: #fff; color: var(--ms-blue); box-shadow: inset 0 0 0 1px var(--ms-blue); }
    .ms-cards .catalog-item-labels__item--top    { background: var(--ms-ink); }

    .ms-cards .catalog-stickers {
        position: absolute;
        top: auto;
        bottom: 8px;
        left: 8px;
        width: auto;
        display: flex;
        gap: 6px;
        z-index: 3;
    }

    .ms-cards .catalog-stickers__item {
        /* как и в common.css: стикер показывается, только когда Битрикс повесил
           на карточку .qb («успей купить») или .da2 («товар дня») */
        display: none;
        width: auto;
        height: auto;
        margin: 0;
        padding: 3px 8px;
        background-image: none;
        border-radius: var(--ms-r);
        font: 600 11px/15px "PT Sans", Arial, sans-serif;
        text-transform: none;
        text-shadow: none;
        color: #fff;
        white-space: nowrap;
    }

    .ms-cards .qb .catalog-stickers__item_cheap     { display: block; background: var(--ms-blue); }
    .ms-cards .da2 .catalog-stickers__item_favorite { display: block; background: var(--ms-red); }

    .ms-cards .catalog-marks,
    .ms-cards .catalog-add-info { display: none; }

    /* --------------------------------------------------------------------------
       4. Название
       -------------------------------------------------------------------------- */

    .ms-cards .catalog__title,
    .ms-cards .g-label.catalog__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: auto;
        min-height: 38px;          /* две строки: карточки в ряду выравниваются */
        margin: 0 0 8px;
        font: 400 14px/19px "PT Sans", Arial, sans-serif;
        color: var(--ms-ink);
        text-align: left;
        text-decoration: none;
        transition: color .18s ease;
    }

    .ms-cards .catalog-label:hover .catalog__title,
    .ms-cards .catalog__title:hover { color: var(--ms-red); text-decoration: none; }

    .ms-cards .catalog-announce { display: none; }

    /* --------------------------------------------------------------------------
       5. Наличие.
          Было: «Наличие: [красная галочка] Есть» 11px, прижато вправо,
          плюс безымянные красные точки. Красный на положительном статусе
          читается как ошибка.
       -------------------------------------------------------------------------- */

    /* Нижний ряд прибит к низу карточки: у товаров без цены за килограмм
       или вовсе без цены кнопки иначе вставали на разной высоте. */
    .ms-cards .catalog__item .catalog-description {
        display: flex;
        flex-direction: column;
        /*flex: 1 1 auto;*/
        padding: 0;
        background: none;
        position: static;
        opacity: 1;
    }

    .ms-cards .add2basketform,
    .ms-cards .product-button { margin-top: auto; }

    .ms-cards .catalog-description__item { margin: 0; }
    .ms-cards .catalog-description__item:after { content: none; }

    .ms-cards .catalog-description__item_flex {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin: 0 0 8px;
    }

    /* У товара под заказ блока .catalog-price в разметке нет вовсе. Держим за
       него место (47px высота блока + 10px отступ), иначе строка наличия в ряду
       встаёт выше соседних. :has() шаблон уже использует в template_styles.css. */
    .ms-cards .catalog__item:not(:has(.catalog-price)) .catalog-description__item_flex {
        margin-top: 57px;
    }

    .ms-cards .catalog-description__availability { float: none; font: inherit; }

    .ms-cards .catalog-availability {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font: 400 13px/16px "PT Sans", Arial, sans-serif;
        color: var(--ms-ok);
    }

    .ms-cards .catalog-availability:before {
        content: '';
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        background: currentColor;
        -webkit-mask: var(--ms-icon) center / contain no-repeat;
        mask: var(--ms-icon) center / contain no-repeat;
        --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 4.8 11.4l1.4-1.4 3.4 3.4 8-8 1.4 1.4z'/%3E%3C/svg%3E");
    }

    /* мало осталось */
    .ms-cards .catalog__item[data-ms-stock="low"] .catalog-availability { color: var(--ms-low); }
    .ms-cards .catalog__item[data-ms-stock="low"] .catalog-availability:before {
        --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2Zm1 14h-2v2h2v-2Zm0-7h-2v5h2V9Z'/%3E%3C/svg%3E");
    }

    /* под заказ */
    .ms-cards .catalog__item[data-ms-stock="order"] .catalog-availability { color: var(--ms-blue); }
    .ms-cards .catalog__item[data-ms-stock="order"] .catalog-availability:before {
        --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-13h-2v6l5 3 1-1.6-4-2.4V7Z'/%3E%3C/svg%3E");
    }

    /* штатная иконка-картинка и безымянные красные точки больше не нужны */
    .ms-cards .availability-icon,
    .ms-cards .catalogQuntityDots { display: none !important; }

    /* --------------------------------------------------------------------------
       6. Цена
       -------------------------------------------------------------------------- */

    .ms-cards .catalog-price {
        margin: 0 0 10px;
        text-align: left;
        /* высота под цену и строку «за килограмм»: с ней строка наличия
           встаёт на одном уровне у всех карточек ряда, даже если фасовку
           из названия разобрать не удалось */
        min-height: 47px;
    }

    .ms-cards .price_with__popup { display: block; }

    .ms-cards .catalog-price__item,
    .ms-cards .catalog-price__actual {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        margin: 0;
    }

    .ms-cards .catalog-price__actual-digit {
        display: inline;
        font: 600 22px/26px Montserrat, "PT Sans", Arial, sans-serif;
        font-style: normal;
        color: var(--ms-ink);
        letter-spacing: -.01em;
        white-space: nowrap;
    }

    .ms-cards .catalog-price__old {
        font: 400 14px/18px Montserrat, "PT Sans", Arial, sans-serif;
        font-style: normal;
        color: var(--ms-muted);
        text-decoration: line-through;
    }

    /* «за шт» / «за лист» / «за уп.» — единица продажи рядом с ценой */
    .ms-cards .ms-per {
        margin-left: 7px;
        font: 400 13px/18px "PT Sans", Arial, sans-serif;
        color: var(--ms-muted);
        white-space: nowrap;
    }

    /* цена за килограмм или литр — считается из фасовки в названии */
    .ms-cards .ms-unit {
        display: block;
        margin: 2px 0 0;
        font: 400 13px/17px "PT Sans", Arial, sans-serif;
        color: var(--ms-muted);
    }

    /* сноска про цену при заказе с сайта: была «звёздочкой» без объяснения,
       а подсказка открывалась только по наведению — на телефоне никак */
    .ms-cards .ms-pricenote {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        margin-left: 5px;
        padding: 0;
        border: 1px solid #C9C9C9;
        border-radius: 50%;
        background: #fff;
        color: var(--ms-muted);
        font: 700 10px/1 Montserrat, "PT Sans", Arial, sans-serif;
        font-style: italic;
        cursor: help;
        vertical-align: middle;
        position: relative;
        top: -1px;
    }

    .ms-cards .ms-pricenote:hover { border-color: var(--ms-red); color: var(--ms-red); }

    /* Закрытую подсказку убираем из потока совсем. Штатный приём шаблона —
       увезти её за left:-9999px — раздувал карточке scrollWidth до 357 px
       при ширине 240 и тянул за собой горизонтальную прокрутку страницы. */
    .ms-cards .price_popup {
        display: none;
        position: absolute;
        left: 0;
        right: auto;
        top: auto;
        bottom: calc(100% + 9px);
        transform: none;
        opacity: 1;
        visibility: visible;
        width: max-content;
        max-width: 190px;
        height: auto;
        padding: 7px 10px;
        background: var(--ms-ink);
        border-radius: var(--ms-r);
        color: #fff;
        font: 400 12px/16px "PT Sans", Arial, sans-serif;
        white-space: normal;
        z-index: 5;
    }

    .ms-cards .price_popup:after {
        background: var(--ms-ink);
        left: 16px;
        bottom: -4px;
        margin: 0;
        width: 8px;
        height: 8px;
    }

    .ms-cards .ms-pricenote:hover + .price_popup,
    .ms-cards .ms-pricenote:focus-visible + .price_popup,
    .ms-cards .ms-pricenote[aria-expanded="true"] + .price_popup { display: block; }

    /* --------------------------------------------------------------------------
       7. Количество и кнопка. Поля формы и их имена не менялись.
       -------------------------------------------------------------------------- */

    .ms-cards .add2basketform { margin: 0; }

    .ms-cards .catalog-description__tocart {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
        margin: 0;
    }

    .ms-cards .catalog-description__tocart:after { content: none; }

    .ms-cards .catalog-description__count {
        margin: 0 !important;
        flex: 0 0 auto;
    }

    .ms-cards .select-field {
        display: flex;
        align-items: stretch;
        /* без border-box рамка добавлялась к высоте: ряд получался 44px против
           42px у кнопки, и низ карточки расходился с товарами под заказ */
        box-sizing: border-box;
        height: 42px;
        border: 1px solid var(--ms-border);
        border-radius: var(--ms-r);
        overflow: hidden;
        background: #fff;
    }

    .ms-cards .select-field:after { content: none; }

    /* кнопки −/+ добавляет catalog-card.js; без него остаётся обычное поле */
    .ms-cards .ms-step {
        width: 32px;
        flex: 0 0 32px;
        border: 0;
        padding: 0;
        background: var(--ms-wash);
        color: var(--ms-ink);
        font: 400 18px/1 "PT Sans", Arial, sans-serif;
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease;
    }

    .ms-cards .ms-step:hover { background: #ECECEC; color: var(--ms-red); }
    .ms-cards .ms-step:active { background: #E2E2E2; }
    .ms-cards .ms-step[disabled] { color: #BDBDBD; cursor: default; background: var(--ms-wash); }

    .ms-cards .select-input,
    .ms-cards .select-input_amount,
    .ms-cards .gui-input.select-input_amount {
        width: 44px;
        min-width: 0;
        max-width: none;
        height: 40px;
        flex: 0 0 44px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
        color: var(--ms-ink);
        font: 600 15px/40px Montserrat, "PT Sans", Arial, sans-serif;
        text-align: center;
        box-shadow: none;
        -moz-appearance: textfield;
        appearance: textfield;
    }

    .ms-cards .select-input:focus { padding: 0; box-shadow: none; }

    .ms-cards .select-input::-webkit-outer-spin-button,
    .ms-cards .select-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
        display: none;
    }

    /* единица продажи переехала к цене, у поля ей места нет */
    .ms-cards .select-unit { display: none; }

    .ms-cards .gui-button.butt_add_basket,
    .ms-cards .catalog-description__add-cart {
        float: none;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 42px;
        margin: 0;
        padding: 0 10px;
        border: 1px solid var(--ms-red);
        border-radius: var(--ms-r);
        background: var(--ms-red);
        color: #fff;
        font: 600 15px/40px "PT Sans", Arial, sans-serif;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
    }

    .ms-cards .gui-button.butt_add_basket:hover,
    .ms-cards .catalog-description__add-cart:hover {
        background: var(--ms-red-dark);
        border-color: var(--ms-red-dark);
        color: #fff;
    }

    .ms-cards .gui-button.butt_add_basket:active { transform: translateY(1px); }

    /* «В корзине» — подтверждение, а не второй призыв купить */
    .ms-cards .in_cart,
    .ms-cards .catalog-description__add-cart_in_cart {
        background: #fff;
        border-color: var(--ms-ok);
        color: var(--ms-ok);
    }

    .ms-cards .in_cart:hover { background: #F2F8F4; border-color: var(--ms-ok); color: var(--ms-ok); }
    .ms-cards .catalog-description__tocart > a { flex: 1 1 auto; min-width: 0; display: flex; }

    /* --------------------------------------------------------------------------
       8. Товар под заказ: «Запросить цену» — действие вспомогательное,
          поэтому синий контур, а не красная заливка как у «В корзину».
       -------------------------------------------------------------------------- */

    .ms-cards .product-button {
        min-height: 0;
        margin: auto 0 0;
        padding: 0;
        display: flex;
    }

    .ms-cards .product-button i { display: none; }

    .ms-cards .product-submit,
    .ms-cards .product-submit_buy,
    .ms-cards a.product-submit_buy {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 42px;
        padding: 0 10px !important;
        border: 1px solid var(--ms-blue) !important;
        border-radius: var(--ms-r) !important;
        background: #fff !important;
        color: var(--ms-blue) !important;
        font: 600 15px/1 "PT Sans", Arial, sans-serif;
        text-decoration: none;
        transition: background-color .15s ease, color .15s ease;
    }

    .ms-cards .product-submit_buy:hover,
    .ms-cards a.product-submit_buy:hover {
        background: var(--ms-blue) !important;
        color: #fff !important;
    }

    .ms-cards .ms-btn-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; }

    /* --------------------------------------------------------------------------
       9. В избранное
       -------------------------------------------------------------------------- */

    .ms-cards .catalog__item .icon-button--favorite,
    .ms-cards .catalog-description__favorites {
        position: absolute;
        top: 10px;
        right: 10px;
        left: auto;
        float: none;
        width: 36px;
        min-width: 36px;
        height: 36px;
        margin: 0;
        border: 1px solid var(--ms-border);
        border-radius: var(--ms-r);
        background: rgba(255, 255, 255, .92);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .ms-cards .icon-button--favorite svg { width: 18px; height: 18px; fill: #9A9A9A; transition: fill .15s ease; }
    .ms-cards .icon-button--favorite:hover { border-color: var(--ms-red); }
    .ms-cards .icon-button--favorite:hover svg { fill: var(--ms-red); }
    .ms-cards .icon-button--favorite:has(input:checked) { background: var(--ms-red); border-color: var(--ms-red); }
    .ms-cards .icon-button--favorite:has(input:checked) svg { fill: #fff; }
    .ms-cards .icon-button--favorite .gui-checkbox { position: absolute; inset: 0; padding: 0; }
    .ms-cards .icon-button--favorite .gui-checkbox-input { visibility: visible; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
    .ms-cards .icon-button--favorite .gui-checkbox-icon { display: none; }
    .ms-cards .catalog_item__footer { margin: 0; }
    .ms-cards .catalog_item__footer:after { content: none; }
    .ms-cards .g-switcher { display: none; }

    /* --------------------------------------------------------------------------
       10. Фокус с клавиатуры — в шаблоне его не было ни у одного элемента
       -------------------------------------------------------------------------- */

    .ms-cards a:focus-visible,
    .ms-cards button:focus-visible,
    .ms-cards input:focus-visible,
    .ms-cards .ms-pricenote:focus-visible {
        outline: 2px solid var(--ms-blue);
        outline-offset: 2px;
        border-radius: var(--ms-r);
    }

    .ms-cards .icon-button--favorite:focus-within {
        outline: 2px solid var(--ms-blue);
        outline-offset: 2px;
    }

    @media (prefers-contrast: more) {
        .ms-cards > .catalog__item { border-color: #8A8A8A; }
        .ms-cards .catalog-availability { color: #1B5E2E; }
        .ms-cards .ms-per,
        .ms-cards .ms-unit { color: #444; }
    }

    /* --------------------------------------------------------------------------
       11. Скелетон загрузки — для подгрузки следующей страницы каталога
       -------------------------------------------------------------------------- */

    .ms-cards .ms-skeleton {
        border: 1px solid var(--ms-border);
        border-radius: var(--ms-r-card);
        padding: 12px 12px 14px;
        display: block;
    }

    .ms-cards .ms-skeleton span {
        display: block;
        background: var(--ms-line);
        border-radius: var(--ms-r);
    }

    .ms-cards .ms-skeleton .ms-sk-img   { aspect-ratio: 1 / 1; margin-bottom: 12px; }
    .ms-cards .ms-skeleton .ms-sk-line  { height: 13px; margin-bottom: 6px; }
    .ms-cards .ms-skeleton .ms-sk-line2 { height: 13px; width: 65%; margin-bottom: 14px; }
    .ms-cards .ms-skeleton .ms-sk-price { height: 22px; width: 45%; margin-bottom: 14px; }
    .ms-cards .ms-skeleton .ms-sk-btn   { height: 42px; }

}
/* --------------------------------------------------------------------------
       12. Узкие экраны. Каталог остаётся в две колонки: так товары листаются
           вдвое быстрее, чем в одну колонку у текущего шаблона.
       -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    body {
        .ms-cards .ms-skeleton span {
            background: linear-gradient(90deg, var(--ms-line) 25%, #F7F7F7 50%, var(--ms-line) 75%);
            background-size: 300% 100%;
            animation: ms-sk 1.4s ease-in-out infinite;
        }
    }
    @keyframes ms-sk { from { background-position: 150% 0; } to { background-position: -150% 0; } }
}
@media (max-width: 620px) {
    body {
        .ms-cards > li.catalog__item,
        .ms-cards > .catalog__item { width: auto !important; }

        .ms-cards .catalog__wrap { padding: 8px 8px 10px; }
        .ms-cards .catalog-cover { padding: 6px; margin-bottom: 10px; }
        .ms-cards .catalog__title { font-size: 13px; line-height: 17px; min-height: 34px; }
        .ms-cards .catalog-price__actual-digit { /*font-size: 19px;*/ line-height: 23px;
            font-size: 16px;}
        .ms-cards .catalog-availability { font-size: 12px; }
        .ms-cards .ms-per, .ms-cards .ms-unit { font-size: 12px; }

        /* степпер над кнопкой: в два ряда при ширине карточки около 165px */
        .ms-cards .catalog-description__item_flex { flex-direction: row !important; }
        .ms-cards .catalog-description__tocart { flex-direction: column; gap: 6px; }
        .ms-cards .catalog-description__count { width: 100%; }
        .ms-cards .select-field { width: 100%; height: 38px; }
        .ms-cards .select-input, .ms-cards .select-input_amount { flex: 1 1 auto; width: auto; height: 36px; line-height: 36px; }
        .ms-cards .ms-step { /*flex: 0 0 40px; width: 40px;*/ flex-grow: 1; }
        .ms-cards .gui-button.butt_add_basket,
        .ms-cards .product-submit_buy { width: 100%; height: 38px; font-size: 14px; line-height: 36px; }
        .ms-cards .catalog-item-labels { top: 8px; left: 8px; right: 50px; }
        .ms-cards .catalog__item .icon-button--favorite { top: 6px; right: 6px; width: 32px; min-width: 32px; height: 32px; }
        .ms-cards .product-submit, .ms-cards .product-submit_buy, .ms-cards a.product-submit_buy {
            font-size: 13px;
        }
    }
}

/****/
.ms-cards a[href="/personal/cart/"]:has(input[style="display:none"]) {
    display: none;
}
.ms-cards a[href="/personal/cart/"] {
    text-decoration: none;
}