:root {
    --showroom-touch-size: 46px;
    --showroom-mobile-gap: 12px;
}

button,
input,
select,
textarea,
summary,
a {
    touch-action: manipulation;
}

@media (max-width: 1100px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        min-width: 320px;
        overflow-x: hidden;
    }

    .site-shell,
    .h2o-modal,
    dialog,
    .site-shell :where(section, article, div, form, fieldset, table, thead, tbody, tr),
    .h2o-modal :where(section, article, div, form, fieldset, table, thead, tbody, tr),
    dialog :where(section, article, div, form, fieldset, table, thead, tbody, tr) {
        min-width: 0 !important;
        max-width: 100%;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    .site-shell {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 16px 12px calc(92px + env(safe-area-inset-bottom)) !important;
        overflow-x: clip !important;
    }

    h1 {
        font-size: 25px !important;
        line-height: 1.16 !important;
    }

    h2 {
        font-size: 21px !important;
        line-height: 1.2 !important;
    }

    h3 {
        font-size: 17px !important;
        line-height: 1.25 !important;
    }

    p,
    li,
    dt,
    dd,
    span,
    strong,
    small,
    em,
    b,
    a,
    button,
    label,
    th,
    td {
        min-width: auto !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        word-wrap: normal !important;
        white-space: normal;
    }

    code,
    pre {
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
    }

    .site-header {
        position: sticky;
        top: 0;
        z-index: 1200;
    }

    .site-header__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        min-height: 0 !important;
        padding: 8px 12px 10px !important;
    }

    .site-brand {
        gap: 10px !important;
        width: max-content;
        max-width: 100%;
    }

    .site-brand img {
        width: 86px !important;
        height: auto !important;
        max-height: 46px !important;
    }

    .site-brand span {
        display: block !important;
        padding-left: 10px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .site-nav-toggle {
        display: inline-flex !important;
        grid-column: 2 !important;
        align-self: center !important;
        min-height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 12px !important;
        border: 1px solid var(--h2o-blue) !important;
        border-radius: 6px !important;
        background: var(--h2o-blue) !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 750 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .site-nav-toggle span,
    .site-nav-toggle span::before,
    .site-nav-toggle span::after {
        display: block;
        width: 16px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        content: "";
    }

    .site-nav-toggle span {
        position: relative;
    }

    .site-nav-toggle span::before,
    .site-nav-toggle span::after {
        position: absolute;
        left: 0;
    }

    .site-nav-toggle span::before {
        top: -5px;
    }

    .site-nav-toggle span::after {
        top: 5px;
    }

    .site-nav {
        display: none !important;
        grid-column: 1 / -1 !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        max-height: min(72vh, 620px) !important;
        overflow: auto !important;
        padding: 8px !important;
        border: 1px solid var(--h2o-line) !important;
        border-radius: 8px !important;
        background: #fff !important;
        box-shadow: var(--h2o-shadow) !important;
        -webkit-overflow-scrolling: touch;
    }

    .site-header.is-nav-open .site-nav {
        display: grid !important;
    }

    .site-nav > a,
    .site-nav > .site-nav-group > summary {
        display: flex !important;
        min-height: 42px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 10px !important;
        border: 1px solid var(--h2o-line) !important;
        border-radius: 6px !important;
        background: #fff !important;
        color: var(--h2o-navy) !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .site-nav > a.is-active,
    .site-nav-group.has-active > summary,
    .site-nav-group[open] > summary {
        border-color: var(--h2o-blue) !important;
        background: var(--h2o-soft-blue) !important;
        color: var(--h2o-blue) !important;
        box-shadow: none !important;
    }

    .site-nav-group {
        position: static !important;
        min-width: 0 !important;
    }

    .site-nav-group > div,
    .site-nav-mega {
        position: static !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 8px !important;
        padding: 8px !important;
        border-radius: 6px !important;
        box-shadow: none !important;
    }

    .site-nav-group[open] {
        grid-column: 1 / -1 !important;
    }

    .site-nav-group > div a {
        min-height: 40px !important;
        padding: 9px 10px !important;
        white-space: normal !important;
        border-radius: 4px !important;
    }

    .site-nav-mega section {
        gap: 2px !important;
    }

    .site-nav-mega strong {
        padding: 9px 10px 4px !important;
        font-size: 11px !important;
    }

    .site-mobile-bottom {
        position: fixed;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        left: 10px;
        z-index: 1300;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        padding: 7px;
        border: 1px solid rgba(16, 49, 107, 0.14);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 14px 40px rgba(16, 49, 107, 0.22);
        backdrop-filter: blur(14px);
    }

    .site-mobile-bottom a,
    .site-mobile-bottom button {
        display: flex !important;
        min-width: 0 !important;
        min-height: 52px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 4px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: var(--h2o-navy) !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;
        box-shadow: none !important;
    }

    .site-mobile-bottom a.is-active,
    .site-mobile-bottom button.is-active {
        background: var(--h2o-blue) !important;
        color: #fff !important;
    }

    .site-mobile-bottom span {
        display: block;
    }

    .site-header.is-nav-open + .site-mobile-bottom .site-mobile-more {
        background: var(--h2o-blue) !important;
        color: #fff !important;
    }

    .site-shell :where(.dashboard-summary a, .dashboard-alert-list > a, .dashboard-list > a, .calendar-day-panel article, .inspection-template-grid article, .showroom-task-item, [class$="-card"], [class*="-card "]) {
        border-radius: 8px !important;
    }

    .site-shell :where(form),
    .h2o-modal__body :where(form),
    dialog :where(form),
    .site-shell :where([class*="filters"], [class*="filter"], [class*="form"], [class*="toolbar"], [class*="actions"], [class*="settings"], .bulk-panel),
    .h2o-modal__body :where([class*="filters"], [class*="filter"], [class*="form"], [class*="toolbar"], [class*="actions"], [class*="settings"]) {
        max-width: 100% !important;
    }

    .site-shell form[class*="form"],
    .site-shell form[class*="filter"],
    .site-shell form[class*="search"],
    .site-shell form[class*="settings"],
    .site-shell form[class*="filters"],
    .site-shell .bulk-panel,
    .h2o-modal__body form,
    dialog form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--showroom-mobile-gap) !important;
        align-items: stretch !important;
    }

    .site-shell .h2o-form-section,
    .h2o-modal__body .h2o-form-section,
    dialog .h2o-form-section {
        grid-template-columns: 1fr !important;
        gap: var(--showroom-mobile-gap) !important;
        padding: 12px !important;
    }

    .site-shell .h2o-form-actions,
    .h2o-modal__body .h2o-form-actions,
    dialog .h2o-form-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .site-shell label,
    .h2o-modal__body label,
    dialog label {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 6px !important;
        width: 100% !important;
        align-items: stretch !important;
        align-content: start !important;
        justify-content: stretch !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }

    .site-shell label:has(> input[type="checkbox"]),
    .site-shell label:has(> input[type="radio"]),
    .h2o-modal__body label:has(> input[type="checkbox"]),
    .h2o-modal__body label:has(> input[type="radio"]),
    dialog label:has(> input[type="checkbox"]),
    dialog label:has(> input[type="radio"]) {
        display: inline-grid !important;
        grid-template-columns: auto minmax(12ch, 1fr) !important;
        width: auto !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: start !important;
        white-space: normal !important;
    }

    .site-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .site-shell select,
    .site-shell textarea,
    .h2o-modal__body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .h2o-modal__body select,
    .h2o-modal__body textarea,
    dialog input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    dialog select,
    dialog textarea {
        width: 100% !important;
        min-height: var(--showroom-touch-size) !important;
        max-width: 100% !important;
        font-size: 16px !important;
    }

    .site-shell textarea,
    .h2o-modal__body textarea,
    dialog textarea {
        min-height: 104px !important;
    }

    .site-shell input[type="checkbox"],
    .site-shell input[type="radio"],
    .h2o-modal__body input[type="checkbox"],
    .h2o-modal__body input[type="radio"],
    dialog input[type="checkbox"],
    dialog input[type="radio"] {
        flex: 0 0 auto !important;
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
    }

    .site-shell .cx-rating-options,
    .h2o-modal__body .cx-rating-options,
    dialog .cx-rating-options {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        max-width: 100% !important;
    }

    .site-shell .cx-rating-options label,
    .h2o-modal__body .cx-rating-options label,
    dialog .cx-rating-options label {
        display: inline-flex !important;
        grid-template-columns: none !important;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }

    .site-shell button,
    .site-shell input[type="submit"],
    .site-shell .h2o-action,
    .site-shell .h2o-modal-trigger,
    .h2o-modal__body button,
    .h2o-modal__body input[type="submit"],
    dialog button,
    dialog input[type="submit"] {
        min-height: var(--showroom-touch-size) !important;
        max-width: 100% !important;
        align-self: stretch !important;
        justify-content: center !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .site-shell :where(button, input[type="submit"], .h2o-action, .h2o-modal-trigger, .inspection-button, .tasks-button, .calendar-button),
    .h2o-modal__body :where(button, input[type="submit"], .h2o-action),
    dialog :where(button, input[type="submit"]) {
        border-radius: 8px !important;
        font-weight: 800 !important;
    }

    .h2o-action,
    .site-shell a.h2o-action,
    .site-shell button.h2o-action,
    .h2o-modal__body a.h2o-action,
    .h2o-modal__body button.h2o-action {
        width: auto !important;
        min-height: var(--showroom-touch-size) !important;
        white-space: normal !important;
    }

    .site-shell :where(.h2o-icon-button, .inspection-icon-button, .tile-planogram-remove, [data-tile-resize], [data-remove]) {
        flex: 0 0 auto !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        align-self: center !important;
        font-size: 16px !important;
    }

    .site-shell [class*="actions"],
    .site-shell [class*="toolbar"],
    .site-shell .h2o-action-row,
    .showroom-dialog-actions,
    .showroom-qr-actions-row,
    .showroom-tab-actions,
    .report-export,
    .calendar-event-actions,
    .inspection-form-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .site-shell [class*="actions"] > *,
    .site-shell [class*="toolbar"] > *,
    .site-shell .h2o-action-row > *,
    .showroom-dialog-actions > *,
    .showroom-qr-actions-row > *,
    .showroom-tab-actions > * {
        flex: 1 1 160px !important;
        min-width: 0 !important;
    }

    .site-shell :where(.table-wrap, [class$="-table-wrap"], [class*="-table-wrap "], .inspection-table-wrap, .rating-table-wrap, .assort-table-wrap, .pt-table-wrap, .cx-table-wrap, .tasks-table-wrap, .staff-table-wrap, .changes-table-wrap, .release-table-wrap) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .site-shell .h2o-table-wrap.is-scroll::after {
        display: block;
        margin-top: 6px;
        color: var(--h2o-muted);
        content: "Прокрутите таблицу в сторону";
        font-size: 12px;
    }

    .site-shell .h2o-table--scroll {
        min-width: 720px !important;
        max-width: none !important;
    }

    .site-shell .h2o-table--wide {
        min-width: 900px !important;
        max-width: none !important;
    }

    .site-shell .h2o-table--cards {
        min-width: 0 !important;
    }

    .site-shell .h2o-table--cards thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
    }

    .site-shell .h2o-table--cards,
    .site-shell .h2o-table--cards tbody,
    .site-shell .h2o-table--cards tr,
    .site-shell .h2o-table--cards td {
        display: block !important;
        width: 100% !important;
    }

    .site-shell .h2o-table--cards tbody {
        display: grid !important;
        gap: 10px !important;
    }

    .site-shell .h2o-table--cards tr {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px 12px !important;
        border: 1px solid var(--h2o-line) !important;
        border-radius: 6px !important;
        background: #fff;
    }

    .site-shell .h2o-table--cards td {
        display: grid !important;
        grid-template-columns: minmax(88px, 34%) minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 7px 0 !important;
        border-bottom: 1px solid #edf1f5 !important;
        overflow-wrap: anywhere !important;
    }

    .site-shell .h2o-table--cards td:last-child {
        border-bottom: 0 !important;
    }

    .site-shell .h2o-table--cards td::before {
        content: attr(data-label);
        color: var(--h2o-muted);
        font-size: 12px;
        font-weight: 700;
    }

    .site-shell .h2o-table--cards td[data-label=""]::before {
        display: none;
    }

    .site-shell .h2o-table--cards td[data-label=""] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .site-shell .tasks-table-wrap .h2o-table--cards td:nth-child(3),
    .site-shell .tasks-table-wrap .h2o-table--cards td:nth-child(6),
    .site-shell .inspection-table-wrap .h2o-table--cards td:nth-child(2),
    .site-shell .inspection-table-wrap .h2o-table--cards td:nth-child(3) {
        display: none !important;
    }

    .site-shell .tasks-table-wrap .h2o-table--cards td:nth-child(2),
    .site-shell .inspection-table-wrap .h2o-table--cards td:nth-child(1) {
        order: 1;
    }

    .site-shell .tasks-table-wrap .h2o-table--cards td:nth-child(4),
    .site-shell .inspection-table-wrap .h2o-table--cards td:nth-child(4) {
        order: 2;
    }

    .site-shell .tasks-table-wrap .h2o-table--cards td:nth-child(5),
    .site-shell .inspection-table-wrap .h2o-table--cards td:nth-child(5) {
        order: 3;
    }

    .site-shell .tasks-table-wrap .h2o-table--cards td:nth-child(7),
    .site-shell .inspection-table-wrap .h2o-table--cards td:nth-child(6) {
        order: 4;
    }

    .site-shell .tasks-table-wrap .h2o-table--cards td:nth-child(1) {
        order: 5;
    }

    .site-shell .h2o-table--simplified {
        min-width: 0 !important;
    }

    .site-shell .h2o-table--simplified .is-mobile-secondary {
        display: none !important;
    }

    .h2o-autocomplete {
        width: 100% !important;
    }

    .h2o-autocomplete__results {
        left: 0 !important;
        right: auto !important;
        width: min(100%, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }

    .h2o-autocomplete__item {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        min-height: auto !important;
        text-align: left !important;
    }

    .h2o-modal,
    dialog {
        box-sizing: border-box !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        padding: 0 !important;
        margin: auto !important;
        overflow-x: clip !important;
    }

    .h2o-modal__head,
    dialog .h2o-modal__head,
    dialog .tasks-section-title,
    dialog .calendar-section-title {
        padding: 12px 14px !important;
    }

    .h2o-modal__body {
        max-height: calc(100dvh - 82px) !important;
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    dialog > form {
        display: flex !important;
        max-height: inherit !important;
        min-height: 0 !important;
        flex-direction: column !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    dialog > form > .h2o-modal__body {
        max-height: none !important;
        overflow: auto !important;
    }

    .h2o-modal__footer,
    dialog .h2o-modal__footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid var(--h2o-line) !important;
        background: #fff !important;
    }

    .h2o-modal__close,
    .site-shell .h2o-modal__head [data-close],
    .site-shell .h2o-modal__head [data-close-dialog],
    .site-shell #close-event-form,
    .site-shell .photo-archive-modal button[aria-label="Закрыть"],
    .site-shell .showroom-photo-modal-close,
    .site-shell .showroom-panel-close,
    dialog .h2o-modal__head [data-close],
    dialog .h2o-modal__head [data-close-dialog],
    dialog #close-event-form {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        align-self: center !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .site-shell :where([class$="-layout"], [class*="-layout "], [class$="-two"], [class*="-two "], [class$="-detail-grid"], [class*="-detail-grid "]) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .site-shell :where([class$="-summary"], [class*="-summary "], [class$="-kpis"], [class*="-kpis "], [class$="-grid"], [class*="-grid "], [class$="-sections"], [class*="-sections "], [class$="-cards"], [class*="-cards "]) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .site-shell :where([class$="-heading"], [class*="-heading "], [class$="-head"], [class*="-head "], [class$="-section-head"], [class*="-section-head "], [class$="-section-title"], [class*="-section-title "], [class$="-card-head"], [class*="-card-head "]) {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .site-shell :where([class$="-section"], [class*="-section "], [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "]) {
        max-width: 100% !important;
    }

    .site-shell :where(.calendar-toolbar, .showroom-photo-calendar-header) {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .site-shell :where(.calendar-toolbar, .showroom-photo-calendar-header) > * {
        flex: 0 0 auto !important;
    }

    .site-shell .calendar-toolbar h2,
    .site-shell .showroom-photo-calendar-header strong {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .site-shell :where(.outlet-section, .claims-section, .equipment-section, .stocks-section, .planograms-section, .reports-section, .audit-section):has(> table) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .site-shell :where(.outlet-section, .claims-section, .equipment-section, .stocks-section, .planograms-section, .reports-section, .audit-section):has(> table)::after {
        display: block;
        margin-top: 6px;
        color: var(--h2o-muted);
        content: "Прокрутите таблицу в сторону";
        font-size: 12px;
    }

    .site-shell :where(.planograms-layout, .planograms-list, .planograms-detail, .planograms-section, .report-two, .rating-weight-settings form) {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 760px) {
    .site-brand span {
        display: none !important;
    }

    .showroom-mobile-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 12px 0;
    }

    .dashboard-heading,
    .dashboard-section-heading {
        gap: 8px !important;
    }

    .dashboard-heading h1 {
        margin-bottom: 6px !important;
    }

    .dashboard-filters {
        padding: 12px !important;
        border-radius: 8px !important;
    }

    .dashboard-filter-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .dashboard-summary a {
        min-height: 82px !important;
        border-radius: 8px !important;
    }

    .showroom-mobile-actions a,
    .showroom-mobile-actions button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 0 10px;
        border: 1px solid var(--h2o-blue);
        background: var(--h2o-blue);
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-weight: 700;
    }

    .showroom-mobile-actions .is-secondary {
        background: #fff;
        color: var(--h2o-blue);
    }

    .showroom-object-panel {
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 0 12px 18px !important;
        overflow-x: hidden !important;
    }

    .showroom-panel-title {
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        margin-right: -12px !important;
        margin-left: -12px !important;
        padding: 13px 58px 13px 12px !important;
        background: var(--h2o-soft-blue) !important;
    }

    .showroom-panel-close {
        top: 10px !important;
        right: 12px !important;
    }

    .showroom-tabs {
        top: 55px !important;
        display: flex !important;
        gap: 6px !important;
        margin-right: -12px !important;
        margin-left: -12px !important;
        padding: 8px 12px !important;
        overflow-x: auto !important;
        background: #fff !important;
    }

    .showroom-tab-btn {
        flex: 0 0 auto !important;
        min-height: 38px !important;
        padding: 0 12px !important;
        white-space: nowrap !important;
    }

    .showroom-tab-panel {
        padding: 14px 0 !important;
    }

    #object-settings-form .showroom-status-options,
    .showroom-status-options {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    #object-settings-form .showroom-status-options > label.showroom-status-option {
        width: 100% !important;
        min-width: auto !important;
        justify-content: flex-start !important;
        white-space: normal !important;
    }

    .showroom-photo-toolbar,
    .showroom-photo-upload-form,
    .showroom-qr,
    .showroom-products-grid,
    .showroom-product-search-item,
    .showroom-photo-comparison,
    .tile-planogram-toolbar,
    .tile-planogram-add-row,
    .tile-planogram-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .showroom-photo-tag-choices {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .showroom-photo-tag-choice {
        width: auto !important;
        min-width: auto !important;
    }

    .tile-rolets-grid {
        display: flex !important;
        gap: 10px !important;
        overflow-x: auto !important;
        padding-bottom: 12px !important;
        -webkit-overflow-scrolling: touch;
    }

    .tile-rolet {
        flex: 0 0 132px !important;
    }

    .tile-piece strong,
    .tile-piece span {
        white-space: normal !important;
    }

    .site-shell :where([class$="-summary"], [class*="-summary "], [class$="-kpis"], [class*="-kpis "], [class$="-grid"], [class*="-grid "], [class$="-sections"], [class*="-sections "], [class$="-cards"], [class*="-cards "]) {
        grid-template-columns: 1fr !important;
    }

    .site-shell :where([class$="-heading"], [class*="-heading "], [class$="-head"], [class*="-head "], [class$="-section-head"], [class*="-section-head "], [class$="-section-title"], [class*="-section-title "], [class$="-card-head"], [class*="-card-head "]) {
        flex-direction: column !important;
    }

    .site-shell .planograms-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .site-shell .planograms-list,
    .site-shell .planograms-detail,
    .site-shell .planograms-section {
        width: 100% !important;
        min-width: 0 !important;
    }

    .site-shell .planograms-section:has(> table),
    .site-shell .report-two {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .site-shell .report-two {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .site-shell .rating-weight-settings form {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }
}

@media (max-width: 560px) {
    .site-shell {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .site-shell [class*="actions"] > *,
    .site-shell [class*="toolbar"] > *,
    .site-shell .h2o-action-row > *,
    .showroom-dialog-actions > *,
    .showroom-qr-actions-row > *,
    .showroom-tab-actions > * {
        flex-basis: 100% !important;
    }

    .site-shell :where(.calendar-toolbar, .showroom-photo-calendar-header) > * {
        flex: 0 0 auto !important;
    }

    .site-shell .calendar-toolbar h2,
    .site-shell .showroom-photo-calendar-header strong {
        flex: 1 1 auto !important;
    }

    .bx-system-auth-form {
        width: 100% !important;
        margin: 18px auto !important;
        padding: 20px 14px !important;
    }

    .site-shell .showroom-object-panel .showroom-quick-actions {
        position: sticky !important;
        top: 104px !important;
        z-index: 4 !important;
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin: 0 -12px 12px !important;
        padding: 8px 12px 10px !important;
        overflow-x: auto !important;
        border-top: 1px solid var(--h2o-line) !important;
        border-bottom: 1px solid var(--h2o-line) !important;
        background: #fff !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .site-shell .showroom-object-panel .showroom-quick-actions > * {
        flex: 0 0 156px !important;
        min-height: 56px !important;
        scroll-snap-align: start;
    }

    .site-shell .showroom-object-panel .showroom-quick-actions button,
    .site-shell .showroom-object-panel .showroom-quick-actions a {
        display: grid !important;
        align-content: center !important;
        gap: 3px !important;
        padding: 8px 10px !important;
        border: 1px solid #cfe0f5 !important;
        border-radius: 8px !important;
        background: var(--h2o-soft-blue) !important;
        color: var(--h2o-navy) !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        line-height: 1.12 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .site-shell .showroom-object-panel .showroom-quick-actions small {
        display: block !important;
        color: var(--h2o-muted) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
    }

    .site-shell .today-actions a,
    .site-shell .today-actions button {
        min-height: var(--showroom-touch-size) !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 14px !important;
    }
}

.showroom-mobile-sync {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 10000;
    max-width: min(360px, calc(100vw - 28px));
    padding: 12px 14px;
    border: 1px solid #e4b000;
    background: #fff8d6;
    color: #5b4700;
    box-shadow: 0 8px 28px rgba(16, 49, 107, .16);
    font-size: 14px;
}

@media (max-width: 760px) {
    .showroom-mobile-sync {
        right: 10px;
        bottom: calc(88px + env(safe-area-inset-bottom));
        max-width: calc(100vw - 20px);
    }
}

.showroom-mobile-sync.is-ok {
    border-color: #269447;
    background: #e5f6ea;
    color: #176b32;
}

.showroom-mobile-sync[hidden] {
    display: none;
}

.showroom-pwa-update {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 10001;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    max-width: min(520px, calc(100vw - 28px));
    padding: 12px;
    border: 1px solid #b8d6ff;
    border-radius: 8px;
    background: #edf5ff;
    color: #10316b;
    box-shadow: 0 10px 32px rgba(16, 49, 107, .18);
    font-size: 14px;
}

.showroom-pwa-update strong,
.showroom-pwa-update span {
    display: block;
}

.showroom-pwa-update span {
    margin-top: 2px;
    color: #526170;
    font-size: 12px;
}

.showroom-pwa-update button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #207dff;
    border-radius: 6px;
    background: #207dff;
    color: #fff;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.showroom-pwa-update button[data-pwa-update-later] {
    background: #fff;
    color: #10316b;
    border-color: #cbd7e6;
}

.showroom-pwa-update[hidden] {
    display: none;
}

@media (max-width: 760px) {
    .showroom-pwa-update {
        right: 10px;
        bottom: calc(88px + env(safe-area-inset-bottom));
        grid-template-columns: 1fr 1fr;
        max-width: calc(100vw - 20px);
    }

    .showroom-pwa-update > div {
        grid-column: 1 / -1;
    }
}

/* Mobile CRM/PWA polish */
@media (max-width: 760px) {
    :root {
        --showroom-touch-size: 48px;
        --showroom-mobile-gap: 12px;
    }

    .site-shell {
        background: #f3f6fa !important;
    }

    .site-shell :where([class$="-section"], [class*="-section "], [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "]) {
        border-radius: 8px !important;
    }

    .site-shell :where(button, input[type="submit"], .h2o-action, .h2o-modal-trigger, .inspection-button, .tasks-button, .calendar-button) {
        min-height: var(--showroom-touch-size) !important;
        max-width: 100% !important;
        padding-inline: 14px !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
    }

    .site-shell :where(.h2o-icon-button, .inspection-icon-button, .tile-planogram-remove, [data-tile-resize], [data-remove]) {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        font-size: 16px !important;
    }

    .site-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
    .h2o-modal__body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
    dialog :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
        min-height: var(--showroom-touch-size) !important;
        font-size: 16px !important;
    }

    .h2o-modal,
    dialog {
        position: fixed !important;
        inset: auto 8px 8px 8px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 18px) !important;
        margin: 0 !important;
        border-radius: 12px 12px 8px 8px !important;
        overflow: hidden !important;
    }

    .h2o-modal__head,
    dialog .h2o-modal__head,
    dialog .tasks-section-title,
    dialog .calendar-section-title {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        min-height: 58px !important;
    }

    .h2o-modal__body {
        max-height: calc(100dvh - 76px) !important;
        min-height: 0 !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    dialog > form,
    dialog form {
        display: flex !important;
        max-height: inherit !important;
        min-height: 0 !important;
        flex-direction: column !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .site-mobile-bottom {
        box-shadow: 0 -10px 30px rgba(16, 49, 107, .12) !important;
    }

    .site-mobile-bottom a,
    .site-mobile-bottom button {
        min-height: 54px !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 600px) {
    .site-shell .calendar-toolbar {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 10px 12px !important;
    }

    .site-shell .calendar-toolbar h2 {
        margin: 0 !important;
        font-size: 18px !important;
        line-height: 1.15 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .site-shell .calendar-toolbar a,
    .site-shell .showroom-photo-calendar-header button {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        flex: 0 0 42px !important;
        align-self: center !important;
        padding: 0 !important;
        border-radius: 8px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .site-shell .calendar-month {
        width: 100% !important;
        overflow: hidden !important;
    }

    .site-shell .calendar-weekdays,
    .site-shell .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    .site-shell .calendar-weekdays span {
        display: flex !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 0 !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    .site-shell .calendar-day {
        display: flex !important;
        min-width: 0 !important;
        min-height: 46px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 5px 2px !important;
        overflow: hidden !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .site-shell .calendar-day strong {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .site-shell .calendar-day small,
    .site-shell .calendar-dot {
        display: none !important;
    }

    .site-shell :where(.calendar-event-actions, .report-export, .showroom-dialog-actions, .inspection-form-actions) > * {
        flex: 1 1 130px !important;
    }

    .site-shell :where(.tile-piece-delete, .tile-piece-tools button) {
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
        flex: 0 0 22px !important;
        align-self: flex-start !important;
        padding: 0 !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 360px) {
    .site-shell {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .site-shell .calendar-toolbar {
        grid-template-columns: 38px minmax(0, 1fr) 38px !important;
        gap: 6px !important;
        padding: 9px 10px !important;
    }

    .site-shell .calendar-toolbar a,
    .site-shell .showroom-photo-calendar-header button {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        flex-basis: 38px !important;
        font-size: 21px !important;
    }

    .site-shell .calendar-toolbar h2 {
        font-size: 16px !important;
    }

    .site-shell .calendar-day {
        min-height: 42px !important;
        padding: 4px 1px !important;
    }

    .site-shell .calendar-weekdays span {
        font-size: 10px !important;
    }

}

@media (max-width: 340px) {
    .site-shell .calendar-toolbar {
        grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    }

    .site-shell .calendar-toolbar a,
    .site-shell .showroom-photo-calendar-header button {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        flex-basis: 36px !important;
    }

    .site-shell .calendar-toolbar h2 {
        font-size: 15px !important;
    }

    .site-shell :where(button, input[type="submit"], .h2o-action, .h2o-modal-trigger, .inspection-button, .tasks-button, .calendar-button) {
        padding-inline: 10px !important;
        font-size: 14px !important;
    }
}