/* Phone-first storefront and Telegram Mini App surfaces. */
:root {
  --app-bg: #f4f7f2;
  --app-surface: #ffffff;
  --app-surface-alt: #f0f5ec;
  --app-text: #203b30;
  --app-muted: #60745d;
  --app-line: #dce6d7;
  --app-accent: #19795c;
  --app-button-text: #ffffff;
  --app-safe-left: max(env(safe-area-inset-left, 0px), calc(var(--tg-safe-left, 0px) + var(--tg-content-left, 0px)));
  --app-safe-right: max(env(safe-area-inset-right, 0px), calc(var(--tg-safe-right, 0px) + var(--tg-content-right, 0px)));
  --app-safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-top, 0px) + var(--tg-content-top, 0px)));
  --app-safe-bottom: max(env(safe-area-inset-bottom, 0px), calc(var(--tg-safe-bottom, 0px) + var(--tg-content-bottom, 0px)));
}
.mobile-nav { display: none; }

@media (max-width: 800px) {
  html { scroll-padding-top: calc(84px + var(--app-safe-top)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    font-size: 16px; line-height: 1.6; color: var(--app-text); background: var(--app-bg);
    padding-top: calc(68px + var(--app-safe-top)); padding-bottom: calc(84px + var(--app-safe-bottom));
  }
  .wrap { padding: 0 16px; max-width: 680px; }
  .site-header { height: calc(68px + var(--app-safe-top)); padding-top: var(--app-safe-top); background: var(--app-surface); border-color: var(--app-line); }
  .site-header.scrolled { background: var(--app-surface); }
  .nav { gap: 12px; }
  .brand { font-size: 20px; gap: 10px; }
  .brand small { font-size: 10px; letter-spacing: 2.4px; margin-top: 3px; }
  .brand-icon { width: 39px; height: 42px; border-radius: 13px; background: var(--app-accent); }
  .nav-links, .nav-right .network { display: none; }
  .nav-query { min-height: 44px; font-size: 14px; padding: 10px 12px; gap: 7px; border-radius: 12px; }
  .nav-query .icon { width: 18px; height: 18px; }
  .button { font-size: 16px; min-height: 50px; border-radius: 12px; gap: 9px; }
  .button .icon { width: 19px; height: 19px; }
  .button-outline { border-color: var(--app-line); color: var(--app-text); background: var(--app-surface); }
  .button-primary { background: var(--app-accent); color: var(--app-button-text); }
  .button-primary:hover:enabled { background: var(--app-accent); color: var(--app-button-text); }
  .button-primary.is-loading { background: var(--app-accent); }
  .nav-query { min-height: 44px; font-size: 14px; }
  .hero { margin-top: 16px; min-height: 180px; padding: 22px 20px; border-radius: 18px; }
  .hero .eyebrow, .hero-index, .hero .title-spark { display: none; }
  .hero-copy { max-width: 100%; }
  .hero h1 { margin: 0 0 10px; font-size: clamp(25px, 6.8vw, 34px); line-height: 1.45; letter-spacing: 0; width: auto; }
  .hero h1 br { display: none; }
  .hero p { font-size: 14px; line-height: 1.7; max-width: 260px; color: #5c765a; }
  .hero-link { min-height: 44px; margin-top: 8px; font-size: 14px; gap: 12px; }
  .round-arrow { width: 28px; height: 28px; }
  .hero-art { --art-opacity: .12; opacity: .12; right: -150px; top: -55px; pointer-events: none; }
  .notice { padding: 14px; margin: 12px 0 18px; gap: 10px; border-color: var(--app-line); background: var(--app-surface); border-radius: 13px; }
  .notice-label { font-size: 13px; gap: 6px; padding-top: 0; }
  .notice-label .icon { width: 17px; height: 17px; }
  .notice p { font-size: 13px; line-height: 1.7; color: var(--app-muted); }
  .notice button { display: none; }
  .category-frame { border-radius: 18px; padding: 20px 16px 15px; background: var(--app-surface); border-color: var(--app-line); }
  .category-frame .section-head { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 18px; }
  .section-eyebrow { font-size: 13px; letter-spacing: .5px; color: var(--app-muted); margin-bottom: 8px; }
  .section-eyebrow .desktop-only { display: none; }
  .section-number { font-size: 11px; border-radius: 6px; padding: 3px 6px; }
  .category-frame .section-head h2 { font-size: 24px; line-height: 1.45; margin-bottom: 6px; }
  .section-head p { font-size: 14px; line-height: 1.7; color: var(--app-muted); }
  .search { width: 100%; height: 50px; border-radius: 12px; padding: 0 13px; background: var(--app-bg); border-color: var(--app-line); }
  .search > .icon { width: 20px; height: 20px; color: var(--app-muted); }
  .search input { font-size: 16px; color: var(--app-text); }
  .search input::placeholder { color: var(--app-muted); }
  .search kbd { display: none; }
  .category-frame .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .category-frame .category-card { padding: 14px 12px; border-radius: 15px; background: var(--app-surface); border-color: var(--app-line); min-width: 0; }
  .category-frame .category-card:hover { transform: none; box-shadow: none; }
  .category-frame .category-art { width: 44px; height: 44px; margin: 0 0 12px; border-radius: 13px; overflow: visible; background: var(--wash); }
  .category-art:before, .category-art .tile-back, .category-art .art-number, .category-art .art-label, .category-art .art-star { display: none; }
  .category-art .tile-front { position: static; width: 44px; height: 44px; border: 0; background: transparent; box-shadow: none; transform: none !important; backdrop-filter: none; }
  .category-art .tile-front .icon { width: 26px; height: 26px; stroke-width: 1.5; }
  .category-frame .category-body { padding: 0; }
  .category-title { flex-wrap: wrap; gap: 6px; }
  .category-frame .category-title h3 { font-size: 18px; line-height: 1.4; letter-spacing: 0; }
  .category-frame .category-title .count { font-size: 12px; padding: 1px 5px; line-height: 18px; color: var(--app-muted); }
  .category-frame .category-body p { display: none; }
  .category-bottom { padding-top: 10px; margin-top: 12px; border-color: var(--app-line); gap: 5px; }
  .category-frame .from-price { font-size: 18px; color: var(--app-text); white-space: nowrap; }
  .category-frame .from-price small { font-size: 11px; color: var(--app-muted); margin-left: 4px; }
  .category-frame .category-go { width: 23px; height: 23px; flex-shrink: 0; }
  .category-card.is-selected { background: var(--app-surface-alt); border-color: var(--app-accent) !important; box-shadow: 0 0 0 1px var(--app-accent); }
  .category-card.is-selected .category-go { background: var(--app-accent); border-color: var(--app-accent); }
  .category-card.is-selected .category-title h3 { color: var(--app-accent); }
  .category-frame .catalog-footer { margin-top: 16px; padding-top: 0; color: var(--app-muted); font-size: 12px; }
  .catalog-footer > span:last-child { display: none; }
  .flow-panel { border-radius: 18px; margin-top: 16px; border-color: var(--app-line); background: var(--app-surface); scroll-margin-top: calc(86px + var(--app-safe-top)); }
  .flow-inner { padding: 22px 16px; }
  .flow-panel-header { gap: 10px; margin-bottom: 20px; align-items: flex-start; flex-wrap: wrap; }
  .flow-heading { align-items: flex-start; gap: 11px; min-width: 0; }
  .flow-step { width: 34px; height: 39px; font-size: 15px; border-radius: 10px; }
  .flow-kicker { display: none; }
  .flow-heading h2 { font-size: 22px; line-height: 1.45; margin: 0 0 7px; letter-spacing: 0; }
  .flow-heading p { font-size: 14px; line-height: 1.7; color: var(--app-muted); }
  .selection-crumb { margin: 0 0 0 45px; padding: 5px 10px; font-size: 13px; line-height: 1.5; background: var(--app-surface-alt); border-color: var(--app-line); color: var(--app-muted); }
  .selection-crumb .icon { width: 15px; height: 15px; }
  .inline-product-grid { grid-template-columns: 1fr; gap: 12px; }
  .inline-product-grid .product-option { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px 12px; padding: 18px 14px; border-radius: 14px; background: var(--app-surface); border-color: var(--app-line); }
  .inline-product-grid .product-option:hover { transform: none; background: var(--app-surface-alt); }
  .inline-product-grid .product-icon { width: 42px; height: 45px; border-radius: 12px; }
  .inline-product-grid .product-icon .icon { width: 25px; height: 25px; }
  .inline-product-grid .product-details { padding-top: 0; }
  .inline-product-grid .product-name { font-size: 17px; line-height: 1.5; gap: 7px; }
  .inline-product-grid .product-tag { font-size: 12px; line-height: 1.5; padding: 2px 6px; }
  .inline-product-grid .product-desc { font-size: 14px; line-height: 1.7; margin-top: 8px; max-width: none; color: var(--app-muted); }
  .inline-product-grid .product-stock { font-size: 13px; line-height: 1.6; margin-top: 8px; color: var(--app-muted); }
  .inline-product-grid .product-price { grid-column: 2; padding-top: 4px; margin: 0; text-align: left; font-size: 24px; display: flex; align-items: baseline; gap: 7px; color: var(--app-accent); }
  .inline-product-grid .product-price small { display: inline; font-size: 12px; color: var(--app-muted); letter-spacing: 0; }
  .inline-product-grid .product-arrow { display: none; }
  .inline-product-grid .product-option.is-selected { background: var(--app-surface-alt); border-color: var(--app-accent); box-shadow: 0 0 0 1px var(--app-accent); }
  .inline-product-grid .product-option.is-selected:after { width: 20px; height: 20px; background: var(--app-accent); font-size: 12px; }
  .product-panel-footer { flex-wrap: wrap; font-size: 13px; line-height: 1.6; margin-top: 18px; padding-top: 15px; gap: 7px; border-color: var(--app-line); color: var(--app-muted); }
  .product-panel-footer > span .icon { width: 15px; height: 15px; }
  .flow-link { font-size: 13px; min-height: 44px; color: var(--app-accent); }
  .flow-link .icon { width: 16px; height: 16px; }
  .loading-head { font-size: 14px; color: var(--app-muted); gap: 10px; min-height: 30px; }
  .flow-panel .skeleton-product { min-height: 160px; border-color: var(--app-line); background: var(--app-surface); }
  .skeleton { background: var(--app-surface-alt); }
  .checkout-grid, .payment-layout { grid-template-columns: 1fr; gap: 22px; }
  .checkout-fields { padding: 0; }
  .checkout-fields .field-row { display: block; padding-bottom: 22px; margin-bottom: 22px; border-color: var(--app-line); }
  .field-label { font-size: 16px; line-height: 1.5; margin-bottom: 10px; color: var(--app-text); }
  .field-label span { font-size: 13px; color: var(--app-muted); display: inline-block; margin-left: 4px; }
  .field-note { font-size: 13px; color: var(--app-muted); line-height: 1.7; margin-top: 5px; }
  .quantity { width: fit-content; height: 56px; border-radius: 13px; padding: 5px; margin-top: 14px; border-color: var(--app-line); background: var(--app-surface); }
  .quantity button { width: 44px; height: 44px; border-radius: 9px; background: var(--app-surface-alt); color: var(--app-accent); }
  .quantity button .icon { width: 19px; height: 19px; }
  .quantity input { width: 70px; font-size: 20px; font-weight: 550; color: var(--app-text); }
  .text-input, .checkout-fields .text-input { font-size: 16px; padding: 15px 14px; min-height: 54px; border-radius: 12px; background: var(--app-surface); color: var(--app-text); border-color: var(--app-line); }
  .text-input::placeholder { color: var(--app-muted); }
  .email-note { font-size: 13px; color: var(--app-muted); line-height: 1.7; margin: 10px 0 0; }
  .checkout-fields .demo-note, .demo-note { font-size: 13px; line-height: 1.75; margin-top: 18px; padding: 13px; border-radius: 10px; color: #847044; }
  .demo-note .icon { width: 17px; height: 17px; margin-top: 3px; }
  .checkout-summary { padding: 18px; border-radius: 14px; background: var(--app-surface-alt); border-color: var(--app-line); }
  .checkout-summary .selected-product { gap: 12px; margin-bottom: 20px; }
  .checkout-summary .product-icon { width: 43px; height: 46px; border-radius: 12px; }
  .checkout-summary .product-details b { font-size: 17px; line-height: 1.6; }
  .checkout-summary .product-stock { font-size: 13px; margin-top: 6px; color: var(--app-muted); }
  .summary-lines { padding-top: 15px; border-color: var(--app-line); }
  .summary-lines > div, .checkout-summary .summary-lines > div { font-size: 14px; margin: 10px 0; color: var(--app-muted); gap: 12px; }
  .summary-lines > div span:last-child { color: var(--app-text); }
  .checkout-summary .order-total { margin: 18px 0 20px; padding-top: 18px; border-color: var(--app-line); gap: 10px; }
  .order-total > span { font-size: 15px; color: var(--app-text); }
  .checkout-summary .total-price { font-size: 34px; color: var(--app-accent); }
  .checkout-summary .total-price small { font-size: 13px; letter-spacing: 0; margin-left: 5px; color: var(--app-muted); }
  #orderButton { min-height: 54px; font-size: 16px; padding: 14px 16px; }
  .summary-secure { font-size: 12px; line-height: 1.6; margin-top: 14px; color: var(--app-muted); }
  .summary-secure .icon { width: 15px; height: 15px; }
  .inline-error { font-size: 14px; line-height: 1.7; padding: 12px 14px; }
  .payment-layout .payment-amount { padding: 24px 18px; border-color: var(--app-line); background: var(--app-surface-alt); }
  .payment-amount > span { font-size: 14px; color: var(--app-muted); }
  .payment-amount strong { font-size: 40px; color: var(--app-accent); margin: 9px 0; }
  .payment-amount strong small { font-size: 14px; color: var(--app-muted); }
  .payment-amount > small { font-size: 12px; color: var(--app-muted); }
  .order-facts { font-size: 14px; margin-top: 22px; }
  .order-facts > div { align-items: flex-start; gap: 14px; margin: 17px 0; color: var(--app-muted); }
  .order-facts dt { max-width: 5em; }
  .order-facts dd { color: var(--app-text); }
  .copy-button { min-width: 44px; min-height: 44px; padding: 8px; margin: -10px -8px -10px 0; color: var(--app-accent); }
  .copy-button .icon { width: 17px; height: 17px; }
  .payment-state { font-size: 13px; line-height: 1.6; padding: 7px 10px; margin-bottom: 14px; }
  .payment-layout .payment-blocked { padding: 18px 15px; border-color: var(--app-line); background: var(--app-surface-alt); gap: 10px; }
  .payment-layout .payment-blocked b { font-size: 16px; color: var(--app-text); }
  .payment-layout .payment-blocked p { font-size: 14px; line-height: 1.8; color: var(--app-muted); margin-top: 8px; }
  .payment-actions { flex-direction: column; gap: 10px; }
  .payment-layout .payment-actions .button { min-height: 52px; font-size: 16px; padding: 13px; }
  .payment-panel-intro { font-size: 13px; line-height: 1.8; color: var(--app-muted); }
  .benefits { gap: 20px 12px; padding: 24px 3px; margin-top: 25px; border-color: var(--app-line); }
  .benefit { gap: 10px; padding: 0; align-items: flex-start; }
  .benefit > .icon { width: 22px; height: 22px; margin-top: 2px; }
  .benefit b { font-size: 14px; color: var(--app-text); }
  .benefit p { font-size: 12px; line-height: 1.6; color: var(--app-muted); margin-top: 6px; }
  footer { padding: 22px 0; }
  .footer-inner { flex-direction: column; align-items: center; gap: 10px; font-size: 12px; color: var(--app-muted); }
  .footer-inner > div { gap: 12px; }
  .footer-brand { font-size: 23px; }
  .footer-inner > span { max-width: none; text-align: center; font-size: 12px; }
  .demo-badge { display: inline; padding-left: 12px; margin-left: 12px; border-left: 1px solid var(--app-line); font-size: 10px; }
  .mobile-nav { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; z-index: 110; bottom: 0; left: 0; right: 0; padding: 6px max(10px, env(safe-area-inset-right, 0px)) calc(6px + var(--app-safe-bottom)) max(10px, env(safe-area-inset-left, 0px)); background: var(--app-surface); border-top: 1px solid var(--app-line); box-shadow: 0 -6px 25px #1e422808; transition: transform .25s var(--ease), opacity .2s; }
  .mobile-tab { min-height: 56px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; background: transparent; border-radius: 12px; color: var(--app-muted); padding: 4px; font-size: 13px; }
  .mobile-tab .icon { width: 23px; height: 23px; stroke-width: 1.7; }
  .mobile-tab.active { color: var(--app-accent); background: var(--app-surface-alt); font-weight: 550; }
  body.input-focused .mobile-nav { transform: translateY(110%); opacity: 0; pointer-events: none; }
  .modal { max-width: calc(100vw - 24px); max-height: calc(var(--app-viewport-height, 100dvh) - var(--app-safe-top) - var(--app-safe-bottom) - 24px); }
  .modal-shell { max-height: calc(var(--app-viewport-height, 100dvh) - var(--app-safe-top) - var(--app-safe-bottom) - 24px); border-radius: 20px; background: var(--app-surface); color: var(--app-text); }
  .modal-top { padding: 15px 18px 10px; }
  .modal-kicker { font-size: 11px; letter-spacing: 1px; color: var(--app-muted); }
  .icon-button { width: 44px; height: 44px; background: var(--app-surface-alt); border-color: var(--app-line); }
  .icon-button .icon { width: 20px; height: 20px; }
  .simple-content { padding: 10px 22px 25px; }
  .dialog-emblem { width: 48px; height: 48px; margin-bottom: 18px; }
  .simple-content h2 { font-size: 23px; line-height: 1.5; }
  .subtext, .local-note { font-size: 14px; line-height: 1.75; color: var(--app-muted); }
  .simple-content form { margin-top: 24px; }
  .simple-content form .button { min-height: 52px; }
  .local-note { margin-top: 20px; }
  .query-card { border-color: var(--app-line); background: var(--app-surface-alt); padding: 16px; border-radius: 12px; }
  .query-card > b { font-size: 16px; line-height: 1.6; }
  .query-card > p { font-size: 13px; line-height: 1.7; color: var(--app-muted); overflow-wrap: anywhere; }
  .query-card-footer { flex-wrap: wrap; gap: 7px; font-size: 13px; line-height: 1.6; color: var(--app-muted); border-color: var(--app-line); }
  .query-empty { background: var(--app-surface-alt); font-size: 14px; color: var(--app-muted); }
  .faq details { padding: 18px 0; border-color: var(--app-line); }
  .faq summary { font-size: 16px; line-height: 1.6; color: var(--app-text); min-height: 32px; }
  .faq details p { font-size: 14px; line-height: 1.85; color: var(--app-muted); margin-top: 12px; }
  .empty-categories { padding: 28px 16px; background: var(--app-surface-alt); border-color: var(--app-line); }
  .empty-categories h3 { font-size: 17px; }
  .empty-categories p { font-size: 14px; }
  .empty-categories button { min-height: 44px; font-size: 15px; }
  .search-match-note, .search-match-note button { font-size: 14px; line-height: 1.7; }
  .toast { font-size: 14px; line-height: 1.6; padding: 13px 17px; bottom: calc(88px + var(--app-safe-bottom)); border-radius: 12px; }
}

@media (max-width: 360px) {
  .wrap { padding: 0 12px; }
  .brand { font-size: 18px; gap: 8px; }
  .brand small { font-size: 9px; }
  .nav-query { font-size: 13px; padding: 9px 10px; gap: 5px; }
  .hero { padding: 20px 16px; }
  .hero h1 { font-size: 24px; }
  .category-frame { padding: 18px 12px 15px; }
  .category-frame .category-grid { gap: 10px; }
  .category-frame .category-card { padding: 13px 10px; }
  .category-frame .category-title h3 { font-size: 17px; }
  .category-frame .category-title .count { display: none; }
  .category-frame .from-price { font-size: 18px; }
  .category-frame .from-price small { display: block; margin: 2px 0 0; font-size: 12px; }
  .flow-inner { padding: 20px 14px; }
  .flow-heading h2 { font-size: 21px; }
  .checkout-summary { padding: 16px; }
  .checkout-summary .total-price { font-size: 30px; }
  .checkout-summary .total-price small { font-size: 12px; }
  .benefits { grid-template-columns: 1fr; gap: 19px; padding: 23px 5px; }
}

/* Telegram supplies these colors at runtime; the ordinary web preview stays light. */
@media (max-width: 800px) {
  [data-color-scheme="dark"] .hero { background: linear-gradient(115deg, #203e32, #183128); border-color: var(--app-line); }
  [data-color-scheme="dark"] .hero h1 { color: var(--app-text); }
  [data-color-scheme="dark"] .hero h1 > span:not(.title-spark) { color: #8cdab3; }
  [data-color-scheme="dark"] .hero p, [data-color-scheme="dark"] .hero-link { color: #b2cfb9; }
  [data-color-scheme="dark"] .hero-art { --art-opacity: .2; }
  [data-color-scheme="dark"] .brand small, [data-color-scheme="dark"] .notice-label, [data-color-scheme="dark"] .catalog-footer, [data-color-scheme="dark"] .footer-brand { color: var(--app-muted); }
  [data-color-scheme="dark"] .category-title .count, [data-color-scheme="dark"] .category-bottom { border-color: var(--app-line); }
  [data-color-scheme="dark"] .category-go, [data-color-scheme="dark"] .flow-step { border-color: var(--app-line); background: var(--app-surface-alt); color: var(--app-muted); }
  [data-color-scheme="dark"] .section-number, [data-color-scheme="dark"] .dialog-emblem { background: var(--app-surface-alt); color: var(--app-muted); border-color: var(--app-line); }
  [data-color-scheme="dark"] .product-tag { background: #2b4433; color: #b2d0a3; }
  [data-color-scheme="dark"] .checkout-summary .selected-product .product-icon { background: #dce6d7; }
  [data-color-scheme="dark"] .demo-note { background: #353125; color: #e0ce9c; }
  [data-color-scheme="dark"] .payment-state { background: #373224; color: #dfce99; }
  [data-color-scheme="dark"] .button.is-saved { background: #2c4737; color: #b7dba8; }
  [data-color-scheme="dark"] .icon-button:hover { background: var(--app-surface-alt); }
  [data-color-scheme="dark"] .skeleton:after { background: linear-gradient(100deg, transparent, #ffffff0d, transparent); }
  [data-color-scheme="dark"] .inline-error { background: #412f2b; color: #f0b8a8; border-color: #634138; }
}
@media (max-width: 800px) {
  /* Keep the first screen centered on choosing a category. */
  .hero { min-height: 136px; padding-top: 21px; padding-bottom: 21px; }
  .hero-link { display: none; }
  html { scroll-padding-bottom: calc(90px + var(--app-safe-bottom)); }
  input, .button { scroll-margin-bottom: calc(90px + var(--app-safe-bottom)); }
}

@media (max-width: 800px) {
  .wrap { padding-left: max(16px, var(--app-safe-left)); padding-right: max(16px, var(--app-safe-right)); }
  .mobile-nav { padding-left: max(10px, var(--app-safe-left)); padding-right: max(10px, var(--app-safe-right)); }
  .modal { max-width: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px); }
}
@media (max-width: 360px) {
  .wrap { padding-left: max(12px, var(--app-safe-left)); padding-right: max(12px, var(--app-safe-right)); }
}
@media (max-width: 800px) {
  .catalog-product-view > .flow-inner { padding: 0; }
  .catalog-toolbar { gap: 10px; margin: -3px 0 21px; padding-bottom: 15px; border-color: var(--app-line); }
  .catalog-back { min-height: 44px; font-size: 15px; padding: 10px 13px; gap: 8px; border-radius: 12px; margin-left: -2px; background: var(--app-surface-alt); color: var(--app-accent); }
  .catalog-back .icon { width: 19px; height: 19px; }
  .catalog-back:hover { background: var(--app-surface-alt); transform: none; }
  .catalog-view-label { font-size: 13px; color: var(--app-muted); gap: 9px; }
  .catalog-view-label > span { font-size: 12px; color: var(--app-muted); letter-spacing: .2px; }
  .catalog-product-view .flow-panel-header { margin-bottom: 20px; }
  .modal-top { background: var(--app-surface); border-color: var(--app-line); padding-bottom: 14px; }
  .simple-content { padding-top: 22px; }
}
@media (max-width: 360px) {
  .catalog-view-label > span { display: none; }
}