* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
iframe {
    max-width: 100%;
}

:root {
    --page-max: 1440px;
    --page-gap: 24px;
    --panel-radius: 8px;
    --brand-green: #173d2c;
    --brand-green-2: #27634a;
    --brand-red: #d93025;
    --brand-red-soft: #fff2ef;
    --ink: #17211c;
    --muted: #657469;
    --line: #dfe5da;
    --paper: #fffefa;
    --wash: #f4f6ef;
    --shadow-soft: 0 12px 30px rgba(23, 61, 44, 0.06);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background:
        linear-gradient(180deg, #ffffff 0, var(--wash) 360px),
        var(--wash);
}

.site-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 254, 250, 0.96);
    box-shadow: 0 10px 30px rgba(23, 61, 44, 0.06);
    backdrop-filter: blur(14px);
}

.site-topbar-inner {
    width: min(var(--page-max), calc(100% - (var(--page-gap) * 2)));
    display: grid;
    grid-template-columns: minmax(230px, 340px) minmax(360px, 1fr) minmax(260px, 340px);
    gap: 24px;
    align-items: center;
    margin: 0 auto;
    padding: 10px 0;
}

.brand-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
}

.brand-link:hover {
    text-decoration: none;
}

.brand-link img,
.brand-link svg {
    display: block;
    width: clamp(220px, 20vw, 330px);
    height: auto;
}

.brand-link small {
    max-width: 190px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--brand-green);
}

.brand-link>span>span {
    color: var(--brand-red);
}

.text-brand-red {
    color: var(--brand-red);
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.main-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border-radius: 999px;
    padding: 8px 13px;
    color: #243229;
    position: relative;
}

.main-nav a:hover {
    background: #eef4ea;
    color: var(--brand-green);
    text-decoration: none;
}

.main-nav a.is-active,
.main-nav a[aria-current="page"] {
    background: #eef4ea;
    color: var(--brand-green);
}

.topbar-contacts {
    display: grid;
    gap: 4px;
    justify-items: end;
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
}

.topbar-contacts a {
    font-size: 17px;
    font-weight: 800;
    color: var(--brand-green);
}

.topbar-rating {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    background: #fc0;
    color: #1a1a1a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;
}

.topbar-rating:hover {
    background: #f0b800;
    text-decoration: none !important;
}

.topbar-delivery {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-green);
    white-space: nowrap;
}

.smart-search-bar {
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(23, 61, 44, 0.05), rgba(196, 61, 49, 0.05)),
        var(--paper);
}

.smart-search-inner {
    width: min(var(--page-max), calc(100% - (var(--page-gap) * 2)));
    margin: 0 auto;
    padding: 14px 0;
}

.smart-search-form {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 8px 16px;
    align-items: center;
}

.smart-search-label {
    font-size: 18px;
    font-weight: 900;
    color: var(--brand-green);
}

.smart-search-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px auto;
    gap: 8px;
    align-items: center;
    border: 1px solid #cdd8c7;
    border-radius: 8px;
    padding: 7px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(23, 61, 44, 0.08);
}

.smart-search-control input {
    width: 100%;
    min-height: 46px;
    border: 0;
    padding: 0 10px;
    font: inherit;
    font-size: 17px;
    outline: none;
    background: transparent;
}

.voice-search-button,
.smart-search-submit {
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.voice-search-button {
    padding: 0 12px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f2f6ee;
}

.voice-search-button:hover {
    background: #e7efe2;
}

.voice-search-button.is-listening {
    color: #ffffff;
    background: var(--brand-red);
}

.smart-search-submit {
    padding: 0 20px;
    color: #ffffff;
    background: var(--brand-green);
}

.smart-search-submit:hover {
    background: #102f21;
}

.smart-search-form p {
    grid-column: 2;
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

.category-mega-bar {
    position: relative;
    z-index: 19;
    border-top: 1px solid rgba(48, 110, 132, 0.12);
    border-bottom: 1px solid rgba(48, 110, 132, 0.18);
    background:
        radial-gradient(circle at 10% 0, rgba(92, 154, 176, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(227, 241, 245, 0.96), rgba(250, 252, 247, 0.98) 42%, rgba(234, 244, 239, 0.96));
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.76), 0 12px 34px rgba(28, 76, 88, 0.06);
}

.category-mega-inner {
    width: min(var(--page-max), calc(100% - (var(--page-gap) * 2)));
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 9px 0;
    overflow: visible;
}

@media (min-width: 1200px) {
    .category-mega-inner {
        flex-wrap: nowrap;
    }
}

.mega-item {
    position: relative;
    flex: 0 0 auto;
}

.mega-item::after {
    position: absolute;
    top: 100%;
    right: -12px;
    left: -12px;
    height: 14px;
    content: "";
}

.mega-root {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    min-width: 94px;
    max-width: 205px;
    min-height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(48, 110, 132, 0.13);
    padding: 7px 11px 7px 8px;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 850;
    color: var(--brand-green);
    text-align: center;
    white-space: normal;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 22px rgba(28, 76, 88, 0.05);
}

.mega-root>span:last-child {
    min-width: 0;
}

.mega-root:hover,
.mega-item:focus-within .mega-root,
.mega-item:hover .mega-root {
    background: #edf4ea;
    text-decoration: none;
}

.mega-all-link,
.mega-virtual-link {
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid rgba(48, 110, 132, 0.18);
    background: rgba(255, 255, 255, 0.86);
}

.mega-all-link {
    color: #fff;
    background: var(--brand-green);
}

.mega-virtual-link.is-promo {
    color: #fff;
    border-color: var(--brand-red);
    background: var(--brand-red);
}

.mega-virtual-link.is-new {
    color: var(--brand-green);
    background: #eaf4e7;
}

.mega-submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: min(760px, calc(100vw - 32px));
    max-height: min(74vh, 680px);
    margin: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    list-style: none;
    background: var(--paper);
    box-shadow: 0 26px 70px rgba(23, 61, 44, 0.18);
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.mega-item:hover>.mega-submenu,
.mega-item:focus-within>.mega-submenu {
    display: block;
    columns: 3 190px;
    column-gap: 14px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-submenu li {
    position: relative;
    break-inside: avoid;
    margin: 0 0 4px;
    border-bottom: 1px solid #edf1e9;
    padding-bottom: 4px;
}

.mega-submenu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    border-radius: 7px;
    padding: 7px 9px;
    font-size: 13px;
    font-weight: 750;
    color: var(--ink);
}

.mega-submenu a:hover {
    background: #f2f6ee;
    color: var(--brand-green);
    text-decoration: none;
}

.mega-submenu.depth-2,
.mega-submenu.depth-3 {
    top: 0;
    left: calc(100% + 8px);
    width: min(620px, calc(100vw - 32px));
    max-height: min(70vh, 560px);
    overflow: auto;
    columns: 2 180px;
    transform: translateX(8px);
}

.mega-submenu li:has(> .mega-submenu)>a::after {
    flex: 0 0 auto;
    margin-left: 10px;
    color: #9aa894;
    content: "›";
}

.mega-submenu li:has(> .mega-submenu)::after {
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: 100%;
    width: 14px;
    content: "";
}

.mega-item:nth-last-child(-n+3)>.mega-submenu {
    right: 0;
    left: auto;
}

.mega-item:nth-last-child(-n+3) .mega-submenu.depth-2,
.mega-item:nth-last-child(-n+3) .mega-submenu.depth-3 {
    right: 100%;
    left: auto;
    transform: translateX(-6px);
}

.mega-submenu li:hover>.mega-submenu,
.mega-submenu li:focus-within>.mega-submenu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.site-utility {
    width: min(var(--page-max), calc(100% - (var(--page-gap) * 2)));
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 8px auto 0;
}

.back-button {
    appearance: none;
    border: 1px solid #cfd8c9;
    border-radius: 6px;
    padding: 5px 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-green);
    background: #ffffff;
    cursor: pointer;
    white-space: nowrap;
}

.back-button:hover {
    border-color: #9fb194;
    background: #f5f8f1;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    min-width: 0;
    font-size: 13px;
    color: var(--muted);
}

.breadcrumbs a {
    color: var(--brand-green);
}

.breadcrumbs-separator {
    color: #a3ad9d;
}

.price-mode-bar {
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(25, 91, 63, 0.08), rgba(207, 56, 45, 0.05)),
        rgba(244, 246, 239, 0.96);
}

.price-mode-inner {
    width: min(var(--page-max), calc(100% - (var(--page-gap) * 2)));
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 18px;
    align-items: center;
    margin: 0 auto;
    padding: 12px 0;
}

.price-mode-inner>span {
    font-size: 14px;
    font-weight: 900;
    color: var(--brand-green);
}

.price-mode-options {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.price-mode-button {
    appearance: none;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid #cfd8c9;
    border-radius: 999px;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    color: var(--brand-green);
    background: #ffffff;
    cursor: pointer;
    white-space: nowrap;
}

.price-mode-button b {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1;
    color: #ffffff;
    background: var(--brand-red);
    text-align: center;
    white-space: nowrap;
}

.price-mode-button-qr b {
    max-width: none;
    line-height: 1;
    background: var(--brand-green-2);
}

.price-mode-button-cash {
    border-color: rgba(25, 91, 63, 0.35);
    box-shadow: 0 8px 26px rgba(25, 91, 63, 0.10);
}

.price-mode-button:hover,
.price-mode-button.is-active {
    border-color: var(--brand-green);
    color: #ffffff;
    background: var(--brand-green);
}

.price-mode-button.is-active b {
    color: var(--brand-red);
    background: #ffffff;
}

.page {
    min-height: 100vh;
    padding: var(--page-gap) var(--page-gap) 56px;
}

.primary-link {
    font-weight: 700;
}

.start-screen {
    width: min(var(--page-max), 100%);
    margin: 0 auto;
    padding: 32px;
    border: 1px solid #d9dfd3;
    border-radius: 8px;
    background: var(--paper);
}

.start-screen.wide {
    width: min(var(--page-max), 100%);
    margin: 0 auto;
    border: 0;
    padding: 0;
    background: transparent;
}

.eyebrow {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--muted);
}

h1 {
    margin: 0 0 16px;
    font-size: 40px;
    font-weight: 850;
    line-height: 1.1;
}

p {
    font-size: 18px;
    line-height: 1.55;
}

h2 {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 800;
}

h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

a {
    color: var(--brand-green);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.status-box {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 24px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #eef4ea;
}

.status-box.success {
    background: #e8f5ec;
    color: #145a2a;
}

.status-box.danger {
    background: #fff0ee;
    color: #8a1f11;
}

.primary-button {
    appearance: none;
    border: 0;
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 18px;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    background: var(--brand-green);
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(22, 60, 43, 0.16);
}

.primary-button:hover {
    background: #0f2f20;
}

.secondary-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #b9c6b1;
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 16px;
    font-weight: 800;
    color: var(--brand-green);
    background: var(--paper);
}

.secondary-button:hover {
    background: #f5f8f1;
    text-decoration: none;
}

.home-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.46fr);
    gap: 40px;
    align-items: center;
    min-height: 340px;
    padding: 46px 54px;
    border-radius: 8px;
    color: var(--ink);
    border: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(255, 254, 250, 0.98), rgba(255, 254, 250, 0.92)),
        var(--paper);
    box-shadow: 0 22px 60px rgba(23, 61, 44, 0.1);
}

.hero-copy {
    min-width: 0;
}

.hero-media {
    display: grid;
    place-items: center;
    align-self: stretch;
    min-height: 280px;
    border: 1px solid #d7dfd1;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(244, 246, 239, 0.86), rgba(255, 254, 250, 1)),
        var(--wash);
}

.hero-media img {
    display: block;
    width: min(100%, 520px);
    height: auto;
}

.storage-status {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(220px, 0.7fr));
    gap: 16px;
    margin-top: 18px;
}

.arrival-card,
.temperature-card {
    position: relative;
    overflow: hidden;
    min-height: 168px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 22px 24px;
    background: var(--paper);
    box-shadow: var(--shadow-soft);
}

.arrival-card {
    color: #ffffff;
    background:
        linear-gradient(90deg, rgba(12, 50, 33, 0.96), rgba(12, 50, 33, 0.72) 58%, rgba(12, 50, 33, 0.42)),
        var(--home-warehouse-main) center / cover no-repeat,
        var(--brand-green);
}

.arrival-card::after,
.temperature-card::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 16px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.13);
}

.arrival-card::before {
    content: "Приемка 04:00-07:00";
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 1;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 12px;
    font-weight: 900;
    color: #ffffff;
    backdrop-filter: blur(10px);
}

.arrival-card span,
.temperature-card span {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 850;
    color: inherit;
    opacity: 0.78;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.arrival-card strong,
.temperature-card strong {
    display: block;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1;
}

.arrival-card p,
.temperature-card p {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 12px 0 0;
    color: inherit;
    opacity: 0.82;
}

.temperature-card {
    display: grid;
    align-content: space-between;
    color: var(--brand-green);
    background:
        radial-gradient(circle at 82% 20%, rgba(30, 95, 132, 0.1), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 245, 0.96));
}

.temperature-card strong {
    font-variant-numeric: tabular-nums;
}

.temperature-card strong span {
    display: inline;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    opacity: 1;
    letter-spacing: 0;
    text-transform: none;
}

.temperature-card.freezer strong {
    color: #1e5f84;
}

.temperature-card.chiller strong {
    color: var(--brand-green);
}

.home-hero::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    margin-bottom: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-green) 0 64%, var(--brand-red) 64% 100%);
}

.home-hero h1 {
    margin-bottom: 12px;
    color: var(--brand-green);
    font-size: clamp(46px, 5vw, 74px);
    letter-spacing: -0.02em;
}

.home-hero .eyebrow {
    color: var(--brand-red);
    font-weight: 800;
}

.hero-lead {
    max-width: 820px;
    margin: 0;
    font-size: clamp(24px, 2.3vw, 36px);
    line-height: 1.25;
    font-weight: 700;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.hero-points span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border: 1px solid #d7dfd1;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 14px;
    font-weight: 800;
    color: var(--brand-green);
    background: #f8faf5;
}

.hero-button {
    display: inline-flex;
    margin-top: 0;
    background: var(--brand-green);
    color: #ffffff;
}

.hero-button:hover {
    background: #102f21;
}

.home-value-system,
.audience-system {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(23, 61, 44, 0.12);
    border-radius: 14px;
    background:
        radial-gradient(circle at 88% 8%, rgba(196, 61, 49, 0.08), transparent 28%),
        linear-gradient(135deg, #fffefa 0%, #f4f7ef 100%);
    box-shadow: 0 16px 48px rgba(23, 61, 44, 0.08);
}

.home-value-system {
    border-top: 4px solid var(--brand-green);
}

.audience-system {
    border-top: 4px solid var(--brand-red);
    background:
        radial-gradient(circle at 12% 12%, rgba(39, 99, 74, 0.06), transparent 28%),
        linear-gradient(135deg, #f6f9f2 0%, #eef4e8 100%);
}

.home-value-system {
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(14px, 2vw, 22px);
    padding: clamp(18px, 2.7vw, 34px);
}

.home-value-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(14px, 2vw, 26px);
}

.home-value-head .hero-points {
    margin-top: 18px;
}

.home-value-head .eyebrow,
.audience-heading .eyebrow {
    color: var(--brand-red);
    font-weight: 900;
}

.home-value-head h1 {
    margin: 0 0 16px;
    color: var(--brand-green);
    font-size: clamp(50px, 7vw, 92px);
    line-height: 0.92;
    letter-spacing: -1px;
}

.home-value-head>p {
    max-width: 560px;
    margin: 0;
    color: #173d2c;
    font-size: clamp(18px, 1.9vw, 26px);
    line-height: 1.4;
    font-weight: 700;
}

.home-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.home-benefit-card,
.audience-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-radius: 10px;
    background-position: center;
    background-size: cover;
    box-shadow: 0 16px 38px rgba(23, 61, 44, 0.12);
    isolation: isolate;
}

.home-benefit-card {
    display: flex;
    align-items: end;
    min-height: 280px;
    padding: clamp(20px, 2.4vw, 32px);
    background-image: var(--benefit-image);
    color: #ffffff;
}

.home-benefit-card.is-wide {
    grid-row: span 2;
    min-height: 100%;
}

.home-benefit-card::before,
.audience-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--benefit-image, var(--audience-image)) center / cover no-repeat;
    transform: scale(1.02);
}

.home-benefit-card::after,
.audience-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(7, 26, 18, 0.18), rgba(7, 26, 18, 0.86)),
        linear-gradient(90deg, rgba(7, 26, 18, 0.78), rgba(7, 26, 18, 0.22));
}

.audience-card::after {
    background:
        linear-gradient(180deg, rgba(7, 26, 18, 0.35), rgba(7, 26, 18, 0.88)),
        linear-gradient(90deg, rgba(7, 26, 18, 0.82), rgba(7, 26, 18, 0.35));
}

.home-benefit-card>div,
.audience-card {
    min-width: 0;
}

.home-benefit-card span,
.audience-card span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 10px;
    border-radius: 999px;
    padding: 7px 12px;
    background: rgba(255, 254, 250, 0.96);
    color: var(--brand-green);
    font-size: 13px;
    font-weight: 900;
}

.audience-card span {
    margin-bottom: 0;
}

.home-benefit-card .tag-red {
    background: var(--brand-red);
    color: #ffffff;
}

.home-benefit-card .tag-green {
    background: var(--brand-green);
    color: #ffffff;
}

.benefit-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.benefit-tiers span {
    margin-bottom: 0;
}

.home-benefit-card h2 {
    max-width: 620px;
    margin: 0 0 10px;
    color: #ffffff;
    font-size: clamp(24px, 2.6vw, 42px);
    line-height: 1.1;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.home-benefit-card h2.text-brand-red,
.home-benefit-card p .text-brand-red {
    color: var(--brand-red);
}

.home-benefit-card p {
    max-width: 520px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(15px, 1.35vw, 19px);
    line-height: 1.55;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.audience-system {
    display: grid;
    grid-template-columns: minmax(270px, 0.74fr) minmax(0, 1.26fr);
    gap: clamp(14px, 2vw, 22px);
    margin-top: 0;
    padding: clamp(18px, 2.7vw, 34px);
}

.audience-heading {
    align-self: center;
    min-width: 0;
}

.audience-heading h2 {
    max-width: 600px;
    margin: 0 0 12px;
    color: var(--brand-green);
    font-size: clamp(30px, 3.9vw, 58px);
    line-height: 1.02;
}

.audience-heading p:last-child {
    max-width: 560px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.48;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}

.audience-card {
    display: flex;
    min-height: 380px;
    padding: clamp(20px, 2.2vw, 30px);
    color: #ffffff;
    flex-direction: column;
    justify-content: space-between;
    background-image: var(--audience-image);
}

.audience-card h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: clamp(20px, 1.8vw, 29px);
    line-height: 1.15;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.audience-card p {
    margin: 0;
    color: #ffffff;
    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.55;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.home-carousel {
    position: relative;
    overflow: hidden;
    min-height: clamp(390px, 42vw, 560px);
    border: 1px solid rgba(23, 61, 44, 0.12);
    border-radius: 8px;
    background: var(--brand-green);
    box-shadow: 0 24px 70px rgba(23, 61, 44, 0.16);
    isolation: isolate;
}

.home-carousel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 254, 250, 0.08), transparent 34%),
        linear-gradient(90deg, rgba(10, 30, 21, 0.78), rgba(10, 30, 21, 0.38) 52%, rgba(10, 30, 21, 0.06));
}

.home-carousel-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    align-items: center;
    padding: clamp(30px, 5vw, 74px);
    background-image: var(--slide-image);
    background-position: center;
    background-size: cover;
    opacity: 0;
    animation: homeCarouselFade 18s infinite;
}

.home-carousel-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg, rgba(10, 30, 21, 0.7), rgba(10, 30, 21, 0.32) 54%, rgba(10, 30, 21, 0.08));
}

.home-carousel-slide:nth-child(2) {
    animation-delay: 6s;
}

.home-carousel-slide:nth-child(3) {
    animation-delay: 12s;
}

.home-carousel-copy {
    position: relative;
    z-index: 2;
    max-width: min(760px, 72vw);
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

.home-carousel-copy .eyebrow {
    margin-bottom: 12px;
    color: #ffd9cf;
    font-size: 13px;
    font-weight: 900;
}

.home-carousel-copy h1,
.home-carousel-copy h2 {
    max-width: 820px;
    margin-bottom: 16px;
    color: #ffffff;
    font-size: clamp(40px, 5.6vw, 78px);
    line-height: 0.95;
}

.home-carousel-copy h2 {
    font-size: clamp(34px, 4.6vw, 64px);
}

.home-carousel-copy p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.28;
    font-weight: 750;
}

.home-carousel .hero-actions {
    margin-top: 28px;
}

.home-carousel .secondary-button {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}

.home-carousel-dots {
    position: absolute;
    left: clamp(30px, 5vw, 74px);
    bottom: 28px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

.home-carousel-dots span {
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.34);
}

.home-carousel-dots span:first-child {
    background: var(--brand-red);
}

@keyframes homeCarouselFade {

    0%,
    30% {
        opacity: 1;
    }

    36%,
    100% {
        opacity: 0;
    }
}

.warehouse-showcase {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    gap: 18px;
    align-items: start;
    margin-top: 0;
    padding: clamp(22px, 3vw, 38px);
    border: 1px solid rgba(23, 61, 44, 0.12);
    border-top: 4px solid #0d5d80;
    border-radius: 14px;
    background:
        radial-gradient(circle at 86% 8%, rgba(13, 93, 128, 0.08), transparent 28%),
        linear-gradient(135deg, #fffefa 0%, #f0f6f4 100%);
    box-shadow: 0 16px 48px rgba(23, 61, 44, 0.08);
}

.warehouse-copy,
.warehouse-photo-grid {
    min-width: 0;
}

.warehouse-copy {
    min-height: 100%;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 254, 250, 0.96), rgba(247, 249, 244, 0.96)),
        var(--paper);
    box-shadow: var(--shadow-soft);
}

.warehouse-copy h2 {
    max-width: 680px;
    margin-bottom: 12px;
    color: var(--brand-green);
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.05;
}

.warehouse-copy p:last-child {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 17px;
}

.warehouse-showcase .storage-status {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}

.warehouse-showcase .arrival-card {
    grid-column: 1 / -1;
}

.warehouse-photo-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(280px, 1.1fr) repeat(2, minmax(220px, 0.95fr));
    gap: 12px;
}

.warehouse-photo-card {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    margin: 0;
    border: 1px solid rgba(23, 61, 44, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.44)),
        var(--warehouse-image) center / cover no-repeat;
    box-shadow: var(--shadow-soft);
}

.warehouse-photo-card.large {
    grid-row: span 1;
    min-height: 260px;
}

.warehouse-photo-card figcaption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 1;
    display: grid;
    gap: 5px;
    color: #ffffff;
}

.warehouse-photo-card span {
    font-size: 12px;
    font-weight: 900;
    opacity: 0.76;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.warehouse-photo-card strong {
    max-width: 320px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.08;
}

.home-banners,
.promo-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.home-banner,
.promo-strip div,
.price-request-panel {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: none;
}

.price-download {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 36px);
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid rgba(13, 93, 128, 0.18);
    border-top: 4px solid #0d5d80;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(19, 66, 45, 0.06), rgba(13, 93, 128, 0.05));
}

.price-download-copy {
    display: grid;
    gap: 8px;
    max-width: 640px;
    min-width: 0;
}

.price-download-copy .eyebrow {
    color: var(--brand-green);
    font-weight: 900;
}

.price-download-copy h2 {
    font-size: clamp(24px, 3.4vw, 36px);
    line-height: 1.02;
}

.price-download-copy p {
    color: #435448;
    font-size: 16px;
    line-height: 1.5;
}

.price-download-action {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.price-download-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    padding: 14px 26px;
    white-space: nowrap;
}

.price-download-icon {
    font-size: 18px;
    line-height: 1;
}

.price-download-action small {
    color: #6b7d70;
    font-size: 13px;
}

@media (max-width: 640px) {
    .price-download-action {
        width: 100%;
        justify-items: stretch;
    }

    .price-download-button {
        justify-content: center;
    }
}

.home-banner {
    display: grid;
    grid-template-rows: 96px auto auto;
    gap: 9px;
    min-height: 232px;
    overflow: hidden;
    padding-top: 0;
}

.home-banner::before {
    content: "";
    display: block;
    margin: 0 -18px 8px;
    border-bottom: 1px solid var(--line);
    background-color: var(--wash);
    background-position: center;
    background-size: cover;
}

.delivery-image::before {
    background-image: url("/assets/images/brand-delivery.svg");
}

.region-image::before {
    background-image: url("/assets/images/brand-hero-products.svg");
}

.day-image::before,
.payment-image::before {
    background-image: url("/assets/images/brand-price.svg");
}

.home-banner strong,
.promo-strip strong {
    color: var(--ink);
}

.home-banner span,
.promo-strip span,
.promo-strip small {
    color: var(--muted);
}

.home-banner {
    border-top: 3px solid transparent;
}

.home-banner:hover,
.promo-strip div:hover {
    border-color: #cdd8c7;
    box-shadow: var(--shadow-soft);
}

.home-banner:first-child {
    border-top-color: var(--brand-red);
}

.promo-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.promo-strip div {
    display: grid;
    gap: 5px;
}

.promo-strip strong {
    font-size: 22px;
}

.price-request-panel {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-top: 0;
    background: var(--paper);
}

.price-request-image {
    min-height: 104px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: url("/assets/images/brand-price.svg") center / cover no-repeat var(--wash);
}

.price-request-panel {
    position: relative;
    display: block;
    min-height: 560px;
    overflow: hidden;
    padding: clamp(20px, 3vw, 44px);
    border: 0;
    border-top: 4px solid var(--brand-red);
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(9, 42, 28, 0.94) 0%, rgba(9, 42, 28, 0.78) 42%, rgba(9, 42, 28, 0.35) 100%),
        var(--home-warehouse-main) center / cover no-repeat,
        #0d2f20;
    box-shadow: 0 28px 80px rgba(13, 45, 30, 0.2);
}

.price-request-panel::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 10px;
    pointer-events: none;
}

.price-request-cover {
    position: absolute;
    inset: auto clamp(18px, 3vw, 36px) clamp(18px, 3vw, 36px) auto;
    z-index: 1;
    display: grid;
    max-width: 360px;
    min-height: 0;
    background: none;
}

.price-request-cover::after {
    content: none;
}

.price-request-cover span {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    backdrop-filter: blur(12px);
}

.price-request-content {
    position: relative;
    z-index: 2;
    display: grid;
    max-width: 860px;
    gap: 18px;
    padding: clamp(18px, 2.7vw, 34px);
    border: 1px solid rgba(255, 255, 255, 0.66);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 246, 240, 0.94));
    box-shadow: 0 22px 60px rgba(3, 22, 14, 0.28);
}

.price-request-copy {
    display: grid;
    gap: 10px;
    max-width: 760px;
}

.price-request-copy .eyebrow {
    color: var(--brand-red);
    font-weight: 900;
}

.price-request-copy h2 {
    font-size: clamp(30px, 4.5vw, 52px);
    line-height: 0.96;
    letter-spacing: 0;
}

.price-request-copy p:not(.eyebrow) {
    max-width: 720px;
    color: #435448;
    font-size: 17px;
    line-height: 1.5;
}

.business-only-badge {
    width: fit-content;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(196, 57, 47, 0.22);
    border-radius: 8px;
    background: #fff4ef;
    color: var(--brand-red);
    font-size: 14px;
    font-weight: 900;
}

.price-request-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.price-request-form label,
.price-request-form fieldset {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.price-request-form label span,
.price-request-form legend {
    color: var(--brand-green);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.price-request-form input,
.price-request-form textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 13px;
    border: 1px solid #d6dfd3;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.price-request-form textarea {
    min-height: 116px;
    resize: vertical;
}

.price-request-form input:focus,
.price-request-form textarea:focus {
    outline: 3px solid rgba(19, 66, 45, 0.14);
    border-color: var(--brand-green);
}

.price-request-form .wide {
    grid-column: 1 / -1;
}

.price-request-form fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    padding: 0;
    border: 0;
}

.price-request-form legend {
    grid-column: 1 / -1;
    padding: 0;
}

.choice-pill {
    position: relative;
}

.choice-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-pill span {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 1px solid #d6dfd3;
    border-radius: 8px;
    background: #fff;
    color: var(--brand-green);
    font-weight: 900;
}

.choice-pill input:checked+span {
    border-color: var(--brand-green);
    background: var(--brand-green);
    color: #fff;
    box-shadow: 0 12px 22px rgba(19, 66, 45, 0.18);
}

.file-field {
    padding: 14px;
    border: 1px dashed rgba(19, 66, 45, 0.32);
    border-radius: 8px;
    background: rgba(19, 66, 45, 0.04);
}

.file-field small {
    color: var(--muted);
}

.price-request-form .primary-button {
    min-height: 50px;
    justify-content: center;
    border-radius: 8px;
    font-size: 16px;
}

.home-catalog-showcase {
    display: grid;
    gap: 18px;
    margin-top: 0;
    padding: clamp(22px, 3vw, 38px);
    border: 1px solid rgba(23, 61, 44, 0.12);
    border-top: 4px solid var(--brand-green);
    border-radius: 14px;
    background: #fffef8;
    box-shadow: 0 16px 48px rgba(23, 61, 44, 0.08);
}

.home-catalog-heading,
.home-product-section-head {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.home-catalog-heading {
    border: 1px solid rgba(13, 93, 128, 0.16);
    border-radius: 12px;
    padding: clamp(16px, 2vw, 22px);
    background:
        linear-gradient(135deg, rgba(13, 93, 128, 0.1), rgba(255, 255, 255, 0.82) 58%),
        #fffefa;
    box-shadow: 0 14px 34px rgba(22, 60, 43, 0.055);
}

.home-catalog-heading h2 {
    margin: 0;
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.05;
}

.home-catalog-main-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 999px;
    padding: 0 22px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    background:
        linear-gradient(135deg, #0d5d80, #173d2c 74%);
    box-shadow: 0 14px 32px rgba(13, 93, 128, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.home-catalog-main-link:hover,
.home-catalog-main-link:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(13, 93, 128, 0.26);
}

.home-product-section {
    position: relative;
    display: grid;
    gap: 12px;
    overflow: hidden;
    padding: clamp(12px, 1.6vw, 18px);
    border: 1px solid rgba(19, 66, 45, 0.12);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 254, 250, 0.96)),
        #fff;
    box-shadow: 0 12px 34px rgba(22, 60, 43, 0.06);
}

.home-product-section::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 76px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 254, 250, 0.92));
}

.home-product-section.is-promo {
    border-color: rgba(196, 57, 47, 0.2);
    background:
        radial-gradient(circle at top left, rgba(196, 57, 47, 0.1), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 248, 0.96)),
        #fff;
}

