/*
Theme Name: Nikita Garden Custom
Theme URI: https://www.nikita-garden.ru/
Author: Nikita Garden
Author URI: https://www.nikita-garden.ru/
Description: Кастомная тема для официального интернет-магазина саженцев 
Version: 4.5.3
License: GNU General Public License v2 or later
Text Domain: nikita-garden
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ================= БАЗА ================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    background-color: #FAF9F6;
    color: #1A221E;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* ================= СТАРЫЕ СТИЛИ КАРТОЧЕК (fallback) ================= */

.woocommerce ul.products li.product .ng-card__badge--cat,
.woocommerce ul.products li.product .ng-card__badge--sale {
    position: absolute !important;
    top: 10px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    z-index: 3 !important;
}

.woocommerce ul.products li.product .ng-card__badge--cat {
    left: 10px !important;
    background: rgba(18, 43, 29, 0.9) !important;
}

.woocommerce ul.products li.product .ng-card__badge--sale {
    right: 10px !important;
    background: #C87A54 !important;
    font-weight: 700 !important;
}

.woocommerce ul.products li.product .ng-card__fav {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 4 !important;
    color: #5F6B64 !important;
    transition: all 0.2s !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product .ng-card__fav:hover { color: #C87A54 !important; }

.woocommerce ul.products li.product .ng-card__fav .material-symbols-outlined {
    font-size: 18px !important;
    line-height: 1 !important;
}

.woocommerce ul.products li.product .ng-card__fav.is-active {
    color: #C87A54 !important;
    background: #FBF3EE !important;
}

.woocommerce ul.products li.product .ng-card__fav.is-active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1 !important;
}

.woocommerce ul.products li.product .ng-card__body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    padding: 12px 14px 14px !important;
    gap: 6px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.woocommerce ul.products li.product .ng-card__sku {
    font-size: 10px !important;
    color: #5F6B64 !important;
    line-height: 1 !important;
}

.woocommerce ul.products li.product .ng-card__rating {
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
    margin: 2px 0 !important;
    min-height: 18px !important;
}

.woocommerce ul.products li.product .ng-card__star {
    font-size: 14px !important;
    color: #D5E1D8 !important;
    line-height: 1 !important;
}

.woocommerce ul.products li.product .ng-card__star--filled {
    color: #F5A623 !important;
    font-variation-settings: 'FILL' 1 !important;
}

.woocommerce ul.products li.product .ng-card__rating-count {
    font-size: 10px !important;
    color: #5F6B64 !important;
    margin-left: 4px !important;
}

.woocommerce ul.products li.product .ng-card__footer {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px solid #E3E8E4 !important;
}

.woocommerce ul.products li.product .ng-card__price-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

.woocommerce ul.products li.product .ng-card__price-label {
    font-size: 9px !important;
    color: #5F6B64 !important;
    line-height: 1 !important;
}

/* ================= СООБЩЕНИЯ WOOCOMMERCE ================= */

.woocommerce-products-header { display: none !important; }
.woocommerce-message,
.woocommerce-info { display: none !important; }

.woocommerce-error {
    display: block !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
    font-size: 14px !important;
    background: #FEE2E2 !important;
    border-left: 4px solid #DC2626 !important;
    color: #991B1B !important;
}

/* =====================================================================
   КАТАЛОГ — ПОЛНОЕ СООТВЕТСТВИЕ МАКЕТУ STITCH
   ===================================================================== */

.ng-catalog-page {
    width: 100%;
    background: #faf9f6;
    padding-bottom: 0;
}

/* ===== Хлебные крошки ===== */
.ng-catalog-breadcrumbs-bar {
    width: 100%;
    background: #f4f4f0;
    padding: 12px 16px;
}
@media (min-width: 1024px) {
    .ng-catalog-breadcrumbs-bar { padding: 12px 40px; }
}
.ng-catalog-breadcrumbs-bar__inner {
    max-width: 88rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: #424843;
}
.ng-catalog-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ng-catalog-breadcrumbs a { color: #424843; transition: color 0.2s; }
.ng-catalog-breadcrumbs a:hover { color: #001509; }
.ng-catalog-breadcrumbs__sep { font-size: 14px !important; color: #727973; }
.ng-catalog-breadcrumbs__current { color: #001509; font-weight: 600; }
.ng-catalog-breadcrumbs__info {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #59605c;
}
@media (min-width: 768px) {
    .ng-catalog-breadcrumbs__info { display: flex; }
}
.ng-catalog-breadcrumbs__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #122b1d;
    display: inline-block;
}

/* ===== Hero ===== */
.ng-catalog-hero {
    width: 100%;
    padding: 32px 16px 24px;
}
@media (min-width: 1024px) {
    .ng-catalog-hero { padding: 32px 40px 24px; }
}
.ng-catalog-hero__inner {
    max-width: 88rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (min-width: 1024px) {
    .ng-catalog-hero__inner {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}
.ng-catalog-hero__left { max-width: 48rem; }
.ng-catalog-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.ng-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
}
.ng-badge--primary { background: #ccead4; color: #072013; }
.ng-badge--soft    { background: #eeeeea; color: #424843; }

.ng-catalog-hero__title {
    font-size: 32px;
    font-weight: 400;
    color: #001509;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 8px;
}
@media (min-width: 768px) {
    .ng-catalog-hero__title { font-size: 48px; line-height: 1.1; }
}
.ng-catalog-hero__desc {
    font-size: 17px;
    line-height: 1.6;
    color: #59605c;
    margin: 0;
    max-width: 40rem;
}
.ng-catalog-hero__metrics {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f4f4f0;
    padding: 16px;
    border-radius: 12px;
    flex-shrink: 0;
}
.ng-metric { text-align: center; }
.ng-metric__value {
    font-size: 24px;
    font-weight: 300;
    color: #001509;
    line-height: 1.2;
}
.ng-metric__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
    margin-top: 4px;
}
.ng-metric__sep { width: 1px; height: 32px; background: #e2e3df; }

/* ===== Pills ===== */
.ng-catalog-pills-wrap {
    width: 100%;
    padding: 0 16px 16px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ng-catalog-pills-wrap::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
    .ng-catalog-pills-wrap { padding: 0 40px 16px; }
}
.ng-catalog-pills {
    max-width: 88rem;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    min-width: max-content;
    padding: 4px 0;
}
.ng-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #ffffff;
    color: #424843;
    white-space: nowrap;
    transition: all 0.2s;
    border: 1px solid #eeeeea;
    text-decoration: none;
}
.ng-pill:hover { background: #eeeeea; color: #001509; }
.ng-pill--active {
    background: #122b1d;
    color: #ffffff;
    border-color: #122b1d;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ===== Controls ===== */
.ng-catalog-controls {
    width: 100%;
    padding: 0 16px 24px;
}
@media (min-width: 1024px) {
    .ng-catalog-controls { padding: 0 40px 24px; }
}
.ng-catalog-controls__inner {
    max-width: 88rem;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 768px) {
    .ng-catalog-controls__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.ng-catalog-controls__left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ng-catalog-controls__count {
    font-size: 13px;
    font-weight: 500;
    color: #59605c;
    margin-right: 8px;
}
.ng-catalog-controls__count strong { color: #1a1c1a; }
.ng-catalog-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f4f4f0;
    color: #1a1c1a;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}
.ng-catalog-chip__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}
.ng-catalog-chip__close .material-symbols-outlined { font-size: 14px; }
.ng-catalog-chip__close:hover { color: #ba1a1a; }
.ng-catalog-controls__reset {
    font-size: 10px;
    font-weight: 600;
    color: #59605c;
    text-decoration: underline;
    margin-left: 8px;
    transition: color 0.2s;
}
.ng-catalog-controls__reset:hover { color: #001509; }
.ng-catalog-controls__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.ng-catalog-controls__sort-label {
    font-size: 12px;
    font-weight: 600;
    color: #59605c;
    display: none;
}
@media (min-width: 640px) {
    .ng-catalog-controls__sort-label { display: inline; }
}
.ng-catalog-controls__sort select,
.ng-catalog-controls .woocommerce-ordering select {
    appearance: none;
    background: #f4f4f0;
    color: #1a1c1a;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 36px 8px 12px;
    border-radius: 8px;
    border: none;
    outline: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2359605c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.ng-catalog-controls .woocommerce-ordering { margin: 0; }
.ng-catalog-view-toggles {
    display: flex;
    align-items: center;
    background: #f4f4f0;
    padding: 4px;
    border-radius: 8px;
}
.ng-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #59605c;
    transition: all 0.2s;
    padding: 0;
}
.ng-view-btn .material-symbols-outlined { font-size: 18px; }
.ng-view-btn:hover { color: #001509; background: #ffffff; }
.ng-view-btn.is-active { color: #001509; background: #ffffff; }

/* ===== Основной блок: сайдбар + сетка ===== */
.ng-catalog-main {
    width: 100%;
    padding: 0 16px 32px;
}
@media (min-width: 1024px) {
    .ng-catalog-main { padding: 0 40px 48px; }
}
.ng-catalog-main__layout {
    max-width: 88rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}
@media (min-width: 1024px) {
    .ng-catalog-main__layout {
        grid-template-columns: 3fr 9fr;
        gap: 32px;
    }
}

/* ===== SIDEBAR ===== */
.ng-catalog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 140px;
}
@media (max-width: 1023px) {
    .ng-catalog-sidebar { position: static; }
}
.ng-filter-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.ng-filter-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.ng-filter-card h3,
.ng-filter-card__head h3 {
    font-size: 18px;
    font-weight: 500;
    color: #001509;
    margin: 0 0 16px;
    line-height: 1.3;
}
.ng-filter-card__head h3 { margin: 0; }
.ng-filter-card__head span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
}

/* Фильтр цены */
.ng-filter-price { display: flex; flex-direction: column; gap: 12px; }
.ng-filter-price__bar {
    position: relative;
    width: 100%;
    height: 8px;
    background: #eeeeea;
    border-radius: 999px;
    overflow: hidden;
}
.ng-filter-price__fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 80%;
    background: #122b1d;
    border-radius: 999px;
}
.ng-filter-price__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ng-filter-price__field {
    background: #f4f4f0;
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}
.ng-filter-price__field span {
    font-size: 10px;
    font-weight: 600;
    color: #59605c;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ng-filter-price__field input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 500;
    color: #1a1c1a;
    width: 100%;
    font-family: inherit;
}
.ng-filter-price__btn {
    width: 100%;
    background: #eeeeea;
    color: #1a1c1a;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.ng-filter-price__btn:hover { background: #e2e3df; }

/* Список фильтров */
.ng-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ng-filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    padding: 4px 0;
}
.ng-filter-item__check {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ng-filter-item__label {
    font-size: 15px;
    line-height: 24px;
    color: #1a1c1a;
}
.ng-filter-item__label strong {
    display: block;
    font-weight: 500;
    font-size: 15px;
}
.ng-filter-item__label small {
    display: block;
    font-size: 10px;
    color: #59605c;
    line-height: 1.4;
}
.ng-filter-item__count {
    font-size: 10px;
    font-weight: 600;
    color: #59605c;
    background: #f4f4f0;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}
.ng-filter-item__count--accent {
    background: #ffdbc7;
    color: #421b00;
}

/* Карточка агронома */
.ng-agronomist-card {
    background: #122b1d;
    color: #789481;
    border-radius: 12px;
    padding: 20px;
}
.ng-agronomist-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ccead4;
}
.ng-agronomist-card h4 {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 4px;
    line-height: 1.3;
}
.ng-agronomist-card p {
    font-size: 13px;
    line-height: 20px;
    color: #789481;
    margin: 0 0 16px;
}
.ng-agronomist-card__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #ffffff;
    color: #001509;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
}
.ng-agronomist-card__phone .material-symbols-outlined { font-size: 16px; }
.ng-agronomist-card__note {
    display: block;
    text-align: center;
    font-size: 10px;
    color: #b1cdb9;
    margin-top: 4px;
}

/* ===== Сетка товаров ===== */
.ng-catalog-grid-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.ng-catalog-grid-wrap ul.products,
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
}
@media (min-width: 640px) {
    .ng-catalog-grid-wrap ul.products,
    .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
    .ng-catalog-grid-wrap ul.products,
    .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
    display: none !important;
    content: none !important;
}

/* ===== Пагинация ===== */
.ng-catalog-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
}
.ng-catalog-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul,
.woocommerce .woocommerce-pagination ul.page-numbers {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
.woocommerce .page-numbers li,
.woocommerce nav.woocommerce-pagination ul li {
    border: none !important;
    margin: 0 !important;
    list-style: none !important;
}
.woocommerce .page-numbers a,
.woocommerce .page-numbers span,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 8px !important;
    border: 1px solid #E3E8E4 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    color: #1A221E !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}
.woocommerce .page-numbers a:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover {
    border-color: #1B3B2B !important;
    color: #1B3B2B !important;
}
.woocommerce .page-numbers span.current,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: #1B3B2B !important;
    color: #FFFFFF !important;
    border-color: #1B3B2B !important;
}
.ng-catalog-pagination__info {
    font-size: 13px;
    color: #59605c;
    margin: 0;
}

/* ===== Пустой каталог ===== */
.ng-catalog-empty {
    text-align: center;
    padding: 64px 16px;
}
.ng-catalog-empty .material-symbols-outlined {
    font-size: 48px !important;
    color: #727973;
}
.ng-catalog-empty h2 {
    font-size: 24px;
    margin: 16px 0 8px;
    color: #001509;
}
.ng-catalog-empty p { color: #59605c; margin: 0 0 24px; }
.ng-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
}
.ng-btn--primary { background: #122b1d; color: #ffffff; }

/* ===== Editorial ===== */
.ng-catalog-editorial {
    width: 100%;
    background: #f4f4f0;
    padding: 72px 16px;
}
@media (min-width: 1024px) {
    .ng-catalog-editorial { padding: 72px 40px; }
}
.ng-catalog-editorial__inner {
    max-width: 88rem;
    margin: 0 auto;
}
.ng-catalog-editorial__head {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 32px;
}
.ng-catalog-editorial__head h2 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 400;
    color: #001509;
    letter-spacing: -0.02em;
    margin: 12px 0 0;
}
@media (min-width: 768px) {
    .ng-catalog-editorial__head h2 { font-size: 36px; line-height: 44px; }
}
.ng-catalog-editorial__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px) {
    .ng-catalog-editorial__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .ng-catalog-editorial__grid { grid-template-columns: repeat(4, 1fr); }
}
.ng-editorial-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.ng-editorial-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ccead4;
    color: #122b1d;
    border-radius: 8px;
    margin-bottom: 16px;
}
.ng-editorial-card__icon .material-symbols-outlined { font-size: 24px; }
.ng-editorial-card h3 {
    font-size: 18px;
    font-weight: 500;
    color: #001509;
    margin: 0 0 4px;
    line-height: 1.3;
}
.ng-editorial-card p {
    font-size: 13px;
    line-height: 20px;
    color: #59605c;
    margin: 0;
}
.ng-editorial-card__footer {
    margin-top: 16px;
    padding-top: 8px;
    font-size: 10px;
    font-weight: 600;
    color: #122b1d;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* =====================================================================
   КАРТОЧКА ТОВАРА — точный перевод Tailwind-классов из макета Stitch
   ===================================================================== */

.woocommerce ul.products li.product,
.ng-product-card {
    margin: 0 !important;
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    overflow: visible !important;
    position: relative !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: box-shadow .3s !important;
}
.woocommerce ul.products li.product:hover,
.ng-product-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1) !important;
}

.ng-product-card__top { display: flex; flex-direction: column; flex: 1; }

.ng-product-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    background: #eeeeea;
    margin: 0 0 12px 0;
}
.ng-product-card__image-link { display: block; width: 100%; height: 100%; }
.ng-product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s;
}
.ng-product-card:hover .ng-product-card__image { transform: scale(1.05); }

.ng-product-card__badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 3;
}
.ng-product-card__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ng-product-card__badge--primary { background: #122b1d; color: #ffffff; }
.ng-product-card__badge--soft {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(4px);
    color: #001509;
}
.ng-product-card__badge--accent { background: #ccead4; color: #072013; }

.ng-product-card__fav {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(4px);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    color: #59605c;
    padding: 0;
    transition: color .2s;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.ng-product-card__fav:hover { color: #ba1a1a; }
.ng-product-card__fav.is-active { color: #ba1a1a; background: #ffdad6; }
.ng-product-card__fav.is-active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.ng-product-card__fav .material-symbols-outlined { font-size: 18px; }

.ng-product-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #59605c;
    margin: 0 0 4px 0;
    gap: 8px;
}

.ng-product-card__title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #001509;
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ng-product-card__title a { color: inherit; transition: color .2s; }
.ng-product-card__title a:hover { color: #122b1d; }

.ng-product-card__latin {
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    font-style: italic;
    color: #59605c;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ng-product-card__rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 12px 0;
}
.ng-product-card__star {
    font-size: 14px !important;
    line-height: 1;
    color: #c2c8c1;
}
.ng-product-card__star--filled {
    color: #c37c4d;
    font-variation-settings: 'FILL' 1;
}
.ng-product-card__rating-text {
    font-size: 10px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #59605c;
    margin-left: 4px;
}

.ng-product-card__bottom { padding-top: 4px; }

.ng-product-card__price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px 0;
}
.ng-product-card__price {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #001509;
    white-space: nowrap;
}
.ng-product-card__price .woocommerce-Price-amount,
.ng-product-card__price bdi { font-size: inherit; font-weight: inherit; color: inherit; }
.ng-product-card__price del {
    font-size: 14px;
    font-weight: 400;
    opacity: .5;
    margin-right: 4px;
}
.ng-product-card__price ins { text-decoration: none; }

.ng-product-card__stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #122b1d;
    white-space: nowrap;
}
.ng-product-card__stock.is-out-stock { color: #ba1a1a; }
.ng-product-card__stock-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

.ng-product-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.ng-product-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-family: inherit;
    box-sizing: border-box;
    height: 36px;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.ng-product-card__btn--primary { background: #122b1d; color: #ffffff; }
.ng-product-card__btn--primary:hover { background: #001509; color: #ffffff; }
.ng-product-card__btn--soft { background: #eeeeea; color: #1a1c1a; }
.ng-product-card__btn--soft:hover { background: #e8e8e4; }
.ng-product-card__btn--muted { background: #f4f4f0; color: #59605c; }
.ng-product-card__btn .material-symbols-outlined { font-size: 16px; line-height: 1; }

.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .star-rating { display: none !important; }

@media (max-width: 767px) {
    .ng-product-card { padding: 10px !important; }
    .ng-product-card__title { font-size: 15px; line-height: 20px; }
    .ng-product-card__price { font-size: 18px; line-height: 24px; }
    .ng-product-card__actions { grid-template-columns: 1fr; }
    .ng-product-card__btn { height: 34px; font-size: 11px; }
    .ng-product-card__fav { width: 30px; height: 30px; }
    .ng-product-card__fav .material-symbols-outlined { font-size: 16px; }
    .ng-product-card__badge { font-size: 9px; padding: 2px 6px; }
    .ng-product-card__meta { display: none; }
}

/* =====================================================================
   КНОПКИ КАРТОЧЕК — финальная версия (исправлено выравнивание текста).
   ===================================================================== */

.woocommerce ul.products li.product .ng-product-card__btn,
.ng-product-card .ng-product-card__btn,
.ng-product-card__btn.button,
.ng-product-card__btn.ajax_add_to_cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 14px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    text-decoration: none !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.woocommerce ul.products li.product .ng-product-card__btn--primary,
.ng-product-card .ng-product-card__btn--primary,
.ng-product-card__btn--primary.button,
.ng-product-card__btn--primary.ajax_add_to_cart {
    background: #122b1d !important;
    color: #ffffff !important;
}
.woocommerce ul.products li.product .ng-product-card__btn--primary:hover,
.ng-product-card .ng-product-card__btn--primary:hover,
.ng-product-card__btn--primary.button:hover,
.ng-product-card__btn--primary.ajax_add_to_cart:hover {
    background: #001509 !important;
    color: #ffffff !important;
}

.woocommerce ul.products li.product .ng-product-card__btn--soft,
.ng-product-card .ng-product-card__btn--soft,
.ng-product-card__btn--soft.button {
    background: #eeeeea !important;
    color: #1a1c1a !important;
}
.woocommerce ul.products li.product .ng-product-card__btn--soft:hover,
.ng-product-card .ng-product-card__btn--soft:hover {
    background: #e8e8e4 !important;
    color: #1a1c1a !important;
}

.woocommerce ul.products li.product .ng-product-card__btn--muted,
.ng-product-card .ng-product-card__btn--muted,
.ng-product-card__btn--muted.button {
    background: #f4f4f0 !important;
    color: #59605c !important;
}

.ng-product-card__btn .material-symbols-outlined {
    font-size: 16px !important;
    font-weight: 400 !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    position: static !important;
    top: auto !important;
    margin: 0 !important;
}
.ng-product-card__btn--primary .material-symbols-outlined {
    color: #ffffff !important;
}

.ng-product-card__btn::before,
.ng-product-card__btn::after {
    display: none !important;
    content: none !important;
}
.ng-product-card__btn.added {
    background: #122b1d !important;
    color: #ffffff !important;
}
.ng-product-card__btn.loading::after {
    display: none !important;
}

/* =====================================================================
   ЦЕНА — weight 450 по макету (font-headline-md).
   ===================================================================== */
.ng-product-card__price {
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 450 !important;
    letter-spacing: -0.015em !important;
    color: #001509 !important;
}
.ng-product-card__price .woocommerce-Price-amount,
.ng-product-card__price bdi {
    font-weight: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
}

/* =====================================================================
   ПЕРЕКЛЮЧАТЕЛЬ ВИДА КАТАЛОГА — 3 / 4 / список
   ===================================================================== */

.ng-catalog-grid-wrap.ng-view--3 ul.products,
.ng-catalog-grid-wrap.ng-view--3 .products {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
@media (min-width: 640px) {
    .ng-catalog-grid-wrap.ng-view--3 ul.products,
    .ng-catalog-grid-wrap.ng-view--3 .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1024px) {
    .ng-catalog-grid-wrap.ng-view--3 ul.products,
    .ng-catalog-grid-wrap.ng-view--3 .products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

.ng-catalog-grid-wrap.ng-view--4 ul.products,
.ng-catalog-grid-wrap.ng-view--4 .products {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
@media (min-width: 640px) {
    .ng-catalog-grid-wrap.ng-view--4 ul.products,
    .ng-catalog-grid-wrap.ng-view--4 .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1024px) {
    .ng-catalog-grid-wrap.ng-view--4 ul.products,
    .ng-catalog-grid-wrap.ng-view--4 .products {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

.ng-catalog-grid-wrap.ng-view--list ul.products,
.ng-catalog-grid-wrap.ng-view--list .products {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.ng-catalog-grid-wrap.ng-view--list li.product,
.ng-catalog-grid-wrap.ng-view--list .ng-product-card {
    display: grid !important;
    grid-template-columns: 240px 1fr auto !important;
    grid-template-rows: auto auto auto auto !important;
    align-items: start !important;
    column-gap: 24px !important;
    row-gap: 6px !important;
    padding: 16px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    margin: 0 !important;
    height: auto !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__top {
    display: contents !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__image-wrap {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    width: 240px !important;
    height: 180px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 8px !important;
    align-self: start !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__meta {
    grid-column: 2 / -1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: 10px !important;
    color: #59605c !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 600 !important;
    display: flex !important;
    gap: 16px !important;
    justify-content: flex-start !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__title {
    grid-column: 2 / -1 !important;
    grid-row: 2 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    font-weight: 500 !important;
    color: #001509 !important;
    margin: 0 !important;
    -webkit-line-clamp: 2 !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__latin {
    grid-column: 2 / -1 !important;
    grid-row: 3 !important;
    font-size: 13px !important;
    line-height: 20px !important;
    font-style: italic !important;
    color: #59605c !important;
    margin: 0 !important;
    -webkit-line-clamp: 1 !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__rating {
    grid-column: 2 !important;
    grid-row: 4 !important;
    margin: 8px 0 0 0 !important;
    align-self: end !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__bottom {
    grid-column: 3 !important;
    grid-row: 1 / span 4 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    padding: 0 !important;
    border-top: 0 !important;
    margin: 0 !important;
    min-width: 260px !important;
    gap: 12px !important;
    align-self: stretch !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__price-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
    margin: 0 !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__price {
    font-size: 28px !important;
    line-height: 36px !important;
    font-weight: 450 !important;
    color: #001509 !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__stock {
    font-size: 10px !important;
    justify-content: flex-end !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__btn {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__fav {
    top: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
}

.ng-catalog-grid-wrap.ng-view--list .ng-product-card__badges {
    top: 8px !important;
    left: 8px !important;
}

@media (max-width: 1023px) {
    .ng-catalog-grid-wrap.ng-view--list li.product,
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card {
        grid-template-columns: 180px 1fr !important;
        column-gap: 16px !important;
    }
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__image-wrap {
        width: 180px !important;
        height: 135px !important;
        grid-row: 1 / span 4 !important;
    }
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__bottom {
        grid-column: 1 / -1 !important;
        grid-row: 5 !important;
        align-items: flex-start !important;
        min-width: 0 !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid #E3E8E4 !important;
    }
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__price-row {
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__actions {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .ng-catalog-grid-wrap.ng-view--list li.product,
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__image-wrap {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
    }
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__meta,
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__title,
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__latin,
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__rating {
        grid-column: 1 !important;
    }
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__meta { grid-row: 2 !important; margin-top: 8px !important; }
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__title { grid-row: 3 !important; }
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__latin { grid-row: 4 !important; }
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__rating { grid-row: 5 !important; }
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__bottom {
        grid-column: 1 !important;
        grid-row: 6 !important;
    }
    .ng-catalog-grid-wrap.ng-view--list .ng-product-card__actions {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* =====================================================================
   КОРЗИНА — стили по макету Stitch. Прогресс-бар бесплатной доставки
   убран по требованию заказчика.
   ===================================================================== */

.ng-cart {
    max-width: 88rem;
    margin: 0 auto;
    padding: 24px 16px 64px;
}
@media (min-width: 1024px) {
    .ng-cart { padding: 32px 40px 80px; }
}

/* Крошки */
.ng-cart__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #59605c;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ng-cart__breadcrumbs a {
    color: #59605c;
    text-decoration: none;
    transition: color 0.2s;
}
.ng-cart__breadcrumbs a:hover { color: #001509; }
.ng-cart__breadcrumbs .material-symbols-outlined {
    font-size: 14px !important;
    color: #727973;
}
.ng-cart__breadcrumbs-current {
    color: #001509;
    font-weight: 600;
}

/* Заголовок */
.ng-cart__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.ng-cart__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.ng-cart__title {
    font-size: 32px;
    line-height: 38px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #001509;
    margin: 0;
}
@media (min-width: 768px) {
    .ng-cart__title { font-size: 36px; line-height: 44px; }
}

/* Раскладка */
.ng-cart__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}
@media (min-width: 1024px) {
    .ng-cart__layout {
        grid-template-columns: 8fr 4fr;
    }
}
.ng-cart__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}
.ng-cart__sidebar {
    min-width: 0;
}

/* Форма корзины */
.woocommerce-cart-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Блок товаров */
.ng-cart__items {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0;
}
@media (min-width: 640px) {
    .ng-cart__items { padding: 24px 32px; }
}

/* Шапка таблицы */
.ng-cart__items-header {
    display: none;
    grid-template-columns: 6fr 2fr 2fr 2fr;
    gap: 16px;
    padding-bottom: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
    border-bottom: 1px solid #e8e8e4;
}
.ng-cart__items-header > span:nth-child(2),
.ng-cart__items-header > span:nth-child(3) { text-align: center; }
.ng-cart__items-header > span:nth-child(4) { text-align: right; }
@media (min-width: 640px) {
    .ng-cart__items-header { display: grid; }
}

/* Строка товара */
.ng-cart__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid #f4f4f0;
    align-items: center;
}
.ng-cart__item:last-child { border-bottom: 0; padding-bottom: 8px; }
.ng-cart__item:first-of-type { padding-top: 16px; }

@media (min-width: 640px) {
    .ng-cart__item {
        grid-template-columns: 6fr 2fr 2fr 2fr;
        gap: 16px;
        padding: 16px 0;
    }
}

/* Инфо товара */
.ng-cart__item-info {
    display: flex;
    gap: 16px;
    align-items: center;
    min-width: 0;
}
.ng-cart__item-thumb {
    width: 80px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
    background: #eeeeea;
    flex-shrink: 0;
}
.ng-cart__item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ng-cart__item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ng-cart__item-sku {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
}
.ng-cart__item-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #001509;
    text-decoration: none;
    transition: color 0.2s;
}
.ng-cart__item-title:hover { color: #4a6453; }
.ng-cart__item-meta {
    font-size: 13px;
    line-height: 20px;
    color: #424843;
}
.ng-cart__item-meta p { margin: 0; }

/* Цена */
.ng-cart__item-price {
    font-size: 15px;
    color: #1a1c1a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ng-cart__item-price::before {
    content: "Цена:";
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #59605c;
}
@media (min-width: 640px) {
    .ng-cart__item-price {
        justify-content: center;
        text-align: center;
    }
    .ng-cart__item-price::before { content: none; }
}

/* Количество */
.ng-cart__item-qty {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ng-cart__item-qty::before {
    content: "Количество:";
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #59605c;
}
@media (min-width: 640px) {
    .ng-cart__item-qty {
        justify-content: center;
    }
    .ng-cart__item-qty::before { content: none; }
}
.ng-cart__item-qty .quantity {
    display: inline-flex;
    align-items: center;
    background: #f4f4f0;
    border-radius: 8px;
    padding: 2px;
}
.ng-cart__item-qty input.qty {
    width: 44px;
    height: 32px;
    text-align: center;
    background: transparent;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #001509;
    -moz-appearance: textfield;
}
.ng-cart__item-qty input.qty::-webkit-outer-spin-button,
.ng-cart__item-qty input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Сумма */
.ng-cart__item-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ng-cart__item-subtotal::before {
    content: "Сумма:";
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #59605c;
}
@media (min-width: 640px) {
    .ng-cart__item-subtotal {
        justify-content: flex-end;
    }
    .ng-cart__item-subtotal::before { content: none; }
}
.ng-cart__item-subtotal .woocommerce-Price-amount,
.ng-cart__item-subtotal bdi {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: #001509;
}
.ng-cart__item-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: #59605c;
    text-decoration: none;
    transition: all 0.2s;
}
.ng-cart__item-remove:hover {
    color: #ba1a1a;
    background: #ffdad6;
}
.ng-cart__item-remove .material-symbols-outlined {
    font-size: 18px !important;
}

/* Панель действий: купон + кнопки */
.ng-cart__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
@media (min-width: 1024px) {
    .ng-cart__actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.ng-cart__actions .coupon {
    display: flex;
    gap: 8px;
    flex: 1;
    max-width: 480px;
}
.ng-cart__actions .coupon input[type="text"] {
    flex: 1;
    background: #f4f4f0;
    border: 0;
    border-radius: 8px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 13px;
    color: #1a1c1a;
    outline: 0;
    transition: background 0.2s;
}
.ng-cart__actions .coupon input[type="text"]:focus {
    background: #ffffff;
    box-shadow: 0 0 0 1px #122b1d;
}
.ng-cart__actions .coupon button {
    background: #dae1dc;
    color: #161d1a;
    border: 0;
    border-radius: 8px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.ng-cart__actions .coupon button:hover { background: #dde4df; }

.ng-cart__actions-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ng-cart__continue {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #59605c;
    text-decoration: none;
    transition: color 0.2s;
}
.ng-cart__continue:hover { color: #001509; }
.ng-cart__continue .material-symbols-outlined { font-size: 16px !important; }

.ng-cart__actions button[name="update_cart"],
.ng-cart__actions button[name="update_cart"]:disabled {
    background: #e8e8e4;
    color: #1a1c1a;
    border: 0;
    border-radius: 8px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.ng-cart__actions button[name="update_cart"]:hover:not(:disabled) {
    background: #e2e3df;
}
.ng-cart__actions button[name="update_cart"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Блок гарантии */
.ng-cart__guarantee {
    background: #122b1d;
    color: #789481;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.ng-cart__guarantee-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(74, 100, 83, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ccead4;
}
.ng-cart__guarantee-icon .material-symbols-outlined { font-size: 24px !important; }
.ng-cart__guarantee-text h4 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #ccead4;
    margin: 0 0 4px;
}
.ng-cart__guarantee-text p {
    font-size: 13px;
    line-height: 20px;
    color: #789481;
    margin: 0;
}

/* =====================================================================
   ИТОГИ ЗАКАЗА (правый блок)
   ===================================================================== */

.cart_totals {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (min-width: 640px) {
    .cart_totals { padding: 32px; }
}
.cart_totals h2,
.ng-cart-totals__head h2 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 450;
    color: #001509;
    margin: 0;
}
.ng-cart-totals__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ng-cart-totals__head > span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
}

.ng-cart-totals__breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ng-cart-totals__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: #424843;
}
.ng-cart-totals__row .woocommerce-Price-amount,
.ng-cart-totals__row bdi {
    color: #001509;
    font-weight: 500;
}
.ng-cart-totals__row--discount { color: #122b1d; }
.ng-cart-totals__row--discount .woocommerce-Price-amount,
.ng-cart-totals__row--discount bdi {
    color: #122b1d;
    font-weight: 600;
}

.woocommerce-shipping-totals {
    background: #f4f4f0;
    border-radius: 12px;
    padding: 16px;
}
.woocommerce-shipping-totals > th,
.woocommerce-shipping-totals > td {
    display: block;
    padding: 0;
    border: 0;
}
.woocommerce-shipping-totals > th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #59605c;
    margin-bottom: 12px;
}
.woocommerce-shipping-totals ul#shipping_method {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.woocommerce-shipping-totals ul#shipping_method li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
    margin: 0;
    list-style: none;
}
.woocommerce-shipping-totals ul#shipping_method li:hover { background: #eeeeea; }
.woocommerce-shipping-totals ul#shipping_method li input[type="radio"] {
    margin-top: 4px;
    accent-color: #122b1d;
    flex-shrink: 0;
}
.woocommerce-shipping-totals ul#shipping_method li label {
    font-size: 15px;
    color: #001509;
    display: block;
    cursor: pointer;
    flex: 1;
}
.woocommerce-shipping-totals ul#shipping_method li label .woocommerce-Price-amount,
.woocommerce-shipping-totals ul#shipping_method li label bdi {
    font-weight: 600;
    color: #001509;
}

.ng-cart-totals__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid #e8e8e4;
}
.ng-cart-totals__total-label {
    display: block;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: #001509;
}
.ng-cart-totals__total-note {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #59605c;
}
.ng-cart-totals__total-amount .woocommerce-Price-amount,
.ng-cart-totals__total-amount bdi {
    font-size: 36px;
    line-height: 44px;
    font-weight: 700;
    color: #001509;
    letter-spacing: -0.02em;
}
@media (min-width: 640px) {
    .ng-cart-totals__total-amount .woocommerce-Price-amount,
    .ng-cart-totals__total-amount bdi { font-size: 48px; line-height: 56px; }
}

.wc-proceed-to-checkout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}
.wc-proceed-to-checkout .checkout-button,
.wc-proceed-to-checkout a.checkout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #122b1d !important;
    color: #ffffff !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    text-align: center;
    text-decoration: none;
    border: 0 !important;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.wc-proceed-to-checkout .checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
    background: #4a6453 !important;
    color: #ffffff !important;
    transform: scale(1.01);
}

.ng-cart-totals__trust {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}
.ng-cart-totals__trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    color: #59605c;
}
.ng-cart-totals__trust-item .material-symbols-outlined {
    font-size: 16px !important;
    color: #4a6453;
}

/* Скрываем дефолтные элементы WooCommerce, дублирующие наши */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info { display: none !important; }
.woocommerce-cart .cart-empty { display: none; }
/* =====================================================================
   КОРЗИНА — правый блок «Итог заказа». Финальная версия.
   Перебивает все предыдущие правила для .cart_totals и его строк.
   Дописано в конец style.css.
   ===================================================================== */

/* Расширяем правую колонку: минимум 340px, не сжимается */
.ng-cart__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}
@media (min-width: 1024px) {
    .ng-cart__layout {
        grid-template-columns: minmax(0, 1.75fr) minmax(340px, 1fr) !important;
    }
}

/* Контейнер блока */
.cart_totals {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    word-break: normal;
    overflow-wrap: break-word;
}
@media (min-width: 640px) {
    .cart_totals { padding: 28px; }
}

/* Заголовок — в одну строку, счётчик отдельно */
.ng-cart-totals__head,
.cart_totals > h2:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    margin: 0;
}
.ng-cart-totals__head h2,
.cart_totals h2 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 500;
    color: #001509;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
}
.ng-cart-totals__head > span {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
    white-space: nowrap;
}

/* Разбивка — строки */
.ng-cart-totals__breakdown,
.cart_totals .cart_totals_table,
.cart_totals table.shop_table {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    border: 0;
    margin: 0;
    border-collapse: separate;
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
    border: 0;
    padding: 0;
    background: transparent;
    display: table-cell;
    vertical-align: baseline;
}
.cart_totals table.shop_table tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    width: 100%;
    padding: 0;
}

/* Строки — каждый элемент разбивки в одну строку */
.ng-cart-totals__row,
.cart_totals .cart-subtotal,
.cart_totals .cart-discount,
.cart_totals .fee,
.cart_totals tr.cart-subtotal,
.cart_totals tr.cart-discount {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 16px !important;
    font-size: 15px !important;
    color: #424843 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
}
.ng-cart-totals__row-label,
.cart_totals .cart-subtotal th,
.cart_totals .cart-discount th,
.cart_totals .fee th {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #424843 !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    text-align: left !important;
    white-space: nowrap !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.ng-cart-totals__row-value,
.cart_totals .cart-subtotal td,
.cart_totals .cart-discount td,
.cart_totals .fee td {
    flex: 0 0 auto !important;
    text-align: right !important;
    color: #001509 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    white-space: nowrap !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.ng-cart-totals__row-value .woocommerce-Price-amount,
.ng-cart-totals__row-value bdi,
.cart_totals .cart-subtotal td .woocommerce-Price-amount,
.cart_totals .cart-subtotal td bdi,
.cart_totals .cart-discount td .woocommerce-Price-amount,
.cart_totals .cart-discount td bdi {
    color: #001509 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}
.cart_totals .cart-discount td .woocommerce-Price-amount,
.cart_totals .cart-discount td bdi,
.ng-cart-totals__row--discount .ng-cart-totals__row-value {
    color: #122b1d !important;
}

/* Блок доставки — отключаем встроенный <tr> формат, оставляем свободную разметку */
.cart_totals .woocommerce-shipping-totals,
.cart_totals tr.woocommerce-shipping-totals {
    display: block !important;
    width: 100% !important;
    background: #f4f4f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 4px 0 !important;
    border: 0 !important;
}
.cart_totals .woocommerce-shipping-totals th,
.cart_totals .woocommerce-shipping-totals td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
}
.cart_totals .woocommerce-shipping-totals th {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #59605c !important;
    margin-bottom: 10px !important;
}
.cart_totals .woocommerce-shipping-totals ul#shipping_method {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.cart_totals .woocommerce-shipping-totals ul#shipping_method li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 6px 4px !important;
    border-radius: 6px !important;
    margin: 0 !important;
    list-style: none !important;
    font-size: 14px !important;
    line-height: 20px !important;
}
.cart_totals .woocommerce-shipping-totals ul#shipping_method li:hover {
    background: #eeeeea !important;
}
.cart_totals .woocommerce-shipping-totals ul#shipping_method li input[type="radio"] {
    margin-top: 3px !important;
    flex-shrink: 0 !important;
    accent-color: #122b1d !important;
}
.cart_totals .woocommerce-shipping-totals ul#shipping_method li label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #001509 !important;
    cursor: pointer !important;
    display: block !important;
    white-space: normal !important;
}
.cart_totals .woocommerce-shipping-totals ul#shipping_method li label .woocommerce-Price-amount,
.cart_totals .woocommerce-shipping-totals ul#shipping_method li label bdi {
    font-weight: 600 !important;
    color: #001509 !important;
}
.cart_totals .woocommerce-shipping-destination,
.cart_totals .woocommerce-shipping-calculator {
    font-size: 13px !important;
    line-height: 18px !important;
    color: #424843 !important;
    margin-top: 8px !important;
}
.cart_totals .woocommerce-shipping-calculator .shipping-calculator-button {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #122b1d !important;
    text-decoration: underline !important;
    margin-top: 4px !important;
    cursor: pointer !important;
}

/* Итого */
.ng-cart-totals__total,
.cart_totals .order-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #e8e8e4 !important;
    margin-top: 4px !important;
    border-bottom: 0 !important;
}
.ng-cart-totals__total-text,
.cart_totals .order-total th {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
}
.ng-cart-totals__total-label,
.cart_totals .order-total th {
    display: block !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
    color: #001509 !important;
}
.ng-cart-totals__total-note {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #59605c !important;
    margin-top: 2px !important;
    letter-spacing: 0.04em !important;
}
.ng-cart-totals__total-amount,
.cart_totals .order-total td {
    flex: 0 0 auto !important;
    text-align: right !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.ng-cart-totals__total-amount .woocommerce-Price-amount,
.ng-cart-totals__total-amount bdi,
.cart_totals .order-total td .woocommerce-Price-amount,
.cart_totals .order-total td bdi {
    font-size: 28px !important;
    line-height: 34px !important;
    font-weight: 700 !important;
    color: #001509 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
}

/* Кнопка оформления */
.wc-proceed-to-checkout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.wc-proceed-to-checkout .checkout-button,
.wc-proceed-to-checkout a.checkout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #122b1d !important;
    color: #ffffff !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center;
    text-decoration: none;
    border: 0 !important;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    line-height: 1.2 !important;
    white-space: normal;
    min-height: 52px;
}
.wc-proceed-to-checkout .checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
    background: #4a6453 !important;
    color: #ffffff !important;
    transform: scale(1.01);
}

/* Trust-бейджи */
.ng-cart-totals__trust {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}
.ng-cart-totals__trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    color: #59605c;
    line-height: 1.4;
}
.ng-cart-totals__trust-item .material-symbols-outlined {
    font-size: 16px !important;
    color: #4a6453;
    flex-shrink: 0;
}
/* =====================================================================
   ФИКС ПРАВОГО БЛОКА — перебивает Tailwind CDN, который подключается
   после style.css и генерирует стили из HTML-классов на лету.
   ===================================================================== */

/* Жёсткая раскладка корзины — Tailwind не сможет перебить */
.ng-cart__layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    align-items: start !important;
}
@media (min-width: 1024px) {
    .ng-cart__layout {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 420px) !important;
    }
}

/* Контейнер правого блока */
.ng-cart__sidebar,
.cart-collaterals {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}
.cart_totals {
    display: block !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 28px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Заголовок */
.cart_totals .ng-cart-totals__head,
.cart_totals h2:first-of-type {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
.cart_totals .ng-cart-totals__head h2,
.cart_totals h2 {
    display: block !important;
    font-size: 22px !important;
    line-height: 30px !important;
    font-weight: 500 !important;
    color: #001509 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    width: auto !important;
}
.cart_totals .ng-cart-totals__head > span {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #59605c !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Таблица разбивки — перебиваем Tailwind */
.cart_totals table.shop_table,
.cart_totals .cart_totals_table,
.cart_totals .ng-cart-totals__breakdown {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    border-collapse: separate !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.cart_totals table.shop_table tbody {
    display: block !important;
    width: 100% !important;
}
.cart_totals table.shop_table tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.cart_totals table.shop_table tr:last-child {
    margin-bottom: 0 !important;
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    vertical-align: baseline !important;
}
.cart_totals table.shop_table th {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: #424843 !important;
    white-space: normal !important;
}
.cart_totals table.shop_table td {
    flex: 0 0 auto !important;
    text-align: right !important;
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: #001509 !important;
    white-space: nowrap !important;
}

/* Блок доставки */
.cart_totals .woocommerce-shipping-totals,
.cart_totals tr.woocommerce-shipping-totals {
    display: block !important;
    width: 100% !important;
    background: #f4f4f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 4px 0 !important;
    border: 0 !important;
}
.cart_totals .woocommerce-shipping-totals th,
.cart_totals .woocommerce-shipping-totals td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.cart_totals .woocommerce-shipping-totals th {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #59605c !important;
    margin-bottom: 10px !important;
}
.cart_totals .woocommerce-shipping-totals ul#shipping_method {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
.cart_totals .woocommerce-shipping-totals ul#shipping_method li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 6px 4px !important;
    border-radius: 6px !important;
    margin: 0 0 6px 0 !important;
    list-style: none !important;
    font-size: 14px !important;
    line-height: 20px !important;
    width: 100% !important;
}
.cart_totals .woocommerce-shipping-totals ul#shipping_method li input[type="radio"] {
    margin: 3px 0 0 0 !important;
    flex: 0 0 auto !important;
    accent-color: #122b1d !important;
}
.cart_totals .woocommerce-shipping-totals ul#shipping_method li label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #001509 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
}

/* Итого */
.cart_totals tr.order-total,
.cart_totals .ng-cart-totals__total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 16px !important;
    padding: 16px 0 0 0 !important;
    margin: 4px 0 0 0 !important;
    border-top: 1px solid #e8e8e4 !important;
    border-bottom: 0 !important;
    width: 100% !important;
}
.cart_totals tr.order-total th,
.cart_totals .ng-cart-totals__total-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #001509 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.cart_totals tr.order-total td,
.cart_totals .ng-cart-totals__total-amount {
    flex: 0 0 auto !important;
    text-align: right !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: nowrap !important;
}
.cart_totals tr.order-total td .woocommerce-Price-amount,
.cart_totals tr.order-total td bdi,
.cart_totals .ng-cart-totals__total-amount .woocommerce-Price-amount,
.cart_totals .ng-cart-totals__total-amount bdi {
    font-size: 28px !important;
    line-height: 34px !important;
    font-weight: 700 !important;
    color: #001509 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
}

/* Кнопка оформления */
.cart_totals .wc-proceed-to-checkout {
    display: block !important;
    width: 100% !important;
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
}
.cart_totals .wc-proceed-to-checkout a.checkout-button,
.cart_totals .wc-proceed-to-checkout .checkout-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: #122b1d !important;
    color: #ffffff !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 0 !important;
    line-height: 1.2 !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.cart_totals .wc-proceed-to-checkout a.checkout-button:hover,
.cart_totals .wc-proceed-to-checkout .checkout-button:hover {
    background: #4a6453 !important;
    color: #ffffff !important;
}
/* =====================================================================
   ОФОРМЛЕНИЕ ЗАКАЗА — стили по макету Stitch.
   ===================================================================== */

.ng-checkout {
    max-width: 88rem;
    margin: 0 auto;
    padding: 24px 16px 64px;
}
@media (min-width: 1024px) {
    .ng-checkout { padding: 32px 40px 80px; }
}

/* Крошки */
.ng-checkout__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #59605c;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ng-checkout__breadcrumbs a { color: #59605c; transition: color 0.2s; }
.ng-checkout__breadcrumbs a:hover { color: #001509; }
.ng-checkout__breadcrumbs .material-symbols-outlined { font-size: 14px !important; color: #727973; }
.ng-checkout__breadcrumbs-current { color: #001509; font-weight: 600; }

/* Заголовок */
.ng-checkout__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.ng-checkout__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ng-checkout__title {
    font-size: 32px;
    line-height: 38px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #001509;
    margin: 0;
}
@media (min-width: 768px) { .ng-checkout__title { font-size: 40px; line-height: 48px; } }
.ng-checkout__secure {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #59605c;
    background: #f4f4f0;
    padding: 8px 14px;
    border-radius: 999px;
}
.ng-checkout__secure .material-symbols-outlined { font-size: 16px !important; color: #4a6453; }

/* Уведомление */
.ng-checkout__notice {
    display: flex;
    gap: 16px;
    align-items: center;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 24px;
}
.ng-checkout__notice-icon {
    width: 36px; height: 36px;
    background: #ccead4;
    color: #072013;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ng-checkout__notice-icon .material-symbols-outlined { font-size: 20px !important; }
.ng-checkout__notice p { margin: 0; font-size: 13px; color: #1a1c1a; }
.ng-checkout__notice a { color: #122b1d; font-weight: 600; text-decoration: underline; }

/* Раскладка */
.ng-checkout__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}
@media (min-width: 1024px) {
    .ng-checkout__layout {
        grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);
        gap: 40px;
    }
}

.ng-checkout__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.ng-checkout__sidebar {
    min-width: 0;
}
@media (min-width: 1024px) {
    .ng-checkout__sidebar { position: sticky; top: 140px; }
}

/* Шаг */
.ng-checkout__step {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ng-checkout__step-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}
.ng-checkout__step-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ng-checkout__step-num {
    width: 28px; height: 28px;
    background: #122b1d;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.ng-checkout__step-title h2 {
    font-size: 18px;
    font-weight: 500;
    color: #001509;
    margin: 0;
    line-height: 1.3;
}
.ng-checkout__step-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
}

/* Поля */
.ng-checkout__fields,
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) {
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: 1fr 1fr;
    }
    .woocommerce-billing-fields__field-wrapper .form-row-wide,
    .woocommerce-shipping-fields__field-wrapper .form-row-wide,
    .woocommerce-additional-fields__field-wrapper .form-row { grid-column: 1 / -1; }
}
.ng-checkout .form-row {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ng-checkout .form-row label {
    font-size: 12px;
    font-weight: 600;
    color: #424843;
    letter-spacing: 0.04em;
}
.ng-checkout .form-row label .required { color: #ba1a1a; text-decoration: none; }
.ng-checkout .form-row input[type="text"],
.ng-checkout .form-row input[type="email"],
.ng-checkout .form-row input[type="tel"],
.ng-checkout .form-row input[type="number"],
.ng-checkout .form-row select,
.ng-checkout .form-row textarea {
    width: 100%;
    background: #f4f4f0;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 13px;
    color: #1a1c1a;
    outline: 0;
    transition: background 0.2s, border 0.2s;
}
.ng-checkout .form-row input:focus,
.ng-checkout .form-row select:focus,
.ng-checkout .form-row textarea:focus {
    background: #ffffff;
    border-color: #122b1d;
}
.ng-checkout .form-row textarea { min-height: 80px; resize: vertical; }
.ng-checkout .select2-container .select2-selection {
    background: #f4f4f0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    height: 44px !important;
    padding: 6px 14px !important;
}
.ng-checkout .select2-container .select2-selection__rendered {
    font-size: 13px !important;
    color: #1a1c1a !important;
    line-height: 32px !important;
    padding: 0 !important;
}
.ng-checkout .select2-container .select2-selection__arrow { top: 8px !important; right: 10px !important; }

/* Методы доставки */
.ng-checkout #shipping_method,
.ng-checkout .wc_payment_methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ng-checkout #shipping_method li,
.ng-checkout .wc_payment_methods li {
    background: #f4f4f0;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid transparent;
}
.ng-checkout #shipping_method li:hover,
.ng-checkout .wc_payment_methods li:hover { background: #eeeeea; }
.ng-checkout #shipping_method li input[type="radio"],
.ng-checkout .wc_payment_methods li input[type="radio"] {
    margin: 3px 0 0 0;
    accent-color: #122b1d;
    flex-shrink: 0;
}
.ng-checkout #shipping_method li label,
.ng-checkout .wc_payment_methods li label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    color: #001509;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

/* Скрываем лишнее */
.ng-checkout .woocommerce-shipping-totals,
.ng-checkout tr.woocommerce-shipping-totals { display: none !important; }

/* Правый блок: ваш заказ */
.ng-checkout__review {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
@media (min-width: 640px) { .ng-checkout__review { padding: 28px; } }

.ng-checkout__review-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 500;
    color: #001509;
    margin: 0 0 20px;
}
.ng-checkout__review-count {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
    background: #f4f4f0;
    padding: 4px 10px;
    border-radius: 999px;
}

.ng-checkout-review__items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8e8e4;
    margin-bottom: 16px;
}
.ng-checkout-review__item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.ng-checkout-review__item-info {
    display: flex;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.ng-checkout-review__item-thumb {
    position: relative;
    width: 56px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #eeeeea;
    flex-shrink: 0;
}
.ng-checkout-review__item-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ng-checkout-review__item-qty {
    position: absolute;
    top: 0; right: 0;
    background: #122b1d;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-bottom-left-radius: 6px;
}
.ng-checkout-review__item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ng-checkout-review__item-title {
    font-size: 13px;
    font-weight: 500;
    color: #001509;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ng-checkout-review__item-meta {
    font-size: 10px;
    font-weight: 600;
    color: #59605c;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ng-checkout-review__item-sub { font-size: 12px; color: #59605c; }
.ng-checkout-review__item-total {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: #001509;
    white-space: nowrap;
    flex-shrink: 0;
}
.ng-checkout-review__item-total .woocommerce-Price-amount,
.ng-checkout-review__item-total bdi { color: #001509; font-size: inherit; font-weight: inherit; }

.ng-checkout-review__totals {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ng-checkout-review__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-size: 14px;
    color: #424843;
}
.ng-checkout-review__row .woocommerce-Price-amount,
.ng-checkout-review__row bdi { color: #001509; font-weight: 600; }
.ng-checkout-review__row--discount,
.ng-checkout-review__row--discount .woocommerce-Price-amount,
.ng-checkout-review__row--discount bdi { color: #122b1d; }
.ng-checkout-review__row--total {
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid #e8e8e4;
    align-items: baseline;
    gap: 16px;
}
.ng-checkout-review__total-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #001509;
}
.ng-checkout-review__total-note {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #59605c;
    margin-top: 2px;
}
.ng-checkout-review__total-amount .woocommerce-Price-amount,
.ng-checkout-review__total-amount bdi {
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    color: #001509;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* Кнопка оформления */
.ng-checkout__submit,
#place_order {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: #122b1d !important;
    color: #ffffff !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    margin-top: 16px !important;
    transition: background 0.2s, transform 0.2s !important;
}
.ng-checkout__submit:hover,
#place_order:hover {
    background: #4a6453 !important;
    transform: scale(1.01);
}

/* Terms */
.woocommerce-terms-and-conditions-wrapper {
    background: #f4f4f0;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}
.woocommerce-terms-and-conditions-wrapper .form-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}
.woocommerce-terms-and-conditions-wrapper .form-row label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 400;
    color: #1a1c1a;
    line-height: 1.5;
    cursor: pointer;
}
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    margin-top: 3px;
    accent-color: #122b1d;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Trust-бейджи */
.ng-checkout__trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
}
@media (min-width: 768px) { .ng-checkout__trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ng-checkout__trust { grid-template-columns: repeat(4, 1fr); } }
.ng-checkout__trust-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ng-checkout__trust-item .material-symbols-outlined {
    font-size: 22px !important;
    color: #4a6453;
    flex-shrink: 0;
    margin-top: 2px;
}
.ng-checkout__trust-item strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #001509;
    margin-bottom: 2px;
}
.ng-checkout__trust-item p {
    font-size: 12px;
    color: #59605c;
    margin: 0;
    line-height: 1.4;
}
.ng-checkout__trust-item a { color: #122b1d; font-weight: 600; }
/* =====================================================================
   ЛК АДМИНИСТРАТОРА
   ===================================================================== */

.ng-admin {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 100vh;
    background: #faf9f6;
}
@media (min-width: 1024px) {
    .ng-admin { grid-template-columns: 280px 1fr; }
}

/* Сайдбар */
.ng-admin__sidebar {
    background: #f4f4f0;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    border-right: 1px solid #e8e8e4;
}
@media (min-width: 1024px) {
    .ng-admin__sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

.ng-admin__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
}
.ng-admin__brand-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: #122b1d;
    color: #ccead4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ng-admin__brand-icon .material-symbols-outlined { font-size: 20px !important; }
.ng-admin__brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ng-admin__brand-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
}
.ng-admin__brand-name {
    font-size: 16px;
    font-weight: 600;
    color: #001509;
}

.ng-admin__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.ng-admin__nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #424843;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}
.ng-admin__nav-item .material-symbols-outlined {
    font-size: 20px !important;
}
.ng-admin__nav-item:hover {
    background: #eeeeea;
    color: #001509;
}
.ng-admin__nav-item.is-active {
    background: #122b1d;
    color: #ffffff;
    font-weight: 600;
}

.ng-admin__footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ng-admin__storefront {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #e8e8e4;
    border-radius: 8px;
    text-decoration: none;
    color: #001509;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}
.ng-admin__storefront:hover { background: #e2e3df; }
.ng-admin__storefront .material-symbols-outlined { font-size: 18px !important; }
.ng-admin__storefront-arrow { margin-left: auto; font-size: 16px !important; }

.ng-admin__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid #e2e3df;
    padding-top: 16px;
}
.ng-admin__user-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #122b1d;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.ng-admin__user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ng-admin__user-name {
    font-size: 13px;
    font-weight: 600;
    color: #001509;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ng-admin__user-logout {
    font-size: 11px;
    color: #59605c;
    text-decoration: none;
}
.ng-admin__user-logout:hover { color: #ba1a1a; }

/* Основная область */
.ng-admin__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ng-admin__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 32px;
    background: #ffffff;
    border-bottom: 1px solid #e8e8e4;
    flex-wrap: wrap;
}
.ng-admin__header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ng-admin__header-title {
    font-size: 24px;
    font-weight: 500;
    color: #001509;
    margin: 0;
    letter-spacing: -0.01em;
}
.ng-admin__header-sub {
    font-size: 12px;
    color: #59605c;
    font-weight: 600;
}
.ng-admin__header-right {
    display: flex;
    gap: 8px;
}
.ng-admin__header-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f4f4f0;
    border-radius: 8px;
    text-decoration: none;
    color: #001509;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s;
}
.ng-admin__header-link:hover { background: #eeeeea; }
.ng-admin__header-link .material-symbols-outlined { font-size: 16px !important; }

.ng-admin__content {
    padding: 24px 32px 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (max-width: 767px) {
    .ng-admin__header { padding: 16px; }
    .ng-admin__content { padding: 16px; }
}

/* Карточки сводки */
.ng-admin__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) { .ng-admin__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ng-admin__cards { grid-template-columns: repeat(4, 1fr); } }

.ng-admin__card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ng-admin__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.ng-admin__card-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
}
.ng-admin__card-head .material-symbols-outlined {
    font-size: 20px !important;
    color: #4a6453;
}
.ng-admin__card-value {
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    color: #001509;
    letter-spacing: -0.02em;
}
.ng-admin__card-value .woocommerce-Price-amount,
.ng-admin__card-value bdi {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.ng-admin__card-note {
    font-size: 11px;
    color: #59605c;
}

/* Заглушка */
.ng-admin__placeholder {
    background: #ffffff;
    border-radius: 12px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.ng-admin__placeholder .material-symbols-outlined {
    font-size: 48px !important;
    color: #c2c8c1;
}
.ng-admin__placeholder h2 {
    font-size: 20px;
    font-weight: 500;
    color: #001509;
    margin: 0;
}
.ng-admin__placeholder p {
    font-size: 14px;
    color: #59605c;
    margin: 0;
    max-width: 500px;
    line-height: 1.5;
}
.ng-admin__placeholder-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #122b1d;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    transition: background 0.2s;
}
.ng-admin__placeholder-btn:hover { background: #001509; }
/* =====================================================================
   CRM ЗАКАЗОВ — канбан, фильтры, карточки, модальное окно
   ===================================================================== */

/* Фильтры */
.ng-orders__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}
.ng-orders__filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}
.ng-orders__filter-group--grow { flex: 1; min-width: 200px; }
.ng-orders__filter-group label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
}
.ng-orders__filter-group select,
.ng-orders__filter-group input {
    background: #f4f4f0;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    color: #1a1c1a;
    outline: 0;
    transition: background 0.2s, border 0.2s;
}
.ng-orders__filter-group select:focus,
.ng-orders__filter-group input:focus {
    background: #ffffff;
    border-color: #122b1d;
}
.ng-orders__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #122b1d;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    align-self: flex-end;
    height: 40px;
}
.ng-orders__filter-btn:hover { background: #001509; }
.ng-orders__filter-btn .material-symbols-outlined { font-size: 16px !important; }
.ng-orders__filter-reset {
    font-size: 12px;
    font-weight: 600;
    color: #59605c;
    text-decoration: underline;
    align-self: flex-end;
    padding-bottom: 10px;
}
.ng-orders__filter-reset:hover { color: #001509; }

/* Канбан */
.ng-kanban {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}
@media (min-width: 1024px) {
    .ng-kanban {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow-x: auto;
        padding-bottom: 8px;
    }
}
@media (min-width: 1280px) {
    .ng-kanban { grid-template-columns: repeat(5, 1fr); }
}

.ng-kanban__column {
    background: #f4f4f0;
    border-radius: 12px;
    padding: 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
}

.ng-kanban__col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 8px;
    border-bottom: 1px solid #e2e3df;
}
.ng-kanban__col-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ng-kanban__col-label {
    font-size: 12px;
    font-weight: 700;
    color: #001509;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex: 1;
}
.ng-kanban__col-count {
    font-size: 11px;
    font-weight: 700;
    background: #ffffff;
    color: #001509;
    padding: 2px 8px;
    border-radius: 999px;
}

.ng-kanban__col-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.ng-kanban__empty {
    text-align: center;
    font-size: 12px;
    color: #a0a6a0;
    padding: 16px 8px;
    font-style: italic;
}

/* Карточка заказа */
.ng-kanban__card {
    background: #ffffff;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.2s;
}
.ng-kanban__card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }

.ng-kanban__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.ng-kanban__card-num {
    font-size: 12px;
    font-weight: 700;
    color: #001509;
}
.ng-kanban__card-date {
    font-size: 10px;
    color: #59605c;
}

.ng-kanban__card-client {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ng-kanban__card-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1c1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ng-kanban__card-phone {
    font-size: 11px;
    color: #59605c;
}

.ng-kanban__card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid #f4f4f0;
}
.ng-kanban__card-city {
    font-size: 11px;
    color: #59605c;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ng-kanban__card-total {
    font-size: 14px;
    font-weight: 700;
    color: #001509;
}
.ng-kanban__card-total .woocommerce-Price-amount,
.ng-kanban__card-total bdi {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.ng-kanban__card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ng-kanban__card-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f4f4f0;
    color: #424843;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ng-kanban__card-chip .material-symbols-outlined { font-size: 12px !important; }

.ng-kanban__card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid #f4f4f0;
}
.ng-kanban__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #f4f4f0;
    color: #001509;
    border: 0;
    border-radius: 6px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.ng-kanban__btn:hover { background: #e2e3df; }
.ng-kanban__btn .material-symbols-outlined { font-size: 14px !important; }

.ng-kanban__btn--next {
    background: #122b1d;
    color: #ffffff;
    flex: 1;
}
.ng-kanban__btn--next:hover { background: #001509; }

.ng-kanban__btn--view {
    padding: 6px;
    background: #eeeeea;
}
.ng-kanban__btn--view:hover { background: #e2e3df; }

.ng-kanban__btn--cancel {
    padding: 6px;
    background: #ffdad6;
    color: #93000a;
}
.ng-kanban__btn--cancel:hover { background: #ffc9c4; }

.ng-kanban__more {
    text-align: center;
    font-size: 11px;
    color: #59605c;
    padding: 8px;
    font-weight: 600;
}

/* Модальное окно заказа */
.ng-order-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ng-order-modal.is-open { display: flex; }
.ng-order-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 21, 9, 0.5);
    backdrop-filter: blur(4px);
}
.ng-order-modal__dialog {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ng-order-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e8e8e4;
}
.ng-order-modal__header h2 {
    font-size: 20px;
    font-weight: 600;
    color: #001509;
    margin: 0;
}
.ng-order-modal__close {
    background: #f4f4f0;
    border: 0;
    border-radius: 8px;
    padding: 6px;
    cursor: pointer;
    color: #59605c;
    display: flex;
}
.ng-order-modal__close:hover { background: #e2e3df; color: #001509; }
.ng-order-modal__close .material-symbols-outlined { font-size: 20px !important; }

.ng-order-modal__body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}
.ng-order-modal__loading {
    text-align: center;
    padding: 40px 20px;
    color: #59605c;
    font-size: 14px;
}
.ng-order-modal__error {
    text-align: center;
    padding: 40px 20px;
    color: #ba1a1a;
    font-size: 14px;
}

/* Детали заказа внутри модального окна */
.ng-order-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ng-order-details__section h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8e8e4;
}
.ng-order-details__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 640px) {
    .ng-order-details__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
.ng-order-details__grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: #59605c;
}
.ng-order-details__grid > div strong {
    color: #001509;
    font-weight: 600;
    font-size: 14px;
}
.ng-order-details__address {
    margin-top: 12px;
    font-size: 13px;
    color: #59605c;
}
.ng-order-details__address > div {
    margin-top: 4px;
    color: #1a1c1a;
    font-weight: 500;
}
.ng-order-details__items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ng-order-details__item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px;
    background: #f4f4f0;
    border-radius: 8px;
}
.ng-order-details__item-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    flex-shrink: 0;
}
.ng-order-details__item-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ng-order-details__item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.ng-order-details__item-name {
    font-size: 13px;
    font-weight: 600;
    color: #001509;
}
.ng-order-details__item-meta {
    font-size: 11px;
    color: #59605c;
}
.ng-order-details__item-total {
    font-size: 14px;
    font-weight: 700;
    color: #001509;
    white-space: nowrap;
}
.ng-order-details__item-total .woocommerce-Price-amount,
.ng-order-details__item-total bdi {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.ng-order-details__footer {
    padding-top: 16px;
    border-top: 1px solid #e8e8e4;
    display: flex;
    justify-content: flex-end;
}
.ng-order-details__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #122b1d;
    color: #ffffff;
    border-radius: 8px;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}
.ng-order-details__btn:hover { background: #001509; }
.ng-order-details__btn .material-symbols-outlined { font-size: 16px !important; }
/* =====================================================================
   ЛК АДМИНИСТРАТОРА
   ===================================================================== */

.ng-admin {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 100vh;
    background: #faf9f6;
}
@media (min-width: 1024px) {
    .ng-admin { grid-template-columns: 280px 1fr; }
}

.ng-admin__sidebar {
    background: #f4f4f0;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    border-right: 1px solid #e8e8e4;
}
@media (min-width: 1024px) {
    .ng-admin__sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

.ng-admin__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
}
.ng-admin__brand-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: #122b1d;
    color: #ccead4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ng-admin__brand-icon .material-symbols-outlined { font-size: 20px !important; }
.ng-admin__brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ng-admin__brand-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
}
.ng-admin__brand-name {
    font-size: 16px;
    font-weight: 600;
    color: #001509;
}

.ng-admin__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.ng-admin__nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #424843;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}
.ng-admin__nav-item .material-symbols-outlined { font-size: 20px !important; }
.ng-admin__nav-item:hover { background: #eeeeea; color: #001509; }
.ng-admin__nav-item.is-active {
    background: #122b1d;
    color: #ffffff;
    font-weight: 600;
}

.ng-admin__footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ng-admin__storefront {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #e8e8e4;
    border-radius: 8px;
    text-decoration: none;
    color: #001509;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}
.ng-admin__storefront:hover { background: #e2e3df; }
.ng-admin__storefront .material-symbols-outlined { font-size: 18px !important; }
.ng-admin__storefront-arrow { margin-left: auto; font-size: 16px !important; }

.ng-admin__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid #e2e3df;
    padding-top: 16px;
}
.ng-admin__user-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #122b1d;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.ng-admin__user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ng-admin__user-name {
    font-size: 13px;
    font-weight: 600;
    color: #001509;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ng-admin__user-logout {
    font-size: 11px;
    color: #59605c;
    text-decoration: none;
}
.ng-admin__user-logout:hover { color: #ba1a1a; }

.ng-admin__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ng-admin__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 32px;
    background: #ffffff;
    border-bottom: 1px solid #e8e8e4;
    flex-wrap: wrap;
}
.ng-admin__header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ng-admin__header-title {
    font-size: 24px;
    font-weight: 500;
    color: #001509;
    margin: 0;
    letter-spacing: -0.01em;
}
.ng-admin__header-sub {
    font-size: 12px;
    color: #59605c;
    font-weight: 600;
}
.ng-admin__header-right {
    display: flex;
    gap: 8px;
}
.ng-admin__header-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f4f4f0;
    border-radius: 8px;
    text-decoration: none;
    color: #001509;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s;
}
.ng-admin__header-link:hover { background: #eeeeea; }
.ng-admin__header-link .material-symbols-outlined { font-size: 16px !important; }

.ng-admin__content {
    padding: 24px 32px 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (max-width: 767px) {
    .ng-admin__header { padding: 16px; }
    .ng-admin__content { padding: 16px; }
}

.ng-admin__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) { .ng-admin__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ng-admin__cards { grid-template-columns: repeat(4, 1fr); } }

.ng-admin__card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ng-admin__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.ng-admin__card-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
}
.ng-admin__card-head .material-symbols-outlined {
    font-size: 20px !important;
    color: #4a6453;
}
.ng-admin__card-value {
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    color: #001509;
    letter-spacing: -0.02em;
}
.ng-admin__card-value .woocommerce-Price-amount,
.ng-admin__card-value bdi {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.ng-admin__card-note {
    font-size: 11px;
    color: #59605c;
}

.ng-admin__placeholder {
    background: #ffffff;
    border-radius: 12px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.ng-admin__placeholder .material-symbols-outlined {
    font-size: 48px !important;
    color: #c2c8c1;
}
.ng-admin__placeholder h2 {
    font-size: 20px;
    font-weight: 500;
    color: #001509;
    margin: 0;
}
.ng-admin__placeholder p {
    font-size: 14px;
    color: #59605c;
    margin: 0;
    max-width: 500px;
    line-height: 1.5;
}
.ng-admin__placeholder-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #122b1d;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    transition: background 0.2s;
}
.ng-admin__placeholder-btn:hover { background: #001509; }

/* CRM заказов */
.ng-orders__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}
.ng-orders__filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}
.ng-orders__filter-group--grow { flex: 1; min-width: 200px; }
.ng-orders__filter-group label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
}
.ng-orders__filter-group select,
.ng-orders__filter-group input {
    background: #f4f4f0;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    color: #1a1c1a;
    outline: 0;
    transition: background 0.2s, border 0.2s;
}
.ng-orders__filter-group select:focus,
.ng-orders__filter-group input:focus {
    background: #ffffff;
    border-color: #122b1d;
}
.ng-orders__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #122b1d;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    align-self: flex-end;
    height: 40px;
}
.ng-orders__filter-btn:hover { background: #001509; }
.ng-orders__filter-btn .material-symbols-outlined { font-size: 16px !important; }
.ng-orders__filter-reset {
    font-size: 12px;
    font-weight: 600;
    color: #59605c;
    text-decoration: underline;
    align-self: flex-end;
    padding-bottom: 10px;
}
.ng-orders__filter-reset:hover { color: #001509; }

.ng-kanban {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}
@media (min-width: 1024px) {
    .ng-kanban {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow-x: auto;
        padding-bottom: 8px;
    }
}
@media (min-width: 1280px) {
    .ng-kanban { grid-template-columns: repeat(5, 1fr); }
}

.ng-kanban__column {
    background: #f4f4f0;
    border-radius: 12px;
    padding: 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
}

.ng-kanban__col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 8px;
    border-bottom: 1px solid #e2e3df;
}
.ng-kanban__col-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ng-kanban__col-label {
    font-size: 12px;
    font-weight: 700;
    color: #001509;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex: 1;
}
.ng-kanban__col-count {
    font-size: 11px;
    font-weight: 700;
    background: #ffffff;
    color: #001509;
    padding: 2px 8px;
    border-radius: 999px;
}

.ng-kanban__col-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.ng-kanban__empty {
    text-align: center;
    font-size: 12px;
    color: #a0a6a0;
    padding: 16px 8px;
    font-style: italic;
}

.ng-kanban__card {
    background: #ffffff;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.2s;
}
.ng-kanban__card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }

.ng-kanban__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.ng-kanban__card-num {
    font-size: 12px;
    font-weight: 700;
    color: #001509;
}
.ng-kanban__card-date {
    font-size: 10px;
    color: #59605c;
}

.ng-kanban__card-client {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ng-kanban__card-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1c1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ng-kanban__card-phone {
    font-size: 11px;
    color: #59605c;
}

.ng-kanban__card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid #f4f4f0;
}
.ng-kanban__card-city {
    font-size: 11px;
    color: #59605c;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ng-kanban__card-total {
    font-size: 14px;
    font-weight: 700;
    color: #001509;
}
.ng-kanban__card-total .woocommerce-Price-amount,
.ng-kanban__card-total bdi {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.ng-kanban__card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ng-kanban__card-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f4f4f0;
    color: #424843;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ng-kanban__card-chip .material-symbols-outlined { font-size: 12px !important; }

.ng-kanban__card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid #f4f4f0;
}
.ng-kanban__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #f4f4f0;
    color: #001509;
    border: 0;
    border-radius: 6px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.ng-kanban__btn:hover { background: #e2e3df; }
.ng-kanban__btn .material-symbols-outlined { font-size: 14px !important; }

.ng-kanban__btn--next {
    background: #122b1d;
    color: #ffffff;
    flex: 1;
}
.ng-kanban__btn--next:hover { background: #001509; }

.ng-kanban__btn--view {
    padding: 6px;
    background: #eeeeea;
}
.ng-kanban__btn--view:hover { background: #e2e3df; }

.ng-kanban__btn--cancel {
    padding: 6px;
    background: #ffdad6;
    color: #93000a;
}
.ng-kanban__btn--cancel:hover { background: #ffc9c4; }

.ng-kanban__more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: #ffffff;
    color: #001509;
    border: 1px dashed #c2c8c1;
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.ng-kanban__more-btn:hover:not(:disabled) {
    background: #eeeeea;
    border-color: #122b1d;
}
.ng-kanban__more-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.ng-kanban__more-btn .material-symbols-outlined {
    font-size: 16px !important;
}

.ng-order-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ng-order-modal.is-open { display: flex; }
.ng-order-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 21, 9, 0.5);
    backdrop-filter: blur(4px);
}
.ng-order-modal__dialog {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ng-order-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e8e8e4;
}
.ng-order-modal__header h2 {
    font-size: 20px;
    font-weight: 600;
    color: #001509;
    margin: 0;
}
.ng-order-modal__close {
    background: #f4f4f0;
    border: 0;
    border-radius: 8px;
    padding: 6px;
    cursor: pointer;
    color: #59605c;
    display: flex;
}
.ng-order-modal__close:hover { background: #e2e3df; color: #001509; }
.ng-order-modal__close .material-symbols-outlined { font-size: 20px !important; }

.ng-order-modal__body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}
.ng-order-modal__loading {
    text-align: center;
    padding: 40px 20px;
    color: #59605c;
    font-size: 14px;
}
.ng-order-modal__error {
    text-align: center;
    padding: 40px 20px;
    color: #ba1a1a;
    font-size: 14px;
}

.ng-order-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ng-order-details__section h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8e8e4;
}
.ng-order-details__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 640px) {
    .ng-order-details__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
.ng-order-details__grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: #59605c;
}
.ng-order-details__grid > div strong {
    color: #001509;
    font-weight: 600;
    font-size: 14px;
}
.ng-order-details__address {
    margin-top: 12px;
    font-size: 13px;
    color: #59605c;
}
.ng-order-details__address > div {
    margin-top: 4px;
    color: #1a1c1a;
    font-weight: 500;
}
.ng-order-details__items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ng-order-details__item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px;
    background: #f4f4f0;
    border-radius: 8px;
}
.ng-order-details__item-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    flex-shrink: 0;
}
.ng-order-details__item-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ng-order-details__item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.ng-order-details__item-name {
    font-size: 13px;
    font-weight: 600;
    color: #001509;
}
.ng-order-details__item-meta {
    font-size: 11px;
    color: #59605c;
}
.ng-order-details__item-total {
    font-size: 14px;
    font-weight: 700;
    color: #001509;
    white-space: nowrap;
}
.ng-order-details__item-total .woocommerce-Price-amount,
.ng-order-details__item-total bdi {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.ng-order-details__footer {
    padding-top: 16px;
    border-top: 1px solid #e8e8e4;
    display: flex;
    justify-content: flex-end;
}
.ng-order-details__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #122b1d;
    color: #ffffff;
    border-radius: 8px;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}
.ng-order-details__btn:hover { background: #001509; }
.ng-order-details__btn .material-symbols-outlined { font-size: 16px !important; }
/* Кнопка «Показать ещё» в колонке канбана */
.ng-kanban__more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: #ffffff;
    color: #001509;
    border: 1px dashed #c2c8c1;
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.ng-kanban__more-btn:hover:not(:disabled) {
    background: #eeeeea;
    border-color: #122b2d;
}
.ng-kanban__more-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.ng-kanban__more-btn .material-symbols-outlined {
    font-size: 16px !important;
}
/* =====================================================================
   CRM КЛИЕНТОВ — кнопка, прогресс-бар
   ===================================================================== */

.ng-customers {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ng-customers__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.ng-customers__info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ng-customers__stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #001509;
}
.ng-customers__stat .material-symbols-outlined {
    font-size: 20px !important;
    color: #4a6453;
}
.ng-customers__stat strong {
    font-weight: 700;
}
.ng-customers__stat--soft {
    font-size: 12px;
    color: #59605c;
    font-weight: 400;
}
.ng-customers__stat--empty {
    color: #727973;
    font-style: italic;
}

.ng-customers__actions {
    display: flex;
    gap: 8px;
}

.ng-customers__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}
.ng-customers__btn .material-symbols-outlined {
    font-size: 18px !important;
}
.ng-customers__btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.ng-customers__btn--primary {
    background: #122b1d;
    color: #ffffff;
}
.ng-customers__btn--primary:hover:not(:disabled) {
    background: #001509;
}
.ng-customers__btn--ghost {
    background: #f4f4f0;
    color: #59605c;
}
.ng-customers__btn--ghost:hover {
    background: #e8e8e4;
}

.ng-customers__progress {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ng-customers__progress-bar {
    width: 100%;
    height: 10px;
    background: #eeeeea;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}
.ng-customers__progress-fill {
    height: 100%;
    background: #122b1d;
    border-radius: 999px;
    transition: width 0.3s ease-out;
}
.ng-customers__progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #59605c;
}
.ng-customers__progress-info strong {
    color: #001509;
    font-weight: 700;
}

.ng-customers__placeholder {
    background: #ffffff;
    border-radius: 12px;
    padding: 48px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ng-customers__placeholder .material-symbols-outlined {
    font-size: 48px !important;
    color: #c2c8c1;
}
.ng-customers__placeholder h3 {
    font-size: 18px;
    font-weight: 500;
    color: #001509;
    margin: 0;
}
.ng-customers__placeholder p {
    font-size: 13px;
    line-height: 1.5;
    color: #59605c;
    margin: 0;
    max-width: 500px;
}
/* =====================================================================
   CRM КЛИЕНТОВ — таблица, фильтры, пагинация, модалка
   ===================================================================== */

/* Фильтры */
.ng-customers__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ng-customers__filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}
.ng-customers__filter-group--grow { flex: 1; min-width: 240px; }
.ng-customers__filter-group label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
}
.ng-customers__filter-group select,
.ng-customers__filter-group input {
    background: #f4f4f0;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    color: #1a1c1a;
    outline: 0;
    transition: background 0.2s, border 0.2s;
}
.ng-customers__filter-group select:focus,
.ng-customers__filter-group input:focus {
    background: #ffffff;
    border-color: #122b1d;
}
.ng-customers__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #122b1d;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 40px;
    transition: background 0.2s;
}
.ng-customers__filter-btn:hover { background: #001509; }
.ng-customers__filter-btn .material-symbols-outlined { font-size: 16px !important; }
.ng-customers__filter-reset {
    font-size: 12px;
    font-weight: 600;
    color: #59605c;
    text-decoration: underline;
    padding-bottom: 10px;
}
.ng-customers__filter-reset:hover { color: #001509; }

.ng-customers__result-info {
    font-size: 13px;
    color: #59605c;
    padding: 0 4px;
}
.ng-customers__result-info strong {
    color: #001509;
    font-weight: 700;
}

/* Таблица */
.ng-customers__table-wrap {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ng-customers__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ng-customers__table thead th {
    background: #f4f4f0;
    padding: 14px 16px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
    border-bottom: 1px solid #e8e8e4;
    white-space: nowrap;
}
.ng-customers__table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f4f4f0;
    vertical-align: middle;
    color: #1a1c1a;
}
.ng-customers__table tbody tr:last-child td {
    border-bottom: 0;
}
.ng-customers__table tbody tr:hover {
    background: #faf9f6;
}
.ng-customers__col-num {
    text-align: right !important;
    white-space: nowrap;
}

.ng-customers__name {
    display: block;
    font-weight: 600;
    color: #001509;
}
.ng-customers__phone {
    display: block;
    font-size: 12px;
    color: #59605c;
    margin-top: 2px;
}
.ng-customers__email {
    font-size: 13px;
    color: #424843;
}
.ng-customers__city {
    font-size: 13px;
    color: #424843;
}
.ng-customers__orders-count {
    font-weight: 700;
    color: #001509;
}
.ng-customers__sum {
    font-weight: 700;
    color: #001509;
}
.ng-customers__sum .woocommerce-Price-amount,
.ng-customers__sum bdi {
    font-weight: inherit;
    color: inherit;
}
.ng-customers__date {
    font-size: 13px;
    color: #59605c;
    white-space: nowrap;
}
.ng-customers__view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: #f4f4f0;
    color: #001509;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.ng-customers__view-btn:hover { background: #e2e3df; }
.ng-customers__view-btn .material-symbols-outlined { font-size: 16px !important; }

/* Пагинация */
.ng-customers__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 8px;
}
.ng-customers__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid #e8e8e4;
    border-radius: 8px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    color: #1a1c1a;
    transition: all 0.2s;
}
.ng-customers__pagination .page-numbers:hover {
    border-color: #122b1d;
    color: #122b1d;
}
.ng-customers__pagination .page-numbers.current {
    background: #122b1d;
    color: #ffffff;
    border-color: #122b1d;
}
.ng-customers__pagination .page-numbers.dots {
    border: 0;
    background: transparent;
    min-width: 24px;
}

/* Модалка клиента */
.ng-customer-orders {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ng-customer-orders__info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: #f4f4f0;
    border-radius: 10px;
    padding: 16px;
}
@media (min-width: 640px) {
    .ng-customer-orders__info { grid-template-columns: repeat(3, 1fr); }
}
.ng-customer-orders__info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ng-customer-orders__info-item span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #59605c;
}
.ng-customer-orders__info-item strong {
    font-size: 14px;
    color: #001509;
    font-weight: 600;
}
.ng-customer-orders__info-item strong .woocommerce-Price-amount,
.ng-customer-orders__info-item strong bdi {
    font-weight: inherit;
    color: inherit;
}
.ng-customer-orders__section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8e8e4;
}
.ng-customer-orders__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ng-customer-orders__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #e8e8e4;
    border-radius: 8px;
}
.ng-customer-orders__item-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ng-customer-orders__item-num {
    font-weight: 700;
    color: #001509;
    font-size: 13px;
}
.ng-customer-orders__item-date {
    font-size: 11px;
    color: #59605c;
}
.ng-customer-orders__item-mid {
    flex: 1;
    display: flex;
    justify-content: center;
}
.ng-customer-orders__item-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #f4f4f0;
    color: #424843;
}
.ng-customer-orders__item-status.ng-status--completed {
    background: #ccead4;
    color: #072013;
}
.ng-customer-orders__item-status.ng-status--processing {
    background: #ccead4;
    color: #072013;
}
.ng-customer-orders__item-status.ng-status--pending {
    background: #ffdbc7;
    color: #421b00;
}
.ng-customer-orders__item-status.ng-status--on-hold {
    background: #eeeeea;
    color: #424843;
}
.ng-customer-orders__item-status.ng-status--cancelled {
    background: #ffdad6;
    color: #93000a;
}
.ng-customer-orders__item-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.ng-customer-orders__item-total {
    font-weight: 700;
    color: #001509;
    font-size: 14px;
    white-space: nowrap;
}
.ng-customer-orders__item-total .woocommerce-Price-amount,
.ng-customer-orders__item-total bdi {
    font-weight: inherit;
    color: inherit;
}
.ng-customer-orders__item-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f4f4f0;
    color: #122b1d;
    text-decoration: none;
    transition: background 0.2s;
}
.ng-customer-orders__item-link:hover { background: #e2e3df; }
.ng-customer-orders__item-link .material-symbols-outlined { font-size: 14px !important; }
.ng-customer-orders__empty {
    padding: 32px;
    text-align: center;
    color: #59605c;
    font-style: italic;
}
.ng-customer-orders__note {
    font-size: 12px;
    color: #59605c;
    font-style: italic;
    text-align: center;
}
/* =====================================================================
   ФИНАЛЬНАЯ ФИКСАЦИЯ — перебивает дубли и опечатки выше по файлу.
   ===================================================================== */

/* Канбан: 6 колонок на десктопе */
@media (min-width: 1024px) {
    .ng-kanban {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1280px) {
    .ng-kanban {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* Кнопка «Показать ещё» — правильный цвет при наведении */
.ng-kanban__more-btn:hover:not(:disabled) {
    background: #eeeeea !important;
    border-color: #122b1d !important;
}

/* Бейдж статуса «Готов к отправке» в модалке клиента */
.ng-customer-orders__item-status.ng-status--ready {
    background: #d6e4f0 !important;
    color: #1d3a54 !important;
}
/* Кнопки в карточке — в одну строку, не переносятся */
.ng-kanban__card-actions {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
}

/* Кнопка «Готов к отправке» / «В работу» / «Завершить» — растягивается */
.ng-kanban__btn--next {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 6px 8px !important;
}

/* Кнопка «Отменить» (крестик) — фиксированный размер */
.ng-kanban__btn--cancel {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
    padding: 6px !important;
}

/* Кнопка «Показать подробнее» (глаз) — фиксированный размер */
.ng-kanban__btn--view {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
    padding: 6px !important;
}
/* Карточка в канбане — компактнее */
.ng-kanban__card {
    padding: 10px !important;
    gap: 6px !important;
}

/* Имя клиента и телефон */
.ng-kanban__card-name {
    font-size: 12px !important;
    line-height: 16px !important;
}
.ng-kanban__card-phone {
    font-size: 10px !important;
    line-height: 14px !important;
}

/* Город и сумма — в одну строку */
.ng-kanban__card-meta {
    flex-wrap: nowrap !important;
    gap: 6px !important;
}
.ng-kanban__card-city {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
.ng-kanban__card-total {
    font-size: 13px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

/* Чипы «Доставка по Крыму» / «Оплата при доставке» — компактнее */
.ng-kanban__card-chip {
    font-size: 9px !important;
    padding: 2px 6px !important;
}

/* Номер заказа и дата — компактнее */
.ng-kanban__card-num {
    font-size: 11px !important;
}
.ng-kanban__card-date {
    font-size: 9px !important;
}
/* 6 колонок — не сжимаем сильнее 240px */
@media (min-width: 1024px) {
    .ng-kanban {
        grid-template-columns: repeat(6, minmax(240px, 1fr)) !important;
    }
}
/* =====================================================================
   КАНБАН: финальная фиксация карточек. Перебивает всё, что было выше.
   Дописано последним блоком.
   ===================================================================== */

/* Канбан: 6 колонок, минимум 260px, скролл по горизонтали */
.ng-kanban {
    overflow-x: auto !important;
    padding-bottom: 12px !important;
}
@media (min-width: 1024px) {
    .ng-kanban {
        grid-template-columns: repeat(6, minmax(260px, 1fr)) !important;
    }
}
@media (min-width: 1280px) {
    .ng-kanban {
        grid-template-columns: repeat(6, minmax(260px, 1fr)) !important;
    }
}

/* Карточка — компактная, ничего не вылезает */
.ng-kanban__card {
    padding: 10px !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Номер заказа и дата — компактнее */
.ng-kanban__card-num {
    font-size: 11px !important;
    line-height: 14px !important;
}
.ng-kanban__card-date {
    font-size: 9px !important;
    line-height: 12px !important;
}

/* Имя клиента и телефон */
.ng-kanban__card-client {
    min-width: 0 !important;
}
.ng-kanban__card-name {
    font-size: 12px !important;
    line-height: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.ng-kanban__card-phone {
    font-size: 10px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Город и сумма — в одну строку, сумма не вылезает */
.ng-kanban__card-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.ng-kanban__card-city {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 10px !important;
    line-height: 14px !important;
    font-weight: 600 !important;
    color: #59605c !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.ng-kanban__card-total {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    color: #001509 !important;
    white-space: nowrap !important;
}
.ng-kanban__card-total .woocommerce-Price-amount,
.ng-kanban__card-total bdi {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* Чипы — компактные, с обрезкой */
.ng-kanban__card-details {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    min-width: 0 !important;
}
.ng-kanban__card-chip {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
}
.ng-kanban__card-chip .material-symbols-outlined {
    font-size: 11px !important;
    flex-shrink: 0 !important;
}

/* Кнопки в карточке: строка 1 = «глаз», строка 2 = «действие» + «крестик» */
.ng-kanban__card-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding-top: 8px !important;
    border-top: 1px solid #f4f4f0 !important;
    align-items: center !important;
    min-width: 0 !important;
}
.ng-kanban__card-actions .ng-kanban__btn--view {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 1 !important;
}
.ng-kanban__card-actions .ng-kanban__btn--next {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 2 !important;
}
.ng-kanban__card-actions .ng-kanban__btn--cancel {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 3 !important;
}
.ng-kanban__card-actions .ng-kanban__btn--view .material-symbols-outlined,
.ng-kanban__card-actions .ng-kanban__btn--cancel .material-symbols-outlined {
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Бейдж статуса «Готов к отправке» в модалке клиента */
.ng-customer-orders__item-status.ng-status--ready {
    background: #d6e4f0 !important;
    color: #1d3a54 !important;
}
/* =====================================================================
   КАНБАН: горизонтальный скролл. Перебивает всё, что было выше.
   ===================================================================== */

/* Контейнер контента не должен обрезать скролл канбана */
.ng-admin__main,
.ng-admin__content {
    min-width: 0 !important;
    overflow: visible !important;
}

/* Сам канбан — горизонтальный скролл, если колонки не влезают */
.ng-kanban {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(260px, 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 16px !important;
    /* Визуальная подсказка, что есть скролл */
    scrollbar-width: thin;
    scrollbar-color: #c2c8c1 #f4f4f0;
}

/* Стилизация скроллбара в Chrome/Safari/Edge */
.ng-kanban::-webkit-scrollbar {
    height: 8px;
}
.ng-kanban::-webkit-scrollbar-track {
    background: #f4f4f0;
    border-radius: 4px;
}
.ng-kanban::-webkit-scrollbar-thumb {
    background: #c2c8c1;
    border-radius: 4px;
}
.ng-kanban::-webkit-scrollbar-thumb:hover {
    background: #a0a6a0;
}

/* На мобильных канбан — одна колонка, скролл не нужен */
@media (max-width: 1023px) {
    .ng-kanban {
        grid-template-columns: 1fr !important;
        overflow-x: visible !important;
    }
}
/* =====================================================================
   ЛК: кнопка «Свернуть боковое меню»
   ===================================================================== */

/* Кнопка в шапке */
.ng-admin__header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.ng-admin__sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f4f4f0;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    color: #001509;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s;
}
.ng-admin__sidebar-toggle:hover {
    background: #eeeeea;
}
.ng-admin__sidebar-toggle .material-symbols-outlined {
    font-size: 20px !important;
}

/* Свёрнутый режим */
@media (min-width: 1024px) {
    .ng-admin {
        transition: grid-template-columns 0.2s ease;
    }
    .ng-admin.ng-admin--collapsed {
        grid-template-columns: 72px 1fr !important;
    }
    .ng-admin.ng-admin--collapsed .ng-admin__sidebar {
        padding: 24px 8px !important;
    }
    .ng-admin.ng-admin--collapsed .ng-admin__brand {
        justify-content: center !important;
        padding: 0 !important;
    }
    .ng-admin.ng-admin--collapsed .ng-admin__brand-text {
        display: none !important;
    }
    .ng-admin.ng-admin--collapsed .ng-admin__nav-item {
        justify-content: center !important;
        padding: 10px 8px !important;
        gap: 0 !important;
    }
    .ng-admin.ng-admin--collapsed .ng-admin__nav-item > span:not(.material-symbols-outlined) {
        display: none !important;
    }
    .ng-admin.ng-admin--collapsed .ng-admin__storefront > span:not(.material-symbols-outlined) {
        display: none !important;
    }
    .ng-admin.ng-admin--collapsed .ng-admin__storefront {
        justify-content: center !important;
        padding: 10px 8px !important;
    }
    .ng-admin.ng-admin--collapsed .ng-admin__storefront-arrow {
        display: none !important;
    }
    .ng-admin.ng-admin--collapsed .ng-admin__user {
        justify-content: center !important;
        padding: 16px 0 8px !important;
    }
    .ng-admin.ng-admin--collapsed .ng-admin__user-info {
        display: none !important;
    }
}

/* На мобильных кнопки нет — меню всегда полное */
@media (max-width: 1023px) {
    .ng-admin__sidebar-toggle {
        display: none !important;
    }
}
/* =====================================================================
   ФИКС: горизонтальный скролл канбана + панель прокрутки ‹ ›
   Дописано в конец. Ничего выше не удаляет, только уточняет.
   ===================================================================== */

/* 1. Оболочка ЛК: колонка main не должна растягиваться шире вьюпорта */
.ng-admin {
    min-width: 0;
}
.ng-admin__main,
.ng-admin__content {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* 2. Сам канбан: фиксированная ширина колонок + внутренний скролл.
      ВАЖНО: grid-template-columns с repeat(6, 260px) — колонки
      ровно 260px, а не 1fr. Тогда overflow-x работает как надо. */
.ng-kanban {
    display: grid !important;
    grid-template-columns: repeat(6, 260px) !important;
    gap: 16px !important;
    align-items: start !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 16px !important;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #c2c8c1 #f4f4f0;
    -webkit-overflow-scrolling: touch;
}

.ng-kanban::-webkit-scrollbar { height: 8px; }
.ng-kanban::-webkit-scrollbar-track { background: #f4f4f0; border-radius: 4px; }
.ng-kanban::-webkit-scrollbar-thumb { background: #c2c8c1; border-radius: 4px; }
.ng-kanban::-webkit-scrollbar-thumb:hover { background: #a0a6a0; }

/* Колонки не сжимаются — держат 260px */
.ng-kanban__column {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    box-sizing: border-box !important;
}

/* 3. На планшете/мобильном — одна колонка, скролл не нужен */
@media (max-width: 1023px) {
    .ng-kanban {
        grid-template-columns: 1fr !important;
        overflow-x: visible !important;
    }
    .ng-kanban__column {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* 4. Панель прокрутки ‹ › над канбаном */
.ng-kanban-scroll-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 12px;
    margin-bottom: 4px;
}
.ng-kanban-scroll-bar__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #59605c;
}
.ng-kanban-scroll-bar__hint .material-symbols-outlined {
    font-size: 18px !important;
    color: #4a6453;
}
.ng-kanban-scroll-bar__btns {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}
.ng-kanban-scroll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #e3e8e4;
    background: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    color: #001509;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.ng-kanban-scroll-btn:hover:not(:disabled) {
    background: #f4f4f0;
    border-color: #c2c8c1;
}
.ng-kanban-scroll-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.ng-kanban-scroll-btn .material-symbols-outlined {
    font-size: 20px !important;
}

/* На мобильных панель прокрутки не нужна */
@media (max-width: 1023px) {
    .ng-kanban-scroll-bar { display: none !important; }
}
/* =====================================================================
   ЛК: Логистика — редактор городов и цен «Курьера по Крыму»
   Дописано в конец. Ничего выше не перебивает.
   ===================================================================== */

.ng-cities {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ng-cities__head-text h2 {
    font-size: 20px;
    font-weight: 500;
    color: #001509;
    margin: 0 0 6px;
}
.ng-cities__head-text p {
    font-size: 13px;
    line-height: 1.5;
    color: #59605c;
    margin: 0;
    max-width: 720px;
}

.ng-cities__editor {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ng-cities__table-wrap {
    width: 100%;
    overflow-x: auto;
}

.ng-cities__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ng-cities__table thead th {
    background: #f4f4f0;
    padding: 10px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
    border-bottom: 1px solid #e8e8e4;
    white-space: nowrap;
}
.ng-cities__table tbody td {
    padding: 8px 14px;
    border-bottom: 1px solid #f4f4f0;
    vertical-align: middle;
}
.ng-cities__table tbody tr:last-child td {
    border-bottom: 0;
}
.ng-cities__col-price,
.ng-cities__col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.ng-cities__empty-row td {
    text-align: center;
    padding: 24px 14px;
    color: #59605c;
    font-style: italic;
}

.ng-cities__input {
    width: 100%;
    background: #f4f4f0;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    color: #1a1c1a;
    outline: 0;
    transition: background 0.2s, border-color 0.2s;
    box-sizing: border-box;
}
.ng-cities__input:focus {
    background: #ffffff;
    border-color: #122b1d;
}
.ng-cities__input--name { min-width: 200px; }
.ng-cities__input--price {
    max-width: 140px;
    text-align: right;
    margin-left: auto;
    display: block;
}

.ng-cities__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: #ffdad6;
    color: #93000a;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}
.ng-cities__remove:hover { background: #ffc9c4; }
.ng-cities__remove .material-symbols-outlined { font-size: 16px !important; }

.ng-cities__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.ng-cities__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}
.ng-cities__btn .material-symbols-outlined { font-size: 18px !important; }
.ng-cities__btn:disabled { opacity: 0.6; cursor: wait; }
.ng-cities__btn--primary {
    background: #122b1d;
    color: #ffffff;
}
.ng-cities__btn--primary:hover:not(:disabled) { background: #001509; }
.ng-cities__btn--ghost {
    background: #f4f4f0;
    color: #001509;
}
.ng-cities__btn--ghost:hover:not(:disabled) { background: #eeeeea; }

.ng-cities__status {
    min-height: 18px;
    font-size: 12px;
    font-weight: 600;
}
.ng-cities__status.is-success { color: #122b1d; }
.ng-cities__status.is-error   { color: #ba1a1a; }
/* =====================================================================
   ЛК: Логистика — вкладки + карточки печати
   Дописано в конец. Ничего выше не перебивает.
   ===================================================================== */

.ng-logistics {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Вкладки */
.ng-logistics__tabs {
    display: flex;
    gap: 6px;
    background: #f4f4f0;
    padding: 6px;
    border-radius: 12px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}
.ng-logistics__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #424843;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.ng-logistics__tab .material-symbols-outlined {
    font-size: 18px !important;
}
.ng-logistics__tab:hover {
    background: #eeeeea;
    color: #001509;
}
.ng-logistics__tab.is-active {
    background: #122b1d;
    color: #ffffff;
}
.ng-logistics__tab.is-active .material-symbols-outlined {
    color: #ffffff;
}

/* Карточки печати */
.ng-print {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ng-print__head h2 {
    font-size: 20px;
    font-weight: 500;
    color: #001509;
    margin: 0 0 6px;
}
.ng-print__head p {
    font-size: 13px;
    line-height: 1.5;
    color: #59605c;
    margin: 0;
    max-width: 720px;
}
.ng-print__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 768px) {
    .ng-print__cards { grid-template-columns: repeat(2, 1fr); }
}
.ng-print__card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}
.ng-print__card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
.ng-print__card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #ccead4;
    color: #122b1d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ng-print__card-icon .material-symbols-outlined {
    font-size: 24px !important;
}
.ng-print__card-text {
    flex: 1;
    min-width: 0;
}
.ng-print__card-text h3 {
    font-size: 15px;
    font-weight: 600;
    color: #001509;
    margin: 0 0 4px;
}
.ng-print__card-text p {
    font-size: 12px;
    line-height: 1.5;
    color: #59605c;
    margin: 0;
}
.ng-print__card-arrow {
    font-size: 20px !important;
    color: #59605c;
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
}
.ng-print__card:hover .ng-print__card-arrow {
    color: #122b1d;
    transform: translateX(2px);
}
/* =====================================================================
   ЛК: Логистика — сводка по городам + Почта России
   Дописано в конец. Ничего выше не перебивает.
   ===================================================================== */

/* Колонка «Готовы к отправке» в таблице городов */
.ng-cities__col-ready {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.ng-cities__ready-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ccead4;
    color: #122b1d;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: background 0.2s;
}
.ng-cities__ready-link:hover {
    background: #b1cdb9;
}
.ng-cities__ready-link .material-symbols-outlined {
    font-size: 16px !important;
}
.ng-cities__ready-count {
    font-size: 13px;
}
.ng-cities__ready-empty {
    color: #a0a6a0;
    font-size: 13px;
}

/* Блок «Почта России» под таблицей городов */
.ng-post-summary {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ng-post-summary__head h3 {
    font-size: 16px;
    font-weight: 600;
    color: #001509;
    margin: 0 0 4px;
}
.ng-post-summary__head p {
    font-size: 13px;
    line-height: 1.5;
    color: #59605c;
    margin: 0;
    max-width: 720px;
}
.ng-post-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ng-post-summary__count {
    font-size: 14px;
    color: #424843;
}
.ng-post-summary__count strong {
    color: #001509;
    font-weight: 700;
}
/* =====================================================================
   ЛК: Настройки — вкладка «Яндекс.Карты»
   ===================================================================== */

.ng-settings {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ng-yandex-keys {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 880px;
}

.ng-yandex-keys__head h2 {
    font-size: 20px;
    font-weight: 500;
    color: #001509;
    margin: 0 0 8px;
}
.ng-yandex-keys__head p {
    font-size: 13px;
    line-height: 1.6;
    color: #59605c;
    margin: 0 0 8px;
}
.ng-yandex-keys__head code {
    background: #f4f4f0;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #122b1d;
}

.ng-yandex-keys__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ng-yandex-keys__field > label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #424843;
}
.ng-yandex-keys__field small {
    font-size: 11px;
    color: #727973;
    line-height: 1.5;
}

.ng-yandex-keys__input-wrap {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.ng-yandex-keys__input {
    flex: 1;
    background: #f4f4f0;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Plus Jakarta Sans', monospace;
    font-size: 13px;
    color: #1a1c1a;
    outline: 0;
    transition: background 0.2s, border-color 0.2s;
}
.ng-yandex-keys__input:focus {
    background: #ffffff;
    border-color: #122b1d;
}
.ng-yandex-keys__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: auto;
    background: #f4f4f0;
    border: 0;
    border-radius: 8px;
    color: #59605c;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}
.ng-yandex-keys__toggle:hover {
    background: #eeeeea;
    color: #001509;
}
.ng-yandex-keys__toggle .material-symbols-outlined {
    font-size: 20px !important;
}

.ng-yandex-keys__field--checkbox {
    padding-top: 8px;
    border-top: 1px solid #f4f4f0;
    margin-top: 4px;
}
.ng-yandex-keys__checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #001509;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.ng-yandex-keys__checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #122b1d;
    cursor: pointer;
}

.ng-yandex-keys__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid #f4f4f0;
}

.ng-yandex-keys__status {
    min-height: 18px;
    font-size: 12px;
    font-weight: 600;
}
.ng-yandex-keys__status.is-success { color: #122b1d; }
.ng-yandex-keys__status.is-error   { color: #ba1a1a; }

.ng-yandex-keys__results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #f4f4f0;
    border-radius: 8px;
}
.ng-yandex-keys__result {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #424843;
}
.ng-yandex-keys__result-icon {
    font-size: 18px !important;
}
.ng-yandex-keys__result.is-ok .ng-yandex-keys__result-icon { color: #122b1d; }
.ng-yandex-keys__result.is-error .ng-yandex-keys__result-icon { color: #ba1a1a; }
.ng-yandex-keys__result-label {
    font-weight: 600;
    color: #001509;
    min-width: 130px;
}
/* =====================================================================
   ЧЕК-АУТ: блок с картой Яндекс
   ===================================================================== */

.ng-checkout-with-map {
    max-width: 88rem;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

@media (min-width: 1024px) {
    .ng-checkout-with-map { padding: 32px 40px 80px; }
}

.ng-checkout-map-block {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}

.ng-checkout-map-title {
    font-size: 18px;
    font-weight: 500;
    color: #001509;
    margin: 0 0 6px;
}

.ng-checkout-map-hint {
    font-size: 13px;
    line-height: 1.5;
    color: #59605c;
    margin: 0 0 16px;
}

.ng-checkout-map-geo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f4f4f0;
    color: #001509;
    border: 0;
    border-radius: 8px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
    transition: background 0.2s;
}
.ng-checkout-map-geo-btn:hover:not(:disabled) {
    background: #eeeeea;
}
.ng-checkout-map-geo-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.ng-checkout-map-geo-btn .material-symbols-outlined {
    font-size: 18px !important;
}

.ng-checkout-map {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    background: #f4f4f0;
}

@media (max-width: 767px) {
    .ng-checkout-map { height: 300px; }
}

/* Выпадашка подсказок Яндекс */
.ng-address-suggest {
    /* Яндекс создаёт свою выпадашку, но если понадобится — стили здесь */
}
/* ===== Модальное окно авторизации (ng-auth) ===== */
.ng-auth-overlay{
	position:fixed;inset:0;z-index:99999;
	background:rgba(20,30,24,.55);
	display:flex;align-items:center;justify-content:center;
	padding:16px;overflow-y:auto;
}
.ng-auth-overlay[hidden]{display:none;}
.ng-auth-modal{
	position:relative;width:100%;max-width:460px;
	background:#fff;border-radius:16px;
	padding:28px 24px 24px;
	box-shadow:0 24px 64px rgba(0,0,0,.25);
	max-height:calc(100vh - 32px);overflow-y:auto;
}
.ng-auth-close{
	position:absolute;top:12px;right:12px;
	width:36px;height:36px;border:0;border-radius:50%;
	background:#f2f4f1;color:#333;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
}
.ng-auth-close:hover{background:#e6e9e4;}
.ng-auth-head{margin-bottom:16px;}
.ng-auth-brand{display:flex;align-items:center;gap:8px;}
.ng-auth-brand-badge{
	display:inline-flex;align-items:center;justify-content:center;
	width:28px;height:28px;border-radius:50%;
	background:#122b1d;color:#fff;font-size:10px;font-weight:600;letter-spacing:.04em;
}
.ng-auth-brand-text{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#59605c;}
.ng-auth-tabs{
	display:flex;gap:4px;background:#f2f4f1;border-radius:999px;padding:4px;margin-bottom:20px;
}
.ng-auth-tab{
	flex:1;padding:10px 12px;border:0;border-radius:999px;background:transparent;
	font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
	color:#59605c;cursor:pointer;transition:.2s;
}
.ng-auth-tab.is-active{background:#122b1d;color:#fff;}
.ng-auth-panel[hidden]{display:none;}
.ng-auth-title{margin:0 0 6px;font-size:22px;line-height:1.25;color:#122b1d;}
.ng-auth-sub{margin:0 0 18px;font-size:14px;line-height:1.5;color:#59605c;}
.ng-auth-form{display:flex;flex-direction:column;gap:14px;}
.ng-auth-field{display:flex;flex-direction:column;gap:6px;}
.ng-auth-label{font-size:13px;font-weight:600;color:#122b1d;}
.ng-auth-label-row{display:flex;align-items:center;justify-content:space-between;}
.ng-auth-form input[type="email"],
.ng-auth-form input[type="password"],
.ng-auth-form input[type="text"]{
	width:100%;height:46px;padding:0 14px;border:1px solid #d6dad4;border-radius:10px;
	background:#f8f9f7;font-size:15px;color:#122b1d;box-sizing:border-box;
	transition:.2s;
}
.ng-auth-form input:focus{outline:none;border-color:#122b1d;background:#fff;}
.ng-auth-pass-wrap{position:relative;display:block;}
.ng-auth-pass-wrap input{padding-right:44px;}
.ng-auth-eye{
	position:absolute;top:50%;right:8px;transform:translateY(-50%);
	width:32px;height:32px;border:0;background:transparent;cursor:pointer;
	font-size:16px;color:#59605c;
}
.ng-auth-link{
	border:0;background:transparent;color:#4a6453;font-size:12px;
	cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0;
}
.ng-auth-link:hover{color:#122b1d;}
.ng-auth-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#3a423d;cursor:pointer;}
.ng-auth-check-top{align-items:flex-start;}
.ng-auth-check input{width:16px;height:16px;margin:0;accent-color:#122b1d;cursor:pointer;}
.ng-auth-check-top input{margin-top:2px;}
.ng-auth-check a{color:#4a6453;text-decoration:underline;text-underline-offset:2px;}
.ng-auth-submit{
	height:48px;border:0;border-radius:10px;background:#122b1d;color:#fff;
	font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
	cursor:pointer;transition:.2s;
}
.ng-auth-submit:hover{background:#1b3f2b;}
.ng-auth-submit:disabled{opacity:.6;cursor:default;}
.ng-auth-msg{
	padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.45;
}
.ng-auth-msg.is-error{background:#ffdad6;color:#93000a;}
.ng-auth-msg.is-ok{background:#ccead4;color:#072013;}
.ng-auth-back{
	border:0;background:transparent;color:#59605c;font-size:13px;
	cursor:pointer;padding:0;margin-bottom:10px;
}
.ng-auth-back:hover{color:#122b1d;}
@media (max-width:480px){
	.ng-auth-modal{padding:22px 16px 18px;border-radius:12px;}
	.ng-auth-title{font-size:19px;}
}
/* ===== Личный кабинет клиента (ng-cab) ===== */
.ng-cab-dashboard{display:flex;flex-direction:column;gap:20px;}

/* Приветствие */
.ng-cab-hero{
	background:linear-gradient(135deg,#122b1d 0%,#1b3f2b 100%);
	color:#fff;border-radius:16px;padding:24px 22px;
}
.ng-cab-hero-title{margin:0 0 6px;font-size:22px;line-height:1.25;font-weight:600;color:#fff;}
.ng-cab-hero-sub{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.85);max-width:640px;}

/* Метрики */
.ng-cab-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.ng-cab-metric{
	background:#fff;border:1px solid #e6e9e4;border-radius:14px;
	padding:16px 18px;display:flex;flex-direction:column;gap:4px;
}
.ng-cab-metric-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#59605c;font-weight:600;}
.ng-cab-metric-value{font-size:20px;line-height:1.2;font-weight:600;color:#122b1d;}

/* Карточка */
.ng-cab-card{
	background:#fff;border:1px solid #e6e9e4;border-radius:16px;
	padding:20px;display:flex;flex-direction:column;gap:14px;
}
.ng-cab-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.ng-cab-h2{margin:0 0 12px;font-size:20px;color:#122b1d;}
.ng-cab-h3{margin:0;font-size:16px;color:#122b1d;font-weight:600;}

/* Статус */
.ng-cab-status{
	display:inline-flex;align-items:center;gap:6px;
	padding:5px 10px;border-radius:999px;
	font-size:12px;font-weight:600;letter-spacing:.02em;
	background:#eef1ed;color:#122b1d;
}
.ng-cab-status-ready{background:#ccead4;color:#072013;}
.ng-cab-status-ng-new{background:#fff3cd;color:#6f380e;}
.ng-cab-status-processing{background:#dae1dc;color:#161d1a;}
.ng-cab-status-completed{background:#ccead4;color:#072013;}
.ng-cab-status-cancelled{background:#ffdad6;color:#93000a;}
.ng-cab-status-on-hold{background:#eef1ed;color:#161d1a;}

/* Мета заказа */
.ng-cab-order-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:#59605c;}
.ng-cab-order-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.ng-cab-order-items li{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:#1a1c1a;}
.ng-cab-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ng-cab-item-qty{color:#59605c;flex-shrink:0;}
.ng-cab-item-more{color:#59605c;font-size:13px;}

/* Кнопки */
.ng-cab-order-actions{display:flex;gap:10px;flex-wrap:wrap;}
.ng-cab-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	height:42px;padding:0 18px;border-radius:10px;border:0;
	font-size:13px;font-weight:600;letter-spacing:.03em;
	cursor:pointer;text-decoration:none;transition:.2s;
}
.ng-cab-btn-primary{background:#122b1d;color:#fff;}
.ng-cab-btn-primary:hover{background:#1b3f2b;color:#fff;}
.ng-cab-btn-ghost{background:#f2f4f1;color:#122b1d;border:1px solid #d6dad4;}
.ng-cab-btn-ghost:hover{background:#e6e9e4;}
.ng-cab-btn:disabled{opacity:.6;cursor:default;}

/* Пустая карточка */
.ng-cab-empty{text-align:left;}
.ng-cab-empty p{margin:0 0 12px;font-size:14px;line-height:1.55;color:#59605c;}

/* Быстрые действия */
.ng-cab-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.ng-cab-quick-item{
	display:flex;flex-direction:column;gap:4px;
	background:#fff;border:1px solid #e6e9e4;border-radius:14px;
	padding:16px 18px;text-decoration:none;color:#122b1d;
	transition:.2s;
}
.ng-cab-quick-item:hover{border-color:#122b1d;transform:translateY(-1px);}
.ng-cab-quick-title{font-size:15px;font-weight:600;}
.ng-cab-quick-sub{font-size:12px;color:#59605c;}

/* Поддержка */
.ng-cab-support{
	background:#f4f4f0;border-radius:14px;padding:18px;
	display:flex;flex-direction:column;gap:8px;
}
.ng-cab-support-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#59605c;font-weight:600;}
.ng-cab-support-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ng-cab-support-row a{font-size:17px;font-weight:600;color:#122b1d;text-decoration:none;}
.ng-cab-support-row a:hover{color:#4a6453;}
.ng-cab-support-row span{font-size:13px;color:#59605c;}
.ng-cab-support-note{font-size:13px;color:#59605c;line-height:1.5;}

/* ===== Навигация ЛК ===== */
.ng-cab-nav{margin:0;}
.ng-cab-nav-list{
	list-style:none;margin:0;padding:0;
	background:#fff;border:1px solid #e6e9e4;border-radius:14px;
	overflow:hidden;
}
.ng-cab-nav-item a{
	display:block;padding:12px 16px;
	color:#122b1d;text-decoration:none;
	font-size:14px;font-weight:500;
	border-bottom:1px solid #f0f2ee;
	transition:.15s;
}
.ng-cab-nav-item:last-child a{border-bottom:0;}
.ng-cab-nav-item a:hover{background:#f4f4f0;}
.ng-cab-nav-item.is-active a{background:#122b1d;color:#fff;font-weight:600;}

/* ===== Отзывы ===== */
.ng-cab-reviews{display:flex;flex-direction:column;gap:14px;}
.ng-cab-reviews-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.ng-cab-review{
	background:#fff;border:1px solid #e6e9e4;border-radius:14px;padding:16px 18px;
}
.ng-cab-review-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.ng-cab-review-title{font-size:15px;font-weight:600;color:#122b1d;text-decoration:none;}
.ng-cab-review-title:hover{color:#4a6453;}
.ng-cab-review-date{font-size:12px;color:#59605c;}
.ng-cab-review-rating{display:flex;gap:2px;margin-bottom:6px;}
.ng-cab-star{color:#d6dad4;font-size:14px;}
.ng-cab-star.is-on{color:#e0a75e;}
.ng-cab-review-text{font-size:14px;color:#1a1c1a;line-height:1.55;}

/* ===== Мобильная версия ===== */
@media (max-width:768px){
	.ng-cab-metrics{grid-template-columns:1fr;}
	.ng-cab-quick{grid-template-columns:1fr;}

	/* Горизонтальный скролл-таб-бар */
	.ng-cab-nav-list{
		display:flex;overflow-x:auto;gap:6px;
		background:transparent;border:0;border-radius:0;
		padding:2px 0 4px;
		scrollbar-width:none;
	}
	.ng-cab-nav-list::-webkit-scrollbar{display:none;}
	.ng-cab-nav-item a{
		white-space:nowrap;border:1px solid #e6e9e4;border-radius:999px;
		padding:8px 14px;font-size:13px;background:#fff;
	}
	.ng-cab-nav-item a:hover{background:#f4f4f0;}
	.ng-cab-nav-item.is-active a{background:#122b1d;border-color:#122b1d;}
	.ng-cab-nav-item:last-child a{border-bottom:1px solid #e6e9e4;}
}
@media (max-width:480px){
	.ng-cab-hero{padding:20px 18px;}
	.ng-cab-hero-title{font-size:19px;}
	.ng-cab-card{padding:16px;border-radius:14px;}
	.ng-cab-metric{padding:14px 16px;}
	.ng-cab-btn{width:100%;}
	.ng-cab-order-actions{flex-direction:column;}
}
/* ===== Контейнер ЛК клиента ===== */
.ng-cab-main{padding:32px 0 80px;}
.ng-cab-wrap{max-width:1200px;margin:0 auto;padding:0 16px;}
@media (min-width:1024px){.ng-cab-wrap{padding:0 32px;}}

.ng-cab-header{margin-bottom:20px;}
.ng-cab-title{margin:0 0 4px;font-size:28px;line-height:1.2;color:#122b1d;}
.ng-cab-subtitle{margin:0;font-size:14px;color:#59605c;}

.ng-cab-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;}
@media (max-width:900px){.ng-cab-layout{grid-template-columns:1fr;gap:16px;}}
.ng-cab-content{min-width:0;}

/* ===== Страница сброса пароля ===== */
.ng-rp-box{
	max-width:520px;margin:60px auto;background:#fff;border:1px solid #e6e9e4;
	border-radius:16px;padding:28px 24px;
}
.ng-rp-box h2{margin:0 0 10px;font-size:22px;color:#122b1d;}
.ng-rp-box p{margin:0 0 16px;font-size:14px;line-height:1.55;color:#59605c;}
.ng-rp-form{display:flex;flex-direction:column;gap:14px;}
.ng-rp-form label{display:flex;flex-direction:column;gap:6px;}
.ng-rp-form label span{font-size:13px;font-weight:600;color:#122b1d;}
.ng-rp-form input{
	height:46px;padding:0 14px;border:1px solid #d6dad4;border-radius:10px;
	background:#f8f9f7;font-size:15px;color:#122b1d;width:100%;box-sizing:border-box;
}
.ng-rp-form input:focus{outline:none;border-color:#122b1d;background:#fff;}
.ng-rp-btn{
	display:inline-flex;align-items:center;justify-content:center;
	height:46px;padding:0 20px;border:0;border-radius:10px;
	background:#122b1d;color:#fff;font-size:13px;font-weight:600;
	letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer;
	transition:.2s;
}
.ng-rp-btn:hover{background:#1b3f2b;color:#fff;}
.ng-rp-error{
	background:#ffdad6;color:#93000a;padding:10px 12px;border-radius:8px;
	font-size:13px;margin-bottom:12px;
}
/* ===== Кнопка «Выйти» в ЛК ===== */
.ng-cab-nav-logout{
	margin-top:12px;
	padding-top:12px;
	border-top:1px solid #f0f2ee;
}
.ng-cab-logout-btn{
	display:flex;align-items:center;justify-content:center;gap:8px;
	width:100%;height:44px;padding:0 16px;
	background:#fff;border:1px solid #f0cfc9;border-radius:12px;
	color:#93000a;text-decoration:none;font-size:14px;font-weight:600;
	transition:.2s;
}
.ng-cab-logout-btn:hover{
	background:#fff1ef;border-color:#e3a39a;color:#7a0008;
}
.ng-cab-logout-btn svg{flex-shrink:0;}

@media (max-width:768px){
	.ng-cab-nav-logout{
		margin-top:0;
		padding-top:0;
		border-top:0;
		display:flex;
	}
	.ng-cab-logout-btn{
		width:auto;
		height:auto;
		padding:8px 14px;
		border-radius:999px;
		font-size:13px;
	}
}
/* ===== Дропдаун пользователя в шапке ===== */
.ng-user-dd{position:relative;}
.ng-user-dd-menu{
	position:absolute;
	top:calc(100% + 8px);
	right:0;
	min-width:220px;
	background:#fff;
	border:1px solid #e6e9e4;
	border-radius:14px;
	box-shadow:0 12px 32px rgba(20,30,24,.12);
	padding:8px;
	display:none;
	z-index:9999;
}
.ng-user-dd.is-open .ng-user-dd-menu{display:block;}
.ng-user-dd-head{
	padding:10px 12px 8px;
	border-bottom:1px solid #f0f2ee;
	margin-bottom:6px;
	display:flex;
	flex-direction:column;
	gap:2px;
}
.ng-user-dd-hello{font-size:11px;color:#59605c;text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.ng-user-dd-name{font-size:14px;color:#122b1d;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}
.ng-user-dd-item{
	display:flex;align-items:center;gap:10px;
	padding:10px 12px;border-radius:10px;
	color:#122b1d;text-decoration:none;font-size:14px;font-weight:500;
	transition:.15s;
}
.ng-user-dd-item:hover{background:#f4f4f0;color:#122b1d;}
.ng-user-dd-item .material-symbols-outlined{color:#4a6453;}
.ng-user-dd-item-logout{color:#93000a;}
.ng-user-dd-item-logout:hover{background:#fff1ef;color:#7a0008;}
.ng-user-dd-item-logout svg{color:#93000a;flex-shrink:0;}

@media (max-width:768px){
	.ng-user-dd-menu{
		right:-8px;
		min-width:200px;
	}
}
/* ===== Мои заказы (ng-cab-orders) ===== */
.ng-cab-orders{display:flex;flex-direction:column;gap:16px;}

.ng-cab-orders-tabs{
	display:flex;gap:6px;flex-wrap:wrap;
	background:#fff;border:1px solid #e6e9e4;border-radius:12px;padding:6px;
}
.ng-cab-orders-tab{
	padding:8px 14px;border-radius:8px;
	font-size:13px;font-weight:500;color:#59605c;text-decoration:none;
	transition:.15s;white-space:nowrap;
}
.ng-cab-orders-tab:hover{background:#f4f4f0;color:#122b1d;}
.ng-cab-orders-tab.is-active{background:#122b1d;color:#fff;font-weight:600;}

.ng-cab-orders-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}

.ng-cab-order-card{
	background:#fff;border:1px solid #e6e9e4;border-radius:14px;
	padding:16px 18px;display:flex;flex-direction:column;gap:10px;
	transition:.15s;
}
.ng-cab-order-card:hover{border-color:#c9d3cb;}
.ng-cab-order-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.ng-cab-order-card-num{display:flex;align-items:baseline;gap:6px;}
.ng-cab-order-card-label{font-size:12px;color:#59605c;text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.ng-cab-order-card-value{font-size:17px;font-weight:700;color:#122b1d;}
.ng-cab-order-card-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:#59605c;}
.ng-cab-order-card-dot{opacity:.4;}

.ng-cab-order-card-items{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid #f0f2ee;display:flex;flex-direction:column;gap:4px;}
.ng-cab-order-card-items li{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#1a1c1a;}
.ng-cab-order-card-items .ng-cab-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ng-cab-order-card-items .ng-cab-item-qty{color:#59605c;flex-shrink:0;}

.ng-cab-order-card-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px;}
.ng-cab-order-card-actions .ng-cab-btn{height:38px;padding:0 14px;font-size:12px;}

.ng-cab-pagination{
	display:flex;align-items:center;justify-content:center;gap:14px;
	padding:8px 0;font-size:13px;color:#59605c;
}
.ng-cab-page-btn{
	padding:8px 14px;border-radius:8px;background:#fff;border:1px solid #e6e9e4;
	color:#122b1d;text-decoration:none;font-weight:500;transition:.15s;
}
.ng-cab-page-btn:hover{background:#f4f4f0;border-color:#122b1d;}
.ng-cab-page-info{font-weight:600;color:#122b1d;}

@media (max-width:640px){
	.ng-cab-orders-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
	.ng-cab-orders-tabs::-webkit-scrollbar{display:none;}
	.ng-cab-order-card-actions{flex-direction:column;}
	.ng-cab-order-card-actions .ng-cab-btn{width:100%;}
	.ng-cab-pagination{flex-direction:column;gap:8px;}
}
/* ===== Страница заказа клиента (ng-cab-order-view) ===== */
.ng-cab-order-view{display:flex;flex-direction:column;gap:16px;}

.ng-cab-back-link{
	display:inline-block;font-size:13px;color:#59605c;text-decoration:none;
	margin-bottom:8px;transition:.15s;
}
.ng-cab-back-link:hover{color:#122b1d;}

.ng-cab-order-view-header{
	display:flex;flex-direction:column;gap:4px;
}
.ng-cab-order-view-title-row{
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.ng-cab-order-view-meta{
	margin:0;font-size:13px;color:#59605c;
}
.ng-cab-order-view-dot{opacity:.4;margin:0 4px;}

/* Трекинг */
.ng-cab-tracking{
	display:flex;justify-content:space-between;gap:4px;
	background:#fff;border:1px solid #e6e9e4;border-radius:14px;
	padding:20px 16px;position:relative;
}
.ng-cab-track-step{
	display:flex;flex-direction:column;align-items:center;gap:8px;
	flex:1;position:relative;min-width:0;
	text-align:center;
}
.ng-cab-track-step::before{
	content:'';position:absolute;top:14px;left:50%;right:-50%;
	height:2px;background:#e6e9e4;z-index:0;
}
.ng-cab-track-step:last-child::before{display:none;}
.ng-cab-track-step.is-done::before,
.ng-cab-track-step.is-current::before{background:#ccead4;}
.ng-cab-track-dot{
	position:relative;z-index:1;
	width:28px;height:28px;border-radius:50%;
	background:#f0f2ee;color:#59605c;
	display:flex;align-items:center;justify-content:center;
	font-size:13px;font-weight:600;border:2px solid #fff;
	box-shadow:0 0 0 1px #e6e9e4;
}
.ng-cab-track-step.is-done .ng-cab-track-dot{
	background:#122b1d;color:#fff;box-shadow:0 0 0 1px #122b1d;
}
.ng-cab-track-step.is-current .ng-cab-track-dot{
	background:#ccead4;color:#122b1d;box-shadow:0 0 0 2px #122b1d;
}
.ng-cab-track-label{
	font-size:11px;color:#59605c;line-height:1.3;
	font-weight:500;letter-spacing:.02em;
}
.ng-cab-track-step.is-done .ng-cab-track-label,
.ng-cab-track-step.is-current .ng-cab-track-label{
	color:#122b1d;font-weight:600;
}

/* Отменённый заказ */
.ng-cab-order-cancelled{
	background:#fff1ef;border:1px solid #f0cfc9;border-radius:12px;
	padding:14px 16px;color:#7a0008;font-size:14px;line-height:1.5;
}
.ng-cab-order-cancelled a{color:#7a0008;text-decoration:underline;}

/* Состав заказа */
.ng-cab-order-view-items{
	list-style:none;margin:0;padding:0;
	display:flex;flex-direction:column;gap:12px;
}
.ng-cab-order-view-item{
	display:flex;align-items:center;gap:12px;
	padding-bottom:12px;border-bottom:1px solid #f0f2ee;
}
.ng-cab-order-view-item:last-child{border-bottom:0;padding-bottom:0;}
.ng-cab-order-view-thumb{
	width:56px;height:56px;border-radius:10px;overflow:hidden;
	background:#f4f4f0;flex-shrink:0;
}
.ng-cab-order-view-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ng-cab-order-view-item-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ng-cab-order-view-item-name{
	font-size:14px;font-weight:600;color:#122b1d;text-decoration:none;
	display:block;overflow:hidden;text-overflow:ellipsis;
}
a.ng-cab-order-view-item-name:hover{color:#4a6453;}
.ng-cab-order-view-item-meta{font-size:12px;color:#59605c;}
.ng-cab-order-view-item-total{
	font-size:14px;font-weight:600;color:#122b1d;white-space:nowrap;flex-shrink:0;
}

/* Итоги */
.ng-cab-order-view-totals{
	border-top:1px solid #f0f2ee;padding-top:12px;margin-top:4px;
	display:flex;flex-direction:column;gap:8px;
}
.ng-cab-order-view-row{
	display:flex;justify-content:space-between;gap:12px;
	font-size:13px;color:#59605c;
}
.ng-cab-order-view-row-total{
	font-size:16px;font-weight:700;color:#122b1d;
	border-top:1px solid #f0f2ee;padding-top:8px;margin-top:4px;
}

/* Сетка доставка / оплата */
.ng-cab-order-view-grid{
	display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.ng-cab-order-view-info{display:flex;flex-direction:column;gap:10px;font-size:13px;}
.ng-cab-order-view-info > div{display:flex;flex-direction:column;gap:2px;}
.ng-cab-order-view-info-label{
	font-size:11px;text-transform:uppercase;letter-spacing:.06em;
	color:#59605c;font-weight:600;
}
.ng-cab-order-view-info-value,
.ng-cab-order-view-info-address{
	font-size:14px;color:#1a1c1a;line-height:1.5;
}
.ng-cab-order-view-info-address br{display:block;}

/* Трек-номер */
.ng-cab-tracking-number-value{
	margin:0;font-size:16px;color:#122b1d;font-family:monospace;word-break:break-all;
}
.ng-cab-tracking-number-note{
	margin:6px 0 0;font-size:13px;color:#59605c;line-height:1.5;
}
.ng-cab-tracking-number-note a{color:#4a6453;text-decoration:underline;}

/* Кнопки */
.ng-cab-order-view-actions{
	display:flex;gap:10px;flex-wrap:wrap;
}

/* Помощь */
.ng-cab-order-view-help{
	background:#f4f4f0;border-radius:14px;padding:16px 18px;
	display:flex;flex-direction:column;gap:8px;
}
.ng-cab-order-view-help .ng-cab-support-title{
	font-size:12px;text-transform:uppercase;letter-spacing:.08em;
	color:#59605c;font-weight:600;
}
.ng-cab-order-view-help .ng-cab-support-row{
	display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.ng-cab-order-view-help .ng-cab-support-row a{
	font-size:17px;font-weight:600;color:#122b1d;text-decoration:none;
}
.ng-cab-order-view-help .ng-cab-support-row a:hover{color:#4a6453;}
.ng-cab-order-view-help .ng-cab-support-row span{font-size:13px;color:#59605c;}
.ng-cab-order-view-help .ng-cab-support-note{font-size:13px;color:#59605c;line-height:1.5;}

/* Мобильная версия */
@media (max-width:640px){
	.ng-cab-tracking{
		padding:16px 8px;flex-direction:column;gap:10px;
	}
	.ng-cab-track-step{
		flex-direction:row;justify-content:flex-start;
		text-align:left;gap:12px;
	}
	.ng-cab-track-step::before{display:none;}
	.ng-cab-track-dot{width:26px;height:26px;}
	.ng-cab-track-label{font-size:13px;}
	.ng-cab-order-view-grid{grid-template-columns:1fr;}
	.ng-cab-order-view-actions{flex-direction:column;}
	.ng-cab-order-view-actions .ng-cab-btn{width:100%;}
	.ng-cab-order-view-item{gap:10px;}
	.ng-cab-order-view-thumb{width:48px;height:48px;}
}
/* ===== ЛК клиента — ре-дизайн (перекрывает старые стили ng-cab-*) ===== */

/* Контейнер */
.ng-cab-main{padding:32px 0 80px;}
.ng-cab-wrap{max-width:1200px;margin:0 auto;padding:0 16px;}
@media (min-width:1024px){.ng-cab-wrap{padding:0 32px;}}

.ng-cab-header{margin-bottom:24px;}
.ng-cab-title{margin:0 0 4px;font-size:28px;line-height:1.2;color:#122b1d;font-weight:600;}
.ng-cab-subtitle{margin:0;font-size:14px;color:#59605c;}

.ng-cab-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;}
@media (max-width:900px){.ng-cab-layout{grid-template-columns:1fr;gap:16px;}}
.ng-cab-content{min-width:0;}

/* ===== Навигация ===== */
.ng-cab-nav{position:sticky;top:24px;}
.ng-cab-nav-list{
	list-style:none;margin:0;padding:8px;
	background:#fff;border:1px solid #e6e9e4;border-radius:16px;
	box-shadow:0 1px 3px rgba(20,30,24,.04);
	display:flex;flex-direction:column;gap:2px;
}
.ng-cab-nav-item a{
	display:flex;align-items:center;gap:12px;
	padding:11px 14px;border-radius:10px;
	color:#3a423d;text-decoration:none;
	font-size:14px;font-weight:500;
	transition:.15s;
}
.ng-cab-nav-item a:hover{background:#f4f4f0;color:#122b1d;}
.ng-cab-nav-icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:20px;height:20px;color:#59605c;flex-shrink:0;
	transition:.15s;
}
.ng-cab-nav-item a:hover .ng-cab-nav-icon{color:#122b1d;}
.ng-cab-nav-item.is-active a{
	background:#122b1d;color:#fff;font-weight:600;
	box-shadow:0 2px 8px rgba(18,43,29,.2);
}
.ng-cab-nav-item.is-active .ng-cab-nav-icon{color:#ccead4;}

.ng-cab-nav-logout{
	margin-top:14px;
}
.ng-cab-logout-btn{
	display:flex;align-items:center;justify-content:center;gap:8px;
	width:100%;height:44px;padding:0 16px;
	background:#fff;border:1px solid #e6e9e4;border-radius:12px;
	color:#59605c;text-decoration:none;font-size:14px;font-weight:500;
	transition:.15s;
}
.ng-cab-logout-btn:hover{
	background:#fff1ef;border-color:#f0cfc9;color:#93000a;
}
.ng-cab-logout-btn svg{flex-shrink:0;}

/* ===== Обзор ===== */
.ng-cab-dashboard{display:flex;flex-direction:column;gap:16px;}

/* Hero */
.ng-cab-hero{
	background:linear-gradient(135deg,#122b1d 0%,#1b3f2b 100%);
	color:#fff;border-radius:18px;padding:26px 24px;
	display:flex;align-items:center;gap:18px;
	position:relative;overflow:hidden;
}
.ng-cab-hero::after{
	content:'';position:absolute;right:-40px;bottom:-60px;
	width:200px;height:200px;border-radius:50%;
	background:rgba(204,234,212,.08);
}
.ng-cab-hero-avatar{
	width:64px;height:64px;border-radius:50%;
	background:rgba(204,234,212,.15);
	border:2px solid rgba(204,234,212,.35);
	display:flex;align-items:center;justify-content:center;
	font-size:24px;font-weight:700;color:#ccead4;
	flex-shrink:0;position:relative;z-index:1;
}
.ng-cab-hero-text{position:relative;z-index:1;min-width:0;}
.ng-cab-hero-title{
	margin:0 0 4px;font-size:24px;line-height:1.2;font-weight:600;color:#fff;
}
.ng-cab-hero-sub{
	margin:0;font-size:14px;line-height:1.5;
	color:rgba(255,255,255,.75);max-width:600px;
}

/* Метрики */
.ng-cab-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.ng-cab-metric{
	background:#fff;border:1px solid #e6e9e4;border-radius:14px;
	padding:16px 18px;display:flex;align-items:center;gap:14px;
	transition:.15s;
}
.ng-cab-metric:hover{border-color:#c9d3cb;box-shadow:0 2px 8px rgba(20,30,24,.05);}
.ng-cab-metric-icon{
	width:44px;height:44px;border-radius:12px;
	background:#f4f4f0;color:#122b1d;
	display:flex;align-items:center;justify-content:center;
	flex-shrink:0;
}
.ng-cab-metric-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ng-cab-metric-label{
	font-size:11px;text-transform:uppercase;letter-spacing:.06em;
	color:#59605c;font-weight:600;
}
.ng-cab-metric-value{font-size:20px;line-height:1.2;font-weight:700;color:#122b1d;}

/* Карточки */
.ng-cab-card{
	background:#fff;border:1px solid #e6e9e4;border-radius:16px;
	padding:20px;display:flex;flex-direction:column;gap:14px;
	box-shadow:0 1px 3px rgba(20,30,24,.04);
}
.ng-cab-card-head{
	display:flex;align-items:center;justify-content:space-between;
	gap:12px;flex-wrap:wrap;
}
.ng-cab-h2{margin:0 0 4px;font-size:22px;color:#122b1d;font-weight:600;}
.ng-cab-h3{margin:0;font-size:16px;color:#122b1d;font-weight:600;}

/* Статусы */
.ng-cab-status{
	display:inline-flex;align-items:center;
	padding:5px 12px;border-radius:999px;
	font-size:12px;font-weight:600;letter-spacing:.02em;
	background:#eef1ed;color:#122b1d;white-space:nowrap;
}
.ng-cab-status-ready{background:#ccead4;color:#072013;}
.ng-cab-status-ng-new{background:#fff3cd;color:#6f380e;}
.ng-cab-status-processing{background:#dae1dc;color:#161d1a;}
.ng-cab-status-completed{background:#ccead4;color:#072013;}
.ng-cab-status-cancelled{background:#ffdad6;color:#93000a;}
.ng-cab-status-on-hold{background:#eef1ed;color:#161d1a;}

/* Мета заказа */
.ng-cab-order-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:#59605c;}
.ng-cab-order-items{
	list-style:none;margin:0;padding:8px 0 0;
	border-top:1px solid #f0f2ee;
	display:flex;flex-direction:column;gap:6px;
}
.ng-cab-order-items li{
	display:flex;justify-content:space-between;gap:10px;
	font-size:14px;color:#1a1c1a;
}
.ng-cab-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ng-cab-item-qty{color:#59605c;flex-shrink:0;}
.ng-cab-item-more{color:#59605c;font-size:13px;}

.ng-cab-order-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* Кнопки */
.ng-cab-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	height:44px;padding:0 20px;border-radius:12px;border:0;
	font-size:13px;font-weight:600;letter-spacing:.02em;
	cursor:pointer;text-decoration:none;transition:.15s;
}
.ng-cab-btn-primary{background:#122b1d;color:#fff;}
.ng-cab-btn-primary:hover{background:#1b3f2b;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(18,43,29,.2);}
.ng-cab-btn-ghost{background:#f4f4f0;color:#122b1d;border:1px solid #e6e9e4;}
.ng-cab-btn-ghost:hover{background:#e6e9e4;}
.ng-cab-btn:disabled{opacity:.6;cursor:default;transform:none;}

/* Пустая карточка */
.ng-cab-empty{
	text-align:center;padding:32px 24px;
	align-items:center;
}
.ng-cab-empty-icon{
	width:72px;height:72px;border-radius:50%;
	background:#f4f4f0;color:#59605c;
	display:flex;align-items:center;justify-content:center;
	margin:0 auto 8px;
}
.ng-cab-empty-title{margin:0 0 6px;font-size:18px;color:#122b1d;font-weight:600;}
.ng-cab-empty-text{
	margin:0 0 16px;font-size:14px;line-height:1.55;color:#59605c;
	max-width:480px;
}

/* Быстрые действия */
.ng-cab-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.ng-cab-quick-item{
	display:flex;align-items:center;gap:14px;
	background:#fff;border:1px solid #e6e9e4;border-radius:14px;
	padding:16px 18px;text-decoration:none;color:#122b1d;
	transition:.15s;
}
.ng-cab-quick-item:hover{
	border-color:#122b1d;transform:translateY(-2px);
	box-shadow:0 6px 16px rgba(20,30,24,.08);
}
.ng-cab-quick-icon{
	width:44px;height:44px;border-radius:12px;
	background:#eef1ed;color:#122b1d;
	display:flex;align-items:center;justify-content:center;
	flex-shrink:0;
}
.ng-cab-quick-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ng-cab-quick-title{font-size:15px;font-weight:600;color:#122b1d;}
.ng-cab-quick-sub{font-size:12px;color:#59605c;}

/* Поддержка */
.ng-cab-support{
	background:linear-gradient(135deg,#f4f4f0 0%,#eef1ed 100%);
	border-radius:16px;padding:20px;
	display:flex;flex-direction:column;gap:8px;
}
.ng-cab-support-title{
	font-size:12px;text-transform:uppercase;letter-spacing:.08em;
	color:#59605c;font-weight:600;
}
.ng-cab-support-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ng-cab-support-row a{
	font-size:19px;font-weight:700;color:#122b1d;text-decoration:none;
}
.ng-cab-support-row a:hover{color:#4a6453;}
.ng-cab-support-row span{font-size:13px;color:#59605c;}
.ng-cab-support-note{font-size:13px;color:#59605c;line-height:1.5;}

/* Мобильная версия */
@media (max-width:768px){
	.ng-cab-nav{position:static;}
	.ng-cab-nav-list{
		flex-direction:row;overflow-x:auto;gap:6px;
		background:transparent;border:0;border-radius:0;
		padding:2px 0 4px;box-shadow:none;
		scrollbar-width:none;
	}
	.ng-cab-nav-list::-webkit-scrollbar{display:none;}
	.ng-cab-nav-item a{
		white-space:nowrap;padding:9px 14px;border-radius:999px;
		font-size:13px;background:#fff;border:1px solid #e6e9e4;
		gap:8px;
	}
	.ng-cab-nav-item a:hover{background:#f4f4f0;}
	.ng-cab-nav-item.is-active a{border-color:#122b1d;}
	.ng-cab-nav-icon{width:16px;height:16px;}
	.ng-cab-nav-icon svg{width:16px;height:16px;}
	.ng-cab-nav-logout{margin-top:8px;display:flex;}
	.ng-cab-logout-btn{
		width:auto;height:auto;padding:9px 14px;
		border-radius:999px;font-size:13px;
	}
	.ng-cab-metrics{grid-template-columns:1fr;}
	.ng-cab-quick{grid-template-columns:1fr;}
}
@media (max-width:480px){
	.ng-cab-hero{padding:20px 18px;flex-direction:column;text-align:center;gap:12px;}
	.ng-cab-hero-title{font-size:20px;}
	.ng-cab-hero-avatar{width:56px;height:56px;font-size:20px;}
	.ng-cab-card{padding:16px;border-radius:14px;}
	.ng-cab-metric{padding:14px 16px;}
	.ng-cab-metric-icon{width:40px;height:40px;}
	.ng-cab-btn{width:100%;}
	.ng-cab-order-actions{flex-direction:column;}
}
/* ===== Профиль и адреса ===== */
.ng-cab-profile, .ng-cab-addresses{display:flex;flex-direction:column;gap:16px;}

.ng-cab-msg{
	padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.5;
}
.ng-cab-msg-ok{background:#ccead4;color:#072013;}
.ng-cab-msg-hint{background:#f4f4f0;color:#3a423d;}

.ng-cab-form{display:flex;flex-direction:column;gap:20px;}
.ng-cab-form-section{
	background:#fff;border:1px solid #e6e9e4;border-radius:16px;
	padding:20px;display:flex;flex-direction:column;gap:14px;
}
.ng-cab-form-section-title{
	margin:0 0 4px;font-size:16px;font-weight:600;color:#122b1d;
	padding-bottom:12px;border-bottom:1px solid #f0f2ee;
}
.ng-cab-form-row{display:flex;gap:14px;flex-wrap:wrap;}
.ng-cab-form-row-2 > *{flex:1 1 calc(50% - 7px);min-width:220px;}

.ng-cab-field{display:flex;flex-direction:column;gap:6px;flex:1 1 100%;}
.ng-cab-label{font-size:13px;font-weight:600;color:#122b1d;}
.ng-cab-label em{color:#93000a;font-style:normal;margin-left:2px;}
.ng-cab-hint{font-size:12px;color:#59605c;line-height:1.5;}

.ng-cab-form input[type="text"],
.ng-cab-form input[type="email"],
.ng-cab-form input[type="tel"],
.ng-cab-form input[type="password"]{
	width:100%;height:46px;padding:0 14px;
	border:1px solid #d6dad4;border-radius:10px;
	background:#f8f9f7;font-size:15px;color:#122b1d;
	box-sizing:border-box;transition:.15s;
}
.ng-cab-form input:focus{
	outline:none;border-color:#122b1d;background:#fff;
	box-shadow:0 0 0 3px rgba(18,43,29,.08);
}
.ng-cab-form-actions{display:flex;justify-content:flex-start;}

@media (max-width:640px){
	.ng-cab-form-row-2 > *{flex-basis:100%;}
	.ng-cab-form-section{padding:16px;}
	.ng-cab-form-actions .ng-cab-btn{width:100%;}
}
/* ===== Маска телефона — визуальная подсказка ===== */
input.ng-phone-formatted,
input[name="billing_phone"],
input[name="shipping_phone"],
input[type="tel"][name*="phone"]{
	letter-spacing:.02em;
}
input[name="billing_phone"]::placeholder,
input[name="shipping_phone"]::placeholder{
	color:#a5aea8;
}
/* ===== Счётчики в табах заказов ===== */
.ng-cab-orders-tab{
	display:inline-flex;align-items:center;gap:8px;
}
.ng-cab-orders-tab-count{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:22px;height:20px;padding:0 6px;border-radius:999px;
	background:#eef1ed;color:#59605c;
	font-size:11px;font-weight:600;line-height:1;
	transition:.15s;
}
.ng-cab-orders-tab.is-active .ng-cab-orders-tab-count{
	background:rgba(204,234,212,.25);color:#ccead4;
}
.ng-cab-orders-tab:hover .ng-cab-orders-tab-count{
	background:#dde1dd;color:#122b1d;
}
.ng-cab-orders-tab.is-active:hover .ng-cab-orders-tab-count{
	background:rgba(204,234,212,.25);color:#ccead4;
}

/* ===== Пагинация с номерами страниц ===== */
.ng-cab-pagination{
	display:flex;align-items:center;justify-content:center;
	gap:6px;flex-wrap:wrap;
	padding:12px 0;
}
.ng-cab-page-btn{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:36px;height:36px;padding:0 10px;
	border-radius:9px;background:#fff;border:1px solid #e6e9e4;
	color:#122b1d;text-decoration:none;font-weight:500;font-size:13px;
	transition:.15s;
}
.ng-cab-page-btn:hover{background:#f4f4f0;border-color:#122b1d;}
.ng-cab-page-btn.is-active{
	background:#122b1d;color:#fff;border-color:#122b1d;font-weight:600;
	box-shadow:0 2px 8px rgba(18,43,29,.2);
}
.ng-cab-page-btn.is-active:hover{background:#1b3f2b;}
.ng-cab-page-btn-arrow{font-size:15px;padding:0 8px;}
.ng-cab-page-dots{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:20px;color:#59605c;font-weight:500;
}

@media (max-width:640px){
	.ng-cab-page-btn{min-width:34px;height:34px;font-size:12px;}
}
/* ===== Мобильная адаптация ЛК клиента ===== */
@media (max-width: 768px){

	/* Контейнер: больше боковых отступов не нужно, даём место внизу */
	.ng-cab-main{
		padding:20px 0 110px; /* 110px — под нижний таб-бар темы */
	}
	.ng-cab-wrap{padding:0 14px;}

	.ng-cab-header{margin-bottom:16px;}
	.ng-cab-title{font-size:24px;line-height:1.15;}
	.ng-cab-subtitle{
		font-size:13px;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		max-width:100%;
	}

	/* Сетка ЛК — в одну колонку */
	.ng-cab-layout{
		grid-template-columns:1fr;
		gap:14px;
	}

	/* --- Навигация --- */
	.ng-cab-nav{position:static;}
	.ng-cab-nav-list{
		display:flex;
		flex-direction:row;
		overflow-x:auto;
		gap:6px;
		background:transparent;
		border:0;
		border-radius:0;
		padding:2px 0 6px;
		box-shadow:none;
		scrollbar-width:none;
		-webkit-overflow-scrolling:touch;
	}
	.ng-cab-nav-list::-webkit-scrollbar{display:none;}

	.ng-cab-nav-item{flex:0 0 auto;}
	.ng-cab-nav-item a{
		white-space:nowrap;
		padding:9px 14px;
		border-radius:999px;
		background:#fff;
		border:1px solid #e6e9e4;
		gap:8px;
		font-size:13px;
		font-weight:500;
	}
	.ng-cab-nav-item a:hover{background:#f4f4f0;}
	.ng-cab-nav-item.is-active a{
		background:#122b1d;
		color:#fff;
		border-color:#122b1d;
	}
	.ng-cab-nav-icon{width:16px;height:16px;}
	.ng-cab-nav-icon svg{width:16px;height:16px;}

	.ng-cab-nav-logout{
		display:inline-flex;
		margin-top:6px;
		padding-top:0;
		border-top:0;
	}
	.ng-cab-logout-btn{
		width:auto;
		height:auto;
		padding:9px 14px;
		border-radius:999px;
		font-size:13px;
		gap:6px;
	}
	.ng-cab-logout-btn svg{width:14px;height:14px;}

	/* --- Hero --- */
	.ng-cab-hero{
		padding:20px 18px;
		flex-direction:column;
		align-items:flex-start;
		gap:14px;
		border-radius:16px;
		text-align:left;
	}
	.ng-cab-hero-avatar{
		width:52px;height:52px;
		font-size:20px;
	}
	.ng-cab-hero-title{
		font-size:20px;
		line-height:1.2;
		word-break:break-word;
	}
	.ng-cab-hero-sub{
		font-size:13px;
		line-height:1.5;
		max-width:100%;
		word-break:break-word;
	}

	/* --- Метрики --- */
	.ng-cab-metrics{
		grid-template-columns:1fr;
		gap:8px;
	}
	.ng-cab-metric{
		padding:14px 16px;
		border-radius:12px;
		gap:12px;
	}
	.ng-cab-metric-icon{width:40px;height:40px;}
	.ng-cab-metric-value{font-size:18px;}
	.ng-cab-metric-label{font-size:10px;}

	/* --- Карточки --- */
	.ng-cab-card{
		padding:16px;
		border-radius:14px;
		gap:12px;
	}
	.ng-cab-h2{font-size:20px;}
	.ng-cab-h3{font-size:15px;}

	/* Заголовки и метаданные заказа — в столбик */
	.ng-cab-card-head{
		flex-direction:column;
		align-items:flex-start;
		gap:6px;
	}
	.ng-cab-order-meta{
		flex-direction:column;
		gap:4px;
		font-size:12px;
	}

	/* Состав заказа — компактнее */
	.ng-cab-order-items{
		padding-top:6px;
		gap:4px;
	}
	.ng-cab-order-items li{font-size:13px;}

	/* Кнопки — в столбик, на всю ширину */
	.ng-cab-order-actions{
		flex-direction:column;
		gap:8px;
	}
	.ng-cab-order-actions .ng-cab-btn{width:100%;}

	/* --- Пустое состояние --- */
	.ng-cab-empty{padding:28px 16px;}
	.ng-cab-empty-icon,
	.ng-cab-empty-icon-large{
		width:64px;height:64px;
	}
	.ng-cab-empty-title{font-size:17px;}
	.ng-cab-empty-text{font-size:13px;}
	.ng-cab-empty-actions{flex-direction:column;width:100%;}
	.ng-cab-empty-actions .ng-cab-btn{width:100%;}

	/* --- Быстрые действия --- */
	.ng-cab-quick{grid-template-columns:1fr;gap:8px;}
	.ng-cab-quick-item{padding:14px;gap:12px;}
	.ng-cab-quick-icon{width:40px;height:40px;}
	.ng-cab-quick-title{font-size:14px;}

	/* --- Поддержка --- */
	.ng-cab-support{padding:16px;}
	.ng-cab-support-row{
		flex-direction:column;
		align-items:flex-start;
		gap:2px;
	}
	.ng-cab-support-row a{font-size:17px;}

	/* --- Заказы: карточки, табы, пагинация --- */
	.ng-cab-orders-tabs{
		overflow-x:auto;
		flex-wrap:nowrap;
		scrollbar-width:none;
		-webkit-overflow-scrolling:touch;
		padding:5px;
		gap:5px;
	}
	.ng-cab-orders-tabs::-webkit-scrollbar{display:none;}
	.ng-cab-orders-tab{
		padding:7px 12px;
		font-size:12px;
		flex:0 0 auto;
	}
	.ng-cab-orders-tab-count{
		min-width:20px;height:18px;font-size:10px;
	}

	.ng-cab-order-card{padding:14px;border-radius:12px;}
	.ng-cab-order-card-head{
		flex-direction:row;
		align-items:center;
		justify-content:space-between;
	}
	.ng-cab-order-card-num{flex-direction:column;align-items:flex-start;gap:2px;}
	.ng-cab-order-card-label{font-size:10px;}
	.ng-cab-order-card-value{font-size:16px;}
	.ng-cab-status{font-size:11px;padding:4px 10px;}

	.ng-cab-order-card-actions{flex-direction:column;gap:8px;}
	.ng-cab-order-card-actions .ng-cab-btn{width:100%;}

	.ng-cab-pagination{gap:5px;padding:10px 0;}
	.ng-cab-page-btn{min-width:32px;height:32px;font-size:12px;padding:0 8px;}

	/* --- Трекинг заказа --- */
	.ng-cab-tracking{
		padding:16px 12px;
		flex-direction:column;
		gap:10px;
	}
	.ng-cab-track-step{
		flex-direction:row;
		justify-content:flex-start;
		text-align:left;
		gap:12px;
	}
	.ng-cab-track-step::before{display:none;}
	.ng-cab-track-dot{width:26px;height:26px;flex-shrink:0;}
	.ng-cab-track-label{font-size:13px;}

	/* --- Заказ: детали --- */
	.ng-cab-order-view-header{gap:6px;}
	.ng-cab-order-view-title-row{
		flex-direction:column;
		align-items:flex-start;
		gap:6px;
	}
	.ng-cab-order-view-meta{font-size:12px;}
	.ng-cab-order-view-grid{grid-template-columns:1fr;}
	.ng-cab-order-view-actions{
		flex-direction:column;
		gap:8px;
	}
	.ng-cab-order-view-actions .ng-cab-btn{width:100%;}
	.ng-cab-order-view-item{gap:10px;}
	.ng-cab-order-view-thumb{width:48px;height:48px;}
	.ng-cab-order-view-item-name{font-size:13px;}

	/* --- Профиль и адреса --- */
	.ng-cab-form-section{padding:16px;border-radius:14px;}
	.ng-cab-form-row-2 > *{flex-basis:100%;}
	.ng-cab-form-actions .ng-cab-btn{width:100%;}

	/* --- Отзывы --- */
	.ng-cab-reviews-list{gap:10px;}
	.ng-cab-review{gap:12px;padding:14px;}
	.ng-cab-review-thumb{width:56px;height:56px;}
	.ng-cab-review-head{flex-direction:column;align-items:flex-start;gap:2px;}
	.ng-cab-review-title{font-size:14px;}
	.ng-cab-review-text{font-size:13px;}
}

/* Мелкие экраны */
@media (max-width: 420px){
	.ng-cab-wrap{padding:0 12px;}
	.ng-cab-hero{padding:18px 16px;}
	.ng-cab-hero-title{font-size:18px;}
	.ng-cab-title{font-size:22px;}
	.ng-cab-nav-item a{padding:8px 12px;font-size:12px;}
	.ng-cab-metric-value{font-size:17px;}
}
/* «Выйти» в навигации ЛК — визуально отделить на десктопе */
.ng-cab-nav-item-logout{
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #f0f2ee;
}
.ng-cab-nav-item-logout a{
	color: #59605c !important;
}
.ng-cab-nav-item-logout a:hover{
	background: #fff1ef !important;
	color: #93000a !important;
}
.ng-cab-nav-item-logout svg{
	color: #59605c;
}
.ng-cab-nav-item-logout a:hover svg{
	color: #93000a;
}
/* ===== Страница избранного (page-favorites.php) ===== */
.ng-cab-fav-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ng-cab-fav-card{
	background: #fff;
	border: 1px solid #e6e9e4;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: .15s;
}
.ng-cab-fav-card:hover{
	border-color: #c9d3cb;
	box-shadow: 0 4px 12px rgba(20,30,24,.06);
}

.ng-cab-fav-thumb{
	display: block;
	aspect-ratio: 4 / 3;
	background: #f4f4f0;
	overflow: hidden;
}
.ng-cab-fav-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: .3s;
}
.ng-cab-fav-card:hover .ng-cab-fav-thumb img{
	transform: scale(1.04);
}

.ng-cab-fav-body{
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.ng-cab-fav-title{
	font-size: 15px;
	font-weight: 600;
	color: #122b1d;
	text-decoration: none;
	line-height: 1.35;
}
.ng-cab-fav-title:hover{color: #4a6453;}

.ng-cab-fav-price{
	font-size: 16px;
	font-weight: 700;
	color: #122b1d;
}
.ng-cab-fav-price .woocommerce-Price-amount{color: #122b1d;}
.ng-cab-fav-price del{color: #a5aea8;font-weight: 500;margin-right: 6px;}

.ng-cab-fav-actions{
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ng-cab-fav-out{
	font-size: 13px;
	color: #93000a;
	font-weight: 600;
	padding: 8px 0;
}

/* Мобильный */
@media (max-width: 640px){
	.ng-cab-fav-grid{
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.ng-cab-fav-body{padding: 10px 12px 12px;}
	.ng-cab-fav-title{font-size: 13px;}
	.ng-cab-fav-price{font-size: 15px;}
	.ng-cab-btn-small{
		height: 38px !important;
		font-size: 12px !important;
		padding: 0 12px !important;
	}
}
@media (max-width: 420px){
	.ng-cab-fav-grid{grid-template-columns: 1fr;}
}
/* ===== Иконка избранного в шапке ===== */
.ng-fav-header-link{
	position: relative;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ng-fav-header-link .ng-fav-icon{
	transition: .15s;
}
.ng-fav-header-link.is-active .ng-fav-icon,
.ng-fav-header-link:hover .ng-fav-icon{
	color: #C87A54;
}
.ng-fav-header-link .ng-fav-count{
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: #C87A54;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* ===== Кнопки быстрой связи в модалке заказа (ЛК админа) ===== */
.ng-order-details__phone-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ng-order-details__contacts {
    display: inline-flex;
    gap: 6px;
    margin-left: 4px;
}
.ng-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s, color .15s, transform .1s;
    background: #f4f4f0;
    color: #122b1d;
}
.ng-contact-btn:hover { transform: translateY(-1px); }
.ng-contact-btn .material-symbols-outlined { font-size: 18px; }

.ng-contact-btn--call { background: #e8f1ea; color: #122b1d; }
.ng-contact-btn--call:hover { background: #d5e1d8; }

.ng-contact-btn--tg { background: #e3f1fb; color: #1c7fc4; }
.ng-contact-btn--tg:hover { background: #d0e8f7; }

.ng-contact-btn--wa { background: #e5f6e8; color: #1fa855; }
.ng-contact-btn--wa:hover { background: #d2efd8; }

.ng-contact-btn--max { background: #ece7fb; color: #5b3fbf; }
.ng-contact-btn--max:hover { background: #ddd5f5; }
/* ===== Кнопки быстрой связи в модалке заказа (ЛК админа) ===== */
.ng-order-details__phone-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ng-order-details__contacts {
    display: inline-flex;
    gap: 6px;
    margin-left: 4px;
}
.ng-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform .1s, opacity .15s;
    background: #fff;
    border: 1px solid #e3e8e4;
}
.ng-contact-btn:hover { transform: translateY(-1px); opacity: .9; }
.ng-contact-btn svg { display: block; width: 20px; height: 20px; }

/* Позвонить — нейтральный стиль с Material Symbol */
.ng-contact-btn--call { background: #e8f1ea; border-color: #d5e1d8; color: #122b1d; }
.ng-contact-btn--call .material-symbols-outlined { font-size: 18px; }

/* Мессенджеры — белый фон, SVG сам цветной */
.ng-contact-btn--tg,
.ng-contact-btn--wa,
.ng-contact-btn--max { background: #fff; border-color: #e3e8e4; }
/* =====================================================================
 * ФИКСЫ: «Просмотр корзины» + кнопки карточки каталога
 * Дописано в конец — ничего выше не перебивает, только уточняет.
 * ===================================================================== */

/* --- 1. Скрываем ссылку «Просмотр корзины» после AJAX-добавления --- */
a.added_to_cart,
.woocommerce a.added_to_cart,
.added_to_cart.wc-forward,
a.button.added_to_cart {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* --- 2. Карточка каталога: кнопки не переносятся, текст в одну строку --- */
.ng-product-card__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
}

.ng-product-card__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    height: 36px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.ng-product-card__btn > span:not(.material-symbols-outlined) {
    white-space: nowrap !important;
    display: inline-block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
}

.ng-product-card__btn .material-symbols-outlined {
    flex-shrink: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* На узких экранах — кнопки в столбик */
@media (max-width: 520px) {
    .ng-product-card__actions {
        grid-template-columns: 1fr !important;
    }
    .ng-product-card__btn {
        width: 100% !important;
    }
}
/* =====================================================================
 * Блок «Хиты каталога» на главной — кнопки
 * ===================================================================== */

.ng-front-card__cart-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 40px !important;
    padding: 0 14px !important;
    background: #1B3B2B !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.ng-front-card__cart-btn:hover {
    background: #122B1D !important;
    color: #ffffff !important;
}
.ng-front-card__cart-btn > span:not(.material-symbols-outlined) {
    white-space: nowrap !important;
    display: inline-block !important;
}
.ng-front-card__cart-btn .material-symbols-outlined {
    font-size: 18px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
.ng-front-card__cart-btn--mobile {
    width: 100% !important;
    height: 36px !important;
    font-size: 12px !important;
}

.ng-front-card__details-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    padding: 0 14px !important;
    background: #F4F3F0 !important;
    color: #1A221E !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    box-sizing: border-box !important;
}
.ng-front-card__details-btn:hover {
    background: #EBF1EC !important;
    color: #122B1D !important;
}
/* =====================================================================
 * «Хиты каталога» на главной — цена без наложения + кнопки адаптивны
 * ===================================================================== */

/* Цена: зачёркнутая СВЕРХУ, новая СНИЗУ, но в одну строку с разделителем */
.ng-front-card__price-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 0 8px 0 !important;
}
.ng-front-card__price-row .price {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #001509 !important;
    line-height: 1.2 !important;
}
/* Зачёркнутая цена — серая, мелкая, В СТРОКЕ, не под новой */
.ng-front-card__price-row .price del,
.ng-front-card__price-row .price del .woocommerce-Price-amount {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #a5aea8 !important;
    text-decoration: line-through !important;
    opacity: 1 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
/* Новая цена — жирная, чёрная */
.ng-front-card__price-row .price ins,
.ng-front-card__price-row .price ins .woocommerce-Price-amount {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #001509 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}
.ng-front-card__price-row .price .woocommerce-Price-amount,
.ng-front-card__price-row .price bdi {
    line-height: 1.2 !important;
}

/* Кнопки в карточке — не вылезают, адаптивны */
.ng-front-card__actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}
.ng-front-card__actions > * {
    flex: 0 0 auto !important;
}
.ng-front-card__cart-btn {
    flex: 0 0 auto !important;
}
.ng-front-card__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.ng-front-card__actions > * {
    flex: 0 0 auto !important;
}
.ng-front-card__actions--mobile {
    flex-direction: column !important;
    align-items: stretch !important;
}
.ng-front-card__actions--mobile > * {
    width: 100% !important;
}

/* На мобильных — кнопки в столбик, ничего не вылезает */
@media (max-width: 767px) {
    .ng-front-card__actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .ng-front-card__actions > * {
        width: 100% !important;
    }
    .ng-front-card__price-row .price,
    .ng-front-card__price-row .price ins,
    .ng-front-card__price-row .price ins .woocommerce-Price-amount {
        font-size: 16px !important;
    }
    .ng-front-card__price-row .price del,
    .ng-front-card__price-row .price del .woocommerce-Price-amount {
        font-size: 12px !important;
    }
}
/* =====================================================================
 * ФИНАЛЬНЫЙ ФИКС — «Хиты каталога». Перебивает всё старое.
 * ===================================================================== */

/* Цена — в одну строку */
body .ng-front-card__price-row {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
}
body .ng-front-card__price-row .price {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #001509 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
body .ng-front-card__price-row .price del,
body .ng-front-card__price-row .price del .woocommerce-Price-amount {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #a5aea8 !important;
    text-decoration: line-through !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
body .ng-front-card__price-row .price ins,
body .ng-front-card__price-row .price ins .woocommerce-Price-amount {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #001509 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Кнопки — в одну строку на десктопе */
body .ng-front-card__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
body .ng-front-card__actions > * {
    flex: 0 0 auto !important;
    max-width: 100% !important;
}

/* Мобильная версия — в столбик */
body .ng-front-card__actions--mobile {
    flex-direction: column !important;
    align-items: stretch !important;
}
body .ng-front-card__actions--mobile > * {
    width: 100% !important;
    max-width: 100% !important;
}

/* На узких экранах — тоже в столбик */
@media (max-width: 767px) {
    body .ng-front-card__actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    body .ng-front-card__actions > * {
        width: 100% !important;
        max-width: 100% !important;
    }
    body .ng-front-card__price-row .price,
    body .ng-front-card__price-row .price ins,
    body .ng-front-card__price-row .price ins .woocommerce-Price-amount {
        font-size: 16px !important;
    }
    body .ng-front-card__price-row .price del,
    body .ng-front-card__price-row .price del .woocommerce-Price-amount {
        font-size: 12px !important;
    }
}

/* Планшеты — wrap, чтобы не вылезало */
@media (max-width: 1100px) and (min-width: 768px) {
    body .ng-front-card__actions {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }
}
/* =====================================================================
 * Сетка «Хиты каталога» на главной — адаптивная.
 * Уменьшает количество колонок по мере сужения экрана.
 * ===================================================================== */

.ng-front-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
}

/* Широкий планшет / узкий десктоп: 3 колонки */
@media (max-width: 1280px) {
    .ng-front-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Планшет: 2 колонки */
@media (max-width: 1024px) {
    .ng-front-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

/* Маленький планшет: 2 колонки, меньший gap */
@media (max-width: 768px) {
    .ng-front-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

/* Телефон: 1 колонка */
@media (max-width: 500px) {
    .ng-front-grid {
        grid-template-columns: 1fr !important;
    }
}
/* =====================================================================
 * «Хиты каталога» на главной — фикс обрезки кнопок и цены
 * ===================================================================== */

.ng-front-card__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
.ng-front-card__actions > * {
    flex: 0 0 auto !important;
    max-width: 100% !important;
}

.ng-front-card__price-row {
    max-width: 100% !important;
    overflow: hidden !important;
    flex-wrap: wrap !important;
}

.ng-front-grid li.product,
.ng-front-grid .ng-front-card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Сетка: 4 → 3 → 2 → 1 */
.ng-front-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
}
@media (max-width: 1280px) {
    .ng-front-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1024px) {
    .ng-front-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
}
@media (max-width: 768px) {
    .ng-front-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}
@media (max-width: 500px) {
    .ng-front-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 767px) {
    .ng-front-card__actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .ng-front-card__actions > * {
        width: 100% !important;
    }
    .ng-front-card__price-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }
    .ng-front-card__price-row .price {
        flex-wrap: wrap !important;
    }
}
/* =====================================================================
 * КАРТОЧКА ТОВАРА (STITCH) — ПОЛНАЯ АДАПТАЦИЯ НА ВСЕХ УСТРОЙСТВАХ
 * Брейкпоинты: 1440+, 1024–1439, 768–1023, 421–767, ≤420
 * Заменяет предыдущий мобильный блок. Ничего выше не ломает.
 * ===================================================================== */

/* ---------- Базовое ограничение ширины контента (для широких экранов) ---------- */
.ng-stitch-section {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* =====================================================================
 * 1440px и шире — контент не растягивается, сетка «Похожие» в 4 колонки
 * ===================================================================== */
@media (min-width: 1440px) {
    .ng-stitch-section {
        max-width: 1360px;
        padding-left: 32px;
        padding-right: 32px;
    }
    .ng-stitch-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 48px;
    }
    .ng-stitch-related__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }
    .ng-stitch-summary__title {
        font-size: 42px;
        line-height: 50px;
    }
}

/* =====================================================================
 * 1024–1439px — планшеты ландшафт и небольшие ноутбуки
 * ===================================================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
    .ng-stitch-section {
        padding-left: 24px;
        padding-right: 24px;
    }
    .ng-stitch-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
    }
    .ng-stitch-summary__title {
        font-size: 34px;
        line-height: 40px;
    }
    .ng-stitch-price__current {
        font-size: 34px;
    }
    .ng-stitch-related__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
    .ng-stitch-reviews {
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
        gap: 28px;
    }
}

/* =====================================================================
 * 768–1023px — планшеты портрет (iPad и подобные)
 * ===================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .ng-stitch-section {
        padding-left: 24px;
        padding-right: 24px;
    }
    .ng-stitch-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
    }
    .ng-stitch-summary__title {
        font-size: 28px;
        line-height: 34px;
    }
    .ng-stitch-price__current {
        font-size: 30px;
    }
    .ng-stitch-summary__excerpt {
        font-size: 14px;
        line-height: 1.6;
    }
    .ng-stitch-summary__actions {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        align-items: stretch;
    }
    .ng-stitch-cart { display: contents; }
    .ng-stitch-cart__qty     { grid-column: 1; grid-row: 1; }
    .ng-stitch-cart__submit  { grid-column: 2; grid-row: 1; min-height: 48px; }
    .ng-stitch-summary__fav  { grid-column: 3; grid-row: 1; width: 48px; height: 48px; }

    .ng-stitch-tabs {
        flex-wrap: wrap;
        gap: 12px;
        overflow: visible;
    }
    .ng-stitch-tab-btn {
        font-size: 17px;
        line-height: 22px;
        white-space: normal;
        padding: 6px 0;
    }
    .ng-stitch-specs__row {
        flex-wrap: wrap;
        gap: 4px;
    }
    .ng-stitch-specs__value {
        flex: 1 1 100%;
        text-align: left;
    }
    .ng-stitch-reviews {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .ng-stitch-reviews__summary {
        max-width: 420px;
    }
    .ng-stitch-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .ng-stitch-related__title {
        font-size: 28px;
        line-height: 34px;
    }
}

/* =====================================================================
 * 421–767px — телефоны (ваш существующий блок, оставлен как есть)
 * ===================================================================== */
@media (min-width: 421px) and (max-width: 767px) {
    .ng-stitch-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .ng-stitch-breadcrumbs {
        flex-wrap: wrap !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
        gap: 4px 6px !important;
    }
    .ng-stitch-breadcrumbs a,
    .ng-stitch-breadcrumbs span,
    .ng-stitch-breadcrumbs__cat,
    .ng-stitch-breadcrumbs__cat a {
        white-space: normal !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
    .ng-stitch-hero__grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .ng-stitch-gallery__main {
        aspect-ratio: 4 / 3 !important;
        border-radius: 10px !important;
    }
    .ng-stitch-gallery__thumbs {
        gap: 6px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .ng-stitch-gallery__zoom-hint {
        width: 36px !important;
        height: 36px !important;
        padding: 8px !important;
    }
    .ng-stitch-gallery__zoom-hint .material-symbols-outlined {
        font-size: 18px !important;
    }
    .ng-stitch-summary__title {
        font-size: 26px !important;
        line-height: 32px !important;
        margin: 4px 0 8px !important;
    }
    .ng-stitch-summary__rating {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .ng-stitch-stars .material-symbols-outlined {
        font-size: 18px !important;
    }
    .ng-stitch-summary__excerpt {
        padding: 12px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 16px !important;
    }
    .ng-stitch-summary__price-box {
        padding: 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    .ng-stitch-summary__price {
        flex-wrap: wrap !important;
        align-items: baseline !important;
        gap: 6px !important;
    }
    .ng-stitch-price__current {
        font-size: 32px !important;
        line-height: 1 !important;
    }
    .ng-stitch-price__old { font-size: 13px !important; }
    .ng-stitch-price__badge {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }
    .ng-stitch-summary__actions {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 8px !important;
        align-items: stretch !important;
        margin-bottom: 12px !important;
    }
    .ng-stitch-cart { display: contents !important; }
    .ng-stitch-cart__qty    { grid-column: 1 !important; grid-row: 1 !important; }
    .ng-stitch-cart__submit { grid-column: 2 !important; grid-row: 1 !important; min-height: 48px !important; font-size: 13px !important; padding: 0 12px !important; }
    .ng-stitch-summary__fav { grid-column: 3 !important; grid-row: 1 !important; width: 48px !important; height: 48px !important; }
    .ng-stitch-summary__one-click {
        width: 100% !important;
        font-size: 13px !important;
        min-height: 44px !important;
        padding: 0 12px !important;
        margin-bottom: 16px !important;
    }
    .ng-stitch-summary__trust { padding: 12px !important; }
    .ng-stitch-trust-item { gap: 10px !important; }
    .ng-stitch-trust-item__title { font-size: 13px !important; line-height: 1.3 !important; }
    .ng-stitch-trust-item__desc  { font-size: 12px !important; line-height: 1.4 !important; }
    .ng-stitch-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        overflow: visible !important;
        padding-bottom: 10px !important;
        margin-bottom: 16px !important;
    }
    .ng-stitch-tab-btn {
        font-size: 16px !important;
        line-height: 22px !important;
        white-space: normal !important;
        padding: 6px 0 !important;
        flex-shrink: 1 !important;
    }
    .ng-stitch-tab-content {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
    .ng-stitch-tab-content--specs {
        padding: 14px !important;
        border-radius: 10px !important;
    }
    .ng-stitch-specs__row {
        flex-wrap: wrap !important;
        gap: 6px !important;
        font-size: 13px !important;
        padding: 8px 0 !important;
    }
    .ng-stitch-specs__name  { min-width: 0 !important; flex: 1 1 auto !important; }
    .ng-stitch-specs__value { flex: 1 1 100% !important; text-align: left !important; font-size: 13px !important; }
    .ng-stitch-reviews {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .ng-stitch-reviews__summary { padding: 16px !important; }
    .ng-stitch-reviews__rating  { font-size: 36px !important; }
    .ng-stitch-reviews__list .comment_container {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    .ng-stitch-reviews__list .comment-text .meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    .ng-stitch-related__head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .ng-stitch-related__title {
        font-size: 24px !important;
        line-height: 30px !important;
    }
    .ng-stitch-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .ng-stitch-related-card          { border-radius: 12px !important; }
    .ng-stitch-related-card__body    { padding: 10px 12px !important; gap: 6px !important; }
    .ng-stitch-related-card__cat     { font-size: 9px !important; letter-spacing: 0.1em !important; }
    .ng-stitch-related-card__title   { font-size: 15px !important; line-height: 20px !important; }
    .ng-stitch-related-card__price   { font-size: 18px !important; }
    .ng-stitch-related-card__actions { padding: 0 12px 12px !important; }
    .ng-stitch-related-card__btn     { min-height: 38px !important; font-size: 12px !important; padding: 8px 10px !important; }
    .ng-stitch-related-card__fav     { width: 32px !important; height: 32px !important; top: 8px !important; right: 8px !important; }
}

/* =====================================================================
 * ≤420px — очень узкие экраны (iPhone SE, Galaxy Fold и т.п.)
 * ===================================================================== */
@media (max-width: 420px) {
    .ng-stitch-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .ng-stitch-summary__title {
        font-size: 22px !important;
        line-height: 28px !important;
    }
    .ng-stitch-price__current { font-size: 28px !important; }
    .ng-stitch-summary__actions {
        grid-template-columns: 1fr !important;
    }
    .ng-stitch-cart__qty {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-content: center !important;
    }
    .ng-stitch-cart__submit {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    .ng-stitch-summary__fav {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        height: 48px !important;
    }
    .ng-stitch-related__grid {
        grid-template-columns: 1fr !important;
    }
    .ng-stitch-tab-btn {
        font-size: 15px !important;
        line-height: 20px !important;
    }
    .ng-stitch-trust-item__title { font-size: 12.5px !important; }
    .ng-stitch-trust-item__desc  { font-size: 11.5px !important; }
    .ng-stitch-reviews__rating { font-size: 32px !important; }
    .ng-stitch-reviews__summary { padding: 12px !important; }
}

/* =====================================================================
 * Ландшафт на телефонах — уменьшаем вертикальные отступы
 * ===================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .ng-stitch-hero {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .ng-stitch-gallery__main {
        max-height: 60vh;
    }
}

/* =====================================================================
 * Тач-устройства — увеличиваем минимальные размеры кликабельных зон
 * ===================================================================== */
@media (hover: none) and (pointer: coarse) {
    .ng-stitch-tab-btn,
    .ng-stitch-cart__qty-btn,
    .ng-stitch-summary__fav,
    .ng-stitch-summary__one-click,
    .ng-stitch-related-card__btn,
    .ng-stitch-related-card__fav {
        min-height: 44px;
    }
    .ng-stitch-cart__qty-btn {
        min-width: 44px;
    }
    .ng-stitch-related-card:hover {
        transform: none;
    }
}
/* =====================================================================
 * ФИНАЛЬНЫЙ ФИКС: галерея + табы на мобильных.
 * Дописано последним — перебивает всё выше.
 * ===================================================================== */

@media (max-width: 767px) {

    /* ---------- ГАЛЕРЕЯ ---------- */

    /* Главное фото — компактнее, не на весь экран */
    .ng-stitch-gallery {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .ng-stitch-gallery__main {
        aspect-ratio: 4 / 3 !important;
        max-height: 320px !important;
        width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
    .ng-stitch-gallery__main img,
    .ng-stitch-gallery__img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Миниатюры — компактные, в ряд, без отступа сверху */
    .ng-stitch-gallery__thumbs {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .ng-stitch-thumb {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        padding: 0 !important;
        border: 2px solid transparent !important;
    }
    .ng-stitch-thumb.is-active {
        border-color: #122b1d !important;
    }
    .ng-stitch-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Убираем пустоту между галереей и summary */
    .ng-stitch-hero__grid {
        gap: 16px !important;
    }
    .ng-stitch-summary {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* ---------- ТАБЫ ---------- */

    /* Табы — горизонтальный скролл, не переносятся, не уезжают */
    .ng-stitch-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 0 12px 0 !important;
        margin: 0 0 16px 0 !important;
        border-bottom: 1px solid #e8e8e4 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .ng-stitch-tabs::-webkit-scrollbar {
        display: none !important;
    }

    /* Кнопка таба — не растягивается, по размеру текста */
    .ng-stitch-tab-btn {
        flex: 0 0 auto !important;
        font-size: 15px !important;
        line-height: 20px !important;
        font-weight: 500 !important;
        padding: 8px 0 !important;
        white-space: nowrap !important;
        color: #59605c !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 2px solid transparent !important;
        margin-bottom: -1px !important;
        text-align: left !important;
    }
    .ng-stitch-tab-btn.is-active {
        color: #122b1d !important;
        font-weight: 600 !important;
        border-bottom-color: #122b1d !important;
    }

    /* Контент таба */
    .ng-stitch-tab-pane {
        padding-top: 4px !important;
    }
    .ng-stitch-tab-content {
        font-size: 14px !important;
        line-height: 1.7 !important;
        padding: 0 !important;
    }
    .ng-stitch-tab-content--specs {
        padding: 16px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        border: 1px solid #e8e8e4 !important;
    }
}

/* =====================================================================
 * Очень узкие экраны — галерея ещё компактнее
 * ===================================================================== */
@media (max-width: 420px) {
    .ng-stitch-gallery__main {
        max-height: 260px !important;
        aspect-ratio: 1 / 1 !important;
    }
    .ng-stitch-tab-btn {
        font-size: 14px !important;
        line-height: 18px !important;
    }
}
/* =====================================================================
 * ФИНАЛЬНЫЙ ФИКС: галерея + табы + отступы на мобильных.
 * Перебивает ng-stitch-product.css за счёт специфичности и !important.
 * ===================================================================== */

@media (max-width: 767px) {

    /* ---------- ОТСТУПЫ СЕКЦИЙ ---------- */
    .ng-stitch-product .ng-stitch-hero {
        padding-bottom: 1.5rem !important;
    }
    .ng-stitch-product .ng-stitch-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ---------- ГАЛЕРЕЯ ---------- */
    /* Главное фото — компактнее, не на весь экран */
    .ng-stitch-product .ng-stitch-gallery__main {
        aspect-ratio: 4 / 3 !important;
        max-height: 320px !important;
        border-radius: 12px !important;
    }

    /* Миниатюры — вплотную, компактные */
    .ng-stitch-product .ng-stitch-gallery {
        gap: 8px !important;
    }
    .ng-stitch-product .ng-stitch-gallery__thumbs {
        gap: 8px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .ng-stitch-product .ng-stitch-thumb {
        border-radius: 8px !important;
        padding: 2px !important;
    }

    /* Убираем пустоту между галереей и summary */
    .ng-stitch-product .ng-stitch-hero__grid {
        gap: 1rem !important;
    }
    .ng-stitch-product .ng-stitch-summary {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .ng-stitch-product .ng-stitch-summary__top {
        padding-bottom: .25rem !important;
    }

    /* ---------- ТАБЫ ---------- */
    /* Горизонтальный скролл, не переносятся, кнопки не сжимаются */
    .ng-stitch-product .ng-stitch-tabs-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .ng-stitch-product .ng-stitch-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 1rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 0 12px 0 !important;
        margin: 0 0 1.25rem 0 !important;
        border-bottom: 1px solid var(--ng-border, #e5e0d8) !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .ng-stitch-product .ng-stitch-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .ng-stitch-product .ng-stitch-tab-btn {
        flex: 0 0 auto !important;
        font-size: 16px !important;
        line-height: 22px !important;
        font-weight: 600 !important;
        padding: 6px 0 !important;
        white-space: nowrap !important;
        background: none !important;
        border: 0 !important;
    }
    .ng-stitch-product .ng-stitch-tab-btn.is-active::after {
        bottom: -1px !important;
        height: 2px !important;
    }

    /* Контент таба */
    .ng-stitch-product .ng-stitch-tab-content {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
    .ng-stitch-product .ng-stitch-tab-content--specs {
        padding: 14px !important;
        border-radius: 10px !important;
    }

    /* Характеристики — значение под названием */
    .ng-stitch-product .ng-stitch-specs__row {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 8px 0 !important;
        font-size: 14px !important;
    }
    .ng-stitch-product .ng-stitch-specs__name {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .ng-stitch-product .ng-stitch-specs__value {
        flex: 1 1 100% !important;
        text-align: left !important;
        font-size: 14px !important;
    }

    /* ---------- SUMMARY: цена, кнопки ---------- */
    .ng-stitch-product .ng-stitch-summary__title {
        font-size: 26px !important;
        line-height: 32px !important;
    }
    .ng-stitch-product .ng-stitch-price__current {
        font-size: 32px !important;
    }
    .ng-stitch-product .ng-stitch-summary__price-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    /* Кнопки: qty + корзина + сердечко в одну строку */
    .ng-stitch-product .ng-stitch-summary__actions {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    .ng-stitch-product .ng-stitch-cart {
        display: contents !important;
    }
    .ng-stitch-product .ng-stitch-cart__qty {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .ng-stitch-product .ng-stitch-cart__submit {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-height: 48px !important;
        font-size: 13px !important;
        padding: 0 10px !important;
    }
    .ng-stitch-product .ng-stitch-summary__fav {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 48px !important;
        height: 48px !important;
    }

    /* ---------- RELATED: 2 колонки ---------- */
    .ng-stitch-product .ng-stitch-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    .ng-stitch-product .ng-stitch-related-card__title {
        font-size: 15px !important;
        line-height: 20px !important;
    }
    .ng-stitch-product .ng-stitch-related-card__price {
        font-size: 18px !important;
    }
    .ng-stitch-product .ng-stitch-related-card__btn {
        min-height: 38px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
    }

    /* ---------- ОТЗЫВЫ: одна колонка ---------- */
    .ng-stitch-product .ng-stitch-reviews {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .ng-stitch-product .ng-stitch-reviews__rating {
        font-size: 36px !important;
    }
}

/* =====================================================================
 * ≤420px — ещё компактнее
 * ===================================================================== */
@media (max-width: 420px) {
    .ng-stitch-product .ng-stitch-gallery__main {
        max-height: 260px !important;
        aspect-ratio: 1 / 1 !important;
    }
    .ng-stitch-product .ng-stitch-summary__title {
        font-size: 22px !important;
        line-height: 28px !important;
    }
    .ng-stitch-product .ng-stitch-price__current {
        font-size: 28px !important;
    }
    .ng-stitch-product .ng-stitch-tab-btn {
        font-size: 15px !important;
    }
    /* Кнопки — в столбик */
    .ng-stitch-product .ng-stitch-summary__actions {
        grid-template-columns: 1fr !important;
    }
    .ng-stitch-product .ng-stitch-cart__qty {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-content: center !important;
    }
    .ng-stitch-product .ng-stitch-cart__submit {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    .ng-stitch-product .ng-stitch-summary__fav {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        height: 48px !important;
    }
    /* Похожие — 1 колонка */
    .ng-stitch-product .ng-stitch-related__grid {
        grid-template-columns: 1fr !important;
    }
}
/* =====================================================================
 * ПУСТАЯ КОРЗИНА — красивый блок вместо дефолтного
 * ===================================================================== */

.ng-cart-empty {
    max-width: 640px;
    margin: 48px auto;
    padding: 56px 32px 40px;
    background: #ffffff;
    border: 1px solid #e8e8e4;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(18, 43, 29, 0.06);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Иконка в круге */
.ng-cart-empty__icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #f4f4f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #122b1d;
    margin-bottom: 4px;
}
.ng-cart-empty__icon .material-symbols-outlined {
    font-size: 44px !important;
    font-variation-settings: 'FILL' 0, 'wght' 300;
}

/* Заголовок */
.ng-cart-empty__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 26px;
    line-height: 34px;
    font-weight: 600;
    color: #001509;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Описание */
.ng-cart-empty__text {
    font-size: 15px;
    line-height: 1.6;
    color: #59605c;
    margin: 0;
    max-width: 480px;
}

/* Кнопки */
.ng-cart-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
}
.ng-cart-empty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 12px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    box-sizing: border-box;
}
.ng-cart-empty__btn .material-symbols-outlined {
    font-size: 20px !important;
}

.ng-cart-empty__btn--primary {
    background: #122b1d;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(18, 43, 29, 0.18);
}
.ng-cart-empty__btn--primary:hover {
    background: #1b3f2b;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(18, 43, 29, 0.22);
}
.ng-cart-empty__btn--primary:active {
    transform: translateY(0);
}

.ng-cart-empty__btn--ghost {
    background: #f4f4f0;
    color: #122b1d;
    border: 1px solid #e8e8e4;
}
.ng-cart-empty__btn--ghost:hover {
    background: #ebf1ec;
    border-color: #d5e1d8;
    color: #122b1d;
    transform: translateY(-1px);
}

/* Блок «Нужна помощь» */
.ng-cart-empty__help {
    width: 100%;
    margin-top: 20px;
    padding-top: 24px;
    border-top: 1px solid #f0f0ec;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ng-cart-empty__help-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
}
.ng-cart-empty__help-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.ng-cart-empty__help-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    color: #122b1d;
    text-decoration: none;
}
.ng-cart-empty__help-phone .material-symbols-outlined {
    font-size: 20px !important;
}
.ng-cart-empty__help-phone:hover {
    color: #4a6453;
}
.ng-cart-empty__help-note {
    font-size: 13px;
    color: #59605c;
}

/* Мобильные */
@media (max-width: 640px) {
    .ng-cart-empty {
        margin: 24px 16px;
        padding: 40px 20px 32px;
        border-radius: 16px;
    }
    .ng-cart-empty__icon {
        width: 72px;
        height: 72px;
    }
    .ng-cart-empty__icon .material-symbols-outlined {
        font-size: 36px !important;
    }
    .ng-cart-empty__title {
        font-size: 22px;
        line-height: 30px;
    }
    .ng-cart-empty__text {
        font-size: 14px;
    }
    .ng-cart-empty__actions {
        flex-direction: column;
        width: 100%;
    }
    .ng-cart-empty__btn {
        width: 100%;
    }
    .ng-cart-empty__help-phone {
        font-size: 16px;
    }
    .ng-cart-empty__help-row {
        flex-direction: column;
        gap: 4px;
    }
}
/* =====================================================================
 * КОЛИЧЕСТВО В КОРЗИНЕ — кнопки «−» / «+»
 * ===================================================================== */

.ng-qty-wrap {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e3e8e4;
    border-radius: 10px;
    overflow: hidden;
    height: 44px;
    box-sizing: border-box;
}

.ng-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    color: #122b1d;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-family: inherit;
}

.ng-qty-btn .material-symbols-outlined {
    font-size: 20px !important;
    line-height: 1;
    pointer-events: none;
}

.ng-qty-btn:hover {
    background: #f4f4f0;
    color: #001509;
}

.ng-qty-btn:active {
    background: #e8e8e4;
}

.ng-qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent;
}

/* Сам инпут внутри обёртки */
.ng-qty-wrap input.qty,
.ng-qty-wrap input[type="number"] {
    width: 52px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid #e3e8e4;
    border-right: 1px solid #e3e8e4;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #001509 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.ng-qty-wrap input.qty::-webkit-outer-spin-button,
.ng-qty-wrap input.qty::-webkit-inner-spin-button,
.ng-qty-wrap input[type="number"]::-webkit-outer-spin-button,
.ng-qty-wrap input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Убираем дефолтную стрелочную индикацию в Firefox */
.ng-qty-wrap input.qty:focus,
.ng-qty-wrap input[type="number"]:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

/* Мобильные */
@media (max-width: 640px) {
    .ng-qty-wrap {
        height: 40px;
    }
    .ng-qty-btn {
        width: 36px;
    }
    .ng-qty-wrap input.qty,
    .ng-qty-wrap input[type="number"] {
        width: 44px !important;
        font-size: 14px !important;
    }
}
/* =====================================================================
 * КОРЗИНА — индикатор авто-обновления
 * ===================================================================== */

.ng-cart__main {
    position: relative;
    transition: opacity 0.2s;
}

.ng-cart__main.ng-cart--loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Индикатор в правом верхнем углу блока товаров */
.ng-cart__main.ng-cart--loading::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 22px;
    height: 22px;
    border: 2px solid #122b1d;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ng-cart-spin 0.7s linear infinite;
    z-index: 10;
}

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

/* Отключаем состояние disabled у кнопок −/+ в ng-qty (если пользователь сам хочет 0 и удалить — не блокируем) */
.ng-qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent;
}
/* =====================================================================
 * КОРЗИНА — кнопки «−» / «+» и индикатор авто-пересчёта
 * ===================================================================== */

.ng-qty-wrap {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e3e8e4;
    border-radius: 10px;
    overflow: hidden;
    height: 44px;
    box-sizing: border-box;
}
.ng-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    color: #122b1d;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-family: inherit;
}
.ng-qty-btn .material-symbols-outlined {
    font-size: 20px !important;
    line-height: 1;
    pointer-events: none;
}
.ng-qty-btn:hover { background: #f4f4f0; color: #001509; }
.ng-qty-btn:active { background: #e8e8e4; }
.ng-qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent;
}
.ng-qty-wrap input.qty,
.ng-qty-wrap input[type="number"] {
    width: 52px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid #e3e8e4;
    border-right: 1px solid #e3e8e4;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #001509 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
.ng-qty-wrap input.qty::-webkit-outer-spin-button,
.ng-qty-wrap input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Индикатор авто-пересчёта */
.ng-cart__main,
.ng-cart__sidebar {
    position: relative;
    transition: opacity 0.2s;
}
.ng-cart__main.ng-cart--loading,
.ng-cart__sidebar.ng-cart--loading {
    opacity: 0.5;
    pointer-events: none;
}
.ng-cart__main.ng-cart--loading::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 22px;
    height: 22px;
    border: 2px solid #122b1d;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ng-cart-spin 0.7s linear infinite;
    z-index: 10;
}
@keyframes ng-cart-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .ng-qty-wrap { height: 40px; }
    .ng-qty-btn { width: 36px; }
    .ng-qty-wrap input.qty {
        width: 44px !important;
        font-size: 14px !important;
    }
}
/* =====================================================================
 * ЧЕКАУТ — сетка полей и скрытие лишнего
 * ===================================================================== */

/* Скрытые поля (страна, область) */
.form-row-hidden {
    display: none !important;
}

/* Сетка для полей billing / shipping / order */
.ng-checkout .woocommerce-billing-fields__field-wrapper,
.ng-checkout .woocommerce-shipping-fields__field-wrapper,
.ng-checkout .woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Широкие поля — на обе колонки */
.ng-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
.ng-checkout .woocommerce-shipping-fields__field-wrapper .form-row-wide,
.ng-checkout .woocommerce-additional-fields__field-wrapper .form-row {
    grid-column: 1 / -1;
}

/* Убираем лишние отступы от WooCommerce — сетка сама задаёт gap */
.ng-checkout .form-row {
    margin-bottom: 0;
    padding: 0;
}

/* Мобильные — одна колонка */
@media (max-width: 640px) {
    .ng-checkout .woocommerce-billing-fields__field-wrapper,
    .ng-checkout .woocommerce-shipping-fields__field-wrapper,
    .ng-checkout .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
}
/* =====================================================================
 * ЧЕКАУТ — сетка, крупные поля, карта
 * ===================================================================== */

.ng-checkout .form-row-hidden,
.ng-checkout #ship-to-different-address {
    display: none !important;
}

.ng-checkout .woocommerce-billing-fields__field-wrapper,
.ng-checkout .woocommerce-additional-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 24px !important;
}
.ng-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
.ng-checkout .woocommerce-additional-fields__field-wrapper .form-row {
    grid-column: 1 / -1 !important;
}
.ng-checkout .form-row {
    margin: 0 !important;
    padding: 0 !important;
}
.ng-checkout .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #424843;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.ng-checkout .form-row label .required {
    color: #ba1a1a;
    text-decoration: none;
    margin-left: 2px;
}
.ng-checkout .form-row input[type="text"],
.ng-checkout .form-row input[type="email"],
.ng-checkout .form-row input[type="tel"],
.ng-checkout .form-row input[type="number"],
.ng-checkout .form-row select,
.ng-checkout .form-row textarea {
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 18px !important;
    background: #f8f9f7 !important;
    border: 1px solid #e3e8e4 !important;
    border-radius: 14px !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #122b1d !important;
    outline: 0 !important;
    box-shadow: none !important;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
    box-sizing: border-box !important;
}
.ng-checkout .form-row textarea {
    min-height: 96px !important;
    padding: 14px 18px !important;
    resize: vertical;
}
.ng-checkout .form-row input::placeholder,
.ng-checkout .form-row textarea::placeholder {
    color: #a5aea8;
    font-size: 14px;
}
.ng-checkout .form-row input:hover,
.ng-checkout .form-row select:hover,
.ng-checkout .form-row textarea:hover {
    background: #ffffff !important;
    border-color: #c2c8c1 !important;
}
.ng-checkout .form-row input:focus,
.ng-checkout .form-row select:focus,
.ng-checkout .form-row textarea:focus {
    background: #ffffff !important;
    border-color: #122b2d !important;
    box-shadow: 0 0 0 4px rgba(18, 43, 29, 0.12) !important;
}
.ng-checkout .form-row.woocommerce-invalid input,
.ng-checkout .form-row.woocommerce-invalid select {
    border-color: #ba1a1a !important;
    background: #fff5f5 !important;
}

/* Карта */
.ng-checkout-map-block {
    margin-top: 24px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e3e8e4;
    border-radius: 16px;
}
.ng-checkout-map-title {
    font-size: 18px;
    font-weight: 600;
    color: #001509;
    margin: 0 0 6px;
}
.ng-checkout-map-hint {
    font-size: 13px;
    color: #59605c;
    margin: 0 0 16px;
    line-height: 1.5;
}
.ng-checkout-map-geo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f4f4f0;
    color: #122b1d;
    border: 0;
    border-radius: 10px;
    padding: 12px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
    transition: background 0.2s;
}
.ng-checkout-map-geo-btn:hover:not(:disabled) { background: #ebf1ec; }
.ng-checkout-map-geo-btn:disabled { opacity: 0.6; cursor: wait; }
.ng-checkout-map-geo-btn .material-symbols-outlined { font-size: 18px !important; }
.ng-checkout-map {
    width: 100%;
    height: 380px;
    border-radius: 12px;
    overflow: hidden;
    background: #f4f4f0;
}

/* Suggest */
.ymaps-2-1-79-suggest,
.ymaps-2-1-79-islets_serp-popup {
    background: #ffffff !important;
    border: 1px solid #e3e8e4 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(18, 43, 29, 0.14) !important;
    padding: 8px !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    margin-top: 6px !important;
    z-index: 99999 !important;
}
.ymaps-2-1-79-suggest__item,
.ymaps-2-1-79-islets_serp-popup__item {
    padding: 12px 16px !important;
    font-size: 15px !important;
    color: #122b1d !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background 0.12s !important;
    border: 0 !important;
}
.ymaps-2-1-79-suggest__item:hover,
.ymaps-2-1-79-suggest__item_active,
.ymaps-2-1-79-islets_serp-popup__item:hover,
.ymaps-2-1-79-islets_serp-popup__item_active {
    background: #ebf1ec !important;
    color: #001509 !important;
}

@media (max-width: 640px) {
    .ng-checkout .woocommerce-billing-fields__field-wrapper,
    .ng-checkout .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .ng-checkout .form-row input,
    .ng-checkout .form-row select,
    .ng-checkout .form-row textarea {
        min-height: 50px !important;
        padding: 13px 16px !important;
        font-size: 16px !important;
    }
    .ng-checkout-map { height: 300px; }
}
#billing_city_field,
#billing_state_field,
#billing_country_field {
    display: none !important;
}
.ng-checkout .form-row-hidden {
    display: none !important;
}
.ng-checkout .woocommerce-billing-fields__field-wrapper,
.ng-checkout .woocommerce-additional-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 24px !important;
}
.ng-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
.ng-checkout .woocommerce-additional-fields__field-wrapper .form-row {
    grid-column: 1 / -1 !important;
}
.ng-checkout .form-row {
    margin: 0 !important;
    padding: 0 !important;
}
.ng-checkout .form-row input[type="text"],
.ng-checkout .form-row input[type="email"],
.ng-checkout .form-row input[type="tel"],
.ng-checkout .form-row select,
.ng-checkout .form-row textarea {
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 18px !important;
    background: #f8f9f7 !important;
    border: 1px solid #e3e8e4 !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    color: #122b1d !important;
    outline: 0 !important;
    box-sizing: border-box !important;
}
.ng-checkout .form-row input:focus,
.ng-checkout .form-row select:focus,
.ng-checkout .form-row textarea:focus {
    background: #ffffff !important;
    border-color: #122b1d !important;
    box-shadow: 0 0 0 4px rgba(18, 43, 29, 0.12) !important;
}
@media (max-width: 640px) {
    .ng-checkout .woocommerce-billing-fields__field-wrapper,
    .ng-checkout .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: 1fr !important;
    }
}
.ng-checkout .form-row-hidden {
    display: none !important;
}
/* =====================================================================
 * ЧЕКАУТ — сетка полей и подсказки адреса
 * ===================================================================== */

/* ---- Сетка 2 колонки ---- */
.ng-checkout .woocommerce-billing-fields__field-wrapper,
.ng-checkout .woocommerce-additional-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 24px !important;
}

.ng-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
.ng-checkout .woocommerce-additional-fields__field-wrapper .form-row {
    grid-column: 1 / -1 !important;
}

.ng-checkout .form-row {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* ---- Поля ввода: крупные, ничего не обрезается ---- */
.ng-checkout .form-row input[type="text"],
.ng-checkout .form-row input[type="email"],
.ng-checkout .form-row input[type="tel"],
.ng-checkout .form-row input[type="number"],
.ng-checkout .form-row select,
.ng-checkout .form-row textarea {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 14px 18px !important;
    background: #f8f9f7 !important;
    border: 1px solid #e3e8e4 !important;
    border-radius: 14px !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #122b1d !important;
    outline: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis !important;
}

/* Поле адреса — крупнее, чтобы влезали длинные названия */
.ng-checkout #billing_address_1 {
    font-size: 15px !important;
    padding-right: 44px !important; /* запас, если внутри появится иконка */
}

/* ---- ПОДСКАЗКИ SUGGEST — НЕ ПЕРЕКРЫВАЮТ ПОЛЕ ---- */

/* Обёртка поля адреса — relative, чтобы подсказка знала, откуда считать */
.ng-checkout .form-row {
    position: relative !important;
}

/* Сдвигаем подсказку вниз, чтобы не накрывала поле */
.ymaps-2-1-79-suggest,
.ymaps-2-1-79-islets_serp-popup {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 6px !important;   /* отступ от поля */
    background: #ffffff !important;
    border: 1px solid #e3e8e4 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(18, 43, 29, 0.14) !important;
    padding: 6px !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    z-index: 99999 !important;
    max-height: 320px !important;
    overflow-y: auto !important;
}

.ymaps-2-1-79-suggest__item,
.ymaps-2-1-79-islets_serp-popup__item {
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #122b1d !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background 0.12s !important;
    border: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
}

.ymaps-2-1-79-suggest__item:hover,
.ymaps-2-1-79-suggest__item_active,
.ymaps-2-1-79-islets_serp-popup__item:hover,
.ymaps-2-1-79-islets_serp-popup__item_active {
    background: #ebf1ec !important;
    color: #001509 !important;
}

/* Скрытые поля */
.ng-checkout .form-row-hidden {
    display: none !important;
}

/* Форс-обёртка для полей billing — только внешний контейнер сбрасываем */
.woocommerce-billing-fields {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

/* Внутренняя обёртка — вот здесь должна быть сетка */
.ng-checkout .woocommerce-billing-fields__field-wrapper,
.ng-checkout .woocommerce-additional-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 24px !important;
    width: 100% !important;
}

/* form-row-first / form-row-last НЕ растягиваем на всю ширину —
   они должны занимать свою grid-ячейку */
.woocommerce-billing-fields .form-row-first,
.woocommerce-billing-fields .form-row-last {
    width: auto !important;
    float: none !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
}

/* Широкие поля — на обе колонки */
.ng-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
.ng-checkout .woocommerce-additional-fields__field-wrapper .form-row {
    grid-column: 1 / -1 !important;
}

/* Поля — крупные, ничего не обрезается */
.ng-checkout .form-row {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.ng-checkout .form-row input[type="text"],
.ng-checkout .form-row input[type="email"],
.ng-checkout .form-row input[type="tel"],
.ng-checkout .form-row select,
.ng-checkout .form-row textarea {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 14px 18px !important;
    background: #f8f9f7 !important;
    border: 1px solid #e3e8e4 !important;
    border-radius: 14px !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #122b1d !important;
    outline: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis !important;
}
.ng-checkout .form-row input:focus,
.ng-checkout .form-row select:focus,
.ng-checkout .form-row textarea:focus {
    background: #ffffff !important;
    border-color: #122b1d !important;
    box-shadow: 0 0 0 4px rgba(18, 43, 29, 0.12) !important;
}

/* Скрытые поля (город, область, индекс, страна) */
.ng-checkout .form-row-hidden,
#billing_city_field,
#billing_state_field,
#billing_country_field {
    display: none !important;
}

/* Мобильные — 1 колонка */
@media (max-width: 640px) {
    .ng-checkout .woocommerce-billing-fields__field-wrapper,
    .ng-checkout .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .ng-checkout .form-row input,
    .ng-checkout .form-row select,
    .ng-checkout .form-row textarea {
        font-size: 16px !important;
        min-height: 50px !important;
    }
}
/* ============================================================
 * САМОВЫВОЗ НА ЧЕКАУТЕ — карточка-переключатель
 * ============================================================ */
.ng-pickup-toggle { margin: 16px 0 8px; }
.ng-pickup-toggle__card { display: block; cursor: pointer; position: relative; }
.ng-pickup-toggle__input { position: absolute; opacity: 0; pointer-events: none; }

.ng-pickup-toggle__content {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 2px solid #E3E8E4;
    border-radius: 16px;
    transition: all 0.2s ease;
}
.ng-pickup-toggle__card:hover .ng-pickup-toggle__content {
    border-color: #C2C8C1;
    background: #FAFBF9;
}
.ng-pickup-toggle__input:checked + .ng-pickup-toggle__content {
    border-color: #122B1D;
    background: #EBF1EC;
    box-shadow: 0 4px 12px rgba(18, 43, 29, 0.08);
}
.ng-pickup-toggle__icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: #F4F4F0; color: #122B1D;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s ease;
}
.ng-pickup-toggle__input:checked + .ng-pickup-toggle__content .ng-pickup-toggle__icon {
    background: #122B1D; color: #CCEAD4;
}
.ng-pickup-toggle__icon .material-symbols-outlined { font-size: 22px !important; }
.ng-pickup-toggle__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ng-pickup-toggle__title { font-size: 15px; font-weight: 600; color: #001509; line-height: 1.3; }
.ng-pickup-toggle__desc  { font-size: 12px; color: #59605C; line-height: 1.4; }
.ng-pickup-toggle__check {
    width: 32px; height: 32px; border-radius: 50%;
    background: #F4F4F0; color: #C2C8C1;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s ease;
}
.ng-pickup-toggle__input:checked + .ng-pickup-toggle__content .ng-pickup-toggle__check {
    background: #122B1D; color: #ffffff;
}
.ng-pickup-toggle__check .material-symbols-outlined {
    font-size: 20px !important;
    font-variation-settings: 'FILL' 0, 'wght' 400;
    opacity: 0.4;
    transition: all 0.2s;
}
.ng-pickup-toggle__input:checked + .ng-pickup-toggle__content .ng-pickup-toggle__check .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600;
    opacity: 1;
}

/* Поле адреса в состоянии «самовывоз» */
#billing_address_1_field.ng-address-disabled {
    opacity: 0.4;
    pointer-events: none;
    position: relative;
}
#billing_address_1_field.ng-address-disabled::after {
    content: 'Адрес не нужен — вы забираете сами';
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #59605C;
    font-style: italic;
}

@media (max-width: 640px) {
    .ng-pickup-toggle__content { padding: 14px; gap: 12px; }
    .ng-pickup-toggle__icon    { width: 40px; height: 40px; }
    .ng-pickup-toggle__title   { font-size: 14px; }
    .ng-pickup-toggle__desc    { font-size: 11px; }
}
/* Скрыть карту на странице «Спасибо за заказ» */
body.woocommerce-order-received .ng-checkout-map-block,
.woocommerce-order-received .ng-checkout-map-block {
    display: none !important;
}
/* ============================================================
 * АДРЕСА КЛИЕНТА В ПРОФИЛЕ (Этап 2)
 * ============================================================ */

.ng-addr-list {
	margin-top: 24px;
}

.ng-addr-list__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.ng-addr-list__counter {
	font-size: 12px;
	font-weight: 600;
	color: #59605C;
	background: #F4F4F0;
	padding: 4px 10px;
	border-radius: 999px;
}

.ng-addr-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 32px 20px;
	background: #FAFBF9;
	border: 1px dashed #D5E1D8;
	border-radius: 14px;
	text-align: center;
	color: #59605C;
}
.ng-addr-empty .material-symbols-outlined {
	font-size: 40px !important;
	color: #C2C8C1;
}
.ng-addr-empty p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	max-width: 400px;
}

.ng-addr-cards {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ng-addr-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px;
	background: #FFFFFF;
	border: 2px solid #E3E8E4;
	border-radius: 14px;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.ng-addr-card:hover {
	border-color: #C2C8C1;
}
.ng-addr-card.is-default {
	border-color: #122B1D;
	background: #EBF1EC;
}

.ng-addr-card__top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}
.ng-addr-card__label {
	font-size: 13px;
	font-weight: 700;
	color: #122B1D;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ng-addr-card__badge {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #072013;
	background: #CCEAD4;
	padding: 2px 8px;
	border-radius: 999px;
}
.ng-addr-card__line {
	font-size: 14px;
	line-height: 1.5;
	color: #1A1C1A;
	word-break: break-word;
}

.ng-addr-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 4px;
	border-top: 1px solid #F0F2EE;
}
.ng-addr-card.is-default .ng-addr-card__actions {
	border-top-color: rgba(18, 43, 29, 0.1);
}

.ng-addr-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	background: #F4F4F0;
	color: #122B1D;
	white-space: nowrap;
}
.ng-addr-btn:hover {
	background: #E8E8E4;
}
.ng-addr-btn--ghost {
	background: transparent;
	color: #59605C;
	border: 1px solid #E3E8E4;
}
.ng-addr-btn--ghost:hover {
	background: #F4F4F0;
	color: #122B1D;
}
.ng-addr-btn--danger {
	background: transparent;
	color: #93000A;
	border: 1px solid #F0CFC9;
}
.ng-addr-btn--danger:hover {
	background: #FFF1EF;
}

.ng-addr-add {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	background: #FFFFFF;
	color: #122B1D;
	border: 2px dashed #C2C8C1;
	border-radius: 12px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	width: 100%;
	justify-content: center;
}
.ng-addr-add:hover {
	background: #F4F4F0;
	border-color: #122B1D;
}
.ng-addr-add .material-symbols-outlined {
	font-size: 20px !important;
}

.ng-addr-limit {
	padding: 14px 18px;
	background: #FFF8E1;
	border-radius: 12px;
	font-size: 13px;
	color: #6F380E;
	text-align: center;
}

/* ---------- Форма (модалка) ---------- */
.ng-addr-form-wrap {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow-y: auto;
}
.ng-addr-form-wrap[hidden] {
	display: none !important;
}

.ng-addr-form-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(18, 43, 29, 0.55);
	backdrop-filter: blur(4px);
}

.ng-addr-form {
	position: relative;
	width: 100%;
	max-width: 520px;
	background: #FFFFFF;
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	margin: auto;
}

.ng-addr-form__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px;
	border-bottom: 1px solid #F0F2EE;
}
.ng-addr-form__head h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #122B1D;
}
.ng-addr-form__close {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #F4F4F0;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	color: #59605C;
}
.ng-addr-form__close:hover {
	background: #E8E8E4;
	color: #122B1D;
}
.ng-addr-form__close .material-symbols-outlined {
	font-size: 20px !important;
}

.ng-addr-form__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 24px 24px;
}

.ng-cab-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #1A1C1A;
	cursor: pointer;
	user-select: none;
}
.ng-cab-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #122B1D;
	cursor: pointer;
}

.ng-addr-geo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: #F4F4F0;
	color: #122B1D;
	border: 0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	align-self: flex-start;
	transition: background 0.15s;
}
.ng-addr-geo:hover:not(:disabled) {
	background: #E8E8E4;
}
.ng-addr-geo:disabled {
	opacity: 0.6;
	cursor: wait;
}
.ng-addr-geo .material-symbols-outlined {
	font-size: 18px !important;
}

.ng-addr-form__status {
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.4;
}
.ng-addr-form__status.is-ok {
	background: #CCEAD4;
	color: #072013;
}
.ng-addr-form__status.is-error {
	background: #FFDAD6;
	color: #93000A;
}

.ng-addr-form__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 6px;
}

/* ---------- Мобильные ---------- */
@media (max-width: 640px) {
	.ng-addr-card {
		padding: 12px 14px;
	}
	.ng-addr-card__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.ng-addr-btn {
		justify-content: center;
	}
	.ng-addr-form__head,
	.ng-addr-form__body {
		padding-left: 18px;
		padding-right: 18px;
	}
	.ng-addr-form__actions {
		flex-direction: column-reverse;
	}
	.ng-addr-form__actions .ng-cab-btn {
		width: 100%;
	}
}
/* ============================================================
 * ЧЕКАУТ — пикер «Мои адреса»
 * ============================================================ */

.ng-address-picker {
    margin: 0 0 20px 0;
    padding: 14px 16px;
    background: #FAFBF9;
    border: 1px solid #E3E8E4;
    border-radius: 14px;
}

.ng-address-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ng-address-picker__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605C;
}
.ng-address-picker__add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #FFFFFF;
    color: #122B1D;
    border: 1px solid #D5E1D8;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.ng-address-picker__add:hover {
    background: #EBF1EC;
}
.ng-address-picker__add .material-symbols-outlined {
    font-size: 16px !important;
}

.ng-address-picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ng-address-picker__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 2px solid #E3E8E4;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ng-address-picker__item:hover {
    border-color: #C2C8C1;
}
.ng-address-picker__item.is-selected {
    border-color: #122B1D;
    background: #EBF1EC;
    box-shadow: 0 2px 8px rgba(18, 43, 29, 0.06);
}

.ng-address-picker__radio {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #C2C8C1;
    background: #FFFFFF;
    position: relative;
    margin-top: 2px;
    transition: border-color 0.15s;
}
.ng-address-picker__item.is-selected .ng-address-picker__radio {
    border-color: #122B1D;
}
.ng-address-picker__item.is-selected .ng-address-picker__radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #122B1D;
}

.ng-address-picker__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.ng-address-picker__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #122B1D;
}
.ng-address-picker__badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #072013;
    background: #CCEAD4;
    padding: 2px 8px;
    border-radius: 999px;
}
.ng-address-picker__line {
    font-size: 13px;
    color: #1A1C1A;
    line-height: 1.45;
    word-break: break-word;
}

@media (max-width: 640px) {
    .ng-address-picker__item {
        padding: 10px 12px;
    }
    .ng-address-picker__name {
        font-size: 12px;
        flex-wrap: wrap;
    }
    .ng-address-picker__line {
        font-size: 12px;
    }
}
/* ============================================================
 * ЛОГИСТИКА — пригороды городов
 * ============================================================ */

/* Кнопка «Пригороды (N)» в строке города */
.ng-cities__suburbs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #f4f4f0;
    color: #122b1d;
    border: 0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 6px;
    transition: background 0.15s;
}
.ng-cities__suburbs-toggle:hover {
    background: #eeeeea;
}
.ng-cities__suburbs-toggle .material-symbols-outlined {
    font-size: 16px !important;
    transition: transform 0.2s;
}
.ng-cities__suburbs-toggle.is-open .material-symbols-outlined {
    transform: rotate(180deg);
}
.ng-cities__suburbs-toggle span[data-suburbs-count] {
    min-width: 16px;
    text-align: center;
}

/* Ячейка с пригородами — на всю ширину, без внутренних отступов */
.ng-cities__suburbs-row td {
    padding: 0 !important;
    background: #fafbf9 !important;
    border-bottom: 1px solid #e8e8e4 !important;
    /* Отменяем возможные ограничения от таблицы */
    display: table-cell !important;
    width: auto !important;
}

/* Обёртка панели пригородов */
.ng-cities__suburbs {
    padding: 14px 18px 16px;
    background: #fafbf9;
    box-sizing: border-box;
}

/* Заголовок панели пригородов — сетка 1fr 140px 32px */
.ng-cities__suburbs-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 140px 32px !important;
    gap: 12px;
    padding: 0 0 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59605c;
    border-bottom: 1px solid #e8e8e4;
    margin-bottom: 8px;
    align-items: center;
}

/* Тело панели — колонка строк пригородов */
.ng-cities__suburbs-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

/* Одна строка пригорода — та же сетка 1fr 140px 32px */
.ng-cities__suburb {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 140px 32px !important;
    gap: 12px;
    align-items: center;
}

/* Поля пригорода — компактные */
.ng-cities__suburb .ng-cities__input {
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    background: #ffffff !important;
    border: 1px solid #e3e8e4 !important;
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.ng-cities__suburb .ng-cities__input--suburb-name {
    min-width: 0;
}
.ng-cities__suburb .ng-cities__input--suburb-price {
    text-align: right;
    margin: 0 !important;
    max-width: none !important;
    display: block !important;
}
.ng-cities__suburb .ng-cities__input:focus {
    background: #ffffff !important;
    border-color: #122b1d !important;
    outline: 0 !important;
}

/* Кнопка «×» — компактная */
.ng-cities__suburb-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    background: #ffdad6;
    color: #93000a;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.ng-cities__suburb-remove:hover {
    background: #ffc9c4;
}
.ng-cities__suburb-remove .material-symbols-outlined {
    font-size: 16px !important;
    line-height: 1;
}

/* Кнопка «+ Добавить пригород» */
.ng-cities__suburb-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #ffffff;
    color: #122b1d;
    border: 1px dashed #c2c8c1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ng-cities__suburb-add:hover {
    background: #ebf1ec;
    border-color: #122b1d;
}
.ng-cities__suburb-add .material-symbols-outlined {
    font-size: 16px !important;
}

/* Подсказка под кнопкой */
.ng-cities__suburbs-hint {
    margin: 8px 0 0;
    font-size: 11px;
    color: #727973;
    line-height: 1.4;
}

/* Мобильная адаптация */
@media (max-width: 640px) {
    .ng-cities__suburbs-head,
    .ng-cities__suburb {
        grid-template-columns: minmax(0, 1fr) 90px 32px !important;
        gap: 8px !important;
    }
    .ng-cities__suburbs {
        padding: 10px 12px 12px;
    }
    .ng-cities__suburb .ng-cities__input {
        height: 38px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}
/* =====================================================================
   ЛК: Логистика — кнопка парсинга пригородов через Яндекс
   ===================================================================== */

.ng-cities__parse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-right: 6px;
    border: 0;
    border-radius: 6px;
    background: #ebf1ec;
    color: #122b1d;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    vertical-align: middle;
}
.ng-cities__parse-btn:hover:not(:disabled) {
    background: #ccead4;
    color: #001509;
}
.ng-cities__parse-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.ng-cities__parse-btn .material-symbols-outlined {
    font-size: 16px !important;
    line-height: 1;
}

/* Мобильная адаптация */
@media (max-width: 640px) {
    .ng-cities__parse-btn {
        width: 30px;
        height: 30px;
    }
    .ng-cities__parse-btn .material-symbols-outlined {
        font-size: 14px !important;
    }
}

/* =====================================================================
   ЛК: Сотрудники — кнопки действий в таблице
   ===================================================================== */

.ng-staff-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    white-space: nowrap;
}

.ng-staff-actions .ng-customers__view-btn {
    background: #f4f4f0;
    color: #122b1d;
}
.ng-staff-actions .ng-customers__view-btn:hover {
    background: #ebf1ec;
    color: #001509;
}

.ng-staff-actions .ng-staff-delete-btn {
    background: #ffdad6;
    color: #93000a;
}
.ng-staff-actions .ng-staff-delete-btn:hover {
    background: #ffc9c4;
    color: #7a0008;
}

.ng-staff__table-wrap {
    margin-top: 0;
}

@media (max-width: 640px) {
    .ng-staff-actions {
        flex-direction: column;
        gap: 4px;
    }
}

/* =====================================================================
   ЛК СБОРЩИКА (page-picker-cabinet.php)
   ===================================================================== */

.ng-picker {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 16px 80px;
}
@media (min-width: 1024px) {
    .ng-picker { padding: 32px 40px 100px; }
}

/* Шапка */
.ng-picker__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.ng-picker__header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ng-picker__title {
    font-size: 28px;
    font-weight: 600;
    color: #122b1d;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.ng-picker__subtitle {
    font-size: 14px;
    color: #59605c;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ng-picker__role {
    font-weight: 600;
    color: #122b1d;
}
.ng-picker__badge-admin {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: #ffdbc7;
    color: #421b00;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.ng-picker__header-right {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.ng-picker__logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #f4f4f0;
    color: #59605c;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.ng-picker__logout:hover {
    background: #fff1ef;
    color: #93000a;
}
.ng-picker__logout .material-symbols-outlined { font-size: 18px !important; }

/* Вкладки */
.ng-picker__tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: #f4f4f0;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ng-picker__tabs::-webkit-scrollbar { display: none; }

.ng-picker__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #424843;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.ng-picker__tab .material-symbols-outlined { font-size: 18px !important; }
.ng-picker__tab:hover { background: #eeeeea; color: #001509; }
.ng-picker__tab.is-active {
    background: #122b1d;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(18,43,29,.2);
}
.ng-picker__tab.is-active .material-symbols-outlined { color: #ccead4; }

/* Карточка контента */
.ng-picker__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ng-picker__card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(18,43,29,.06);
    border: 1px solid #e8e8e4;
    overflow: hidden;
}
.ng-picker__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f2ee;
    background: #fafbf9;
}
.ng-picker__card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #122b1d;
    margin: 0;
}
.ng-picker__card-title .material-symbols-outlined {
    font-size: 22px !important;
    color: #4a6453;
}
.ng-picker__refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #f4f4f0;
    color: #122b1d;
    cursor: pointer;
    transition: background .15s, transform .2s;
}
.ng-picker__refresh:hover { background: #ebf1ec; }
.ng-picker__refresh:active { transform: rotate(180deg); }
.ng-picker__refresh .material-symbols-outlined { font-size: 20px !important; }

.ng-picker__card-body {
    padding: 20px;
}

/* Пустое состояние */
.ng-picker__empty {
    text-align: center;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ng-picker__empty .material-symbols-outlined {
    font-size: 48px !important;
    color: #c2c8c1;
}
.ng-picker__empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: #122b1d;
    margin: 0;
}
.ng-picker__empty p {
    font-size: 13px;
    color: #59605c;
    margin: 0;
    max-width: 400px;
    line-height: 1.5;
}

/* Мобильные */
@media (max-width: 640px) {
    .ng-picker { padding: 16px 12px 60px; }
    .ng-picker__title { font-size: 22px; }
    .ng-picker__header { flex-direction: column; align-items: stretch; }
    .ng-picker__header-right { align-self: flex-end; }
    .ng-picker__tabs { padding: 4px; gap: 4px; }
    .ng-picker__tab { padding: 8px 12px; font-size: 12px; gap: 6px; }
    .ng-picker__tab .material-symbols-outlined { font-size: 16px !important; }
    .ng-picker__card-body { padding: 14px; }
    .ng-picker__card-head { padding: 12px 14px; }
    .ng-picker__card-title { font-size: 15px; }
    .ng-picker__empty { padding: 32px 16px; }
}

/* ===== ЛК сборщика: список заказов ===== */

.ng-picker__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ng-picker-card {
    background: #ffffff;
    border: 1px solid #e8e8e4;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.ng-picker-card:hover {
    border-color: #c9d3cb;
    box-shadow: 0 4px 16px rgba(18,43,29,.06);
}

.ng-picker-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #fafbf9;
    border-bottom: 1px solid #f0f2ee;
    flex-wrap: wrap;
}
.ng-picker-card__num {
    font-size: 14px;
    color: #59605c;
}
.ng-picker-card__num strong {
    font-size: 16px;
    color: #122b1d;
    font-weight: 700;
}
.ng-picker-card__date {
    font-size: 12px;
    color: #59605c;
}

.ng-picker-card__body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ng-picker-card__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #1a1c1a;
}
.ng-picker-card__row .material-symbols-outlined {
    font-size: 18px !important;
    color: #59605c;
    flex-shrink: 0;
    margin-top: 1px;
}
.ng-picker-card__label {
    color: #59605c;
    font-size: 13px;
    flex-shrink: 0;
}
.ng-picker-card__value {
    color: #001509;
    font-weight: 500;
    min-width: 0;
    word-break: break-word;
}
.ng-picker-card__phone {
    color: #122b1d;
    text-decoration: none;
    font-weight: 600;
}
.ng-picker-card__phone:hover {
    color: #4a6453;
    text-decoration: underline;
}
.ng-picker-card__row--taken {
    padding-top: 8px;
    border-top: 1px dashed #e8e8e4;
    color: #4a6453;
}
.ng-picker-card__row--taken .material-symbols-outlined,
.ng-picker-card__row--taken .ng-picker-card__value {
    color: #4a6453;
}

.ng-picker-card__actions {
    padding: 12px 16px;
    border-top: 1px solid #f0f2ee;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ng-picker-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    transition: background .15s, transform .1s;
    flex: 1 1 auto;
    min-width: 140px;
}
.ng-picker-card__btn .material-symbols-outlined {
    font-size: 18px !important;
}
.ng-picker-card__btn--primary {
    background: #122b1d;
    color: #ffffff;
}
.ng-picker-card__btn--primary:hover {
    background: #1b3f2b;
    transform: translateY(-1px);
}
.ng-picker-card__btn--ghost {
    background: #f4f4f0;
    color: #122b1d;
    border: 1px solid #e8e8e4;
}
.ng-picker-card__btn--ghost:hover {
    background: #ebf1ec;
}

@media (max-width: 640px) {
    .ng-picker-card__actions { padding: 10px 12px; }
    .ng-picker-card__btn {
        min-width: 0;
        width: 100%;
    }
}

/* ===== ЛК сборщика: модалка заказа ===== */

.ng-picker-modal__dialog {
    max-width: 720px;
    width: 100%;
}

.ng-picker-order {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ng-picker-order__status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ng-picker-order__status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f4f4f0;
    color: #424843;
}
.ng-picker-order__status-badge--processing { background: #dae1dc; color: #161d1a; }
.ng-picker-order__status-badge--ready      { background: #ccead4; color: #072013; }
.ng-picker-order__status-badge--completed  { background: #ccead4; color: #072013; }
.ng-picker-order__status-badge--cancelled  { background: #ffdad6; color: #93000a; }
.ng-picker-order__status-badge--ng-new     { background: #fff3cd; color: #6f380e; }

.ng-picker-order__taken {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #4a6453;
    font-weight: 600;
}
.ng-picker-order__taken .material-symbols-outlined {
    font-size: 16px !important;
}

.ng-picker-order__section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ng-picker-order__section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #59605c;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8e8e4;
}
.ng-picker-order__section-title .material-symbols-outlined {
    font-size: 18px !important;
    color: #4a6453;
}
.ng-picker-order__counter {
    margin-left: auto;
    font-size: 12px;
    padding: 2px 10px;
    background: #f4f4f0;
    color: #122b1d;
    border-radius: 999px;
    font-weight: 700;
}

.ng-picker-order__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
@media (min-width: 640px) {
    .ng-picker-order__grid { grid-template-columns: 1fr 1fr; gap: 6px 20px; }
}
.ng-picker-order__row {
    display: flex;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
}
.ng-picker-order__row--wide {
    grid-column: 1 / -1;
}
.ng-picker-order__label {
    color: #59605c;
    flex-shrink: 0;
    min-width: 82px;
}
.ng-picker-order__value {
    color: #001509;
    font-weight: 500;
    min-width: 0;
    word-break: break-word;
}
.ng-picker-order__value a {
    color: #122b1d;
    text-decoration: none;
    font-weight: 600;
}
.ng-picker-order__value a:hover { text-decoration: underline; }
.ng-picker-order__phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ng-picker-order__phone .material-symbols-outlined {
    font-size: 16px !important;
}
.ng-picker-order__row--note .ng-picker-order__value {
    color: #7a4d16;
    font-style: italic;
}

/* Позиции — крупные кнопки */
.ng-picker-order__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ng-picker-order__item {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    background: #ffffff;
    border: 2px solid #e3e8e4;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    width: 100%;
    min-height: 56px;
}
.ng-picker-order__item:hover {
    border-color: #c9d3cb;
    background: #fafbf9;
}
.ng-picker-order__item.is-picked {
    background: #ebf1ec;
    border-color: #122b1d;
}
.ng-picker-order__item.is-missing {
    background: #fff1ef;
    border-color: #f0cfc9;
}
.ng-picker-order__item-mark {
    font-size: 20px;
    font-weight: 700;
    color: #59605c;
    text-align: center;
}
.ng-picker-order__item.is-picked  .ng-picker-order__item-mark { color: #122b1d; }
.ng-picker-order__item.is-missing .ng-picker-order__item-mark { color: #93000a; }

.ng-picker-order__item-name {
    font-size: 14px;
    font-weight: 600;
    color: #001509;
    min-width: 0;
    word-break: break-word;
}
.ng-picker-order__item.is-picked  .ng-picker-order__item-name { color: #122b1d; }
.ng-picker-order__item.is-missing .ng-picker-order__item-name {
    color: #93000a;
    text-decoration: line-through;
}
.ng-picker-order__item-qty {
    font-size: 13px;
    color: #59605c;
    white-space: nowrap;
}
.ng-picker-order__item-total {
    font-size: 14px;
    font-weight: 700;
    color: #001509;
    white-space: nowrap;
}

.ng-picker-order__items-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #59605c;
    line-height: 1.5;
}

.ng-picker-order__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 16px;
    border-top: 1px solid #e8e8e4;
    font-size: 15px;
    color: #424843;
}
.ng-picker-order__total strong {
    font-size: 22px;
    font-weight: 700;
    color: #001509;
}

/* =====================================================================
 * ЛК СБОРЩИКА — ПОЗИЦИИ ЗАКАЗА (две кнопки вместо кликов по циклу)
 * Дописано в конец файла, чтобы не искать в середине.
 * Перебивает старые стили .ng-picker-order__item*.
 * ===================================================================== */

/* Скрываем старые кнопки-циклы, если они где-то остались */
.ng-picker-order__item,
.ng-picker-order__item-mark,
.ng-picker-order__item-qty,
.ng-picker-order__item-total {
    display: none !important;
}

/* Контейнер позиций */
.ng-picker-order__items {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Карточка позиции — две кнопки */
.ng-picker-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border: 2px solid #e3e8e4 !important;
    border-radius: 14px !important;
    transition: background 0.15s, border-color 0.15s !important;
}
.ng-picker-item.is-picked {
    background: #ebf1ec !important;
    border-color: #122b1d !important;
}
.ng-picker-item.is-missing {
    background: #fff1ef !important;
    border-color: #f0cfc9 !important;
}

/* Заголовок позиции: название + метаданные */
.ng-picker-item__head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.ng-picker-item__name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #001509 !important;
    line-height: 1.35 !important;
    min-width: 0 !important;
    word-break: break-word !important;
    flex: 1 1 60% !important;
}
.ng-picker-item.is-picked .ng-picker-item__name {
    color: #122b1d !important;
}
.ng-picker-item.is-missing .ng-picker-item__name {
    color: #93000a !important;
    text-decoration: line-through !important;
}
.ng-picker-item__meta {
    font-size: 13px !important;
    color: #59605c !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

/* Кнопки «Собрано» / «Нет в наличии» */
.ng-picker-item__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}
.ng-picker-item__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    border: 1px solid #e3e8e4 !important;
    background: #ffffff !important;
    color: #59605c !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s !important;
    min-height: 44px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}
.ng-picker-item__btn .material-symbols-outlined {
    font-size: 18px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}
.ng-picker-item__btn:hover:not(:disabled) {
    background: #f4f4f0 !important;
    color: #122b1d !important;
}
.ng-picker-item__btn:active:not(:disabled) {
    transform: scale(0.98) !important;
}
.ng-picker-item__btn:disabled {
    opacity: 0.5 !important;
    cursor: wait !important;
}

/* Активное «Собрано» — тёмно-зелёный */
.ng-picker-item__btn--picked.is-active {
    background: #122b1d !important;
    color: #ffffff !important;
    border-color: #122b1d !important;
}
.ng-picker-item__btn--picked.is-active .material-symbols-outlined {
    color: #ccead4 !important;
}
.ng-picker-item__btn--picked.is-active:hover:not(:disabled) {
    background: #1b3f2b !important;
    color: #ffffff !important;
}

/* Активное «Нет в наличии» — тёмно-красный */
.ng-picker-item__btn--missing.is-active {
    background: #93000a !important;
    color: #ffffff !important;
    border-color: #93000a !important;
}
.ng-picker-item__btn--missing.is-active .material-symbols-outlined {
    color: #ffdad6 !important;
}
.ng-picker-item__btn--missing.is-active:hover:not(:disabled) {
    background: #b8000d !important;
    color: #ffffff !important;
}

/* Подсказка под позициями */
.ng-picker-order__items-hint {
    margin: 10px 0 0 !important;
    font-size: 12px !important;
    color: #59605c !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

/* Мобильная адаптация: кнопки в столбик, крупнее */
@media (max-width: 480px) {
    .ng-picker-item__actions {
        grid-template-columns: 1fr !important;
    }
    .ng-picker-item__btn {
        min-height: 48px !important;
        font-size: 14px !important;
    }
}

/* =====================================================================
 * ЛК СБОРЩИКА — ПАНЕЛЬ ДЕЙСТВИЙ В МОДАЛКЕ
 * Дописано в конец, перебивает всё выше.
 * ===================================================================== */

.ng-picker-order__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 16px !important;
    border-top: 1px solid #e8e8e4 !important;
    margin-top: 4px !important;
}

.ng-picker-order__action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .15s, color .15s, transform .1s !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}
.ng-picker-order__action .material-symbols-outlined {
    font-size: 20px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}
.ng-picker-order__action:active:not(:disabled) {
    transform: scale(0.99) !important;
}
.ng-picker-order__action:disabled {
    opacity: 0.5 !important;
    cursor: wait !important;
}

.ng-picker-order__action--warn {
    background: #fff3cd !important;
    color: #6f380e !important;
    border: 1px solid #f5d77d !important;
}
.ng-picker-order__action--warn:hover:not(:disabled) {
    background: #ffe9a8 !important;
    color: #4e260a !important;
}

.ng-picker-order__action--primary {
    background: #122b1d !important;
    color: #ffffff !important;
}
.ng-picker-order__action--primary:hover:not(:disabled) {
    background: #1b3f2b !important;
}
.ng-picker-order__action--primary .material-symbols-outlined {
    color: #ccead4 !important;
}

.ng-picker-order__action--danger {
    background: #ffffff !important;
    color: #93000a !important;
    border: 1px solid #f0cfc9 !important;
}
.ng-picker-order__action--danger:hover:not(:disabled) {
    background: #fff1ef !important;
    color: #7a0008 !important;
    border-color: #e3a39a !important;
}

.ng-picker-order__info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    background: #f4f4f0 !important;
    color: #59605c !important;
}
.ng-picker-order__info .material-symbols-outlined {
    font-size: 18px !important;
    flex-shrink: 0 !important;
}
.ng-picker-order__info--ok {
    background: #ebf1ec !important;
    color: #122b1d !important;
}

@media (min-width: 640px) {
    .ng-picker-order__actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .ng-picker-order__action {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 180px !important;
    }
    .ng-picker-order__info {
        width: 100% !important;
    }
}

/* =====================================================================
 * ЛК СБОРЩИКА — ПАНЕЛЬ ДЕЙСТВИЙ В МОДАЛКЕ (красивая версия)
 * Дописано в конец, перебивает всё выше.
 * ===================================================================== */

/* Контейнер панели */
.ng-picker-order__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 18px !important;
    border-top: 1px solid #e8e8e4 !important;
    margin-top: 8px !important;
}

/* Общая кнопка */
.ng-picker-order__action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 20px !important;
    border: 0 !important;
    border-radius: 14px !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
}
.ng-picker-order__action .material-symbols-outlined {
    font-size: 22px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}
.ng-picker-order__action:active:not(:disabled) {
    transform: scale(0.98) !important;
}
.ng-picker-order__action:disabled {
    opacity: 0.5 !important;
    cursor: wait !important;
}

/* ⚠️ Уведомить — жёлтая */
.ng-picker-order__action--warn {
    background: #fff3cd !important;
    color: #6f380e !important;
    border: 2px solid #f5d77d !important;
    box-shadow: 0 2px 8px rgba(245, 215, 125, 0.3) !important;
}
.ng-picker-order__action--warn .material-symbols-outlined {
    color: #b97300 !important;
}
.ng-picker-order__action--warn:hover:not(:disabled) {
    background: #ffe9a8 !important;
    color: #4e260a !important;
    border-color: #ecc44a !important;
    box-shadow: 0 4px 12px rgba(245, 215, 125, 0.5) !important;
}

/* ✅ Готов к отправке — зелёная */
.ng-picker-order__action--primary {
    background: #122b1d !important;
    color: #ffffff !important;
    border: 2px solid #122b1d !important;
    box-shadow: 0 2px 8px rgba(18, 43, 29, 0.25) !important;
}
.ng-picker-order__action--primary .material-symbols-outlined {
    color: #ccead4 !important;
}
.ng-picker-order__action--primary:hover:not(:disabled) {
    background: #1b3f2b !important;
    border-color: #1b3f2b !important;
    box-shadow: 0 4px 12px rgba(18, 43, 29, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* ❌ Отменить — красная контурная */
.ng-picker-order__action--danger {
    background: #ffffff !important;
    color: #93000a !important;
    border: 2px solid #f0cfc9 !important;
    box-shadow: 0 2px 8px rgba(240, 207, 201, 0.3) !important;
}
.ng-picker-order__action--danger .material-symbols-outlined {
    color: #93000a !important;
}
.ng-picker-order__action--danger:hover:not(:disabled) {
    background: #fff1ef !important;
    color: #7a0008 !important;
    border-color: #e3a39a !important;
    box-shadow: 0 4px 12px rgba(240, 207, 201, 0.5) !important;
    transform: translateY(-1px) !important;
}

/* Информационные строки */
.ng-picker-order__info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    background: #f4f4f0 !important;
    color: #59605c !important;
    border: 2px solid transparent !important;
}
.ng-picker-order__info .material-symbols-outlined {
    font-size: 20px !important;
    flex-shrink: 0 !important;
    color: #59605c !important;
}
.ng-picker-order__info--ok {
    background: #ebf1ec !important;
    color: #122b1d !important;
    border-color: #ccead4 !important;
}
.ng-picker-order__info--ok .material-symbols-outlined {
    color: #122b1d !important;
}

/* На десктопе — кнопки в строку */
@media (min-width: 640px) {
    .ng-picker-order__actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .ng-picker-order__action {
        flex: 1 1 180px !important;
        width: auto !important;
    }
    .ng-picker-order__info {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* =====================================================================
 * ФИКС: кнопки панели действий в ЛК сборщика — разрешаем перенос текста
 * Дописано в конец, перебивает правило white-space: nowrap выше.
 * ===================================================================== */

.ng-picker-order__action {
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
/* =========================================================================
 * ЛК СБОРЩИКА — ЭКРАН ПРИЧИН ОТМЕНЫ (внутри #ng-picker-modal)
 * Добавлено для подшага 3.5.4.4.
 * ========================================================================= */

.ng-picker-cancel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 4px 0 8px;
}

/* ---------- Заголовок ---------- */
.ng-picker-cancel__head {
    text-align: center;
    padding: 0 8px 4px;
}

.ng-picker-cancel__head h3 {
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    color: #122B1D;
}

.ng-picker-cancel__head p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #5F6B64;
}

/* ---------- Список причин ---------- */
.ng-picker-cancel__reasons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ng-picker-cancel__reason {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    background: #ffffff;
    border: 2px solid #E3E8E4;
    border-radius: 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #1A221E;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ng-picker-cancel__reason:hover {
    border-color: #C2C8C1;
    background: #FAFBF9;
}

.ng-picker-cancel__reason:active {
    transform: scale(0.99);
}

.ng-picker-cancel__reason.is-active {
    border-color: #122B1D;
    background: #EBF1EC;
    box-shadow: 0 4px 12px rgba(18, 43, 29, 0.08);
}

.ng-picker-cancel__reason-label {
    flex: 1;
    min-width: 0;
}

.ng-picker-cancel__reason-check {
    flex-shrink: 0;
    font-size: 24px !important;
    line-height: 1;
    color: #C2C8C1;
    transition: color .15s;
}

.ng-picker-cancel__reason.is-active .ng-picker-cancel__reason-check {
    color: #122B1D;
}

/* ---------- Комментарий (для «Другое») ---------- */
.ng-picker-cancel__comment {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0 0;
}

.ng-picker-cancel__comment label {
    font-size: 14px;
    font-weight: 600;
    color: #1A221E;
}

.ng-picker-cancel__req {
    color: #d94141;
}

.ng-picker-cancel__comment textarea {
    width: 100%;
    padding: 12px 14px;
    background: #ffffff;
    border: 2px solid #E3E8E4;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.45;
    color: #1A221E;
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.ng-picker-cancel__comment textarea:focus {
    outline: none;
    border-color: #122B1D;
    box-shadow: 0 0 0 3px rgba(18, 43, 29, 0.1);
}

/* ---------- Кнопки внизу ---------- */
.ng-picker-cancel__actions {
    display: flex;
    gap: 10px;
    align-items: stretch;
    padding-top: 4px;
}

.ng-picker-cancel__back,
.ng-picker-cancel__confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    border: 2px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, opacity .15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ng-picker-cancel__back {
    flex: 0 0 auto;
    background: #F4F3F0;
    border-color: #E3E8E4;
    color: #1A221E;
}

.ng-picker-cancel__back:hover {
    background: #EBEBE6;
    border-color: #C2C8C1;
}

.ng-picker-cancel__back .material-symbols-outlined {
    font-size: 20px !important;
}

.ng-picker-cancel__confirm {
    flex: 1 1 auto;
    background: #ba1a1a;
    border-color: #ba1a1a;
    color: #ffffff;
}

.ng-picker-cancel__confirm:hover:not(:disabled) {
    background: #a01717;
    border-color: #a01717;
}

.ng-picker-cancel__confirm:disabled {
    background: #E3E8E4;
    border-color: #E3E8E4;
    color: #9AA39D;
    cursor: not-allowed;
    opacity: 0.7;
}

.ng-picker-cancel__confirm .material-symbols-outlined {
    font-size: 20px !important;
}

/* ---------- Заблокированное состояние (заказ уже отменён/завершён) ---------- */
.ng-picker-cancel--blocked {
    text-align: center;
    padding: 12px 8px 4px;
}

.ng-picker-cancel__blocked-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #F4F3F0;
    color: #5F6B64;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ng-picker-cancel__blocked-icon .material-symbols-outlined {
    font-size: 28px !important;
}

.ng-picker-cancel--blocked h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: #1A221E;
}

.ng-picker-cancel--blocked p {
    margin: 0 0 18px;
    font-size: 14px;
    color: #5F6B64;
}

.ng-picker-cancel--blocked .ng-picker-cancel__back {
    margin: 0 auto;
}

/* ---------- Мобильная адаптация ---------- */
@media (max-width: 480px) {
    .ng-picker-cancel {
        gap: 16px;
    }
    .ng-picker-cancel__head h3 {
        font-size: 18px;
    }
    .ng-picker-cancel__reason {
        padding: 14px 16px;
        font-size: 15px;
        border-radius: 12px;
    }
    .ng-picker-cancel__actions {
        flex-direction: column-reverse;
    }
    .ng-picker-cancel__back,
    .ng-picker-cancel__confirm {
        width: 100%;
        padding: 14px 16px;
    }
}

/* =========================================================================
 * СОТРУДНИКИ — МУЛЬТИРОЛЬ
 * Чекбоксы ролей в модалке создания/редактирования + чипы ролей в таблице.
 * Добавлено: 16.10.2026
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * Чекбоксы ролей в модалке
 * ---------------------------------------------------------------------- */

.ng-staff-roles {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
}

.ng-staff-roles__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #E3E8E4;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	font-size: 14px;
	color: #1A221E;
	transition: border-color .15s ease, background .15s ease;
	user-select: none;
}

.ng-staff-roles__item:hover {
	border-color: #D5E1D8;
	background: #F6F9F6;
}

.ng-staff-roles__item input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	border: 1.5px solid #C3CFC6;
	border-radius: 5px;
	background: #fff;
	position: relative;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
	margin: 0;
}

.ng-staff-roles__item input[type="checkbox"]:hover {
	border-color: #1B3B2B;
}

.ng-staff-roles__item input[type="checkbox"]:checked {
	background: #1B3B2B;
	border-color: #1B3B2B;
}

.ng-staff-roles__item input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ng-staff-roles__item input[type="checkbox"]:focus-visible {
	outline: 2px solid #C87A54;
	outline-offset: 2px;
}

/* Отмеченная роль — терракотовая рамка и лёгкий фон */
.ng-staff-roles__item:has(input:checked) {
	border-color: #C87A54;
	background: #FCF6F2;
}

.ng-staff-roles__item:has(input:checked) span {
	color: #122B1D;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Чипы ролей в таблице сотрудников
 * ---------------------------------------------------------------------- */

.ng-staff__role-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	margin: 2px 4px 2px 0;
	border-radius: 999px;
	background: #EBF1EC;
	border: 1px solid #D5E1D8;
	color: #1B3B2B;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Кнопки действий в строке сотрудника
 * ---------------------------------------------------------------------- */

.ng-staff__actions {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ng-staff__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid #E3E8E4;
	border-radius: 8px;
	background: #fff;
	color: #5F6B64;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
	padding: 0;
}

.ng-staff__btn:hover {
	color: #1B3B2B;
	border-color: #D5E1D8;
	background: #F6F9F6;
}

.ng-staff__btn .material-symbols-outlined {
	font-size: 18px;
}

.ng-staff__btn--danger:hover {
	color: #ba1a1a;
	border-color: #f3c7c7;
	background: #fdf5f5;
}

/* =========================================================================
 * ДЕЛЕГИРОВАНИЕ — кнопка в строке сотрудника
 * Добавлено: 16.10.2026
 * ========================================================================= */

.ng-staff__btn--delegate {
	color: #C87A54;
	border-color: #F0D5C4;
	background: #FCF6F2;
}

.ng-staff__btn--delegate:hover {
	color: #8F4E2B;
	border-color: #C87A54;
	background: #F8EBE1;
}

/* =========================================================================
 * ДЕЛЕГАЦИИ — блок активных делегаций в разделе «Сотрудники»
 * Добавлено: 16.10.2026
 * ========================================================================= */

.ng-delegations {
	margin: 0 0 20px;
	padding: 16px 18px;
	background: #FCF6F2;
	border: 1px solid #F0D5C4;
	border-radius: 14px;
}

.ng-delegations__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: #8F4E2B;
}

.ng-delegations__head .material-symbols-outlined {
	font-size: 20px;
	color: #C87A54;
}

.ng-delegations__head h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #122B1D;
}

.ng-delegations__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ng-delegation {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid #F5E1D5;
	border-radius: 10px;
}

.ng-delegation__main {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 14px;
	color: #1A221E;
}

.ng-delegation__role {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	background: #EBF1EC;
	border: 1px solid #D5E1D8;
	color: #1B3B2B;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.ng-delegation__from,
.ng-delegation__to {
	font-weight: 500;
	color: #122B1D;
}

.ng-delegation__arrow {
	font-size: 16px !important;
	color: #C87A54;
}

.ng-delegation__meta {
	grid-column: 1 / -1;
	font-size: 12px;
	color: #5F6B64;
	margin-top: 2px;
}

.ng-delegation__actions {
	justify-self: end;
}

.ng-delegation__revoke {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 8px;
	border: 1px solid #E3E8E4;
	background: #fff;
	color: #5F6B64;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.ng-delegation__revoke:hover {
	color: #ba1a1a;
	border-color: #f3c7c7;
	background: #fdf5f5;
}

.ng-delegation__revoke .material-symbols-outlined {
	font-size: 18px;
}

@media (max-width: 640px) {
	.ng-delegation {
		grid-template-columns: 1fr;
	}
	.ng-delegation__actions {
		justify-self: stretch;
	}
	.ng-delegation__revoke {
		width: 100%;
		justify-content: center;
	}
}

/* =========================================================================
 * ЛК СБОРЩИКА — ПЛАШКА «ОБЯЗАННОСТИ ДЕЛЕГИРОВАНЫ»
 * Добавлено: 16.10.2026
 * ========================================================================= */

.ng-picker__delegated-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 16px;
	padding: 14px 18px;
	background: #FFF8E6;
	border: 1px solid #F1D48A;
	border-radius: 12px;
	color: #7A5A10;
}

.ng-picker__delegated-banner-icon {
	font-size: 24px !important;
	color: #D69A19;
	flex-shrink: 0;
	margin-top: 1px;
}

.ng-picker__delegated-banner-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	line-height: 1.5;
}

.ng-picker__delegated-banner-text strong {
	color: #5A4208;
	font-weight: 600;
}

.ng-picker__delegated-banner-hint {
	color: #8F6E1E;
	font-size: 13px;
	font-style: italic;
}

/* Заблокированные кнопки */
.ng-picker-card__btn.is-disabled,
.ng-picker-item__btn.is-disabled,
.ng-picker-order__action.is-disabled,
.ng-picker-cancel__confirm.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	filter: grayscale(0.4);
}

.ng-picker-card__btn.is-disabled:hover,
.ng-picker-item__btn.is-disabled:hover,
.ng-picker-order__action.is-disabled:hover,
.ng-picker-cancel__confirm.is-disabled:hover {
	/* Гасим hover-эффект */
	transform: none;
	box-shadow: none;
}

@media (max-width: 640px) {
	.ng-picker__delegated-banner {
		padding: 12px 14px;
		gap: 10px;
	}
	.ng-picker__delegated-banner-icon {
		font-size: 20px !important;
	}
	.ng-picker__delegated-banner-text {
		font-size: 13px;
	}
}
/* ============================================================
 * DELIVERY CHANGE — кнопка в карточке заказа + модалка выбора
 * Шаг 2. Только эти стили, ничего выше не меняют.
 * ============================================================ */

/* --- Кнопка [✎ Изменить] рядом со «Способ доставки» --- */
.ng-ship-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 4px 10px;
    background: #EBF1EC;
    color: #122B1D;
    border: 1px solid #D5E1D8;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    font-family: inherit;
    vertical-align: middle;
}
.ng-ship-edit-btn:hover {
    background: #122B1D;
    color: #fff;
    border-color: #122B1D;
}
.ng-ship-edit-btn .material-symbols-outlined {
    font-size: 16px !important;
    line-height: 1;
}
.ng-ship-edit-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* --- Оверлей модалки --- */
.ng-ship-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ng-ship-modal.is-open {
    display: flex;
}
.ng-ship-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 43, 29, 0.45);
    backdrop-filter: blur(2px);
}
.ng-ship-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #1A221E;
}

/* --- Шапка --- */
.ng-ship-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: #122B1D;
    color: #fff;
}
.ng-ship-modal__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}
.ng-ship-modal__sub {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    opacity: .75;
    font-weight: 500;
}
.ng-ship-modal__close {
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .75;
    transition: opacity .15s, background .15s;
}
.ng-ship-modal__close:hover {
    opacity: 1;
    background: rgba(255,255,255,.12);
}
.ng-ship-modal__close .material-symbols-outlined {
    font-size: 22px;
}

/* --- Тело --- */
.ng-ship-modal__body {
    padding: 18px 22px 8px;
    overflow-y: auto;
    flex: 1;
}

.ng-ship-modal__info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #F4F3F0;
    border-radius: 10px;
    font-size: 13px;
    color: #5F6B64;
}
.ng-ship-modal__info strong {
    color: #1A221E;
    font-weight: 700;
}
.ng-ship-modal__info-current {
    color: #C87A54;
    font-weight: 700;
}

/* --- Список методов --- */
.ng-ship-method {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 10px;
    background: #FFFFFF;
    border: 2px solid #E3E8E4;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    position: relative;
}
.ng-ship-method:hover:not(.is-disabled):not(.is-current) {
    border-color: #C2C8C1;
    background: #FAFBF9;
}
.ng-ship-method.is-selected {
    border-color: #122B1D;
    background: #EBF1EC;
    box-shadow: 0 4px 12px rgba(18,43,29,.08);
}
.ng-ship-method.is-current {
    border-style: dashed;
    border-color: #C2C8C1;
    background: #FAFBF9;
    cursor: default;
}
.ng-ship-method.is-disabled {
    opacity: .55;
    cursor: not-allowed;
    background: #F8F8F6;
}

.ng-ship-method__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ng-ship-method__radio {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #C2C8C1;
    background: #fff;
    margin-top: 2px;
    position: relative;
    transition: border-color .15s, background .15s;
}
.ng-ship-method__input:checked + .ng-ship-method__radio {
    border-color: #122B1D;
    background: #122B1D;
}
.ng-ship-method__input:checked + .ng-ship-method__radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.ng-ship-method__text {
    flex: 1;
    min-width: 0;
}
.ng-ship-method__title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1A221E;
    line-height: 1.3;
}
.ng-ship-method__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ng-ship-method__badge-current {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 4px;
    background: #FBF3EE;
    color: #C87A54;
}
.ng-ship-method__note {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: #5F6B64;
    line-height: 1.45;
}
.ng-ship-method__warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    background: #FFF4E5;
    border-left: 3px solid #C87A54;
    border-radius: 6px;
    font-size: 12px;
    color: #7a4a1f;
    line-height: 1.45;
}
.ng-ship-method__warning .material-symbols-outlined {
    font-size: 16px !important;
    flex-shrink: 0;
    margin-top: 1px;
}
.ng-ship-method__price {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: #122B1D;
    white-space: nowrap;
    margin-top: 2px;
}
.ng-ship-method.is-disabled .ng-ship-method__price {
    color: #999;
}

/* --- Комментарий --- */
.ng-ship-modal__comment-label {
    display: block;
    margin: 14px 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #5F6B64;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ng-ship-modal__comment {
    width: 100%;
    min-height: 68px;
    padding: 10px 12px;
    border: 1px solid #E3E8E4;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: #1A221E;
    background: #fff;
    resize: vertical;
    box-sizing: border-box;
}
.ng-ship-modal__comment:focus {
    outline: none;
    border-color: #122B1D;
    box-shadow: 0 0 0 3px rgba(18,43,29,.08);
}

/* --- Предпросмотр итога --- */
.ng-ship-modal__preview {
    margin-top: 14px;
    padding: 12px 14px;
    background: #F4F3F0;
    border-radius: 10px;
    font-size: 14px;
    display: none;
}
.ng-ship-modal__preview.is-visible {
    display: block;
}
.ng-ship-modal__preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.ng-ship-modal__preview-row:last-child {
    margin-bottom: 0;
}
.ng-ship-modal__preview-label {
    color: #5F6B64;
    font-size: 13px;
}
.ng-ship-modal__preview-old {
    color: #999;
    text-decoration: line-through;
    margin-right: 6px;
}
.ng-ship-modal__preview-new {
    color: #122B1D;
    font-weight: 700;
}

/* --- Предупреждение --- */
.ng-ship-modal__warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    background: #FBF3EE;
    border-left: 3px solid #C87A54;
    border-radius: 6px;
    font-size: 12.5px;
    color: #7a4a1f;
    line-height: 1.5;
}
.ng-ship-modal__warning .material-symbols-outlined {
    font-size: 18px !important;
    flex-shrink: 0;
    margin-top: 1px;
}

/* --- Ошибка --- */
.ng-ship-modal__error {
    padding: 12px 14px;
    margin-bottom: 12px;
    background: #FDECEC;
    border-left: 3px solid #ba1a1a;
    border-radius: 6px;
    color: #8a1414;
    font-size: 13px;
    line-height: 1.45;
}

/* --- Подвал --- */
.ng-ship-modal__foot {
    display: flex;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid #EEF1EE;
    background: #FAFAF8;
}
.ng-ship-modal__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 0;
    transition: background .15s, color .15s, opacity .15s;
    line-height: 1;
}
.ng-ship-modal__btn--ghost {
    background: #F4F3F0;
    color: #1A221E;
}
.ng-ship-modal__btn--ghost:hover {
    background: #E3E8E4;
}
.ng-ship-modal__btn--primary {
    background: #122B1D;
    color: #fff;
    flex: 2;
}
.ng-ship-modal__btn--primary:hover:not(:disabled) {
    background: #1B3B2B;
}
.ng-ship-modal__btn--primary:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.ng-ship-modal__btn .material-symbols-outlined {
    font-size: 18px !important;
}

/* --- Загрузка --- */
.ng-ship-modal__loading {
    padding: 40px 20px;
    text-align: center;
    color: #5F6B64;
    font-size: 13px;
}
.ng-ship-modal__loading .material-symbols-outlined {
    font-size: 32px !important;
    display: block;
    margin: 0 auto 8px;
    animation: ng-ship-spin 1.4s linear infinite;
}
@keyframes ng-ship-spin {
    to { transform: rotate(360deg); }
}

/* --- Мобильная адаптация --- */
@media (max-width: 520px) {
    .ng-ship-modal {
        padding: 0;
        align-items: flex-end;
    }
    .ng-ship-modal__dialog {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
    }
    .ng-ship-modal__head {
        padding: 16px 18px;
    }
    .ng-ship-modal__body {
        padding: 14px 18px 6px;
    }
    .ng-ship-modal__foot {
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0));
    }
    .ng-ship-method {
        padding: 12px;
    }
    .ng-ship-method__title {
        font-size: 14px;
    }
}
/* ============================================================
 * FIX: кнопка [✎ Изменить] — компактная, не на всю ширину
 * Добавлено в конец, чтобы не искать и не трогать старое.
 * Переопределяет более ранние правила .ng-ship-edit-btn.
 * ============================================================ */
.ng-ship-edit-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    width: auto !important;
    max-width: max-content;
    margin: 6px 0 0 0 !important;
    padding: 5px 12px 5px 10px;
    background: #EBF1EC;
    color: #122B1D;
    border: 1px solid #D5E1D8;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    font-family: inherit;
    vertical-align: middle;
    white-space: nowrap;
}
.ng-ship-edit-btn:hover {
    background: #122B1D;
    color: #fff;
    border-color: #122B1D;
}
.ng-ship-edit-btn .material-symbols-outlined {
    font-size: 15px !important;
    line-height: 1;
}
.ng-ship-edit-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}
/* ============================================================
 * NG CONFIRM — красивая модалка подтверждения в стиле сайта.
 * Заменяет системный window.confirm в ЛК админа и сборщика.
 * ============================================================ */

.ng-confirm {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ng-confirm.is-open {
    display: flex;
    animation: ng-confirm-fade .15s ease-out;
}
@keyframes ng-confirm-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ng-confirm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 43, 29, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.ng-confirm__dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(18, 43, 29, 0.28);
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #1A221E;
    animation: ng-confirm-pop .18s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes ng-confirm-pop {
    from { transform: scale(.94); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* --- Верхняя цветная полоса (по типу действия) --- */
.ng-confirm__stripe {
    height: 6px;
    background: #122B1D;
}
.ng-confirm--danger  .ng-confirm__stripe { background: #ba1a1a; }
.ng-confirm--warning .ng-confirm__stripe { background: #C87A54; }
.ng-confirm--info    .ng-confirm__stripe { background: #122B1D; }

/* --- Шапка --- */
.ng-confirm__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px 6px;
}
.ng-confirm__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EBF1EC;
    color: #122B1D;
}
.ng-confirm--danger  .ng-confirm__icon { background: #FDECEC; color: #ba1a1a; }
.ng-confirm--warning .ng-confirm__icon { background: #FBF3EE; color: #C87A54; }

.ng-confirm__icon .material-symbols-outlined {
    font-size: 22px !important;
}

.ng-confirm__title {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #1A221E;
}

/* --- Тело --- */
.ng-confirm__body {
    padding: 8px 22px 20px;
    font-size: 14px;
    line-height: 1.55;
    color: #424843;
}
.ng-confirm__body strong { color: #1A221E; }
.ng-confirm__body em {
    color: #5F6B64;
    font-style: normal;
    font-size: 13px;
}

/* --- Кнопки --- */
.ng-confirm__foot {
    display: flex;
    gap: 10px;
    padding: 0 22px 22px;
}
.ng-confirm__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, transform .06s;
}
.ng-confirm__btn:active { transform: scale(.98); }

.ng-confirm__btn--ghost {
    background: #F4F3F0;
    color: #1A221E;
}
.ng-confirm__btn--ghost:hover {
    background: #E3E8E4;
}

.ng-confirm__btn--primary {
    background: #122B1D;
    color: #fff;
    flex: 1.4;
}
.ng-confirm__btn--primary:hover {
    background: #1B3B2B;
}
.ng-confirm--danger .ng-confirm__btn--primary {
    background: #ba1a1a;
}
.ng-confirm--danger .ng-confirm__btn--primary:hover {
    background: #93000a;
}
.ng-confirm--warning .ng-confirm__btn--primary {
    background: #C87A54;
}
.ng-confirm--warning .ng-confirm__btn--primary:hover {
    background: #b36740;
}

@media (max-width: 480px) {
    .ng-confirm__dialog { max-width: 100%; }
    .ng-confirm__foot { flex-direction: column-reverse; }
    .ng-confirm__btn { flex: 1; width: 100%; }
}
/* ============================================================
 * NG PICKER — БЛОК «КОЛИЧЕСТВО УПАКОВОК»
 *
 * Этап 1 ТЗ «ЛК курьера, приёмка по QR».
 * Карточка заказа в ЛК сборщика (#ng-picker-modal).
 * Дизайн-система: forest-deep #122B1D, sage-subtle #EBF1EC,
 * terracotta #C87A54, border-soft #E3E8E4, error #ba1a1a.
 * ============================================================ */

.ng-picker-order__packages {
    margin: 16px 0 8px;
    padding: 16px 18px;
    background: #F4F4F0;
    border: 1px solid #E3E8E4;
    border-radius: 14px;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.ng-picker-order__packages.is-saved {
    background: #EBF1EC;
    border-color: #B1CDB9;
}

/* Шапка блока */
.ng-picker-order__packages-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ng-picker-order__packages-head .material-symbols-outlined {
    font-size: 20px !important;
    color: #122B1D;
    flex-shrink: 0;
}

.ng-picker-order__packages-title {
    font-size: 14px;
    font-weight: 600;
    color: #1A221E;
    letter-spacing: 0.01em;
}

/* Бейдж «Сохранено: N» */
.ng-picker-order__packages-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #122B1D;
    background: #FFFFFF;
    border-radius: 20px;
    line-height: 1.4;
}

.ng-picker-order__packages-badge:empty {
    display: none;
}

.ng-picker-order__packages-badge .material-symbols-outlined {
    font-size: 16px !important;
    color: #122B1D;
    font-variation-settings: 'FILL' 1, 'wght' 600;
}

/* Строка с −, полем и + */
.ng-picker-order__packages-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ng-pkg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #D5E1D8;
    background: #FFFFFF;
    color: #122B1D;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.ng-pkg-btn:hover:not(:disabled) {
    background: #EBF1EC;
    border-color: #B1CDB9;
}

.ng-pkg-btn:active:not(:disabled) {
    background: #D5E1D8;
}

.ng-pkg-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #F4F4F0;
    border-color: #E3E8E4;
    color: #5F6B64;
}

.ng-pkg-btn .material-symbols-outlined {
    font-size: 22px !important;
    font-variation-settings: 'FILL' 0, 'wght' 500;
}

/* Поле ввода числа */
.ng-pkg-input {
    width: 76px;
    height: 44px;
    padding: 0 8px;
    font-size: 18px;
    font-weight: 600;
    font-family: inherit;
    color: #122B1D;
    background: #FFFFFF;
    border: 2px solid #D5E1D8;
    border-radius: 10px;
    text-align: center;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
    -moz-appearance: textfield;
    box-sizing: border-box;
}

/* Убираем стрелки нативного number-инпута */
.ng-pkg-input::-webkit-outer-spin-button,
.ng-pkg-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ng-pkg-input:focus {
    border-color: #122B1D;
    box-shadow: 0 0 0 3px rgba(18, 43, 29, 0.1);
    background: #FFFFFF;
}

.ng-picker-order__packages.is-saved .ng-pkg-input {
    border-color: #B1CDB9;
    background: #FFFFFF;
}

/* Статус сохранения — «Сохранение…», «Сохранено», «Ошибка» */
.ng-pkg-status {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
    line-height: 1.4;
    background: #FFFFFF;
    color: #5F6B64;
    white-space: nowrap;
}

.ng-pkg-status[hidden] {
    display: none;
}

.ng-pkg-status.is-ok {
    background: #EBF1EC;
    color: #122B1D;
}

.ng-pkg-status.is-error {
    background: #FFDAD6;
    color: #93000A;
}

/* Подсказка под строкой */
.ng-picker-order__packages-hint {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #5F6B64;
}

/* Заблокированная кнопка «Готов к отправке» (когда упаковки не указаны) */
.ng-picker-order__action.is-disabled,
.ng-picker-order__action[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Мобильная адаптация */
@media (max-width: 640px) {
    .ng-picker-order__packages {
        padding: 14px;
        margin: 14px 0 6px;
    }

    .ng-picker-order__packages-head {
        margin-bottom: 10px;
    }

    .ng-picker-order__packages-badge {
        margin-left: 0;
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        margin-top: 6px;
    }

    .ng-pkg-btn {
        width: 48px;
        height: 48px;
    }

    .ng-pkg-btn .material-symbols-outlined {
        font-size: 24px !important;
    }

    .ng-pkg-input {
        width: 70px;
        height: 48px;
        font-size: 18px;
    }

    .ng-pkg-status {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: 6px;
        justify-content: center;
    }
}
/* ============================================================
 * NG LOGISTICS — ВКЛАДКА «ЭТИКЕТКИ» (Этап 3 ТЗ «ЛК курьера»)
 *
 * Список заказов в ready, ожидающих печати этикеток с QR.
 * Дизайн-система: forest-deep #122B1D, sage-subtle #EBF1EC,
 * sage-border #D5E1D8, terracotta #C87A54, border-soft #E3E8E4.
 * ============================================================ */

.ng-labels-tab {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Шапка вкладки */
.ng-labels-tab__head {
    margin-bottom: 4px;
}
.ng-labels-tab__head-text h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    color: #122B1D;
    line-height: 1.3;
}
.ng-labels-tab__head-text p {
    margin: 0;
    font-size: 14px;
    color: #5F6B64;
    line-height: 1.5;
}

/* Пусто — «Все этикетки распечатаны» */
.ng-labels-tab__empty {
    background: #ffffff;
    border: 1px dashed #B1CDB9;
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
    color: #5F6B64;
}
.ng-labels-tab__empty .material-symbols-outlined {
    font-size: 48px;
    color: #4a6453;
    display: block;
    margin: 0 auto 12px;
    font-variation-settings: 'FILL' 1, 'wght' 400;
}
.ng-labels-tab__empty h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: #122B1D;
}
.ng-labels-tab__empty p {
    margin: 0;
    font-size: 13px;
    color: #5F6B64;
}

/* Список карточек */
.ng-labels-tab__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Карточка заказа */
.ng-labels-tab__item {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #E3E8E4;
    border-radius: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.ng-labels-tab__item:hover {
    border-color: #B1CDB9;
    box-shadow: 0 2px 8px rgba(18, 43, 29, 0.06);
}

.ng-labels-tab__item-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Верхняя строка карточки: номер + бейдж + время готовности */
.ng-labels-tab__item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ng-labels-tab__num {
    font-size: 17px;
    font-weight: 700;
    color: #122B1D;
    letter-spacing: 0.01em;
}
.ng-labels-tab__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #122B1D;
    background: #EBF1EC;
    border-radius: 20px;
    line-height: 1.4;
}
.ng-labels-tab__badge .material-symbols-outlined {
    font-size: 15px !important;
    color: #122B1D;
}
.ng-labels-tab__ready {
    font-size: 12px;
    color: #5F6B64;
    margin-left: auto;
}

/* Строка клиента: имя + телефон */
.ng-labels-tab__item-body {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 14px;
}
.ng-labels-tab__client {
    font-weight: 600;
    color: #1A221E;
}
.ng-labels-tab__phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #5F6B64;
}
.ng-labels-tab__phone .material-symbols-outlined {
    font-size: 15px !important;
    color: #5F6B64;
}

/* Адрес */
.ng-labels-tab__item-addr {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    color: #5F6B64;
    line-height: 1.4;
}
.ng-labels-tab__item-addr .material-symbols-outlined {
    font-size: 16px !important;
    color: #5F6B64;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Кнопки справа */
.ng-labels-tab__item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ng-labels-tab__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, opacity .15s;
    white-space: nowrap;
}
.ng-labels-tab__btn .material-symbols-outlined {
    font-size: 18px !important;
}
.ng-labels-tab__btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* A4 — основная */
.ng-labels-tab__btn--primary {
    background: #122B1D;
    color: #ffffff;
}
.ng-labels-tab__btn--primary:hover:not([disabled]) {
    background: #1B3B2B;
}

/* Термо — ghost */
.ng-labels-tab__btn--ghost {
    background: #ffffff;
    color: #122B1D;
    border-color: #D5E1D8;
}
.ng-labels-tab__btn--ghost:hover:not([disabled]) {
    background: #EBF1EC;
    border-color: #B1CDB9;
}

/* Отметить — success */
.ng-labels-tab__btn--success {
    background: #4a6453;
    color: #ffffff;
}
.ng-labels-tab__btn--success:hover:not([disabled]) {
    background: #3a5042;
}

/* Мобильная адаптация */
@media (max-width: 720px) {
    .ng-labels-tab__item {
        flex-direction: column;
        gap: 12px;
    }
    .ng-labels-tab__item-actions {
        justify-content: flex-start;
        width: 100%;
    }
    .ng-labels-tab__btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    .ng-labels-tab__ready {
        margin-left: 0;
        flex-basis: 100%;
    }
}
/* ============================================================
 * NG COURIER — ЛК КУРЬЕРА (/courier-cabinet/)
 *
 * Этап 3.11 ТЗ «ЛК курьера, приёмка по QR».
 * Дизайн-система: forest-deep #122B1D, sage-subtle #EBF1EC,
 * sage-border #D5E1D8, terracotta #C87A54, border-soft #E3E8E4.
 * ============================================================ */

.ng-courier {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

/* ---------- Шапка ---------- */

.ng-courier__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid #E3E8E4;
    border-radius: 16px;
}

.ng-courier__header-left {
    min-width: 0;
}

.ng-courier__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #122B1D;
    line-height: 1.25;
}

.ng-courier__subtitle {
    margin: 0;
    font-size: 14px;
    color: #5F6B64;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ng-courier__role {
    color: #1A221E;
    font-weight: 600;
}

.ng-courier__badge-admin {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    background: #EBF1EC;
    color: #122B1D;
    border-radius: 20px;
    line-height: 1.4;
}

.ng-courier__header-phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #122B1D;
    text-decoration: none;
    font-weight: 600;
}

.ng-courier__header-phone:hover {
    text-decoration: underline;
}

.ng-courier__header-phone .material-symbols-outlined {
    font-size: 16px;
}

.ng-courier__logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: transparent;
    color: #122B1D;
    border: 1px solid #D5E1D8;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    line-height: 1;
}

.ng-courier__logout:hover {
    background: #EBF1EC;
    border-color: #B1CDB9;
}

.ng-courier__logout .material-symbols-outlined {
    font-size: 18px;
}

/* ---------- Плашка «Вы не заведены» ---------- */

.ng-courier__not-found {
    text-align: center;
    padding: 48px 32px;
    background: #ffffff;
    border: 2px dashed #FFDAD6;
    border-radius: 20px;
}

.ng-courier__not-found-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #FFDAD6;
    margin-bottom: 20px;
}

.ng-courier__not-found-icon .material-symbols-outlined {
    font-size: 44px;
    color: #93000A;
    font-variation-settings: 'FILL' 1, 'wght' 400;
}

.ng-courier__not-found h2 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: #93000A;
    line-height: 1.3;
}

.ng-courier__not-found p {
    margin: 0 auto 8px;
    font-size: 14px;
    color: #5F6B64;
    line-height: 1.6;
    max-width: 560px;
}

.ng-courier__not-found-hint {
    margin-top: 14px !important;
    padding: 12px 16px;
    background: #F4F4F0;
    border-radius: 10px;
    font-size: 13px !important;
    color: #1A221E !important;
    display: inline-block;
    text-align: left;
}

.ng-courier__not-found-hint em {
    font-style: normal;
    font-weight: 600;
    color: #122B1D;
}

/* ---------- Сводка «Сегодня» ---------- */

.ng-courier__today-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 24px;
    background: linear-gradient(135deg, #EBF1EC 0%, #F4F7F3 100%);
    border: 1px solid #D5E1D8;
    border-radius: 16px;
}

.ng-courier__today-summary-text {
    min-width: 0;
}

.ng-courier__today-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    color: #122B1D;
    line-height: 1.3;
}

.ng-courier__today-title .material-symbols-outlined {
    font-size: 24px;
    color: #122B1D;
}

.ng-courier__today-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #1A221E;
}

.ng-courier__today-stat strong {
    color: #122B1D;
    font-weight: 700;
}

.ng-courier__today-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ng-courier__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.ng-courier__action:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.ng-courier__action--primary {
    background: #122B1D;
    color: #ffffff;
}

.ng-courier__action--primary:hover:not(:disabled) {
    background: #1B3B2B;
}

.ng-courier__action--ghost {
    background: #ffffff;
    color: #122B1D;
    border-color: #D5E1D8;
}

.ng-courier__action--ghost:hover:not(:disabled) {
    background: #EBF1EC;
    border-color: #B1CDB9;
}

.ng-courier__action .material-symbols-outlined {
    font-size: 20px;
}

/* ---------- Вкладки ---------- */

.ng-courier__tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: #F4F4F0;
    border: 1px solid #E3E8E4;
    border-radius: 12px;
    flex-wrap: wrap;
}

.ng-courier__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #5F6B64;
    background: transparent;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s, color .15s;
    line-height: 1;
}

.ng-courier__tab:hover {
    color: #122B1D;
    background: #ffffff;
}

.ng-courier__tab.is-active {
    background: #122B1D;
    color: #ffffff;
}

.ng-courier__tab .material-symbols-outlined {
    font-size: 18px;
}

/* ---------- Карточка-контейнер списка ---------- */

.ng-courier__card {
    background: #ffffff;
    border: 1px solid #E3E8E4;
    border-radius: 16px;
    padding: 20px 24px;
}

.ng-courier__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ng-courier__card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #122B1D;
    line-height: 1.3;
}

.ng-courier__card-title .material-symbols-outlined {
    font-size: 22px;
    color: #122B1D;
}

.ng-courier__refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #D5E1D8;
    border-radius: 10px;
    color: #122B1D;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.ng-courier__refresh:hover {
    background: #EBF1EC;
    border-color: #B1CDB9;
}

.ng-courier__refresh .material-symbols-outlined {
    font-size: 20px;
}

/* ---------- Пустое состояние ---------- */

.ng-courier__empty {
    padding: 40px 24px;
    text-align: center;
    color: #5F6B64;
}

.ng-courier__empty .material-symbols-outlined {
    font-size: 48px;
    color: #B1CDB9;
    display: block;
    margin-bottom: 12px;
    font-variation-settings: 'FILL' 1, 'wght' 400;
}

.ng-courier__empty h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: #122B1D;
}

.ng-courier__empty p {
    margin: 0;
    font-size: 13px;
    color: #5F6B64;
    line-height: 1.5;
}

/* ---------- Список карточек заказов ---------- */

.ng-courier__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ng-courier-card {
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #E3E8E4;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .15s, box-shadow .15s;
}

.ng-courier-card:hover {
    border-color: #B1CDB9;
    box-shadow: 0 2px 10px rgba(18, 43, 29, 0.06);
}

/* Цветная полоса слева по статусу */
.ng-courier-card--waiting       { border-left: 4px solid #C87A54; }
.ng-courier-card--accepted      { border-left: 4px solid #3a5a7d; }
.ng-courier-card--delivered     { border-left: 4px solid #4a6453; }
.ng-courier-card--not_delivered { border-left: 4px solid #ba1a1a; }
.ng-courier-card--partial_refusal { border-left: 4px solid #c37c4d; }
.ng-courier-card--cancelled     { border-left: 4px solid #ba1a1a; opacity: .7; }

.ng-courier-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ng-courier-card__num {
    font-size: 16px;
    color: #1A221E;
    line-height: 1.3;
}

.ng-courier-card__num strong {
    font-weight: 700;
    color: #122B1D;
}

/* Бейдж статуса */
.ng-courier-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    line-height: 1.4;
    white-space: nowrap;
}

.ng-courier-card__badge .material-symbols-outlined {
    font-size: 15px !important;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

.ng-courier-card__badge--waiting {
    background: #FBF3EE;
    color: #8A4A1F;
}
.ng-courier-card__badge--accepted {
    background: #E8EEF4;
    color: #3a5a7d;
}
.ng-courier-card__badge--delivered {
    background: #EBF1EC;
    color: #4a6453;
}
.ng-courier-card__badge--not_delivered {
    background: #FFDAD6;
    color: #93000A;
}
.ng-courier-card__badge--partial_refusal {
    background: #FBF3EE;
    color: #8A4A1F;
}
.ng-courier-card__badge--cancelled {
    background: #E2E3DF;
    color: #5F6B64;
}

/* Строки информации в карточке */
.ng-courier-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ng-courier-card__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    flex-wrap: wrap;
}

.ng-courier-card__row .material-symbols-outlined {
    font-size: 16px;
    color: #5F6B64;
    flex-shrink: 0;
}

.ng-courier-card__label {
    color: #5F6B64;
    font-weight: 500;
}

.ng-courier-card__value {
    color: #1A221E;
    font-weight: 500;
}

.ng-courier-card__value strong {
    font-weight: 700;
    color: #122B1D;
}

.ng-courier-card__row--wide .ng-courier-card__value {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.ng-courier-card__phone {
    color: #122B1D;
    font-weight: 600;
    text-decoration: none;
}

.ng-courier-card__phone:hover {
    text-decoration: underline;
}

.ng-courier-card__cod {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: #FBF3EE;
    color: #8A4A1F;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

/* Кнопки в карточке */
.ng-courier-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid #F0F2EE;
}

.ng-courier-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}

.ng-courier-card__btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.ng-courier-card__btn .material-symbols-outlined {
    font-size: 18px !important;
}

.ng-courier-card__btn--primary {
    background: #122B1D;
    color: #ffffff;
}
.ng-courier-card__btn--primary:hover:not(:disabled) {
    background: #1B3B2B;
}

.ng-courier-card__btn--ghost {
    background: #ffffff;
    color: #122B1D;
    border-color: #D5E1D8;
}
.ng-courier-card__btn--ghost:hover:not(:disabled) {
    background: #EBF1EC;
    border-color: #B1CDB9;
}

.ng-courier-card__btn--success {
    background: #4a6453;
    color: #ffffff;
}
.ng-courier-card__btn--success:hover:not(:disabled) {
    background: #3a5042;
}

.ng-courier-card__btn--warn {
    background: #C87A54;
    color: #ffffff;
}
.ng-courier-card__btn--warn:hover:not(:disabled) {
    background: #B06A48;
}

/* ---------- Группы дат (вкладка «Ближайшие») ---------- */

.ng-courier__groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ng-courier-group {
    border: 1px solid #E3E8E4;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.ng-courier-group__head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    background: #F4F4F0;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #122B1D;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}

.ng-courier-group__head:hover {
    background: #EBF1EC;
}

.ng-courier-group__arrow {
    font-size: 22px !important;
    color: #122B1D;
    transition: transform .2s;
}

.ng-courier-group.is-open .ng-courier-group__arrow {
    transform: rotate(180deg);
}

.ng-courier-group__date {
    flex: 1;
    min-width: 0;
}

.ng-courier-group__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    background: #122B1D;
    color: #ffffff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.ng-courier-group__body {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px 18px;
}

.ng-courier-group.is-open .ng-courier-group__body {
    display: flex;
}

/* ---------- Модалка заказа ---------- */

.ng-courier-modal__dialog {
    max-width: 620px !important;
}

.ng-courier-order {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ng-courier-order__status {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ng-courier-order__section {
    border-top: 1px solid #F0F2EE;
    padding-top: 16px;
}

.ng-courier-order__section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.ng-courier-order__section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #122B1D;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ng-courier-order__section-title .material-symbols-outlined {
    font-size: 18px;
}

.ng-courier-order__grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ng-courier-order__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    flex-wrap: wrap;
}

.ng-courier-order__label {
    color: #5F6B64;
    font-weight: 500;
    flex-shrink: 0;
}

.ng-courier-order__value {
    color: #1A221E;
    font-weight: 500;
}

.ng-courier-order__row--wide .ng-courier-order__value {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.ng-courier-order__phone {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #122B1D;
    font-weight: 600;
    text-decoration: none;
}

.ng-courier-order__phone:hover {
    text-decoration: underline;
}

.ng-courier-order__phone .material-symbols-outlined {
    font-size: 16px;
}

.ng-courier-order__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ng-courier-order__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 14px;
    background: #F4F4F0;
    border-radius: 10px;
    font-size: 13px;
}

.ng-courier-order__item-name {
    flex: 1;
    min-width: 0;
    color: #1A221E;
    font-weight: 500;
}

.ng-courier-order__item-meta {
    color: #5F6B64;
    white-space: nowrap;
    font-size: 12px;
}

.ng-courier-order__total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 18px;
    background: #EBF1EC;
    border-radius: 12px;
    font-size: 15px;
    color: #1A221E;
    flex-wrap: wrap;
}

.ng-courier-order__total strong {
    color: #122B1D;
    font-size: 20px;
    font-weight: 800;
}

.ng-courier-order__cod {
    font-size: 13px;
    color: #8A4A1F;
    font-weight: 600;
}

.ng-courier-order__quick {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ng-courier-order__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid #F0F2EE;
}

/* ---------- Мобильная адаптация ---------- */

@media (max-width: 720px) {
    .ng-courier {
        padding: 12px 12px 32px;
        gap: 12px;
    }

    .ng-courier__header {
        padding: 16px;
        gap: 12px;
    }

    .ng-courier__title {
        font-size: 19px;
    }

    .ng-courier__today-summary {
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
    }

    .ng-courier__today-actions {
        flex-direction: column;
    }

    .ng-courier__action {
        justify-content: center;
    }

    .ng-courier__tabs {
        gap: 4px;
    }

    .ng-courier__tab {
        flex: 1 1 auto;
        justify-content: center;
        padding: 10px 12px;
        font-size: 13px;
    }

    .ng-courier__tab .material-symbols-outlined {
        font-size: 16px;
    }

    .ng-courier__card {
        padding: 16px;
    }

    .ng-courier-card {
        padding: 14px 16px;
    }

    .ng-courier-card__actions {
        flex-direction: column;
    }

    .ng-courier-card__btn {
        justify-content: center;
    }

    .ng-courier-group__body {
        padding: 12px 14px 14px;
    }

    .ng-courier-order__actions {
        flex-direction: column;
    }

    .ng-courier-order__actions .ng-courier-card__btn {
        justify-content: center;
    }
}

/* ---------- Тёмная тема админ-бара — сдвиг, если WP Admin Bar видим ---------- */

@media screen and (max-width: 782px) {
    .ng-courier {
        /* WP Admin Bar на мобильном — 46px, если она видна. Оставляем место. */
        padding-top: 12px;
    }
}
/* ============================================================
 * NG COURIER SCAN — модалка QR-сканера (Этап 4)
 *
 * Открывается из /courier-cabinet/ по кнопке «📷 Принять заказы».
 * Дизайн-система: forest-deep #122B1D, sage-subtle #EBF1EC,
 * sage-border #D5E1D8, terracotta #C87A54, border-soft #E3E8E4,
 * error #ba1a1a.
 * ============================================================ */

/* ---------- Диалог модалки ---------- */

.ng-courier-scan-modal__dialog {
    max-width: 620px !important;
    width: 100%;
}

.ng-courier-scan-modal .ng-order-modal__body {
    padding: 16px 20px 20px;
}

/* ---------- Общий контейнер ---------- */

.ng-courier-scan {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- Блок загрузки (до инициализации) ---------- */

.ng-courier-scan__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
    color: #5F6B64;
}

.ng-courier-scan__loading .material-symbols-outlined {
    font-size: 48px;
    color: #B1CDB9;
    font-variation-settings: 'FILL' 1, 'wght' 400;
}

.ng-courier-scan__loading p {
    margin: 0;
    font-size: 14px;
    color: #5F6B64;
}

/* ---------- Верхняя панель: кнопка камеры + подсказка ---------- */

.ng-courier-scan__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: #F4F4F0;
    border: 1px solid #E3E8E4;
    border-radius: 12px;
}

.ng-courier-scan__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #122B1D;
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.ng-courier-scan__toggle:hover:not(:disabled) {
    background: #1B3B2B;
}

.ng-courier-scan__toggle:active:not(:disabled) {
    background: #0E2418;
}

.ng-courier-scan__toggle:disabled,
.ng-courier-scan__toggle.is-busy {
    opacity: 0.65;
    cursor: wait;
}

.ng-courier-scan__toggle .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 400;
}

.ng-courier-scan__hint {
    flex: 1;
    min-width: 180px;
    font-size: 13px;
    line-height: 1.45;
    color: #5F6B64;
}

/* ---------- Область сканирования (видео) ---------- */

.ng-courier-scan__region {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 420px;
    background: #1A221E;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

/* Внутренний контейнер для видео — html5-qrcode сам вставит <video> */

.ng-courier-scan__mount {
    width: 100%;
    height: 100%;
}

.ng-courier-scan__mount video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 14px !important;
}

/* Рамка-прицел внутри области (рисуется поверх видео) */

.ng-courier-scan__region::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62%;
    height: 62%;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(204, 234, 212, 0.85);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 21, 9, 0.35);
    pointer-events: none;
    z-index: 2;
    display: none; /* показываем только при активной камере */
}

.ng-courier-scan__region:has(.ng-courier-scan__mount)::before {
    display: block;
}

/* Placeholder до включения камеры */

.ng-courier-scan__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: rgba(204, 234, 212, 0.75);
    z-index: 1;
}

.ng-courier-scan__placeholder .material-symbols-outlined {
    font-size: 64px;
    font-variation-settings: 'FILL' 0, 'wght' 300;
    color: rgba(204, 234, 212, 0.6);
}

.ng-courier-scan__placeholder p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(204, 234, 212, 0.75);
    max-width: 320px;
}

/* ---------- Вспышки успех / предупреждение / ошибка ---------- */

.ng-courier-scan__flash--ok::after,
.ng-courier-scan__flash--warn::after,
.ng-courier-scan__flash--error::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    animation: ng-courier-scan-flash 0.6s ease-out;
}

.ng-courier-scan__flash--ok::after {
    background: rgba(74, 100, 83, 0.55);
}

.ng-courier-scan__flash--warn::after {
    background: rgba(200, 122, 84, 0.55);
}

.ng-courier-scan__flash--error::after {
    background: rgba(186, 26, 26, 0.55);
}

@keyframes ng-courier-scan-flash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------- Плашка статуса ---------- */

.ng-courier-scan__status {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    background: #F4F4F0;
    color: #1A221E;
}

.ng-courier-scan__status[hidden] {
    display: none;
}

.ng-courier-scan__status.is-ok {
    background: #EBF1EC;
    color: #122B1D;
    border-left: 4px solid #4a6453;
}

.ng-courier-scan__status.is-warn {
    background: #FBF3EE;
    color: #8A4A1F;
    border-left: 4px solid #C87A54;
}

.ng-courier-scan__status.is-error {
    background: #FFDAD6;
    color: #93000A;
    border-left: 4px solid #ba1a1a;
}

/* ---------- Список «Прогресс приёмки» ---------- */

.ng-courier-scan__list-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid #E3E8E4;
}

.ng-courier-scan__list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ng-courier-scan__list-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #122B1D;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ng-courier-scan__list-title .material-symbols-outlined {
    font-size: 18px;
    color: #4a6453;
}

.ng-courier-scan__list-count {
    font-size: 12px;
    font-weight: 600;
    color: #5F6B64;
    background: #F4F4F0;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ---------- Строки заказов в списке ---------- */

.ng-courier-scan__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

.ng-courier-scan__list-loading,
.ng-courier-scan__list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: #5F6B64;
}

.ng-courier-scan__list-empty .material-symbols-outlined {
    font-size: 36px;
    color: #4a6453;
    font-variation-settings: 'FILL' 1, 'wght' 400;
}

.ng-courier-scan__list-empty p {
    margin: 0;
    font-size: 14px;
    color: #122B1D;
    font-weight: 500;
}

.ng-courier-scan__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #E3E8E4;
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ng-courier-scan__item:hover {
    border-color: #B1CDB9;
}

.ng-courier-scan__item-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.ng-courier-scan__item-num {
    font-size: 14px;
    font-weight: 700;
    color: #122B1D;
}

.ng-courier-scan__item-client {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #1A221E;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ng-courier-scan__item-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #5F6B64;
    white-space: nowrap;
}

/* ---------- Прогресс-бар ---------- */

.ng-courier-scan__bar {
    height: 6px;
    background: #F4F4F0;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.ng-courier-scan__bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #4a6453 0%, #122B1D 100%);
    border-radius: 999px;
    transition: width 0.35s ease;
}

/* ---------- Мобильная адаптация ---------- */

@media (max-width: 720px) {
    .ng-courier-scan-modal {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .ng-courier-scan-modal__dialog {
        max-width: 100% !important;
        max-height: 94vh !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .ng-courier-scan-modal .ng-order-modal__header {
        padding: 14px 16px;
    }

    .ng-courier-scan-modal .ng-order-modal__body {
        padding: 12px 14px 16px;
    }

    .ng-courier-scan {
        gap: 12px;
    }

    .ng-courier-scan__controls {
        padding: 10px 12px;
        flex-direction: column;
        align-items: stretch;
    }

    .ng-courier-scan__toggle {
        justify-content: center;
        width: 100%;
    }

    .ng-courier-scan__hint {
        font-size: 12px;
        text-align: center;
    }

    .ng-courier-scan__region {
        max-height: 60vh;
        aspect-ratio: auto;
        height: 60vw;
        min-height: 220px;
    }

    .ng-courier-scan__region::before {
        width: 68%;
        height: 68%;
    }

    .ng-courier-scan__placeholder .material-symbols-outlined {
        font-size: 48px;
    }

    .ng-courier-scan__placeholder p {
        font-size: 13px;
    }

    .ng-courier-scan__status {
        padding: 10px 12px;
        font-size: 13px;
    }

    .ng-courier-scan__list {
        max-height: 200px;
    }

    .ng-courier-scan__item {
        padding: 8px 12px;
    }

    .ng-courier-scan__item-num {
        font-size: 13px;
    }

    .ng-courier-scan__item-client {
        font-size: 12px;
    }
}

/* Очень узкие экраны */

@media (max-width: 420px) {
    .ng-courier-scan__region {
        height: 70vw;
        min-height: 200px;
    }

    .ng-courier-scan__list-title {
        font-size: 13px;
    }

    .ng-courier-scan__toggle {
        font-size: 13px;
        padding: 9px 14px;
    }
}

/* ---------- Тёмная тема браузера / prefers-reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .ng-courier-scan__flash--ok::after,
    .ng-courier-scan__flash--warn::after,
    .ng-courier-scan__flash--error::after {
        animation: none;
    }

    .ng-courier-scan__bar-fill {
        transition: none;
    }
}
/* ============================================================
 * NG COURIER SCAN — фикс видимости крестика закрытия модалки
 *
 * Проблема: в модалке сканера крестик не виден / обрезается
 * на мобильных (bottom-sheet) и может сливаться с фоном видео.
 *
 * Решение: форсируем крупный, контрастный крестик в правом
 * верхнем углу шапки модалки. Плюс — кнопка «Закрыть» внизу
 * на случай, если верхний крестик недоступен.
 * ============================================================ */

/* ---------- Крестик в шапке модалки сканера ---------- */

.ng-courier-scan-modal .ng-order-modal__header {
    position: relative;
    z-index: 10;
    background: #ffffff;
    padding-right: 64px; /* место под крестик */
}

.ng-courier-scan-modal .ng-order-modal__close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F4F3F0 !important;
    color: #122B1D !important;
    border: 1px solid #D5E1D8 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 20 !important;
    box-shadow: 0 2px 8px rgba(18, 43, 29, 0.08) !important;
    transition: background 0.15s, color 0.15s, transform 0.1s !important;
    -webkit-tap-highlight-color: transparent !important;
}

.ng-courier-scan-modal .ng-order-modal__close:hover {
    background: #122B1D !important;
    color: #ffffff !important;
    border-color: #122B1D !important;
}

.ng-courier-scan-modal .ng-order-modal__close:active {
    transform: scale(0.94) !important;
}

.ng-courier-scan-modal .ng-order-modal__close .material-symbols-outlined {
    font-size: 22px !important;
    line-height: 1 !important;
    color: inherit !important;
    font-variation-settings: 'wght' 500 !important;
}

/* ---------- Кнопка «Закрыть» внизу модалки (страховка) ---------- */

.ng-courier-scan__close-bottom {
    display: flex !important;
    justify-content: center !important;
    margin-top: 6px !important;
    padding-top: 12px !important;
    border-top: 1px solid #E3E8E4 !important;
}

.ng-courier-scan__close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 320px !important;
    padding: 12px 20px !important;
    background: #ffffff !important;
    color: #122B1D !important;
    border: 1px solid #D5E1D8 !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
    -webkit-tap-highlight-color: transparent !important;
}

.ng-courier-scan__close-btn:hover {
    background: #EBF1EC !important;
    border-color: #B1CDB9 !important;
}

.ng-courier-scan__close-btn:active {
    background: #D5E1D8 !important;
}

.ng-courier-scan__close-btn .material-symbols-outlined {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* ---------- Мобильная адаптация крестика ---------- */

@media (max-width: 720px) {
    .ng-courier-scan-modal .ng-order-modal__header {
        padding: 14px 56px 14px 16px !important;
    }

    .ng-courier-scan-modal .ng-order-modal__close {
        top: 10px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .ng-courier-scan-modal .ng-order-modal__close .material-symbols-outlined {
        font-size: 20px !important;
    }

    .ng-courier-scan__close-btn {
        max-width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        min-height: 48px !important;
    }
}
/* ============================================================
 * NG PICKER COMPOSITION — Этап 4.5
 *
 * Блок «Состав упаковок» в модалке заказа сборщика.
 * Карточки упаковок, списки позиций, сводка нераспределённых.
 *
 * Дизайн-система: forest-deep #122B1D, sage-subtle #EBF1EC,
 * sage-border #D5E1D8, terracotta #C87A54, border-soft #E3E8E4.
 * ============================================================ */

/* ---------- Общий контейнер ---------- */

.ng-picker-order__composition {
    margin: 16px 0 8px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #E3E8E4;
    border-radius: 14px;
    transition: border-color .2s, box-shadow .2s;
}

.ng-picker-order__composition.is-saving {
    opacity: 0.7;
    pointer-events: none;
}

.ng-picker-order__composition[hidden] {
    display: none !important;
}

/* ---------- Шапка блока ---------- */

.ng-picker-order__composition-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.ng-picker-order__composition-head .material-symbols-outlined {
    font-size: 20px !important;
    color: #122B1D;
    flex-shrink: 0;
}

.ng-picker-order__composition-title {
    font-size: 15px;
    font-weight: 600;
    color: #1A221E;
    letter-spacing: 0.01em;
}

.ng-picker-order__composition-counter {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #122B1D;
    background: #EBF1EC;
    border-radius: 20px;
    line-height: 1.4;
    white-space: nowrap;
}

.ng-picker-order__composition-counter:empty {
    display: none;
}

/* ---------- Сообщение для одной упаковки ---------- */

.ng-picker-composition__single-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: #EBF1EC;
    border: 1px dashed #B1CDB9;
    border-radius: 12px;
    color: #1A221E;
}

.ng-picker-composition__single-message .material-symbols-outlined {
    font-size: 22px !important;
    color: #122B1D;
    flex-shrink: 0;
    margin-top: 1px;
}

.ng-picker-composition__single-message strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #122B1D;
    margin-bottom: 4px;
}

.ng-picker-composition__single-message p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #5F6B64;
}

/* ---------- Тело блока (карточки упаковок) ---------- */

.ng-picker-order__composition-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ng-picker-order__composition-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    font-size: 13px;
    color: #5F6B64;
}

.ng-picker-order__composition-loading .material-symbols-outlined {
    font-size: 20px !important;
    color: #B1CDB9;
}

/* ---------- Карточка одной упаковки ---------- */

.ng-picker-composition__pkg {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: #FAFBF9;
    border: 2px solid #E3E8E4;
    border-radius: 12px;
    transition: border-color .15s, background .15s;
}

.ng-picker-composition__pkg:hover {
    border-color: #D5E1D8;
}

/* Шапка упаковки */
.ng-picker-composition__pkg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E3E8E4;
}

.ng-picker-composition__pkg-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #122B1D;
}

.ng-picker-composition__pkg-title .material-symbols-outlined {
    font-size: 18px !important;
    color: #122B1D;
}

.ng-picker-composition__pkg-count {
    font-size: 12px;
    font-weight: 600;
    color: #5F6B64;
    padding: 2px 8px;
    background: #ffffff;
    border-radius: 10px;
    white-space: nowrap;
}

.ng-picker-composition__pkg-remove {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #5F6B64;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.ng-picker-composition__pkg-remove:hover {
    background: #FFDAD6;
    color: #93000A;
}

.ng-picker-composition__pkg-remove .material-symbols-outlined {
    font-size: 16px !important;
}

/* ---------- Строки позиций в упаковке ---------- */

.ng-picker-composition__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ng-picker-composition__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #E3E8E4;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.ng-picker-composition__row-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #1A221E;
    font-weight: 500;
    word-break: break-word;
}

.ng-picker-composition__row-qty {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: #122B1D;
    padding: 2px 8px;
    background: #EBF1EC;
    border-radius: 6px;
    white-space: nowrap;
}

.ng-picker-composition__row-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: #5F6B64;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.ng-picker-composition__row-remove:hover {
    background: #FFDAD6;
    color: #93000A;
}

.ng-picker-composition__row-remove .material-symbols-outlined {
    font-size: 14px !important;
}

.ng-picker-composition__row-empty {
    padding: 12px;
    font-size: 12px;
    color: #727973;
    font-style: italic;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #D5E1D8;
    border-radius: 8px;
}

/* ---------- Действия в упаковке ---------- */

.ng-picker-composition__pkg-actions {
    display: flex;
    gap: 8px;
    padding-top: 4px;
    flex-wrap: wrap;
}

.ng-picker-composition__add-select {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #D5E1D8;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #1A221E;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}

.ng-picker-composition__add-select:focus {
    border-color: #122B1D;
}

.ng-picker-composition__auto-fill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: #ffffff;
    color: #122B1D;
    border: 1px dashed #B1CDB9;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}

.ng-picker-composition__auto-fill:hover:not(:disabled) {
    background: #EBF1EC;
    border-color: #122B1D;
}

.ng-picker-composition__auto-fill:disabled {
    opacity: 0.5;
    cursor: wait;
}

.ng-picker-composition__auto-fill .material-symbols-outlined {
    font-size: 18px !important;
}

/* ---------- Сводка «Нераспределено» ---------- */

.ng-picker-order__composition-summary {
    margin-top: 14px;
    padding: 12px 14px;
    background: #FFF8E6;
    border: 1px solid #F1D48A;
    border-radius: 12px;
}

.ng-picker-order__composition-summary[hidden] {
    display: none !important;
}

.ng-picker-composition__summary-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #7A5A10;
}

.ng-picker-composition__summary-head .material-symbols-outlined {
    font-size: 18px !important;
    color: #D69A19;
}

.ng-picker-composition__summary-head strong {
    color: #5A4208;
    font-weight: 700;
}

.ng-picker-composition__summary-list {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
    font-size: 13px;
    line-height: 1.5;
    color: #7A5A10;
}

.ng-picker-composition__summary-list li {
    margin: 2px 0;
}

/* ---------- Подсказка под блоком ---------- */

.ng-picker-order__composition-hint {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #5F6B64;
}

/* ============================================================
 * Мобильная адаптация блока «Состав упаковок»
 * ============================================================ */

@media (max-width: 640px) {
    .ng-picker-order__composition {
        padding: 12px 14px;
        margin: 14px 0 6px;
    }

    .ng-picker-order__composition-head {
        gap: 6px;
        margin-bottom: 10px;
    }

    .ng-picker-order__composition-title {
        font-size: 14px;
    }

    .ng-picker-order__composition-counter {
        font-size: 11px;
        padding: 3px 8px;
    }

    .ng-picker-composition__pkg {
        padding: 10px 12px;
    }

    .ng-picker-composition__pkg-title {
        font-size: 13px;
    }

    .ng-picker-composition__pkg-actions {
        flex-direction: column;
        gap: 6px;
    }

    .ng-picker-composition__add-select,
    .ng-picker-composition__auto-fill {
        width: 100%;
        justify-content: center;
    }

    .ng-picker-composition__row {
        padding: 8px 10px;
        font-size: 12px;
    }

    .ng-picker-composition__row-qty {
        font-size: 12px;
        padding: 2px 6px;
    }

    .ng-picker-order__composition-summary {
        padding: 10px 12px;
        margin-top: 10px;
    }

    .ng-picker-composition__summary-head {
        font-size: 12px;
    }

    .ng-picker-composition__summary-list {
        font-size: 12px;
    }
}

/* ============================================================
 * NG PROMPT — красивая модалка для ввода количества
 *
 * Заменяет системный window.prompt() при добавлении товара
 * в упаковку. Стилизована под ngConfirm, но с полем ввода.
 * ============================================================ */

.ng-prompt {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ng-prompt.is-open {
    display: flex;
    animation: ng-prompt-fade .15s ease-out;
}

@keyframes ng-prompt-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ng-prompt__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 43, 29, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.ng-prompt__dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(18, 43, 29, 0.28);
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #1A221E;
    animation: ng-prompt-pop .18s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes ng-prompt-pop {
    from { transform: scale(.94); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* Верхняя полоса */
.ng-prompt__stripe {
    height: 6px;
    background: #122B1D;
}

/* Шапка */
.ng-prompt__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px 6px;
}

.ng-prompt__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EBF1EC;
    color: #122B1D;
}

.ng-prompt__icon .material-symbols-outlined {
    font-size: 22px !important;
}

.ng-prompt__title {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #1A221E;
}

/* Тело */
.ng-prompt__body {
    padding: 8px 22px 8px;
    font-size: 14px;
    line-height: 1.55;
    color: #424843;
}

.ng-prompt__hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: #5F6B64;
}

/* Поле ввода */
.ng-prompt__input-wrap {
    position: relative;
    margin-bottom: 4px;
}

.ng-prompt__input {
    width: 100%;
    padding: 12px 14px;
    background: #F4F3F0;
    border: 1px solid #E3E8E4;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1A221E;
    outline: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

.ng-prompt__input:hover {
    background: #ffffff;
    border-color: #D5E1D8;
}

.ng-prompt__input:focus {
    background: #ffffff;
    border-color: #122B1D;
    box-shadow: 0 0 0 3px rgba(18, 43, 29, 0.1);
}

/* Убираем стрелки нативного number */
.ng-prompt__input::-webkit-outer-spin-button,
.ng-prompt__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ng-prompt__input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Ошибка валидации */
.ng-prompt__error {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #ba1a1a;
    display: none;
}

.ng-prompt__error.is-visible {
    display: block;
}

/* Кнопки */
.ng-prompt__foot {
    display: flex;
    gap: 10px;
    padding: 12px 22px 22px;
}

.ng-prompt__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, transform .06s;
}

.ng-prompt__btn:active {
    transform: scale(.98);
}

.ng-prompt__btn--ghost {
    background: #F4F3F0;
    color: #1A221E;
}

.ng-prompt__btn--ghost:hover {
    background: #E3E8E4;
}

.ng-prompt__btn--primary {
    background: #122B1D;
    color: #ffffff;
    flex: 1.4;
}

.ng-prompt__btn--primary:hover {
    background: #1B3B2B;
}

/* Мобильная адаптация */
@media (max-width: 480px) {
    .ng-prompt {
        padding: 0;
        align-items: flex-end;
    }

    .ng-prompt__dialog {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
    }

    .ng-prompt__foot {
        flex-direction: column-reverse;
        padding: 12px 18px calc(18px + env(safe-area-inset-bottom, 0));
    }

    .ng-prompt__btn {
        width: 100%;
        min-height: 48px;
    }

    .ng-prompt__head {
        padding: 18px 18px 6px;
    }

    .ng-prompt__body {
        padding: 8px 18px;
    }
}
/* ============================================================
 * NG PROMPT — кнопки − / + для быстрого ввода количества
 * ============================================================ */

.ng-prompt__input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ng-prompt__step-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: #F4F3F0;
    color: #122B1D;
    border: 1px solid #E3E8E4;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.ng-prompt__step-btn:hover:not(:disabled) {
    background: #EBF1EC;
    border-color: #D5E1D8;
}

.ng-prompt__step-btn:active:not(:disabled) {
    background: #D5E1D8;
}

.ng-prompt__step-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #F4F3F0;
    border-color: #E3E8E4;
    color: #5F6B64;
}

.ng-prompt__step-btn .material-symbols-outlined {
    font-size: 22px !important;
    font-variation-settings: 'FILL' 0, 'wght' 500;
}

.ng-prompt__input-row .ng-prompt__input {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    padding: 12px 8px;
}

@media (max-width: 480px) {
    .ng-prompt__step-btn {
        width: 44px;
        height: 44px;
    }
    .ng-prompt__input-row .ng-prompt__input {
        font-size: 18px;
    }
}
/* ============================================================
 * NG COURIER — кнопка «Выдать заказ» (Этап 5)
 *
 * Вторичное действие по отношению к «Принять заказы».
 * Terracotta-ghost: тёплая обводка, лёгкий фон, без заливки.
 * Не конкурирует с тёмно-зелёной primary-кнопкой.
 * ============================================================ */

.ng-courier__action--accent {
    background: #FBF3EE;
    color: #8A4A1F;
    border: 1px solid #E8C9B6;
    box-shadow: inset 0 0 0 0 rgba(200, 122, 84, 0);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

.ng-courier__action--accent:hover:not(:disabled) {
    background: #F6E3D6;
    color: #6E3A17;
    border-color: #C87A54;
    box-shadow: 0 2px 6px rgba(200, 122, 84, 0.18);
}

.ng-courier__action--accent:active:not(:disabled) {
    background: #EFD6C4;
    box-shadow: inset 0 1px 2px rgba(138, 74, 31, 0.12);
}

.ng-courier__action--accent .material-symbols-outlined {
    color: #C87A54;
    font-variation-settings: 'FILL' 0, 'wght' 500;
}

.ng-courier__action--accent:hover:not(:disabled) .material-symbols-outlined {
    color: #8A4A1F;
}

.ng-courier__action--accent:focus-visible {
    outline: 2px solid #C87A54;
    outline-offset: 2px;
}

/* На мобильных — чуть компактнее, чтобы не раздувать блок */
@media (max-width: 720px) {
    .ng-courier__action--accent {
        border-width: 1px;
    }
}
/* ============================================================
 * ЭТАП 5 / 5.1 — ВЫДАЧА ЗАКАЗА, ЧАСТИЧНЫЙ ОТКАЗ, ПЕРЕНОС
 *
 * Дизайн-система: forest-deep #122B1D, sage-subtle #EBF1EC,
 * sage-border #D5E1D8, terracotta #C87A54, border-soft #E3E8E4,
 * error #ba1a1a.
 * ============================================================ */

/* ---------- Кнопка «Выдать заказ» в шапке сводки ---------- */

.ng-courier__action--accent {
    background: #FBF3EE;
    color: #8A4A1F;
    border: 1px solid #E8C9B6;
    box-shadow: inset 0 0 0 0 rgba(200, 122, 84, 0);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

.ng-courier__action--accent:hover:not(:disabled) {
    background: #F6E3D6;
    color: #6E3A17;
    border-color: #C87A54;
    box-shadow: 0 2px 6px rgba(200, 122, 84, 0.18);
}

.ng-courier__action--accent:active:not(:disabled) {
    background: #EFD6C4;
    box-shadow: inset 0 1px 2px rgba(138, 74, 31, 0.12);
}

.ng-courier__action--accent .material-symbols-outlined {
    color: #C87A54;
    font-variation-settings: 'FILL' 0, 'wght' 500;
}

.ng-courier__action--accent:hover:not(:disabled) .material-symbols-outlined {
    color: #8A4A1F;
}

.ng-courier__action--accent:focus-visible {
    outline: 2px solid #C87A54;
    outline-offset: 2px;
}

/* ---------- Тосты (мелкие уведомления) ---------- */

.ng-courier-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    max-width: 360px;
    padding: 14px 18px;
    background: #122B1D;
    color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(18, 43, 29, 0.28);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    z-index: 100001;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.ng-courier-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 720px) {
    .ng-courier-toast {
        left: 14px;
        right: 14px;
        bottom: 14px;
        max-width: none;
        font-size: 13px;
        padding: 12px 14px;
    }
}

/* ---------- Блок «Приёмка / Принять без QR» в карточке заказа ---------- */

.ng-courier-order__section--accept {
    border-top: 1px solid #E3E8E4;
    padding-top: 16px;
}

.ng-courier-order__accept {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ng-courier-order__accept-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #5F6B64;
}

.ng-courier-card__btn--accept {
    background: #FBF3EE;
    color: #8A4A1F;
    border: 1px solid #E8C9B6;
    justify-content: center;
    padding: 12px 18px;
    font-size: 14px;
    min-height: 48px;
    width: 100%;
}

.ng-courier-card__btn--accept .material-symbols-outlined {
    color: #C87A54;
}

.ng-courier-card__btn--accept:hover:not(:disabled) {
    background: #F6E3D6;
    color: #6E3A17;
    border-color: #C87A54;
}

.ng-courier-card__btn--accept:hover:not(:disabled) .material-symbols-outlined {
    color: #8A4A1F;
}

/* ---------- Дополнительные плашки статуса выдачи ---------- */

.ng-courier-order__info--warn {
    background: #FBF3EE;
    color: #8A4A1F;
    border-left: 4px solid #C87A54;
}

.ng-courier-order__info--warn .material-symbols-outlined {
    color: #C87A54;
}

.ng-courier-order__info--error {
    background: #FFDAD6;
    color: #93000A;
    border-left: 4px solid #ba1a1a;
}

.ng-courier-order__info--error .material-symbols-outlined {
    color: #ba1a1a;
}

/* ---------- Модалка выдачи: базовая структура ---------- */

.ng-courier-delivery-modal__dialog {
    max-width: 640px !important;
    width: 100%;
}

.ng-courier-delivery-modal .ng-order-modal__body {
    padding: 16px 20px 20px;
}

/* Крестик в шапке модалки выдачи — крупный, контрастный (как у сканера) */

.ng-courier-delivery-modal .ng-order-modal__header {
    position: relative;
    z-index: 10;
    background: #ffffff;
    padding-right: 64px;
}

.ng-courier-delivery-modal .ng-order-modal__close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F4F3F0 !important;
    color: #122B1D !important;
    border: 1px solid #D5E1D8 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 20 !important;
    box-shadow: 0 2px 8px rgba(18, 43, 29, 0.08) !important;
    transition: background 0.15s, color 0.15s, transform 0.1s !important;
    -webkit-tap-highlight-color: transparent !important;
}

.ng-courier-delivery-modal .ng-order-modal__close:hover {
    background: #122B1D !important;
    color: #ffffff !important;
    border-color: #122B1D !important;
}

.ng-courier-delivery-modal .ng-order-modal__close:active {
    transform: scale(0.94) !important;
}

.ng-courier-delivery-modal .ng-order-modal__close .material-symbols-outlined {
    font-size: 22px !important;
    line-height: 1 !important;
    color: inherit !important;
    font-variation-settings: 'wght' 500 !important;
}

/* ---------- Модалка выдачи: общие элементы ---------- */

.ng-courier-delivery,
.ng-courier-refusal,
.ng-courier-pending {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ng-courier-delivery__loading,
.ng-courier-delivery__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 20px;
    text-align: center;
    font-size: 14px;
    color: #5F6B64;
}

.ng-courier-delivery__loading .material-symbols-outlined {
    font-size: 40px;
    color: #B1CDB9;
}

.ng-courier-delivery__error {
    color: #93000A;
    background: #FFDAD6;
    border-radius: 12px;
}

/* Шапка блока */

.ng-courier-delivery__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: #F4F4F0;
    border-radius: 12px;
}

.ng-courier-delivery__head > .material-symbols-outlined {
    font-size: 28px;
    color: #122B1D;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

.ng-courier-delivery__head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #122B1D;
    line-height: 1.3;
}

.ng-courier-delivery__head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #5F6B64;
}

/* Поле с textarea */

.ng-courier-delivery__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ng-courier-delivery__field label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5F6B64;
}

.ng-courier-delivery__field textarea {
    width: 100%;
    padding: 12px 14px;
    background: #F4F3F0;
    border: 1px solid #E3E8E4;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    color: #1A221E;
    resize: vertical;
    min-height: 68px;
    box-sizing: border-box;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.ng-courier-delivery__field textarea:focus {
    outline: none;
    background: #ffffff;
    border-color: #122B1D;
    box-shadow: 0 0 0 3px rgba(18, 43, 29, 0.08);
}

/* Причины (radio-карточки) */

.ng-courier-delivery__reasons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ng-delivery-reason {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #ffffff;
    border: 2px solid #E3E8E4;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #1A221E;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    user-select: none;
}

.ng-delivery-reason:hover {
    border-color: #C2C8C1;
    background: #FAFBF9;
}

.ng-delivery-reason input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: #122B1D;
    cursor: pointer;
    margin: 0;
}

.ng-delivery-reason span {
    flex: 1;
    min-width: 0;
}

.ng-delivery-reason:has(input:checked) {
    border-color: #122B1D;
    background: #EBF1EC;
    box-shadow: 0 2px 8px rgba(18, 43, 29, 0.06);
}

/* Кнопки внизу модалки */

.ng-courier-delivery__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid #E3E8E4;
    margin-top: 4px;
}

.ng-courier-delivery__btn {
    flex: 1 1 auto;
    min-width: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, opacity .15s, transform .06s;
    white-space: normal;
    text-align: center;
    min-height: 48px;
    box-sizing: border-box;
}

.ng-courier-delivery__btn:active:not(:disabled) {
    transform: scale(0.98);
}

.ng-courier-delivery__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ng-courier-delivery__btn .material-symbols-outlined {
    font-size: 20px !important;
    flex-shrink: 0;
    line-height: 1;
}

.ng-courier-delivery__btn--ghost {
    background: #F4F3F0;
    color: #1A221E;
    border-color: #E3E8E4;
    flex: 0 0 auto;
    min-width: 120px;
}

.ng-courier-delivery__btn--ghost:hover:not(:disabled) {
    background: #E3E8E4;
}

.ng-courier-delivery__btn--primary {
    background: #122B1D;
    color: #ffffff;
}

.ng-courier-delivery__btn--primary:hover:not(:disabled) {
    background: #1B3B2B;
}

.ng-courier-delivery__btn--primary .material-symbols-outlined {
    color: #CCEAD4;
}

.ng-courier-delivery__btn--danger {
    background: #ba1a1a;
    color: #ffffff;
}

.ng-courier-delivery__btn--danger:hover:not(:disabled) {
    background: #93000A;
}

/* ---------- Модалка «Частичный отказ» ---------- */

.ng-courier-refusal__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ng-courier-refusal__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: #ffffff;
    border: 2px solid #E3E8E4;
    border-radius: 12px;
    transition: border-color .15s, background .15s;
}

.ng-courier-refusal__item:has([data-refuse-toggle]:checked) {
    border-color: #C87A54;
    background: #FCF6F2;
}

.ng-courier-refusal__item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.ng-courier-refusal__name {
    flex: 1 1 60%;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #1A221E;
    word-break: break-word;
}

.ng-courier-refusal__meta {
    flex: 0 0 auto;
    font-size: 12px;
    color: #5F6B64;
    white-space: nowrap;
}

.ng-courier-refusal__item-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px solid #F0F2EE;
}

.ng-courier-refusal__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #1A221E;
    cursor: pointer;
    user-select: none;
}

.ng-courier-refusal__check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #C87A54;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.ng-courier-refusal__qty-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #D5E1D8;
    border-radius: 8px;
    padding: 2px;
}

.ng-courier-refusal__qty-label {
    padding-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #5F6B64;
    white-space: nowrap;
}

.ng-courier-refusal__qty-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #F4F4F0;
    color: #122B1D;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.ng-courier-refusal__qty-btn:hover {
    background: #E3E8E4;
}

.ng-courier-refusal__qty-input {
    width: 48px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #122B1D;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.ng-courier-refusal__qty-input::-webkit-outer-spin-button,
.ng-courier-refusal__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Сводка */

.ng-courier-refusal__summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: #F4F4F0;
    border-radius: 12px;
}

.ng-courier-refusal__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
    color: #424843;
}

.ng-courier-refusal__summary-row strong {
    color: #122B1D;
    font-weight: 700;
    font-size: 16px;
}

.ng-courier-refusal__summary-row--threshold {
    padding-top: 8px;
    border-top: 1px dashed #D5E1D8;
    font-size: 13px;
    color: #5F6B64;
}

.ng-courier-refusal__warning {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: #FFDAD6;
    border-left: 3px solid #ba1a1a;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: #93000A;
}

.ng-courier-refusal__warning[hidden] {
    display: none;
}

.ng-courier-refusal__warning .material-symbols-outlined {
    font-size: 20px !important;
    color: #ba1a1a;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1;
}

/* ---------- Модалка «Частичная доставка» ---------- */

.ng-courier-pending__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ng-courier-pending__pkg {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 2px solid #E3E8E4;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s, opacity .15s;
    user-select: none;
}

.ng-courier-pending__pkg:hover {
    border-color: #C2C8C1;
    background: #FAFBF9;
}

.ng-courier-pending__pkg input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 4px;
    width: 18px;
    height: 18px;
    accent-color: #122B1D;
    cursor: pointer;
}

.ng-courier-pending__pkg.is-pending {
    background: #FFF8E6;
    border-color: #F1D48A;
}

.ng-courier-pending__pkg-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ng-courier-pending__pkg-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1A221E;
}

.ng-courier-pending__pkg-title strong {
    font-weight: 700;
    color: #122B1D;
}

.ng-courier-pending__pkg-title .material-symbols-outlined {
    font-size: 18px;
    color: #4a6453;
}

.ng-courier-pending__pkg.is-pending .ng-courier-pending__pkg-title .material-symbols-outlined {
    color: #B06A48;
}

.ng-courier-pending__pkg-items {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    font-size: 13px;
    line-height: 1.5;
    color: #5F6B64;
}

.ng-courier-pending__pkg-items li {
    margin: 2px 0;
}

.ng-courier-pending__pkg-items li.is-empty {
    list-style: none;
    margin-left: -18px;
    font-style: italic;
    color: #8A9A8E;
}

/* ---------- Мобильная адаптация ---------- */

@media (max-width: 720px) {
    .ng-courier-delivery-modal {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .ng-courier-delivery-modal__dialog {
        max-width: 100% !important;
        max-height: 94vh !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .ng-courier-delivery-modal .ng-order-modal__header {
        padding: 14px 56px 14px 16px !important;
    }

    .ng-courier-delivery-modal .ng-order-modal__close {
        top: 10px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .ng-courier-delivery-modal .ng-order-modal__close .material-symbols-outlined {
        font-size: 20px !important;
    }

    .ng-courier-delivery-modal .ng-order-modal__body {
        padding: 12px 14px 16px;
    }

    .ng-courier-delivery__head {
        padding: 12px 14px;
    }

    .ng-courier-delivery__head h3 {
        font-size: 16px;
    }

    .ng-courier-delivery__head p {
        font-size: 12px;
    }

    .ng-courier-delivery__actions {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .ng-courier-delivery__btn {
        width: 100%;
        min-width: 0;
        min-height: 48px;
    }

    .ng-courier-delivery__btn--ghost {
        min-width: 0;
    }

    .ng-courier-refusal__item {
        padding: 10px 12px;
    }

    .ng-courier-refusal__item-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .ng-courier-refusal__check {
        font-size: 14px;
    }

    .ng-courier-refusal__qty-wrap {
        justify-content: space-between;
        width: 100%;
    }

    .ng-courier-refusal__qty-input {
        width: 56px;
        font-size: 16px;
    }

    .ng-courier-pending__pkg {
        padding: 10px 12px;
    }

    .ng-courier-pending__pkg-title {
        font-size: 13px;
    }

    .ng-courier-pending__pkg-items {
        font-size: 12px;
    }

    .ng-courier-toast {
        left: 14px;
        right: 14px;
        bottom: 14px;
        max-width: none;
        font-size: 13px;
        padding: 12px 14px;
    }
}

/* ---------- Очень узкие экраны ---------- */

@media (max-width: 420px) {
    .ng-courier-delivery__head {
        padding: 10px 12px;
    }

    .ng-courier-delivery__head > .material-symbols-outlined {
        font-size: 24px;
    }

    .ng-courier-delivery__head h3 {
        font-size: 15px;
    }

    .ng-courier-refusal__meta {
        font-size: 11px;
    }

    .ng-courier-refusal__summary-row {
        font-size: 13px;
    }

    .ng-courier-refusal__summary-row strong {
        font-size: 15px;
    }
}
/* ============================================================ 
 * АДМИН-МОДАЛКА: БЛОК «ЕСТЬ ПЕРЕНОС / ОТКАЗ»
 * ============================================================ */

.ng-admin-pending-block {
    background: #FBF3EE;
    border: 1px solid #E8C9B6;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}
.ng-admin-pending-block h3 {
    color: #8A4A1F !important;
    border-bottom: 1px dashed #E8C9B6 !important;
    margin-bottom: 12px !important;
}
.ng-admin-pending-block--danger {
    background: #FFDAD6;
    border-color: #f0cfc9;
}
.ng-admin-pending-block--danger h3 {
    color: #93000A !important;
    border-bottom-color: #f0cfc9 !important;
}
/* ============================================================
 * NG COURIER — кнопка «Завершить маршрут» (Этап 5.4)
 *
 * Опасное действие (снимает заказы с маршрута).
 * Красный ghost-стиль: заметно, но не перебивает основные кнопки.
 * ============================================================ */

.ng-courier__action--danger {
    background: #FFF1EF;
    color: #93000A;
    border: 1px solid #F0CFC9;
    box-shadow: inset 0 0 0 0 rgba(186, 26, 26, 0);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

.ng-courier__action--danger:hover:not(:disabled) {
    background: #FFE4E1;
    color: #7A0008;
    border-color: #E3A39A;
    box-shadow: 0 2px 6px rgba(186, 26, 26, 0.15);
}

.ng-courier__action--danger:active:not(:disabled) {
    background: #FFDAD6;
    box-shadow: inset 0 1px 2px rgba(186, 26, 26, 0.1);
}

.ng-courier__action--danger .material-symbols-outlined {
    color: #BA1A1A;
    font-variation-settings: 'FILL' 0, 'wght' 500;
}

.ng-courier__action--danger:hover:not(:disabled) .material-symbols-outlined {
    color: #93000A;
}

.ng-courier__action--danger:focus-visible {
    outline: 2px solid #BA1A1A;
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .ng-courier__action--danger {
        border-width: 1px;
    }
}
/* ============================================================
 * NG REPLACEMENT — модалка «Предложить замену» (Этап 7.1)
 *
 * Открывается в ЛК сборщика при нажатии «Нет в наличии»,
 * если у товара есть аналоги в наличии (та же категория).
 * Позволяет выбрать 1–3 аналога + комментарий + чекбокс
 * «Больше не спрашивать в этом заказе».
 *
 * Дизайн-система: forest-deep #122B1D, sage-subtle #EBF1EC,
 * sage-border #D5E1D8, terracotta #C87A54, border-soft #E3E8E4,
 * error #ba1a1a.
 * ============================================================ */

/* ---------- Оверлей ---------- */

.ng-replacement {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ng-replacement.is-open {
    display: flex;
    animation: ng-replacement-fade .15s ease-out;
}

@keyframes ng-replacement-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ng-replacement__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 43, 29, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ---------- Диалог ---------- */

.ng-replacement__dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(18, 43, 29, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #1A221E;
    animation: ng-replacement-pop .18s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes ng-replacement-pop {
    from { transform: scale(.94); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ---------- Верхняя полоса ---------- */

.ng-replacement__stripe {
    height: 6px;
    background: #C87A54;
}

/* ---------- Шапка ---------- */

.ng-replacement__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px 8px;
}

.ng-replacement__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FBF3EE;
    color: #C87A54;
}

.ng-replacement__icon .material-symbols-outlined {
    font-size: 22px !important;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

.ng-replacement__title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #1A221E;
}

.ng-replacement__sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #5F6B64;
}

/* ---------- Тело ---------- */

.ng-replacement__body {
    padding: 8px 22px 4px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.ng-replacement__hint {
    margin: 0 0 10px;
    font-size: 13px;
    color: #5F6B64;
    line-height: 1.5;
}

/* ---------- Список аналогов ---------- */

.ng-replacement__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.ng-replacement__option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 2px solid #E3E8E4;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.ng-replacement__option:hover {
    border-color: #C2C8C1;
    background: #FAFBF9;
}

.ng-replacement__option:has(.ng-replacement__check:checked) {
    border-color: #122B1D;
    background: #EBF1EC;
    box-shadow: 0 2px 8px rgba(18, 43, 29, 0.06);
}

.ng-replacement__check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 4px;
    accent-color: #122B1D;
    cursor: pointer;
}

.ng-replacement__thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #F4F4F0;
    display: block;
}

.ng-replacement__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ng-replacement__body {
    /* ВНИМАНИЕ: класс .ng-replacement__body уже есть выше (общий контейнер).
       Это внутренний span — используем .ng-replacement__option .ng-replacement__body
       для уточнения. */
}

.ng-replacement__option .ng-replacement__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ng-replacement__name {
    font-size: 14px;
    font-weight: 600;
    color: #1A221E;
    line-height: 1.35;
    word-break: break-word;
}

.ng-replacement__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: #5F6B64;
    line-height: 1.4;
}

.ng-replacement__price {
    font-weight: 600;
    color: #122B1D;
}

.ng-replacement__price .woocommerce-Price-amount,
.ng-replacement__price bdi {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}

.ng-replacement__stock {
    padding: 1px 8px;
    background: #EBF1EC;
    color: #122B1D;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Комментарий ---------- */

.ng-replacement__comment-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5F6B64;
}

.ng-replacement__comment {
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: #F4F3F0;
    border: 1px solid #E3E8E4;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    color: #1A221E;
    resize: vertical;
    box-sizing: border-box;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.ng-replacement__comment:hover {
    background: #ffffff;
    border-color: #D5E1D8;
}

.ng-replacement__comment:focus {
    outline: none;
    background: #ffffff;
    border-color: #122B1D;
    box-shadow: 0 0 0 3px rgba(18, 43, 29, 0.1);
}

/* ---------- Чекбокс «Больше не спрашивать» ---------- */

.ng-replacement__noask {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #F4F4F0;
    border-radius: 10px;
    font-size: 13px;
    color: #424843;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.4;
}

.ng-replacement__noask-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: #122B1D;
    cursor: pointer;
    margin: 0;
}

/* ---------- Кнопки ---------- */

.ng-replacement__foot {
    display: flex;
    gap: 10px;
    padding: 14px 22px 20px;
    border-top: 1px solid #F0F2EE;
    background: #FAFAF8;
    flex-wrap: wrap;
}

.ng-replacement__btn {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s, color .15s, transform .06s, opacity .15s;
    white-space: nowrap;
    box-sizing: border-box;
    min-height: 46px;
}

.ng-replacement__btn:active:not(:disabled) {
    transform: scale(.98);
}

.ng-replacement__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ng-replacement__btn .material-symbols-outlined {
    font-size: 18px !important;
    flex-shrink: 0;
    line-height: 1;
}

.ng-replacement__btn--ghost {
    background: #F4F3F0;
    color: #1A221E;
}

.ng-replacement__btn--ghost:hover:not(:disabled) {
    background: #E3E8E4;
}

.ng-replacement__btn--primary {
    background: #122B1D;
    color: #ffffff;
    flex: 1.4;
}

.ng-replacement__btn--primary:hover:not(:disabled) {
    background: #1B3B2B;
}

.ng-replacement__btn--primary .material-symbols-outlined {
    color: #CCEAD4;
}

/* ---------- Мобильная адаптация (bottom-sheet) ---------- */

@media (max-width: 520px) {
    .ng-replacement {
        padding: 0;
        align-items: flex-end;
    }

    .ng-replacement__dialog {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
    }

    .ng-replacement__head {
        padding: 18px 18px 6px;
    }

    .ng-replacement__title {
        font-size: 16px;
    }

    .ng-replacement__body {
        padding: 6px 18px 2px;
    }

    .ng-replacement__foot {
        padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0));
        flex-direction: column-reverse;
    }

    .ng-replacement__btn {
        width: 100%;
        min-height: 48px;
    }

    .ng-replacement__option {
        padding: 10px;
    }

    .ng-replacement__thumb {
        width: 40px;
        height: 40px;
    }

    .ng-replacement__name {
        font-size: 13px;
    }
}

/* ---------- Доступность: reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .ng-replacement.is-open,
    .ng-replacement__dialog {
        animation: none;
    }
}
/* ============================================================
 * NG REPLACEMENT — ДУБЛЬ-ФИКС (Этап 7.1)
 * Вторая попытка гарантировать стили модалки. Если первый
 * блок выше не применился из-за синтаксической ошибки — этот
 * зайдёт, потому что идёт последним.
 * Никаких комментариев внутри — чтобы точно не сломать.
 * ============================================================ */
.ng-replacement{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:16px;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.ng-replacement.is-open{display:flex}
.ng-replacement__backdrop{position:absolute;inset:0;background:rgba(18,43,29,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ng-replacement__dialog{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 32px);background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(18,43,29,.28);overflow:hidden;display:flex;flex-direction:column;color:#1A221E}
.ng-replacement__stripe{height:6px;background:#C87A54}
.ng-replacement__head{display:flex;align-items:flex-start;gap:14px;padding:20px 22px 8px}
.ng-replacement__icon{flex-shrink:0;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#FBF3EE;color:#C87A54}
.ng-replacement__icon .material-symbols-outlined{font-size:22px!important}
.ng-replacement__title{margin:0 0 4px;font-size:17px;font-weight:700;line-height:1.3;color:#1A221E}
.ng-replacement__sub{margin:0;font-size:13px;line-height:1.45;color:#5F6B64}
.ng-replacement__body{padding:8px 22px 4px;overflow-y:auto;flex:1;min-height:0}
.ng-replacement__hint{margin:0 0 10px;font-size:13px;color:#5F6B64;line-height:1.5}
.ng-replacement__options{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.ng-replacement__option{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;background:#fff;border:2px solid #E3E8E4;border-radius:12px;cursor:pointer}
.ng-replacement__option:hover{border-color:#C2C8C1;background:#FAFBF9}
.ng-replacement__option:has(.ng-replacement__check:checked){border-color:#122B1D;background:#EBF1EC}
.ng-replacement__check{flex-shrink:0;width:18px;height:18px;margin-top:4px;accent-color:#122B1D;cursor:pointer}
.ng-replacement__thumb{flex-shrink:0;width:48px;height:48px;border-radius:8px;overflow:hidden;background:#F4F4F0;display:block}
.ng-replacement__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ng-replacement__option .ng-replacement__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:0;overflow:visible}
.ng-replacement__name{font-size:14px;font-weight:600;color:#1A221E;line-height:1.35;word-break:break-word}
.ng-replacement__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:12px;color:#5F6B64}
.ng-replacement__price{font-weight:600;color:#122B1D}
.ng-replacement__stock{padding:1px 8px;background:#EBF1EC;color:#122B1D;border-radius:10px;font-size:11px;font-weight:600}
.ng-replacement__comment-label{display:block;margin-bottom:6px;font-size:12px;font-weight:700;text-transform:uppercase;color:#5F6B64}
.ng-replacement__comment{width:100%;min-height:60px;padding:10px 12px;margin-bottom:14px;background:#F4F3F0;border:1px solid #E3E8E4;border-radius:10px;font-family:inherit;font-size:14px;color:#1A221E;resize:vertical;box-sizing:border-box}
.ng-replacement__comment:focus{outline:none;background:#fff;border-color:#122B1D;box-shadow:0 0 0 3px rgba(18,43,29,.1)}
.ng-replacement__noask{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#F4F4F0;border-radius:10px;font-size:13px;color:#424843;cursor:pointer}
.ng-replacement__noask-check{flex-shrink:0;width:18px;height:18px;accent-color:#122B1D;cursor:pointer}
.ng-replacement__foot{display:flex;gap:10px;padding:14px 22px 20px;border-top:1px solid #F0F2EE;background:#FAFAF8;flex-wrap:wrap}
.ng-replacement__btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;border-radius:10px;border:0;font-family:inherit;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;min-height:46px}
.ng-replacement__btn:disabled{opacity:.5;cursor:not-allowed}
.ng-replacement__btn--ghost{background:#F4F3F0;color:#1A221E}
.ng-replacement__btn--ghost:hover:not(:disabled){background:#E3E8E4}
.ng-replacement__btn--primary{background:#122B1D;color:#fff;flex:1.4}
.ng-replacement__btn--primary:hover:not(:disabled){background:#1B3B2B}
@media (max-width:520px){
.ng-replacement{padding:0;align-items:flex-end}
.ng-replacement__dialog{max-width:100%;max-height:92vh;border-radius:16px 16px 0 0}
.ng-replacement__head{padding:18px 18px 6px}
.ng-replacement__title{font-size:16px}
.ng-replacement__body{padding:6px 18px 2px}
.ng-replacement__foot{padding:12px 18px calc(14px + env(safe-area-inset-bottom,0));flex-direction:column-reverse}
.ng-replacement__btn{width:100%;min-height:48px}
.ng-replacement__option{padding:10px}
.ng-replacement__thumb{width:40px;height:40px}
.ng-replacement__name{font-size:13px}
}
/* ============================================================
 * NG REPLACEMENT — ФИНАЛЬНЫЕ ПРАВКИ (Этап 7.1)
 * 
 * 1. Кнопки в подвале: перенос текста, равные высоты, не вылезают.
 * 2. Primary-кнопка больше не «съедает» соседние.
 * 3. Красивое оформление опций: убрана лишняя обводка фокуса,
 *    выровнены отступы, добавлена подсветка выбранных.
 * 4. Мобильная адаптация: кнопки в столбик, ничего не режется.
 * ============================================================ */

/* ---------- 1. Подвал: сетка вместо flex, кнопки в один ряд ---------- */

.ng-replacement__foot {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.4fr !important;
    gap: 10px !important;
    padding: 14px 22px 18px !important;
    border-top: 1px solid #F0F2EE !important;
    background: #FAFAF8 !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

.ng-replacement__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: 0 !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    white-space: normal !important;       /* ← ключевое: разрешаем перенос */
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    cursor: pointer !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    transition: background .15s, color .15s, transform .06s, opacity .15s !important;
}

.ng-replacement__btn:active:not(:disabled) {
    transform: scale(.98) !important;
}

.ng-replacement__btn:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
}

/* Ghost-кнопки */
.ng-replacement__btn--ghost {
    background: #F4F3F0 !important;
    color: #1A221E !important;
}
.ng-replacement__btn--ghost:hover:not(:disabled) {
    background: #E3E8E4 !important;
}

/* Primary-кнопка: без flex:1.4, ширину задаёт grid-колонка */
.ng-replacement__btn--primary {
    background: #122B1D !important;
    color: #FFFFFF !important;
    flex: none !important;
}
.ng-replacement__btn--primary:hover:not(:disabled) {
    background: #1B3B2B !important;
}
.ng-replacement__btn--primary .material-symbols-outlined {
    color: #CCEAD4 !important;
}

.ng-replacement__btn .material-symbols-outlined {
    font-size: 18px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* ---------- 2. Опции: убираем чёрную обводку, красим фокус ---------- */

.ng-replacement__option {
    position: relative !important;
    padding: 12px 14px !important;
    border: 2px solid #E3E8E4 !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    transition: border-color .15s, background .15s, box-shadow .15s !important;
    cursor: pointer !important;
}

.ng-replacement__option:hover {
    border-color: #C2C8C1 !important;
    background: #FAFBF9 !important;
}

.ng-replacement__option:has(.ng-replacement__check:checked) {
    border-color: #122B1D !important;
    background: #EBF1EC !important;
    box-shadow: 0 2px 8px rgba(18, 43, 29, .06) !important;
}

/* Чекбокс: убираем чёрную рамку фокуса, даём мягкую подсветку */
.ng-replacement__check {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 4px !important;
    accent-color: #122B1D !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
.ng-replacement__check:focus,
.ng-replacement__check:focus-visible {
    outline: 2px solid rgba(18, 43, 29, .35) !important;
    outline-offset: 2px !important;
    border-radius: 3px !important;
}

/* Улучшаем миниатюру: чуть больше, с лёгкой тенью */
.ng-replacement__thumb {
    width: 52px !important;
    height: 52px !important;
    border-radius: 10px !important;
    background: #F4F4F0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.ng-replacement__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.ng-replacement__option .ng-replacement__body {
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.ng-replacement__name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1A221E !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

.ng-replacement__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #5F6B64 !important;
}

.ng-replacement__price {
    font-weight: 700 !important;
    color: #122B1D !important;
}

.ng-replacement__stock {
    padding: 2px 9px !important;
    background: #EBF1EC !important;
    color: #122B1D !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* ---------- 3. Шапка и поле комментария — чуть аккуратнее ---------- */

.ng-replacement__head {
    padding: 22px 24px 10px !important;
    gap: 14px !important;
}

.ng-replacement__icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #FBF3EE !important;
    color: #C87A54 !important;
}

.ng-replacement__icon .material-symbols-outlined {
    font-size: 24px !important;
    font-variation-settings: 'FILL' 1, 'wght' 500 !important;
}

.ng-replacement__title {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 4px !important;
}

.ng-replacement__sub {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #5F6B64 !important;
    margin: 0 !important;
}

.ng-replacement__body {
    padding: 8px 24px 4px !important;
}

.ng-replacement__hint {
    font-size: 13px !important;
    color: #5F6B64 !important;
    margin: 0 0 12px !important;
}

.ng-replacement__comment-label {
    display: block !important;
    margin: 16px 0 6px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #5F6B64 !important;
}

.ng-replacement__comment {
    width: 100% !important;
    min-height: 64px !important;
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
    background: #F4F3F0 !important;
    border: 1px solid #E3E8E4 !important;
    border-radius: 10px !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #1A221E !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}
.ng-replacement__comment:focus {
    outline: none !important;
    background: #FFFFFF !important;
    border-color: #122B1D !important;
    box-shadow: 0 0 0 3px rgba(18, 43, 29, .1) !important;
}

/* Чекбокс «Больше не спрашивать» */
.ng-replacement__noask {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    background: #F4F4F0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: #424843 !important;
    cursor: pointer !important;
    user-select: none !important;
    margin-bottom: 4px !important;
}
.ng-replacement__noask-check {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: #122B1D !important;
    cursor: pointer !important;
    outline: none !important;
}

/* ---------- 4. Мобильная адаптация ---------- */

@media (max-width: 520px) {
    .ng-replacement__foot {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0)) !important;
    }

    /* Primary — первой, потом ghost-кнопки */
    .ng-replacement__btn--primary {
        order: -1 !important;
    }

    .ng-replacement__btn {
        min-height: 48px !important;
    }

    .ng-replacement__head {
        padding: 18px 18px 8px !important;
    }

    .ng-replacement__body {
        padding: 6px 18px 2px !important;
    }

    .ng-replacement__title {
        font-size: 16px !important;
    }

    .ng-replacement__option {
        padding: 10px 12px !important;
    }

    .ng-replacement__thumb {
        width: 44px !important;
        height: 44px !important;
    }

    .ng-replacement__name {
        font-size: 13px !important;
    }
}

/* ---------- 5. Узкие экраны: кнопки в столбик ---------- */

@media (max-width: 380px) {
    .ng-replacement__foot {
        grid-template-columns: 1fr !important;
    }
}
/* ============================================================
 * NG REPLACEMENT — КАСТОМНЫЕ ЧЕКБОКСЫ (Этап 7.1)
 *
 * 1. Скрываем нативный чекбокс, рисуем свой через ::before.
 * 2. Единый вид у всех опций (без «скачков»).
 * 3. При выборе — заливка forest-deep #122B1D и белая галочка.
 * 4. Аккуратный hover и focus-visible.
 * ============================================================ */

/* --- Сам чекбокс (скрыт, но кликабелен через label) --- */
.ng-replacement__check {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* --- Опция: общий контейнер --- */
.ng-replacement__option {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    background: #FFFFFF !important;
    border: 2px solid #E3E8E4 !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: border-color .15s, background .15s, box-shadow .15s !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.ng-replacement__option:hover {
    border-color: #C2C8C1 !important;
    background: #FAFBF9 !important;
}

/* --- Квадрат вместо нативного чекбокса --- */
.ng-replacement__option::before {
    content: '' !important;
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #C2C8C1 !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    transition: background .15s, border-color .15s !important;
    box-sizing: border-box !important;
    display: inline-block !important;
}

/* --- Галочка внутри квадрата (появляется при :checked) --- */
.ng-replacement__option::after {
    content: '' !important;
    position: absolute !important;
    left: 24px !important;     /* 16 padding + 2 border + 6 = 24 */
    top: 50% !important;
    width: 10px !important;
    height: 5px !important;
    border-left: 2px solid #FFFFFF !important;
    border-bottom: 2px solid #FFFFFF !important;
    transform: translateY(-70%) rotate(-45deg) scale(0) !important;
    transition: transform .15s ease-out !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* --- Состояние «выбрано»: заливка + белая галочка --- */
.ng-replacement__option:has(.ng-replacement__check:checked) {
    border-color: #122B1D !important;
    background: #EBF1EC !important;
    box-shadow: 0 2px 8px rgba(18, 43, 29, .06) !important;
}

.ng-replacement__option:has(.ng-replacement__check:checked)::before {
    background: #122B1D !important;
    border-color: #122B1D !important;
}

.ng-replacement__option:has(.ng-replacement__check:checked)::after {
    transform: translateY(-70%) rotate(-45deg) scale(1) !important;
    opacity: 1 !important;
}

/* --- Focus-visible для клавиатуры --- */
.ng-replacement__check:focus-visible + .ng-replacement__thumb,
.ng-replacement__check:focus-visible ~ .ng-replacement__body {
    /* не трогаем — фокус на самой опции */
}
.ng-replacement__option:has(.ng-replacement__check:focus-visible) {
    outline: 3px solid rgba(18, 43, 29, .25) !important;
    outline-offset: 2px !important;
}

/* --- Внутренний контейнер опции (thumb + text) --- */
.ng-replacement__option .ng-replacement__body {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* --- Миниатюра --- */
.ng-replacement__thumb {
    flex-shrink: 0 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #F4F4F0 !important;
    display: block !important;
}
.ng-replacement__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* --- Название и мета --- */
.ng-replacement__name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1A221E !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

.ng-replacement__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #5F6B64 !important;
}

.ng-replacement__price {
    font-weight: 700 !important;
    color: #122B1D !important;
}

.ng-replacement__stock {
    padding: 2px 9px !important;
    background: #EBF1EC !important;
    color: #122B1D !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* --- Мобильная адаптация --- */
@media (max-width: 520px) {
    .ng-replacement__option {
        padding: 12px 14px !important;
        gap: 12px !important;
    }

    .ng-replacement__option::before {
        width: 20px !important;
        height: 20px !important;
    }

    .ng-replacement__option::after {
        left: 20px !important;
        width: 9px !important;
        height: 4px !important;
    }

    .ng-replacement__thumb {
        width: 44px !important;
        height: 44px !important;
    }

    .ng-replacement__name {
        font-size: 13px !important;
    }
}
/* ============================================================
 * ЛК КЛИЕНТА — БЛОК «ДОСТАВКА НЕ СОСТОЯЛАСЬ / ЧАСТИЧНО / ОТКАЗ»
 * (Этап 5) — красивое оформление блока + кнопки.
 * ============================================================ */

.ng-cab-delivery-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    margin: 16px 0;
    background: #FFFFFF;
    border: 1px solid #E3E8E4;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(20, 30, 24, .04);
}

.ng-cab-delivery-info--partial_delivery {
    background: #FFF8E6;
    border-color: #F1D48A;
}
.ng-cab-delivery-info--partial_refusal {
    background: #FBF3EE;
    border-color: #E8C9B6;
}
.ng-cab-delivery-info--not_delivered {
    background: #FFDAD6;
    border-color: #F0CFC9;
}

/* Шапка */
.ng-cab-delivery-info__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ng-cab-delivery-info__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #122B1D;
}
.ng-cab-delivery-info__icon .material-symbols-outlined {
    font-size: 26px !important;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

.ng-cab-delivery-info--partial_delivery .ng-cab-delivery-info__icon { background: #FBE7A2; color: #7A5A10; }
.ng-cab-delivery-info--partial_refusal  .ng-cab-delivery-info__icon { background: #F4D8C5; color: #8A4A1F; }
.ng-cab-delivery-info--not_delivered    .ng-cab-delivery-info__icon { background: #F3B8B3; color: #93000A; }

.ng-cab-delivery-info__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

.ng-cab-delivery-info__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #1A221E;
}
.ng-cab-delivery-info--partial_delivery .ng-cab-delivery-info__title { color: #5A4208; }
.ng-cab-delivery-info--partial_refusal  .ng-cab-delivery-info__title { color: #6E3A17; }
.ng-cab-delivery-info--not_delivered    .ng-cab-delivery-info__title { color: #7A0008; }

.ng-cab-delivery-info__sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #424843;
}
.ng-cab-delivery-info--not_delivered .ng-cab-delivery-info__sub { color: #6E1A17; }

/* Ожидается */
.ng-cab-delivery-info__pending {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 14px 16px;
}
.ng-cab-delivery-info__pending-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5F6B64;
    margin-bottom: 8px;
}
.ng-cab-delivery-info__pending-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #1A221E;
}
.ng-cab-delivery-info__pending-list li {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: baseline;
}
.ng-cab-delivery-info__pkg {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #122B1D;
    background: #EBF1EC;
    padding: 2px 8px;
    border-radius: 8px;
}

/* Возврат */
.ng-cab-delivery-info__refund {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #F4F3F0;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #424843;
}
.ng-cab-delivery-info__refund .material-symbols-outlined {
    font-size: 20px !important;
    color: #122B1D;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1;
}
.ng-cab-delivery-info__refund strong { color: #122B1D; }

/* Статус-плашка (ожидание/оспаривание) */
.ng-cab-delivery-info__status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #EBF1EC;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #122B1D;
}
.ng-cab-delivery-info__status .material-symbols-outlined {
    font-size: 20px !important;
    color: #122B1D;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1;
}
.ng-cab-delivery-info__status--warn {
    background: #FFF8E6;
    color: #7A5A10;
}
.ng-cab-delivery-info__status--warn .material-symbols-outlined { color: #B97300; }

/* Кнопки */
.ng-cab-delivery-info__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}
.ng-cab-delivery-info__actions .ng-cab-btn {
    height: 44px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, opacity .15s;
    line-height: 1;
    box-sizing: border-box;
    text-decoration: none;
}
.ng-cab-delivery-info__actions .ng-cab-btn .material-symbols-outlined {
    font-size: 18px !important;
    line-height: 1;
    flex-shrink: 0;
}
.ng-cab-delivery-info__actions .ng-cab-btn-primary {
    background: #122B1D;
    color: #FFFFFF;
    border-color: #122B1D;
}
.ng-cab-delivery-info__actions .ng-cab-btn-primary:hover {
    background: #1B3B2B;
    border-color: #1B3B2B;
}
.ng-cab-delivery-info__actions .ng-cab-btn-ghost {
    background: #FFFFFF;
    color: #1A221E;
    border-color: #D5E1D8;
}
.ng-cab-delivery-info__actions .ng-cab-btn-ghost:hover {
    background: #EBF1EC;
    border-color: #B1CDB9;
}
.ng-cab-delivery-info__actions .ng-cab-btn-small {
    height: 38px;
    padding: 0 14px;
    font-size: 12px;
}

@media (max-width: 520px) {
    .ng-cab-delivery-info { padding: 16px 18px; }
    .ng-cab-delivery-info__icon { width: 40px; height: 40px; }
    .ng-cab-delivery-info__icon .material-symbols-outlined { font-size: 22px !important; }
    .ng-cab-delivery-info__title { font-size: 15px; }
    .ng-cab-delivery-info__sub   { font-size: 13px; }
    .ng-cab-delivery-info__actions { flex-direction: column; }
    .ng-cab-delivery-info__actions .ng-cab-btn { width: 100%; justify-content: center; }
}

/* ============================================================
 * ЛК КЛИЕНТА — БЛОК «ЧТО ДЕЛАЕМ?» (Этап 7.2)
 * ============================================================ */

.ng-cab-awaiting {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 24px;
    margin: 16px 0;
    background: linear-gradient(180deg, #FBF3EE 0%, #FFFFFF 60%);
    border: 2px solid #C87A54;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(200, 122, 84, 0.10);
}

.ng-cab-awaiting__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ng-cab-awaiting__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #C87A54;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ng-cab-awaiting__icon .material-symbols-outlined {
    font-size: 26px !important;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

.ng-cab-awaiting__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}
.ng-cab-awaiting__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: #122B1D;
}
.ng-cab-awaiting__sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #424843;
}
.ng-cab-awaiting__deadline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #8A4A1F;
}
.ng-cab-awaiting__deadline .material-symbols-outlined {
    font-size: 16px !important;
}

/* Список недостающих */
.ng-cab-awaiting__missing {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #F0D5C4;
}
.ng-cab-awaiting__missing-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8A4A1F;
    margin-bottom: 8px;
}
.ng-cab-awaiting__missing-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ng-cab-awaiting__missing-list li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    font-size: 14px;
    color: #1A221E;
    align-items: baseline;
}
.ng-cab-awaiting__missing-name { font-weight: 600; }
.ng-cab-awaiting__missing-qty  { color: #5F6B64; font-size: 13px; }
.ng-cab-awaiting__missing-sum  { color: #122B1D; font-weight: 700; font-size: 14px; }

/* Предложенные аналоги */
.ng-cab-awaiting__proposed {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ng-cab-awaiting__proposed-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #8A4A1F;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ng-cab-awaiting__proposed-title .material-symbols-outlined {
    font-size: 20px !important;
    color: #C87A54;
    font-variation-settings: 'FILL' 1;
}

.ng-cab-awaiting__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ng-cab-awaiting__group-name {
    font-size: 13px;
    color: #5F6B64;
    font-style: italic;
}

.ng-cab-awaiting__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ng-cab-awaiting__option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 2px solid #E3E8E4;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.ng-cab-awaiting__option:hover {
    border-color: #C2C8C1;
    background: #FAFBF9;
}
.ng-cab-awaiting__option:has(.ng-cab-awaiting__check:checked) {
    border-color: #122B1D;
    background: #EBF1EC;
    box-shadow: 0 2px 8px rgba(18, 43, 29, 0.06);
}

/* Скрываем нативный чекбокс, рисуем свой */
.ng-cab-awaiting__check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.ng-cab-awaiting__option {
    position: relative;
}
.ng-cab-awaiting__option::before {
    content: '';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid #C2C8C1;
    border-radius: 6px;
    background: #FFFFFF;
    transition: background .15s, border-color .15s;
    box-sizing: border-box;
    display: inline-block;
}
.ng-cab-awaiting__option::after {
    content: '';
    position: absolute;
    left: 24px;
    top: 50%;
    width: 10px;
    height: 5px;
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: translateY(-70%) rotate(-45deg) scale(0);
    transition: transform .15s ease-out;
    pointer-events: none;
    opacity: 0;
}
.ng-cab-awaiting__option:has(.ng-cab-awaiting__check:checked)::before {
    background: #122B1D;
    border-color: #122B1D;
}
.ng-cab-awaiting__option:has(.ng-cab-awaiting__check:checked)::after {
    transform: translateY(-70%) rotate(-45deg) scale(1);
    opacity: 1;
}

.ng-cab-awaiting__option-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #F4F4F0;
    display: block;
}
.ng-cab-awaiting__option-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ng-cab-awaiting__option-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ng-cab-awaiting__option-name {
    font-size: 14px;
    font-weight: 700;
    color: #1A221E;
    line-height: 1.35;
    word-break: break-word;
}
.ng-cab-awaiting__option-price {
    font-size: 13px;
    font-weight: 600;
    color: #122B1D;
}

/* Кнопки */
.ng-cab-awaiting__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}
.ng-cab-awaiting__actions .ng-cab-btn {
    height: 46px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, opacity .15s;
    line-height: 1;
    box-sizing: border-box;
}
.ng-cab-awaiting__actions .ng-cab-btn .material-symbols-outlined {
    font-size: 18px !important;
    line-height: 1;
    flex-shrink: 0;
}
.ng-cab-awaiting__actions .ng-cab-btn-primary {
    background: #C87A54;
    color: #FFFFFF;
    border-color: #C87A54;
}
.ng-cab-awaiting__actions .ng-cab-btn-primary:hover:not(:disabled) {
    background: #B06A48;
    border-color: #B06A48;
}
.ng-cab-awaiting__actions .ng-cab-btn-primary:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.ng-cab-awaiting__actions .ng-cab-btn-ghost {
    background: #FFFFFF;
    color: #1A221E;
    border-color: #D5E1D8;
}
.ng-cab-awaiting__actions .ng-cab-btn-ghost:hover {
    background: #EBF1EC;
    border-color: #B1CDB9;
}

.ng-cab-awaiting__hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #5F6B64;
    font-style: italic;
}

@media (max-width: 520px) {
    .ng-cab-awaiting { padding: 16px 18px; }
    .ng-cab-awaiting__icon { width: 40px; height: 40px; }
    .ng-cab-awaiting__icon .material-symbols-outlined { font-size: 22px !important; }
    .ng-cab-awaiting__title { font-size: 15px; }
    .ng-cab-awaiting__missing-list li { grid-template-columns: 1fr auto; }
    .ng-cab-awaiting__missing-sum { grid-column: 1 / -1; text-align: right; }
    .ng-cab-awaiting__actions { flex-direction: column; }
    .ng-cab-awaiting__actions .ng-cab-btn { width: 100%; justify-content: center; }
    .ng-cab-awaiting__option { padding: 8px 10px; }
    .ng-cab-awaiting__option-thumb { width: 40px; height: 40px; }
    .ng-cab-awaiting__option-name { font-size: 13px; }
}

/* ============================================================
 * ЛК КЛИЕНТА — ПЛАШКА «ВЫ ВЫБРАЛИ …» (после решения)
 * ============================================================ */

.ng-cab-awaiting-decision {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    margin: 12px 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
}
.ng-cab-awaiting-decision .material-symbols-outlined {
    font-size: 20px !important;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1;
}
.ng-cab-awaiting-decision__text {
    flex: 1;
    min-width: 0;
}
.ng-cab-awaiting-decision__date {
    font-weight: 400;
    opacity: 0.7;
    font-size: 12px;
    margin-left: 4px;
}
.ng-cab-awaiting-decision.is-wait {
    background: #EBF1EC;
    border-color: #D5E1D8;
    color: #122B1D;
}
.ng-cab-awaiting-decision.is-wait .material-symbols-outlined { color: #122B1D; }
.ng-cab-awaiting-decision.is-replace {
    background: #FBF3EE;
    border-color: #E8C9B6;
    color: #8A4A1F;
}
.ng-cab-awaiting-decision.is-replace .material-symbols-outlined { color: #C87A54; }
.ng-cab-awaiting-decision.is-refuse {
    background: #FFDAD6;
    border-color: #F0CFC9;
    color: #7A0008;
}
.ng-cab-awaiting-decision.is-refuse .material-symbols-outlined { color: #93000A; }

/* ============================================================
 * NG CAB PROMPT — нативная модалка ввода текста для ЛК клиента
 * Замена window.prompt — в стиле сайта.
 * ============================================================ */

.ng-cab-prompt {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ng-cab-prompt.is-open {
    display: flex;
    animation: ng-cab-prompt-fade .15s ease-out;
}
@keyframes ng-cab-prompt-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ng-cab-prompt__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 43, 29, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.ng-cab-prompt__dialog {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(18, 43, 29, .28);
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #1A221E;
    animation: ng-cab-prompt-pop .18s cubic-bezier(.2, .9, .3, 1.2);
    display: flex;
    flex-direction: column;
}
@keyframes ng-cab-prompt-pop {
    from { transform: scale(.94); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.ng-cab-prompt__stripe { height: 6px; background: #122B1D; }

.ng-cab-prompt__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px 8px;
}
.ng-cab-prompt__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #EBF1EC;
    color: #122B1D;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ng-cab-prompt__icon .material-symbols-outlined { font-size: 22px !important; }
.ng-cab-prompt__title {
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #1A221E;
}
.ng-cab-prompt__body {
    padding: 8px 22px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ng-cab-prompt__hint {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #424843;
}
.ng-cab-prompt__textarea {
    width: 100%;
    min-height: 88px;
    padding: 12px 14px;
    border: 1px solid #E3E8E4;
    border-radius: 10px;
    background: #F4F3F0;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    color: #1A221E;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.ng-cab-prompt__textarea:focus {
    background: #FFFFFF;
    border-color: #122B1D;
    box-shadow: 0 0 0 3px rgba(18, 43, 29, .1);
}
.ng-cab-prompt__foot {
    display: flex;
    gap: 10px;
    padding: 8px 22px 22px;
}
.ng-cab-prompt__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, transform .06s;
    min-height: 44px;
}
.ng-cab-prompt__btn:active { transform: scale(.98); }
.ng-cab-prompt__btn--ghost {
    background: #F4F3F0;
    color: #1A221E;
}
.ng-cab-prompt__btn--ghost:hover { background: #E3E8E4; }
.ng-cab-prompt__btn--primary {
    background: #122B1D;
    color: #FFFFFF;
    flex: 1.4;
}
.ng-cab-prompt__btn--primary:hover { background: #1B3B2B; }

@media (max-width: 480px) {
    .ng-cab-prompt { padding: 0; align-items: flex-end; }
    .ng-cab-prompt__dialog { max-width: 100%; border-radius: 16px 16px 0 0; }
    .ng-cab-prompt__foot {
        flex-direction: column-reverse;
        padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0));
    }
    .ng-cab-prompt__btn { width: 100%; min-height: 48px; }
    .ng-cab-prompt__head { padding: 18px 18px 6px; }
    .ng-cab-prompt__body { padding: 6px 18px 10px; }
}

/* ===== КОНЕЦ БЛОКА ЛК КЛИЕНТА ЭТАПА 7.2 ===== */
/* Этап 7.5: кнопка «Очистить старые» рядом с фильтром ожидания */
.ng-awaiting-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}

.ng-awaiting-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #EBF1EC;
    color: #122B1D;
    border: 1px solid #D5E1D8;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}
.ng-awaiting-toggle:hover { background: #DCE8DE; border-color: #B1CDB9; }
.ng-awaiting-toggle.is-active { background: #122B1D; color: #fff; border-color: #122B1D; }
.ng-awaiting-toggle.is-active .material-symbols-outlined { color: #CCEAD4; }
.ng-awaiting-toggle .material-symbols-outlined { font-size: 18px !important; }

.ng-awaiting-toggle--danger {
    background: #FFF1EF;
    color: #93000A;
    border-color: #F0CFC9;
}
.ng-awaiting-toggle--danger:hover { background: #FFE4E1; border-color: #E3A39A; }
.ng-awaiting-toggle--danger .material-symbols-outlined { color: #BA1A1A; }

/* Плашка «ждёт клиента» в карточке канбана */
.ng-kanban__card-awaiting {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: #FFF3CD;
    color: #6F380E;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}
.ng-kanban__card-awaiting .material-symbols-outlined { font-size: 11px !important; }

/* Кнопка-часы «Решить за клиента» */
.ng-kanban__btn--awaiting {
    padding: 6px;
    background: #FFF3CD;
    color: #6F380E;
}
.ng-kanban__btn--awaiting:hover { background: #FFE9A8; }
/* =====================================================================
 * ЛК СБОРЩИКА — ПОДСВЕТКА ВЕРНУВШИХСЯ ЗАКАЗОВ (Модуль 1, шаг 1.1)
 * ===================================================================== */

/* Карточка в списке — рамка и бейдж */
.ng-picker-card.ng-picker-card--review {
    border: 2px solid #C87A54;
    box-shadow: 0 4px 14px rgba(200, 122, 84, 0.12);
}
.ng-picker-card.ng-picker-card--return {
    border: 2px solid #ba1a1a;
    box-shadow: 0 4px 14px rgba(186, 26, 26, 0.1);
}

.ng-picker-card__badge-wrap {
    padding: 10px 16px 0;
}

.ng-picker-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.ng-picker-card__badge .material-symbols-outlined {
    font-size: 16px !important;
    line-height: 1;
}
.ng-picker-card__badge--review {
    background: #FBF3EE;
    color: #8A4A1F;
    border: 1px solid #E8C9B6;
}
.ng-picker-card__badge--return {
    background: #FFDAD6;
    color: #93000A;
    border: 1px solid #F0CFC9;
}

/* Плашка в модалке заказа */
.ng-picker-order__return-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    border-left: 4px solid #C87A54;
    background: #FBF3EE;
    color: #1A221E;
}
.ng-picker-order__return-banner > .material-symbols-outlined {
    font-size: 22px !important;
    line-height: 1;
    color: #C87A54;
    flex-shrink: 0;
    margin-top: 1px;
}
.ng-picker-order__return-banner-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #8A4A1F;
    margin-bottom: 4px;
}
.ng-picker-order__return-banner-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #5F6B64;
}
.ng-picker-order__return-banner--return {
    background: #FFDAD6;
    border-left-color: #ba1a1a;
}
.ng-picker-order__return-banner--return > .material-symbols-outlined {
    color: #ba1a1a;
}
.ng-picker-order__return-banner--return .ng-picker-order__return-banner-text strong {
    color: #93000A;
}

@media (max-width: 640px) {
    .ng-picker-card__badge-wrap { padding: 8px 12px 0; }
    .ng-picker-card__badge { font-size: 11px; padding: 4px 10px; }
    .ng-picker-order__return-banner { padding: 12px 14px; gap: 10px; }
    .ng-picker-order__return-banner > .material-symbols-outlined { font-size: 20px !important; }
    .ng-picker-order__return-banner-text strong { font-size: 13px; }
    .ng-picker-order__return-banner-text p { font-size: 12px; }
}
/* ============================================================
 * МОДУЛЬ 1 (1.2) — МОДАЛКА «СКОЛЬКО СОБРАНО?»
 * ============================================================ */

.ng-partial {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}
.ng-partial.is-open {
    display: flex !important;
}
.ng-partial__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(18, 43, 29, 0.55) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}
.ng-partial__dialog {
    position: relative !important;
    width: 100% !important;
    max-width: 420px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(18, 43, 29, 0.28) !important;
    overflow: hidden !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    color: #1A221E !important;
    display: flex !important;
    flex-direction: column !important;
}
.ng-partial__stripe {
    height: 6px !important;
    background: #122B1D !important;
}
.ng-partial__head {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 20px 22px 6px !important;
}
.ng-partial__icon {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #EBF1EC !important;
    color: #122B1D !important;
}
.ng-partial__icon .material-symbols-outlined {
    font-size: 22px !important;
}
.ng-partial__title {
    margin: 4px 0 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #1A221E !important;
}
.ng-partial__body {
    padding: 8px 22px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
.ng-partial__hint {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #424843 !important;
}
.ng-partial__hint strong {
    color: #122B1D !important;
}
.ng-partial__input-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.ng-partial__step {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    border: 1px solid #E3E8E4 !important;
    background: #F4F3F0 !important;
    border-radius: 10px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #122B1D !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ng-partial__step:hover:not(:disabled) {
    background: #EBF1EC !important;
}
.ng-partial__step:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}
.ng-partial__input {
    flex: 1 !important;
    text-align: center !important;
    padding: 12px 8px !important;
    background: #F4F3F0 !important;
    border: 1px solid #E3E8E4 !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1A221E !important;
    outline: none !important;
    box-sizing: border-box !important;
    -moz-appearance: textfield !important;
}
.ng-partial__input::-webkit-outer-spin-button,
.ng-partial__input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.ng-partial__input:focus {
    background: #FFFFFF !important;
    border-color: #122B1D !important;
    box-shadow: 0 0 0 3px rgba(18, 43, 29, 0.1) !important;
}
.ng-partial__error {
    margin-top: -6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #ba1a1a !important;
    display: none !important;
}
.ng-partial__error.is-visible {
    display: block !important;
}
.ng-partial__foot {
    display: flex !important;
    gap: 10px !important;
    padding: 12px 22px 20px !important;
}
.ng-partial__btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    border: 0 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    min-height: 44px !important;
}
.ng-partial__btn:disabled {
    opacity: 0.6 !important;
    cursor: wait !important;
}
.ng-partial__btn--ghost {
    background: #F4F3F0 !important;
    color: #1A221E !important;
    flex: 0.8 !important;
}
.ng-partial__btn--ghost:hover {
    background: #E3E8E4 !important;
}
.ng-partial__btn--primary {
    background: #122B1D !important;
    color: #FFFFFF !important;
    flex: 1.2 !important;
}
.ng-partial__btn--primary:hover:not(:disabled) {
    background: #1B3B2B !important;
}

@media (max-width: 480px) {
    .ng-partial {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    .ng-partial__dialog {
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
    }
    .ng-partial__head { padding: 18px 18px 6px !important; }
    .ng-partial__body { padding: 6px 18px 10px !important; }
    .ng-partial__foot {
        padding: 12px 18px calc(18px + env(safe-area-inset-bottom, 0)) !important;
        flex-direction: column-reverse !important;
    }
    .ng-partial__btn {
        width: 100% !important;
        min-height: 48px !important;
    }
}
/* ============================================================
 * МОДУЛЬ 1 (1.6) — МОДАЛКА ДОБАВЛЕНИЯ В УПАКОВКУ
 * ============================================================ */

.ng-pkg-add-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}
.ng-pkg-add-modal.is-open {
    display: flex !important;
}
.ng-pkg-add-modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(18, 43, 29, 0.55) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}
.ng-pkg-add-modal__dialog {
    position: relative !important;
    width: 100% !important;
    max-width: 520px !important;
    max-height: calc(100vh - 32px) !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(18, 43, 29, 0.28) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    color: #1A221E !important;
}
.ng-pkg-add-modal__stripe {
    height: 6px !important;
    background: #122B1D !important;
}
.ng-pkg-add-modal__head {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 20px 22px 6px !important;
}
.ng-pkg-add-modal__icon {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #EBF1EC !important;
    color: #122B1D !important;
}
.ng-pkg-add-modal__icon .material-symbols-outlined {
    font-size: 22px !important;
}
.ng-pkg-add-modal__title {
    margin: 4px 0 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #1A221E !important;
}
.ng-pkg-add-modal__body {
    padding: 8px 22px 12px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.ng-pkg-add-modal__hint {
    margin: 0 !important;
    font-size: 13px !important;
    color: #5F6B64 !important;
}
.ng-pkg-add-modal__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.ng-pkg-add-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background: #F9F9F7 !important;
    border: 1px solid #E3E8E4 !important;
    border-radius: 12px !important;
}
.ng-pkg-add-item__check-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}
.ng-pkg-add-item__check {
    width: 20px !important;
    height: 20px !important;
    accent-color: #122B1D !important;
    cursor: pointer !important;
}
.ng-pkg-add-item__body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.ng-pkg-add-item__name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1A221E !important;
}
.ng-pkg-add-item__meta {
    font-size: 12px !important;
    color: #5F6B64 !important;
}
.ng-pkg-add-item__qty-wrap {
    width: 70px !important;
    flex-shrink: 0 !important;
}
.ng-pkg-add-item__qty {
    width: 100% !important;
    padding: 8px !important;
    text-align: center !important;
    border: 1px solid #D5E1D8 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #122B1D !important;
    -moz-appearance: textfield !important;
}
.ng-pkg-add-item__qty:disabled {
    opacity: 0.4 !important;
    background: #F0F0F0 !important;
}
.ng-pkg-add-item__qty::-webkit-outer-spin-button,
.ng-pkg-add-item__qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.ng-pkg-add-modal__foot {
    display: flex !important;
    gap: 10px !important;
    padding: 12px 22px 20px !important;
    border-top: 1px solid #F0F2EE !important;
    background: #FAFAF8 !important;
}
.ng-pkg-add-modal__btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    border: 0 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    min-height: 44px !important;
}
.ng-pkg-add-modal__btn--ghost {
    background: #F4F3F0 !important;
    color: #1A221E !important;
    flex: 0.8 !important;
}
.ng-pkg-add-modal__btn--ghost:hover {
    background: #E3E8E4 !important;
}
.ng-pkg-add-modal__btn--primary {
    background: #122B1D !important;
    color: #FFFFFF !important;
    flex: 1.2 !important;
}
.ng-pkg-add-modal__btn--primary:hover:not(:disabled) {
    background: #1B3B2B !important;
}
.ng-pkg-add-modal__btn--primary:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}
/* ============================================================
 * МОДУЛЬ 2 — ВКЛАДКА «СКЛАД»
 * ============================================================ */
.ng-stock-admin {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ng-stock-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.ng-stock-table th {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #5F6B64;
    text-transform: uppercase;
    border-bottom: 1px solid #E3E8E4;
}
.ng-stock-table td {
    padding: 16px;
    border-bottom: 1px solid #F4F4F0;
    vertical-align: middle;
}
.ng-stock-product {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ng-stock-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: #F4F4F0;
}
.ng-stock-name {
    font-weight: 600;
    color: #122B1D;
    font-size: 14px;
}
.ng-stock-sku {
    font-size: 13px;
    color: #5F6B64;
}
.ng-stock-qty {
    font-size: 16px;
    color: #122B1D;
}
.ng-stock-reserved {
    font-size: 14px;
    color: #C87A54;
    font-weight: 600;
}
.ng-stock-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #5F6B64;
}
.ng-stock-pagination__btns {
    display: flex;
    gap: 8px;
}
.ng-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.ng-badge--success { background: #EBF1EC; color: #122B1D; }
.ng-badge--error { background: #FFDAD6; color: #93000A; }
/* ============================================================
 * МОДУЛЬ 2.2 — СТИЛИ ДЛЯ РАЗНЫХ ТИПОВ ПОДСКАЗОК
 * ============================================================ */

.ng-stock-alert__icon .material-symbols-outlined {
    font-size: 24px !important;
}

/* Огонек для срочных (score > 5) */
.ng-stock-alert:nth-child(1) .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500;
}
/* ============================================================
 * МОДУЛЬ 2 — ФИКС СТИЛЕЙ ДЛЯ УМНЫХ ПОДСКАЗОК (СКЛАД)
 * ============================================================ */

.ng-stock-alerts {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

.ng-stock-alert {
    display: flex !important;
    align-items: center !important; 
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    flex-wrap: wrap !important;
}

.ng-stock-alert--urgent {
    background: #FFDAD6 !important;
    border-left: 4px solid #ba1a1a !important;
}

.ng-stock-alert--warn {
    background: #FBF3EE !important;
    border-left: 4px solid #C87A54 !important;
}

.ng-stock-alert__icon {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ng-stock-alert--urgent .ng-stock-alert__icon { color: #ba1a1a !important; }
.ng-stock-alert--warn .ng-stock-alert__icon { color: #C87A54 !important; }

.ng-stock-alert__icon .material-symbols-outlined {
    font-size: 24px !important;
    font-variation-settings: 'FILL' 1, 'wght' 500 !important;
}

.ng-stock-alert__text {
    flex: 1 1 300px !important;
    min-width: 0 !important;
}

.ng-stock-alert--urgent .ng-stock-alert__text strong { color: #93000A !important; }
.ng-stock-alert--warn .ng-stock-alert__text strong { color: #8A4A1F !important; }

.ng-stock-alert__text strong {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.ng-stock-alert--urgent .ng-stock-alert__text p { color: #7A0008 !important; }
.ng-stock-alert--warn .ng-stock-alert__text p { color: #6E3A17 !important; }

.ng-stock-alert__text p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.ng-stock-alert__action {
    flex-shrink: 0 !important;
}

.ng-stock-alert__action .ng-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: #fff !important;
    border: 0 !important;
}

.ng-stock-alert--urgent .ng-stock-alert__action .ng-btn { background: #ba1a1a !important; }
.ng-stock-alert--warn .ng-stock-alert__action .ng-btn { background: #C87A54 !important; }

.ng-stock-analytics__empty {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    background: #EBF1EC !important;
    border-radius: 12px !important;
    color: #122B1D !important;
}
.ng-stock-analytics__empty .material-symbols-outlined {
    font-size: 24px !important;
    color: #122B1D !important;
}
.ng-stock-analytics__empty p {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
/* ============================================================
 * МОДУЛЬ 2 — ФИКС СТИЛЕЙ ДЛЯ УМНЫХ ПОДСКАЗОК (СКЛАД)
 * ============================================================ */

.ng-stock-alerts {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.ng-stock-alert {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; 
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.ng-stock-alert--urgent {
    background: #FFDAD6 !important;
    border-left: 4px solid #ba1a1a !important;
}

.ng-stock-alert--warn {
    background: #FBF3EE !important;
    border-left: 4px solid #C87A54 !important;
}

.ng-stock-alert__icon {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ng-stock-alert--urgent .ng-stock-alert__icon { color: #ba1a1a !important; }
.ng-stock-alert--warn .ng-stock-alert__icon { color: #C87A54 !important; }

.ng-stock-alert__icon .material-symbols-outlined {
    font-size: 24px !important;
    font-variation-settings: 'FILL' 1, 'wght' 500 !important;
    margin: 0 !important;
}

.ng-stock-alert__text {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.ng-stock-alert--urgent .ng-stock-alert__text strong { color: #93000A !important; }
.ng-stock-alert--warn .ng-stock-alert__text strong { color: #8A4A1F !important; }

.ng-stock-alert__text strong {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Бейджи для аналитики */
.ng-stock-alert__badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
}

.ng-stock-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.ng-stock-alert--urgent .ng-stock-badge { background: rgba(255,255,255,0.6) !important; color: #93000A !important; }
.ng-stock-alert--warn .ng-stock-badge { background: rgba(255,255,255,0.6) !important; color: #8A4A1F !important; }

.ng-stock-alert__action {
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.ng-stock-alert__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: #fff !important;
    border: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.ng-stock-alert--urgent .ng-stock-alert__btn { background: #ba1a1a !important; }
.ng-stock-alert--warn .ng-stock-alert__btn { background: #C87A54 !important; }

.ng-stock-analytics__empty {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    background: #EBF1EC !important;
    border-radius: 12px !important;
    color: #122B1D !important;
}
.ng-stock-analytics__empty .material-symbols-outlined {
    font-size: 24px !important;
    color: #122B1D !important;
    margin: 0 !important;
}
.ng-stock-analytics__empty p {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
/* ============================================================
 * МОДУЛЬ 2.2 — КОМПАКТНАЯ СЕТКА КАРТОЧЕК АНАЛИТИКИ
 * ============================================================ */

.ng-stock-alerts-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.ng-stock-card {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    border: 1px solid #E3E8E4 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.ng-stock-card.is-urgent {
    border-left: 4px solid #ba1a1a !important;
    background: #FFFDFC !important;
}

.ng-stock-card.is-warn {
    border-left: 4px solid #C87A54 !important;
    background: #FFFDFC !important;
}

.ng-stock-card__head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.ng-stock-card__title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.ng-stock-card__icon {
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

.ng-stock-card.is-urgent .ng-stock-card__icon { color: #ba1a1a !important; }
.ng-stock-card.is-warn .ng-stock-card__icon { color: #C87A54 !important; }

.ng-stock-card__name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1A221E !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ng-stock-card__order-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #F4F4F0 !important;
    color: #122B1D !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
    flex-shrink: 0 !important;
}

.ng-stock-card__order-btn:hover {
    background: #EBF1EC !important;
}

.ng-stock-card__order-btn .material-symbols-outlined {
    font-size: 18px !important;
}

.ng-stock-card__status {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 12px !important;
}

.ng-stock-card.is-urgent .ng-stock-card__status { color: #ba1a1a !important; }
.ng-stock-card.is-warn .ng-stock-card__status { color: #C87A54 !important; }

.ng-stock-card__badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: auto !important;
}

/* Уменьшаем бейджи, чтобы они влезали в карточку */
.ng-stock-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    background: #F4F4F0 !important;
    color: #424843 !important;
}
/* KPI ПАНЕЛЬ */
.ng-stock-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    margin: 20px 0 24px 0 !important;
}
.ng-stock-kpi {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    border: 1px solid #E3E8E4 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.ng-stock-kpi__label {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #5F6B64 !important;
}
.ng-stock-kpi__val {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #122B1D !important;
    line-height: 1 !important;
}
.ng-stock-kpi__val small {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #5F6B64 !important;
}
.ng-stock-kpi--demand { border-left: 4px solid #ba1a1a !important; }
.ng-stock-kpi--fav { border-left: 4px solid #C87A54 !important; }
.ng-stock-kpi--notify { border-left: 4px solid #4a6453 !important; }

/* ЗАГОЛОВКИ СЕКЦИЙ */
.ng-stock-section-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #122B1D !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #E3E8E4 !important;
}

/* ФИЛЬТРЫ */
.ng-stock-analytics-filters {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}
.ng-stock-filter-btns {
    display: flex !important;
    gap: 6px !important;
    background: #F4F4F0 !important;
    padding: 4px !important;
    border-radius: 8px !important;
}
.ng-stock-filter-btn {
    padding: 8px 14px !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #5F6B64 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}
.ng-stock-filter-btn:hover {
    color: #122B1D !important;
}
.ng-stock-filter-btn.is-active {
    background: #ffffff !important;
    color: #122B1D !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
/* ============================================================
 * МОДУЛЬ 2.3 — ПОИСК И БЫСТРОЕ РЕДАКТИРОВАНИЕ ОСТАТКОВ
 * ============================================================ */

/* Поиск */
.ng-stock-search-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #F4F4F0 !important;
    border: 1px solid #E3E8E4 !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    min-width: 280px !important;
}
.ng-stock-search-wrap .material-symbols-outlined {
    font-size: 20px !important;
    color: #5F6B64 !important;
}
.ng-stock-search-input {
    border: 0 !important;
    background: transparent !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    color: #1A221E !important;
    outline: none !important;
    width: 100% !important;
}
.ng-stock-search-input::placeholder {
    color: #A5AEA8 !important;
}

/* Быстрое редактирование остатка */
.ng-stock-fast-edit {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #FFFFFF !important;
    border: 1px solid #E3E8E4 !important;
    border-radius: 8px !important;
    padding: 2px !important;
}
.ng-stock-qty-input {
    width: 50px !important;
    border: 0 !important;
    background: transparent !important;
    padding: 6px 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #122B1D !important;
    text-align: center !important;
    outline: none !important;
}
.ng-stock-qty-input::-webkit-outer-spin-button,
.ng-stock-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.ng-stock-save-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #EBF1EC !important;
    color: #122B1D !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}
.ng-stock-save-btn:hover {
    background: #D5E1D8 !important;
}
.ng-stock-save-btn .material-symbols-outlined {
    font-size: 16px !important;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}
/* ============================================================
 * YANDEX AI — вкладка «Yandex AI» в Настройках ЛК админа
 *
 * Базовые классы .ng-yandex-keys__* уже есть в style.css —
 * здесь только то, чего не было: ползунок температуры,
 * блок «последняя проверка», узкое выравнивание.
 * ============================================================ */

/* Ползунок температуры — аккуратный, в цветах темы */
#ng-yandex-ai-temperature {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #E3E8E4;
    border-radius: 3px;
    outline: none;
    padding: 0;
    margin: 4px 0 0;
    cursor: pointer;
}
#ng-yandex-ai-temperature::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #122B1D;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
#ng-yandex-ai-temperature::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #122B1D;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
#ng-yandex-ai-temperature::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: #E3E8E4;
}
#ng-yandex-ai-temperature::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: #E3E8E4;
}

/* Значение температуры рядом с лейблом — крупно, читабельно */
#ng-yandex-ai-temp-value {
    display: inline-block;
    min-width: 28px;
    padding: 1px 8px;
    font-size: 13px;
    font-weight: 700;
    color: #122B1D;
    background: #EBF1EC;
    border-radius: 6px;
    margin-left: 4px;
}

/* Блок «последняя проверка» — чтобы не сливалось с полями */
#ng-yandex-ai .ng-yandex-keys__field small[style*="padding-top"] {
    display: block;
}

/* Длинные сообщения об ошибке (raw) — не раздувают блок */
#ng-yandex-ai-results .ng-yandex-keys__result {
    align-items: flex-start;
}
#ng-yandex-ai-results .ng-yandex-keys__result > span:last-child {
    word-break: break-word;
}

/* Список результатов — вертикально, с отступами */
#ng-yandex-ai-results {
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: #F4F4F0;
    border-radius: 10px;
}
/* ============================================================
 * OCR НАКЛАДНЫХ — модалка, drag-and-drop, таблица результатов
 *
 * Используется в разделе «Склад» ЛК админа.
 * Модалка #ng-ocr-modal, зона #ng-ocr-drop, таблица .ng-ocr-table.
 * ============================================================ */

/* ---------- Drag-and-drop зона ---------- */
.ng-ocr-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
    background: #FAFBF9;
    border: 2px dashed #C2C8C1;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.ng-ocr-drop:hover,
.ng-ocr-drop.is-dragover {
    background: #EBF1EC;
    border-color: #122B1D;
}
.ng-ocr-drop h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #122B1D;
    line-height: 1.3;
}
.ng-ocr-drop p {
    margin: 0;
    font-size: 14px;
    color: #59605c;
}
.ng-ocr-drop small {
    font-size: 12px;
    color: #727973;
    line-height: 1.5;
    max-width: 420px;
}
.ng-ocr-drop .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

/* ---------- Таблица результатов ---------- */
.ng-ocr-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    background: #fff;
}
.ng-ocr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.ng-ocr-table thead th {
    background: #F4F4F0;
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #59605c;
    border-bottom: 1px solid #E3E8E4;
    white-space: nowrap;
}
.ng-ocr-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #F4F4F0;
    vertical-align: middle;
    color: #1A221E;
    word-break: break-word;
}
.ng-ocr-table tbody tr:last-child td {
    border-bottom: 0;
}
.ng-ocr-col-qty {
    width: 100px;
    white-space: nowrap;
}
.ng-ocr-col-product {
    min-width: 260px;
}

/* ---------- Поле количества ---------- */
.ng-ocr-qty {
    width: 72px;
    padding: 6px 8px;
    border: 1px solid #E3E8E4;
    border-radius: 6px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    background: #fff;
    color: #122B1D;
    box-sizing: border-box;
    outline: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
    -moz-appearance: textfield;
    appearance: textfield;
}
.ng-ocr-qty::-webkit-outer-spin-button,
.ng-ocr-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ng-ocr-qty:focus {
    border-color: #122B1D;
    box-shadow: 0 0 0 3px rgba(18, 43, 29, 0.1);
}

/* ---------- Селект товара ---------- */
.ng-ocr-select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #E3E8E4;
    border-radius: 6px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    background: #fff;
    color: #1A221E;
    box-sizing: border-box;
    outline: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}
.ng-ocr-select:focus {
    border-color: #122B1D;
    box-shadow: 0 0 0 3px rgba(18, 43, 29, 0.1);
}

/* ---------- Превью ---------- */
#ng-ocr-preview {
    text-align: center;
}
#ng-ocr-preview-img {
    max-width: 100%;
    max-height: 340px;
    border-radius: 10px;
    border: 1px solid #E3E8E4;
    box-shadow: 0 2px 8px rgba(18, 43, 29, 0.08);
}

/* ---------- Модалка: широкий диалог ---------- */
#ng-ocr-modal .ng-order-modal__dialog {
    max-width: 900px;
}
#ng-ocr-modal .ng-order-modal__body {
    padding: 20px 24px 24px;
}

/* ---------- Статусы-плашки в модалке ---------- */
#ng-ocr-status,
#ng-ocr-apply-status {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    display: none;
}
#ng-ocr-status:not(:empty),
#ng-ocr-apply-status:not(:empty) {
    display: block;
}
#ng-ocr-status.is-success,
#ng-ocr-apply-status.is-success {
    background: #EBF1EC;
    color: #122B1D;
    border-left: 4px solid #4a6453;
}
#ng-ocr-status.is-error,
#ng-ocr-apply-status.is-error {
    background: #FFDAD6;
    color: #93000A;
    border-left: 4px solid #ba1a1a;
}

/* ---------- Кнопки в модалке ---------- */
#ng-ocr-modal .ng-cities__btn {
    white-space: nowrap;
}

/* ---------- Мобильная адаптация ---------- */
@media (max-width: 720px) {
    #ng-ocr-modal {
        padding: 0;
        align-items: flex-end;
    }
    #ng-ocr-modal .ng-order-modal__dialog {
        max-width: 100% !important;
        max-height: 94vh;
        border-radius: 16px 16px 0 0;
    }
    #ng-ocr-modal .ng-order-modal__body {
        padding: 14px 16px 20px;
    }
    .ng-ocr-drop {
        padding: 32px 16px;
    }
    .ng-ocr-drop h3 {
        font-size: 15px;
    }
    .ng-ocr-drop p,
    .ng-ocr-drop small {
        font-size: 12px;
    }
    .ng-ocr-table {
        font-size: 13px;
    }
    .ng-ocr-table thead th,
    .ng-ocr-table tbody td {
        padding: 8px 10px;
    }
    .ng-ocr-col-product {
        min-width: 200px;
    }
    .ng-ocr-qty {
        width: 64px;
        font-size: 13px;
    }
    .ng-ocr-select {
        font-size: 12px;
        padding: 6px 8px;
    }
    #ng-ocr-preview-img {
        max-height: 240px;
    }
    #ng-ocr-step-upload > div[style*="display:flex"] {
        flex-direction: column;
    }
    #ng-ocr-step-upload .ng-cities__btn {
        width: 100%;
        justify-content: center;
    }
    #ng-ocr-modal .ng-yandex-keys__actions {
        flex-direction: column;
    }
    #ng-ocr-modal .ng-yandex-keys__actions .ng-cities__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Узкие экраны: кнопки в столбик ---------- */
@media (max-width: 480px) {
    #ng-ocr-modal .ng-order-modal__header {
        padding: 14px 16px;
    }
    #ng-ocr-modal .ng-order-modal__header h2 {
        font-size: 16px;
    }
    .ng-ocr-drop .material-symbols-outlined {
        font-size: 40px !important;
    }
}
/* ============================================================
 * YANDEX AI: КАТАЛОГ РАСТЕНИЙ — форма создания товара,
 * KPI, аудит, массовая генерация.
 *
 * Шаг 3.2a (Модуль 3). Добавлено 18.10.2026.
 * Использует дизайн-систему: forest-deep #122B1D, sage-subtle
 * #EBF1EC, terracotta #C87A54, border-soft #E3E8E4, error #ba1a1a.
 * ============================================================ */

/* ---------- Контейнер раздела ---------- */
.ng-catalog-create {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---------- Шапка ---------- */
.ng-catalog-create__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding: 24px 28px;
    background: #FFFFFF;
    border: 1px solid #E3E8E4;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(18, 43, 29, 0.04);
}
.ng-catalog-create__head h2 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: #122B1D;
    line-height: 1.3;
}
.ng-catalog-create__head p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #5F6B64;
    max-width: 640px;
}
.ng-catalog-create__head .ng-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 0;
    border-radius: 10px;
    background: #122B1D;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.ng-catalog-create__head .ng-btn:hover { background: #1B3B2B; }
.ng-catalog-create__head .ng-btn .material-symbols-outlined { font-size: 20px !important; }

/* ---------- KPI ---------- */
.ng-catalog-kpi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.ng-catalog-kpi__card {
    background: #FFFFFF;
    border: 1px solid #E3E8E4;
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(18, 43, 29, 0.04);
}
.ng-catalog-kpi__card--ok      { border-left: 4px solid #4a6453; }
.ng-catalog-kpi__card--missing { border-left: 4px solid #C87A54; }
.ng-catalog-kpi__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5F6B64;
}
.ng-catalog-kpi__value {
    font-size: 30px;
    line-height: 1.1;
    font-weight: 800;
    color: #122B1D;
    font-feature-settings: 'tnum';
}

/* ---------- Массовая генерация ---------- */
.ng-catalog-bulk {
    background: #FFFFFF;
    border: 1px solid #E3E8E4;
    border-radius: 16px;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(18, 43, 29, 0.04);
}
.ng-catalog-bulk__head h3 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: #122B1D;
}
.ng-catalog-bulk__head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #5F6B64;
}
.ng-catalog-bulk__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ng-catalog-bulk__limit-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #424843;
}
.ng-catalog-bulk__limit-label select {
    padding: 8px 12px;
    border: 1px solid #E3E8E4;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 13px;
    color: #1A221E;
    outline: 0;
    cursor: pointer;
}
.ng-catalog-bulk__limit-label select:focus {
    border-color: #122B1D;
    box-shadow: 0 0 0 3px rgba(18, 43, 29, 0.1);
}
.ng-catalog-bulk__controls .ng-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    background: #122B1D;
    color: #FFFFFF;
}
.ng-catalog-bulk__controls .ng-btn:hover:not(:disabled) { background: #1B3B2B; }
.ng-catalog-bulk__controls .ng-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ng-catalog-bulk__controls .ng-btn .material-symbols-outlined { font-size: 18px !important; }

.ng-catalog-bulk__progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #F4F4F0;
    border-radius: 12px;
}
.ng-catalog-bulk__progress[hidden] { display: none !important; }
.ng-catalog-bulk__progress-bar {
    position: relative;
    height: 8px;
    background: #E3E8E4;
    border-radius: 999px;
    overflow: hidden;
}
.ng-catalog-bulk__progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #122B1D 0%, #4a6453 100%);
    border-radius: 999px;
    transition: width 0.35s ease;
}
.ng-catalog-bulk__progress-info {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #424843;
}
#ng-catalog-bulk-percent {
    color: #122B1D;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ng-catalog-bulk__log {
    max-height: 180px;
    overflow-y: auto;
    padding: 8px 12px;
    background: #FFFFFF;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #424843;
}

/* ---------- Таблица последних без описания ---------- */
.ng-catalog-table {
    background: #FFFFFF;
    border: 1px solid #E3E8E4;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(18, 43, 29, 0.04);
}
.ng-catalog-table__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #F0F2EE;
    flex-wrap: wrap;
}
.ng-catalog-table__head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #122B1D;
}
.ng-catalog-table__head .ng-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #E3E8E4;
    border-radius: 8px;
    background: #FFFFFF;
    color: #1A221E;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.ng-catalog-table__head .ng-btn:hover { background: #F4F4F0; }
.ng-catalog-table__head .ng-btn .material-symbols-outlined { font-size: 16px !important; }

.ng-catalog-table__wrap {
    overflow-x: auto;
}
.ng-catalog-table__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ng-catalog-table__table thead th {
    background: #FAFBF9;
    padding: 10px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5F6B64;
    border-bottom: 1px solid #E3E8E4;
    white-space: nowrap;
}
.ng-catalog-table__table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #F0F2EE;
    vertical-align: middle;
    color: #1A221E;
}
.ng-catalog-table__table tbody tr:last-child td { border-bottom: 0; }
.ng-catalog-table__table tbody tr:hover { background: #FAFBF9; }
.ng-catalog-table__table tbody td .ng-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    text-decoration: none;
    line-height: 1;
}
.ng-catalog-table__table tbody td .ng-btn--primary {
    background: #122B1D;
    color: #FFFFFF;
}
.ng-catalog-table__table tbody td .ng-btn--primary:hover:not(:disabled) {
    background: #1B3B2B;
}
.ng-catalog-table__table tbody td .ng-btn--primary:disabled {
    opacity: 0.6;
    cursor: wait;
}
.ng-catalog-table__table tbody td .ng-btn--ghost {
    background: #F4F4F0;
    color: #1A221E;
}
.ng-catalog-table__table tbody td .ng-btn--ghost:hover {
    background: #E3E8E4;
}

/* ============================================================
 * МОДАЛКА СОЗДАНИЯ ТОВАРА
 * ============================================================ */

.ng-catalog-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ng-catalog-modal.is-open {
    display: flex;
    animation: ng-cat-fade 0.15s ease-out;
}
@keyframes ng-cat-fade {
    from { opacity: 0; } to { opacity: 1; }
}

.ng-catalog-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 43, 29, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.ng-catalog-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 780px;
    max-height: calc(100vh - 32px);
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(18, 43, 29, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #1A221E;
    animation: ng-cat-pop 0.18s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes ng-cat-pop {
    from { transform: scale(.94); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.ng-catalog-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid #F0F2EE;
    background: #FAFBF9;
}
.ng-catalog-modal__head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #122B1D;
}
.ng-catalog-modal__close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: #F4F4F0;
    color: #5F6B64;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.ng-catalog-modal__close:hover { background: #E3E8E4; color: #122B1D; }
.ng-catalog-modal__close .material-symbols-outlined { font-size: 20px !important; }

/* ---------- Шаги ---------- */
.ng-catalog-modal__steps {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    background: #FFFFFF;
    border-bottom: 1px solid #F0F2EE;
    overflow-x: auto;
    scrollbar-width: none;
}
.ng-catalog-modal__steps::-webkit-scrollbar { display: none; }

.ng-catalog-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #F4F4F0;
    font-size: 12px;
    font-weight: 600;
    color: #5F6B64;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.ng-catalog-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #5F6B64;
    font-size: 11px;
    font-weight: 700;
}
.ng-catalog-step.is-active {
    background: #122B1D;
    color: #FFFFFF;
}
.ng-catalog-step.is-active span {
    background: #CCEAD4;
    color: #122B1D;
}
.ng-catalog-step.is-done {
    background: #EBF1EC;
    color: #122B1D;
}
.ng-catalog-step.is-done span {
    background: #122B1D;
    color: #FFFFFF;
}

/* ---------- Тело модалки ---------- */
.ng-catalog-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.ng-catalog-pane {
    display: none;
    flex-direction: column;
    gap: 16px;
}
.ng-catalog-pane.is-active {
    display: flex;
}
.ng-catalog-pane h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #122B1D;
}
.ng-catalog-pane__hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #5F6B64;
}
.ng-catalog-pane__actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #F0F2EE;
    flex-wrap: wrap;
}
.ng-catalog-pane__actions .ng-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    line-height: 1.2;
}
.ng-catalog-pane__actions .ng-btn--ghost {
    background: #F4F4F0;
    color: #1A221E;
    border-color: #E3E8E4;
}
.ng-catalog-pane__actions .ng-btn--ghost:hover {
    background: #E3E8E4;
}
.ng-catalog-pane__actions .ng-btn--primary {
    background: #122B1D;
    color: #FFFFFF;
}
.ng-catalog-pane__actions .ng-btn--primary:hover:not(:disabled) {
    background: #1B3B2B;
}
.ng-catalog-pane__actions .ng-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ng-catalog-pane__actions .ng-btn .material-symbols-outlined {
    font-size: 18px !important;
}

/* ---------- Шаг 1: категории ---------- */
.ng-catalog-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.ng-catalog-cat {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    background: #FFFFFF;
    border: 2px solid #E3E8E4;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    user-select: none;
}
.ng-catalog-cat:hover {
    border-color: #C2C8C1;
    background: #FAFBF9;
}
.ng-catalog-cat input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ng-catalog-cat .material-symbols-outlined {
    color: #5F6B64;
    font-size: 22px !important;
    flex-shrink: 0;
    margin-top: 1px;
    transition: color 0.15s;
}
.ng-catalog-cat__name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1A221E;
    line-height: 1.3;
    word-break: break-word;
}
.ng-catalog-cat__profile {
    display: none;
}
.ng-catalog-cat:has(input:checked) {
    border-color: #122B1D;
    background: #EBF1EC;
    box-shadow: 0 2px 8px rgba(18, 43, 29, 0.08);
}
.ng-catalog-cat:has(input:checked) .material-symbols-outlined {
    color: #122B1D;
}
.ng-catalog-cat:has(input:checked) .ng-catalog-cat__name {
    color: #122B1D;
}
.ng-catalog-cat::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #C2C8C1;
    background: #FFFFFF;
    transition: border-color 0.15s, background 0.15s;
}
.ng-catalog-cat:has(input:checked)::after {
    border-color: #122B1D;
    background: #122B1D;
    box-shadow: inset 0 0 0 3px #FFFFFF;
}

/* ---------- Шаг 2: поля ---------- */
.ng-catalog-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ng-catalog-field label {
    font-size: 13px;
    font-weight: 700;
    color: #122B1D;
}
.ng-catalog-field input[type="text"],
.ng-catalog-field input[type="number"],
.ng-catalog-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E3E8E4;
    border-radius: 10px;
    background: #F8F9F7;
    font-family: inherit;
    font-size: 14px;
    color: #1A221E;
    outline: 0;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ng-catalog-field textarea {
    resize: vertical;
    min-height: 60px;
}
.ng-catalog-field input:focus,
.ng-catalog-field textarea:focus {
    background: #FFFFFF;
    border-color: #122B1D;
    box-shadow: 0 0 0 3px rgba(18, 43, 29, 0.1);
}
.ng-catalog-field small {
    font-size: 11px;
    color: #727973;
    line-height: 1.4;
}

.ng-catalog-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ---------- Drag-and-drop фото ---------- */
.ng-catalog-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px;
    background: #FAFBF9;
    border: 2px dashed #C2C8C1;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    font-size: 13px;
    color: #5F6B64;
    transition: background 0.15s, border-color 0.15s;
}
.ng-catalog-drop:hover,
.ng-catalog-drop.is-dragover {
    background: #EBF1EC;
    border-color: #122B1D;
    color: #122B1D;
}
.ng-catalog-drop .material-symbols-outlined {
    font-size: 32px !important;
    color: #C87A54;
}

.ng-catalog-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.ng-catalog-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: #F4F4F0;
    border: 1px solid #E3E8E4;
}
.ng-catalog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ng-catalog-thumb--loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5F6B64;
}
.ng-catalog-thumb--loading .material-symbols-outlined {
    font-size: 20px !important;
    animation: ng-cat-spin 1.2s linear infinite;
}
@keyframes ng-cat-spin {
    to { transform: rotate(360deg); }
}
.ng-catalog-thumb__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 43, 29, 0.85);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.ng-catalog-thumb__remove:hover { background: #ba1a1a; }
.ng-catalog-thumb__remove .material-symbols-outlined {
    font-size: 14px !important;
}

/* ---------- Шаг 3: характеристики ---------- */
.ng-catalog-attrs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ---------- Шаг 4: генерация ---------- */
.ng-catalog-gen {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: #F4F4F0;
    border-radius: 12px;
}
.ng-catalog-gen[hidden] { display: none !important; }
.ng-catalog-gen__bar {
    height: 8px;
    background: #E3E8E4;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.ng-catalog-gen__fill {
    position: absolute;
    inset: 0;
    width: 30%;
    background: linear-gradient(90deg, #122B1D 0%, #4a6453 100%);
    border-radius: 999px;
    animation: ng-cat-indeterminate 1.4s ease-in-out infinite;
}
@keyframes ng-cat-indeterminate {
    0%   { left: -30%; width: 30%; }
    50%  { left: 30%;  width: 40%; }
    100% { left: 100%; width: 30%; }
}
.ng-catalog-gen__status {
    margin: 0;
    font-size: 13px;
    color: #424843;
    text-align: center;
}

.ng-catalog-status {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
    display: none;
}
.ng-catalog-status:not(:empty) { display: block; }
.ng-catalog-status.is-success {
    background: #EBF1EC;
    color: #122B1D;
    border-left: 4px solid #4a6453;
}
.ng-catalog-status.is-error {
    background: #FFDAD6;
    color: #93000A;
    border-left: 4px solid #ba1a1a;
}

/* ---------- Мобильная адаптация ---------- */
@media (max-width: 768px) {
    .ng-catalog-create__head {
        padding: 18px 20px;
    }
    .ng-catalog-create__head h2 { font-size: 19px; }
    .ng-catalog-create__head p  { font-size: 13px; }

    .ng-catalog-kpi {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .ng-catalog-kpi__card { padding: 16px 18px; }
    .ng-catalog-kpi__value { font-size: 24px; }

    .ng-catalog-bulk { padding: 18px 20px; }
    .ng-catalog-bulk__controls {
        flex-direction: column;
        align-items: stretch;
    }
    .ng-catalog-bulk__controls .ng-btn {
        justify-content: center;
    }

    .ng-catalog-table__head { padding: 14px 16px; }
    .ng-catalog-table__table thead th,
    .ng-catalog-table__table tbody td { padding: 8px 10px; font-size: 12px; }
    .ng-catalog-table__table img { width: 36px !important; height: 36px !important; }

    /* Модалка — bottom-sheet */
    .ng-catalog-modal {
        padding: 0;
        align-items: flex-end;
    }
    .ng-catalog-modal__dialog {
        max-width: 100%;
        max-height: 94vh;
        border-radius: 20px 20px 0 0;
    }
    .ng-catalog-modal__head { padding: 16px 18px; }
    .ng-catalog-modal__body { padding: 18px; }
    .ng-catalog-modal__steps { padding: 12px 18px; }

    .ng-catalog-step { font-size: 11px; padding: 6px 10px; }
    .ng-catalog-step span { width: 20px; height: 20px; font-size: 10px; }

    .ng-catalog-cats {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ng-catalog-cat { padding: 12px; }
    .ng-catalog-cat__name { font-size: 13px; }

    .ng-catalog-row { grid-template-columns: 1fr; }
    .ng-catalog-attrs { grid-template-columns: 1fr; }

    .ng-catalog-drop { padding: 24px 16px; }
    .ng-catalog-drop .material-symbols-outlined { font-size: 28px !important; }

    .ng-catalog-thumbs {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
        gap: 8px;
    }

    .ng-catalog-pane__actions {
        flex-direction: column-reverse;
    }
    .ng-catalog-pane__actions .ng-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .ng-catalog-create__head h2 { font-size: 17px; }
    .ng-catalog-kpi__value { font-size: 22px; }
    .ng-catalog-modal__head h2 { font-size: 16px; }
    .ng-catalog-modal__head { padding: 14px 16px; }
    .ng-catalog-modal__body { padding: 16px; }
    .ng-catalog-thumbs { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
}
/* ============================================================
 * СТРАНИЦА ПРЕДЗАКАЗА (/preorder/)
 * ============================================================ */

.ng-preorder-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 16px 80px;
}

@media (min-width: 1024px) {
    .ng-preorder-page {
        padding: 60px 40px 100px;
    }
}

/* Шапка страницы */
.ng-preorder-header {
    text-align: center;
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.ng-preorder-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFDAD6;
    color: #ba1a1a;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.ng-preorder-badge .material-symbols-outlined {
    font-size: 16px !important;
}

.ng-preorder-title {
    font-size: 36px;
    font-weight: 800;
    color: #122B1D;
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

@media (max-width: 767px) {
    .ng-preorder-title {
        font-size: 28px;
    }
}

.ng-preorder-desc {
    font-size: 16px;
    color: #5F6B64;
    line-height: 1.6;
    margin: 0;
}

/* Сетка каталога (копируем поведение из style.css для ng-view--3) */
.ng-preorder-page .ng-catalog-grid-wrap ul.products {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
}

@media (min-width: 640px) {
    .ng-preorder-page .ng-catalog-grid-wrap ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .ng-preorder-page .ng-catalog-grid-wrap ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Пагинация */
.ng-preorder-page .ng-catalog-pagination {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ng-preorder-page .ng-catalog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: #FFFFFF;
    border: 1px solid #E3E8E4;
    border-radius: 10px;
    color: #1A221E;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.ng-preorder-page .ng-catalog-pagination .page-numbers:hover,
.ng-preorder-page .ng-catalog-pagination .page-numbers.current {
    background: #122B1D;
    color: #FFFFFF;
    border-color: #122B1D;
}

/* Пустое состояние */
.ng-preorder-page .ng-catalog-empty {
    text-align: center;
    padding: 80px 20px;
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #E3E8E4;
}

.ng-preorder-page .ng-catalog-empty .material-symbols-outlined {
    font-size: 64px !important;
    color: #C2C8C1;
    margin-bottom: 16px;
}

.ng-preorder-page .ng-catalog-empty h2 {
    font-size: 24px;
    font-weight: 700;
    color: #122B1D;
    margin: 0 0 8px;
}

.ng-preorder-page .ng-catalog-empty p {
    font-size: 15px;
    color: #5F6B64;
    margin: 0 0 24px;
}

.ng-preorder-page .ng-catalog-empty .ng-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #122B1D;
    color: #FFFFFF;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.ng-preorder-page .ng-catalog-empty .ng-btn:hover {
    background: #1B3B2B;
}
/* ============================================================
 * ШАГ 3 ТЗ «Предзаказ»: страница «Мои предзаказы» + блок в заказе
 * В конец style.css
 * ============================================================ */

/* ---------- Страница «Мои предзаказы» ---------- */
.ng-preorders-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ng-preorders-card {
    background: #ffffff;
    border: 1px solid #E3E8E4;
    border-radius: 16px;
    padding: 20px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ng-preorders-card:hover {
    border-color: #D5E1D8;
    box-shadow: 0 4px 16px rgba(18, 43, 29, 0.06);
}

.ng-preorders-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #EEF1EC;
}

.ng-preorders-card__num {
    font-size: 16px;
    font-weight: 500;
    color: #1A221E;
}

.ng-preorders-card__num strong {
    font-weight: 700;
    color: #122B1D;
}

.ng-preorders-card__date {
    font-size: 13px;
    color: #5F6B64;
}

.ng-preorders-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ng-preorders-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 14px;
    color: #5F6B64;
}

.ng-preorders-card__meta strong {
    color: #122B1D;
    font-weight: 600;
}

.ng-preorders-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ng-cab-preorder-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.ng-cab-preorder-badge--awaiting {
    background: #FBF3EE;
    color: #C87A54;
}

.ng-cab-preorder-badge--ready {
    background: #EBF1EC;
    color: #122B1D;
}

.ng-preorders-card__actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #EEF1EC;
    display: flex;
    justify-content: flex-end;
}

/* ---------- Блок «Предзаказ» в view-order.php ---------- */
.ng-cab-preorder {
    background: #FBF3EE;
    border-left: 4px solid #C87A54;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.ng-cab-preorder__head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.ng-cab-preorder__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #FFFFFF;
    color: #C87A54;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ng-cab-preorder__icon .material-symbols-outlined {
    font-size: 24px !important;
}

.ng-cab-preorder__text {
    flex: 1;
    min-width: 0;
}

.ng-cab-preorder__title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
    color: #122B1D;
    line-height: 1.3;
}

.ng-cab-preorder__sub {
    margin: 0;
    font-size: 13px;
    color: #5F6B64;
    line-height: 1.5;
}

.ng-cab-preorder__list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ng-cab-preorder__item {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ng-cab-preorder__item-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.ng-cab-preorder__item-name {
    font-size: 14px;
    font-weight: 600;
    color: #1A221E;
    line-height: 1.4;
}

.ng-cab-preorder__item-qty {
    font-size: 13px;
    color: #5F6B64;
    white-space: nowrap;
}

.ng-cab-preorder__item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.ng-cab-preorder__item-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #5F6B64;
}

.ng-cab-preorder__item-date .material-symbols-outlined {
    font-size: 14px !important;
}

.ng-cab-preorder__item-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ng-cab-preorder__item-status.is-awaiting {
    background: #FFF3EA;
    color: #C87A54;
}

.ng-cab-preorder__item-status.is-ready {
    background: #EBF1EC;
    color: #122B1D;
}

.ng-cab-preorder__item-status.is-shipped {
    background: #E3F0FF;
    color: #1E5BA8;
}

.ng-cab-preorder__item-status.is-cancelled {
    background: #FFDAD6;
    color: #BA1A1A;
}

.ng-cab-preorder__item-confirmed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #EBF1EC;
    border-radius: 8px;
    font-size: 12px;
    color: #122B1D;
    font-weight: 500;
    align-self: flex-start;
}

.ng-cab-preorder__item-confirmed .material-symbols-outlined {
    font-size: 16px !important;
    font-variation-settings: 'FILL' 1;
}

.ng-cab-preorder__item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

/* ---------- Группировка доставки ---------- */
.ng-cab-preorder__grouping {
    margin-top: 16px;
    padding: 16px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px dashed #C87A54;
}

.ng-cab-preorder__grouping-head {
    margin-bottom: 14px;
}

.ng-cab-preorder__grouping-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #122B1D;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ng-cab-preorder__grouping-title .material-symbols-outlined {
    font-size: 18px !important;
    color: #C87A54;
}

.ng-cab-preorder__grouping-sub {
    margin: 0;
    font-size: 13px;
    color: #5F6B64;
    line-height: 1.5;
}

.ng-cab-preorder__grouping-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- Плашка «Вы выбрали / согласовали» ---------- */
.ng-cab-preorder__decision {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    margin-top: 16px;
}

.ng-cab-preorder__decision .material-symbols-outlined {
    font-size: 20px !important;
}

.ng-cab-preorder__decision.is-wait {
    background: #EBF1EC;
    color: #122B1D;
}

.ng-cab-preorder__decision.is-replace {
    background: #FFF6E5;
    color: #B48100;
}

/* ---------- Мобильная адаптация ---------- */
@media (max-width: 640px) {
    .ng-preorders-card { padding: 16px; }
    .ng-preorders-card__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .ng-preorders-card__meta {
        flex-direction: column;
        gap: 6px;
    }
    .ng-preorders-card__actions {
        justify-content: stretch;
    }
    .ng-preorders-card__actions .ng-cab-btn {
        width: 100%;
        justify-content: center;
    }
    .ng-cab-preorder { padding: 16px; }
    .ng-cab-preorder__item-actions {
        flex-direction: column;
    }
    .ng-cab-preorder__item-actions .ng-cab-btn {
        width: 100%;
        justify-content: center;
    }
    .ng-cab-preorder__grouping-actions {
        flex-direction: column;
    }
    .ng-cab-preorder__grouping-actions .ng-cab-btn {
        width: 100%;
        justify-content: center;
    }
}
/* ============================================================
 * ФИКС: страница «Мои предзаказы» — сетка как в ЛК
 * ============================================================ */
.ng-cab-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 16px 64px;
}

.ng-cab {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}

.ng-cab-content {
    min-width: 0;
}

/* Если внутри есть .ng-cab-nav — он уже стилизован, не трогаем */

@media (max-width: 900px) {
    .ng-cab {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
/* ============================================================
 * ФИНАЛЬНЫЙ ФИКС: Карточки на странице «Мои предзаказы»
 * ============================================================ */
.ng-preorders-card {
    display: flex;
    flex-direction: column;
}
.ng-preorders-card__actions {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #EEF1EC !important;
    display: block !important; /* Убираем flex, чтобы кнопка не прижималась вправо */
}
.ng-preorders-card__actions .ng-cab-btn {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
}
/* ============================================================
 * ШАГ 4: СТИЛИ КАНБАНА «ПРЕДЗАКАЗЫ»
 * ============================================================ */
.ng-preorder-kanban {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
    align-items: flex-start;
}

.ng-preorder-col {
    min-width: 280px;
    width: 280px;
    background: #F4F4F0;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.ng-preorder-col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E3E8E4;
}

.ng-preorder-col-title {
    font-weight: 600;
    color: #1A221E;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.ng-preorder-col-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ng-preorder-col-count {
    background: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #5F6B64;
}

.ng-preorder-col-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: 70vh;
}

.ng-preorder-card {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ng-preorder-card-top {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.ng-preorder-card-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.ng-preorder-card-thumb--empty {
    background: #E3E8E4;
}

.ng-preorder-card-info {
    flex: 1;
    min-width: 0;
}

.ng-preorder-card-name {
    font-weight: 600;
    font-size: 14px;
    color: #122B1D;
    line-height: 1.3;
    margin-bottom: 4px;
}

.ng-preorder-card-date {
    font-size: 12px;
    color: #5F6B64;
}

.ng-preorder-card-stats {
    display: flex;
    gap: 12px;
    font-size: 13px;
    border-top: 1px solid #F4F4F0;
    padding-top: 8px;
}

.ng-preorder-card-stats strong {
    color: #1A221E;
}

.ng-preorder-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.ng-preorder-card-actions .ng-btn {
    font-size: 12px;
    padding: 6px 10px;
    gap: 4px;
}
/* ============================================================
 * КАНБАН ПРЕДЗАКАЗОВ — ЖЁСТКИЕ СТИЛИ
 * ============================================================ */
#ng-preorder-kanban {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    overflow-x: auto !important;
    padding-bottom: 24px !important;
    align-items: flex-start !important;
    width: 100% !important;
}

#ng-preorder-kanban > div {
    flex: 0 0 300px !important; /* Фиксированная ширина 300px */
    width: 300px !important;
    background: #F4F4F0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: 100px !important;
}

#ng-preorder-kanban > div > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #E3E8E4 !important;
}

/* Карточка товара */
.ng-preorder-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    border: 1px solid #E3E8E4 !important;
    transition: box-shadow 0.2s, border-color 0.2s !important;
}

.ng-preorder-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    border-color: #C2C8C1 !important;
}

.ng-preorder-card img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

.ng-preorder-card-name {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #122B1D !important;
    line-height: 1.4 !important;
}

.ng-preorder-card-date {
    font-size: 12px !important;
    color: #5F6B64 !important;
}

.ng-preorder-card-stats {
    display: flex !important;
    gap: 16px !important;
    font-size: 13px !important;
    border-top: 1px solid #EEF1EC !important;
    padding-top: 12px !important;
    color: #5F6B64 !important;
}

.ng-preorder-card-stats strong {
    color: #122B1D !important;
}

/* Кнопки в карточке */
.ng-preorder-card-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

.ng-preorder-card-actions .ng-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    border: 1px solid #E3E8E4 !important;
    background: #fff !important;
    color: #1A221E !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 500 !important;
    transition: all 0.15s !important;
}

.ng-preorder-card-actions .ng-btn:hover {
    background: #F4F4F0 !important;
}

.ng-preorder-card-actions .ng-btn--primary {
    background: #122B1D !important;
    color: #fff !important;
    border-color: #122B1D !important;
}

.ng-preorder-card-actions .ng-btn--primary:hover {
    background: #1B3B2B !important;
}

.ng-preorder-card-actions .ng-btn--danger {
    color: #ba1a1a !important;
    border-color: #ffdad6 !important;
    background: #ffdad6 !important;
}

.ng-preorder-card-actions .ng-btn--danger:hover {
    background: #f8c4c4 !important;
}