/* ===== IMPA catalog page — floten.app =====
 * Извлечено из интерфейса @floten_impa_bot (impa.floten.app) и привязано к
 * странице сайта: токены тёмного стекла floten.app, общие var(--*) сайта не
 * переопределяются на уровне :root.
 */
        body.impa-page {
          color-scheme: dark;
          /* floten.app design tokens (css/base.css) */
          --bg: #070b14;
          --bg-accent: rgba(0, 229, 255, 0.06);
          --panel: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, transparent 40%, rgba(0, 0, 0, 0.12) 100%), rgba(10, 18, 30, 0.88);
          --panel-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, transparent 40%, rgba(0, 0, 0, 0.14) 100%), rgba(14, 24, 40, 0.92);
          --text: #e8f0f8;
          --muted: #93a3b6;
          --line: rgba(255, 255, 255, 0.12);
          --line-soft: rgba(255, 255, 255, 0.08);
          --accent: #00e5ff;
          --accent-dim: rgba(0, 229, 255, 0.25);
          --accent-glow: 0 0 8px rgba(0, 229, 255, 0.4);
          --primary: #0088ff;
          --primary-soft: rgba(0, 137, 255, 0.18);
          --primary-deep: #eaf6ff;
          --blue-cta-bg: linear-gradient(135deg, rgba(0, 229, 255, 0.18) 0%, rgba(0, 229, 255, 0.07) 100%);
          --blue-cta-bg-hover: linear-gradient(135deg, rgba(0, 229, 255, 0.26) 0%, rgba(0, 229, 255, 0.12) 100%);
          --blue-cta-border: rgba(0, 229, 255, 0.45);
          --blue-cta-border-hover: rgba(0, 229, 255, 0.8);
          --blue-cta-text: #eaffff;
          --blue-cta-shadow: var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 28px rgba(0, 0, 0, 0.45);
          --blue-cta-shadow-hover: 0 0 14px rgba(0, 229, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 32px rgba(0, 0, 0, 0.5);
          --blue-cta-shadow-active: 0 0 8px rgba(0, 229, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.45);
          --danger: #ff4444;
          --danger-soft: rgba(255, 68, 68, 0.12);
          --success: #00cc66;
          --warn: #ff8c00;
          --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 8px 36px rgba(0, 0, 0, 0.72);
          --soft-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.4);
          --radius-xl: 14px;
          --radius-lg: 12px;
          --radius-md: 10px;
        }
        * { box-sizing: border-box; }
        body {
          margin: 0;
          min-height: 100dvh;
          font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
          background:
            radial-gradient(1100px 480px at 50% -12%, rgba(0, 229, 255, 0.07) 0%, transparent 62%),
            radial-gradient(900px 500px at 88% 108%, rgba(0, 137, 255, 0.05) 0%, transparent 58%),
            var(--bg);
          color: var(--text);
        }
        body::before {
          content: none;
        }
        .page {
          min-height: 100vh;
          padding: 16px 14px calc(28px + env(safe-area-inset-bottom));
          max-width: 1180px;
          margin: 0 auto;
        }
        .shell {
          display: grid;
          gap: 18px;
        }
        .card {
          background: var(--panel);
          border: 1px solid var(--line);
          backdrop-filter: blur(22px);
          -webkit-backdrop-filter: blur(22px);
          border-radius: var(--radius-xl);
          box-shadow: var(--glass-shadow);
          padding: 18px;
        }
        .hero {
          display: grid;
          gap: 18px;
          overflow: hidden;
          position: relative;
        }
        .hero::before {
          content: "";
          position: absolute;
          inset: -25% auto auto -8%;
          width: 220px;
          height: 220px;
          border-radius: 50%;
          background: rgba(0, 229, 255, 0.07);
          opacity: 0.7;
        }
        .hero::after {
          content: "";
          position: absolute;
          top: -38px;
          right: -18px;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          background: rgba(0, 137, 255, 0.09);
          opacity: 0.7;
        }
        .hero > * {
          position: relative;
          z-index: 1;
        }
        .hero-head {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          gap: 18px;
        }
        .hero-head-actions {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
          justify-content: flex-end;
        }
        h1, h2, h3, p {
          margin: 0;
        }
        h1 {
          font-size: 36px;
          line-height: 0.98;
          letter-spacing: -0.04em;
          max-width: 560px;
        }
        .subtle {
          color: var(--muted);
          font-size: 15px;
          line-height: 1.5;
          margin-top: 10px;
          max-width: 620px;
        }
        .pill {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 10px 14px;
          border-radius: 999px;
          background: rgba(0, 229, 255, 0.08);
          border: 1px solid rgba(0, 229, 255, 0.25);
          color: var(--primary-deep);
          font-size: 12px;
          font-weight: 700;
          flex: 0 0 auto;
          box-shadow: var(--soft-shadow);
        }
        .stack {
          display: grid;
          gap: 12px;
        }
        .row {
          display: flex;
          gap: 10px;
          align-items: center;
        }
        .row.wrap {
          flex-wrap: wrap;
        }
        .hero-body {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 18px;
          align-items: stretch;
        }
        .search-shell {
          display: grid;
          gap: 14px;
          padding: 12px;
          border-radius: var(--radius-xl);
          background: var(--panel-strong);
          border: 1px solid var(--line);
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
          box-shadow: var(--soft-shadow);
        }
        .search-main {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 10px;
          align-items: stretch;
        }
        .primary-input {
          display: flex;
          align-items: center;
          gap: 6px;
          min-height: 64px;
          padding: 10px 12px;
          width: 100%;
          max-width: 100%;
          justify-self: stretch;
          border-radius: var(--radius-lg);
          border: 1px solid rgba(0, 229, 255, 0.18);
          background: rgba(8, 15, 25, 0.9);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.4);
        }
        .search-mark {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: auto;
          height: auto;
          padding: 0;
          margin-left: -2px;
          border: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
          color: var(--primary);
          font-size: 16px;
          font-weight: 700;
          line-height: 1;
          flex: 0 0 auto;
        }
        .photo-actions {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
        }
        .photo-actions button {
          width: 100%;
          min-width: 0;
          min-height: 48px;
          padding: 11px 12px;
          font-size: 12px;
          gap: 8px;
          line-height: 1.15;
          text-align: center;
          white-space: normal;
          will-change: transform, box-shadow;
        }
        .photo-actions button span {
          min-width: 0;
          white-space: normal;
          overflow-wrap: anywhere;
        }
        .photo-action-icon {
          width: 15px;
          height: 15px;
          flex: 0 0 auto;
          display: block;
          color: currentColor;
        }
        .photo-actions button.primary {
          background: var(--blue-cta-bg);
          color: var(--blue-cta-text);
          border-color: var(--blue-cta-border);
          box-shadow: var(--blue-cta-shadow);
        }
        .photo-actions button.primary:hover,
        .photo-actions button.primary:focus-visible {
          background: var(--blue-cta-bg-hover);
          border-color: var(--blue-cta-border-hover);
          transform: translateY(-2px) scale(1.03);
          box-shadow: var(--blue-cta-shadow-hover);
        }
        .photo-actions button.primary:active {
          transform: translateY(1px) scale(0.985);
          box-shadow: var(--blue-cta-shadow-active);
        }
        .photo-actions button.primary:hover,
        .photo-actions button.primary:focus-visible,
        .photo-actions button.primary:active {
          text-shadow: none;
        }
        .hidden {
          display: none !important;
        }
        .photo-filename {
          color: var(--muted);
          font-size: 13px;
          line-height: 1.4;
        }
        .camera-panel {
          display: grid;
          gap: 12px;
          padding: 14px;
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: var(--radius-lg);
          background: rgba(255, 255, 255, 0.04);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        .camera-stage {
          width: 100%;
          aspect-ratio: 4 / 3;
          overflow: hidden;
          border-radius: var(--radius-md);
          background: rgba(6, 15, 30, 0.64);
          border: 1px solid rgba(255, 255, 255, 0.16);
        }
        .camera-stage video {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
        .camera-help {
          color: var(--muted);
          font-size: 12px;
          line-height: 1.4;
        }
        .quick-strip { display: none; }
        .utility-row {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          align-items: center;
          justify-content: space-between;
        }
        .utility-cluster {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
        }
        .workspace {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 18px;
          align-items: start;
        }
        .panel-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
        }
        .panel-title {
          display: grid;
          gap: 4px;
        }
        .panel-title h2 {
          font-size: 22px;
          letter-spacing: -0.03em;
        }
        .panel-subtitle {
          color: var(--muted);
          font-size: 13px;
          line-height: 1.4;
        }
        .results-status {
          color: rgba(255, 255, 255, 0.86);
          font-weight: 700;
          margin-top: 4px;
        }
        .grow {
          flex: 1 1 auto;
        }
        input, button, a.action {
          font: inherit;
        }
        input {
          width: 100%;
          padding: 14px 16px;
          border: 1px solid rgba(0, 229, 255, 0.18);
          border-radius: var(--radius-md);
          background: rgba(8, 15, 25, 0.9);
          color: var(--text);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        input::placeholder {
          color: rgba(226, 233, 243, 0.7);
          opacity: 1;
        }
        input:focus {
          outline: 2px solid rgba(0, 229, 255, 0.28);
          border-color: var(--primary);
        }
        .primary-input input {
          border: 0;
          box-shadow: none;
          background: transparent;
          padding: 0;
          border-radius: 0;
          min-width: 0;
          width: auto;
          flex: 1 1 auto;
          font-size: 16px;
          transition: width 120ms ease;
        }
        .primary-input input:focus {
          outline: none;
          border: 0;
        }
        button, a.action {
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: var(--radius-md);
          padding: 13px 18px;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          white-space: nowrap;
          transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease, border-color 140ms ease;
          box-shadow: var(--soft-shadow);
          background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, transparent 58%),
            rgba(18, 28, 40, 0.56);
          color: var(--text);
        }
        button:hover, a.action:hover {
          transform: translateY(-1px);
        }
        button.primary, a.action.primary {
          background: var(--blue-cta-bg);
          color: var(--blue-cta-text);
          border-color: var(--blue-cta-border);
          box-shadow: var(--blue-cta-shadow);
          font-weight: 700;
        }
        button.primary:hover, a.action.primary:hover,
        button.primary:focus-visible, a.action.primary:focus-visible,
        button.primary:active, a.action.primary:active {
          background: var(--blue-cta-bg);
          color: var(--blue-cta-text);
          border-color: var(--blue-cta-border);
        }
        button.primary:hover, a.action.primary:hover,
        button.primary:focus-visible, a.action.primary:focus-visible {
          background: var(--blue-cta-bg-hover);
          border-color: var(--blue-cta-border-hover);
          transform: translateY(-2px) scale(1.03);
          box-shadow: var(--blue-cta-shadow-hover);
        }
        button.primary:active, a.action.primary:active {
          transform: translateY(1px) scale(0.985);
          box-shadow: var(--blue-cta-shadow-active);
        }
        button.primary:hover, a.action.primary:hover,
        button.primary:focus-visible, a.action.primary:focus-visible,
        button.primary:active, a.action.primary:active {
          text-shadow: none;
        }
        #search-button {
          min-width: 76px;
          padding: 11px;
          gap: 5px;
          border-radius: 9px;
          background: linear-gradient(135deg, rgba(0, 229, 255, 0.3) 0%, rgba(0, 229, 255, 0.12) 100%);
          border-color: rgba(0, 229, 255, 0.72);
          color: #f2ffff;
          box-shadow:
            0 0 14px rgba(0, 229, 255, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 8px 24px rgba(0, 0, 0, 0.45);
        }
        #search-button:hover,
        #search-button:focus-visible {
          background: linear-gradient(135deg, rgba(0, 229, 255, 0.38) 0%, rgba(0, 229, 255, 0.16) 100%);
          border-color: rgba(0, 229, 255, 0.88);
          box-shadow:
            0 0 18px rgba(0, 229, 255, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            0 8px 24px rgba(0, 0, 0, 0.45);
        }
        #search-button:active {
          box-shadow:
            0 0 10px rgba(0, 229, 255, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 4px 14px rgba(0, 0, 0, 0.45);
        }
        .search-button-icon {
          width: 15px;
          height: 15px;
          flex: 0 0 auto;
          display: block;
          color: currentColor;
        }
        button.secondary, a.action.secondary {
          background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, transparent 58%),
            rgba(18, 28, 40, 0.56);
          color: var(--text);
        }
        button.ghost, a.action.ghost {
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.08);
          color: var(--text);
        }
        button.danger, a.action.danger {
          background: var(--danger-soft);
          color: var(--danger);
          border-color: rgba(255, 68, 68, 0.28);
        }
        button:disabled {
          opacity: 0.6;
          cursor: wait;
        }
        .status {
          color: var(--muted);
          font-size: 13px;
          line-height: 1.4;
        }
        .hint {
          color: var(--muted);
          font-size: 12px;
          line-height: 1.4;
          letter-spacing: 0.06em;
          text-transform: uppercase;
        }
        .suggestions {
          display: none;
        }
        .suggestion-list {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
        }
        .suggestion {
          border: 1px solid rgba(0, 229, 255, 0.22);
          background: rgba(0, 229, 255, 0.08);
          color: var(--text);
          font-size: 12px;
          padding: 9px 12px;
          border-radius: 999px;
          box-shadow: none;
        }
        .results,
        .cart {
          display: grid;
        }
        .results {
          gap: 8px;
        }
        .cart {
          gap: 12px;
        }
        .result-item {
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: var(--radius-lg);
          padding: 10px 12px;
          background: var(--panel-strong);
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
          display: grid;
          gap: 6px;
          box-shadow: var(--soft-shadow);
        }
        .result-group-title {
          color: rgba(255, 255, 255, 0.78);
          font-size: 12px;
          font-weight: 800;
          letter-spacing: 0;
          padding: 8px 4px 2px;
          text-transform: uppercase;
        }
        .result-content {
          display: grid;
          gap: 8px;
          align-items: start;
          min-width: 0;
        }
        .result-content.has-thumb {
          grid-template-columns: 72px minmax(0, 1fr);
        }
        .result-thumb {
          width: 72px;
          height: 72px;
          border-radius: 12px;
          object-fit: contain;
          background: rgba(255, 255, 255, 0.88);
          border: 1px solid rgba(255, 255, 255, 0.18);
          padding: 5px;
        }
        .result-copy {
          display: grid;
          gap: 6px;
          min-width: 0;
        }
        .expanded-image-block {
          display: grid;
          gap: 8px;
          margin-top: 2px;
        }
        .expanded-image-summary {
          cursor: pointer;
          list-style: none;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: fit-content;
          min-height: 36px;
          padding: 7px 12px;
          border-radius: var(--radius-md);
          border: 1px solid rgba(255, 255, 255, 0.12);
          background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, transparent 58%),
            rgba(18, 28, 40, 0.56);
          color: var(--text);
          font-size: 12px;
          font-weight: 700;
          box-shadow: var(--soft-shadow);
        }
        .expanded-image-summary::-webkit-details-marker {
          display: none;
        }
        .expanded-image-summary::before {
          content: "";
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 6px solid var(--muted);
          margin-right: 7px;
          transition: transform 140ms ease;
        }
        details[open] > .expanded-image-summary::before {
          transform: rotate(180deg);
        }
        .expanded-image-panel {
          display: grid;
          gap: 8px;
          padding: 8px 0 0;
        }
        .expanded-image-link {
          display: block;
          border-radius: var(--radius-lg);
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.18);
          background: rgba(255, 255, 255, 0.9);
        }
        .expanded-image {
          display: block;
          width: 100%;
          max-height: 320px;
          object-fit: contain;
          background: #fff;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          user-select: none;
        }
        .image-loupe {
          position: fixed;
          left: 0;
          top: 0;
          z-index: 9999;
          width: min(78vw, 330px);
          height: 118px;
          border-radius: 16px;
          border: 2px solid rgba(0, 229, 255, 0.9);
          background-color: #fff;
          background-repeat: no-repeat;
          box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(7, 11, 20, 0.55);
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.94);
          transition: opacity 90ms ease, transform 90ms ease;
          pointer-events: none;
          will-change: left, top, background-position;
        }
        .image-loupe.is-visible {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
        @media (min-width: 720px) {
          .image-loupe {
            width: 360px;
            height: 150px;
          }
        }
        .expanded-image-code-list {
          display: grid;
          gap: 8px;
        }
        .expanded-image-code-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }
        .expanded-image-code-button {
          width: auto;
          min-height: 28px;
          padding: 4px 10px;
          font-size: 12px;
          letter-spacing: 0.04em;
          border-radius: 10px;
          box-shadow: none;
        }
        .expanded-image-code-button.is-in-cart {
          background: rgba(142, 210, 171, 0.96);
          color: #102318;
          border-color: rgba(142, 210, 171, 0.55);
        }
        .photo-code-prompt {
          display: grid;
          gap: 12px;
        }
        .photo-code-prompt-head {
          display: grid;
          gap: 4px;
        }
        .photo-code-prompt-codes {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }
        .photo-code-pill {
          display: inline-flex;
          align-items: center;
          min-height: 30px;
          padding: 4px 10px;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.12);
          color: var(--text);
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 0.04em;
        }
        .photo-code-prompt-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }
        .cart-item, .empty-state {
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: var(--radius-lg);
          padding: 12px;
          background: var(--panel-strong);
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
          display: grid;
          gap: 8px;
          box-shadow: var(--soft-shadow);
        }
        .empty-state {
          color: var(--muted);
          min-height: 160px;
          place-content: center;
        }
        .empty-title {
          font-weight: 700;
          color: var(--text);
          font-size: 17px;
        }
        .code-line {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          align-items: center;
        }
        .item-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          flex-wrap: wrap;
        }
        .code {
          font-family: "Cascadia Code", "Cascadia Mono", "SF Mono", "Fira Code", Consolas, monospace;
          font-weight: 700;
          font-size: 12px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: #e6f2ff;
          text-shadow: 0 1px 2px rgba(0, 8, 20, 0.5);
        }
        .tag {
          display: inline-flex;
          align-items: center;
          padding: 6px 10px;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.08);
          color: var(--text);
          font-size: 12px;
          font-weight: 600;
        }
        .result-main-row {
          display: flex;
          flex-wrap: wrap;
          gap: 6px 8px;
          align-items: flex-start;
          min-width: 0;
        }
        .result-item .code {
          font-size: 15px;
          letter-spacing: 0.05em;
          flex: 0 0 auto;
        }
        .result-item .desc {
          color: var(--text);
          font-weight: 700;
          line-height: 1.2;
          font-size: 15px;
          min-width: 0;
          flex: 1 1 100%;
          white-space: normal;
          overflow: visible;
          text-overflow: clip;
        }
        .unit-inline {
          color: var(--muted);
          font-size: 12px;
          font-weight: 600;
          flex: 0 0 auto;
          white-space: nowrap;
        }
        .comment-block {
          color: var(--muted);
          font-size: 12px;
          line-height: 1.35;
        }
        .result-item .primary {
          padding: 9px 12px;
          min-height: 36px;
          font-size: 13px;
        }
        .result-actions {
          display: grid;
          /* S223 (M003.1): the cart button used to take the whole remaining column, so on a wide
             screen it stretched to two thirds of the card. It is a control, not a banner: the
             expander keeps the free space and the button stays a compact, fixed-size target. */
          grid-template-columns: minmax(0, 1fr) auto;
          justify-content: space-between;
          gap: 8px;
          align-items: center;
          min-width: 0;
        }
        .result-actions .primary {
          width: auto;
          /* One width for both labels, so switching to "In cart" cannot resize the card. */
          min-width: 128px;
          height: 36px;
          min-height: 36px;
          padding: 0 16px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          white-space: nowrap;
        }
        .result-item > .expanded-image-block,
        .cart-item > .expanded-image-block {
          width: 100%;
        }
        .comment-block summary {
          cursor: pointer;
          color: var(--text);
          font-weight: 600;
          list-style: none;
        }
        .comment-block summary::-webkit-details-marker {
          display: none;
        }
        .comment-block summary::after {
          content: " Show";
          color: var(--primary);
          font-weight: 700;
        }
        .comment-block[open] summary::after {
          content: " Hide";
        }
        .comment-preview {
          color: var(--muted);
        }
        .meta {
          color: var(--muted);
          font-size: 13px;
          line-height: 1.4;
        }
        .badge {
          display: inline-flex;
          align-items: center;
          padding: 6px 10px;
          border-radius: 999px;
          background: rgba(145, 212, 165, 0.12);
          color: var(--success);
          font-size: 12px;
          font-weight: 700;
        }
        .badge.warn {
          background: rgba(243, 201, 122, 0.12);
          color: var(--warn);
        }
        .cart-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
        }
        .cart-item {
          --cart-media-width: 88px;
          position: relative;
          grid-template-columns: minmax(0, 1fr);
          align-items: start;
          gap: 8px;
          padding: 12px 44px 12px 12px;
        }
        .cart-item-main {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 8px;
          align-items: start;
          min-width: 0;
        }
        .cart-item-main.has-media {
          grid-template-columns: var(--cart-media-width) minmax(0, 1fr);
        }
        .cart-item-text {
          display: grid;
          gap: 3px;
          min-width: 0;
        }
        .cart-item-title {
          display: grid;
          gap: 2px;
          min-width: 0;
        }
        .cart-item-unit {
          color: var(--muted);
          font-size: 11px;
          font-weight: 700;
          line-height: 1.25;
          min-width: 0;
        }
        .cart-item-text .code {
          font-size: 13px;
          letter-spacing: 0.05em;
          flex: 0 0 auto;
          white-space: nowrap;
        }
        .cart-item-text .desc {
          font-size: 14px;
          line-height: 1.1;
          min-width: 0;
          white-space: normal;
          overflow: visible;
          text-overflow: clip;
          word-break: break-word;
          text-transform: lowercase;
        }
        .cart-item-media {
          display: block;
          min-width: 0;
        }
        .cart-item-thumb {
          display: block;
          width: var(--cart-media-width);
          height: 72px;
          padding: 4px;
          border-radius: 12px;
          object-fit: contain;
          background: rgba(255, 255, 255, 0.9);
          border: 1px solid rgba(255, 255, 255, 0.12);
        }
        .cart-item-bottom {
          display: flex;
          align-items: center;
          gap: 6px;
          flex-wrap: nowrap;
          width: fit-content;
          justify-self: start;
          min-width: 0;
        }
        .cart-item-bottom:has(.expanded-image-block[open]) {
          width: 100%;
          flex-direction: column;
          align-items: stretch;
        }
        .cart-item-bottom .expanded-image-block {
          margin-top: 0;
          flex: 0 0 auto;
        }
        .cart-item-bottom:has(.expanded-image-block[open]) .expanded-image-block {
          order: 0;
          width: 100%;
        }
        .cart-item-bottom .expanded-image-summary {
          width: auto;
          min-width: 86px;
          min-height: 28px;
          padding: 5px 10px;
          font-size: 11px;
        }
        .cart-item-bottom:has(.expanded-image-block[open]) .expanded-image-summary {
          width: 100%;
          min-width: 0;
        }
        .cart-item-bottom .expanded-image-block[open] {
          flex-basis: 100%;
        }
        .cart-item-bottom .expanded-image-panel {
          padding-top: 6px;
        }
        .cart-item-bottom:has(.expanded-image-block[open]) .qty-row {
          order: 1;
          width: auto;
        }
        .cart-item-controls {
          position: absolute;
          top: 6px;
          right: 10px;
          display: flex;
          align-items: center;
          gap: 0;
        }
        .qty-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 3px;
          flex-wrap: nowrap;
          padding: 2px;
          border-radius: 13px;
          background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.06);
          width: auto;
          flex: 0 0 auto;
        }
        .qty-button {
          width: 20px;
          min-width: 20px;
          height: 20px;
          padding: 0;
          border-radius: 6px;
          font-size: 12px;
          line-height: 1;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
        .qty-input {
          width: 36px;
          min-width: 36px;
          height: 22px;
          padding: 0 2px;
          border-radius: 8px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          background: rgba(255, 255, 255, 0.08);
          color: var(--text);
          text-align: center;
          font-size: 12px;
          font-weight: 700;
          font-variant-numeric: tabular-nums;
          flex: 0 0 auto;
          -moz-appearance: textfield;
        }
        .qty-input::-webkit-outer-spin-button,
        .qty-input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
        .remove-icon-button {
          width: 24px;
          min-width: 24px;
          height: 24px;
          padding: 0;
          border-radius: 8px;
          font-size: 14px;
          line-height: 1;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: rgba(255, 107, 107, 0.16);
          border-color: rgba(255, 107, 107, 0.32);
          color: #ff7f88;
        }
        .export-status {
          min-height: 18px;
        }
        .search-status {
          display: block;
          min-height: 18px;
        }
        .cart-toggle {
          min-width: 0;
          padding: 10px 14px;
          gap: 8px;
          background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, transparent 58%),
            rgba(18, 28, 40, 0.6);
          border: 1px solid rgba(255, 255, 255, 0.12);
          color: var(--text);
        }
        .cart-toggle-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 18px;
          height: 18px;
          flex: 0 0 auto;
        }
        .cart-toggle-icon svg {
          width: 18px;
          height: 18px;
          display: block;
        }
        .cart-toggle-badge {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 24px;
          height: 24px;
          padding: 0 7px;
          border-radius: 999px;
          background: rgba(0, 229, 255, 0.12);
          color: var(--accent);
          font-size: 12px;
          font-weight: 700;
        }
        .cart-modal {
          position: fixed;
          inset: 0;
          z-index: 40;
          display: grid;
          place-items: center;
          padding: 16px;
          /* сайт держит шапку фиксированной (56 px): диалог не должен уезжать под неё */
          padding-top: calc(var(--header-height, 56px) + 16px);
        }
        .cart-modal[hidden] {
          display: none !important;
        }
        .cart-modal-backdrop {
          position: absolute;
          inset: 0;
          border: 0;
          border-radius: 0;
          background: rgba(10, 18, 32, 0.62);
          box-shadow: none;
          padding: 0;
        }
        .cart-modal-dialog {
          position: relative;
          z-index: 1;
          width: min(720px, 100%);
          max-height: min(84vh, 900px);
          max-height: min(calc(100vh - var(--header-height, 56px) - 32px), 900px);
          max-height: min(calc(100dvh - var(--header-height, 56px) - 32px), 900px);
          padding: 12px;
          overflow: auto;
          display: grid;
          gap: 10px;
        }
        .cart-modal-dialog .panel-head {
          align-items: flex-start;
        }
        .cart-modal-actions {
          display: flex;
          align-items: flex-start;
          justify-content: flex-end;
          flex: 0 0 auto;
        }
        .cart-modal-close {
          width: 40px;
          min-width: 40px;
          height: 40px;
          padding: 0;
          border-radius: 14px;
          background: rgba(255, 107, 107, 0.16);
          border-color: rgba(255, 107, 107, 0.32);
          color: #ff7f88;
          font-size: 24px;
          line-height: 1;
          font-weight: 700;
          box-shadow: none;
        }
        .cart-modal-close-pill {
          width: auto;
          min-width: 0;
          height: auto;
          padding: 0;
          border-radius: 0;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          background: transparent;
          border-color: transparent;
          color: #ffe8f3;
          font-size: 13px;
          font-weight: 800;
          letter-spacing: 0.02em;
          box-shadow: none;
        }
        .cart-modal-close-pill:hover {
          transform: translateY(-1px);
          background: transparent;
          border-color: transparent;
          opacity: 0.9;
        }
        .cart-modal-close-mark {
          width: auto;
          height: auto;
          border-radius: 0;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0;
          margin-right: 2px;
          background: transparent;
          color: #ffe8f3;
          font-size: 20px;
          line-height: 1;
          flex: 0 0 auto;
          box-shadow: none;
        }
        .cart-modal-close-label {
          line-height: 1;
        }
        .cart-modal-actions-wrap {
          position: sticky;
          top: 0;
          z-index: 5;
          margin: -12px -12px 4px;
          padding: 10px 12px 8px;
          background: rgba(9, 15, 26, 0.97);
          border-bottom: 1px solid rgba(0, 229, 255, 0.1);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.65);
        }
        .cart-modal-actions-wrap .export-status:not(:empty) {
          margin-top: 6px;
        }
        .cart-modal-actions-row {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: 6px;
          align-items: stretch;
        }
        button.cart-modal-action-button,
        a.action.cart-modal-action-button {
          width: 100%;
          min-width: 0;
          min-height: 36px;
          padding: 8px 12px;
          border-radius: 16px;
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0.01em;
          background: var(--blue-cta-bg);
          border-color: var(--blue-cta-border);
          color: var(--blue-cta-text);
          box-shadow: var(--blue-cta-shadow);
        }
        button.cart-modal-action-button:hover,
        button.cart-modal-action-button:focus-visible,
        a.action.cart-modal-action-button:hover,
        a.action.cart-modal-action-button:focus-visible {
          background: var(--blue-cta-bg-hover);
          border-color: var(--blue-cta-border-hover);
          box-shadow: var(--blue-cta-shadow-hover);
          transform: translateY(-2px) scale(1.03);
        }
        button.cart-modal-action-button:active,
        a.action.cart-modal-action-button:active {
          transform: translateY(1px) scale(0.985);
          box-shadow: var(--blue-cta-shadow-active);
        }
        button.cart-modal-action-button:hover,
        button.cart-modal-action-button:focus-visible,
        button.cart-modal-action-button:active,
        a.action.cart-modal-action-button:hover,
        a.action.cart-modal-action-button:focus-visible,
        a.action.cart-modal-action-button:active {
          text-shadow: none;
        }
        .cart-modal-close:hover {
          transform: translateY(-1px);
          background: transparent;
        }
        .cart-panel {
          display: grid;
          gap: 14px;
        }
        .cart-modal-dialog.cart-panel {
          gap: 10px;
        }
        .cart-modal-footer {
          display: grid;
          gap: 10px;
        }
        .cart-modal-footer-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
        }
        .export-choice-modal {
          z-index: 45;
        }
        .export-choice-dialog {
          width: min(560px, 100%);
          max-height: min(60vh, 420px);
        }
        .export-choice-single .cart-modal-footer-row {
          grid-template-columns: 1fr;
        }
        .scroll-top-button {
          position: fixed;
          right: 16px;
          bottom: calc(16px + env(safe-area-inset-bottom));
          z-index: 65;
          width: 44px;
          height: 44px;
          padding: 0;
          border-radius: 999px;
          border: 1px solid var(--blue-cta-border);
          background: var(--blue-cta-bg);
          color: var(--blue-cta-text);
          box-shadow: var(--blue-cta-shadow);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          pointer-events: none;
          transform: translateY(10px);
          transition: opacity 140ms ease, transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
        }
        .scroll-top-button-icon {
          width: 18px;
          height: 18px;
          display: block;
        }
        .scroll-top-button.is-visible {
          opacity: 1;
          pointer-events: auto;
          transform: translateY(0);
        }
        .scroll-top-button:disabled {
          opacity: 0;
        }
        .scroll-top-button:hover {
          transform: translateY(0) scale(1.03);
          background: var(--blue-cta-bg-hover);
          border-color: var(--blue-cta-border-hover);
          box-shadow: var(--blue-cta-shadow-hover);
        }
        .scroll-top-button:active {
          transform: translateY(1px) scale(0.985);
          box-shadow: var(--blue-cta-shadow-active);
        }
        .export-choice-note {
          color: var(--muted);
          font-size: 13px;
          line-height: 1.4;
        }
        .modal-open {
          overflow: hidden;
        }
        @media (max-width: 640px) {
          .page {
            padding: 12px 12px calc(20px + env(safe-area-inset-bottom));
          }
          .card.hero {
            padding: 14px;
          }
          .hero-head {
            flex-direction: column;
            align-items: flex-start;
          }
          .hero-head-actions {
            width: 100%;
            justify-content: space-between;
          }
          h1 {
            font-size: 28px;
          }
          .workspace {
            grid-template-columns: 1fr;
          }
          .row.mobile-stack {
            flex-direction: column;
            align-items: stretch;
          }
          .cart-header {
            align-items: flex-start;
            flex-direction: column;
          }
          .cart-item {
            grid-template-columns: 1fr;
            padding: 10px 40px 10px 10px;
          }
          .cart-item-main {
            grid-template-columns: minmax(0, 1fr);
          }
          .cart-item-main.has-media {
            grid-template-columns: var(--cart-media-width) minmax(0, 1fr);
          }
          .cart-item-thumb {
            height: 64px;
          }
          .cart-item-controls {
            top: 4px;
            right: 8px;
          }
          .utility-row {
            align-items: stretch;
          }
          .utility-cluster {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr;
          }
          button, a.action {
            width: 100%;
          }
          .cart-modal-footer-row button,
          .cart-modal-footer-row a.action {
            width: 100%;
          }
          .scroll-top-button {
            right: 12px;
            bottom: calc(12px + env(safe-area-inset-bottom));
            width: 42px;
            height: 42px;
          }
          .cart-toggle {
            width: auto;
          }
          .primary-input {
            border-radius: 24px;
          }
          .cart-modal {
            padding: 10px;
            padding-top: calc(var(--header-height, 56px) + 10px);
            align-items: end;
          }
          .cart-modal-dialog {
            max-height: 88vh;
            max-height: calc(100vh - var(--header-height, 56px) - 20px);
            max-height: calc(100dvh - var(--header-height, 56px) - 20px);
            width: 100%;
          }
        }