.home-product-section.is-new {
    border-color: rgba(13, 93, 128, 0.2);
    background:
        radial-gradient(circle at top left, rgba(13, 93, 128, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 251, 250, 0.96)),
        #fff;
}

.home-product-section-head h3 {
    margin: 0;
    font-size: clamp(20px, 1.75vw, 28px);
    line-height: 1.05;
}

.home-product-section-actions {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.home-product-section-head a {
    flex: 0 0 auto;
    color: #0d5d80;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.home-strip-controls {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.home-strip-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(19, 66, 45, 0.12);
    border-radius: 999px;
    color: #0d5d80;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    background: #fff;
    box-shadow: 0 8px 18px rgba(13, 93, 128, 0.1);
    cursor: pointer;
    transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.home-strip-controls button:hover,
.home-strip-controls button:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #0d5d80, var(--brand-green));
    transform: translateY(-1px);
}

.home-products-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(218px, 15.5vw, 250px);
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    margin-inline: -2px;
    padding: 2px 2px 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.home-products-strip::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.home-products-strip .product-card {
    min-width: 0;
    padding: 10px;
    border-color: rgba(19, 66, 45, 0.1);
    box-shadow: 0 10px 22px rgba(22, 60, 43, 0.05);
    scroll-snap-align: start;
}

.home-products-strip .product-card-image {
    margin: -3px -3px 10px;
}

.home-products-strip .product-card-image img,
.home-products-strip .product-card-image-placeholder {
    aspect-ratio: 4 / 3;
}

.home-products-strip .product-card .product-category {
    height: 24px;
    margin-bottom: 6px;
    font-size: 9px;
}

.home-products-strip .product-card h3 {
    height: 48px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.15;
}

.home-products-strip .variant-choice {
    height: 58px;
    grid-template-rows: auto 30px;
    gap: 5px;
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.home-products-strip .variant-choice>span,
.home-products-strip .price-line,
.home-products-strip .package-price-line {
    font-size: 11px;
}

.home-products-strip .package-price-note {
    font-size: 11px;
}

.home-products-strip .price-line {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    align-items: center;
    min-height: 32px;
    margin-bottom: 5px;
}

.home-products-strip .package-price-line {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    align-items: center;
    min-height: 42px;
    padding-top: 8px;
}

.home-products-strip .price-unit-label,
.home-products-strip .package-price-label {
    overflow: visible;
    color: #546251;
    font-size: 11px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-products-strip .price-unit-values,
.home-products-strip .package-price-values {
    justify-content: flex-end;
    font-size: 12px;
    line-height: 1.2;
}

.home-products-strip .old-price {
    font-size: 11px;
}

.home-products-strip .quantity-stepper {
    min-width: 0;
}

.home-products-strip .quantity-stepper button,
.home-products-strip .quantity-stepper input {
    height: 36px;
    font-size: 13px;
}

.home-products-strip .quantity-stepper button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.home-products-strip .quantity-stepper input {
    padding: 0 2px;
}

.home-products-strip .add-to-cart-button {
    min-height: 36px;
    padding-inline: 10px;
    font-size: 12px;
    white-space: nowrap;
}

.home-products-strip .product-card-actions {
    grid-template-columns: 94px minmax(92px, 1fr);
    min-height: 38px;
}

.home-products-strip .price-tier-trigger {
    flex: 0 0 auto;
}

.home-delivery-separator {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 18px;
    align-items: center;
    padding: clamp(20px, 3vw, 34px);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(9, 42, 28, 0.96), rgba(19, 66, 45, 0.86)),
        var(--home-warehouse-main) center / cover no-repeat;
    color: #fff;
    box-shadow: 0 22px 56px rgba(10, 38, 25, 0.2);
}

.home-delivery-separator .eyebrow,
.home-delivery-separator p {
    color: rgba(255, 255, 255, 0.82);
}

.home-delivery-separator h3 {
    max-width: 720px;
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(24px, 3vw, 42px);
    line-height: 1.04;
}

.home-delivery-mini {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
}

.home-delivery-mini label {
    display: grid;
    gap: 6px;
}

.home-delivery-mini span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.home-delivery-mini input,
.home-delivery-mini select {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--ink);
    font: inherit;
    background: #fff;
}

.wishlist-request-panel {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    gap: 22px;
    align-items: stretch;
    margin-top: 0;
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid rgba(23, 61, 44, 0.12);
    border-top: 4px solid var(--brand-red);
    border-radius: 14px;
    background:
        radial-gradient(circle at 13% 20%, rgba(196, 57, 47, 0.16), transparent 28%),
        linear-gradient(135deg, #fffaf4, #edf4ea);
    box-shadow: 0 16px 48px rgba(23, 61, 44, 0.08);
}

.wishlist-request-copy {
    display: grid;
    align-content: center;
    gap: 12px;
}

.wishlist-request-copy h2 {
    max-width: 540px;
    font-size: clamp(32px, 4.4vw, 58px);
    line-height: 0.96;
}

.wishlist-request-copy p {
    max-width: 560px;
    color: #526257;
    font-size: 18px;
    line-height: 1.5;
}

.wishlist-request-copy span {
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--brand-red);
    font-size: 13px;
    font-weight: 900;
    background: rgba(196, 57, 47, 0.1);
}

.wishlist-request-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(19, 66, 45, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
}

.wishlist-request-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wishlist-request-form label {
    display: grid;
    gap: 7px;
}

.wishlist-request-form label span {
    color: var(--brand-green);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.wishlist-request-form input,
.wishlist-request-form textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid #d6dfd3;
    border-radius: 8px;
    padding: 12px 13px;
    color: var(--ink);
    font: inherit;
    background: #fff;
}

.wishlist-request-form textarea {
    min-height: 126px;
    resize: vertical;
}

.wishlist-request-form .wide {
    grid-column: 1 / -1;
}

.form-hint {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.panel {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow-soft);
}

.products-panel {
    margin-top: 18px;
}

.section-heading {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.section-heading .eyebrow,
.section-heading h2 {
    margin-bottom: 0;
}

.subtle-link {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
}

.subtle-button {
    appearance: none;
    flex: 0 0 auto;
    border: 1px solid rgba(198, 57, 45, 0.24);
    border-radius: 8px;
    padding: 8px 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    color: var(--brand-red);
    background: #fff7f4;
    cursor: pointer;
}

.subtle-button:hover {
    border-color: rgba(198, 57, 45, 0.44);
    background: #fff0eb;
}

.muted {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}

.category-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.category-list .category-list {
    display: grid;
    gap: 1px;
    margin: 3px 0 6px;
    padding: 0;
    list-style: none;
}

.category-list li {
    min-width: 0;
    font-size: 14px;
    font-weight: 760;
}

.category-list.depth-0>.category-special-link>a {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe5d6;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.category-list.depth-0>.category-special-link.is-all>a {
    color: #fff;
    border-color: var(--brand-green);
    background: var(--brand-green);
}

.category-list.depth-0>.category-special-link:not(.is-all)>a {
    color: var(--brand-green);
    background: #fff;
}

.category-list.depth-0>.category-special-link.is-current>a {
    color: #fff;
    border-color: var(--brand-green);
    background: var(--brand-green);
}

.category-list a,
.category-details summary {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 8px;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--ink);
}

.category-list a {
    overflow: hidden;
    text-decoration: none;
}

.category-list.depth-0>li>a,
.category-list.depth-0>li>.category-details>summary {
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    padding-left: 8px;
}

.category-list.depth-0>li>a .category-icon,
.category-list.depth-0>li>.category-details>summary .category-icon {
    grid-column: 1;
}

.category-list.depth-0>li>a span:last-child,
.category-list.depth-0>li>.category-details>summary a {
    grid-column: 2;
}

.category-list a span:last-child,
.category-details summary a {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-list.depth-0>li {
    border-bottom: 1px solid #edf1e9;
    padding-bottom: 3px;
}

.category-list.depth-0>li:last-child {
    border-bottom: 0;
}

.category-list.depth-1 li {
    font-size: 13px;
    font-weight: 680;
}

.category-list.depth-1>li>a,
.category-list.depth-1>li>.category-details>summary {
    padding-left: 44px;
}

.category-list.depth-2 li {
    font-size: 12px;
    font-weight: 560;
}

.category-list.depth-2>li>a,
.category-list.depth-2>li>.category-details>summary {
    padding-left: 56px;
}

.category-list.depth-3>li>a,
.category-list.depth-3>li>.category-details>summary {
    padding-left: 68px;
}

.category-list li.is-current>a,
.category-list li.is-current>.category-details>summary {
    color: #ffffff;
    background: var(--brand-green);
}

.category-list a.is-current-link {
    color: inherit;
    background: transparent;
}

.category-list li.is-current>a .category-icon,
.category-list li.is-current>.category-details>summary .category-icon {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
}

.category-list a:hover,
.category-details summary:hover {
    color: var(--brand-green);
    background: #eef4ea;
}

.category-list li.is-current>a:hover,
.category-list li.is-current>.category-details>summary:hover {
    color: #ffffff;
    background: var(--brand-green);
}

.category-details summary {
    position: relative;
    cursor: pointer;
    list-style: none;
}

.category-details summary::-webkit-details-marker {
    display: none;
}

.category-details summary::after {
    grid-column: 2;
    justify-self: center;
    width: 18px;
    color: #8a9587;
    content: ">";
    transition: transform 0.16s ease;
}

.category-list.depth-0>li>.category-details>summary::after {
    grid-column: 3;
}

.category-details[open]>summary::after {
    transform: rotate(90deg);
}

.category-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    line-height: 1;
    color: var(--brand-green);
    background: #edf4ea;
}

.category-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.category-icon.is-caviar svg circle,
.category-icon.is-meat svg circle,
.category-icon.is-cheese svg circle {
    fill: currentColor;
    stroke-width: 0;
}

.mega-category-icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 9px;
}

.mega-category-icon svg {
    width: 17px;
    height: 17px;
}

.mobile-category-menu {
    padding: 12px;
}

.mobile-category-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-category-item {
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 52px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #ffffff;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(18, 63, 43, 0.06);
}

.mobile-category-item.is-current {
    color: #ffffff;
    background: var(--brand-green);
    border-color: var(--brand-green);
}

.mobile-category-item.is-promo {
    color: #fff;
    background: var(--brand-red);
    border-color: var(--brand-red);
}

.mobile-category-item.is-new {
    color: var(--brand-green);
    background: #eaf4e7;
    border-color: #d4e8ce;
}

.mobile-category-icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--brand-green);
    background: #edf4ea;
}

.mobile-category-item.is-current .mobile-category-icon,
.mobile-category-item.is-promo .mobile-category-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.mobile-category-item.is-new .mobile-category-icon {
    color: var(--brand-green);
    background: #fff;
}

.mobile-category-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-details summary a {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-details summary a:hover {
    background: none;
    color: inherit;
}

.category-details summary::marker {
    color: #7a856f;
}

.settings-list {
    display: grid;
    gap: 12px;
    margin: 0;
}

.settings-list div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
}

.settings-list dt {
    color: var(--muted);
}

.settings-list dd {
    margin: 0;
    font-weight: 700;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.product-card,
.admin-tile {
    min-height: 96px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 0 10px 24px rgba(22, 60, 43, 0.05);
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.product-card.is-unavailable {
    background: linear-gradient(180deg, rgba(245, 246, 242, 0.94), rgba(232, 236, 227, 0.94));
}

.product-card.is-unavailable .product-card-image img,
.product-card.is-unavailable .product-card-image-placeholder {
    filter: grayscale(0.9) blur(0.4px);
    opacity: 0.68;
}

.product-card.is-unavailable h3,
.product-card.is-unavailable .price-line,
.product-card.is-unavailable .package-price-line,
.product-card.is-unavailable .variant-choice {
    opacity: 0.72;
}

.product-card-unavailable-note {
    display: grid;
    place-items: center start;
    min-height: 72px;
    border-top: 1px solid #d8ded2;
    margin: 6px 0 10px;
    padding-top: 10px;
    font-size: 13px;
    font-weight: 800;
    color: #687266;
}

.product-unavailable-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 900;
    color: #ffffff;
    background: rgba(80, 89, 78, 0.9);
    box-shadow: 0 8px 20px rgba(24, 34, 24, 0.12);
}

.product-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(24, 34, 24, 0.14);
}

.product-card-badge.is-promo {
    background: var(--brand-red);
}

.product-card-badge.is-new {
    background: var(--brand-green);
}

/* Плашка скидки на странице товара */
.product-detail-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    display: inline-flex;
    min-height: 32px;
    max-width: calc(100% - 32px);
    align-items: center;
    border-radius: 999px;
    padding: 8px 14px;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(24, 34, 24, 0.14);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-detail-badge.is-promo {
    background: var(--brand-red);
}

.product-detail-badge.is-new {
    background: var(--brand-green);
}

.product-card-image {
    display: block;
    overflow: hidden;
    margin: -4px -4px 14px;
    border-radius: 8px;
    background: #eef4ea;
}

.product-card-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.18s ease;
}

.product-card-image:hover img {
    transform: scale(1.025);
}

.product-card-image-placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    color: var(--brand-green);
    font-weight: 900;
    background:
        linear-gradient(135deg, rgba(23, 61, 44, 0.08), rgba(196, 61, 49, 0.08)),
        #eef4ea;
}

.product-card-image-placeholder span {
    display: inline-flex;
    border-bottom: 2px solid var(--brand-red);
    padding-bottom: 3px;
}

.product-card p {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--muted);
}

.product-card .product-category {
    overflow: hidden;
    height: 32px;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    color: #7a856f;
}

.product-card .product-category>span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-card h3 {
    display: -webkit-box;
    overflow: hidden;
    height: 58px;
    margin-bottom: 12px;
    line-height: 1.22;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.price-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    min-height: 30px;
    margin-bottom: 6px;
    font-size: 14px;
    color: #2d372f;
}

.price-line.is-price-placeholder,
.package-price-note.is-price-placeholder {
    visibility: hidden;
    pointer-events: none;
}

.price-unit-label {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.price-unit-values {
    display: inline-flex;
    gap: 5px;
    align-items: baseline;
    justify-content: flex-end;
    min-width: 0;
    color: var(--brand-green);
    white-space: nowrap;
}

.package-price-line {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    min-height: 36px;
    border-top: 1px solid #e3e8de;
    padding-top: 10px;
    font-size: 14px;
}

.package-price-line[hidden] {
    display: none;
}

.package-price-label {
    overflow: hidden;
    min-width: 0;
    color: #2d372f;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.package-price-values {
    display: inline-flex;
    gap: 5px;
    align-items: baseline;
    justify-content: flex-end;
    min-width: 0;
    color: var(--brand-green);
    white-space: nowrap;
}

.package-price-note {
    display: block;
    min-height: 15px;
    margin: 3px 0 8px;
    font-size: 12px;
    line-height: 1.25;
    color: var(--muted);
}

.package-price-note[hidden] {
    display: none;
}

.old-price {
    display: inline-block;
    margin-right: 0;
    font-size: 13px;
    font-weight: 400;
    color: #727d6d;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(114, 125, 109, 0.55);
    white-space: nowrap;
}

.old-price[hidden] {
    display: none;
}

.price-line[hidden] {
    display: none;
}

.variant-choice {
    display: grid;
    grid-template-rows: auto 34px;
    align-self: start;
    gap: 7px;
    height: 76px;
    margin: 0 0 12px;
    border-top: 0;
    border-bottom: 1px solid #edf1e9;
    padding-bottom: 10px;
}

.variant-choice>span {
    font-size: 13px;
    font-weight: 800;
    color: var(--muted);
}

.variant-choice-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: flex-start;
    min-width: 0;
    min-height: 34px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.variant-choice-button {
    appearance: none;
    flex: 0 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 30px;
    border: 1px solid #cfd8c9;
    border-radius: 7px;
    padding: 6px 9px;
    font: inherit;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--brand-green);
    background: #ffffff;
    cursor: pointer;
    overflow-wrap: anywhere;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.variant-choice-button:hover,
.variant-choice-button.is-active {
    border-color: var(--brand-green);
    color: #ffffff;
    background: var(--brand-green);
}

.add-to-cart-button {
    appearance: none;
    align-self: end;
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    margin-top: 0;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    color: #ffffff;
    background: var(--brand-green);
    cursor: pointer;
}

.add-to-cart-button:hover {
    background: #102f21;
}

.add-to-cart-button.is-added {
    color: #102f21;
    background: #dcebd3;
    box-shadow: inset 0 0 0 2px var(--brand-green), 0 0 0 4px rgba(23, 61, 44, 0.12);
    transform: translateY(-1px);
}

.product-card-actions {
    display: grid;
    grid-template-columns: minmax(96px, 0.44fr) minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    min-height: 40px;
    margin-top: auto;
}

.card-line-total {
    grid-column: 1 / -1;
    font-size: 12px;
    color: #555f52;
    text-align: right;
    padding-top: 2px;
}

.quantity-stepper {
    display: grid;
    grid-template-columns: 30px minmax(32px, 1fr) 30px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #cfd8c9;
    border-radius: 8px;
    background: #ffffff;
}

.quantity-stepper button,
.quantity-stepper input {
    min-width: 0;
    border: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    color: var(--brand-green);
    background: transparent;
}

.quantity-stepper button {
    cursor: pointer;
}

.quantity-stepper button:hover {
    color: #ffffff;
    background: var(--brand-green);
}

.quantity-stepper input {
    border-inline: 1px solid #e3e8de;
    padding: 0 3px;
}

.notify-arrival-button {
    appearance: none;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 40px;
    border: 1px solid #c7d0c0;
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    color: #435044;
    background: #ffffff;
    cursor: pointer;
}

.notify-arrival-button:hover,
.notify-arrival-button.is-sent {
    color: #ffffff;
    background: #5e6a5d;
}

.price-tier-trigger {
    appearance: none;
    display: none;
    place-items: center;
    justify-self: end;
    width: 20px;
    min-width: 20px;
    height: 20px;
    border: 1px solid #b9c6b1;
    border-radius: 50%;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    color: var(--brand-green);
    background: #ffffff;
    cursor: help;
}

body[data-payment-mode="cash"] .price-tier-trigger {
    display: inline-grid;
}

body[data-payment-mode="cash"] .price-tier-trigger[hidden] {
    display: none;
}

.cart-link span {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    min-height: 20px;
    border-radius: 10px;
    margin-left: 5px;
    padding: 2px 6px;
    color: #ffffff;
    background: var(--brand-red);
    font-size: 12px;
    line-height: 1;
    position: absolute;
    top: -7px;
    right: -6px;
}

.cart-link span[hidden] {
    display: none;
}

.price-tier-popover {
    position: absolute;
    right: 16px;
    bottom: 62px;
    left: 16px;
    z-index: 8;
    display: grid;
    gap: 9px;
    border: 1px solid #cfd8c9;
    border-radius: 8px;
    padding: 12px;
    color: var(--ink);
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(23, 61, 44, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

body[data-payment-mode="cash"] .price-line:has(.price-tier-trigger:hover)~.price-tier-popover,
body[data-payment-mode="cash"] .package-price-line:has(.price-tier-trigger:hover)~.price-tier-popover,
body[data-payment-mode="cash"] .price-tier-popover:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.price-tier-popover strong {
    font-size: 14px;
    color: var(--brand-green);
}

.price-tier-popover dl {
    display: grid;
    gap: 7px;
    margin: 0;
}

.price-tier-popover div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: baseline;
}

.price-tier-popover dt {
    font-size: 12px;
    line-height: 1.25;
    color: var(--muted);
    white-space: nowrap;
}

.price-tier-popover .tier-label-short {
    display: none;
}

.price-tier-popover dd {
    margin: 0;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .price-tier-popover .tier-label-full {
        display: none;
    }

    .price-tier-popover .tier-label-short {
        display: inline;
    }
}

.price-tiers {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid #e3e8de;
    list-style: none;
}

.price-tiers li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: baseline;
    font-size: 12px;
}

.price-tiers span {
    color: var(--muted);
}

.price-tiers strong {
    color: var(--brand-green);
}

.product-detail {
    width: min(var(--page-max), 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
    gap: 22px;
    align-items: start;
}

.product-recommendations {
    width: min(var(--page-max), 100%);
    margin: 28px auto 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.recommendation-panel h2 {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 900;
    color: var(--ink);
}

.recommendation-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.product-detail>.panel {
    border-color: rgba(23, 61, 44, 0.12);
    box-shadow: 0 18px 48px rgba(23, 61, 44, 0.08);
}

.product-gallery img {
    display: block;
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.product-gallery>img {
    aspect-ratio: 1 / 0.82;
    background: #f4f6f1;
}

.product-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.product-thumbs img {
    aspect-ratio: 1;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    transition: border-color 0.15s;
    object-fit: cover;
}

.product-thumbs img:hover {
    border-color: var(--brand-green);
}

.product-thumbs img.is-active {
    border-color: var(--brand-green);
}

.product-image-placeholder {
    display: grid;
    place-items: center;
    min-height: 280px;
    border-radius: 8px;
    color: var(--brand-green);
    background: #eef4ea;
    font-size: 28px;
    font-weight: 900;
}

.product-detail-main h1 {
    max-width: 820px;
    margin: 0;
    font-size: clamp(32px, 4vw, 58px);
    line-height: 0.98;
    letter-spacing: 0;
}

.product-lead {
    font-size: 17px;
    line-height: 1.55;
    color: var(--muted);
}

.product-missing-notice {
    display: grid;
    gap: 6px;
    margin: 18px 0;
    padding: 16px 18px;
    border: 1px solid #e8d5d5;
    border-radius: 10px;
    color: #5a2a2a;
    background: #fdf3f3;
}

.product-missing-notice strong {
    font-size: 17px;
    font-weight: 900;
}

.product-missing-notice span {
    font-size: 15px;
    line-height: 1.45;
}

.product-detail-notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0;
}

.product-detail-notes span {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #dbe6d7;
    border-radius: 8px;
    color: #143c2a;
    background: linear-gradient(135deg, #f4f8ef 0%, #ffffff 100%);
    font-size: 13px;
    font-weight: 900;
}

.variant-list {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.variant-list h2 {
    margin: 0 0 2px;
}

.variant-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(130px, 0.55fr) minmax(260px, 1fr) minmax(220px, 0.68fr);
    gap: 14px;
    align-items: stretch;
    border: 1px solid #dbe6d7;
    border-radius: 8px;
    padding: 14px;
    background: #fbfcf7;
}

.variant-row-head {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.variant-row-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.variant-row-head strong {
    min-height: 32px;
    color: var(--brand-green);
    font-size: 18px;
    line-height: 1.08;
}

.variant-row-prices {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding-top: 1px;
}

.variant-row .price-line,
.variant-row .package-price-line {
    min-height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
}

.variant-row .package-price-note {
    min-height: 16px;
}

.variant-row .price-unit-label,
.variant-row .package-price-label {
    white-space: normal;
}

.variant-row .price-unit-values,
.variant-row .package-price-values {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: 118px;
}

.variant-row .product-card-actions {
    align-self: end;
    display: grid;
    grid-template-columns: minmax(108px, 0.62fr) minmax(118px, 0.78fr);
    gap: 10px;
    margin-top: 0;
}

.variant-row .quantity-stepper button,
.variant-row .quantity-stepper input {
    min-height: 42px;
}

.variant-row .add-to-cart-button {
    min-height: 42px;
    margin-top: 0;
}

.variant-row .price-tier-popover {
    inset: auto 0 calc(100% + 10px) 0;
    max-width: 430px;
    margin-left: auto;
}

body[data-payment-mode="cash"] .variant-row .price-line:has(.price-tier-trigger:hover)~.price-tier-popover,
body[data-payment-mode="cash"] .variant-row .package-price-line:has(.price-tier-trigger:hover)~.price-tier-popover,
body[data-payment-mode="cash"] .variant-row .price-tier-popover:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.product-detail-preorder {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-left: 4px solid var(--brand-red);
    border-radius: 0 8px 8px 0;
    color: #355141;
    background: #f6f1e8;
    font-size: 14px;
    line-height: 1.45;
}

.product-detail-main .eyebrow {
    margin-bottom: 10px;
}

.cart-page {
    width: min(var(--page-max), 100%);
    margin: 0 auto;
}

.cart-hero,
.cart-items-panel,
.cart-summary {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow-soft);
}

.cart-hero {
    padding: 28px 32px;
}

.cart-hero p {
    max-width: 920px;
    margin-bottom: 0;
}

.cart-weight-notice {
    max-width: 980px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid rgba(23, 61, 44, 0.14);
    border-left: 4px solid var(--brand-green);
    border-radius: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    color: #486050;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    background: #f6fbf3;
}

.cart-weight-notice::before {
    content: "ℹ";
    flex: none;
    font-size: 14px;
    line-height: 1.4;
    color: var(--brand-green);
}

.cart-live-notice {
    border-color: rgba(23, 61, 44, 0.16);
    border-left-color: var(--brand-green);
    margin-top: 10px;
    color: #486050;
    background: #f6fbf3;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.36fr);
    gap: 18px;
    align-items: start;
    margin-top: 18px;
}

.cart-layout-checkout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.38fr);
}

.cart-items-panel,
.cart-summary,
.cart-checkout-panels {
    padding: 20px;
}

@media (min-width: 1121px) {
    .cart-summary {
        grid-column: 2;
        grid-row: 1 / span 2;
        position: sticky;
        top: 182px;
    }

    .cart-items-panel {
        grid-column: 1;
    }

    .cart-checkout-panels {
        grid-column: 1;
    }
}

.cart-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.cart-empty {
    margin: 0;
    color: var(--muted);
}

.cart-sync-note {
    margin: 0 0 14px;
    border: 1px solid rgba(198, 57, 45, 0.18);
    border-radius: 8px;
    padding: 11px 13px;
    color: var(--brand-green);
    font-size: 14px;
    font-weight: 800;
    background: #fffaf1;
}

.cart-items {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.cart-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto auto auto;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: #f8faf5;
}

.cart-row.is-unavailable {
    border-color: rgba(93, 102, 89, 0.22);
    background: #eef0eb;
    opacity: 0.84;
}

.cart-row.has-price-drop {
    border-color: rgba(31, 122, 69, 0.34);
    background: #f3fbf1;
}

.cart-row.has-package-change {
    border-color: rgba(196, 117, 36, 0.34);
    background: #fffaf0;
}

.cart-row-image {
    overflow: hidden;
    display: grid;
    place-items: center;
    width: 84px;
    aspect-ratio: 1;
    border-radius: 8px;
    background: #eef4ea;
}

.cart-row-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-row.is-unavailable .cart-row-image img {
    filter: grayscale(1);
    opacity: 0.62;
}

.cart-row-main h2 {
    margin: 0 0 4px;
    font-size: 16px;
}

.cart-row-states {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
    margin-bottom: 4px;
}

.cart-row-states:empty {
    display: none;
}

.cart-row-state {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

.cart-row-state.is-price-drop {
    color: #14623b;
    background: #dff4dc;
}

.cart-row-state.is-package-change {
    color: #7b471a;
    background: #f9e4c6;
}

.cart-row-state.is-unavailable {
    color: #6b2b23;
    background: #f5d7d1;
}

.cart-row-main p {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}

.cart-row-price-drop {
    color: #1f7a45;
    font-weight: 950;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

.cart-row-warning,
.cart-row-package-change {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 900;
}

.cart-row-warning {
    color: var(--brand-red);
}

.cart-row-package-change {
    grid-column: 2 / -1;
    border-radius: 8px;
    padding: 7px 10px;
    color: #7b471a;
    background: rgba(196, 117, 36, 0.12);
    cursor: help;
}

.cart-row-controls {
    display: grid;
    grid-template-columns: 32px 32px 32px;
    gap: 4px;
    align-items: center;
}

.cart-row-controls button,
.cart-row-remove {
    appearance: none;
    min-height: 32px;
    border: 1px solid #cfd8c9;
    border-radius: 8px;
    font: inherit;
    font-weight: 900;
    color: var(--brand-green);
    background: #ffffff;
    cursor: pointer;
}

.cart-row-controls button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.cart-row-controls strong {
    text-align: center;
}

.cart-row-total {
    min-width: 96px;
    color: var(--brand-green);
    text-align: right;
}

.cart-row-remove {
    padding: 7px 10px;
}

.cart-row-actions {
    display: contents;
}

.cart-row-gift {
    border-color: rgba(196, 117, 36, 0.34);
    background: #fffaf0;
}

.cart-row-gift .cart-row-state.is-gift {
    color: #7b471a;
    background: #f9e4c6;
}

.cart-row-gift .cart-row-total {
    color: #7b471a;
}

.cart-row-gift-note {
    font-size: 13px;
    color: var(--muted);
}

.cart-gift-icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 32px;
    background: #f9e4c6;
    border-radius: 8px;
}

.cart-summary dl {
    display: grid;
    gap: 12px;
    margin: 0 0 16px;
}

.cart-summary dl div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
}

.cart-summary dt {
    color: var(--muted);
}

.cart-summary dd {
    margin: 0;
    font-weight: 900;
    text-align: right;
}

.cart-summary-total {
    border-top: 1px solid var(--line);
    padding-top: 12px;
    font-size: 18px;
}

.cart-summary-saving {
    border: 1px solid rgba(23, 61, 44, 0.16);
    border-radius: 8px;
    padding: 12px;
    color: var(--brand-green);
    background: #eef6e9;
}

body[data-payment-mode="invoice"] .cart-summary-saving {
    display: none;
}

.cart-summary-saving dt {
    font-size: 16px;
    font-weight: 900;
    color: var(--brand-green);
}

.cart-summary-saving dd {
    font-size: 26px;
    line-height: 1;
    color: var(--brand-red);
}

.cart-summary-saving.is-label dd {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--brand-green);
}

.cart-summary-triggered {
    border: 1px solid rgba(23, 61, 44, 0.16);
    border-radius: 8px;
    padding: 12px;
    color: #5a3b00;
    background: #fff8e6;
}

.cart-summary-triggered dt {
    font-size: 16px;
    font-weight: 900;
}

.cart-summary-triggered dd {
    font-size: 26px;
    line-height: 1;
    color: var(--brand-red);
}

.cart-summary p {
    font-size: 14px;
    color: var(--muted);
}

.cart-checkout-panel {
    display: grid;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 14px;
    padding: 18px;
    background: #fbfcf8;
}

.cart-payment-options,
.cart-delivery-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cart-payment-trust {
    width: fit-content;
    border-radius: 999px;
    margin-bottom: -4px;
    padding: 7px 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, var(--brand-green), var(--brand-green-2));
    box-shadow: 0 8px 18px rgba(23, 61, 44, 0.12);
}

.cart-invoice-details {
    display: grid;
    gap: 12px;
    max-height: 0;
    overflow: hidden;
    border: 0 solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    opacity: 0;
    background: #f7faf4;
    transition: max-height 0.28s ease, padding 0.28s ease, opacity 0.2s ease, border-color 0.2s ease;
}

body[data-payment-mode="invoice"] .cart-invoice-details {
    max-height: 520px;
    border-width: 1px;
    border-color: #dfe8dc;
    padding: 14px;
    opacity: 1;
}

.cart-invoice-details p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.cart-invoice-details label {
    display: grid;
    gap: 7px;
    font-size: 14px;
    font-weight: 850;
    color: #394437;
}

.cart-delivery-options label {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 42px;
    border: 1px solid #cfd8c9;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 900;
    color: var(--brand-green);
    background: #ffffff;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.cart-delivery-options label:hover {
    border-color: var(--brand-green);
    background: #f2f7ef;
    transform: translateY(-1px);
}

.cart-delivery-options label:has(input:checked) {
    color: #ffffff;
    border-color: var(--brand-green);
    background: var(--brand-green);
}

.cart-delivery-options input {
    flex: 0 0 auto;
}

.cart-minimum-warning {
    border: 1px solid rgba(196, 61, 49, 0.24);
    border-radius: 8px;
    margin: 0;
    padding: 12px 14px;
    color: #7c2118;
    font-size: 15px;
    font-weight: 850;
    background: #fff1ee;
}

.cart-free-progress {
    border: 1px solid rgba(18, 99, 60, 0.28);
    border-radius: 8px;
    margin: 12px 0 0;
    padding: 12px 14px;
    color: #0f5132;
    font-size: 15px;
    font-weight: 850;
    background: #eaf6ee;
}

.cart-free-progress[hidden] {
    display: none;
}

.cart-delivery-fields,
.cart-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cart-delivery-fields[hidden] {
    display: none;
}

.cart-delivery-fields label,
.cart-order-form label {
    display: grid;
    gap: 7px;
    font-size: 14px;
    font-weight: 850;
    color: #394437;
}

.cart-delivery-fields label[hidden] {
    display: none;
}

.cart-address-status {
    display: block;
    min-height: 34px;
    color: #486050;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
}

.cart-address-status.is-empty {
    color: transparent;
}

.cart-delivery-result {
    display: none;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 16px;
    border: 1px solid #cfe0c2;
    border-radius: 8px;
    padding: 13px 16px;
    background: #eef6e9;
}

.cart-delivery-result.is-active {
    display: flex;
}

.cart-delivery-result-label {
    color: #394437;
    font-size: 14px;
    font-weight: 850;
}

.cart-delivery-result-sum {
    color: var(--brand-green);
    font-size: 18px;
    font-weight: 950;
    white-space: nowrap;
}

.cart-lift-label {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-self: end;
    min-height: 44px;
    border: 1px solid #cfd8c9;
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
    cursor: pointer;
    user-select: none;
}

.cart-lift-label input {
    width: auto;
}

.cart-lift-label:has(input:checked) {
    border-color: var(--brand-green);
    background: #eef6e9;
}

.cart-final-sum-label {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    border: 1px solid #dfe8dc;
    border-radius: 8px;
    padding: 12px;
    background: #f7faf4;
    cursor: pointer;
}

.cart-final-sum-label input {
    width: auto;
    margin-top: 3px;
}

.cart-delivery-fields input,
.cart-order-form input,
.cart-order-form textarea,
.cart-invoice-details textarea,
.cart-invoice-details input {
    width: 100%;
    border: 1px solid #cfd8c9;
    border-radius: 8px;
    padding: 12px;
    font: inherit;
    background: #ffffff;
}

.cart-order-form {
    display: grid;
    gap: 12px;
}

.cart-confirm-button {
    width: fit-content;
    min-width: 220px;
}

.cart-form-note {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.cart-order-success {
    border: 1px solid rgba(23, 61, 44, 0.18);
    border-radius: 8px;
    margin-top: 14px;
    padding: 14px;
    color: var(--brand-green);
    background: #eef6e9;
}

.cart-order-success strong {
    display: block;
    margin-bottom: 6px;
    color: var(--brand-green);
    font-size: 18px;
}

.cart-order-success p {
    margin: 0;
    color: #394437;
}

/* --- Блок успешного заказа (центрированный) --- */
.cart-success-block {
    max-width: 640px;
    margin: 40px auto;
    padding: 48px 32px;
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
}

.cart-success-block[hidden] {
    display: none;
}

.cart-success-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.cart-success-block h2 {
    font-size: 24px;
    color: var(--brand-green);
    margin: 0 0 12px;
}

.cart-success-number {
    font-size: 16px;
    margin: 0 0 8px;
    color: var(--text);
}

.cart-success-text {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 16px;
    line-height: 1.5;
}

.cart-success-details {
    font-size: 16px;
    margin: 0 0 20px;
    padding: 16px;
    background: #f6fbf3;
    border-radius: 8px;
    border: 1px solid rgba(23, 61, 44, 0.14);
}

.cart-success-details strong {
    color: var(--brand-green);
    font-size: 18px;
}

.cart-success-note {
    font-size: 13px;
    color: #666;
    margin: 0 0 8px;
    line-height: 1.5;
}

.cart-success-phone {
    font-size: 14px;
    margin: 16px 0 0;
}

.cart-success-phone a {
    color: var(--brand-green);
    font-weight: 700;
    text-decoration: none;
}

.cart-success-actions {
    margin-top: 24px;
}

.cart-success-actions .primary-button {
    display: inline-block;
    padding: 12px 32px;
    font-size: 15px;
}

.product-description {
    grid-column: 1 / -1;
}

.product-description img {
    max-width: min(100%, 760px);
    height: auto;
    border-radius: 8px;
}

.admin-tile {
    display: grid;
    place-items: center;
    min-height: 72px;
    font-weight: 700;
    text-align: center;
}

.catalog-layout,
.admin-layout {
    width: min(var(--page-max), 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.catalog-sidebar,
.catalog-content {
    min-width: 0;
}

.catalog-sidebar {
    position: sticky;
    top: 92px;
    align-self: start;
}

.catalog-side-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: inherit;
    overflow: hidden;
}

.catalog-menu-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    min-height: 0;
    padding: 14px;
    overflow: hidden;
}

.catalog-menu-panel>.category-list {
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 4px;
}

@media (min-width: 981px) {
    .catalog-menu-panel>.category-list {
        overflow: visible;
        max-height: none;
    }
}

.catalog-side-heading {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.catalog-side-heading span {
    font-size: 16px;
    font-weight: 900;
    color: var(--brand-green);
}

.catalog-side-heading small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.catalog-mini-cart {
    flex: 0 0 auto;
    display: grid;
    gap: 8px;
    padding: 14px;
    background: linear-gradient(135deg, #f6fbf8 0%, #ffffff 100%);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(16, 47, 33, 0.08);
}

.catalog-mini-cart-header {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
}

.catalog-mini-cart-title {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.catalog-mini-cart-total {
    color: var(--brand-green);
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.catalog-mini-cart-count {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.catalog-mini-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--brand-green) 0%, #1a4d36 100%);
    box-shadow: 0 4px 10px rgba(22, 101, 52, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.catalog-mini-cart-button:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(22, 101, 52, 0.35);
    background: linear-gradient(135deg, #1a4d36 0%, var(--brand-green) 100%);
}

.catalog-mini-cart-button:active {
    transform: translateY(0);
}

.catalog-mini-cart.is-highlighted {
    animation: mini-cart-pulse 1.2s ease;
}

.catalog-mini-cart-mobile {
    display: none;
}

.catalog-filters-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.catalog-filters-panel .catalog-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.catalog-filter-reset {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-green);
}

.catalog-filter-reset:hover {
    text-decoration: underline;
}

.catalog-filter-form {
    display: grid;
    gap: 18px;
}

.filter-group {
    display: grid;
    gap: 6px;
}

.filter-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
}

.filter-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.filter-values span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
}

.filter-values span > span {
    font-weight: 800;
    color: var(--brand-green);
}

.filter-slider {
    position: relative;
    height: 24px;
    margin: 4px 0;
}

.filter-slider-track,
.filter-slider-fill {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 5px;
    border-radius: 3px;
}

.filter-slider-track {
    width: 100%;
    background: var(--line);
}

.filter-slider-fill {
    background: var(--brand-green);
}

.filter-slider input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.filter-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 5px;
    background: transparent;
}

.filter-slider input[type="range"]::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -7px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--brand-green);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    cursor: grab;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.filter-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.filter-slider input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.filter-slider input[type="range"]::-moz-range-track {
    height: 5px;
    background: transparent;
}

.filter-slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--brand-green);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    cursor: grab;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.filter-slider input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.filter-slider input[type="range"]::-moz-range-thumb:active {
    cursor: grabbing;
}

.filter-extremes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
}

.catalog-filter-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 900;
    color: #ffffff;
    background: var(--brand-green);
    cursor: pointer;
}

.catalog-filter-submit:hover {
    background: #102f21;
}

.filter-checkbox {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 32px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.filter-checkbox input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand-green);
    cursor: pointer;
}

.catalog-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.catalog-filters-toggle,
.catalog-categories-toggle {
    display: none;
}

.catalog-mobile-actions {
    display: none;
}

.catalog-filters-close {
    display: none;
}

.catalog-filters-offcanvas {
    display: block;
}

.catalog-categories-offcanvas {
    display: none;
}

.catalog-filters-backdrop,
.catalog-categories-backdrop {
    display: none;
}

.catalog-menu-desktop {
    display: contents;
}

.sticky-panel {
    position: sticky;
    top: 98px;
    max-height: calc(100vh - 116px);
    overflow: auto;
}

.catalog-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 9px 18px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow-soft);
}

.catalog-heading h1 {
    margin: 0;
    font-size: clamp(14px, 1.4vw, 17px);
    font-weight: 700;
    line-height: 1.2;
}

.catalog-heading .eyebrow {
    flex-shrink: 0;
    margin: 0;
    font-size: 10px;
    color: var(--muted);
}

.catalog-heading-lead {
    max-width: 820px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
}