/* ===== floten.app: страница используется и с десктопа =====
   В боте строка поиска подстраивается под текст (мобильная раскладка), на сайте
   поле тянется на всю доступную ширину (Andrew: длиннее поле — кнопка меньше),
   а пара поле+кнопка ограничена по ширине, чтобы на десктопе не разъезжаться. */
@media (min-width: 720px) {
  .primary-input {
    width: 100%;
    justify-self: stretch;
  }
  .primary-input input {
    flex: 1 1 auto;
    width: auto;
  }
}

/* ===== Поиск по камере — только мобильный сценарий =====
   На десктопе кнопка остаётся на месте и не меняет размер: она просто гаснет
   (та же синяя заливка, но приглушённая) и по нажатию показывает подсказку. */
.photo-actions button.camera-button--desktop {
  opacity: 0.42;
  filter: saturate(0.3);
  cursor: not-allowed;
  box-shadow: var(--soft-shadow);
}
.photo-actions button.camera-button--desktop:hover,
.photo-actions button.camera-button--desktop:focus-visible,
.photo-actions button.camera-button--desktop:active {
  background: var(--blue-cta-bg);
  border-color: var(--blue-cta-border);
  transform: none;
  box-shadow: var(--soft-shadow);
}

.camera-hint {
  position: fixed;
  z-index: 900;
  max-width: 260px;
  padding: 10px 13px;
  border-radius: 10px;
  background: var(--panel-strong);
  border: 1px solid var(--blue-cta-border);
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: var(--soft-shadow);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}
.camera-hint.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Строка поиска на десктопе: пара поле+кнопка не растягивается на всю панель ===== */
@media (min-width: 720px) {
  .search-main {
    max-width: 720px;
  }
}