.payment-benefit-banner {
    display: flex;
    min-height: 66px;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid rgba(25, 91, 63, 0.16);
    border-radius: 8px;
    margin-bottom: 18px;
    padding: 14px 18px;
    background:
        radial-gradient(circle at 94% 16%, rgba(207, 56, 45, 0.12), transparent 26%),
        linear-gradient(135deg, #fffdf8 0%, #eef5ea 100%);
    box-shadow: var(--shadow-soft);
}

.qr-benefit-banner,
.invoice-benefit-banner {
    display: none;
}

body[data-payment-mode="qr"] .cash-benefit-banner,
body[data-payment-mode="invoice"] .cash-benefit-banner {
    display: none;
}

body[data-payment-mode="qr"] .qr-benefit-banner,
body[data-payment-mode="invoice"] .invoice-benefit-banner {
    display: flex;
}

.qr-benefit-banner {
    background:
        radial-gradient(circle at 92% 18%, rgba(25, 91, 63, 0.14), transparent 28%),
        linear-gradient(135deg, #fffdf8 0%, #eef6f4 100%);
}

.invoice-benefit-banner {
    background:
        radial-gradient(circle at 92% 18%, rgba(23, 61, 44, 0.12), transparent 28%),
        linear-gradient(135deg, #fffdf8 0%, #f4f1ea 100%);
}

.cash-benefit-copy h2 {
    max-width: 720px;
    margin: 0 0 10px;
    color: var(--brand-green);
    font-size: clamp(24px, 3vw, 38px);
}

.cash-benefit-copy p:not(.eyebrow) {
    max-width: 660px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

.cash-receipt {
    position: relative;
    display: grid;
    gap: 14px;
    border: 1px solid #e2dfd2;
    border-radius: 8px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(22, 60, 43, 0.13);
}

.cash-receipt::before,
.cash-receipt::after {
    position: absolute;
    right: 18px;
    left: 18px;
    height: 1px;
    background-image: linear-gradient(90deg, #d7ded2 50%, transparent 0);
    background-size: 10px 1px;
    content: "";
}

.cash-receipt::before {
    top: 54px;
}

.cash-receipt::after {
    bottom: 44px;
}

.cash-receipt-top {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 10px;
}

.cash-receipt-top span,
.cash-receipt small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.cash-receipt-top strong {
    color: var(--brand-green);
    font-size: 18px;
}

.cash-receipt dl {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 8px 0 10px;
}

.cash-receipt dl div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
}

.cash-receipt dt {
    color: var(--ink);
    font-weight: 850;
}

.cash-receipt dd {
    margin: 0;
    border-radius: 999px;
    padding: 4px 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 950;
    background: var(--brand-red);
}

.cash-receipt small {
    justify-self: center;
    padding-top: 8px;
    text-align: center;
}

.payment-benefit-card {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 190px;
    border: 1px solid #e2dfd2;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(22, 60, 43, 0.13);
}

.payment-benefit-card span,
.payment-benefit-card small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.payment-benefit-card strong {
    color: var(--brand-green);
    font-size: clamp(46px, 6vw, 72px);
    line-height: 0.95;
}

.invoice-benefit-banner .payment-benefit-card strong {
    max-width: 220px;
    color: var(--brand-green);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.02;
}

.payment-benefit-card p {
    margin: 0;
    color: var(--ink);
    font-weight: 900;
}

.catalog-seo-panel {
    margin-top: 26px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px 22px;
    color: #536055;
    background: rgba(255, 254, 250, 0.72);
}

.catalog-seo-panel h2 {
    margin-bottom: 10px;
    color: var(--brand-green);
    font-size: 22px;
}

.catalog-seo-content {
    display: grid;
    gap: 10px;
    font-size: 14px;
    line-height: 1.65;
}

.catalog-seo-content p,
.catalog-seo-content ul,
.catalog-seo-content ol {
    margin: 0;
}

.catalog-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.catalog-count-panel {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 14px;
    padding: 12px 14px;
    color: var(--muted);
    background: var(--paper);
    box-shadow: var(--shadow-soft);
}

.catalog-count-panel span {
    font-weight: 800;
}

.catalog-count-panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 900;
    color: #ffffff;
    background: var(--brand-green);
}

.catalog-count-panel a:hover {
    text-decoration: none;
    background: #102f21;
}

.catalog-count-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.catalog-sort {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.catalog-sort-select {
    min-height: 34px;
    padding: 6px 28px 6px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    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='%23123f2b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.catalog-sort-select:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 2px rgba(18, 63, 43, 0.12);
}

.catalog-search-result-panel {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border: 1px solid rgba(23, 61, 44, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(23, 61, 44, 0.08), rgba(196, 61, 49, 0.05)),
        #ffffff;
    box-shadow: 0 16px 36px rgba(23, 61, 44, 0.08);
}

.catalog-search-result-panel h2 {
    margin: 0;
    color: var(--brand-green);
    font-size: clamp(22px, 2.3vw, 32px);
}

.catalog-search-result-panel p:last-child {
    margin: 6px 0 0;
    color: var(--muted);
}

.catalog-search-result-panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    color: #ffffff;
    background: var(--brand-green);
    font-weight: 900;
    white-space: nowrap;
}

.catalog-search-result-panel a:hover {
    text-decoration: none;
    background: #102f21;
}

/* === Search result usability: compact bar, no duplicate headings === */
.is-search-page .catalog-search-result-panel {
    gap: 12px 18px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.search-result-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    min-width: 0;
}

.search-result-summary h2 {
    margin: 0;
    font-size: clamp(15px, 1.6vw, 20px);
    font-weight: 800;
    color: var(--brand-green);
}

.search-result-count {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.search-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.search-result-actions a {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.search-result-more {
    color: #ffffff;
    background: var(--brand-red);
}

.search-result-more:hover {
    background: #a82a20;
}

.search-empty-panel {
    display: grid;
    gap: 10px;
    padding: 18px 20px;
}

.search-empty-panel p {
    margin: 0;
}

.search-empty-panel ul {
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
}

.search-empty-panel li + li {
    margin-top: 4px;
}

.search-empty-reset {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 900;
    color: #ffffff;
    background: var(--brand-green);
}

.search-empty-reset:hover {
    text-decoration: none;
    background: #102f21;
}

/* === Compact graphical catalog payment banners === */

.catalog-payment-banners {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.catalog-payment-banners .payment-benefit-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 0 16px 0 0;
    margin-bottom: 0;
    min-height: 54px;
    height: 54px;
    border-left: 3px solid var(--brand-green);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.cash-benefit-banner.payment-benefit-banner {
    border-left-color: var(--brand-green);
}

.qr-benefit-banner.payment-benefit-banner {
    border-left-color: var(--brand-green-2);
    background:
        radial-gradient(ellipse at 96% 50%, rgba(25, 91, 63, 0.14), transparent 36%),
        linear-gradient(135deg, #fffdf8 0%, #eef6f4 100%);
}

.invoice-benefit-banner.payment-benefit-banner {
    border-left-color: #7a6a3a;
    background:
        radial-gradient(ellipse at 96% 50%, rgba(120, 100, 40, 0.12), transparent 36%),
        linear-gradient(135deg, #fffdf8 0%, #f4f1ea 100%);
}

.cash-benefit-banner.payment-benefit-banner {
    background:
        radial-gradient(ellipse at 96% 50%, rgba(196, 61, 49, 0.13), transparent 36%),
        linear-gradient(135deg, #fffdf8 0%, #eef5ea 100%);
}

/* Left accent band */
.catalog-payment-banners .payment-benefit-banner::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 44px;
    align-self: stretch;
    background: linear-gradient(180deg, rgba(23, 61, 44, 0.07) 0%, rgba(23, 61, 44, 0.03) 100%);
    border-right: 1px solid rgba(23, 61, 44, 0.08);
    margin-right: 14px;
}

.cash-benefit-banner.payment-benefit-banner::before {
    background: linear-gradient(180deg, rgba(196, 61, 49, 0.09), rgba(196, 61, 49, 0.03));
    border-right-color: rgba(196, 61, 49, 0.12);
    background-image:
        linear-gradient(180deg, rgba(196, 61, 49, 0.09), rgba(196, 61, 49, 0.03)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c43d31' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='22' height='13' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M5 12h1M18 12h1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px, 20px 20px;
}

.qr-benefit-banner.payment-benefit-banner::before {
    background-image:
        linear-gradient(180deg, rgba(23, 61, 44, 0.07), rgba(23, 61, 44, 0.03)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23173d2c' stroke-width='1.4'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Cpath d='M14 14h1v1h-1zm3 0h1v1h-1zm-3 3h1v1h-1zm3 0h1v4h-4v-1h3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px, 20px 20px;
}

.invoice-benefit-banner.payment-benefit-banner::before {
    background-image:
        linear-gradient(180deg, rgba(120, 100, 40, 0.08), rgba(120, 100, 40, 0.02)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23635030' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='12' y2='17'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px, 20px 20px;
}

.invoice-benefit-banner.payment-benefit-banner::after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 56px;
    height: 38px;
}

/* Label */
.cbanner-label {
    display: flex;
    flex: 1;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0 12px;
    min-width: 0;
    overflow: hidden;
}

.cbanner-label .eyebrow {
    flex: 0 0 190px;
    margin: 0;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--muted);
    opacity: 1;
    white-space: nowrap;
}

.cbanner-label h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    color: #0e2a1c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invoice-benefit-banner .cbanner-label h2 {
    color: #3d2e0d;
}

/* Tier pills (cash banner) */
.cbanner-tiers {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.cbanner-tiers>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(196, 61, 49, 0.07);
    border: 1px solid rgba(196, 61, 49, 0.18);
    line-height: 1;
}

.cbanner-tiers span {
    font-size: 9px;
    color: var(--muted);
    opacity: 1;
    letter-spacing: 0.03em;
}

.cbanner-tiers strong {
    font-size: 12px;
    font-weight: 900;
    color: var(--brand-red);
}

/* Badge (qr / invoice banners) */
.cbanner-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 38px;
    border-radius: 7px;
    background: rgba(23, 61, 44, 0.08);
    border: 1px solid rgba(23, 61, 44, 0.15);
    line-height: 1;
    gap: 2px;
}

.cbanner-badge strong {
    font-size: 13px;
    font-weight: 900;
    color: var(--brand-green);
}

.cbanner-badge span {
    font-size: 9px;
    color: var(--muted);
    opacity: 1;
    letter-spacing: 0.04em;
}

/* Visibility */
.catalog-payment-banners .qr-benefit-banner,
.catalog-payment-banners .invoice-benefit-banner {
    display: none;
}

body[data-payment-mode="qr"] .catalog-payment-banners .qr-benefit-banner {
    display: flex;
}

body[data-payment-mode="invoice"] .catalog-payment-banners .invoice-benefit-banner {
    display: flex;
}

body[data-payment-mode="qr"] .catalog-payment-banners .cash-benefit-banner,
body[data-payment-mode="invoice"] .catalog-payment-banners .cash-benefit-banner {
    display: none;
}

.catalog-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    margin-top: 18px;
}

.catalog-pagination a,
.catalog-pagination .pagination-page {
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    min-height: 36px;
    border: 1px solid #cfd8c9;
    border-radius: 8px;
    padding: 6px 9px;
    font-weight: 900;
    color: var(--brand-green);
    background: #ffffff;
}

.catalog-pagination a:hover,
.catalog-pagination .pagination-page.is-current {
    color: #ffffff;
    text-decoration: none;
    background: var(--brand-green);
}

.catalog-pagination .pagination-prev,
.catalog-pagination .pagination-next {
    padding: 6px 14px;
}

.catalog-pagination .pagination-ellipsis {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    min-height: 36px;
    color: var(--muted);
    font-weight: 900;
}

.text-page {
    width: min(var(--page-max), 100%);
    margin: 0 auto;
}

.info-page {
    width: min(var(--page-max), 100%);
    display: grid;
    gap: 18px;
    margin: 0 auto;
}

.info-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 28px;
    align-items: center;
    border-radius: 8px;
    padding: 38px;
    color: #ffffff;
    background: var(--brand-green);
    box-shadow: 0 18px 44px rgba(22, 60, 43, 0.16);
}

.info-hero h1 {
    margin-bottom: 14px;
    color: #ffffff;
    font-size: 48px;
}

.info-hero p {
    max-width: 760px;
    margin: 0;
}

.info-hero .eyebrow {
    color: #d8eadc;
}

.payment-hero {
    background: #263b55;
}

.payment-hero .eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

.payment-hero h1,
.payment-hero p {
    color: #ffffff;
}

.payment-hero .info-visual span {
    display: none;
}

.payment-hero .info-visual small {
    color: rgba(255, 255, 255, 0.8);
}

.delivery-hero .eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

.delivery-hero h1,
.delivery-hero p {
    color: #ffffff;
}

.delivery-hero .info-visual span {
    display: none;
}

.delivery-hero .info-visual small {
    color: rgba(255, 255, 255, 0.8);
}

.contacts-hero {
    background: #2b5e4b;
}

.contacts-hero .eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

.contacts-hero h1,
.contacts-hero p {
    color: #ffffff;
}

.contacts-hero .info-visual small {
    color: rgba(255, 255, 255, 0.8);
}

.contacts-hero .info-visual span {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50% 50% 50% 0;
    background: #ffffff;
    transform: rotate(-45deg);
    box-shadow: none;
    margin-bottom: 24px;
    position: relative;
}

.contacts-hero .info-visual span::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #2b5e4b;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.info-visual {
    display: grid;
    place-items: center;
    min-height: 210px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
}

.info-visual span {
    display: block;
    width: 82px;
    height: 52px;
    border: 4px solid #ffffff;
    border-radius: 8px;
    box-shadow: 32px 36px 0 -18px #ffffff, -34px 34px 0 -20px #ffffff;
}

.info-visual strong {
    display: block;
    margin-top: 18px;
    font-size: 32px;
    line-height: 1;
}

.info-visual small {
    display: block;
    margin-top: 6px;
    color: #dfe8dc;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.info-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
    background: var(--paper);
    box-shadow: var(--shadow-soft);
}

.info-card.compact {
    min-height: 190px;
}

.info-card p {
    margin: 0 0 12px;
    font-size: 16px;
}

.info-card p:last-child {
    margin-bottom: 0;
}

.info-card-visual {
    height: 118px;
    margin-bottom: 18px;
    border-radius: 8px;
    background: #eef4ea;
}

.delivery-city {
    background:
        linear-gradient(90deg, rgba(29, 93, 59, 0.2), rgba(29, 93, 59, 0.04)),
        repeating-linear-gradient(90deg, #dfe8dc 0 22px, transparent 22px 44px);
}

.delivery-region {
    background:
        linear-gradient(135deg, rgba(38, 59, 85, 0.2), rgba(38, 59, 85, 0.04)),
        repeating-linear-gradient(135deg, #dfe8dc 0 20px, transparent 20px 46px);
}

.payment-cash {
    background:
        linear-gradient(90deg, rgba(29, 93, 59, 0.16), rgba(29, 93, 59, 0.04)),
        radial-gradient(circle at 22% 50%, var(--brand-green) 0 24px, transparent 25px);
}

.payment-scale {
    background:
        linear-gradient(90deg, rgba(77, 57, 42, 0.16), rgba(77, 57, 42, 0.04)),
        linear-gradient(#dfe8dc 0 0) center 68% / 58% 10px no-repeat;
}

.clean-list {
    display: grid;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.clean-list li {
    position: relative;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.45;
}

.clean-list li::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-red);
}

.delivery-calculator {
    display: grid;
    gap: 18px;
}

.calculator-note {
    max-width: 260px;
    font-size: 13px;
    line-height: 1.45;
    color: #687466;
    text-align: right;
}

.calculator-form {
    display: grid;
    grid-template-columns: 1.4fr 0.75fr 1fr 0.6fr;
    gap: 14px;
    align-items: end;
}

.calculator-form label {
    display: grid;
    gap: 7px;
    font-size: 14px;
    font-weight: 800;
    color: #394437;
}

.calculator-form input,
.calculator-form select {
    width: 100%;
    border: 1px solid #cfd8c9;
    border-radius: 8px;
    padding: 12px;
    font: inherit;
    background: #ffffff;
}

.calculator-form .checkbox-label {
    align-self: center;
    margin-top: 24px;
}

.calculator-result {
    display: grid;
    gap: 5px;
    border-radius: 8px;
    padding: 18px;
    color: #ffffff;
    background: var(--brand-green);
}

.calculator-result strong {
    font-size: 22px;
}

.calculator-result span {
    line-height: 1.45;
    color: #d8eadc;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.contact-card.wide {
    grid-column: 1 / -1;
}

.contact-list {
    display: grid;
    gap: 16px;
    margin: 0;
}

.contact-list div {
    display: grid;
    gap: 4px;
}

.contact-list dt {
    color: var(--muted);
}

.contact-list dd {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
}

.route-card {
    display: grid;
    gap: 18px;
}

.route-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 20px;
    align-items: stretch;
}

.map-frame {
    overflow: hidden;
    min-height: 360px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #eef4ea;
}

.map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 0;
}

.route-steps {
    display: grid;
    align-content: start;
    gap: 16px;
    border-radius: 8px;
    padding: 22px;
    background: #f7f8f4;
}

.route-steps ol {
    display: grid;
    gap: 12px;
    margin: 0;
    padding-left: 20px;
}

.route-steps li {
    font-size: 16px;
    line-height: 1.45;
}

.text-page-header,
.text-page-body {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow-soft);
}

.text-page-header {
    padding: 30px;
    margin-bottom: 18px;
}

.text-page-header h1 {
    margin-bottom: 12px;
}

.text-page-header p:last-child {
    max-width: 880px;
    margin-bottom: 0;
}

.text-page-body {
    display: grid;
    gap: 0;
    padding: 8px 30px 30px;
}

.text-page-body section,
.text-page-body>p {
    max-width: 920px;
}

.text-page-body section {
    padding: 24px 0;
    border-bottom: 1px solid #e5eadf;
}

.text-page-body section:last-of-type {
    border-bottom: 0;
}

.text-page-body p {
    margin: 0 0 12px;
    font-size: 16px;
}

.text-page-body p:last-child {
    margin-bottom: 0;
}

.notice-panel {
    margin-top: 10px;
    border: 1px solid #ead8c4 !important;
    border-radius: 8px;
    padding: 22px !important;
    background: #fffaf2;
}

.thanks-text {
    margin: 22px 0 0 !important;
    font-weight: 800;
    color: var(--brand-green);
}



.site-footer {
    margin-top: 28px;
    color: #dfe8dc;
    background: linear-gradient(180deg, #17241c, #101a14);
}

.site-footer-inner {
    width: min(var(--page-max), calc(100% - (var(--page-gap) * 2)));
    display: grid;
    grid-template-columns: 1.15fr 1.25fr 1fr 1.2fr;
    gap: 34px;
    margin: 0 auto;
    padding: 42px 0 34px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--paper);
}

.footer-logo img,
.footer-logo svg {
    display: block;
    width: 190px;
    height: auto;
}

.footer-logo span {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
}

.footer-brand p,
.footer-column p {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: #b8c5b5;
}

.footer-column h2 {
    margin: 0 0 14px;
    font-size: 15px;
    color: #ffffff;
}

.footer-contacts {
    display: grid;
    gap: 12px;
    margin: 0;
}

.footer-contacts div {
    display: grid;
    gap: 3px;
}

.footer-contacts dt {
    font-size: 12px;
    color: #91a08c;
}

.footer-contacts dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

.site-footer a {
    color: #ffffff;
}

.site-footer a:hover {
    color: #d8eadc;
}

.footer-links {
    display: grid;
    align-content: start;
    gap: 9px;
}

.footer-links a {
    font-size: 14px;
}

.footer-action {
    display: inline-flex;
    width: fit-content;
    margin-top: 18px;
    border: 1px solid #526457;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 800;
}

.footer-action:hover {
    border-color: #d8eadc;
    text-decoration: none;
}

.site-footer-bottom {
    border-top: 1px solid #2b362f;
    padding: 16px 24px 18px;
    text-align: center;
}

.site-footer-bottom p {
    max-width: var(--page-max);
    margin: 6px auto 0;
    font-size: 12px;
    line-height: 1.5;
    color: #9eaa9a;
}

.site-footer-bottom p:first-child {
    margin-top: 0;
    color: #c7d2c3;
}

@media (max-width: 1180px) {
    .site-topbar-inner {
        grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
    }

    .topbar-contacts {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 18px;
        justify-content: flex-end;
    }

    .home-banners {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-value-system,
    .audience-system {
        grid-template-columns: 1fr;
    }

    .home-value-head {
        padding: 6px;
    }

    .audience-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .warehouse-showcase {
        grid-template-columns: 1fr;
    }

    .warehouse-showcase .storage-status {
        grid-column: 1;
    }

    .storage-status {
        grid-template-columns: 1fr;
    }

    .warehouse-showcase .storage-status {
        grid-template-columns: 1fr;
    }

    .warehouse-photo-grid {
        grid-template-columns: 1fr;
    }

    .calculator-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {

    .catalog-layout,
    .admin-layout,
    .info-hero,
    .info-grid,
    .info-grid.three,
    .contact-grid,
    .route-layout,
    .product-detail,
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .product-detail-notes {
        grid-template-columns: 1fr;
    }

    .product-gallery>img {
        aspect-ratio: 1 / 1;
    }

    .product-thumbs {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    }

    .recommendation-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 10px;
    }

    .recommendation-panel h2 {
        font-size: 18px;
    }

    .sticky-panel {
        position: static;
        max-height: none;
    }

    .cart-summary {
        position: static;
    }

    .catalog-sidebar {
        position: static;
        max-height: none;
    }

    .catalog-side-stack {
        max-height: none;
    }

    .catalog-menu-panel>.category-list {
        max-height: 460px;
        overflow: auto;
    }

    .catalog-menu-desktop {
        display: none;
    }

    .catalog-mobile-actions {
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 14px;
        padding: 10px 0;
        background: #f7f8f5;
        border-bottom: 1px solid #e5ebe2;
    }

    .catalog-categories-toggle {
        flex: 1 1 auto;
        display: inline-flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        margin-bottom: 0;
        padding: 10px 16px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #ffffff;
        color: var(--brand-green);
        font-size: 16px;
        font-weight: 900;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(18, 63, 43, 0.08);
    }

    .catalog-count-panel {
        display: none;
    }

    .is-catalog-like-page .category-mega-bar {
        display: none;
    }

    .catalog-sort {
        display: none;
    }

    .catalog-filters-toggle {
        display: none;
    }

    .catalog-categories-offcanvas {
        position: fixed;
        inset: 0;
        z-index: 1100;
        display: flex;
        visibility: hidden;
        pointer-events: none;
    }

    .catalog-categories-offcanvas.is-open {
        visibility: visible;
        pointer-events: auto;
    }

    .catalog-categories-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .catalog-categories-offcanvas.is-open .catalog-categories-backdrop {
        opacity: 1;
    }

    .catalog-categories-panel {
        position: relative;
        z-index: 1;
        width: min(340px, 86vw);
        height: 100vh;
        margin-left: auto;
        border-radius: 0;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.25s ease;
    }

    .catalog-categories-offcanvas.is-open .catalog-categories-panel {
        transform: translateX(0);
    }

    body.is-categories-open {
        overflow: hidden;
    }

    .catalog-filters-badge {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--brand-red);
    }

    .catalog-filters-offcanvas {
        display: none;
    }

    .catalog-filters-panel {
        position: relative;
        z-index: 1;
        width: min(340px, 86vw);
        height: 100vh;
        margin-left: auto;
        border-radius: 0;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.25s ease;
    }

    .catalog-filters-offcanvas.is-open .catalog-filters-panel {
        transform: translateX(0);
    }

    .catalog-filters-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--muted);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }

    body.is-filters-open {
        overflow: hidden;
    }

    .category-list a,
    .category-details summary {
        min-height: 44px;
    }

    .category-list.depth-0>.category-special-link>a {
        min-height: 40px;
        padding: 6px 10px;
        font-size: 13px;
    }

    .category-icon {
        width: 34px;
        height: 34px;
    }

    .category-icon svg {
        width: 22px;
        height: 22px;
    }

    /* На поиске на планшетах и мобильных сайдбар не нужен — пользователь ищет товар */
    .is-search-page {
        grid-template-columns: 1fr;
    }

    .is-search-page .catalog-sidebar {
        display: none;
    }

    .is-search-page .catalog-content {
        min-width: 0;
    }

    /* Сайдбарная мини-корзина скрыта — вместо неё фиксированная нижняя панель */
    .catalog-sidebar .catalog-mini-cart {
        display: none;
    }

    .catalog-mini-cart-mobile {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 10px 16px;
        background: #ffffff;
        border-top: 1px solid var(--line);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    }

    @media (max-width: 760px) {
        .catalog-mini-cart-mobile {
            bottom: calc(62px + env(safe-area-inset-bottom, 0px));
        }

        .catalog-layout {
            padding-bottom: 132px;
        }
    }

    .catalog-mini-cart-mobile-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: min(var(--page-max), 100%);
        margin: 0 auto;
    }

    .catalog-mini-cart-mobile-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .catalog-mini-cart-mobile-total {
        color: var(--brand-green);
        font-size: 18px;
        font-weight: 900;
        line-height: 1;
    }

    .catalog-mini-cart-mobile-count {
        color: var(--muted);
        font-size: 12px;
    }

    .catalog-mini-cart-mobile-button {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 22px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 900;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        background: linear-gradient(135deg, var(--brand-green) 0%, #1a4d36 100%);
        box-shadow: 0 4px 10px rgba(22, 101, 52, 0.25);
    }

    .catalog-mini-cart-mobile-button:hover {
        text-decoration: none;
        background: #102f21;
    }

    .catalog-layout {
        padding-bottom: 76px;
    }

    .info-visual {
        min-height: 170px;
    }

    .home-hero {
        grid-template-columns: 1fr;
    }

    .home-benefit-grid {
        grid-template-columns: 1fr;
    }

    /* На мобильных карточка с бесплатной доставкой идёт первой */
    .home-benefit-card {
        order: 2;
    }

    .home-benefit-card.is-delivery {
        order: 1;
    }

    .home-benefit-card.is-wide {
        min-height: 360px;
    }

    .audience-grid {
        grid-template-columns: 1fr;
    }

    .audience-card {
        min-height: 320px;
    }

    .home-carousel-copy {
        max-width: 86vw;
    }

    .payment-benefit-banner {
        flex-wrap: nowrap;
    }

    .product-detail-notes {
        grid-template-columns: 1fr;
    }

    .hero-media {
        min-height: 240px;
    }

    .cart-checkout-panels {
        display: contents;
    }

    .cart-checkout-panels>.cart-checkout-panel {
        margin-top: 0;
    }

}

@media (max-width: 760px) {
    :root {
        --page-gap: 16px;
    }

    .site-utility {
        width: calc(100% - (var(--page-gap) * 2));
        display: grid;
        margin-top: 8px;
    }

    .site-topbar-inner,
    .home-banners,
    .promo-strip,
    .price-request-panel,
    .home-value-system,
    .home-benefit-grid,
    .audience-system,
    .audience-grid,
    .warehouse-photo-grid,
    .home-delivery-separator,
    .wishlist-request-panel,
    .wishlist-request-form {
        grid-template-columns: 1fr;
    }

    .home-catalog-heading,
    .home-product-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-product-section-actions {
        width: 100%;
        justify-content: space-between;
    }

    .home-products-strip {
        grid-auto-columns: minmax(210px, 78vw);
    }

    .price-request-cover {
        position: static;
        margin-top: 16px;
        margin-bottom: 10px;
        max-width: none;
        min-height: 0;
    }

    .price-request-form {
        grid-template-columns: 1fr;
    }

    .price-request-form fieldset {
        grid-template-columns: 1fr;
    }

    .site-topbar-inner {
        width: calc(100% - (var(--page-gap) * 2));
        justify-items: start;
        gap: 12px;
    }

    .price-mode-inner {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .price-mode-inner>span {
        justify-self: center;
        text-align: center;
    }

    .price-mode-options {
        justify-content: center;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .price-mode-options::-webkit-scrollbar {
        display: none;
    }

    .brand-link {
        width: 100%;
        justify-content: flex-start;
    }

    .brand-link img,
    .brand-link svg {
        width: min(180px, 46vw);
    }

    .smart-search-form,
    .smart-search-form p {
        grid-template-columns: 1fr;
        grid-column: 1;
    }

    .smart-search-control {
        grid-template-columns: minmax(0, 1fr) 76px;
    }

    .smart-search-submit {
        grid-column: 1 / -1;
    }

    .catalog-search-result-panel {
        display: grid;
        gap: 10px;
        padding: 12px 14px;
    }

    .catalog-search-result-panel a {
        width: 100%;
    }

    .search-result-summary h2 {
        font-size: 16px;
    }

    .search-result-actions {
        width: 100%;
    }

    .search-result-actions a {
        flex: 1 1 auto;
        justify-content: center;
    }

    .search-result-actions .catalog-sort,
    .search-result-actions .catalog-sort-select {
        width: 100%;
    }

    .catalog-count-panel {
        flex-wrap: wrap;
        gap: 10px;
    }

    .catalog-count-actions {
        width: 100%;
        justify-content: space-between;
    }

    .catalog-count-actions .catalog-sort,
    .catalog-count-actions .catalog-sort-select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .category-mega-bar {
        position: relative;
    }

    .category-mega-inner {
        width: calc(100% - (var(--page-gap) * 2));
        justify-content: flex-start;
    }

    .mega-root {
        min-width: 0;
        max-width: 180px;
        min-height: 36px;
        font-size: 12px;
    }

    .mega-submenu {
        width: min(320px, calc(100vw - 32px));
        columns: 1;
    }

    .mega-submenu.depth-2,
    .mega-submenu.depth-3 {
        position: static;
        width: 100%;
        max-height: none;
        margin-top: 4px;
        columns: 1;
        box-shadow: none;
    }

    .main-nav {
        justify-content: flex-start;
    }

    .topbar-contacts {
        display: grid;
        justify-items: start;
    }

    .hero-lead {
        font-size: 20px;
    }

    .home-hero {
        padding: 28px;
        min-height: auto;
    }

    .home-value-system,
    .audience-system {
        padding: 18px;
    }

    .home-value-head {
        padding: 4px;
    }

    .home-value-head h1 {
        font-size: 42px;
    }

    .home-value-head>p {
        font-size: 20px;
    }

    .home-benefit-card,
    .home-benefit-card.is-wide,
    .audience-card {
        min-height: 300px;
    }

    .home-benefit-card h2,
    .audience-heading h2 {
        font-size: 30px;
    }

    .home-carousel {
        min-height: 520px;
    }

    .home-carousel-slide {
        align-items: end;
        padding: 28px 22px 74px;
    }

    .home-carousel-copy {
        max-width: 100%;
    }

    .home-carousel-copy h1,
    .home-carousel-copy h2 {
        font-size: 38px;
        line-height: 1;
    }

    .home-carousel-copy p {
        font-size: 18px;
    }

    .home-carousel-dots {
        left: 22px;
        bottom: 24px;
    }

    .warehouse-copy {
        padding: 22px;
    }

    .warehouse-photo-card.large {
        min-height: 260px;
    }

    .hero-media {
        min-height: 190px;
    }

    .home-banner {
        min-height: 212px;
    }

    .home-hero h1 {
        font-size: 40px;
    }

    .settings-list div {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .section-heading {
        display: grid;
    }

    .content-grid,
    .calculator-form,
    .cart-delivery-fields,
    .cart-form-grid {
        grid-template-columns: 1fr;
    }

    .info-hero {
        padding: 28px;
    }

    .info-hero h1 {
        font-size: 38px;
    }

    .info-visual {
        min-height: 160px;
    }

    .calculator-note {
        max-width: none;
        text-align: left;
    }

    .site-footer-inner {
        width: calc(100% - (var(--page-gap) * 2));
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .text-page-header,
    .text-page-body,
    .info-card,
    .catalog-heading,
    .panel {
        padding: 18px;
    }

    .cart-hero,
    .cart-items-panel,
    .cart-summary {
        padding: 18px;
    }

    .cart-row {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .variant-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .variant-row-head strong {
        min-height: 0;
    }

    .variant-row .price-unit-values,
    .variant-row .package-price-values {
        justify-content: flex-start;
        min-width: 0;
    }

    .variant-row .price-tier-popover {
        inset: auto 0 calc(100% + 8px) 0;
        max-width: none;
    }

    .variant-row .product-card-actions {
        grid-template-columns: 1fr;
    }

    .product-card-actions {
        grid-template-columns: 1fr;
        min-height: 96px;
    }

    .variant-row b {
        text-align: left;
    }

    .cart-row-image {
        width: 70px;
    }

    .cart-row-actions {
        display: flex;
        grid-column: 2;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .cart-row-actions > * {
        flex: 0 0 auto;
    }

    .cart-row-actions .cart-row-total {
        margin-left: auto;
        min-width: auto;
        text-align: left;
    }

    .cart-row-controls {
        grid-template-columns: 36px 36px 36px;
        gap: 4px;
    }

    .cart-row-controls button,
    .cart-row-remove {
        min-height: 36px;
        min-width: 36px;
        padding: 6px 8px;
    }

    .cart-row-total {
        min-width: auto;
        font-size: 15px;
    }

    .cart-row-package-change {
        grid-column: 1 / -1;
    }

    .cart-payment-options,
    .cart-delivery-options {
        display: grid;
    }

    .cart-confirm-button {
        width: 100%;
        min-width: 0;
    }
}

.cart-confirm-button {
    position: relative;
    min-width: 240px;
    min-height: 48px;
}

.cart-confirm-button [data-cart-submit-text],
.cart-confirm-button [data-cart-submit-spinner] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cart-confirm-button [hidden] {
    display: none;
}

/* Корзина: inline-ошибки, детали адреса, доступность */
.cart-form-errors {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    border: 1px solid rgba(198, 57, 45, 0.22);
    border-radius: 10px;
    padding: 12px 14px;
    color: #7b231c;
    background: #fff0ee;
}

.cart-form-errors:empty,
.cart-form-errors[hidden] {
    display: none;
}

.cart-form-errors p {
    margin: 0;
    font-weight: 800;
}

.cart-order-form .is-invalid,
.cart-delivery-fields .is-invalid {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 3px rgba(198, 57, 45, 0.14);
}

.cart-address-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.cart-address-details label {
    margin: 0;
}

.cart-address-details label span {
    font-size: 13px;
    color: var(--muted);
}

.cart-address-details input {
    width: 100%;
}

[data-cart-submit-spinner] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

[data-cart-submit-spinner]::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: rybstock-spin 0.8s linear infinite;
}

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

@media (max-width: 760px) {
    .cart-address-details {
        grid-template-columns: 1fr;
    }

    .cart-page {
        padding-bottom: 120px;
    }

    /* Липкий итог внизу экрана на мобильном */
    .cart-summary {
        position: sticky;
        bottom: 0;
        z-index: 100;
        margin: 0 calc(var(--page-gap) * -1);
        border-top: 1px solid var(--line);
        border-radius: 16px 16px 0 0;
        padding: 10px 16px;
        background: #ffffff;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }

    .cart-summary dl {
        gap: 4px;
        margin-bottom: 8px;
    }

    .cart-summary dl div {
        gap: 8px;
    }

    .cart-summary dt,
    .cart-summary dd {
        font-size: 13px;
    }

    .cart-summary-total {
        padding-top: 6px;
        font-size: 15px;
    }

    .cart-summary h2,
    .cart-summary .eyebrow {
        display: none;
    }

    /* Порядок блоков на мобильном: Товары → Оплата → Расчёт → Получение → Контакты */
    .cart-checkout-panels {
        display: contents;
    }

    .cart-items-panel {
        order: 1;
    }

    .cart-checkout-panels>.cart-checkout-panel:nth-child(1) {
        order: 2;
    }

    .cart-summary {
        order: 3;
    }

    .cart-checkout-panels>.cart-checkout-panel:nth-child(2) {
        order: 4;
    }

    .cart-checkout-panels>.cart-checkout-panel:nth-child(3) {
        order: 5;
    }
}

/* Final overrides for the current step. Keep this block at the end of the file. */
.start-screen.wide {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 32px);
    padding-bottom: clamp(20px, 3vw, 32px);
}

.start-screen.wide>.home-value-system {
    order: 1;
}

.start-screen.wide>.home-catalog-showcase {
    order: 2;
    margin-top: 0;
}

.start-screen.wide>.audience-system {
    order: 3;
}

.start-screen.wide>.price-request-panel {
    order: 4;
}

.start-screen.wide>.price-download {
    order: 4;
}

.start-screen.wide>.warehouse-showcase {
    order: 5;
}

.start-screen.wide>.wishlist-request-panel {
    order: 6;
}

.start-screen.wide>.home-delivery-summary {
    order: 7;
}

.start-screen.wide>.home-reviews {
    order: 7;
}

.start-screen.wide>.status-box {
    order: 8;
}

.home-delivery-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: clamp(18px, 3vw, 34px);
    align-items: center;
    border: 1px solid rgba(23, 61, 44, 0.18);
    border-top: 4px solid var(--brand-red);
    border-radius: 14px;
    padding: clamp(22px, 4vw, 42px);
    background:
        linear-gradient(90deg, rgba(255, 254, 250, 0.98) 0%, rgba(255, 254, 250, 0.92) 50%, rgba(255, 254, 250, 0.72) 100%),
        url("/assets/images/home/delivery-road.svg") center / cover no-repeat,
        #173d2c;
    box-shadow: 0 28px 80px rgba(13, 45, 30, 0.18);
}

.home-delivery-summary h2 {
    max-width: 780px;
    margin: 0 0 12px;
    color: var(--brand-green);
    font-size: clamp(26px, 3.1vw, 44px);
    line-height: 1.02;
}

.home-delivery-summary p:not(.eyebrow) {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.55;
}

.home-delivery-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.home-delivery-benefits article {
    min-height: 152px;
    border: 1px solid rgba(23, 61, 44, 0.1);
    border-radius: 14px;
    padding: 20px;
    background: rgba(255, 254, 250, 0.96);
    box-shadow: 0 12px 34px rgba(23, 61, 44, 0.12);
}

.home-delivery-benefits span {
    display: block;
    margin-bottom: 10px;
    color: var(--brand-green);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.home-delivery-benefits strong {
    display: block;
    margin-bottom: 10px;
    color: var(--brand-red);
    font-size: clamp(18px, 1.8vw, 26px);
    line-height: 1.15;
}

.home-delivery-benefits p {
    color: #526257;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.home-delivery-summary>.primary-button {
    justify-self: start;
}

/* --- Отзывы с Яндекс Карт --- */
.home-reviews {
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: clamp(22px, 3vw, 38px);
    border: 1px solid rgba(23, 61, 44, 0.12);
    border-top: 4px solid #fc0;
    border-radius: 14px;
    background: var(--paper);
    box-shadow: 0 16px 48px rgba(23, 61, 44, 0.08);
}

.home-reviews .section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.home-reviews-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 12px;
    background: #fc0;
    color: #1a1a1a;
    font-weight: 700;
}

.home-reviews-stars {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 2px;
}

.home-reviews-score {
    font-size: 18px;
    font-weight: 900;
}

.home-reviews-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--muted) transparent;
}

.home-reviews-scroll::-webkit-scrollbar {
    height: 6px;
}

.home-reviews-scroll::-webkit-scrollbar-thumb {
    background: var(--muted);
    border-radius: 3px;
}

.home-review-card {
    flex: 0 0 320px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
    background: #fff;
}

.home-review-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-review-stars {
    color: #fc0;
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 1;
}

.home-review-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-review-card.is-expanded .home-review-text {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.home-review-expand {
    display: inline-block;
    align-self: flex-start;
    border: none;
    padding: 0;
    background: none;
    color: var(--brand-green);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.home-review-expand:hover {
    text-decoration: underline;
}

.home-reviews-cta {
    display: inline-block;
    margin-top: 20px;
}

.home-review-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 13px;
}

.home-review-footer strong {
    color: #1a1a1a;
}

.home-review-footer time {
    color: var(--muted);
}

@media (max-width: 980px) {
    .home-reviews {
        width: 100%;
        padding: 24px 16px;
    }

    .home-review-card {
        flex: 0 0 280px;
    }
}

.home-catalog-showcase .home-catalog-heading {
    padding: clamp(12px, 1.5vw, 18px);
}

.home-catalog-showcase .home-catalog-heading h2 {
    font-size: clamp(24px, 2.4vw, 38px);
}

.home-products-strip {
    grid-auto-columns: clamp(252px, 18.5vw, 292px);
    gap: 14px;
    overflow-x: hidden;
    scrollbar-width: none;
}

/* На сенсорных устройствах включаем прокрутку пальцем (не только стрелками) */
@media (hover: none) and (pointer: coarse) {
    .home-products-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }
}

.home-products-strip .product-card {
    min-height: 548px;
    padding: 12px;
}

.home-products-strip .product-card h3 {
    height: 58px;
    font-size: 15px;
    line-height: 1.2;
}

.home-products-strip .price-line,
.home-products-strip .package-price-line {
    grid-template-columns: minmax(88px, 1fr) auto auto;
    min-height: 30px;
    overflow: visible;
    font-size: 12px;
}

.home-products-strip .quantity-control {
    grid-template-columns: 34px 34px 34px;
}

.home-products-strip .add-to-cart-button {
    min-width: 84px;
}

.catalog-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.catalog-content>.catalog-heading {
    order: 1;
    margin-bottom: 0;
    padding: 8px 16px;
}

.catalog-content>.catalog-heading h1 {
    font-size: clamp(14px, 1.4vw, 17px);
}

.catalog-content>.catalog-search-result-panel {
    order: 2;
    margin-bottom: 0;
    padding: 14px 16px;
}

.catalog-content>.catalog-search-result-panel h2 {
    margin: 0 0 4px;
    font-size: clamp(18px, 1.7vw, 24px);
}

.catalog-content>.catalog-search-result-panel p:not(.eyebrow) {
    margin: 0;
    font-size: 14px;
}

.catalog-content>.catalog-count-panel {
    order: 3;
}

.catalog-content>.catalog-product-grid,
.catalog-content>.panel {
    order: 4;
}

.catalog-content>.catalog-pagination {
    order: 5;
}

.catalog-content>.payment-benefit-banner {
    order: 6;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.28fr);
    margin: 8px 0 0;
    padding: clamp(16px, 2vw, 22px);
}

.catalog-content>.payment-benefit-banner .cash-benefit-copy h2 {
    font-size: clamp(22px, 2.1vw, 30px);
}

.catalog-content>.payment-benefit-banner .cash-benefit-copy p:not(.eyebrow) {
    font-size: 14px;
}

.catalog-content>.catalog-seo-panel {
    order: 7;
}

.delivery-vehicle-visual {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    margin: 0 0 18px;
    background: #eaf4f0;
    box-shadow: inset 0 0 0 1px rgba(19, 66, 45, 0.08);
}

.delivery-vehicle-visual img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
}

.calculator-submit {
    align-self: end;
    min-height: 44px;
}

.route-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.cart-delivery-options label,
.cart-lift-label,
.checkbox-label {
    cursor: pointer;
}

.cart-lift-label {
    min-height: 48px;
    align-content: center;
    border: 1px solid #cfd8c9;
    border-radius: 10px;
    padding: 12px 14px;
    background: #ffffff;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.cart-lift-label:hover,
.cart-lift-label:has(input:checked) {
    border-color: var(--brand-green);
    background: #f0f7ef;
}

@media (max-width: 1024px) {

    .home-delivery-summary,
    .catalog-content>.payment-benefit-banner {
        grid-template-columns: 1fr;
    }

    .home-delivery-benefits {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

@media (max-width: 720px) {
    .home-products-strip {
        grid-auto-columns: minmax(248px, 82vw);
    }

    .home-product-section-head,
    .home-catalog-heading {
        align-items: flex-start;
    }

    .home-delivery-benefits {
        grid-template-columns: 1fr;
    }

    .catalog-content>.catalog-heading {
        padding: 8px 14px;
    }
}

/* Design trial: unified retail warehouse skin. */
:root {
    --page-max: 1480px;
    --page-gap: clamp(16px, 2.4vw, 34px);
    --panel-radius: 8px;
    --brand-green: #123f2b;
    --brand-green-2: #2f7251;
    --brand-red: #c63f32;
    --accent-blue: #12677d;
    --accent-amber: #b77922;
    --ink: #142019;
    --muted: #667568;
    --line: #d9e1d6;
    --paper: #fffef9;
    --wash: #f3f6ef;
    --field: #ffffff;
    --shadow-soft: 0 16px 42px rgba(18, 63, 43, 0.08);
    --shadow-lift: 0 22px 60px rgba(18, 63, 43, 0.14);
}

html {
    background: #eef3ec;
}

body {
    color: var(--ink);
    background:
        linear-gradient(180deg, rgba(255, 254, 249, 0.96) 0 220px, rgba(243, 246, 239, 0.98) 560px),
        repeating-linear-gradient(90deg, rgba(18, 63, 43, 0.028) 0 1px, transparent 1px 96px),
        var(--wash);
    text-rendering: optimizeLegibility;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(18, 63, 43, 0.045), transparent 18%, transparent 82%, rgba(198, 63, 50, 0.045)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 42%);
}

a,
button,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(18, 103, 125, 0.22);
    outline-offset: 2px;
}

.site-topbar {
    border-bottom: 1px solid rgba(18, 63, 43, 0.12);
    background: rgba(255, 254, 249, 0.92);
    box-shadow: 0 14px 34px rgba(18, 63, 43, 0.08);
}

.site-topbar-inner {
    grid-template-columns: minmax(210px, 310px) minmax(420px, 1fr) minmax(260px, 360px);
    gap: clamp(14px, 2vw, 30px);
    padding: 8px 0;
}

.brand-link svg {
    filter: drop-shadow(0 8px 12px rgba(18, 63, 43, 0.08));
}

.main-nav {
    gap: 6px;
    justify-content: center;
}

.main-nav a,
.back-button,
.catalog-count-panel a,
.catalog-search-result-panel a,
.catalog-mini-cart a,
.home-catalog-main-link,
.primary-button,
.secondary-button,
.subtle-button,
.footer-action {
    transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.main-nav a {
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 12px;
    color: #213229;
}

.main-nav a:hover,
.main-nav a:focus-visible {
    border-color: rgba(18, 63, 43, 0.12);
    background: #edf5ea;
    transform: translateY(-1px);
}

.main-nav a.is-active,
.main-nav a[aria-current="page"] {
    border-color: var(--brand-green);
    background: #e2ecd9;
    color: var(--brand-green);
}

.cart-link {
    color: #ffffff !important;
    background: var(--brand-green);
}

.cart-link:hover,
.cart-link:focus-visible {
    color: #ffffff !important;
    background: #0d3020 !important;
}

.cart-link.is-active,
.cart-link[aria-current="page"] {
    color: #ffffff !important;
    background: #0d3020 !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.topbar-contacts {
    gap: 2px;
}

.topbar-contacts a {
    font-size: 18px;
}

.topbar-contacts span {
    max-width: 340px;
}

.smart-search-bar,
.price-mode-bar,
.category-mega-bar {
    border-color: rgba(18, 63, 43, 0.12);
}

.smart-search-bar {
    background:
        linear-gradient(90deg, rgba(18, 63, 43, 0.065), rgba(18, 103, 125, 0.055) 54%, rgba(198, 63, 50, 0.052)),
        rgba(255, 254, 249, 0.96);
}

.smart-search-inner {
    padding: 12px 0;
}

.smart-search-form {
    grid-template-columns: 136px minmax(0, 1fr);
}

.smart-search-label,
.price-mode-inner>span,
.catalog-side-heading span {
    letter-spacing: 0.01em;
}

.smart-search-control {
    border-color: rgba(18, 63, 43, 0.18);
    border-radius: 8px;
    background: var(--field);
    box-shadow: 0 12px 30px rgba(18, 63, 43, 0.09);
}

.smart-search-control input::placeholder {
    color: #8a9588;
}

.voice-search-button,
.smart-search-submit,
.price-mode-button,
.variant-choice-button,
.quantity-stepper,
.add-to-cart-button,
.notify-arrival-button,
.cart-delivery-options label,
.choice-pill span {
    border-radius: 8px;
}

.voice-search-button {
    color: var(--accent-blue);
    background: #edf7f8;
}

.voice-search-button:hover {
    background: #dff0f2;
}

.smart-search-submit,
.primary-button,
.add-to-cart-button,
.catalog-mini-cart a,
.catalog-count-panel a,
.catalog-search-result-panel a,
.home-catalog-main-link {
    background: linear-gradient(135deg, #123f2b, #1f5f43);
    box-shadow: 0 12px 28px rgba(18, 63, 43, 0.16);
}

.smart-search-submit:hover,
.primary-button:hover,
.add-to-cart-button:hover,
.catalog-mini-cart a:hover,
.catalog-count-panel a:hover,
.catalog-search-result-panel a:hover,
.home-catalog-main-link:hover {
    background: linear-gradient(135deg, #0c2e1f, #164b34);
    box-shadow: 0 16px 34px rgba(18, 63, 43, 0.22);
    transform: translateY(-1px);
    text-decoration: none;
}

.category-mega-bar {
    background:
        linear-gradient(180deg, rgba(255, 254, 249, 0.92), rgba(239, 246, 236, 0.96)),
        #f3f6ef;
    box-shadow: 0 10px 26px rgba(18, 63, 43, 0.055);
}

.category-mega-inner {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
}

.category-mega-inner::-webkit-scrollbar {
    display: none;
}

.mega-root {
    border-color: rgba(18, 63, 43, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
}

.mega-root:hover,
.mega-item:focus-within .mega-root,
.mega-item:hover .mega-root {
    background: #edf5ea;
    box-shadow: 0 10px 24px rgba(18, 63, 43, 0.08);
}

.mega-all-link,
.mega-all-link:hover,
.mega-all-link:focus-visible {
    color: #ffffff;
    border-color: var(--brand-green);
    background: linear-gradient(135deg, #123f2b, #1f5f43);
}

.mega-virtual-link.is-promo,
.mega-virtual-link.is-promo:hover,
.mega-virtual-link.is-promo:focus-visible {
    color: #ffffff;
    border-color: var(--brand-red);
    background: var(--brand-red);
}

.mega-submenu,
.panel,
.product-card,
.admin-tile,
.cart-hero,
.cart-items-panel,
.cart-summary,
.text-page-header,
.text-page-body,
.info-card,
.catalog-heading,
.catalog-count-panel,
.catalog-search-result-panel,
.catalog-seo-panel,
.product-detail>.panel,
.cart-checkout-panel {
    border-color: rgba(18, 63, 43, 0.12);
    border-radius: 8px;
    background: rgba(255, 254, 249, 0.94);
    box-shadow: var(--shadow-soft);
}

.page {
    padding-top: clamp(18px, 2.2vw, 30px);
}

.site-utility {
    margin-top: 10px;
}

.breadcrumbs,
.back-button {
    font-size: 12px;
}

.back-button:hover {
    transform: translateY(-1px);
}

h1,
h2,
h3,
strong,
b,
.smart-search-label,
.price-mode-inner>span {
    letter-spacing: 0;
}

.eyebrow {
    color: var(--brand-red);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

p {
    color: #455448;
}

.home-value-system,
.audience-system {
    border-color: rgba(18, 63, 43, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 254, 249, 0.98), rgba(239, 246, 236, 0.94)),
        #fffef9;
    box-shadow: var(--shadow-lift);
}

.home-value-system {
    grid-template-columns: minmax(330px, 0.68fr) minmax(0, 1.32fr);
}

.home-value-head h1 {
    color: var(--brand-green);
    font-size: clamp(52px, 6.2vw, 88px);
}

.home-value-head>p {
    color: #203b2b;
    font-weight: 800;
}

.hero-actions .primary-button,
.hero-actions .secondary-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

.secondary-button {
    border-color: rgba(18, 63, 43, 0.18);
    background: rgba(255, 255, 255, 0.82);
}

.secondary-button:hover {
    border-color: rgba(18, 63, 43, 0.28);
    transform: translateY(-1px);
}

.home-benefit-card,
.audience-card,
.warehouse-photo-card,
.price-request-panel,
.home-delivery-separator {
    border-radius: 8px;
}

.home-benefit-card,
.audience-card {
    box-shadow: 0 16px 38px rgba(18, 63, 43, 0.16);
}

.home-benefit-card::after,
.audience-card::after {
    background:
        linear-gradient(180deg, rgba(5, 24, 16, 0.08), rgba(5, 24, 16, 0.82)),
        linear-gradient(90deg, rgba(5, 24, 16, 0.72), rgba(5, 24, 16, 0.12));
}

.home-benefit-card span,
.audience-card span,
.business-only-badge,
.cart-payment-trust,
.cart-row-state {
    border-radius: 8px;
}

.audience-system,
.warehouse-showcase,
.price-request-panel,
.wishlist-request-panel,
.home-delivery-summary {
    margin-top: clamp(18px, 2.2vw, 28px);
}

.warehouse-copy,
.arrival-card,
.temperature-card,
.warehouse-photo-card,
.home-catalog-heading,
.home-product-section,
.wishlist-request-panel,
.home-delivery-summary {
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.home-catalog-heading {
    border-color: rgba(18, 103, 125, 0.16);
    background:
        linear-gradient(135deg, rgba(18, 103, 125, 0.08), rgba(255, 254, 249, 0.92) 58%),
        var(--paper);
}

.home-product-section {
    border-color: rgba(18, 63, 43, 0.1);
    background: rgba(255, 254, 249, 0.94);
}

.home-product-section::after {
    width: 46px;
}

.product-grid {
    gap: clamp(12px, 1.5vw, 18px);
}

.catalog-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}

.product-card {
    overflow: hidden;
    padding: 12px;
    background: linear-gradient(180deg, #fffefb, #fbfcf8);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.product-card:hover,
.product-card:focus-within {
    border-color: rgba(18, 63, 43, 0.22);
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

.product-card-image {
    margin: -4px -4px 12px;
    border: 1px solid rgba(18, 63, 43, 0.08);
    border-radius: 8px;
    background: #edf3ed;
}

.product-card-image img,
.product-card-image-placeholder {
    aspect-ratio: 1 / 0.78;
}

.product-card .product-category {
    height: 30px;
    color: #738171;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.product-card h3 {
    height: 58px;
    color: var(--ink);
    font-size: 16px;
}

.product-card h3 a {
    color: inherit;
}

.variant-choice {
    height: 74px;
    border-bottom-color: rgba(18, 63, 43, 0.1);
}

.variant-choice-list {
    scrollbar-width: none;
}

.variant-choice-list::-webkit-scrollbar {
    display: none;
}

.variant-choice-button {
    border-color: rgba(18, 63, 43, 0.16);
    background: #fff;
}

.variant-choice-button:hover,
.variant-choice-button.is-active {
    background: var(--brand-green);
}

.price-line,
.package-price-line {
    font-size: 13px;
}

.price-unit-values,
.package-price-values,
.cart-row-total,
.cart-summary dd,
.catalog-mini-cart strong {
    font-variant-numeric: tabular-nums;
}

.package-price-line {
    border-top-color: rgba(18, 63, 43, 0.1);
}

.price-tier-trigger {
    border-color: rgba(18, 103, 125, 0.24);
    color: var(--accent-blue);
}

.quantity-stepper {
    border-color: rgba(18, 63, 43, 0.18);
}

.quantity-stepper button:hover {
    background: var(--brand-green);
}

.add-to-cart-button {
    min-height: 42px;
}

.catalog-layout,
.admin-layout,
.product-detail,
.cart-page,
.text-page,
.info-page {
    width: min(var(--page-max), 100%);
}

.catalog-layout {
    grid-template-columns: 284px minmax(0, 1fr);
    gap: clamp(16px, 1.8vw, 22px);
}

.catalog-sidebar {
    top: 128px;
}

.catalog-menu-panel {
    background: rgba(255, 254, 249, 0.96);
}

.category-list.depth-0>li {
    border-bottom-color: rgba(18, 63, 43, 0.08);
}

.category-list a,
.category-details summary {
    min-height: 38px;
}

.category-list a:hover,
.category-details summary:hover {
    background: #edf5ea;
}

.category-list li.is-current>a,
.category-list li.is-current>.category-details>summary,
.category-list.depth-0>.category-special-link.is-current>a,
.category-list.depth-0>.category-special-link.is-all>a {
    background: linear-gradient(135deg, #123f2b, #1f5f43);
}

.category-icon {
    border-radius: 8px;
    background: #edf5ea;
}

.catalog-heading {
    gap: 8px 14px;
    background:
        linear-gradient(90deg, rgba(255, 254, 249, 0.98), rgba(245, 249, 242, 0.92)),
        var(--paper);
}

.catalog-heading .eyebrow {
    color: var(--accent-blue);
}

.catalog-payment-banners .payment-benefit-banner {
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(18, 63, 43, 0.07);
}

.cbanner-tiers>div,
.cbanner-badge {
    border-radius: 8px;
}

.price-mode-button {
    border-color: rgba(18, 63, 43, 0.18);
    box-shadow: none;
}

.price-mode-button:hover,
.price-mode-button.is-active {
    background: linear-gradient(135deg, #123f2b, #1f5f43);
}

.price-mode-button b {
    border-radius: 8px;
}

.price-mode-options {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.product-detail-main h1,
.cart-hero h1,
.text-page-header h1,
.info-hero h1 {
    color: var(--brand-green);
}

.product-detail-main,
.product-gallery,
.product-description {
    background: rgba(255, 254, 249, 0.96);
}

.product-gallery {
    position: relative;
}

.product-gallery>img,
.product-thumbs img,
.product-image-placeholder {
    border-radius: 8px;
}

.variant-row {
    border-color: rgba(18, 63, 43, 0.12);
    border-radius: 8px;
    background: #fbfdf8;
}

.product-detail-notes span,
.product-detail-preorder,
.cart-weight-notice,
.cart-sync-note,
.cart-minimum-warning,
.cart-final-sum-label,
.cart-invoice-details,
.file-field,
.status-box {
    border-radius: 8px;
}

.cart-layout {
    gap: clamp(16px, 2vw, 24px);
}

.cart-summary {
    top: 188px;
}

.cart-row {
    border-color: rgba(18, 63, 43, 0.1);
    background: #fbfcf8;
}

.cart-row-image,
.cart-row-controls button,
.cart-row-remove,
.cart-delivery-fields input,
.cart-order-form input,
.cart-order-form textarea,
.cart-invoice-details textarea,
.cart-invoice-details input,
.price-request-form input,
.price-request-form textarea,
.wishlist-request-form input,
.wishlist-request-form textarea,
.calculator-form input,
.calculator-form select,
.admin-form input,
.admin-form select,
.admin-form textarea {
    border-radius: 8px;
}

.cart-summary-total dd {
    color: var(--brand-red);
    font-size: 24px;
}

.price-request-panel {
    background:
        linear-gradient(90deg, rgba(7, 42, 26, 0.94) 0%, rgba(7, 42, 26, 0.76) 46%, rgba(7, 42, 26, 0.28) 100%),
        var(--home-warehouse-main) center / cover no-repeat,
        #0d2f20;
}

.price-request-content {
    border-radius: 8px;
}

.site-footer {
    background: linear-gradient(180deg, #16241b, #0e1711);
}

.footer-logo {
    border-radius: 8px;
}

@media (max-width: 1180px) {
    .site-topbar-inner {
        grid-template-columns: minmax(190px, 270px) minmax(0, 1fr);
    }

    .topbar-contacts {
        justify-content: flex-start;
    }

    .home-value-system {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .price-mode-inner {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .price-mode-options {
        width: 100%;
    }

    .catalog-layout,
    .product-detail {
        grid-template-columns: 1fr;
    }

    .catalog-sidebar,
    .cart-summary {
        position: static;
    }

    .catalog-menu-panel>.category-list {
        max-height: 420px;
        overflow: auto;
    }

    .category-list a,
    .category-details summary {
        min-height: 44px;
    }

    .category-list.depth-0>.category-special-link>a {
        min-height: 40px;
        padding: 6px 10px;
        font-size: 13px;
    }

    .category-icon {
        width: 34px;
        height: 34px;
    }

    .category-icon svg {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 760px) {
    .site-topbar-inner {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 7px 0 9px;
    }

    .brand-link img,
    .brand-link svg {
        width: min(180px, 46vw);
    }

    .main-nav {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav a {
        flex: 0 0 auto;
        justify-content: center;
        width: auto;
        min-height: 34px;
        padding: 7px 11px;
        font-size: 13px;
    }

    .topbar-contacts span {
        max-width: none;
    }

    .topbar-contacts {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        align-items: baseline;
        font-size: 11px;
        line-height: 1.25;
    }

    .topbar-contacts a {
        font-size: 16px;
    }

    .smart-search-form {
        grid-template-columns: 1fr;
    }

    .smart-search-form p {
        grid-column: 1;
    }

    .smart-search-control {
        grid-template-columns: minmax(0, 1fr) 58px;
    }

    .voice-search-button {
        overflow: hidden;
        padding: 0 8px;
        font-size: 11px;
    }

    .home-value-head h1 {
        font-size: 44px;
    }

    .home-value-head>p {
        font-size: 19px;
    }

    .hero-actions {
        display: grid;
    }

    .hero-actions .primary-button,
    .hero-actions .secondary-button {
        width: 100%;
    }

    .catalog-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    }

    .product-card:hover,
    .product-card:focus-within {
        transform: none;
    }

    .cart-row-total {
        text-align: left;
    }
}

@media (max-width: 520px) {
    .price-mode-button {
        flex: 0 0 auto;
        min-width: max-content;
    }

    /* Мобильная сетка товаров: всегда 2 карточки в строку. */
    .product-grid,
    .catalog-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .product-card-actions,
    .home-products-strip .product-card-actions {
        grid-template-columns: 1fr;
    }

    .product-card {
        padding: 10px;
    }

    .product-card h3 {
        height: auto;
        min-height: 40px;
        font-size: 14px;
    }

    .product-card .product-category {
        height: auto;
        min-height: 24px;
    }

    .product-card-image img,
    .product-card-image-placeholder {
        aspect-ratio: 1 / 0.74;
    }

    /* Поиск на мобильном: максимально компактные карточки */
    .is-search-page .catalog-product-grid {
        gap: 8px;
    }

    .is-search-page .product-card {
        padding: 8px;
    }

    .is-search-page .product-card .compare-toggle-card {
        display: none;
    }

    .is-search-page .product-card h3 {
        min-height: 36px;
        font-size: 13px;
    }

    .is-search-page .product-card .product-category {
        min-height: 20px;
        font-size: 11px;
    }

    .is-search-page .price-line,
    .is-search-page .package-price-line {
        font-size: 12px;
    }

    .is-search-page .product-card-actions {
        gap: 6px;
    }

    .is-search-page .quantity-stepper {
        height: 32px;
    }

    .is-search-page .add-to-cart-button {
        min-height: 32px;
        font-size: 13px;
    }
}

/* Usability pass: compact header, stable desktop menu, mobile-only scroll rails. */
@media (min-width: 981px) {
    .site-topbar-inner {
        grid-template-columns: minmax(150px, 210px) minmax(420px, 1fr) minmax(230px, 300px);
        gap: 18px;
        padding: 5px 0;
    }

    .brand-link img,
    .brand-link svg {
        width: clamp(150px, 13vw, 205px);
    }

    .main-nav {
        gap: 5px;
        justify-content: center;
        overflow: visible;
    }

    .main-nav a {
        min-height: 30px;
        padding: 8px 10px;
        font-size: 13px;
    }

    .topbar-contacts {
        gap: 1px;
        font-size: 11px;
        line-height: 1.22;
    }

    .topbar-contacts a {
        font-size: 15px;
    }

    .topbar-contacts span {
        max-width: 300px;
    }

    .smart-search-inner {
        padding: 7px 0;
    }

    .smart-search-form {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 4px 12px;
    }

    .smart-search-label {
        font-size: 15px;
    }

    .smart-search-control {
        grid-template-columns: minmax(0, 1fr) 66px 76px;
        gap: 6px;
        padding: 5px;
        box-shadow: 0 8px 20px rgba(18, 63, 43, 0.07);
    }

    .smart-search-control input,
    .voice-search-button,
    .smart-search-submit {
        min-height: 36px;
        font-size: 13px;
    }

    .smart-search-form p {
        display: none;
    }

    .category-mega-inner {
        flex-wrap: nowrap;
        justify-content: center;
        overflow: visible;
        padding: 6px 0;
    }

    .mega-root {
        min-width: 74px;
        max-width: 170px;
        min-height: 32px;
        padding: 6px 9px;
        font-size: 10px;
        line-height: 1.12;
    }

    .mega-category-icon {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
    }

    .mega-category-icon svg {
        width: 15px;
        height: 15px;
    }

    .price-mode-inner {
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 8px 14px;
        padding: 7px 0;
    }

    .price-mode-inner>span {
        font-size: 12px;
    }

    .price-mode-options {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow: visible;
    }

    .price-mode-button {
        min-height: 30px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .price-mode-button b {
        min-height: 18px;
        padding: 3px 6px;
        font-size: 10px;
    }

    .site-utility {
        margin-top: 5px;
    }

    .page {
        padding-top: 18px;
    }
}

@media (max-width: 980px) {
    .site-topbar-inner {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px 14px;
        align-items: center;
        padding: 6px 0 8px;
    }

    .brand-link {
        width: auto;
    }

    .brand-link img,
    .brand-link svg {
        width: clamp(160px, 21vw, 200px);
    }

    .main-nav {
        justify-content: flex-end;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .main-nav a {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 8px 10px;
        font-size: 12px;
    }

    .topbar-contacts {
        grid-column: 1 / -1;
        display: flex;
        gap: 8px 14px;
        justify-content: flex-end;
        font-size: 11px;
        line-height: 1.2;
    }

    .topbar-contacts a {
        font-size: 14px;
    }

    .smart-search-inner {
        padding: 8px 0;
    }

    .smart-search-form {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 5px 10px;
    }

    .smart-search-label {
        font-size: 14px;
    }

    .smart-search-control {
        grid-template-columns: minmax(0, 1fr) 58px 68px;
        gap: 5px;
        padding: 5px;
    }

    .smart-search-control input,
    .voice-search-button,
    .smart-search-submit {
        min-height: 34px;
        font-size: 12px;
    }

    .smart-search-form p {
        display: none;
    }

    .category-mega-inner,
    .price-mode-options {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .category-mega-inner::-webkit-scrollbar,
    .price-mode-options::-webkit-scrollbar {
        display: none;
    }

    .mega-root,
    .price-mode-button {
        scroll-snap-align: start;
    }

    .main-nav {
        padding: 6px 18px 0 0;
    }

    .price-mode-options {
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 1px;
    }

    .category-mega-inner {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        padding: 6px 0;
    }

    .mega-root {
        flex: 0 0 auto;
        min-width: max-content;
        max-width: none;
        min-height: 32px;
        padding: 6px 10px;
        font-size: 11px;
        white-space: nowrap;
    }

    .mega-category-icon {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
    }

    .price-mode-inner {
        gap: 6px;
        padding: 8px 0;
    }

    .price-mode-inner>span {
        font-size: 11px;
    }

    .price-mode-button {
        min-height: 31px;
        padding: 6px 9px;
        font-size: 11px;
    }

    .price-mode-button b {
        min-height: 17px;
        padding: 3px 6px;
        font-size: 9px;
    }
}

@media (max-width: 760px) {
    .site-topbar {
        position: sticky;
    }

    .site-topbar-inner {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 5px 10px;
        align-items: center;
        padding: 5px 0 7px;
    }

    .brand-link {
        grid-column: 1;
        width: auto;
    }

    .brand-link img,
    .brand-link svg {
        width: min(180px, 46vw);
    }

    .main-nav {
        grid-column: 1 / -1;
    }

    .main-nav a {
        min-height: 30px;
        padding: 8px 9px;
        font-size: 12px;
    }

    .topbar-contacts {
        grid-column: 2;
        gap: 2px 10px;
        justify-self: end;
        justify-content: flex-end;
        justify-items: end;
        min-width: 0;
    }

    .topbar-contacts a {
        font-size: 14px;
        line-height: 1;
        white-space: nowrap;
    }

    .topbar-contacts span {
        display: none;
    }

    .smart-search-inner {
        padding: 6px 0;
    }

    .smart-search-form {
        display: block;
    }

    .smart-search-label {
        display: none;
    }

    .smart-search-control {
        grid-template-columns: minmax(0, 1fr) 48px 62px;
        gap: 5px;
        padding: 5px;
    }

    .smart-search-control input,
    .voice-search-button,
    .smart-search-submit {
        min-height: 34px;
        font-size: 12px;
    }

    .smart-search-control input {
        padding-inline: 7px;
    }

    .smart-search-submit {
        grid-column: auto;
        padding-inline: 8px;
    }

    .voice-search-button {
        font-size: 0;
    }

    .voice-search-button::before {
        content: "Голос";
        font-size: 10px;
    }

    .smart-search-form p {
        display: none;
    }

    .category-mega-inner {
        flex-wrap: nowrap;
        padding: 6px 0;
    }

    .mega-root {
        max-width: none;
        min-width: max-content;
        min-height: 31px;
        padding: 6px 9px;
        font-size: 11px;
        white-space: nowrap;
    }

    .mega-root .mega-category-icon {
        display: none;
    }

    .price-mode-inner {
        gap: 5px;
        padding: 7px 0;
    }

    .price-mode-inner>span {
        justify-self: start;
        font-size: 11px;
        text-align: left;
    }

    .price-mode-button {
        min-height: 30px;
        padding: 6px 9px;
        font-size: 11px;
    }

    .price-mode-button b {
        display: none;
    }

    .site-utility {
        margin-top: 5px;
    }

    .breadcrumbs {
        font-size: 11px;
    }

    .page {
        padding-top: 12px;
    }
}

@media (max-width: 420px) {
    .smart-search-control {
        grid-template-columns: minmax(0, 1fr) 44px 58px;
    }

    .smart-search-submit {
        padding-inline: 8px;
    }
}

/* Final usability fixes: no desktop submenu scrollbars, tighter mobile header rows. */
@media (min-width: 981px) {
    .category-mega-bar.is-shallow .mega-submenu {
        left: 50%;
        right: auto;
        width: min(620px, calc(100vw - 48px));
        max-height: min(54vh, 420px);
        padding: 12px 14px;
        transform: translate(-50%, 6px);
    }

    .category-mega-bar.is-shallow .mega-item:hover>.mega-submenu,
    .category-mega-bar.is-shallow .mega-item:focus-within>.mega-submenu {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px 16px;
        transform: translate(-50%, 0);
    }

    .category-mega-bar.is-shallow .mega-item:nth-last-child(-n+3)>.mega-submenu {
        right: 0;
        left: auto;
        transform: translate(0, 6px);
    }

    .category-mega-bar.is-shallow .mega-item:nth-last-child(-n+3):hover>.mega-submenu,
    .category-mega-bar.is-shallow .mega-item:nth-last-child(-n+3):focus-within>.mega-submenu {
        transform: translate(0, 0);
    }

    .category-mega-bar.is-shallow .mega-item:nth-child(-n+5)>.mega-submenu {
        right: auto;
        left: 0;
        transform: translate(0, 6px);
    }

    .category-mega-bar.is-shallow .mega-item:nth-child(-n+5):hover>.mega-submenu,
    .category-mega-bar.is-shallow .mega-item:nth-child(-n+5):focus-within>.mega-submenu {
        transform: translate(0, 0);
    }

    .category-mega-bar.is-shallow .mega-submenu a {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .mega-submenu {
        width: min(860px, calc(100vw - 48px));
        max-height: min(66vh, 560px);
        padding: 12px;
        overflow-x: hidden;
        overflow-y: auto;
        columns: auto;
        overscroll-behavior: contain;
    }

    .mega-item:hover>.mega-submenu,
    .mega-item:focus-within>.mega-submenu {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px 12px;
    }

    .mega-submenu li {
        min-width: 0;
        margin: 0;
        border-bottom: 1px solid rgba(18, 63, 43, 0.07);
        padding: 0;
    }

    .mega-submenu a {
        min-width: 0;
        min-height: 28px;
        padding: 5px 7px;
        font-size: 12px;
        line-height: 1.15;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mega-submenu li:has(> .mega-submenu)>a::after,
    .mega-submenu li:has(> .mega-submenu)::after {
        content: none;
    }

    .mega-submenu.depth-2,
    .mega-submenu.depth-3 {
        position: static;
        width: auto;
        max-height: none;
        margin: 0 0 5px 8px;
        border: 0;
        border-left: 2px solid rgba(18, 63, 43, 0.1);
        border-radius: 0;
        padding: 0 0 0 7px;
        background: transparent;
        box-shadow: none;
        overflow-x: hidden;
        overflow-y: visible;
        columns: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    .mega-submenu.depth-2 a,
    .mega-submenu.depth-3 a {
        min-height: 24px;
        padding: 4px 6px;
        color: #4d5b51;
        font-size: 11px;
        font-weight: 700;
    }

    .mega-submenu.depth-2 li,
    .mega-submenu.depth-3 li {
        border-bottom: 0;
    }

    .mega-submenu li:hover>.mega-submenu,
    .mega-submenu li:focus-within>.mega-submenu {
        display: grid;
    }
}

@media (max-width: 760px) {
    .site-topbar-inner {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "logo phone"
            "nav nav";
        gap: 4px 10px;
    }

    .brand-link {
        grid-area: logo;
    }

    .brand-link img,
    .brand-link svg {
        width: min(180px, 46vw);
    }

    .topbar-contacts {
        grid-area: phone;
        align-self: center;
        margin-top: -2px;
    }

    .topbar-contacts a {
        font-size: 13px;
    }

    .main-nav {
        grid-area: nav;
        min-height: 32px;
    }

    .main-nav a {
        min-height: 30px;
        padding: 8px 9px 5px;
    }
}

@media (max-width: 420px) {

    .brand-link img,
    .brand-link svg {
        width: min(180px, 46vw);
    }

    .topbar-contacts a {
        font-size: 12px;
    }
}

@media (min-width: 981px) and (max-width: 1180px) {
    .site-topbar-inner {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px 16px;
        padding: 6px 0 8px;
    }

    .brand-link {
        width: auto;
    }

    .brand-link img,
    .brand-link svg {
        width: clamp(142px, 16vw, 170px);
    }

    .main-nav {
        flex-wrap: nowrap;
        justify-content: flex-end;
        min-width: 0;
        padding: 6px 18px 0 0;
    }

    .main-nav a {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 8px 10px;
        font-size: 12px;
    }

    .topbar-contacts {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: nowrap;
        gap: 10px 16px;
        justify-content: flex-end;
        font-size: 11px;
        line-height: 1.2;
    }

    .topbar-contacts a {
        font-size: 14px;
    }

    .smart-search-inner {
        padding: 8px 0;
    }

    .smart-search-form {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 5px 10px;
    }

    .smart-search-label {
        font-size: 14px;
    }

    .smart-search-control {
        grid-template-columns: minmax(0, 1fr) 58px 70px;
        gap: 5px;
        padding: 5px;
    }

    .smart-search-control input,
    .voice-search-button,
    .smart-search-submit {
        min-height: 34px;
        font-size: 12px;
    }

    .smart-search-form p {
        display: none;
    }

    .category-mega-inner {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 0;
        scrollbar-width: none;
    }

    .category-mega-inner::-webkit-scrollbar {
        display: none;
    }

    .mega-root {
        flex: 0 0 auto;
        min-width: max-content;
        max-width: none;
        min-height: 32px;
        padding: 6px 10px;
        font-size: 11px;
        white-space: nowrap;
    }

    .mega-category-icon {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
    }

    .price-mode-inner {
        gap: 6px 12px;
        padding: 8px 0;
    }

    .price-mode-inner>span {
        font-size: 11px;
    }

    .price-mode-options {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .price-mode-options::-webkit-scrollbar {
        display: none;
    }

    .price-mode-button {
        flex: 0 0 auto;
        min-height: 31px;
        padding: 6px 9px;
        font-size: 11px;
    }

    .price-mode-button b {
        min-height: 17px;
        padding: 3px 6px;
        font-size: 9px;
    }
}

@media (max-width: 520px) {
    .main-nav {
        display: none;
    }
}

@media (max-width: 1120px) {

    .cart-layout,
    .cart-layout-checkout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }

    .cart-row {
        grid-template-columns: 84px minmax(0, 1fr) auto auto auto;
    }
}

@media (min-width: 761px) and (max-width: 1120px) {
    .cart-summary dl div {
        grid-template-columns: minmax(0, 1fr) max-content;
    }

    .cart-summary dd {
        max-width: 320px;
        overflow-wrap: anywhere;
    }
}

/* =============================================================
   Admin panel shell (layout, sidebar, content)
   ============================================================= */

.admin-body {
    margin: 0;
    background: #f1f3ef;
    color: var(--ink);
    font-family: "Segoe UI", Arial, sans-serif;
}

.admin-shell {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    min-height: 100vh;
}

/* --- Sidebar --- */

.admin-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    width: 264px;
    height: 100vh;
    background: #14322a;
    color: #d8e6dd;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
}

.admin-sidebar-brand:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    text-decoration: none;
}

.admin-sidebar-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -0.5px;
    line-height: 1;
}

.admin-sidebar-brand-mark b {
    color: var(--brand-red);
    font-weight: 900;
}

.admin-sidebar-brand-mark i {
    color: var(--brand-green);
    font-style: normal;
    font-weight: 900;
}

.admin-sidebar-brand-text {
    display: grid;
    gap: 2px;
    line-height: 1.2;
}

.admin-sidebar-brand-text strong {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
}

.admin-sidebar-brand-text small {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 8px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.admin-sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.admin-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 6px;
}

.admin-sidebar-group {
    margin: 4px 0 14px;
}

.admin-sidebar-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 8px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.admin-sidebar-group-title:hover {
    color: rgba(255, 255, 255, 0.8);
}

.admin-sidebar-chevron {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.is-collapsed .admin-sidebar-chevron {
    transform: rotate(-90deg);
}

.is-collapsed>.admin-sidebar-list {
    display: none;
}

.admin-sidebar-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
}

.admin-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-sidebar-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    text-decoration: none;
}

.admin-sidebar-link.is-active {
    background: var(--brand-red);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(217, 48, 37, 0.32);
}

.admin-sidebar-link.is-active:hover {
    background: #c12a20;
}

.admin-sidebar-link.is-stub {
    color: rgba(255, 255, 255, 0.45);
    cursor: not-allowed;
}

.admin-sidebar-link.is-stub:hover {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.55);
}

.admin-sidebar-badge {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-sidebar-badge-soon {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
}

.admin-sidebar-footer {
    padding: 12px 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 10px;
}

.admin-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-sidebar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-red);
    color: #ffffff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-sidebar-user-info {
    display: grid;
    gap: 2px;
    line-height: 1.2;
    min-width: 0;
}

.admin-sidebar-user-info strong {
    font-size: 13px;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar-user-info small {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.admin-sidebar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 8px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.admin-sidebar-action:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    text-decoration: none;
}

.admin-sidebar-action-danger:hover {
    background: rgba(217, 48, 37, 0.85);
    color: #ffffff;
}

/* --- Main content --- */

.admin-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #f1f3ef;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 28px;
    background: #ffffff;
    border-bottom: 1px solid #e2e6df;
    box-shadow: 0 2px 8px rgba(20, 50, 42, 0.04);
}

.admin-sidebar-toggle {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid #d8ddd2;
    border-radius: 8px;
    background: #ffffff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.admin-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--muted);
}

.admin-breadcrumbs a {
    color: var(--brand-green);
    text-decoration: none;
}

.admin-breadcrumbs a:hover {
    text-decoration: underline;
}

.admin-breadcrumbs span {
    color: var(--ink);
    font-weight: 600;
}

.admin-breadcrumbs i {
    color: #c2c8bd;
    font-style: normal;
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-topbar-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-green);
    text-decoration: none;
}

.admin-topbar-link:hover {
    text-decoration: underline;
}

.admin-topbar-user {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.admin-content {
    padding: 24px 28px 40px;
    display: grid;
    gap: 20px;
}

.admin-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.admin-page-header h1 {
    margin: 4px 0 4px;
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
}

.admin-eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-red);
}

.admin-muted {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.admin-panel {
    background: #ffffff;
    border: 1px solid #e6eae0;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 4px 14px rgba(20, 50, 42, 0.04);
}

.admin-panel-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.admin-grid-two {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
    .admin-grid-two {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }
}

.admin-cards {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.admin-card {
    display: grid;
    gap: 6px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e6eae0;
    border-radius: 12px;
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.admin-card:hover {
    transform: translateY(-2px);
    border-color: #c9d4c2;
    box-shadow: 0 12px 26px rgba(20, 50, 42, 0.08);
    text-decoration: none;
}

.admin-card-group {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-red);
}

.admin-card-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
}

.admin-card-description {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}

/* --- Forms inside admin --- */

.admin-form {
    display: grid;
    gap: 12px;
}

.admin-form label {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.admin-form input,
.admin-form select,
.admin-form textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #d8ddd2;
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(23, 61, 44, 0.12);
}

.admin-form textarea {
    resize: vertical;
    min-height: 76px;
}

.admin-form .checkbox-label {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.admin-form .checkbox-label input {
    width: auto;
}

.admin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.admin-button-primary {
    background: var(--brand-red);
    color: #ffffff;
}

.admin-button-primary:hover {
    background: #c12a20;
}

.admin-button-secondary {
    background: #ffffff;
    border-color: #d8ddd2;
    color: var(--ink);
}

.admin-button-secondary:hover {
    background: #f4f6ef;
}

/* --- Alerts, stats, progress --- */

.admin-alert {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 1.45;
}

.admin-alert-success {
    background: #e8f4ec;
    border-color: #b9ddc4;
    color: #145a32;
}

.admin-alert-danger {
    background: #fdecea;
    border-color: #f5c2bd;
    color: #8a2018;
}

.admin-alert-info {
    background: #eef4fb;
    border-color: #c5d8ee;
    color: #1f4a86;
}

.admin-stats {
    margin: 0;
    display: grid;
    gap: 10px 16px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.admin-stats div {
    display: grid;
    gap: 2px;
}

.admin-stats dt {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-stats dd {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
}

.admin-progress {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.admin-progress-bar {
    height: 10px;
    background: #e6eae0;
    border-radius: 999px;
    overflow: hidden;
}

.admin-progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-green), var(--brand-red));
}

.admin-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--muted);
}

.admin-progress-meta strong {
    color: var(--ink);
    font-size: 16px;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* --- List of products in admin --- */

.admin-list {
    display: grid;
    gap: 8px;
}

.admin-list>div {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 12px;
    padding: 10px 12px;
    background: #f7f8f3;
    border: 1px solid #e6eae0;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink);
}

.admin-list>div strong {
    font-weight: 700;
}

.admin-list>div span {
    color: var(--muted);
}

/* --- Responsive --- */

@media (max-width: 960px) {
    .admin-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 30;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
    }

    body.admin-sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .admin-content {
        padding: 18px 16px 30px;
    }

    .admin-topbar {
        padding: 10px 16px;
    }
}

/* --- Admin tabs (section switcher for settings page) --- */

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #e6eae0;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(20, 50, 42, 0.04);
}

.admin-tab {
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-tab:hover {
    background: #f1f3ef;
    color: var(--brand-green);
    text-decoration: none;
}

.admin-tab.is-active {
    background: var(--brand-green);
    color: #ffffff;
}

.admin-tab.is-active:hover {
    background: #0f2c20;
    color: #ffffff;
}

/* --- Settings form grid --- */

.admin-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    align-items: start;
}

.admin-form-grid .admin-form-actions {
    grid-column: 1 / -1;
}

.admin-field {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.admin-field-wide {
    grid-column: 1 / -1;
}

.admin-field-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Карточка для чекбоксов функций сайта */
.admin-field-feature-card {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px;
    padding: 14px 16px !important;
}

.admin-field-feature-card+.admin-field-feature-card {
    margin-top: 8px;
}

/* Чекбокс: строка с чекбоксом и надписью */
.admin-field-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.admin-field-checkbox-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
}

.admin-field-checkbox-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

/* Бейджи статуса */
.admin-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    line-height: 1.5;
}

.admin-badge-success {
    background: #e6f9e6;
    color: #1a7d1a;
}

.admin-badge-warning {
    background: #fff3e6;
    color: #b45a00;
}

.admin-field-warn {
    padding: 1px 7px;
    border-radius: 999px;
    background: #fdecea;
    color: #8a2018;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-field-hint {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.admin-field input,
.admin-field textarea,
.admin-field select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #d8ddd2;
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-field input:focus,
.admin-field textarea:focus,
.admin-field select:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(23, 61, 44, 0.12);
}

.admin-field input:disabled,
.admin-field textarea:disabled {
    background: #f4f6ef;
    color: var(--muted);
    cursor: not-allowed;
}

.admin-input-suffix {
    display: flex;
    align-items: stretch;
    border: 1px solid #d8ddd2;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-input-suffix:focus-within {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(23, 61, 44, 0.12);
}

.admin-input-suffix input {
    flex: 1 1 auto;
    width: auto;
    border: 0;
    border-radius: 0;
    padding: 9px 11px;
    background: transparent;
}

.admin-input-suffix input:focus {
    outline: none;
    border: 0;
    box-shadow: none;
}

.admin-input-suffix em {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: #f4f6ef;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-left: 1px solid #d8ddd2;
}

.admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 6px;
}

/* --- Admin tables --- */

.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid #e6eae0;
    border-radius: 10px;
    background: #ffffff;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table thead th {
    text-align: left;
    padding: 10px 12px;
    background: #f7f8f3;
    border-bottom: 1px solid #e6eae0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.admin-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef1ea;
    vertical-align: top;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-table tbody tr:hover td {
    background: #fafbf6;
}

.admin-table tbody tr.is-editing td {
    background: #fff8e6;
}

.admin-table .admin-num {
    text-align: right;
    white-space: nowrap;
}

.admin-table-actions {
    white-space: nowrap;
    text-align: right;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

th.admin-table-actions {
    display: table-cell;
}

.admin-table-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #f1f3ef;
    color: var(--brand-green);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

button.admin-table-link {
    line-height: 1.2;
}

.admin-table-link:hover {
    background: #e3e7dd;
    color: var(--brand-green);
    text-decoration: none;
}

.admin-table-link:disabled,
.admin-table-link[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.admin-table-link-danger {
    color: #8a2018;
    background: #fdecea;
}

.admin-table-link-danger:hover {
    background: #f8d4cf;
    color: #8a2018;
}

.admin-inline-form {
    display: inline-flex;
    margin: 0;
}

/* --- Pills --- */

.admin-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
}

.admin-pill-success {
    background: #e0f1e5;
    color: #145a32;
}

.admin-pill-info {
    background: #e0ecf8;
    color: #1f4a86;
}

.admin-pill-warning {
    background: #fdf1d8;
    color: #8a5a18;
}

.admin-pill-danger {
    background: #fdecea;
    color: #8a2018;
}

.admin-pill-muted {
    background: #eef0eb;
    color: #5e685e;
}

/* --- Toolbar (search + filters) --- */

.admin-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-toolbar-search {
    flex: 1 1 240px;
    min-width: 220px;
    padding: 9px 11px;
    border: 1px solid #d8ddd2;
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
}

.admin-toolbar-search:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(23, 61, 44, 0.12);
}

.admin-toolbar-select {
    padding: 9px 11px;
    border: 1px solid #d8ddd2;
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
    color: var(--ink);
    max-width: 100%;
}

.admin-toolbar-select:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(23, 61, 44, 0.12);
}

.admin-table tbody tr.is-current td {
    background: #eef4ec;
}

.admin-table tbody tr.is-current:hover td {
    background: #e3edde;
}

/* --- Tab counters --- */

.admin-tab-count {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef1ea;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.admin-tab.is-active .admin-tab-count {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* --- Pre block --- */

.admin-pre {
    margin: 0;
    padding: 12px 14px;
    background: #f7f8f3;
    border: 1px solid #e6eae0;
    border-radius: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* === Admin products: list + filters === */
.admin-page-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.admin-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.admin-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

.admin-filter-field-grow {
    flex: 1 1 320px;
}

.admin-filter-field>span {
    font-size: 12.5px;
    color: #6b7280;
    font-weight: 500;
}

.admin-filter-field input,
.admin-filter-field select {
    padding: 8px 10px;
    border: 1px solid #d8dcd0;
    border-radius: 8px;
    font: inherit;
    background: #fff;
}

.admin-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.admin-button-ghost {
    background: #fff;
    color: #173d2c;
    border: 1px solid #d8dcd0;
}

.admin-button-ghost:hover {
    background: #f5f7f1;
}

.admin-button-danger {
    background: #d93025;
    color: #fff;
    border: 1px solid #d93025;
}

.admin-button-danger:hover {
    background: #b8231a;
}

.admin-button-sm {
    padding: 6px 10px;
    font-size: 12.5px;
}

.admin-table-scroll {
    overflow-x: auto;
}



.admin-inline-form {
    display: inline-block;
    margin: 0;
}



.admin-pill-warning {
    background: #fdecc8;
    color: #8a5a00;
}

.admin-pagination {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-pagination-link {
    padding: 6px 12px;
    border: 1px solid #d8dcd0;
    border-radius: 8px;
    text-decoration: none;
    color: #173d2c;
    background: #fff;
}

.admin-pagination-link:hover {
    background: #f5f7f1;
}

.admin-pagination-state {
    font-size: 13px;
    color: #6b7280;
}

/* === Admin product edit === */
.admin-form-product .admin-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
}

.admin-form-grid>label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    font-weight: 500;
}

.admin-form-grid>label input,
.admin-form-grid>label select,
.admin-form-grid>label textarea {
    padding: 8px 10px;
    border: 1px solid #d8dcd0;
    border-radius: 8px;
    font: inherit;
    background: #fff;
}

.admin-form-grid-wide {
    grid-column: 1 / -1;
}

@media (max-width: 920px) {

    .admin-form-grid,
    .admin-form-product .admin-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {

    .admin-form-grid,
    .admin-form-product .admin-form-grid {
        grid-template-columns: 1fr;
    }
}

.admin-fieldset {
    border: 1px solid #e6eae0;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0;
}

.admin-fieldset legend {
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #173d2c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-fieldset>label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    font-weight: 500;
    margin-top: 12px;
}

.admin-fieldset>label:first-of-type {
    margin-top: 0;
}

.admin-fieldset>label input,
.admin-fieldset>label textarea {
    padding: 8px 10px;
    border: 1px solid #d8dcd0;
    border-radius: 8px;
    font: inherit;
    background: #fff;
}

.admin-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.admin-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

/* === Admin: images === */
.admin-image-main {
    margin-bottom: 18px;
}

.admin-image-main h3 {
    margin: 0 0 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.admin-image-main-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.admin-image-main-row img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e6eae0;
    background: #f0f2eb;
}

.admin-image-main-row>div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-image-upload-form {
    background: #f6f7f3;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.admin-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.admin-image-card {
    border: 1px solid #e6eae0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.admin-image-card.is-main {
    border-color: #1f7a35;
    box-shadow: 0 0 0 2px rgba(31, 122, 53, 0.15);
}

.admin-image-card-preview {
    position: relative;
    aspect-ratio: 1;
    background: #f0f2eb;
}

.admin-image-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-image-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #1f7a35;
    color: #fff;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.admin-image-card-meta {
    padding: 6px 8px;
    border-top: 1px solid #f0f2eb;
}

.admin-image-path {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: #6b7280;
}

.admin-image-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px 8px;
    border-top: 1px solid #f0f2eb;
    background: #fafbf6;
}

/* === Admin: variants === */
.admin-variants {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-variant {
    border: 1px solid #e6eae0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.admin-variant[open] {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.admin-variant-summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #fafbf6;
    user-select: none;
}

.admin-variant-summary::-webkit-details-marker {
    display: none;
}

.admin-variant-summary::before {
    content: '▸';
    margin-right: 6px;
    color: #6b7280;
    transition: transform 0.15s;
    display: inline-block;
}

.admin-variant[open] .admin-variant-summary::before {
    transform: rotate(90deg);
}

.admin-variant-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-variant-price {
    font-weight: 600;
    color: #173d2c;
    white-space: nowrap;
}

.admin-variant-form {
    padding: 14px 16px 16px;
    border-top: 1px solid #e6eae0;
}

.admin-variant-add .admin-variant-summary {
    background: #fff;
    color: #173d2c;
    font-weight: 600;
}

/* === Admin: category tree === */
.admin-category-tree {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-category-tree .admin-category-tree {
    margin-left: 28px;
    border-left: 1px dashed #d8dcd0;
    padding-left: 18px;
}

.admin-category-node {
    margin: 0;
    padding: 0;
}

.admin-category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    margin: 6px 0;
    background: #fff;
    border: 1px solid #e6eae0;
    border-radius: 10px;
}

.admin-category-node.is-inactive>.admin-category-row {
    background: #f8f8f3;
    opacity: 0.7;
}

.admin-category-main {
    min-width: 0;
    flex: 1 1 auto;
}

.admin-category-name {
    color: #173d2c;
    font-weight: 600;
    text-decoration: none;
    font-size: 14.5px;
}

.admin-category-name:hover {
    text-decoration: underline;
}

.admin-category-meta {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: #6b7280;
}

.admin-category-meta code {
    background: #f0f2eb;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.admin-category-meta a {
    color: #173d2c;
}

.admin-category-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.admin-button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* === Admin: variants list === */
.admin-filter-field-inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.admin-filter-field-inline input[type="checkbox"] {
    margin: 0;
}

.admin-table-thumb-sm {
    width: 40px;
    height: 40px;
}

.admin-variant-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-variant-cell-text {
    min-width: 0;
}

.admin-variant-cell-text small {
    display: block;
    margin-top: 2px;
}

.admin-row-muted {
    background: #fafafa;
    opacity: 0.85;
}

.admin-cell-input {
    width: 100%;
    min-width: 90px;
    padding: 6px 8px;
    border: 1px solid #d8dcd0;
    border-radius: 6px;
    font: inherit;
    background: #fff;
    text-align: right;
}

.admin-cell-input-xs {
    min-width: 60px;
}

.admin-cell-input::-webkit-outer-spin-button,
.admin-cell-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.admin-cell-input[type=number] {
    -moz-appearance: textfield;
}

.admin-table-variants td {
    vertical-align: middle;
}

/* === Admin: price tiers === */
.admin-card-info {
    background: #fafaf4;
    border: 1px solid #e6e3d3;
}

.admin-info-list {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.55;
    color: #4a4a3f;
}

.admin-info-list li+li {
    margin-top: 4px;
}

.admin-info-list code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12.5px;
}

.admin-cell-input-wide {
    min-width: 180px;
    text-align: left;
}

.admin-table-price-tiers .admin-cell-input {
    width: 100%;
}

.admin-table-price-tiers td {
    vertical-align: middle;
}

.admin-card-meta {
    font-size: 13px;
    color: #6b6b5e;
}

.admin-required {
    color: var(--brand-red, #d93025);
    font-weight: 700;
}

.admin-field-full {
    grid-column: 1 / -1;
}

/* ============================================================
   Admin: Joomla-style product/category UI (new editor + lists)
   ============================================================ */

/* --- Generic admin info alert --- */
.admin-alert-info {
    background: #eaf3fb;
    color: #0a4e7a;
    border: 1px solid #b7d8ef;
}

/* --- Joomla-style list table --- */
.admin-jshop-panel {
    background: #ffffff;
    border: 1px solid #d8dde0;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 12px;
    margin-bottom: 16px;
}

.admin-jshop-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.admin-jshop-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border: 1px solid #c4cad0;
    background: #f3f4f6;
    color: #303841;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.admin-jshop-btn:hover {
    background: #e6e9ed;
    border-color: #9aa3ab;
    text-decoration: none;
    color: #303841;
}

.admin-jshop-btn-primary {
    background: #2680eb;
    border-color: #1f6dc4;
    color: #ffffff;
}

.admin-jshop-btn-primary:hover {
    background: #1f6dc4;
    color: #ffffff;
}

.admin-jshop-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-jshop-filters select,
.admin-jshop-filters input[type="search"] {
    height: 34px;
    padding: 4px 10px;
    border: 1px solid #c4cad0;
    border-radius: 4px;
    font-size: 13px;
    background: #ffffff;
}

.admin-jshop-filters input[type="search"] {
    min-width: 280px;
    flex-grow: 1;
    max-width: 420px;
}

.admin-jshop-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #ffffff;
}

.admin-jshop-table thead th {
    background: #f5f6f8;
    color: #41464d;
    font-weight: 700;
    text-align: left;
    padding: 9px 8px;
    border-bottom: 2px solid #c4cad0;
    white-space: nowrap;
    font-size: 12.5px;
}

.admin-jshop-table tbody td {
    padding: 8px;
    border-bottom: 1px solid #ececec;
    vertical-align: middle;
    color: #2f3338;
}

.admin-jshop-table tbody tr:hover td {
    background: #fafbfc;
}

.admin-jshop-table tbody tr.is-inactive td {
    background: #fbf6f6;
    color: #8b8b8b;
}

.admin-jshop-table .col-mini {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.admin-jshop-table .col-img {
    width: 84px;
}

.admin-jshop-link {
    color: #2680eb;
    font-weight: 600;
    text-decoration: none;
}

.admin-jshop-link:hover {
    text-decoration: underline;
}

.admin-jshop-price {
    white-space: nowrap;
    font-weight: 600;
    color: #1c4b2c;
}

.admin-jshop-thumb {
    display: inline-flex;
    width: 64px;
    height: 64px;
    border: 1px solid #e0e3da;
    border-radius: 4px;
    overflow: hidden;
    background: #f7f8f5;
    align-items: center;
    justify-content: center;
}

.admin-jshop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-jshop-thumb-empty {
    color: #b5bbc1;
    font-size: 18px;
}

/* ok / нет badges */
.admin-fill-ok {
    display: inline-block;
    padding: 2px 7px;
    background: #1f9d55;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.admin-fill-no {
    display: inline-block;
    padding: 2px 7px;
    background: #e0e0e0;
    color: #767676;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Toggle (published) — Joomla green circle */
.admin-jshop-toggle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #c4cad0;
    background: #ffffff;
    color: #b5bbc1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}

.admin-jshop-toggle:hover {
    background: #f1f3f5;
}

.admin-jshop-toggle.is-on {
    background: #1f9d55;
    border-color: #178246;
    color: #ffffff;
}

.admin-jshop-toggle.is-on:hover {
    background: #178246;
}

.admin-jshop-delete {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: 1px solid #c4cad0;
    background: #ffffff;
    color: #c0392b;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.admin-jshop-delete:hover {
    background: #c0392b;
    border-color: #a13123;
    color: #ffffff;
}

.admin-jshop-icon-btn {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid #c4cad0;
    border-radius: 4px;
    background: #ffffff;
    color: #2680eb;
    font-size: 14px;
    text-decoration: none;
}

.admin-jshop-icon-btn:hover {
    background: #2680eb;
    border-color: #1f6dc4;
    color: #ffffff;
    text-decoration: none;
}

.admin-jshop-tree-indent {
    color: #bcc1c7;
    margin-right: 4px;
    font-family: monospace;
}

/* ============================================================
   Product / Category editor: tabs + form
   ============================================================ */

.admin-pe-form {
    background: transparent;
    margin-bottom: 16px;
}

.admin-pe-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #d8dde0;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.admin-pe-toolbar-sep {
    flex: 1 1 auto;
}

.admin-pe-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid #c4cad0;
    margin-bottom: 0;
    background: transparent;
}

.admin-pe-tab {
    padding: 9px 18px;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: #2f3338;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    position: relative;
    top: 1px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.admin-pe-tab:hover {
    background: #eef0f3;
    color: #1f6dc4;
}

.admin-pe-tab.is-active {
    background: #ffffff;
    border-color: #c4cad0;
    border-bottom-color: #ffffff;
    color: #1f6dc4;
}

.admin-pe-panel {
    background: #ffffff;
    border: 1px solid #c4cad0;
    border-top: none;
    border-radius: 0 4px 4px 4px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin-bottom: 16px;
}

.admin-pe-panel-out {
    margin-top: -16px;
    margin-bottom: 16px;
}

.admin-pe-panel-out .admin-panel {
    border-radius: 0 0 4px 4px;
    border-top: none;
}

.admin-pe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 14px 18px;
}

.admin-pe-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.admin-pe-field-wide {
    grid-column: 1 / -1;
}

.admin-pe-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #41464d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.admin-pe-label em {
    color: #c0392b;
    font-style: normal;
}

.admin-pe-field input[type="text"],
.admin-pe-field input[type="number"],
.admin-pe-field input[type="search"],
.admin-pe-field input:not([type]),
.admin-pe-field select,
.admin-pe-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #c4cad0;
    border-radius: 4px;
    font-size: 13.5px;
    color: #2f3338;
    background: #ffffff;
    font-family: inherit;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.admin-pe-field input:focus,
.admin-pe-field select:focus,
.admin-pe-field textarea:focus {
    outline: none;
    border-color: #2680eb;
    box-shadow: 0 0 0 3px rgba(38, 128, 235, 0.15);
}

.admin-pe-field input:disabled {
    background: #f5f6f8;
    color: #8b8b8b;
}

.admin-pe-checkbox-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f7f8fa;
    border: 1px solid #e3e6ea;
    border-radius: 4px;
}

.admin-pe-checkbox-row input {
    width: 18px;
    height: 18px;
}

.admin-pe-checkbox-row span {
    font-weight: 600;
    color: #2f3338;
}

.admin-pe-fieldset {
    grid-column: 1 / -1;
    border: 1px solid #e3e6ea;
    border-radius: 4px;
    padding: 12px 16px;
}

.admin-pe-fieldset legend {
    font-size: 12.5px;
    font-weight: 700;
    color: #41464d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0 6px;
}

.admin-pe-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 6px 14px;
}

.admin-pe-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: #2f3338;
    cursor: pointer;
}

.admin-pe-checkbox input {
    width: 16px;
    height: 16px;
}

.admin-pe-hint {
    margin: 4px 0 0;
    color: #6b7078;
    font-size: 12.5px;
    line-height: 1.45;
}

.admin-pe-help {
    background: #fffbe6;
    border: 1px solid #f0e1a5;
    color: #6b5d20;
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
}

.admin-pe-subhead {
    margin: 18px 0 10px;
    font-size: 15px;
    color: #41464d;
}

/* ============================================================
   Variants table (Joomla-style)
   ============================================================ */

.admin-variants-list {
    display: flex;
    flex-direction: column;
    border: 1px solid #d8dde0;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
}

.admin-variants-head,
.admin-variants-row {
    display: grid;
    grid-template-columns:
        46px
        /* radio */
        minmax(110px, 1.2fr)
        /* name */
        110px
        /* package price */
        100px
        /* old price */
        110px
        /* unit price */
        90px
        /* qty */
        72px
        /* unit */
        60px
        /* published */
        60px
        /* available */
        70px
        /* sort */
        130px;
    /* actions */
    gap: 0;
    align-items: center;
}

.admin-variants-head {
    background: #f5f6f8;
    border-bottom: 2px solid #c4cad0;
    font-size: 11.5px;
    font-weight: 700;
    color: #41464d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.admin-variants-head .col {
    padding: 9px 8px;
    border-right: 1px solid #e3e6ea;
}

.admin-variants-head .col:last-child {
    border-right: none;
}

.admin-variants-row {
    border-top: 1px solid #ececec;
    background: #ffffff;
}

.admin-variants-row:first-child {
    border-top: none;
}

.admin-variants-row.is-default {
    background: #f0f9f1;
}

.admin-variants-row .col {
    padding: 7px 8px;
    border-right: 1px solid #f1f3f5;
    min-width: 0;
}

.admin-variants-row .col:last-child {
    border-right: none;
}

.admin-variants-row .col input[type="text"],
.admin-variants-row .col input[type="number"],
.admin-variants-row .col select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #c4cad0;
    border-radius: 3px;
    font-size: 13px;
    background: #ffffff;
    box-sizing: border-box;
}

.admin-variants-row .col input:focus,
.admin-variants-row .col select:focus {
    outline: none;
    border-color: #2680eb;
    box-shadow: 0 0 0 2px rgba(38, 128, 235, 0.15);
}

.admin-variants-row .col-check {
    text-align: center;
}

.admin-variants-row .col-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.admin-variants-row .col-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.col-mobile-label {
    display: none;
    font-size: 11px;
    color: #7a8085;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.admin-radio-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #c4cad0;
    background: #ffffff;
    color: #c4cad0;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.admin-radio-btn:hover {
    background: #f1f3f5;
    color: #2680eb;
    border-color: #2680eb;
}

.admin-radio-btn.is-checked {
    background: #1f9d55;
    border-color: #178246;
    color: #ffffff;
    cursor: default;
}

.admin-pe-add-variant {
    margin-top: 12px;
    background: #f7f8fa;
    border: 1px dashed #c4cad0;
    border-radius: 4px;
    padding: 14px 16px;
}

.admin-pe-add-variant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 12px;
    align-items: end;
}

.admin-pe-add-variant-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: #41464d;
    font-weight: 600;
}

.admin-pe-add-variant-grid input,
.admin-pe-add-variant-grid select {
    padding: 7px 9px;
    border: 1px solid #c4cad0;
    border-radius: 3px;
    background: #ffffff;
    font-size: 13px;
}

.admin-pe-add-variant-grid .admin-pe-checkbox {
    align-self: center;
    margin-top: 8px;
}

.admin-pe-add-variant-actions {
    grid-column: 1 / -1;
}

/* ============================================================
   WYSIWYG editor (contenteditable)
   ============================================================ */

.ryb-wysiwyg {
    border: 1px solid #bcc0c4;
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ryb-wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    padding: 4px 6px;
    background: #f0f1f3;
    background: linear-gradient(180deg, #f8f9fa 0%, #eceef0 100%);
    border-bottom: 1px solid #bcc0c4;
    align-items: center;
    user-select: none;
}

.ryb-wysiwyg-toolbar button {
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border: 1px solid transparent;
    background: transparent;
    color: #3b3f44;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1;
}

.ryb-wysiwyg-toolbar button:hover {
    background: #e2e5e9;
    border-color: #c4c8cc;
    color: #1a1c1e;
}

.ryb-wysiwyg-toolbar button:active,
.ryb-wysiwyg-toolbar button.active {
    background: #d3d7dc;
    border-color: #a8adb3;
    color: #111;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.ryb-wysiwyg-toolbar button:focus-visible {
    outline: 2px solid #2680eb;
    outline-offset: -1px;
}

.ryb-wysiwyg-select {
    height: 28px;
    padding: 0 22px 0 7px;
    border: 1px solid #c4c8cc;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 6px center;
    -webkit-appearance: none;
    appearance: none;
    color: #3b3f44;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    min-width: 80px;
    max-width: 130px;
    transition: border-color 0.12s;
}

.ryb-wysiwyg-select:hover {
    border-color: #a8adb3;
}

.ryb-wysiwyg-select:focus {
    outline: 2px solid #2680eb;
    outline-offset: -1px;
    border-color: #2680eb;
}

.ryb-wysiwyg-sep {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: #c8ccd0;
    margin: 0 3px;
    flex-shrink: 0;
}

.ryb-wysiwyg-area {
    min-height: 280px;
    max-height: 600px;
    overflow-y: auto;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.65;
    color: #2f3338;
    outline: none;
    background: #fff;
}

.ryb-wysiwyg-area:focus {
    background: #fdfeff;
    box-shadow: inset 0 0 0 1px #d0d4d8;
}

.ryb-wysiwyg-area h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 18px 0 10px;
    line-height: 1.3;
}

.ryb-wysiwyg-area h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 14px 0 8px;
    line-height: 1.35;
}

.ryb-wysiwyg-area p {
    margin: 0 0 12px;
}

.ryb-wysiwyg-area img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 8px 0;
}

.ryb-wysiwyg-area ul,
.ryb-wysiwyg-area ol {
    margin: 0 0 10px 24px;
}

.ryb-wysiwyg-area a {
    color: #2680eb;
    text-decoration: underline;
}

.ryb-wysiwyg.is-dragover {
    outline: 2px dashed #2680eb;
    outline-offset: -2px;
}

.ryb-wysiwyg.is-dragover .ryb-wysiwyg-area {
    background: #eef5ff;
}

.ryb-wysiwyg-uploading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin: 2px;
    border-radius: 6px;
    background: #eef2f7;
    border: 1px dashed #b6c2d2;
    color: #5b6675;
    font-size: 13px;
    user-select: none;
    vertical-align: middle;
}

.ryb-wysiwyg-uploading::before {
    content: "";
    width: 13px;
    height: 13px;
    border: 2px solid #b6c2d2;
    border-top-color: #2680eb;
    border-radius: 50%;
    animation: ryb-wysiwyg-spin 0.7s linear infinite;
}

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

/* ============================================================
   Блоки «Акции»/«Новинки»: выбор товаров с картинками и фасовками
   ============================================================ */

.ryb-pkg-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    background: #f2f4f7;
    border: 1px solid #e3e6ea;
}

.ryb-pkg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ryb-pkg-thumb-empty {
    color: #aeb4bb;
    font-size: 18px;
}

.ryb-pkg-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ryb-pkg-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    background: #eef3f9;
    border: 1px solid #d8e1ec;
    color: #41526a;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}

.ryb-picker-table td {
    vertical-align: middle;
}

.ryb-pager {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

/* ============================================================
   Photos gallery
   ============================================================ */

.admin-pe-main-photo {
    background: #f7f8fa;
    border: 1px solid #e3e6ea;
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.admin-pe-main-photo h3 {
    margin: 0 0 10px;
    font-size: 14px;
    color: #41464d;
}

.admin-pe-main-photo-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.admin-pe-main-photo-row img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #d8dde0;
    background: #fff;
}

.admin-pe-upload {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: #f7f8fa;
    border: 1px dashed #c4cad0;
    border-radius: 4px;
    margin-bottom: 14px;
}

.admin-pe-upload-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 320px;
    font-size: 12.5px;
    font-weight: 600;
    color: #41464d;
}

.admin-pe-upload-field input[type="file"] {
    padding: 6px;
    border: 1px solid #c4cad0;
    border-radius: 3px;
    background: #ffffff;
    font-size: 13px;
}

.admin-pe-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.admin-pe-photo {
    background: #ffffff;
    border: 1px solid #d8dde0;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.admin-pe-photo.is-main {
    border-color: #1f9d55;
    box-shadow: 0 0 0 2px rgba(31, 157, 85, 0.15);
}

.admin-pe-photo-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f5f6f8;
    overflow: hidden;
}

.admin-pe-photo-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-pe-photo-badge {
    position: absolute;
    left: 6px;
    top: 6px;
    background: #1f9d55;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 3px 7px;
    border-radius: 3px;
}

.admin-pe-photo-actions {
    display: flex;
    justify-content: space-between;
    padding: 6px 4px;
    background: #f7f8fa;
    border-top: 1px solid #ececec;
}

.admin-pe-photo-actions button {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    border: 1px solid transparent;
    background: transparent;
    color: #41464d;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-pe-photo-actions button:hover {
    background: #ffffff;
    border-color: #c4cad0;
}

.admin-pe-photo-actions button.is-danger {
    color: #c0392b;
}

.admin-pe-photo-actions button.is-danger:hover {
    background: #c0392b;
    color: #ffffff;
    border-color: #a13123;
}

/* ============================================================
   Tree depth indents for categories list
   ============================================================ */
.admin-jshop-table tr.depth-1 td:nth-child(2) {
    padding-left: 24px;
}

.admin-jshop-table tr.depth-2 td:nth-child(2) {
    padding-left: 44px;
}

.admin-jshop-table tr.depth-3 td:nth-child(2) {
    padding-left: 64px;
}

.admin-jshop-table tr.depth-4 td:nth-child(2) {
    padding-left: 84px;
}

.admin-jshop-table tr.depth-5 td:nth-child(2) {
    padding-left: 104px;
}

/* ============================================================
   Mobile collapse
   ============================================================ */
@media (max-width: 960px) {
    .admin-variants-head {
        display: none;
    }

    .admin-variants-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px;
        border-top: 6px solid #f1f3f5;
    }

    .admin-variants-row .col {
        border-right: none;
        padding: 0;
    }

    .admin-variants-row .col-name,
    .admin-variants-row .col-actions {
        grid-column: 1 / -1;
    }

    .col-mobile-label {
        display: block;
    }

    .admin-pe-tab {
        padding: 7px 12px;
        font-size: 12.5px;
    }
}

/* ===== Admin multi-category select ===== */
.admin-pe-field-wide {
    grid-column: 1 / -1;
}

.admin-pe-multi-cat {
    width: 100%;
    min-height: 320px;
    padding: 8px 10px;
    font-family: "JetBrains Mono", "Menlo", "Consolas", monospace;
    font-size: 13px;
    line-height: 1.45;
    border: 1px solid #ccd3df;
    border-radius: 8px;
    background: #fff;
    color: #1e2230;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-pe-multi-cat:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.admin-pe-multi-cat option {
    padding: 4px 8px;
    border-radius: 4px;
}

.admin-pe-multi-cat option:checked {
    background: #2563eb linear-gradient(0deg, #2563eb, #2563eb);
    color: #fff;
    font-weight: 600;
}

.admin-pe-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #5a6478;
    line-height: 1.5;
}

.admin-pe-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: inherit;
    font-size: 11px;
    background: #eef1f6;
    border: 1px solid #cdd4df;
    border-bottom-width: 2px;
    border-radius: 4px;
    color: #2c3145;
}

/* Category chips in admin products list */
.admin-cat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 280px;
}

.admin-cat-chip {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.5;
    background: #e8edf5;
    color: #2c3145;
    border-radius: 10px;
    white-space: nowrap;
}

/* ===== Admin promo discount row ===== */
.admin-pe-promo-row {
    margin-top: 12px;
    padding: 12px 14px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 8px;
    max-width: 360px;
}

.admin-pe-promo-row .admin-pe-label {
    color: #9a3412;
    font-weight: 600;
}

.admin-pe-promo-row input[type="number"] {
    max-width: 180px;
    border-color: #fdba74;
    background: #fff;
}

/* Flag chips in admin products list */
.admin-flag-list {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.admin-flag-chip {
    display: inline-block;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 10px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-flag-promo {
    background: #fed7aa;
    color: #9a3412;
}

.admin-flag-new {
    background: #bbf7d0;
    color: #166534;
}

.admin-flag-hit {
    background: #fde68a;
    color: #92400e;
}

/* ============================================================
   Orders workspace, suppliers, analytics — UI helpers
   ============================================================ */

.admin-button-tiny {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
    min-height: 0;
}

.admin-tabs-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 14px 0;
}

.admin-tabs-dates .admin-tab {
    padding: 6px 12px;
    border-radius: 6px;
    background: #f1efe8;
    color: #4a4a4a;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-tabs-dates .admin-tab.is-active {
    background: #2c4d2a;
    color: #fff;
}

.admin-tabs-dates .admin-tab-count {
    font-size: 11px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0 5px;
    font-style: normal;
    font-weight: 600;
}

.admin-tabs-dates .admin-tab.is-active .admin-tab-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.admin-tab-form {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-left: auto;
}

.admin-tab-form input[type=date] {
    padding: 5px 8px;
    border: 1px solid #d3d0c5;
    border-radius: 4px;
    font: inherit;
}

.admin-workspace-summary {
    margin: 12px 0 16px;
}

.admin-supplier-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-supplier-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 2px solid #bbb;
    border-radius: 14px;
    font-size: 12px;
    background: #fff;
}

.admin-supplier-chip em {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.admin-color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: -2px;
}

.admin-workspace-panel {
    padding: 8px;
}

.admin-workspace-table {
    font-size: 12px;
}

.admin-workspace-table th,
.admin-workspace-table td {
    padding: 4px 6px;
    vertical-align: middle;
}

.admin-workspace-table .admin-ws-customer {
    background: #fbfaf5;
    border-left: 3px solid #2c4d2a;
    min-width: 180px;
}

.admin-workspace-table .admin-ws-address {
    background: #fbfaf5;
    min-width: 200px;
    max-width: 280px;
}

.admin-workspace-table .admin-ws-supplier select {
    width: 100%;
    border: 0;
    background: transparent;
    font-weight: 600;
    padding: 2px 4px;
}

.admin-workspace-table tr.admin-ws-order-first td {
    border-top: 2px solid #d8d2bd;
}

.admin-workspace-table input[type=text],
.admin-workspace-table input[type=number] {
    width: 100%;
    padding: 3px 5px;
    font: inherit;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 3px;
}

.admin-workspace-table input[type=text]:focus,
.admin-workspace-table input[type=number]:focus,
.admin-workspace-table select:focus {
    background: #fffbe5;
    border-color: #b7a85b;
    outline: none;
}

.admin-cell-num {
    text-align: right;
    width: 88px;
}

.admin-cell-mini {
    width: 56px;
}

.admin-cell-mid {
    width: 120px;
}

.admin-cell-wide {
    width: 100%;
    min-width: 220px;
    font-weight: 600;
}

.admin-cell-note {
    width: 100%;
    min-width: 140px;
}

.admin-cell-inline {
    display: flex;
    gap: 3px;
    margin-top: 3px;
}

.admin-order-head {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
}

.admin-order-meta fieldset {
    border: 1px solid #e1ddcd;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0 0 12px;
}

.admin-order-meta legend {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c6c6c;
    padding: 0 6px;
}

.admin-order-meta .admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px 12px;
}

.admin-items-table {
    font-size: 12px;
}

.admin-items-table th,
.admin-items-table td {
    padding: 5px 6px;
}

.admin-items-table input[type=text],
.admin-items-table input[type=number] {
    width: 100%;
    padding: 3px 5px;
    font: inherit;
    border: 1px solid #e1ddcd;
    border-radius: 3px;
}

.admin-items-table tfoot.admin-order-services td {
    padding: 4px 6px;
    border-top: 1px solid #e8e4d8;
    background: #faf9f5;
    color: #555;
}

.admin-items-table tfoot.admin-order-services tr:first-child td {
    border-top: 2px solid #d8d4c8;
}

.admin-items-table tfoot.admin-order-services .admin-order-grand-total td {
    padding-top: 8px;
    padding-bottom: 8px;
    border-top: 2px solid #173d2c;
    background: #f4f6f1;
    color: #173d2c;
    font-size: 13px;
}

.admin-row-manual td {
    background: #fff5e2;
}

.admin-row-paid td {
    background: #eaf6e7;
}

.admin-order-totals {
    margin: 12px 0 0;
    text-align: right;
}

.admin-order-totals dt {
    display: inline-block;
    margin-right: 6px;
    color: #6c6c6c;
}

.admin-order-totals dd {
    display: inline-block;
    margin: 0 16px 4px 0;
    font-weight: 600;
}

.admin-add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    align-items: end;
}

.admin-filters .admin-form-actions {
    align-self: end;
}

/* Workspace inline editable customer cells */
.admin-ws-input {
    width: 100%;
    padding: 3px 5px;
    font: inherit;
    font-size: 12px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 3px;
    margin-top: 3px;
    resize: vertical;
}

.admin-ws-input:focus {
    background: #fffbe5;
    border-color: #b7a85b;
    outline: none;
}

.admin-ws-input:hover {
    border-color: #e1ddcd;
}

.admin-ws-name {
    font-weight: 700;
    font-size: 13px;
}

.admin-ws-date {
    width: 130px;
    font-size: 11px;
}

.admin-ws-comment {
    background: #fff7d6;
    margin-top: 6px;
    border-color: #f0e3b5;
    font-size: 11px;
}

.admin-ws-supplier-input {
    font-weight: 600;
    text-align: center;
}

/* ===== Call status (прозвон клиента) ===== */
.admin-ws-call {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    margin-top: 6px;
    padding: 4px 6px;
    background: #f1f3ee;
    border-radius: 4px;
    font-size: 10px;
}

.admin-ws-call-label {
    margin-right: 4px;
    font-size: 10px;
    color: #555;
    text-transform: uppercase;
}

.admin-ws-call-btn {
    cursor: pointer;
    border: 1px solid #c0c4b9;
    background: #fff;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1;
    color: #444;
}

.admin-ws-call-btn:hover {
    background: #eef0e8;
}

.admin-ws-call-btn-confirmed {
    color: #1f7a1f;
    border-color: #b8d8b8;
}

.admin-ws-call-btn-no-answer {
    color: #888;
    border-color: #ccc;
}

.admin-ws-call-btn-callback {
    color: #a06a00;
    border-color: #e8c97a;
}

.admin-ws-call-btn-reset {
    color: #999;
}

/* Подсветка всех строк заказа цветом прозвона */
.admin-ws-call-confirmed>td {
    background-color: #e6f4e1 !important;
}

.admin-ws-call-no-answer>td {
    background-color: #eceae6 !important;
    color: #777;
}

.admin-ws-call-callback>td {
    background-color: #fff7d6 !important;
}

/* «Чек выбит» — техническая отметка для прошлых заказов. */
.admin-ws-receipt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 2px 6px;
    border: 1px dashed #b9bdb1;
    border-radius: 3px;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    user-select: none;
}

.admin-ws-receipt input {
    margin: 0;
}

.admin-ws-receipt:has(input:checked) {
    background: #e6f4e1;
    border-color: #6aa86a;
    border-style: solid;
    color: #1f7a1f;
}

/* Селектор способа оплаты на «столе заказов» — меняется на лету и пересчитывает итоги. */
.admin-ws-payment {
    font-size: 11px;
    padding: 1px 4px;
    border: 1px solid #c0c4b9;
    border-radius: 3px;
    background: #fff;
    color: #444;
    max-width: 140px;
}

/* Селектор способа доставки на «столе заказов»: доставка ↔ самовывоз без открытия карточки заказа. */
.admin-ws-delivery {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #666;
}

.admin-ws-delivery-label {
    color: #666;
}

.admin-ws-delivery-select {
    font-size: 11px;
    padding: 1px 4px;
    border: 1px solid #c0c4b9;
    border-radius: 3px;
    background: #fff;
    color: #444;
    max-width: 140px;
}

/* Блок «выгрузка/загрузка Excel» над таблицей стола заказов. */
.admin-ws-excel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid #d8dccf;
    border-radius: 5px;
    background: #fafbf6;
}

.admin-ws-excel-import {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-ws-excel-import input[type="file"] {
    font-size: 12px;
    max-width: 260px;
}

.admin-ws-excel-hint {
    flex: 1 1 240px;
    font-size: 12px;
    color: #555;
}

/* ===== Fulfilment (готовность позиции у поставщика) ===== */
.admin-ws-fulfilment-cell {
    white-space: nowrap;
    vertical-align: middle;
}

.admin-ws-fulfilment {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.admin-ws-ful-btn {
    cursor: pointer;
    border: 1px solid #c0c4b9;
    background: #fff;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1.2;
    color: #444;
    text-align: left;
}

.admin-ws-ful-btn:hover {
    background: #eef0e8;
}

.admin-ws-ful-btn-ordered {
    color: #1f7a1f;
    border-color: #b8d8b8;
}

.admin-ws-ful-btn-out {
    color: #b1392a;
    border-color: #e8b8b1;
}

.admin-ws-ful-btn-reset {
    color: #999;
}

.admin-ws-ful-btn.is-active {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px currentColor;
}

/* Подсветка ячейки «Постав-к» цветом готовности позиции */
.admin-ws-fulfilment-ordered .admin-ws-supplier {
    background-color: #d6efce !important;
}

.admin-ws-fulfilment-out .admin-ws-supplier {
    background-color: #f6d6d2 !important;
    text-decoration: line-through;
}

/* ===== Кнопка «В ожидание / Вернуть» ===== */
.admin-ws-waiting-btn {
    cursor: pointer;
    border: 1px solid #d8b88e;
    background: #fff7e6;
    color: #8a5a00;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.admin-ws-waiting-btn:hover {
    background: #fbecca;
}

.admin-ws-waiting-btn-return {
    border-color: #b8d8b8;
    background: #e6f4e1;
    color: #1f7a1f;
}

.admin-ws-waiting-btn-return:hover {
    background: #d6ecd0;
}

/* ===== Вкладка «Ожидание» ===== */
.admin-tab-waiting {
    background: #fff7e6;
    border-color: #e8c97a !important;
    color: #8a5a00 !important;
}

.admin-tab-waiting.is-active {
    background: #f0a429;
    color: #fff !important;
    border-color: #c97c00 !important;
}

.admin-tab-count-warn {
    background: #c97c00 !important;
    color: #fff !important;
}

/* ===== Вкладка «Архив» ===== */
.admin-tab-archive {
    background: #f8f9fa;
    border-color: #adb5bd !important;
    color: #495057 !important;
}

.admin-tab-archive.is-active {
    background: #6c757d;
    color: #fff !important;
    border-color: #495057 !important;
}

.admin-tab-archive.is-active .admin-tab-count {
    background: #fff !important;
    color: #6c757d !important;
}


/* ============== Home page announcements (popups / banners) ============== */
.site-announcements {
    position: relative;
    z-index: 9000;
}

/* --- Top banner --- */
.site-announcement-banner {
    width: 100%;
    background: #eef5fb;
    color: #173d2c;
    border-bottom: 1px solid #c8d9e6;
}

.site-announcement-banner.is-success {
    background: #e8f5ec;
    border-bottom-color: #b6dcc1;
}

.site-announcement-banner.is-warning {
    background: #fff5d6;
    border-bottom-color: #ecd58a;
    color: #6b4d00;
}

.site-announcement-banner.is-danger {
    background: #fce5e2;
    border-bottom-color: #ecb6af;
    color: #8a1f12;
}

.site-announcement-banner.is-promo {
    background: #173d2c;
    color: #fff8e7;
    border-bottom-color: #0e2c1e;
}

.site-announcement-banner.is-promo .site-announcement-cta {
    background: #d93025;
    color: #fff;
}

.site-announcement-banner-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.site-announcement-text {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 1.45;
}

.site-announcement-text strong {
    font-size: 15px;
}

.site-announcement-text a {
    color: inherit;
    text-decoration: underline;
}

.site-announcement-cta {
    flex: 0 0 auto;
    background: #173d2c;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.site-announcement-cta:hover {
    filter: brightness(1.07);
}

.site-announcement-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 4px 8px;
}

.site-announcement-close:hover {
    opacity: 1;
}

/* --- Modal popup --- */
.site-announcement-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.site-announcement-modal[hidden] {
    display: none;
}

.site-announcement-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 61, 44, 0.55);
    backdrop-filter: blur(2px);
}

.site-announcement-modal-card {
    position: relative;
    max-width: 480px;
    width: 100%;
    background: #fffefa;
    color: #173d2c;
    border-radius: 18px;
    padding: 28px 28px 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    border-top: 6px solid #6892b0;
    animation: site-announce-pop 0.22s ease-out;
}

@keyframes site-announce-pop {
    from {
        transform: translateY(16px) scale(0.97);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.site-announcement-modal.is-success .site-announcement-modal-card {
    border-top-color: #2e7d32;
}

.site-announcement-modal.is-warning .site-announcement-modal-card {
    border-top-color: #d8a233;
}

.site-announcement-modal.is-danger .site-announcement-modal-card {
    border-top-color: #c0392b;
}

.site-announcement-modal.is-promo .site-announcement-modal-card {
    border-top-color: #d93025;
}

.site-announcement-modal .site-announcement-close {
    position: absolute;
    top: 10px;
    right: 12px;
    color: #173d2c;
}

.site-announcement-modal-eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c7c75;
    font-weight: 700;
}

.site-announcement-modal-title {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.2;
}

.site-announcement-modal-body {
    font-size: 15px;
    line-height: 1.55;
    color: #2c3e36;
    margin-bottom: 18px;
}

.site-announcement-modal-body p {
    margin: 0 0 10px;
}

.site-announcement-modal-body a {
    color: #d93025;
    text-decoration: underline;
}

.site-announcement-modal-cta {
    display: inline-block;
    background: #173d2c;
    color: #fff;
    padding: 11px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
}

.site-announcement-modal.is-promo .site-announcement-modal-cta {
    background: #d93025;
}

.site-announcement-modal-cta:hover {
    filter: brightness(1.07);
}

body.has-announcement-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .site-announcement-banner-inner {
        flex-wrap: wrap;
        padding: 10px 14px;
    }

    .site-announcement-modal-card {
        padding: 22px 20px 20px;
    }

    .site-announcement-modal-title {
        font-size: 19px;
    }
}

/* ============== Admin: announcement list pills / badges ============== */
.admin-announcement-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #e0ecf3;
    color: #2a536d;
    white-space: nowrap;
}

.admin-announcement-badge.is-success {
    background: #d8efdc;
    color: #1e5c27;
}

.admin-announcement-badge.is-warning {
    background: #fae6b0;
    color: #6b4d00;
}

.admin-announcement-badge.is-danger {
    background: #f2c8c2;
    color: #8a1f12;
}

.admin-announcement-badge.is-promo {
    background: #173d2c;
    color: #fff8e7;
}



/* ============================================================
   Home announcements (popup & banner) — admin pills + frontend
   ============================================================ */
.admin-pill-style {
    text-transform: none;
    letter-spacing: 0;
}

.admin-pill-style-info {
    background: #e0ecf8;
    color: #1f4a86;
}

.admin-pill-style-success {
    background: #e0f1e5;
    color: #145a32;
}

.admin-pill-style-warning {
    background: #fdf1d8;
    color: #8a5a18;
}

.admin-pill-style-danger {
    background: #fdecea;
    color: #8a2018;
}

.admin-pill-style-promo {
    background: #fde2dc;
    color: #a3261a;
}



/* --- Frontend announcements: shared tokens --------------------- */
.home-announcement-banners,
.home-announcement-modal-stack {
    --ann-accent: var(--brand-green);
    --ann-accent-strong: #0f2a1e;
    --ann-tint: rgba(23, 61, 44, 0.06);
}

.home-announcement-info {
    --ann-accent: #1f4a86;
    --ann-accent-strong: #163661;
    --ann-tint: rgba(31, 74, 134, 0.07);
}

.home-announcement-success {
    --ann-accent: #2e7d4f;
    --ann-accent-strong: #1d5c39;
    --ann-tint: rgba(46, 125, 79, 0.08);
}

.home-announcement-warning {
    --ann-accent: #b1761b;
    --ann-accent-strong: #8a5a14;
    --ann-tint: rgba(177, 118, 27, 0.08);
}

.home-announcement-danger {
    --ann-accent: var(--brand-red);
    --ann-accent-strong: #a53324;
    --ann-tint: rgba(217, 48, 37, 0.07);
}

.home-announcement-promo {
    --ann-accent: var(--brand-red);
    --ann-accent-strong: #a53324;
    --ann-tint: rgba(217, 48, 37, 0.07);
}

.home-announcement-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ann-accent);
    font-weight: 800;
    line-height: 1;
}

.home-announcement-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 8px;
    background: var(--ann-accent);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s ease, transform 0.15s ease;
    box-shadow: 0 6px 14px rgba(23, 61, 44, 0.14);
}

.home-announcement-action:hover {
    background: var(--ann-accent-strong);
    transform: translateY(-1px);
}

.home-announcement-close {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.home-announcement-close:hover {
    background: rgba(23, 61, 44, 0.08);
    color: var(--brand-green);
}

/* --- Banner (top of page) -------------------------------------- */
.home-announcement-banners {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 16px;
}

.home-announcement-banner {
    position: relative;
    border-radius: var(--panel-radius);
    padding: 16px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--ann-accent);
    box-shadow: var(--shadow-soft);
    color: var(--ink);
    overflow: hidden;
}

.home-announcement-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ann-tint);
    pointer-events: none;
}

.home-announcement-banner-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.home-announcement-text {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}

.home-announcement-text strong {
    font-size: 17px;
    font-weight: 800;
    color: var(--brand-green);
    line-height: 1.25;
}

.home-announcement-banner-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
}

.home-announcement-banner-actions {
    flex-shrink: 0;
}

/* --- Toast (bottom-right floating) ----------------------------- */
.home-announcement-modal-stack {
    position: fixed;
    z-index: 9000;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.home-announcement-toast {
    position: relative;
    pointer-events: auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--panel-radius);
    padding: 18px 22px 18px 26px;
    box-shadow: 0 20px 44px rgba(23, 61, 44, 0.16), 0 4px 12px rgba(23, 61, 44, 0.08);
    overflow: hidden;
    animation: home-announcement-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.home-announcement-toast[hidden] {
    display: none;
}

.home-announcement-toast.is-leaving {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
}

.home-announcement-accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--ann-accent);
}

.home-announcement-toast::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ann-tint);
    pointer-events: none;
}

.home-announcement-toast-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-announcement-toast .home-announcement-close {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 1;
}

.home-announcement-toast h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--brand-green);
    padding-right: 24px;
    line-height: 1.25;
}

.home-announcement-body {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.55;
}

.home-announcement-body a {
    color: var(--brand-green);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

.home-announcement-body a:hover {
    color: var(--brand-red);
}

.home-announcement-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.home-announcement-modal-actions .home-announcement-action {
    padding: 8px 16px;
    font-size: 13px;
}

@keyframes home-announcement-pop {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 640px) {
    .home-announcement-banner-inner {
        align-items: stretch;
    }

    .home-announcement-banner-actions {
        width: 100%;
    }

    .home-announcement-banner-actions .home-announcement-action {
        display: flex;
        width: 100%;
    }

    .home-announcement-modal-stack {
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
    }

    .home-announcement-toast {
        padding: 16px 18px 16px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .home-announcement-toast,
    .home-announcement-action {
        animation: none;
        transition: none;
    }
}

/* === Модуль сравнения товаров === */
.compare-link {
    color: #ffffff !important;
    background: #2f7a55;
    margin-left: 6px;
}

.compare-link:hover,
.compare-link:focus-visible {
    color: #ffffff !important;
    background: #1f5a3e !important;
}

.compare-link.is-empty {
    background: #88a597;
}

.compare-link span {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    min-height: 20px;
    border-radius: 10px;
    margin-left: 5px;
    padding: 2px 6px;
    color: #ffffff;
    background: var(--brand-red);
    font-size: 12px;
    line-height: 1;
    position: absolute;
    top: -7px;
    right: -6px;
}

.compare-link span[hidden] {
    display: none;
}

.compare-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(18, 63, 43, 0.18);
    background: rgba(255, 255, 255, 0.92);
    color: var(--brand-green, #173d2c);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.compare-toggle:hover,
.compare-toggle:focus-visible {
    background: #edf5ea;
    border-color: rgba(18, 63, 43, 0.32);
    outline: none;
}

.compare-toggle.is-active {
    background: #2f7a55;
    border-color: #2f7a55;
    color: #ffffff;
}

.compare-toggle.is-active:hover,
.compare-toggle.is-active:focus-visible {
    background: #1f5a3e;
    border-color: #1f5a3e;
    color: #ffffff;
}

.compare-toggle-icon {
    font-size: 14px;
    line-height: 1;
}

.compare-toggle-card {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    box-shadow: 0 2px 6px rgba(18, 63, 43, 0.12);
}

.compare-toggle-card .compare-toggle-label {
    display: none;
}

@media (min-width: 720px) {
    .compare-toggle-card .compare-toggle-label {
        display: inline;
    }
}

.product-card {
    position: relative;
}

.product-detail-compare {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.product-detail-compare-link {
    color: var(--brand-green, #173d2c);
    font-size: 13px;
    text-decoration: underline;
}

.product-detail-compare-link:hover {
    text-decoration: none;
}

.compare-page {
    display: grid;
    gap: 20px;
}

.compare-page-heading {
    display: grid;
    gap: 8px;
}

.compare-page-lead {
    color: rgba(18, 63, 43, 0.78);
    max-width: 720px;
}

.compare-empty {
    display: grid;
    gap: 12px;
    padding: 32px;
    text-align: center;
}

.compare-empty-action {
    display: inline-flex;
    margin-top: 8px;
}

.compare-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
}

.compare-toolbar-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.compare-toolbar-link {
    color: var(--brand-green, #173d2c);
    text-decoration: underline;
}

.compare-toolbar-link:hover {
    text-decoration: none;
}

.compare-toolbar-clear {
    border: none;
    background: none;
    color: var(--brand-red, #d93025);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.compare-toolbar-clear:hover {
    text-decoration: underline;
}

.compare-grid-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.compare-grid {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 600px;
    background: #ffffff;
    border: 1px solid rgba(18, 63, 43, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.compare-grid th,
.compare-grid td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(18, 63, 43, 0.08);
    vertical-align: top;
    text-align: left;
    font-size: 14px;
    line-height: 1.45;
}

.compare-grid tbody th {
    width: 180px;
    background: rgba(18, 63, 43, 0.04);
    color: rgba(18, 63, 43, 0.78);
    font-weight: 600;
}

.compare-grid tbody tr:last-child th,
.compare-grid tbody tr:last-child td {
    border-bottom: none;
}

.compare-grid-feature {
    width: 180px;
    background: rgba(18, 63, 43, 0.06);
}

.compare-grid-product {
    position: relative;
    min-width: 220px;
    background: #ffffff;
    text-align: center;
    padding: 18px 14px 14px;
}

.compare-grid-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(18, 63, 43, 0.2);
    background: #ffffff;
    color: rgba(18, 63, 43, 0.7);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

.compare-grid-remove:hover {
    background: #fde9e7;
    border-color: var(--brand-red, #d93025);
    color: var(--brand-red, #d93025);
}

.compare-grid-image {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0 auto 10px;
    border-radius: 10px;
    overflow: hidden;
    background: #f6f3ec;
}

.compare-grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-grid-image-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: rgba(18, 63, 43, 0.45);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.compare-grid-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--brand-green, #173d2c);
    text-decoration: none;
    margin-bottom: 4px;
}

.compare-grid-name:hover {
    text-decoration: underline;
}

.compare-grid-category {
    color: rgba(18, 63, 43, 0.6);
    font-size: 12px;
    margin: 0;
}

.compare-grid-price-cell strong {
    font-size: 17px;
    color: var(--brand-green, #173d2c);
}

.compare-grid-price-cell.is-best {
    background: rgba(46, 122, 85, 0.08);
}

.compare-grid-price-unit {
    display: block;
    color: rgba(18, 63, 43, 0.65);
    font-size: 12px;
}

.compare-grid-best-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    background: #2f7a55;
    color: #ffffff;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.compare-variant-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.compare-variant-list li {
    display: grid;
    gap: 2px;
    padding: 6px 8px;
    background: rgba(18, 63, 43, 0.035);
    border-radius: 6px;
}

.compare-variant-name {
    font-weight: 600;
    color: var(--brand-green, #173d2c);
}

.compare-variant-price small {
    color: rgba(18, 63, 43, 0.6);
    font-size: 11px;
}

.compare-status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.compare-status {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

.compare-status-ok {
    background: rgba(46, 122, 85, 0.14);
    color: #1f5a3e;
}

.compare-status-warn {
    background: rgba(217, 48, 37, 0.14);
    color: #b1241a;
}

.compare-status-info {
    background: rgba(18, 103, 125, 0.14);
    color: #115060;
}

.compare-status-promo {
    background: rgba(217, 48, 37, 0.2);
    color: var(--brand-red, #d93025);
}

.compare-short-description {
    margin: 0;
    color: rgba(18, 63, 43, 0.78);
    font-size: 13px;
}

.compare-open-product {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--brand-green, #173d2c);
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.compare-open-product:hover {
    background: #0d3020;
}

@media (max-width: 720px) {
    .compare-link {
        margin-left: 0;
    }

    .compare-toggle-card {
        padding: 6px;
    }
}

/* ======================= Личный кабинет клиента ======================= */
.account-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.account-panel {
    max-width: 640px;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}

.account-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
    color: var(--ink);
}

.account-form input {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 16px;
    background: var(--field, #fff);
    color: var(--ink);
}

.account-form input:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(23, 61, 44, 0.12);
}

.account-code-input {
    letter-spacing: 10px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
}

.account-hint {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 8px 0 0;
}

.account-hint-muted {
    font-size: 13px;
}

.account-resend {
    margin-top: 14px;
}

.account-link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--brand-green);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
}

.account-link-button:hover {
    color: var(--brand-red);
}

.account-flash-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 18px;
}

.account-flash {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid transparent;
}

.account-flash-success {
    background: #eaf6ee;
    border-color: #bfe3cb;
    color: #1d6b3a;
}

.account-flash-error {
    background: var(--brand-red-soft, #fff2ef);
    border-color: #f3c4bd;
    color: var(--brand-red, #d93025);
}

.account-flash-info {
    background: var(--wash);
    border-color: var(--line);
    color: var(--ink);
}

.account-logout {
    margin: 0;
}

/* Список заказов */
.account-orders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 16px;
}

.account-order-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-order-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.account-order-number {
    display: block;
    font-weight: 700;
    color: var(--ink);
}

.account-order-date {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-top: 2px;
}

.account-order-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 14px;
}

.account-order-meta strong {
    color: var(--ink);
    font-size: 16px;
}

.account-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--wash);
    color: var(--ink);
    border: 1px solid var(--line);
}

.account-status-new {
    background: #eef4ff;
    color: #2456c0;
    border-color: #c9dbf7;
}

.account-status-confirmed {
    background: #eef7f0;
    color: #1d6b3a;
    border-color: #c3e3cd;
}

.account-status-assembling,
.account-status-ready,
.account-status-delivering {
    background: #fff6e6;
    color: #97600f;
    border-color: #f0dcae;
}

.account-status-completed {
    background: #e7f6ec;
    color: #137a3a;
    border-color: #b6e1c4;
}

.account-status-cancelled {
    background: var(--brand-red-soft, #fff2ef);
    color: var(--brand-red, #d93025);
    border-color: #f3c4bd;
}

/* Карточка заказа */
.account-order-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 10px;
}

.account-summary-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.account-summary-row>span:first-child {
    color: var(--muted);
    font-size: 14px;
}

.account-summary-row strong {
    text-align: right;
    color: var(--ink);
}

.account-items {
    display: flex;
    flex-direction: column;
}

.account-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.account-item:last-child {
    border-bottom: none;
}

.account-item-name strong {
    display: block;
    color: var(--ink);
}

.account-item-name small {
    color: var(--muted);
    font-size: 13px;
}

.account-item-qty {
    color: var(--muted);
    font-size: 14px;
    white-space: nowrap;
}

.account-item-total {
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.account-totals {
    margin: 18px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-totals>div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.account-totals dt {
    color: var(--muted);
}

.account-totals dd {
    margin: 0;
    color: var(--ink);
}

.account-totals-grand {
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin-top: 4px;
    font-size: 18px;
    font-weight: 700;
}

.account-totals-grand dt,
.account-totals-grand dd {
    color: var(--ink);
}

@media (max-width: 720px) {
    .account-link {
        margin-left: 0;
    }

    .account-item {
        grid-template-columns: 1fr auto;
        row-gap: 4px;
    }

    .account-item-total {
        grid-column: 2;
    }
}

/* === Мобильное нижнее меню (быстрая навигация) === */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    body {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 2px;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 254, 250, 0.97);
        border-top: 1px solid var(--line);
        box-shadow: 0 -8px 24px rgba(23, 61, 44, 0.10);
        backdrop-filter: blur(14px);
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 50px;
        border-radius: 12px;
        padding: 4px 2px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav-item:hover {
        text-decoration: none;
        color: var(--brand-green);
    }

    .mobile-nav-item.is-active {
        color: var(--brand-green);
        background: #eef4ea;
    }

    .mobile-nav-ico {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-nav-ico svg {
        display: block;
        width: 24px;
        height: 24px;
    }

    .mobile-nav-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-badge {
        position: absolute;
        top: -6px;
        left: calc(50% + 6px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--brand-red);
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
    }

    .mobile-nav-badge[hidden] {
        display: none;
    }

    .home-announcement-modal-stack {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}

/* === Кнопка «Наверх» для мобильной версии === */
.mobile-scroll-top {
    display: none;
    position: fixed;
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 49;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 254, 250, 0.95);
    color: var(--brand-green);
    box-shadow: 0 2px 12px rgba(23, 61, 44, 0.18);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
    transform: translateY(12px);
}

.mobile-scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mobile-scroll-top svg {
    display: block;
    width: 26px;
    height: 26px;
}

.mobile-scroll-top:hover {
    background: #eef4ea;
    box-shadow: 0 4px 16px rgba(23, 61, 44, 0.24);
}

@media (max-width: 760px) {
    .mobile-scroll-top {
        display: flex;
    }
}

/* ==========================================================================
   Блокировка панели Яндекс.Браузера («Умная камера»/Нейро) поверх картинок.
   Панель показывается только когда верхний элемент под курсором — <img>.
   Делаем крупные витринные изображения некликабельными: клик ловит
   родительская ссылка <a>, а у главного фото товара клика и нет. Превью
   в каталоге, фото товара и картинки в сравнении больше не подсвечивают
   панель и не уводят пользователя на сторонний сервис.
   Маленькие миниатюры (.product-thumbs img) остаются кликабельными —
   панель на них и так не появляется из-за малого размера.
   ========================================================================== */
.product-card-image img,
#product-main-image,
.compare-grid-image img {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}


/* ==========================================================================
   Стол заказов — Excel-режим (ws-*). Крупная таблица с inline-правкой ячеек,
   автосохранением и цветовой индикацией прозвона/готовности.
   Палитра совпадает с WorkspaceExcelExporter (выгрузка в Excel).
   ========================================================================== */
.ws-panel {
    padding: 12px;
    overflow: visible;
}

.ws-hint {
    margin: 0 0 10px;
    font-size: 12px;
    color: #6b7280;
}

.ws-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #f8fafc;
    font: 600 11px/1.4 ui-monospace, monospace;
    color: #334155;
}

.ws-grid-wrap {
    overflow-x: auto;
    border: 1px solid #d8dee9;
    border-radius: 8px;
}

.ws-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.35;
    table-layout: fixed;
}

.ws-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #1f2d3d;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    padding: 8px 8px;
    white-space: nowrap;
    border-right: 1px solid rgba(255, 255, 255, .12);
}

.ws-grid thead th.ws-num {
    text-align: right;
}

.ws-grid tbody td {
    padding: 0;
    border-right: 1px solid #e6eaf0;
    border-bottom: 1px solid #e6eaf0;
    vertical-align: top;
    background: #fff;
}

.ws-grid tbody tr.ws-order-first td {
    border-top: 2px solid #c3ccd9;
}

/* Ширины колонок */
.ws-col-name {
    width: 220px;
}

.ws-col-email {
    width: 150px;
}

.ws-col-phone {
    width: 150px;
    min-width: 150px;
}

.ws-col-phone .ws-cell,
.ws-cell[data-field="phone"] {
    min-width: 140px;
    width: 100%;
}

.ws-col-address {
    width: 170px;
}

.ws-col-supplier {
    width: 130px;
}

.ws-col-product {
    width: 220px;
}

.ws-grid .ws-num {
    width: 84px;
}

.ws-col-note {
    width: 150px;
}

.ws-col-pay {
    width: 120px;
}

.ws-col-receipt {
    width: 48px;
}

.ws-drag-handle {
    width: 28px;
    text-align: center;
    vertical-align: middle;
    cursor: grab;
    user-select: none;
    padding: 0 !important;
}

.ws-drag-icon {
    display: inline-block;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -1px;
    cursor: grab;
    user-select: none;
}

.ws-drag-handle:hover .ws-drag-icon {
    color: #475569;
}

.ws-dragging .ws-drag-icon {
    color: #3b82f6;
    cursor: grabbing;
}

/* Базовая ячейка-инпут — без рамок, рамка появляется при фокусе (как в Excel) */
.ws-cell {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
    background: transparent;
    padding: 7px 8px;
    font: inherit;
    color: #1f2937;
    border-radius: 4px;
    outline: none;
    transition: background .12s, border-color .12s, box-shadow .12s;
}

.ws-cell:hover {
    background: #f3f6fb;
}

.ws-cell:focus {
    background: #fff;
    border-color: #2f6df6;
    box-shadow: inset 0 0 0 1px #2f6df6, 0 0 0 2px rgba(47, 109, 246, .18);
}

textarea.ws-cell {
    resize: vertical;
    min-height: 34px;
}

.ws-num .ws-cell,
.ws-num-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ws-num {
    text-align: right;
}

.ws-total-cell {
    text-align: right;
    padding: 7px 8px !important;
    background: #f8fafc;
}

.ws-line-total {
    font-variant-numeric: tabular-nums;
    color: #0f5132;
}

/* Колонка клиента */
.ws-customer {
    padding: 8px !important;
}

.ws-name {
    font-weight: 600;
    font-size: 15px;
}

.ws-customer-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 2px 6px;
    font-size: 12px;
    flex-wrap: wrap;
}

.ws-order-links {
    display: inline-flex;
    gap: 6px;
}

.ws-order-links a {
    color: #2f6df6;
    text-decoration: none;
    border-bottom: 1px dotted rgba(47, 109, 246, .4);
}

.ws-order-links a:hover {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
}

.ws-date-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 12px;
    color: #6b7280;
}

.ws-date-row span {
    flex: 0 0 auto;
}

.ws-customer-desired {
    font-size: 12px;
    color: #2563eb;
    background: #eff6ff;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.ws-date {
    padding: 4px 6px;
}

.ws-customer-totals {
    margin: 6px 2px 4px;
    font-size: 12px;
    color: #4b5563;
}

.ws-order-total {
    color: #111827;
}

.ws-order-profit {
    color: #0f5132;
    font-weight: 600;
}

.ws-order-discount {
    color: #c0392b;
    font-weight: 600;
}

.ws-order-profit.ws-neg,
.ws-neg {
    color: #c0392b;
}

.ws-customer-comment {
    margin: 6px 2px 0;
    padding: 6px 8px;
    background: #fff7e6;
    border-left: 3px solid #f0b429;
    border-radius: 4px;
    font-size: 12px;
    font-style: italic;
    color: #6b5400;
}

/* Группы кнопок-статусов */
.ws-call,
.ws-ready {
    display: inline-flex;
    gap: 3px;
    margin: 2px 0;
}

.ws-call-btn,
.ws-ready-btn,
.ws-waiting-btn {
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1;
    color: #374151;
    transition: transform .08s, box-shadow .12s, background .12s;
}

.ws-status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #374151;
    cursor: pointer;
    transition: transform .08s, box-shadow .12s, background .12s;
}

.ws-ready-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.ws-status-btn:hover,
.ws-ready-btn:hover {
    transform: translateY(-1px);
}

.ws-status-btn.is-active.ws-status-confirmed,
.ws-status-confirmed:hover {
    background: #22c55e;
    border-color: #16a34a;
    color: #fff;
}

.ws-status-btn.is-active.ws-status-no-answer,
.ws-status-no-answer:hover {
    background: #6b7280;
    border-color: #4b5563;
    color: #fff;
}

.ws-status-btn.is-active.ws-status-waiting,
.ws-status-waiting:hover {
    background: #eab308;
    border-color: #ca8a04;
    color: #fff;
}

.ws-status-btn.is-active.ws-status-cancelled,
.ws-status-cancelled:hover {
    background: #ef4444;
    border-color: #dc2626;
    color: #fff;
}

.ws-status-restore {
    background: #f0fdf4;
    border-color: #16a34a;
    color: #166534;
}

.ws-status-restore:hover {
    background: #16a34a;
    border-color: #15803d;
    color: #fff;
}

.ws-status-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.ws-bulk-check {
    width: 36px;
    text-align: center;
    vertical-align: middle;
}

.ws-bulk-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.ws-bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e6eaf0;
    border-radius: 6px;
}

.ws-bulk-count {
    font-size: 13px;
    color: #374151;
}

.ws-bulk-date {
    font-size: 13px;
    padding: 5px 8px;
    border-radius: 5px;
    border: 1px solid #d1d5db;
}

.ws-tech-comment {
    width: 100%;
    margin-top: 6px;
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #fff;
}

.ws-order-extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e5e7eb;
}

.ws-cash-discount,
.ws-lift-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
}

.ws-cash-discount input {
    width: 60px;
    text-align: right;
}

.ws-lift-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Дополнительные строки заказа: скидка, доставка и подъём */
.ws-discount-row td,
.ws-delivery-row td,
.ws-lift-row td {
    background: #f8fafc;
    border-bottom: 1px solid #e6eaf0;
}

.ws-discount-row.ws-order-last td,
.ws-delivery-row.ws-order-last td,
.ws-lift-row.ws-order-last td {
    border-bottom: 2px solid #c3ccd9;
}

.ws-extra-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-right: 8px;
    min-width: 56px;
}

.ws-discount-row .ws-extra-label {
    color: #c0392b;
}

.ws-delivery-row .ws-extra-label {
    color: #1e4a86;
}

.ws-lift-row .ws-extra-label {
    color: #0f5132;
}

.ws-discount-row .ws-num-input,
.ws-delivery-row .ws-num-input,
.ws-lift-row .ws-num-input {
    width: 90px;
    text-align: right;
}

.ws-discount-total {
    color: #c0392b;
}

.ws-discount-percent {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #c0392b;
}

.ws-lift-total {
    color: #0f5132;
}

.ws-ready-btn.is-active.ws-ready-ordered {
    background: #92d050;
    border-color: #6ea531;
    color: #1f3d00;
}

.ws-ready-btn.is-active.ws-ready-out {
    background: #ffa8a8;
    border-color: #e57373;
    color: #7f1d1d;
}

.ws-ready-btn.is-active.ws-ready-reset {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.ws-waiting-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
}

.ws-waiting-btn-return {
    background: #fff7e6;
    border-color: #f0b429;
    color: #92600a;
}

/* Товар */
.ws-product-td {
    padding: 6px 8px !important;
}

.ws-product-input {
    font-weight: 600;
}

.ws-product-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.ws-product-variant {
    font-size: 12px;
    color: #6b7280;
}

/* Поставщик */
.ws-supplier-input {
    font-size: 13px;
}

/* Оплата / чек */
.ws-pay-td,
.ws-receipt-td {
    padding: 6px 8px !important;
}

.ws-receipt-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 32px;
}

.ws-check {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: #2f6df6;
}

/* Цветовая заливка строк по статусам обзвона */
.ws-row.ws-call-confirmed td {
    background: #bbf7d0 !important;
}

.ws-row.ws-call-no-answer td {
    background: #d1d5db !important;
}

.ws-row.ws-call-waiting td {
    background: #fde047 !important;
}

.ws-row.ws-ful-ordered .ws-product-td {
    background: #eef9e0;
}

.ws-row.ws-ful-out .ws-product-td {
    background: #ffeaea;
}

.ws-row.ws-ful-pending .ws-supplier-td {
    background: #fff7e6 !important;
}

.ws-row.ws-status-assembling td {
    background: #ffd1dc !important;
}

.ws-status-btn.is-active.ws-status-assembling,
.ws-status-assembling:hover {
    background: #ff9eb5;
    border-color: #ff7a9a;
    color: #fff;
}

/* Подсветка сохранения ячейки */
@keyframes ws-saved-fade {
    0% {
        box-shadow: inset 0 0 0 2px #34c759;
    }

    100% {
        box-shadow: inset 0 0 0 2px transparent;
    }
}

@keyframes ws-error-fade {
    0% {
        box-shadow: inset 0 0 0 2px #e53935;
    }

    100% {
        box-shadow: inset 0 0 0 2px transparent;
    }
}

.ws-saved {
    animation: ws-saved-fade 1.4s ease-out;
}

.ws-save-error {
    animation: ws-error-fade 1.4s ease-out;
}

.admin-tab-new.is-active {
    background: #eef4ff;
    border-color: #2f6df6;
    color: #1d4ed8;
}

/* ===== Consistent price block & promo readability ===== */
/*
   Чтобы акционные и обычные карточки не "плясали" по высоте, вся ценовая
   информация обёрнута в .product-card-price-block с фиксированным min-height.
   Внутри блока каждая строка имеет строго отведённую высоту, поэтому
   зачёркнутая старая цена и новая всегда выровнены в одну линию.
   При наличии старой цены новая подсвечивается красным — явный признак акции.
*/

.product-card-buy-block {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: auto;
}

.product-card-actions {
    min-height: 44px;
}

.product-card-price-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    min-height: 110px;
    margin-bottom: 10px;
}

.product-card-price-block:has(.product-card-unavailable-note) {
    justify-content: center;
}

.home-products-strip .product-card-price-block {
    min-height: 92px;
    margin-bottom: 8px;
}

/* Новая цена становится красной, когда рядом есть зачёркнутая старая */
.price-unit-values:has(.old-price:not([hidden])) > b,
.package-price-values:has(.old-price:not([hidden])) > span:not(.old-price),
.variant-row .price-unit-values:has(.old-price:not([hidden])) > b,
.variant-row .package-price-values:has(.old-price:not([hidden])) > span:not(.old-price) {
    color: var(--brand-red);
}

/* Одинаковая высота блока цен в карточке товара */
.variant-row-prices {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 118px;
}

@media (max-width: 760px) {
    .variant-row-prices {
        min-height: 96px;
    }
}

/* Мобильная адаптация: узкие 2-колоночные карточки каталога.
   Цена за кг — справочная, мелкая; цена за фасовку — основная,
   шаговая и выделенная. Обе строки в одну линию. */
@media (max-width: 520px) {
    .product-grid .product-card-price-block,
    .catalog-product-grid .product-card-price-block {
        min-height: 96px;
        margin-bottom: 8px;
    }

    .home-products-strip .product-card-price-block {
        min-height: 92px;
    }

    .product-grid .product-card .price-line,
    .product-grid .product-card .package-price-line,
    .catalog-product-grid .product-card .price-line,
    .catalog-product-grid .product-card .package-price-line {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    .product-grid .product-card .price-unit-label,
    .product-grid .product-card .package-price-label,
    .catalog-product-grid .product-card .price-unit-label,
    .catalog-product-grid .product-card .package-price-label {
        overflow: hidden;
        line-height: 1.2;
        color: var(--muted);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Справочная цена за кг — мелкая, приглушённая */
    .product-grid .product-card .price-line,
    .catalog-product-grid .product-card .price-line {
        min-height: 26px;
    }

    .product-grid .product-card .price-unit-label,
    .catalog-product-grid .product-card .price-unit-label {
        font-size: 10px;
    }

    .product-grid .product-card .price-line .price-unit-values,
    .catalog-product-grid .product-card .price-line .price-unit-values {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 5px;
        min-width: 0;
    }

    .product-grid .product-card .price-line .old-price,
    .catalog-product-grid .product-card .price-line .old-price {
        font-size: 10px;
        color: #7d877a;
    }

    .product-grid .product-card .price-line .price-unit-values > b,
    .catalog-product-grid .product-card .price-line .price-unit-values > b {
        font-size: 12px;
        font-weight: 600;
        color: #5f6b5e;
    }

    /* Основная цена за фасовку — крупная, яркая */
    .product-grid .product-card .package-price-line,
    .catalog-product-grid .product-card .package-price-line {
        min-height: 38px;
        padding-top: 4px;
    }

    .product-grid .product-card .package-price-label,
    .catalog-product-grid .product-card .package-price-label {
        font-size: 11px;
    }

    .product-grid .product-card .package-price-line .package-price-values,
    .catalog-product-grid .product-card .package-price-line .package-price-values {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 6px;
        min-width: 0;
    }

    .product-grid .product-card .package-price-line .old-price,
    .catalog-product-grid .product-card .package-price-line .old-price {
        font-size: 11px;
        color: #6e7868;
    }

    .product-grid .product-card .package-price-line .package-price-values > span:not(.old-price),
    .catalog-product-grid .product-card .package-price-line .package-price-values > span:not(.old-price) {
        font-size: 16px;
        font-weight: 800;
    }

    /* Акционная подсветка только у основной цены за фасовку */
    .product-grid .product-card .package-price-values:has(.old-price:not([hidden])),
    .catalog-product-grid .product-card .package-price-values:has(.old-price:not([hidden])) {
        background: var(--brand-red-soft);
        border: 1px solid rgba(217, 48, 37, 0.12);
        border-radius: 999px;
        padding: 1px 8px;
    }

    .product-grid .product-card .package-price-note,
    .catalog-product-grid .product-card .package-price-note {
        min-height: 12px;
        margin: 2px 0 4px;
        font-size: 10px;
    }
}

/* --- Inline-editable orders list --- */
.order-cell {
    width: 100%;
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: inherit;
}

.order-cell:hover,
.order-cell:focus {
    background: #fff;
    border-color: #b8c5b3;
    outline: none;
}

.order-cell-wide {
    min-width: 140px;
}

.order-paid-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    margin-top: 3px;
    white-space: nowrap;
}

.order-calc {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: flex-end;
    align-items: center;
}

.order-calc .order-cell {
    width: 58px;
    text-align: right;
}

.order-calc .order-cell[data-field="cash_discount_percent"] {
    width: 52px;
}

.order-total {
    margin-left: 4px;
    white-space: nowrap;
}

.order-bulk-bar {
    position: sticky;
    top: 10px;
    z-index: 50;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f6f8f4;
    border: 1px solid #e6eae0;
    border-radius: 8px;
}

.admin-table-checkbox {
    width: 36px;
    text-align: center;
}

td.admin-table-checkbox,
th.admin-table-checkbox {
    padding-left: 8px;
    padding-right: 8px;
}

.ol-saved {
    animation: ol-flash-green 0.8s ease;
}

.ol-save-error {
    animation: ol-flash-red 0.8s ease;
}

@keyframes ol-flash-green {
    0% { background-color: rgba(39, 174, 96, 0.25); }
    100% { background-color: transparent; }
}

@keyframes ol-flash-red {
    0% { background-color: rgba(192, 57, 43, 0.25); }
    100% { background-color: transparent; }
}

/* --- Workspace Excel-like enhancements --- */
.admin-tabs-dates {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
}

.ws-panel {
    position: relative;
}

.ws-grid thead th {
    position: sticky;
    top: 48px;
    z-index: 80;
    background: #ffffff;
}

.ws-cell:focus {
    outline: 2px solid #4a7c59;
    outline-offset: -2px;
    background: #ffffff;
}

.ws-cell-selected {
    box-shadow: inset 0 0 0 2px #4a7c59;
    background: rgba(74, 124, 89, 0.08);
}

.ws-row-focused {
    background: rgba(74, 124, 89, 0.05);
}

.ws-order-first[draggable="true"] {
    cursor: grab;
}

.ws-order-first[draggable="true"]:active {
    cursor: grabbing;
}

.admin-tab-drop-target {
    background: #e8f5e9 !important;
    border-color: #4a7c59 !important;
}

.ws-filter-row {
    position: sticky;
    top: 70px;
    z-index: 75;
    background: #f6f8f4;
}

.ws-filter-row th {
    top: 70px;
    z-index: 75;
    background: #f6f8f4;
    border-bottom: 1px solid #e6eae0;
}

.ws-filter-row input {
    width: 100%;
    padding: 3px 6px;
    font-size: 12px;
    border: 1px solid #e6eae0;
    border-radius: 4px;
}

.ws-group-header {
    background: #edf2e9;
    font-weight: 600;
    cursor: pointer;
}

.ws-group-header td {
    padding: 8px 12px;
}

.ws-group-collapsed + tbody {
    display: none;
}

.ws-group-toggle::before {
    content: '▼';
    display: inline-block;
    margin-right: 6px;
    font-size: 10px;
}

.ws-group-collapsed .ws-group-toggle::before {
    content: '▶';
}


/* ==========================================================================
   Workspace: адаптивность и читаемость текста
   ========================================================================== */

/* Сводка над таблицей — компактные карточки с переносом длинных слов */
.admin-workspace-summary.admin-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 10px 0 14px;
}

.admin-workspace-summary.admin-stats > div {
    flex: 1 1 120px;
    min-width: 110px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e6eaf0;
    border-radius: 6px;
}

.admin-workspace-summary.admin-stats dt {
    font-size: 11px;
    color: #6b7280;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.25;
    word-break: break-word;
}

.admin-workspace-summary.admin-stats dd {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 760px) {
    .admin-workspace-summary.admin-stats > div {
        flex: 1 1 100px;
        min-width: 90px;
    }

    .admin-workspace-summary.admin-stats dd {
        font-size: 14px;
    }
}

.ws-stat-confirmed {
    color: #16a34a;
}

.ws-stat-unprocessed {
    color: #374151;
}

.ws-stat-unprocessed.ws-stat-warn {
    color: #dc2626;
}

/* Таблица растягивается по содержимому, горизонтальный скролл */
.ws-grid-wrap .ws-grid {
    width: auto;
    font-size: 13px;
}

/* Залипающий заголовок целиком (вместо отдельных ячеек) */
.ws-grid-wrap .ws-grid thead {
    position: sticky;
    top: 48px;
    z-index: 80;
    background: #1f2d3d;
}

.ws-grid-wrap .ws-grid thead th {
    position: static;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
    vertical-align: bottom;
    font-size: 11px;
    padding: 6px 6px;
    background: transparent;
}

/* Строка фильтров больше не залипает отдельно, прокручивается вместе с thead */
.ws-grid-wrap .ws-grid thead tr.ws-filter-row {
    position: static;
    background: #f6f8f4;
}

.ws-grid-wrap .ws-grid thead tr.ws-filter-row th {
    background: transparent;
    color: #1f2937;
    padding: 4px;
    vertical-align: middle;
}

.ws-grid-wrap .ws-grid thead tr.ws-filter-row input {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid #d8dee9;
    border-radius: 4px;
    background: #fff;
}

.ws-grid-wrap .ws-grid thead tr.ws-filter-row input:focus {
    outline: none;
    border-color: #2f6df6;
    box-shadow: 0 0 0 2px rgba(47, 109, 246, 0.15);
}

/* Ячейки компактнее */
.ws-grid-wrap .ws-grid tbody td {
    vertical-align: top;
}

.ws-grid-wrap .ws-cell {
    padding: 5px 6px;
    font-size: 13px;
}


/* ==========================================================================
   Workspace: верх первого заказа / колонка клиента
   ========================================================================== */

/* Колонка клиента шире, чтобы вместить имя, статус и комментарий */
.ws-grid-wrap .ws-col-name {
    width: 260px;
}

.ws-grid-wrap .ws-customer {
    padding: 8px !important;
    word-break: break-word;
}

.ws-grid-wrap .ws-name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Метаданные заказа — номер и статус в одну строку */
.ws-grid-wrap .ws-customer-meta {
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 12px;
    margin: 4px 2px 6px;
}

.ws-grid-wrap .ws-customer-meta a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Кнопки прозвона не переносятся */
.ws-grid-wrap .ws-call {
    flex-wrap: nowrap;
    gap: 4px;
    margin: 4px 0;
}

/* Итоги по заказу в одну строку */
.ws-grid-wrap .ws-customer-totals {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 4px 2px;
    font-size: 12px;
}

/* Кнопка "в ожидание" — компактнее, на всю ширину ячейки */
.ws-grid-wrap .ws-waiting-btn {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 11px;
    padding: 5px 8px;
    margin-top: 6px;
}

/* Комментарий клиента — сохраняем переносы строк, ограничиваем высоту */
.ws-grid-wrap .ws-customer-comment {
    max-height: 120px;
    overflow-y: auto;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    font-size: 11px;
    line-height: 1.35;
    margin: 8px 2px 0;
    padding: 6px 8px;
}


/* ==========================================================================
   Workspace: верхняя строка — заголовки и компоновка ячейки клиента
   ========================================================================== */

/* Заголовки столбцов — одна строка с многоточием, не переносятся */
.ws-grid-wrap .ws-grid thead th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    vertical-align: bottom;
}

/* Компактная раскладка ячейки клиента */
.ws-grid-wrap .ws-customer-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 2px;
}

.ws-grid-wrap .ws-customer-line-between {
    justify-content: space-between;
    align-items: center;
}

.ws-grid-wrap .ws-date-row {
    flex: 1 1 auto;
    min-width: 120px;
    margin: 0;
}

.ws-grid-wrap .ws-date-row input {
    flex: 1 1 auto;
    min-width: 110px;
    width: auto;
}

.ws-grid-wrap .ws-call {
    flex: 0 0 auto;
    margin: 0;
}

.ws-grid-wrap .ws-customer-totals {
    flex: 1 1 auto;
    min-width: 140px;
    margin: 0;
}

.ws-grid-wrap .ws-waiting-btn {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 5px 10px;
}


/* ==========================================================================
   CRM-режим: отдельное окно без бокового меню
   ========================================================================== */

.crm-body {
    margin: 0;
    padding: 0;
    background: #f3f5f0;
    font-family: inherit;
}

.crm-topbar {
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px;
    background: #1f2d3d;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    flex-wrap: wrap;
}

.crm-logo {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.crm-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.crm-nav a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    text-decoration: none;
    transition: background .12s, color .12s;
}

.crm-nav a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.crm-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.crm-actions a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.crm-actions a:hover {
    color: #fff;
}

.crm-admin-link {
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 10px;
    border-radius: 5px;
}

.crm-user {
    color: rgba(255, 255, 255, 0.7);
}

.crm-main {
    max-width: 100%;
    padding: 16px 18px 40px;
}

/* В CRM убираем лишние отступы, которые были рассчитаны на админский layout */
.crm-main .admin-tabs-dates {
    position: static;
}

.crm-main .ws-grid thead {
    top: 0;
}

@media (max-width: 760px) {
    .crm-topbar {
        gap: 10px;
        padding: 10px 12px;
    }

    .crm-nav a {
        padding: 5px 8px;
        font-size: 12px;
    }

    .crm-main {
        padding: 10px 10px 30px;
    }
}


/* ==========================================================================
   Workspace: колонка "Кол-во" — количество * вес фасовки
   ========================================================================== */

.ws-col-qty {
    width: 150px;
}

.ws-qty-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1px;
    padding-right: 42px;
}

.ws-qty-input,
.ws-weight-input {
    width: auto;
    min-width: 20px;
    text-align: right;
    padding-right: 0 !important;
}

.ws-qty-input {
    max-width: 48px;
    min-width: 32px;
}

.ws-weight-input {
    max-width: 48px;
}

.ws-qty-sep,
.ws-qty-unit {
    flex: 0 0 auto;
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

.ws-qty-btn {
    position: absolute;
    right: 2px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #475569;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .1s, border-color .1s, color .1s;
}

.ws-qty-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.ws-qty-btn:active {
    background: #e2e8f0;
}

.ws-qty-minus {
    right: 22px;
}

.ws-qty-plus {
    right: 2px;
}


/* ==========================================================================
   Workspace: добавление/удаление позиций и автодополнение товара
   ========================================================================== */

/* Кнопка "Добавить товар" в колонке клиента */
.ws-add-item-form {
    margin-top: 8px;
}

.ws-add-item-btn {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
}

/* Кнопка удаления позиции */
.ws-delete-item-form {
    display: inline;
    margin: 0;
    padding: 0;
}

.ws-delete-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    background: #fff;
    color: #9ca3af;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .1s, border-color .1s, color .1s;
}

.ws-delete-item:hover {
    background: #fee2e2;
    border-color: #f87171;
    color: #dc2626;
}

/* Автодополнение товара */
.ws-product-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    min-width: 260px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    margin-top: 2px;
}

.ws-product-autocomplete:empty {
    display: none;
}

.ws-product-autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    white-space: nowrap;
}

.ws-product-autocomplete-item:last-child {
    border-bottom: none;
}

.ws-product-autocomplete-item:hover,
.ws-product-autocomplete-item.is-active {
    background: #f0f9ff;
}

.ws-product-autocomplete-name {
    flex: 0 1 auto;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.ws-product-autocomplete-meta {
    flex: 0 0 auto;
    color: #6b7280;
    white-space: nowrap;
}

/* Скрываем Email в общем списке заказов и расширяем название товара */
.ws-col-email {
    display: none;
}
.ws-col-product,
.ws-grid tbody td.ws-product-td {
    min-width: 260px;
    max-width: 420px;
}
.ws-product-input {
    min-width: 180px;
}

/* Карта не должна перекрывать автодополнение */
#ws-map {
    position: relative;
    z-index: 1;
}

.ws-final-weight-td {
    min-width: 70px;
}
.ws-final-weight-td input {
    width: 70px;
}


/* === Планировщик цен === */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.admin-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e7df;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-kpi-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

.admin-kpi-hint {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.3;
}

.admin-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    align-items: center;
}

.admin-table-pricing-planner .admin-table-checkbox {
    width: 36px;
    text-align: center;
}

.admin-table-pricing-planner td small {
    display: block;
}

.admin-text-success {
    color: #1a7d1a;
}

.admin-text-danger {
    color: #c62828;
}

.admin-text-warning {
    color: #b45a00;
}

.admin-text-muted {
    color: var(--muted);
}

.admin-badge-danger {
    background: #fdecea;
    color: #8a2018;
}

.admin-badge-muted {
    background: #f4f6ef;
    color: var(--muted);
}

.admin-filter-field-xs {
    max-width: 90px;
}

.pricing-cost-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.pricing-cost-form .admin-cell-input-cost {
    width: 90px;
    text-align: right;
}

.pricing-product-cell {
    vertical-align: top;
    background: #fafbf9;
    min-width: 220px;
}

.pricing-product-cell .admin-table-link {
    display: block;
    margin-bottom: 4px;
}

.pricing-product-start td {
    border-top: 2px solid #d8ddd2;
}

.pricing-product-continuation td {
    border-top: 1px dashed #e2e7df;
}


/* === Архив заказов === */
.ws-archive-date-row td {
    background: #f4f6ef;
    padding: 10px 14px;
    font-size: 14px;
    border-top: 2px solid #d8ddd2;
}

.ws-archive-date-cell strong {
    color: var(--ink);
}


/* === Вкладка долгов поставщикам === */
.admin-tab-debts {
    background: #fff8e1;
    color: #8a6d0b;
}

.admin-tab-debts.is-active {
    background: #ffecb3;
    color: #6d5608;
}

.admin-list-unstyled {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-list-unstyled li {
    margin-bottom: 4px;
}