:root{
  --font-main:-apple-system,BlinkMacSystemFont,'Roboto',system-ui,sans-serif;

  --color-bg:#F9FAFB;
  --color-surface:#fff;
  --color-surface-2:#f3f4f6;

  --color-text:#1F2937;
  --color-text-muted:#4b5563;
  --color-border:#e5e7eb;
  --color-white:#fff;
  --color-black:#000;

  --color-text-strong:#111827;
  --color-text-secondary:#374151;
  --color-text-dim:#6b7280;
  --color-text-faint:#9ca3af;
  --color-text-ink:#1a1a1a;

  --color-border-strong:#d1d5db;

  --color-info-bg:#dbeafe;
  --color-success-bg:#ecfdf5;
  --color-on-dark:#f9fafb;

  --color-bg-dark:#0b1220;
  --color-surface-dark:#0f172a;
  --color-surface-dark-2:#111c33;
  --color-border-dark:#1f2a44;

  --overlay-slate-70:rgba(148,163,184,0.7);
  --overlay-ink-24:rgba(15,23,42,.24);
  --overlay-ink-90:rgba(15,23,42,0.9);
  --overlay-modal:rgba(20,20,20,.60);

  --color-primary:#f97316;
  --color-primary-hover:#ea580c;
  --on-primary:#fff;

  --primary-14:rgba(249,115,22,.14);
  --primary-25:rgba(249,115,22,.25);
  --primary-45:rgba(249,115,22,.45);
  --primary-12:rgba(249,115,22,.12);

  --overlay-bg:rgba(0,0,0,.35);

  --shadow-sm:0 4px 6px -1px rgba(0,0,0,.10);

  --radius-lg:16px;
  --radius-md:12px;

  --header-height:50px;

  /* ✅ единые имена (как у тебя в layout+js) */
  --sidebar-width:200px;
  --sidebar-collapsed:60px;

  --ease-smooth:cubic-bezier(.2,.8,.2,1);
  --dur-fast:220ms;
  --dur-med:340ms;

  --column-scroll-pad:200px;
  --column-bottom-gap:32px;

  /* вњ… Switch vars */
  --switch-w:40px;
  --switch-h:25px;
  --switch-pad:3px;
  --switch-on:var(--color-primary);
  --switch-off-bg:var(--color-surface-2);
  --switch-off-border:var(--color-border);
  --switch-knob:var(--color-surface);
  --switch-shadow:0 6px 16px rgba(0,0,0,.12);
}

html[data-theme="dark"]{
  /* temporary: dark theme uses light palette */
  --color-bg:#F9FAFB;
  --color-surface:#fff;
  --color-surface-2:#f3f4f6;

  --color-text:#1F2937;
  --color-text-muted:#4b5563;
  --color-border:#e5e7eb;

  --color-primary:#f97316;
  --color-primary-hover:#ea580c;

  --shadow-sm:0 4px 6px -1px rgba(0,0,0,.10);

  --on-primary:#fff;

  --primary-14:rgba(249,115,22,.14);
  --primary-25:rgba(249,115,22,.25);
  --primary-45:rgba(249,115,22,.45);
  --primary-12:rgba(249,115,22,.12);

  --overlay-bg:rgba(0,0,0,.35);

  --switch-shadow:0 6px 16px rgba(0,0,0,.12);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:light}
button,input,textarea,select{font:inherit;color:inherit}

button, input, select, textarea{
  font: inherit;
  color: inherit;
}

body{
  font-family:var(--font-main);
  background:var(--color-bg);
  color:var(--color-text);
  transition:background-color var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
  overflow:hidden;
}

body.sidebar-open,
body.sheet-open,
body.modal-open{ overflow:hidden; }

.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
.no-scrollbar::-webkit-scrollbar{ display:none; }

.hidden{display:none!important}
.muted{color:var(--color-text-muted)}

.fade-in{animation:fadeIn 180ms var(--ease-smooth) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ================= Header ================= */

header{
  height:var(--header-height);
  background:var(--color-surface);
  box-shadow:var(--shadow-sm);
  display:flex;
  align-items:center;
  padding:4px 16px;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  overflow:visible;
}

.header-content{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{display:flex;align-items:center;gap:.75rem;user-select:none}
.logo-icon{
  width:36px;height:36px;border-radius:var(--radius-md);
  background:var(--color-surface-2);color:var(--color-text-muted);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;
}
.logo-img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:inherit;
}
.logo-text{font-size:1.05rem;font-weight:700;letter-spacing:.2px}
.logo-city-wrapper{
  position:relative;
  display:flex;
  align-items:center;
  gap:.35rem;
}
.header-city-button{
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.15rem .75rem;
  border-radius:999px;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text);
  font-size:.95rem;
  font-weight:600;
  min-height:32px;
  min-width:140px;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.header-city-button:disabled{
  cursor:default;
  opacity:.6;
}
.header-city-button:hover:not(:disabled){
  background:var(--color-surface-2);
  transform:translateY(-1px);
}
.header-city-name{
  color:var(--color-primary);
  font-weight:700;
  display:inline-block;
  min-width:90px;
}
.header-city-dropdown{
  position:absolute;
  top:calc(100% + .4rem);
  right:0;
  min-width:220px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:0 4px 24px var(--overlay-bg);
  padding:.35rem 0;
  z-index:100;
}
.header-city-option{
  width:100%;
  border:none;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:.4rem .75rem;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-smooth);
  color:var(--color-text);
  font-size:.9rem;
}
.header-city-option:hover{
  background:var(--color-surface-2);
}
.header-city-option.is-active .header-city-option-city{
  color:var(--color-primary);
}
.header-city-option-city{
  font-weight:600;
}
.header-city-option-store{
  font-size:.75rem;
  color:var(--color-text-muted);
}
.logo-city-wrapper.hidden{
  display:none;
}

/* Header address widget (mobile-only, hidden on desktop) */
.header-address-widget{display:none}
.header-address-button{
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:0;
  border:none;
  background:none;
  color:var(--color-text);
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  min-width:0;
}
.header-address-icon{
  color:var(--color-primary);
  font-size:1.2rem;
  flex-shrink:0;
}
.header-address-content{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  overflow:visible;
}
.header-address-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.header-address-text.is-placeholder{
  color:var(--color-text-muted);
  font-weight:500;
}
.header-address-chevron{
  font-size:.55rem;
  color:var(--color-text-muted);
  flex-shrink:0;
}

/* Статус времени работы — подстрока под адресом */
.header-store-status{
  display:none;
}

@media (max-width:768px){
  header{
    position:relative;
  }
  .logo-city-wrapper{
    position:absolute;
    right:0;
    bottom:0;
    z-index:10;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .header-address-widget{
    display:flex;
    align-items:center;
    min-width:0;
    margin-left:.35rem;
    margin-top:6px;
  }
  .header-address-button{
    align-items:center;
  }
  .header-address-content{
    position:static;
    display:flex;
    flex-direction:column;
    gap:1px;
    min-width:0;
    margin-top:12px;
    align-items:flex-start;
  }
  .header-address-text{
    line-height:1.1;
    text-align:left;
    align-self:flex-start;
  }
  .header-address-chevron{
    margin-top:0;
  }
  .logo-text{
    margin-right:0;
  }
  .header-store-status:not(.hidden){
    position:static;
    display:block;
    font-size:0.75rem;
    font-weight:500;
    color:var(--color-text-muted);
    line-height:1.15;
    white-space:normal;
    overflow:visible;
    text-overflow:initial;
  }
}

.header-actions{display:flex;align-items:center;gap:.75rem}

/* burger */
.icon-btn{
  border:0;
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  border-radius:50%;
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.icon-btn:hover{background:var(--color-surface-2);color:var(--color-text);transform:translateY(-1px)}

/* ✅ вернули “как раньше” для темы/профиля */
.header-btn{
  width:40px;height:40px;
  border-radius:50%;
  border:0;
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.header-btn:hover{background:var(--color-surface-2);color:var(--color-text);transform:translateY(-1px)}
.header-btn.is-active{
  background: var(--primary-12);
  color: var(--color-primary);
}

/* ================= User Menu Dropdown ================= */
.user-menu-wrapper {
  position: relative;
}

.header-profile-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Clients list: phone in one line, no wrapping */
.clients-panel .order-line.muted{
  display: flex;
  gap: 8px;
  align-items: center;
}

.clients-panel .order-line.muted .client-phone{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Clients-specific row layout: tighter right column and responsive middle */
.clients-panel .order-row{
  grid-template-columns: 64px minmax(200px, 1fr) 80px !important;
}

.clients-panel .order-main{ /* compact left */
  display:flex;
  flex-direction:column;
  gap:6px;
}

.clients-panel .order-mid{ /* ensure mid column can shrink */
  min-width:0;
}

.clients-panel .order-actions{ /* align pill to right and make it compact */
  display:flex;
  justify-content:flex-end;
}

.clients-panel .pill{
  padding:6px 10px;
  font-size:13px;
  height:32px;
  line-height:20px;
  min-width:40px;
  max-width:80px;
  box-sizing:border-box;
}

@media (max-width:768px){
  .clients-panel .order-row{
    grid-template-columns: 56px minmax(160px, 1fr) 64px !important;
  }
  .clients-panel .pill{
    font-size:12px;
    padding:6px 8px;
    height:28px;
  }
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 4px 20px var(--overlay-bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--dur-fast) var(--ease-smooth), 
              visibility var(--dur-fast) var(--ease-smooth),
              transform var(--dur-fast) var(--ease-smooth);
  z-index: 1000;
  overflow: hidden;
}

.user-menu-wrapper.active .user-menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-menu-header {
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-menu-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.user-menu-info {
  flex: 1;
  min-width: 0;
}

.user-menu-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-email {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.user-menu-tenant {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-time {
  font-size: 0.813rem;
  color: var(--color-text-secondary);
  font-family: 'Courier New', monospace;
  margin-top: 4px;
  text-align: left;
}

.user-menu-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0.5rem 0;
}

.user-menu-section {
  padding: 0.5rem 1rem;
}

.user-menu-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.user-menu-store-selector {
  position: relative;
}

.user-menu-store-btn {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  transition: background var(--dur-fast) var(--ease-smooth);
}

.user-menu-store-btn:hover {
  background: var(--color-surface-2);
}

.user-menu-store-btn i:first-child {
  color: var(--color-primary);
  width: 16px;
  text-align: center;
}

.user-menu-store-btn span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-store-btn i:last-child {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.user-menu-store-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 2px 12px var(--overlay-bg);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}

.user-menu-store-dropdown.hidden {
  display: none;
}

.user-menu-store-option {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background var(--dur-fast) var(--ease-smooth);
  display: block;
}

.user-menu-store-option:hover {
  background: var(--color-surface-2);
}

.user-menu-store-option.is-active {
  background: var(--primary-14);
  color: var(--color-primary);
  font-weight: 600;
}

.user-menu-actions {
  padding: 0.5rem;
}

.user-menu-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  transition: background var(--dur-fast) var(--ease-smooth);
}

.user-menu-btn:hover {
  background: var(--color-surface-2);
}

.user-menu-btn i {
  width: 18px;
  text-align: center;
}

.user-menu-btn#userMenuLogout {
  color: var(--color-primary);
}

.user-menu-btn#userMenuLogout:hover {
  background: var(--primary-12);
}

/* ================= Layout / Grid ================= */

.main-container{
  height:calc(100vh - var(--header-height));
  padding:1rem;
  padding-bottom:calc(2rem + var(--column-bottom-gap));
}

.app-grid{
  display:grid;
  grid-template-columns:var(--sidebar-width) 250px 1fr 500px;
  gap:0.5rem;
  height:100%;
  align-items:stretch;
}

html[data-sidebar-collapsed="1"] .app-grid{
  grid-template-columns:var(--sidebar-collapsed) 250px 1fr 500px;
}

.page-col{
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
}

body.page-home .page-col-right .panel{
  min-height:calc(100vh - var(--header-height) - var(--column-bottom-gap));
}

/* ================= Panel ================= */

.panel{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.panel.toolbar-island{
  overflow:visible;
  position:relative;
  z-index:10;
}

.app-grid > .panel,
.page-col > .panel{
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.panel-header{
  padding:12px;
  border-bottom:1px solid var(--color-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.panel-title{font-weight:700;color:var(--color-text)}

.panel-body{
  padding:12px;
  overflow-y:auto;
  flex:1;
  min-height:0;
}
.panel-body::after{content:"";display:block;height:var(--column-scroll-pad)}

.stores-panel .panel-body::after{height:0}

.panel-footer{
  padding:12px;
  border-top:1px solid var(--color-border);
  background:var(--color-surface);
  flex:0 0 auto;
}

/* ================= Product Footer ================= */

.product-footer-actions{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  flex-wrap:nowrap;
}

.product-footer-view,
.product-footer-edit-mode{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  flex-wrap:nowrap;
}

.product-footer-btn{
  height:52px;
  border:none;
  cursor:pointer;
  font-weight:800;
  transition:all var(--dur-fast) var(--ease-smooth);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

/* Round buttons (delete, cancel, more) */
.product-footer-delete,
.product-footer-cancel,
.product-footer-more{
  width:52px;
  border-radius:50%;
  flex:0 0 auto;
  font-size:18px;
  line-height:1;
}

.product-footer-delete{
  background:var(--color-primary);
  color:var(--on-primary);
  border:1px solid var(--color-primary);
}

.product-footer-delete:hover{
  background:var(--color-primary-hover);
  border-color:var(--color-primary-hover);
}

.product-footer-cancel,
.product-footer-more{
  background:var(--color-surface-2);
  color:var(--color-text);
  border:1px solid var(--color-border);
}

.product-footer-cancel:hover,
.product-footer-more:hover{
  background:var(--color-border);
}

/* Expandable buttons (two-step confirmation) */
.product-footer-delete.is-confirm,
.product-footer-cancel.is-confirm{
  width:auto;
  border-radius:999px;
  padding:0 16px;
  font-size:14px;
}

.product-footer-delete.is-confirm{
  background:var(--color-primary);
  color:var(--on-primary);
}

.product-footer-cancel.is-confirm{
  background:var(--color-surface-2);
  color:var(--color-text);
}

/* Full-width buttons (edit, save) */
.product-footer-edit,
.product-footer-save{
  flex:1 1 auto;
  border-radius:999px;
  padding:0 18px;
  background:var(--color-primary);
  color:var(--on-primary);
  border:1px solid var(--color-primary);
}

/* Cancel button in full-width mode (for picker) */
.product-footer-cancel.is-fullwidth{
  flex:1 1 auto;
  width:auto;
  border-radius:999px;
  padding:0 18px;
  font-size:14px;
  line-height:1;
  background:var(--color-surface-2);
  color:var(--color-text);
  border:1px solid var(--color-border);
}

.product-footer-edit:hover,
.product-footer-save:hover{
  background:var(--color-primary-hover);
  border-color:var(--color-primary-hover);
}

/* Меню «три точки» в футере — только по высоте контента */
.product-footer-more-dropdown{
  position:fixed;
  z-index:1000;
  min-width:220px;
  padding:6px 0;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:12px;
  box-shadow:0 8px 24px var(--overlay-bg);
  display:flex;
  flex-direction:column;
  gap:0;
}
.product-footer-more-dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:12px 16px;
  border:none;
  background:transparent;
  font-size:14px;
  color:var(--color-text);
  cursor:pointer;
  text-align:left;
  transition:background var(--dur-fast) var(--ease-smooth);
}
.product-footer-more-dropdown-item:hover{
  background:var(--color-surface-2);
}
.product-footer-more-dropdown-item i{
  font-size:14px;
  color:var(--color-primary);
  flex-shrink:0;
}

/* Выпадающее меню «+»: Товар / Комбо-набор (как user-menu) */
.add-main-wrapper{
  position:relative;
}
.add-main-dropdown{
  position:absolute;
  top:calc(100% + 0.5rem);
  right:0;
  min-width:220px;
  padding:8px 0;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:12px;
  box-shadow:0 4px 20px var(--overlay-bg);
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity var(--dur-fast) var(--ease-smooth), visibility var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.add-main-wrapper.is-open .add-main-dropdown{
  display:block !important;
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.add-main-dropdown-sep{
  height:1px;
  margin:6px 0;
  background:var(--color-border);
}
.add-main-dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:12px 16px;
  border:none;
  background:transparent;
  font-size:14px;
  color:var(--color-text);
  cursor:pointer;
  text-align:left;
  transition:background var(--dur-fast) var(--ease-smooth);
}
.add-main-dropdown-item:hover{
  background:var(--color-surface-2);
}
.add-main-dropdown-item i{
  font-size:14px;
  color:var(--color-primary);
  flex-shrink:0;
}

/* center stack island toolbar + content */
.center-stack{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.orders-center-panel{flex:1;min-height:0}

.stores-panel{
  flex:1;
  min-height:0;
}
.stores-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--color-border);
  padding-bottom:10px;
}
.stores-panel-header .panel-title{
  font-weight:800;
  display:flex;
  align-items:center;
  gap:10px;
}
.stores-current{
  font-size:14px;
  color:var(--color-text-muted);
}
.stores-form{
  border:1px solid var(--color-border);
  border-radius:12px;
  padding:10px;
  background:var(--color-surface-2);
  display:grid;
  gap:8px;
}
.stores-form-row label{
  font-size:12px;
  color:var(--color-text-muted);
  display:block;
  margin-bottom:4px;
}
.stores-form .control{
  width:100%;
  border-radius:8px;
}
.stores-form-actions{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
  width:100%;
  margin-top:10px;
}
.settings-footer-actions .settings-footer-btn{
  height:52px;
  border:none;
  cursor:pointer;
  font-weight:800;
  transition:all var(--dur-fast) var(--ease-smooth);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  padding:0 18px;
}
.settings-footer-actions .settings-footer-btn--save{
  order:2;
  flex:1 1 auto;
  border-radius:999px;
  background:var(--color-primary);
  color:var(--on-primary);
  border:1px solid var(--color-primary);
}
.settings-footer-actions .settings-footer-btn--save:hover{
  background:var(--color-primary-hover);
  border-color:var(--color-primary-hover);
}
.settings-footer-actions .settings-footer-btn--cancel,
.settings-footer-actions .settings-footer-btn--delete{
  width:52px;
  order:1;
  flex:0 0 auto;
  border-radius:50%;
  padding:0;
  font-size:18px;
  line-height:1;
}
.settings-footer-actions .settings-footer-btn--cancel{
  background:var(--color-surface-2);
  color:var(--color-text);
  border:1px solid var(--color-border);
}
.settings-footer-actions .settings-footer-btn--cancel:hover{
  background:var(--color-border);
}
.settings-footer-actions .settings-footer-btn--delete{
  order:0;
  background:var(--color-primary);
  color:var(--on-primary);
  border:1px solid var(--color-primary);
}
.settings-footer-actions .settings-footer-btn--delete:hover{
  background:var(--color-primary-hover);
  border-color:var(--color-primary-hover);
}
.stores-list{
  display:grid;
  gap:6px;
}
.store-card.is-active{
  border-color:var(--primary-45);
  box-shadow:0 0 0 2px var(--primary-12);
}
.stores-panel .stores-list .order-row{
  padding:8px 12px;
  gap:8px;
}
.stores-panel .stores-list .store-status{
  font-size:14px;
  line-height:1.2;
  text-transform:capitalize;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ================= Toolbar ================= */

.toolbar{
  padding:10px 12px;
  border-bottom:1px solid var(--color-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.toolbar-island .toolbar{border-bottom:0}
.toolbar-title{display:flex;align-items:center;gap:10px;font-weight:800}
.toolbar-title-text{display:grid;gap:2px}
.toolbar-title-text .muted{font-size:12px}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:8px}
.new-order-toolbar{
  align-items:center;
}
.new-order-toolbar-left{
  flex:1 1 auto;
  min-width:0;
}
.new-order-toolbar-right{
  flex:0 0 auto;
  margin-left:auto;
}
.new-order-toolbar.is-checkout-screen .new-order-toolbar-title{
  display:none;
}

.date-filter{position:relative}
.date-popover{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:260px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  padding:10px;
  display:grid;
  gap:8px;
  z-index:50;
}
.date-popover-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.date-popover-title{font-weight:700;font-size:14px;text-transform:capitalize}
.date-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:11px;color:var(--color-text-muted)}
.date-weekdays span{text-align:center}
.date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.date-cell{
  height:32px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  font-size:12px;
}
.date-cell:hover{background:var(--color-surface-2)}
.date-cell.is-in-range{background:var(--primary-14);border-color:var(--primary-25)}
.date-cell.is-start,.date-cell.is-end{background:var(--color-primary);border-color:transparent;color:var(--on-primary)}
.date-cell.is-today{border-color:var(--primary-25)}
.date-cell.is-past{opacity:0.35;cursor:default;pointer-events:none}
.date-empty{height:32px}
.date-popover-actions{display:flex;justify-content:flex-end}
/* ================= Buttons ================= */

.btn{
  height:40px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.btn:hover{background:var(--color-surface-2);transform:translateY(-1px)}
.btn-primary{background:var(--color-primary);border-color:transparent;color:var(--on-primary)}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-icon{width:40px;padding:0;justify-content:center;border-radius:50%;border:0;background:var(--color-surface-2);color:var(--color-text-muted)}
.btn-icon:hover{color:var(--color-text)}
.btn-danger{
  border-color:var(--color-primary);
  color:var(--color-primary);
  background:transparent;
}
.btn-danger:hover{
  background:var(--primary-12);
}
.btn-ghost{background:var(--color-surface);border-color:var(--color-border)}
.btn-ghost:hover{background:var(--color-surface-2)}
#ordersNotifyBtn.is-enabled{color:var(--color-primary)}
.btn-sm{height:34px;padding:0 10px;border-radius:8px;font-size:13px}
.btn-xs{height:32px;padding:0 10px;border-radius:8px;font-size:12px}
.icon-btn.btn-xs{width:32px;height:32px;border-radius:8px}

/* ================= Pills / badges ================= */

.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  color:var(--color-text);
}
.pill-strong{font-weight:900}

.badge{
  margin-left:auto;
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--color-surface-2);
  color:var(--color-text);
  border:1px solid var(--color-border);
}
.badge-warn{background:var(--primary-14);border-color:var(--primary-25)}

/* ================= Global Sidebar overlay ================= */

.sidebar-overlay{
  position:fixed;
  inset:0;
  background:var(--overlay-bg);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-med) var(--ease-smooth);
  z-index:25;
}
.sidebar-overlay.is-active{opacity:1;pointer-events:auto}

/* ================= Global Sidebar ================= */

.app-sidebar{
  position:relative;
  width:var(--sidebar-width);
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:visible;
  transition:
    transform var(--dur-med) var(--ease-smooth),
    width var(--dur-med) var(--ease-smooth);
  will-change:transform,width;
}

/* Круглая оранжевая кнопка свернуть/развернуть — на границе между первым и вторым пунктами */
.sidebar-edge-toggle{
  position:absolute;
  top:31px;
  right:-13px;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-primary);
  color:var(--color-white);
  border:none;
  border-radius:50%;
  cursor:pointer;
  padding:0;
  z-index:3;
  box-shadow:0 2px 8px var(--primary-45);
  transition:background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
.sidebar-edge-toggle:hover{
  background:var(--color-primary-hover);
  box-shadow:0 3px 12px var(--primary-45);
}
.sidebar-edge-toggle:active{
  transform:scale(0.96);
}
.sidebar-edge-toggle .sidebar-edge-icon{
  font-size:11px;
  font-weight:600;
}
.sidebar-edge-toggle .sidebar-edge-collapsed{display:none}
.sidebar-edge-toggle .sidebar-edge-expanded{display:block}
html[data-sidebar-collapsed="1"] .sidebar-edge-toggle .sidebar-edge-collapsed{display:block}
html[data-sidebar-collapsed="1"] .sidebar-edge-toggle .sidebar-edge-expanded{display:none}

/* Вкладка "Открыть меню" на мобильных, когда сайдбар закрыт */
.sidebar-open-tab{
  display:none;
  position:fixed;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:56px;
  align-items:center;
  justify-content:center;
  background:var(--color-border);
  color:var(--color-text-muted);
  border-radius:0 8px 8px 0;
  cursor:pointer;
  z-index:25;
  transition:background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
  box-shadow:2px 0 8px var(--overlay-bg);
}
.sidebar-open-tab:hover{
  background:var(--primary-14);
  color:var(--color-text);
}
@media (max-width:768px){
  .sidebar-open-tab{
    display:flex;
    top:calc(var(--header-height) + 24px);
    bottom:24px;
    height:auto;
    min-height:56px;
    transform:none;
    align-items:center;
  }
  body.sidebar-open .sidebar-open-tab{display:none}
}

@media (max-width:768px){
  .app-sidebar{
    position:fixed;
    top:calc(var(--header-height) + 16px);
    left:16px;
    bottom:16px;
    height:auto;
    transform:translateX(calc(-100% - 24px));
    z-index:30;
  }
  .app-sidebar.is-open{transform:translateX(0)}
}

/* nav */
.app-sidebar-nav{flex:1;padding:8px;overflow-y:auto;min-height:0}
.app-sidebar-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}

.nav-item{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--color-border);
  text-decoration:none;
  color:var(--color-text);
  transition:background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.nav-item:hover,
.nav-item:focus-visible,
.active-nav{
  background:var(--primary-14);
  border-color:var(--primary-25);
}
.nav-icon{
  width:22px;
  min-width:22px;
  text-align:center;
  color:var(--color-text-muted);
  box-sizing:border-box;
}
.nav-item:hover .nav-icon,
.nav-item:focus-visible .nav-icon,
.active-nav .nav-icon{color:var(--color-text)}
.nav-text{
  overflow:hidden;
  white-space:nowrap;
  opacity:1;
  max-width:220px;
  transition:max-width var(--dur-med) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
}
.active-nav{font-weight:600}

/* collapsed desktop (ровные иконки) */
@media (min-width:769px){
  html[data-sidebar-collapsed="1"] .app-sidebar{width:var(--sidebar-collapsed)}
  html[data-sidebar-collapsed="1"] .app-sidebar-nav{padding:8px}

  html[data-sidebar-collapsed="1"] .nav-item{
    width:100%;
    box-sizing:border-box;
    justify-content:center;
    gap:0;
    padding:0;
    border-radius:8px;
    border-color:transparent;
  }

  html[data-sidebar-collapsed="1"] .nav-icon{
    width:36px;
    min-width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    box-sizing:border-box;
  }

  html[data-sidebar-collapsed="1"] .nav-item:hover,
  html[data-sidebar-collapsed="1"] .nav-item:focus-visible,
  html[data-sidebar-collapsed="1"] .active-nav{
    background:transparent;
    border-color:transparent;
  }

  html[data-sidebar-collapsed="1"] .nav-item:hover .nav-icon,
  html[data-sidebar-collapsed="1"] .nav-item:focus-visible .nav-icon,
  html[data-sidebar-collapsed="1"] .active-nav .nav-icon{
    background:var(--primary-14);
    border:1px solid var(--primary-25);
    color:var(--color-text);
  }

  html[data-sidebar-collapsed="1"] .nav-text{display:none;max-width:0;opacity:0}
}

/* ================= Stages ================= */

.stage-list{display:grid;gap:10px}
.stage-item{
  width:100%;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text);
  border-radius:12px;
  padding:12px;
  cursor:pointer;

  display:grid;
  grid-template-columns:28px 1fr auto;
  align-items:center;
  gap:10px;
  text-align:left;

  transition:background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.stage-item:hover{background:var(--color-surface-2);transform:translateY(-1px)}
.stage-item.is-active{
  border-color:var(--primary-45);
  box-shadow:0 0 0 3px var(--primary-12);
  background:var(--primary-14);
}

.stage-icon{
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:10px;
  background:var(--color-surface-2);
  color:var(--color-text);
  overflow:hidden;
}
.stage-icon i{color:inherit}
.stage-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.category-icon{
  width:32px;
  height:32px;
  border-radius:10px;
  background:var(--color-surface-2);
  color:var(--color-text);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.category-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.category-picker-icon{
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:10px;
  background:var(--color-surface-2);
  color:var(--color-text);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.category-picker-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.category-picker-icon i{
  font-size:18px;
  color:inherit;
}

.stage-text strong{display:block;font-weight:900;color:var(--color-text)}
.stage-text small{display:block;margin-top:2px;color:var(--color-text-muted);font-size:12px}

.stage-count{
  font-weight:900;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  color:var(--color-text);
}

/* ================= Lists (orders/products rows) ================= */

.orders-list{display:grid;gap:10px}

.order-row{
  color:var(--color-text);
  font:inherit;
  text-align:left;

  width:100%;
  box-sizing:border-box;

  cursor:pointer;
  user-select:none;

  border:1px solid var(--color-border);
  border-radius:12px;
  padding:10px 12px;
  background:var(--color-surface);

  display:grid;
  grid-template-columns:70px 70px minmax(180px,1.1fr) minmax(220px,1.4fr) 120px;
  gap:10px;
  align-items:center;

  transition:background var(--dur-fast) var(--ease-smooth),
             border-color var(--dur-fast) var(--ease-smooth),
             box-shadow var(--dur-fast) var(--ease-smooth),
             transform var(--dur-fast) var(--ease-smooth);
}
.order-row.order-list-card{
  grid-template-columns:70px 58px 170px minmax(0,1fr) 150px 150px;
  gap:8px;
}

.cash-order-row{
  grid-template-columns:70px minmax(260px,1fr) 120px;
}
.cash-order-row .order-main-line{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}

.cash-day-section{
  border-radius:12px;
  border:1px solid var(--primary-25);
  padding:6px 8px 8px;
  background:var(--color-surface);
  box-shadow:0 0 0 1px var(--primary-12);
}
.cash-day-section + .cash-day-section{
  margin-top:8px;
}
.cash-day-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:transparent;
  border:none;
  padding:2px 4px 6px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
}
.cash-day-title{
  display:flex;
  align-items:center;
  gap:6px;
}
.cash-day-count{
  font-size:12px;
  color:var(--color-text-muted);
}
.cash-day-chevron{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-text-muted);
  transition:transform var(--dur-fast) var(--ease-smooth);
}
.cash-day-chevron.is-collapsed{
  transform:rotate(-90deg);
}
.cash-day-panel{
  margin-top:4px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Cash receipt preview (right column) — отступы как у товаров */
.cash-info.panel .panel-body{
  padding:8px;
}
.cash-tabs-header{
  padding:6px 10px;
  border-bottom:1px solid var(--color-border);
}
.cash-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.cash-tabs::-webkit-scrollbar{display:none;}
.cash-tab{
  width:100px;
  flex:0 0 100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  cursor:pointer;
  user-select:none;
}
.cash-tab.is-active{
  background:var(--primary-14);
  border-color:var(--primary-25);
}
.cash-tab-title{
  font-size:12px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1 1 auto;
}
.cash-tab-close{
  border:none;
  background:transparent;
  color:var(--color-text-muted);
  width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.cash-receipt-scroll{
  max-height:100%;
  overflow:auto;
  padding-top:6px;
}
.cash-receipt-box{
  margin:0 auto;
  max-width:320px;
  background:var(--color-white);
  border-radius:10px;
  border:1px solid var(--color-border);
  padding:8px 10px;
  font-family:"Courier New",monospace;
  font-size:11px;
  line-height:1.4;
  color:var(--color-black);
}

/* Стили как в печатном чеке (orders.js) */
.receipt-header{
  text-align:center;
  font-weight:bold;
  font-size:14px;
  margin-bottom:6px;
}
.receipt-date{
  text-align:center;
  margin-bottom:6px;
  border-bottom:1px dashed var(--color-black);
  padding-bottom:6px;
}
.receipt-section{margin:6px 0;}
.receipt-section-title{font-weight:bold;margin-bottom:4px;}
.receipt-item{margin:4px 0;}
.receipt-item-row{
  display:flex;
  align-items:flex-start;
  gap:6px;
}
.receipt-item-qty{flex-shrink:0;}
.receipt-item-name{flex:1;min-width:0;word-wrap:break-word;}
.receipt-item-price{flex-shrink:0;text-align:right;}
.receipt-composition{margin:3px 0 3px 15px;font-size:10px;}
.receipt-composition-item{margin:2px 0;}
.receipt-total{
  text-align:center;
  font-weight:bold;
  font-size:13px;
  margin:10px 0;
  border-top:1px dashed var(--color-black);
  border-bottom:1px dashed var(--color-black);
  padding:6px 0;
}
.receipt-summary-row{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:4px;
}
.receipt-summary-label{flex:1;}
.receipt-summary-value{flex-shrink:0;text-align:right;}
.receipt-divider{border-top:1px dashed var(--color-black);margin:6px 0;}
.receipt-when-block{font-weight:bold;}
.receipt-when-text{font-weight:bold;}
.order-row:hover{
  background:var(--color-surface);
  transform:translateY(-2px);
  box-shadow:0 4px 12px var(--overlay-bg),0 2px 4px var(--overlay-bg);
}
.order-row.is-active{border-color:var(--primary-45);box-shadow:0 0 0 3px var(--primary-12)}
.order-row.is-active:hover{
  box-shadow:0 4px 12px var(--overlay-bg),0 2px 4px var(--overlay-bg),0 0 0 3px var(--primary-12);
}

.order-row[draggable="true"]{cursor:grab}
.order-row.is-dragging{opacity:.55;cursor:grabbing}

.settings-list{display:grid;gap:12px;margin-top:10px}
.settings-list-header{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.settings-list-title{font-weight:800}
.settings-list-subtitle{font-size:12px;color:var(--color-text-muted);width:100%}
.settings-chat-assistant-main-switch{
  margin-left:auto;
  flex:0 0 auto;
}

.settings-row{
  cursor:grab;
  grid-template-columns:54px minmax(160px,1fr) minmax(140px,220px);
  align-items:center;
  gap:12px;
  position:relative;
}
.settings-row--time-option{
  grid-template-columns:56px minmax(160px,1fr) minmax(140px,220px);
}
.settings-row--no-icon{
  grid-template-columns:minmax(160px,1fr) minmax(140px,220px);
}
.settings-row.is-default::before{
  content:"";
  position:absolute;
  top:8px;
  bottom:8px;
  left:0;
  width:4px;
  border-radius:999px;
  background:var(--primary-45, var(--color-primary));
}
.settings-row.is-dragging{cursor:grabbing}
.settings-row:hover{transform:none;box-shadow:none}
.settings-row-icon{display:grid;place-items:center}
.settings-icon-btn{
  width:48px;
  height:48px;
  border-radius:12px;
  border:1px dashed var(--color-border);
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  overflow:hidden;
}
.settings-row--time-option .settings-icon-btn{
  width:50px;
  height:50px;
}
.settings-row--time-option .settings-row-title .control,
.settings-row--time-option + .settings-row-time-details .control{
  height:50px;
  min-height:50px;
}
.settings-icon-btn.is-filled{
  border-style:solid;
  color:var(--color-text);
}
.settings-icon-img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:var(--color-surface);
}
.settings-row-title .control{width:100%}
.settings-row-switches{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.settings-row-switches .switch{margin:0}

.settings-row-wrapper {
  display: grid;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 12px;
  background: var(--color-surface);
  width: 100%;
  box-sizing: border-box;
}

.settings-row-wrapper .settings-row {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  cursor: default;
}

.settings-row-wrapper .settings-row-switches {
  flex-wrap: nowrap;
  gap: 10px;
}
.settings-row--delivery{
  grid-template-columns:54px minmax(160px,1fr);
  grid-template-areas:
    "icon title"
    "icon switches";
  align-items:start;
}
.settings-row--delivery .settings-row-icon{
  grid-area:icon;
}
.settings-row--delivery .settings-row-title{
  grid-area:title;
}
.settings-row--delivery .settings-row-switches{
  grid-area:switches;
  justify-content:flex-start;
  align-items:flex-start;
  flex-wrap:nowrap;
  gap:12px;
  margin-top:4px;
}
.settings-row--delivery .settings-row-switches .switch{
  align-items:flex-start;
  gap:4px;
}
.settings-row--delivery .settings-row-switches .switch-text{
  font-size:11px;
  font-weight:400;
  line-height:1.1;
}

.settings-row-wrapper .settings-row-time-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  gap: 10px;
}

.settings-row-time-details {
  padding-left: 0;
}

.settings-row-time-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-row-time-field-label {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.settings-row-time-field input[type="time"]::-webkit-calendar-picker-indicator,
.settings-row-time-field input[type="time"]::-webkit-inner-spin-button,
.settings-row-time-field input[type="time"]::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}
.settings-row-time-field input[type="time"]::-moz-focus-inner {
  border: 0;
}

.order-col{min-width:0}
.order-id{display:grid;justify-items:center;gap:2px;font-weight:700}
.order-id-num{font-weight:900;font-size:20px;line-height:1.2}
.order-id-time{font-size:12px;color:var(--color-text-muted)}

.order-indicators{display:grid;gap:6px;justify-items:center;align-items:center}
.order-time-icon{
  width:50px;
  height:50px;
  border-radius:12px;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  display:grid;
  place-items:center;
  color:var(--color-text);
  overflow:hidden;
}
.order-time-icon i{
  font-size:16px;
  color:currentColor;
}
.order-row .order-time-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:var(--color-surface);
}
.order-indicator{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  color:var(--color-text);
}
.order-indicator.urgent{
  background:var(--primary-14);
  border-color:var(--primary-25);
  color:var(--color-text);
  font-size:18px;
  padding:6px 10px;
}
.order-indicator-time{
  display:grid;
  gap:4px;
  justify-items:center;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  color:var(--color-text);
  font-size:12px;
}
.order-indicator-time i{
  color:var(--color-text-muted);
  font-size:14px;
}
.order-indicator-time-text{
  font-size:11px;
  white-space:nowrap;
}

.order-client-name,.order-address-line,.order-address-comment,.order-address-courier{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.order-client-telegram{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-client-name{font-weight:700;display:flex;align-items:center;gap:6px}
.order-client-name i{color:var(--color-text-muted);font-size:14px}
.order-client-phone i,.order-client-telegram i,.order-address-line i,.order-address-comment i,.order-address-courier i{margin-right:6px;color:var(--color-text-muted)}

.order-row.order-list-card .order-col.order-client{
  min-width:0;
  display:grid;
  row-gap:3px;
}
.order-row.order-list-card .order-client-name,
.order-row.order-list-card .order-client-phone,
.order-row.order-list-card .order-client-telegram{
  display:grid;
  align-items:center;
  min-width:0;
  grid-template-columns:16px minmax(0,1fr);
  column-gap:6px;
  justify-content:start;
}
.order-row.order-list-card .order-client-name,
.order-row.order-list-card .order-client-telegram{
  grid-template-columns:16px minmax(0,1fr);
}
.order-row.order-list-card .order-client-phone{
  grid-template-columns:16px auto;
}
.order-row.order-list-card .order-client-name i,
.order-row.order-list-card .order-client-phone i,
.order-row.order-list-card .order-client-telegram i{
  margin-right:0;
  width:16px;
  min-width:16px;
  text-align:center;
  justify-self:center;
}
.order-row.order-list-card .order-client-name-text,
.order-row.order-list-card .order-client-telegram-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.order-row.order-list-card .order-client-phone-text{
  white-space:nowrap;
  min-width:max-content;
}
.order-client-phone-link{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  background:none;
  color:inherit;
  font:inherit;
  margin:0;
  padding:0;
  width:fit-content;
  max-width:100%;
  cursor:pointer;
  text-align:left;
}
.order-client-phone-link:hover .order-client-phone-text,
.order-client-phone-link:focus-visible .order-client-phone-text{
  text-decoration:underline;
}
.order-client-phone-link:focus-visible{
  outline:none;
}

.order-address-courier{display:flex;align-items:center;gap:6px}
.order-courier-assign span{
  cursor:pointer;
  transition:text-decoration var(--dur-fast) var(--ease-smooth);
}
.order-courier-assign:hover span{text-decoration:underline}

.order-total{display:flex;justify-content:flex-end}
.order-stage{
  display:flex;
  justify-content:center;
  align-items:center;
}
.order-stage-btn{
  display:inline-flex;
  align-items:stretch;
  min-width:0;
  height:50px;
  border-radius:12px;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text);
  cursor:pointer;
  transition:box-shadow .24s var(--ease-smooth), transform .24s cubic-bezier(.22,1,.36,1), border-color .24s var(--ease-smooth);
  overflow:hidden;
  padding:0;
  text-align:left;
}
.order-stage-btn:hover{
  background:var(--color-surface);
  border-color:rgba(15,23,42,.08);
  box-shadow:0 8px 18px rgba(15,23,42,.10);
  transform:translateY(-1px);
}
.order-stage-btn:disabled{
  opacity:.6;
  cursor:default;
  transform:none;
}
.order-stage-btn.is-static:disabled{
  opacity:1;
}
.order-stage-btn-icon-shell{
  position:relative;
  width:50px;
  min-width:50px;
  height:50px;
  overflow:hidden;
}
.order-stage-btn-icon-wrap{
  position:absolute;
  inset:0;
  width:50px;
  min-width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:0;
  border-right:none;
  background:transparent;
  overflow:hidden;
  transition:opacity .28s var(--ease-smooth), transform .28s cubic-bezier(.22,1,.36,1);
}
.order-stage-btn i{
  font-size:16px;
  color:currentColor;
}
.order-stage-btn-icon-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:transparent;
}
.order-stage-btn-content{
  box-sizing:border-box;
  width:100px;
  min-width:100px;
  flex:0 0 100px;
  position:relative;
  height:100%;
  overflow:hidden;
  border-left:none;
}
.order-stage-btn-panel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  padding:0 12px 0 4px;
  transition:opacity .28s var(--ease-smooth), transform .28s cubic-bezier(.22,1,.36,1);
}
.order-stage-btn-current,
.order-stage-btn-next,
.order-stage-btn-meta{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-stage-btn-current{
  font-size:13px;
  font-weight:800;
  color:var(--color-text);
}
.order-stage-btn-next{
  font-size:13px;
  font-weight:800;
  color:var(--color-text);
}
.order-stage-btn-meta{
  font-size:10px;
  font-weight:700;
  color:var(--color-text-muted);
}
.order-stage-btn-icon-next,
.order-stage-btn-panel-next{
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
}
.order-stage-btn.is-static .order-stage-btn-icon-next,
.order-stage-btn.is-static .order-stage-btn-panel-next{
  display:none;
}
@media (hover:hover) and (pointer:fine){
  .order-stage-btn:not(.is-static):hover .order-stage-btn-icon-current,
  .order-stage-btn:not(.is-static):hover .order-stage-btn-panel-current{
    opacity:0;
    transform:translateY(-6px);
  }
  .order-stage-btn:not(.is-static):hover .order-stage-btn-icon-next,
  .order-stage-btn:not(.is-static):hover .order-stage-btn-panel-next{
    opacity:1;
    transform:translateY(0);
  }
}
.order-payment-btn{
  display:inline-flex;
  align-items:stretch;
  min-width:0;
  height:50px;
  padding:0;
  border-radius:12px;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text);
  cursor:pointer;
  transition:box-shadow .24s var(--ease-smooth), transform .24s cubic-bezier(.22,1,.36,1), border-color .24s var(--ease-smooth);
  font-size:inherit;
  text-align:left;
  overflow:hidden;
}
.order-payment-btn.order-payment-paid{
  background:rgba(16,185,129,.11);
  border-color:rgba(34,197,94,.20);
}
.order-payment-btn.order-payment-unpaid{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.18);
}
.order-payment-btn.order-payment-refund{
  background:var(--color-surface);
  border-color:var(--color-border);
}
.order-payment-btn-icon{
  display:grid;
  align-items:center;
  justify-content:center;
  width:50px;
  min-width:50px;
  height:50px;
  flex:0 0 50px;
  border-right:none;
  background:transparent;
}
.order-payment-btn-icon img{
  width:24px;
  height:24px;
  object-fit:contain;
  display:block;
  background:transparent;
}
.order-payment-btn-icon i{
  font-size:18px;
  line-height:1;
}
.order-payment-btn-content{
  box-sizing:border-box;
  width:100px;
  min-width:100px;
  flex:0 0 100px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  padding:0 12px 0 4px;
  border-left:none;
}
.order-payment-btn-total{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:18px;
  font-weight:800;
  color:var(--color-text);
}
.order-payment-btn-status{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:700;
  color:var(--color-text-muted);
}
.order-payment-btn:hover{
  border-color:rgba(15,23,42,.08);
  box-shadow:0 8px 18px rgba(15,23,42,.10);
  transform:translateY(-1px);
}
.order-payment-btn.order-payment-paid:hover{
  background:rgba(16,185,129,.14);
  border-color:rgba(34,197,94,.24);
}
.order-payment-btn.order-payment-unpaid:hover{
  background:rgba(239,68,68,.13);
  border-color:rgba(239,68,68,.22);
}
.order-payment-btn.order-payment-refund:hover{
  background:var(--color-surface);
  border-color:rgba(15,23,42,.08);
}
.order-payment-card{
  background:var(--color-surface);
}
.order-payment-cash{
  background:var(--color-surface);
}
.order-total-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  font-weight:700;
  white-space:nowrap;
}

@media (max-width:1200px){
  .order-row.order-list-card{
    grid-template-columns:70px 1fr 150px 150px;
    grid-template-areas:
      "id client stage total"
      "id address stage total";
    gap:8px 12px;
  }
  .order-col.order-id{grid-area:id}
  .order-col.order-client{grid-area:client}
  .order-col.order-address{grid-area:address}
  .order-col.order-stage{grid-area:stage}
  .order-col.order-total{grid-area:total}
  .order-col.order-indicators{display:none}
}

/* Products list variant */

.product-row{grid-template-columns:56px 1fr auto}

/* Комбо-набор в списке — одна строка, сетка 2×2 как в карточке */
.order-row.combo-row{
  padding:8px 12px;
  grid-template-columns:52px 1fr auto;
  min-height:auto;
}
.combo-row-photo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:2px;
  width:44px;
  height:44px;
  border-radius:8px;
  overflow:hidden;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
}
.combo-row-photo-grid-cell{
  min-width:0;
  min-height:0;
  background:var(--color-surface-2);
}
.combo-row-photo-grid-cell img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.combo-row-photo-grid-cell-empty{
  background:var(--color-surface-2);
}
.order-row.combo-row .combo-row-content{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  min-width:0;
}
.order-row.combo-row .combo-row-content .product-title{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.order-row.combo-row .combo-row-pill{
  flex-shrink:0;
  font-size:11px;
  opacity:.9;
}
.order-row.combo-row .combo-row-muted{
  flex-shrink:0;
  font-size:11px;
}

.product-avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--primary-14);
  border:1px solid var(--primary-25);

  display:grid;
  place-items:center;

  font-weight:900;
  font-size:18px;
  color:var(--color-text);
}

.product-avatar i{
  line-height:1;
  display:inline-block;
}

.product-title{font-weight:900}
.product-right{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* ================= Right info cards ================= */

.info-card{
  border:1px solid var(--color-border);
  border-radius:12px;
  padding:12px;
  background:var(--color-surface);
  display:grid;
  gap:8px;
}
/* В редакторе блока комбо список товаров визуально входит в основной контейнер,
   поэтому убираем дополнительную карточку-обертку */
#comboInfo .info-card.info-accordion{
  border:none;
  border-radius:0;
  padding:0;
  background:transparent;
}
.info-title{font-weight:900}
.info-text{color:var(--color-text-muted);font-size:14px}
.info-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.info-label{color:var(--color-text-muted);font-size:13px}
.info-value{font-weight:600;text-align:right;word-break:break-word}
.tenant-profile-card .info-row{padding:6px 0;border-bottom:1px dashed var(--color-border)}
.tenant-profile-card .info-row:last-child{border-bottom:none}
.settings-cards{margin-bottom:12px}
.settings-card{border:1px solid var(--color-border)}
.stores-list .settings-right-panel .info-row{align-items:center;justify-content:flex-start}
.settings-right-panel .info-label{min-width:120px}
.settings-right-panel .control{flex:1 1 auto}
.panel-header.settings-right-header + .panel-body{
  display:flex;
  flex-direction:column;
}
.panel-header.settings-right-header + .panel-body::after{
  content:none;
  display:none;
}
.panel-header.settings-right-header + .panel-body > .settings-right-panel{
  flex:1 1 auto;
  min-height:0;
}
.settings-right-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.settings-right-panel .stores-form-actions.settings-footer-actions{
  margin-top:auto;
  padding-top:12px;
}
.settings-logo-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (max-width: 920px){
  .settings-logo-grid{grid-template-columns:1fr}
}
.settings-logo-tile{display:grid;gap:8px}
.settings-logo-title{font-weight:700}
.settings-logo-box{
  border:1px dashed var(--color-border);
  border-radius:14px;
  background:var(--color-surface-2);
  display:grid;
  place-items:center;
  aspect-ratio:1/1;
  min-height:160px;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.settings-logo-box:hover{background:var(--primary-12);border-color:var(--primary-25)}
.settings-logo-preview{max-width:70%;max-height:70%;object-fit:contain}
.settings-logo-hint{font-size:12px;color:var(--color-text-muted);text-align:center;padding:0 8px}
.settings-logo-actions{display:flex;gap:8px}
.settings-sounds-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.settings-sound-tile{display:grid;gap:8px}
.settings-sound-title{font-weight:700}
.settings-sound-hint{font-size:12px;color:var(--color-text-muted)}
.settings-sound-box{
  border:1px dashed var(--color-border);
  border-radius:14px;
  padding:12px;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.settings-sound-label{font-size:13px;color:var(--color-text-muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-sound-actions{display:flex;gap:8px}
.settings-site-form{display:grid;gap:12px}
.settings-site-field .field-label{margin-bottom:6px;display:block}
.settings-site-inline-switch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.settings-site-inline-switch .field-label{
  margin-bottom:0;
}
.settings-site-inline-switch .switch{
  margin-left:auto;
  flex:0 0 auto;
}
.settings-site-field.is-disabled{
  opacity:.68;
}
.settings-chat-questions-grid.is-disabled{
  opacity:.68;
}
.settings-auth-photo-box{
  width:120px;
  aspect-ratio:1 / 1;
  border:1px dashed var(--color-border);
  border-radius:28px;
  background:var(--color-surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.settings-auth-photo-img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:28px;
}
.settings-auth-photo-icon{
  width:72px;
  height:72px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}
.settings-auth-photo-icon--telegram{
  background:#2aabee;
  color:#fff;
  font-size:34px;
}
.settings-auth-photo-icon--max{
  background:#111;
  color:#f59a3c;
  font-size:24px;
  letter-spacing:0.5px;
}
.settings-chat-panel-actions{margin-top:4px}
.settings-right-panel .stores-form-actions.settings-footer-actions.settings-chat-panel-actions{
  margin-top:auto;
  padding-top:12px;
}
#settingsChatAssistantNamePanel{
  overflow:hidden;
}
#settingsChatAssistantNamePanel .settings-site-form{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  align-content:start;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
#settingsChatAssistantNamePanel .settings-site-form::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
#settingsChatAssistantNamePanel .stores-form-actions.settings-footer-actions.settings-chat-panel-actions{
  flex:0 0 auto;
}
.settings-chat-questions-grid{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
.settings-chat-question-row{
  border:1px solid var(--color-border);
  border-radius:12px;
  background:#ffffff;
  padding:10px 12px;
  display:grid;
  gap:8px;
  transition:background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
.settings-chat-question-row:hover{background:#f8f8f9}
.settings-chat-question-row:focus-within{
  border-color:var(--primary-45);
  box-shadow:0 0 0 3px var(--primary-12);
}
.settings-chat-question-row.is-system{
  background:#fff9f2;
}
.settings-chat-question-row-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.settings-chat-welcome-label{
  margin-bottom:0 !important;
  flex:1 1 auto;
}
.settings-chat-quick-questions-head{
  padding:0 12px 0 0;
  margin-bottom:6px;
}
.settings-chat-quick-questions-label{
  margin-bottom:0 !important;
  flex:1 1 auto;
  min-width:0;
  padding-right:14px;
}
.settings-chat-question-row-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  margin-left:auto;
}
.settings-chat-question-row.is-system .settings-chat-question-row-controls::after{
  content:"";
  display:block;
  width:30px;
  height:30px;
  flex:0 0 30px;
}
.settings-chat-question-expand-btn{
  width:30px;
  height:30px;
  border:1px solid var(--color-border);
  border-radius:10px;
  background:#fff;
  color:#7f8a99;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  transition:color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.settings-chat-question-expand-btn i{
  font-size:12px;
  transition:transform var(--dur-fast) var(--ease-smooth);
}
.settings-chat-question-row.is-expanded .settings-chat-question-expand-btn i{
  transform:rotate(180deg);
}
.settings-chat-question-expand-btn:hover{
  color:#4d5a6b;
  border-color:#d7dce4;
  background:#f7f9fc;
}
.settings-chat-question-row-body{
  display:grid;
  gap:8px;
}
.settings-chat-question-row.is-collapsed .settings-chat-question-row-body{
  display:none;
}
.settings-chat-question-input{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  border:none !important;
  background:transparent !important;
  padding:0 !important;
  height:auto !important;
  text-align:left;
  font-size:15px;
  font-weight:700;
  color:#2f3137;
}
.settings-chat-question-input.is-readonly{
  pointer-events:none;
  color:#1f2d3d;
}
.settings-chat-question-input:focus{
  outline:none;
  box-shadow:none !important;
}
.settings-chat-question-answer{
  min-height:68px;
  resize:vertical;
}
.settings-chat-question-switch{
  gap:0;
}
.settings-chat-question-switch .switch-text{
  display:none;
}
.settings-chat-question-delete-btn{
  width:30px;
  height:30px;
  border:1px solid var(--color-border);
  border-radius:10px;
  background:#fff;
  color:#7f8a99;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.settings-chat-question-delete-btn:hover{
  color:#e24a4a;
  border-color:#f1b9b9;
  background:#fff5f5;
}
.settings-chat-question-add-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:10px;
  margin-bottom:2px;
  width:54px;
  height:54px;
  margin-left:auto;
  margin-right:auto;
  border:1px solid #e3e6eb;
  border-radius:12px;
  background:#f6f7f9;
}
.settings-chat-question-add-btn{
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:#ff8a00;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  padding:0;
  transition:background var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
  box-shadow:none;
}
.settings-chat-question-add-btn:hover{
  background:#f57c00;
}
.settings-chat-question-add-btn i{
  font-size:13px;
  line-height:1;
  color:inherit;
}
.settings-chat-question-add-btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
  background:#ff8a00;
}
.settings-chat-gender-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:4px;
}
.settings-chat-gender-option{
  position:relative;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
  padding:10px 12px;
  border:1px solid var(--color-border);
  border-radius:12px;
  background:#fff;
}
.settings-chat-gender-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.settings-chat-gender-dot{
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid var(--color-border);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
  transition:border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
.settings-chat-gender-dot::after{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--color-primary);
  transform:scale(0);
  transition:transform var(--dur-fast) var(--ease-smooth);
}
.settings-chat-gender-input:checked + .settings-chat-gender-dot{
  border-color:var(--color-primary);
}
.settings-chat-gender-input:checked + .settings-chat-gender-dot::after{
  transform:scale(1);
}
.settings-chat-gender-input:focus-visible + .settings-chat-gender-dot{
  box-shadow:0 0 0 3px var(--primary-12);
}
.settings-chat-gender-label{
  font-size:14px;
  font-weight:700;
}
.settings-range-labels{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:12px}
.settings-range-value{font-weight:600;font-size:14px;min-width:32px;text-align:center}
.settings-site-field input[type="range"].control{padding:0;height:auto}
.settings-print-api-token-actions{margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.settings-password-grid{display:grid;gap:8px}
.settings-password-grid .btn{justify-self:start}
.settings-site-link{margin-top:6px;display:flex;gap:6px;align-items:center;font-size:12px;color:var(--color-text-muted)}
.settings-site-link-url{color:var(--color-primary);text-decoration:none;font-weight:600}
.settings-site-link-url:hover{text-decoration:underline}
.field-hint{font-size:12px;color:var(--color-text-muted)}

.domain-dns-hint{font-size:13px;color:var(--color-text-muted);line-height:1.5;margin-top:4px}

.empty-state{
  height:100%;
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
}
.empty-icon{
  width:72px;height:72px;border-radius:999px;
  background:var(--color-surface-2);
  display:grid;place-items:center;
  color:var(--color-text-muted);
  font-size:22px;
}
.empty-title{font-weight:900;font-size:16px}
.empty-text{color:var(--color-text-muted);font-size:13px;max-width:300px}

.order-info-cards{display:grid;gap:12px}
body.page-orders .order-info-cards > .info-card{
  border:none;
  border-radius:0;
  padding:0;
  background:transparent;
}
#clientOrderInfoWrap .order-info-cards > .info-card{
  border:none;
  border-radius:0;
  padding:0;
  background:transparent;
}
.order-info-head .order-head-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.order-head-title-row{display:grid;gap:4px;align-items:start}
.order-head-title{font-weight:900;font-size:16px}
.order-head-meta{font-size:13px}
body.page-orders .order-info-head .order-head-top{justify-content:center}
body.page-orders .order-head-title-row{justify-items:center;align-items:center;text-align:center}
.order-head-row{display:flex;align-items:center;gap:12px}
.order-head-field{flex:1}
.order-head-select{width:100%;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-surface);font-size:14px;cursor:pointer}
.status-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface-2);font-size:12px}
.order-head-actions{display:flex;align-items:center;gap:8px}
.order-info-footer{
  display:block;
  padding:10px 12px;
}
.order-footer-actions{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  flex-wrap:nowrap;
}
.order-footer-status-pill{
  flex:1 1 auto;
  min-width:0;
  height:52px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  color:var(--color-text);
  font-size:16px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.order-footer-status-pill:hover{
  background:var(--primary-14);
  border-color:var(--primary-25);
  transform:translateY(-1px);
}
.order-footer-status-pill:disabled{
  opacity:.6;
  cursor:default;
  transform:none;
}
.order-footer-status-pill > span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-footer-icon-actions{
  flex:0 0 auto;
  gap:10px;
}
.order-footer-icon-btn{
  width:52px;
  height:52px;
  border-radius:999px;
  flex:0 0 52px;
}
.order-footer-icon-btn i{
  font-size:16px;
}
.order-footer-icon-btn:disabled{
  opacity:.6;
  cursor:default;
}
.client-row{display:flex;align-items:center;gap:12px}
.client-avatar{width:44px;height:44px;border-radius:999px;background:var(--primary-14);border:1px solid var(--primary-25);display:grid;place-items:center;font-weight:800}
.client-name{font-weight:700}
.client-phone{text-decoration:none;color:var(--color-text)}
.client-phone:hover{text-decoration:underline}
.pay-left{display:flex;align-items:center;gap:10px}
.pay-right{text-align:right}
.pay-delivery-row{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-bottom:4px}
.pay-delivery{font-weight:600}
.pay-total{font-weight:900;font-size:18px}
.order-summary{display:flex;flex-direction:column;gap:6px}
.order-summary-title{font-weight:700;margin-bottom:2px}
.order-summary-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.order-summary-label{color:var(--color-text-muted)}
.order-summary-value{text-align:right;display:flex;align-items:center;gap:6px;justify-content:flex-end}
.order-summary-pay-icon{color:var(--color-text-muted)}
.order-summary-divider{border-top:1px dashed var(--color-border);margin:6px 0 4px}
.order-summary-discount{color:var(--color-primary)}
.order-summary-discount-label-wrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.order-summary-discount-info-btn{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text-muted);
  display:inline-grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  flex:0 0 auto;
}
.order-summary-discount-info-btn i{font-size:10px}
.order-summary-discount-info-btn:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
}
.order-summary-discount-info-btn:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:1px;
}
.order-summary-discount-breakdown{
  display:none;
  margin-top:2px;
  margin-bottom:2px;
  padding:8px 10px;
  border-radius:10px;
  border:1px dashed var(--color-border);
  background:var(--color-surface-2);
}
.order-summary-discount-breakdown.is-open{
  display:grid;
  gap:6px;
}
.order-summary-discount-breakdown-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:8px;
  font-size:13px;
}
.order-summary-discount-breakdown-label{color:var(--color-text-muted)}
.order-summary-discount-breakdown-value{
  color:var(--color-primary);
  font-weight:600;
}
.order-summary-discount-breakdown-note{
  margin-top:2px;
  font-size:12px;
  line-height:1.3;
  color:var(--color-text-muted);
}
.order-summary-total-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700}
.order-summary-total-label{}
.order-summary-total-value{font-size:1.125rem;font-weight:800}
.order-summary-thanks{margin-top:12px;text-align:center;font-size:13px;color:var(--color-text-muted)}
.order-client-cards{display:grid;gap:12px}
.order-client-list{
  display:grid;
  gap:8px;
}
.order-client-list-item{
  border:1px solid var(--color-border);
  border-radius:12px;
  background:var(--color-surface);
  padding:8px 10px;
  display:grid;
  gap:4px;
}
.order-client-list-item-title{
  font-weight:700;
  line-height:1.3;
}
.order-client-list-item-meta{
  color:var(--color-text-muted);
  font-size:13px;
  line-height:1.3;
}
.order-client-list-item-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.order-client-list-item-value{
  font-weight:700;
  white-space:nowrap;
}
.order-client-list-empty,
.order-client-list-loading{
  color:var(--color-text-muted);
  font-size:13px;
  padding:2px 0;
}
.order-client-history-card{
  cursor:pointer;
}
.order-client-history-card:hover{
  border-color:var(--primary-25);
}
body.page-orders #clientEditNameBtn,
body.page-orders #clientAddrToggleBtn,
body.page-orders #clientAddrFormCard,
body.page-orders #clientAddresses .shop-address-actions{
  display:none !important;
}
@media (max-width:768px){
  .order-summary-discount-breakdown{padding:8px}
  .order-summary-discount-breakdown-row{font-size:12px}
}
.delivery-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface-2);font-size:12px}
.chip-warn{background:var(--primary-14);border-color:var(--primary-25)}
.order-info-delivery{display:grid;gap:14px}
.delivery-kv{display:grid;gap:8px}
.delivery-kv-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:12px;
}
.delivery-kv-label{color:var(--color-text-muted)}
.delivery-kv-value{text-align:right;font-weight:600}
.delivery-kv-link{color:var(--color-text);text-decoration:none}
.delivery-kv-link:hover{text-decoration:underline}
.delivery-kv-value-status{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.order-status-inline{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.order-status-inline-trigger{
  border:none;
  background:transparent;
  color:var(--color-text);
  font:inherit;
  font-weight:600;
  padding:0;
  margin:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.order-status-inline-trigger:hover{
  text-decoration:none;
  box-shadow:inset 0 -1px 0 currentColor;
}
.order-status-inline-trigger:focus-visible{
  outline:2px solid var(--primary-25);
  outline-offset:2px;
  border-radius:6px;
}
.order-status-inline-chevron{
  font-size:11px;
  color:var(--color-text-muted);
  transition:transform var(--dur-fast) var(--ease-smooth);
}
.order-status-inline.is-open .order-status-inline-chevron{
  transform:rotate(180deg);
}
.order-status-inline-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:220px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:12px;
  box-shadow:0 8px 24px var(--overlay-bg);
  padding:4px 0;
  z-index:200;
  overflow:hidden;
}
.order-status-inline-dropdown.hidden{
  display:none;
}
.order-status-inline-option{
  width:100%;
  border:none;
  background:transparent;
  color:var(--color-text);
  text-align:left;
  font-size:14px;
  font-weight:500;
  padding:10px 14px;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.order-status-inline-option:hover{
  background:var(--color-surface-2);
}
.order-status-inline-option.is-selected{
  color:var(--color-primary);
  font-weight:700;
  background:var(--primary-12);
}
.delivery-kv-value-urgent{color:var(--color-primary);font-weight:700}
.delivery-address-block{display:grid;gap:6px}
.delivery-section-title{font-weight:700}
.delivery-address{font-weight:600;line-height:1.35}
.delivery-address-comment,.order-comment-block{line-height:1.35}
@media (max-width:560px){
  .delivery-kv-row{grid-template-columns:1fr;gap:2px}
  .delivery-kv-value{text-align:left}
  .delivery-kv-value-status{justify-content:flex-start}
  .order-status-inline-dropdown{
    left:0;
    right:auto;
  }
}
.order-items{display:grid;gap:12px}
.order-item{
  border:1px solid var(--color-border);
  border-radius:16px;
  background:var(--color-surface);
  padding:10px;
}
.order-item-line{
  display:flex;
  gap:12px;
  align-items:stretch;
}
.order-item-photo-small{
  flex-shrink:0;
  width:88px;
  height:88px;
  border-radius:14px;
  overflow:hidden;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
}
.order-item-photo-small img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.order-item-photo-col{
  flex-shrink:0;
}
.order-item-content{
  flex:1;
  min-width:0;
  min-height:88px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.order-item-title{
  font-weight:800;
  font-size:17px;
  line-height:1.25;
}
.order-item-sublist{margin-top:4px;display:grid;gap:4px;font-size:12px;color:var(--color-text-muted)}
.order-item-options{
  margin-top:6px;
  padding-left:16px;
  display:grid;
  gap:4px;
  font-size:12px;
  color:var(--color-text-muted);
  border-left:2px solid var(--color-border);
}
.order-item-option{
  line-height:1.4;
}
.order-item-ingredients{
  margin-top:6px;
  padding-left:16px;
  display:grid;
  gap:4px;
  font-size:12px;
  color:var(--color-text-muted);
  border-left:2px solid var(--color-border);
}
.order-item-ingredient{
  line-height:1.4;
}
.order-item-composition{
  margin-top:0;
  padding-left:0;
  display:grid;
  gap:3px;
  font-size:13px;
  color:var(--color-text-muted);
  border-left:none;
}
.order-item-composition-item{
  line-height:1.4;
}
.order-item-composition-item-primary{
  font-weight:700;
  color:var(--color-text);
}
.order-item-footer{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
}
.order-item-price{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
}
.order-item-price-current{
  font-weight:800;
  font-size:17px;
  color:var(--color-text);
}
@media (max-width:560px){
  .order-item{padding:8px}
  .order-item-photo-small{
    width:72px;
    height:72px;
    border-radius:12px;
  }
  .order-item-content{
    min-height:72px;
    gap:4px;
  }
  .order-item-title{font-size:16px}
  .order-item-price-current{font-size:16px}
  .order-item-composition{font-size:12px}
}

/* Фото товаров в заказе */
.order-item-photos{
  display:grid;
  gap:8px;
}

.order-item-photo-main{
  position:relative;
  width:80px;
  height:80px;
  border-radius:12px;
  overflow:hidden;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
}

.order-item-photo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.order-item-photo-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--overlay-bg);
  color:var(--color-white);
  border:none;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:10px;
  opacity:0;
  transition:opacity 0.2s, background 0.2s;
  z-index:2;
}

.order-item-photo-main:hover .order-item-photo-nav{
  opacity:1;
}

.order-item-photo-nav:hover{
  background:var(--overlay-bg);
}

.order-item-photo-prev{
  left:4px;
}

.order-item-photo-next{
  right:4px;
}

.order-item-photo-thumbs-wrapper{
  display:flex;
  align-items:center;
  gap:4px;
}

.order-item-photo-thumbs{
  flex:1;
  display:flex;
  gap:4px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}

.order-item-photo-thumbs::-webkit-scrollbar{
  height:4px;
}

.order-item-photo-thumbs::-webkit-scrollbar-track{
  background:transparent;
}

.order-item-photo-thumbs::-webkit-scrollbar-thumb{
  background:var(--color-border);
  border-radius:2px;
}

.order-item-photo-thumb{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:8px;
  border:2px solid var(--color-border);
  overflow:hidden;
  cursor:pointer;
  padding:0;
  background:var(--color-surface);
  transition:border-color 0.2s;
}

.order-item-photo-thumb:hover{
  border-color:var(--color-primary);
}

.order-item-photo-thumb.is-active{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--primary-12);
}

.order-item-photo-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.order-item-thumbs-nav{
  flex-shrink:0;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  color:var(--color-text);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:10px;
  transition:background 0.2s, border-color 0.2s;
}

.order-item-thumbs-nav:hover{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-white);
}

.order-item-thumbs-nav:disabled{
  opacity:0.4;
  cursor:not-allowed;
}
/* ================= Products accordion helpers ================= */

/* Отступы между аккордеонами */
.products-accordion {
  display: flex;
  flex-direction: column;
  gap: 7px; /* 6-8px среднее значение */
}

.products-accordion .stage-item{min-height:52px}

/* Выделение цветом заголовков аккордеонов */
.products-accordion .acc-trigger {
  background: var(--primary-14);
  border-color: var(--primary-25);
}

.products-accordion .acc-trigger .stage-text b {
  color: var(--color-text);
  font-weight: 700;
}

.products-accordion .acc-trigger:hover {
  background: var(--primary-18);
}

/* Убрать подписи (small) из всех пунктов меню */
.products-accordion .stage-text small {
  display: none;
}

.acc-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--dur-med) var(--ease-smooth);
}

/* В редакторе блока комбо секция "Товары в блоке" всегда раскрыта,
   поэтому панель не должна схлопываться */
#comboInfo .acc-panel{
  max-height:none;
  overflow:visible;
}

/* Отступы между пунктами меню внутри аккордеона */
.acc-panel-inner{
  margin-top:10px;
  display: flex;
  flex-direction: column;
  gap: 5px; /* 4-6px среднее значение - отступ между stage-item */
}

.acc-header{
  display:flex;
  align-items:center;
  gap:8px;
}
.acc-header .acc-trigger{flex:1}

.acc-chevron{
  width:28px;height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:var(--color-text-muted);
  transition:transform var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.acc-trigger:hover .acc-chevron{background:var(--color-surface-2)}
.acc-trigger.is-open .acc-chevron{transform:rotate(180deg)}
.acc-spacer{width:28px;height:28px}
.acc-add{border-style:dashed}

/* ================= BottomSheet ================= */

.sheet-backdrop{
  position:fixed;
  inset:0;
  background:var(--overlay-bg);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-med) var(--ease-smooth);
  z-index:60;
}
.sheet-backdrop.is-active{opacity:1;pointer-events:auto}

.sheet{
  position:fixed;
  left:0;right:0;bottom:0;
  height:calc(100dvh - var(--header-height));
  transform:translateY(110%);
  transition:transform var(--dur-med) var(--ease-smooth);

  background:var(--color-surface);
  border-top-left-radius:var(--radius-lg);
  border-top-right-radius:var(--radius-lg);
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-sm);
  z-index:70;

  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sheet.is-open{transform:translateY(0)}
.sheet-header{
  padding:12px;
  border-bottom:1px solid var(--color-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sheet-title{font-weight:700}
.sheet-body{
  padding:12px;
  overflow-y:auto;
  flex:1;
  min-height:0;
}
.sheet-body::after{content:"";display:block;height:var(--column-scroll-pad)}

@media (min-width:769px){
  .sheet,.sheet-backdrop{display:none}
}

/* ================= Mobile placement ================= */

@media (max-width:768px){
  .app-grid{grid-template-columns:1fr}

  .app-sidebar{grid-column:1;grid-row:1}
  .page-col-center{grid-column:1;grid-row:1}

  .page-col-left{display:none}
  .page-col-right{display:none}
}

/* ================= Mobile: orders/products 2-col ================= */

@media (max-width:768px){
  body.page-orders .app-grid,
  body.page-products .app-grid{
    grid-template-columns:64px 1fr;
    gap:12px;
  }

  body.page-orders .page-col-left,
  body.page-products .page-col-left{
    display:flex;
    grid-column:1;
    grid-row:1;
  }

  body.page-orders .page-col-center,
  body.page-products .page-col-center{
    display:flex;
    grid-column:2;
    grid-row:1;
  }

  body.page-orders .page-col-right,
  body.page-products .page-col-right{
    display:none;
  }

  body.page-orders .orders-stages .panel-header{padding:8px;justify-content:center}
  body.page-orders .orders-stages .panel-body{padding:8px}
  body.page-orders .stage-list{gap:8px}
  body.page-orders .stage-item{
    display:flex;align-items:center;justify-content:center;
    padding:0;height:44px;border-radius:12px;
  }
  body.page-orders .stage-text,
  body.page-orders .stage-count{display:none}
  body.page-orders .stage-icon{
    width:34px;height:34px;border-radius:12px;
    display:grid;place-items:center;margin:0;
  }

  body.page-products .page-col-left .panel-header{padding:8px;justify-content:center}
  body.page-products .page-col-left .panel-title{display:none}
  body.page-products .page-col-left .panel-body{padding:8px}

  body.page-products .products-accordion .stage-item{
    display:flex;align-items:center;justify-content:center;
    padding:0;height:44px;min-height:44px;
  }
  body.page-products .products-accordion .stage-text,
  body.page-products .products-accordion .acc-chevron,
  body.page-products .products-accordion .acc-spacer{display:none}
  body.page-products .products-accordion .stage-icon{
    width:34px;height:34px;border-radius:12px;
    display:grid;place-items:center;margin:0;
  }
  body.page-products .acc-panel-inner{margin-top:8px}
}

/* ================= Universal Modal ================= */

.modal-backdrop{
  position:fixed;
  inset:0;
  background:var(--overlay-bg);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-med) var(--ease-smooth);
  z-index:80;
}
.modal-backdrop.is-active{opacity:1;pointer-events:auto}

.app-modal{
  position:fixed;
  top:50%;
  left:50%;
  width:500px;
  max-width:calc(100vw - 24px);
  /* фиксируем формат: 500×1000 на десктопе, но не выходим за пределы экрана */
  height:min(1000px, calc(100vh - 90px));
  max-height:calc(100vh - 90px);
  transform:translate(-50%,-46%) scale(.98);
  opacity:0;
  pointer-events:none;
  transition:transform var(--dur-med) var(--ease-smooth), opacity var(--dur-med) var(--ease-smooth);

  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  z-index:90;

  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.app-modal.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.app-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 12px;
  min-height:45px;
}
.app-modal-header .btn{height:40px}
.app-modal-header .btn-icon{width:40px}
.app-modal-title{
  font-weight: 900;
  flex: 1;
  text-align: center;
}
.app-modal-back-btn{
  flex-shrink: 0;
  margin-right: auto;
}
.app-modal-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.app-modal-body{
  padding:0 12px 12px;
  overflow-y:auto;
  flex:1;
  min-height:0;
}
.app-modal-body::after{content:"";display:block;height:24px}

.app-modal-footer{
  padding:12px;
  border-top:1px solid var(--color-border);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

@media (max-width:768px){
  .app-modal{
    left:0;
    right:0;
    top:auto;
    bottom:0;
    width:100%;
    max-width:100%;
    height:calc(100vh - var(--header-height));
    max-height:calc(100vh - var(--header-height));
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    transform:translateY(110%);
    opacity:1;
  }
  .app-modal.is-open{transform:translateY(0)}
}

/* ================= Forms ================= */

.form-grid{display:grid;gap:12px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-row-pcs-converter{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.form-row-pcs-converter.hidden{display:none}

.field-label{font-size:12px;color:var(--color-text-muted);margin-bottom:6px;display:block}

/* Подпись на границе инпута (как в составе: Кол-во, Ед., Цена, Себест.) */
.field-wrap{position:relative}
.field-wrap .field-label{
  position:absolute;
  top:-7px;
  left:8px;
  padding:0 4px;
  font-size:10px;
  color:var(--color-text-muted);
  background:var(--color-surface);
  margin-bottom:0;
  line-height:1;
  pointer-events:none;
}

.control,
.textarea{
  width:100%;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  color:var(--color-text);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
  transition:border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
.control{height:40px}
.textarea{min-height:96px;resize:vertical}

.control:focus,
.textarea:focus{
  border-color:var(--primary-45);
  box-shadow:0 0 0 4px var(--primary-12);
}

/* Custom select */
.custom-select{position:relative}
.custom-select-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  text-align:left;
  font-size:inherit;
  font-weight:inherit;
}
.custom-select-trigger.control{padding-right:12px}
.custom-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.custom-select-arrow{font-size:.6rem;color:var(--color-text-muted);flex-shrink:0;margin-left:8px;transition:transform .15s}
.custom-select.is-open .custom-select-arrow{transform:rotate(180deg)}
.custom-select-dropdown{
  position:absolute;
  top:calc(100% + 4px);
  left:0;right:0;
  z-index:100;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:12px;
  box-shadow:0 8px 24px var(--overlay-bg);
  padding:4px 0;
  max-height:200px;
  overflow-y:auto;
}
.custom-select-dropdown.hidden{display:none}
.custom-select-option{
  display:block;
  width:100%;
  padding:10px 14px;
  border:none;
  background:none;
  text-align:left;
  font-size:.9rem;
  color:var(--color-text);
  cursor:pointer;
  transition:background .1s;
}
.custom-select-option:hover{background:var(--color-surface-2)}
.custom-select-option.is-selected{font-weight:700}

/* Disabled states (buttons) */
.btn:disabled,
.icon-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
  transform:none;
}

/* ================= Remove number spinners ================= */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }

/* ================= Chips ================= */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  color:var(--color-text);
  font-weight:700;
  font-size:13px;
}
.chip-plus{
  cursor:pointer;
  background:var(--primary-14);
  border-color:var(--primary-25);
}
.chip-plus i{font-size:12px}
.chip-remove{
  border:none;
  background:transparent;
  width:18px;
  height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--color-text-muted);
  cursor:pointer;
  padding:0;
}
.chip-remove i{font-size:10px}
.chip-remove:hover{
  color:var(--color-text);
  background:var(--color-surface-2);
}

/* ================= Inline modal (категории внутри модалки) ================= */
.inline-backdrop{
  position:fixed;
  inset:0;
  background:var(--overlay-bg);
  z-index:2000;
}
.inline-modal{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(420px, calc(100vw - 32px));
  max-height:min(70vh, 520px);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  z-index:2001;
}

/* ================= Options ================= */
.options-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.options-row{
  display:grid;
  grid-template-columns:1.5fr 1fr .8fr .7fr .7fr;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:12px;
  background:var(--color-white);
  border:1px solid var(--color-border);
  cursor:pointer;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.options-row.is-active{
  border-color:var(--primary-25);
  box-shadow:0 6px 20px var(--primary-12);
}
.options-row-title{font-weight:600;}
.options-row-meta{font-size:12px;color:var(--color-text-dim);}
.auto-add-row{grid-template-columns:1.6fr .7fr .7fr .9fr 1.4fr;}
.auto-add-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap;}
.auto-add-items{display:flex;flex-direction:column;gap:8px;margin:8px 0 16px;}
.option-item-row.auto-add-item-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.auto-add-item-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.auto-add-item-title{
  min-width:0;
  flex:1;
}
.auto-add-item-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.auto-add-item-selected{
  font-size:12px;
  color:var(--color-text-dim);
}
.auto-add-item-row{
  margin-top:4px;
}
.auto-add-empty{padding:8px 12px;color:var(--color-text-dim);font-size:12px;}
.auto-add-pick-row{grid-template-columns:1fr;}
.auto-add-search-results .options-row{cursor:pointer;}
.auto-add-search-results{margin-top:8px;}
.option-group-section{
  background:var(--color-surface-2);
  border-radius:14px;
  padding:14px;
  border:1px solid var(--color-border);
}

#unitLevelGroup{
  padding:12px;
  display:grid;
  gap:12px;
}
.option-group-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  align-items: start;
}
.option-group-title-field{ min-width: 0; }
.option-group-select-field{ width: 220px; }

#optionGroupLimitsRow{
  grid-column: 1 / -1;
}

.option-group-title-field .control{
  min-width:0;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
}

.options-row-active .switch-text{
  font-size:12px;
}
.option-group-section+.option-group-section{margin-top:16px;}
.section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.section-title{font-weight:600;font-size:14px;}
.option-items-table,.option-assignments-table{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.option-item-row,.option-assignment-row{
  gap:10px;
  align-items:center;
  padding:10px;
  padding-right:36px;
  border-radius:10px;
  background:var(--color-white);
  border:1px solid var(--color-border);
  min-width:0;
  position:relative;
  overflow:hidden;
}
.option-item-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto;
}
.variant-item-row{
  grid-template-columns:auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  width:100%;
}
.variant-item-row .option-item-col{
  min-width:0;
}
.option-assignment-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-width:0;
}
.option-item-title{
  min-width:0;
}
.option-item-title .options-row-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.option-assignment-title{
  flex:1;
  min-width:0;
}
.option-assignment-title .options-row-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.option-item-qty{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  min-width:0;
}
.option-item-qty-field{
  position:relative;
  display:flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:var(--color-text-dim);
  white-space:nowrap;
  padding-top:6px;
}
.option-item-qty-label{
  text-transform:lowercase;
  position:absolute;
  top:-6px;
  left:6px;
  padding:0 4px;
  background:var(--color-white);
  font-size:10px;
  color:var(--color-text-faint);
}
.option-item-price{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  min-width:0;
  justify-content:flex-end;
  white-space:nowrap;
  justify-self:end;
}
.option-item-price-value{
  display:inline-block;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:right;
  font-size:12px;
}
.option-item-price-value.is-accent{
  font-weight:600;
  color:var(--color-text-strong);
  font-size:14px;
}
.option-item-price-value.is-muted{
  color:var(--color-text-faint);
  font-size:12px;
}
.option-item-row .control,.option-assignment-row .control{width:100%;}
.option-item-qty .control{
  width:54px;
  padding:4px 6px;
}
.option-item-price .control{
  width:90px;
}
.option-item-row .muted{font-size:12px;}
.option-item-row.is-disabled{opacity:.5;}
.option-assignment-row.is-disabled{opacity:.5;}
.option-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.option-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Ingredients section */
.product-ingredients-card{
  margin-top: 20px;
}

.product-ingredients-card .option-section-header{
  margin-bottom: 12px;
}
.ingredient-acc-trigger{
  display:flex;
  align-items:center;
  gap:12px;
}
.ingredient-acc-photo{
  flex-shrink:0;
  width:48px;
  height:48px;
  border-radius:8px;
  overflow:hidden;
  background:var(--color-surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ingredient-acc-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.ingredient-acc-trigger .stage-meta{
  flex:1;
  min-width:0;
}
.ingredient-acc-controls{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.ingredient-acc-controls .switch{margin:0}
.ingredient-fields-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.ingredient-fields-compact{
  padding:8px 0;
}
.ingredient-inline-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:2px;
}
.ingredient-field{
  display:flex;
  align-items:center;
  flex:1 1 0;
  min-width:0;
}
.ingredient-control-wrap{
  position:relative;
  width:100%;
  min-width:0;
}
.ingredient-control-label{
  position:absolute;
  top:-7px;
  left:8px;
  padding:0 4px;
  font-size:10px;
  color:var(--color-text-dim);
  background:var(--color-surface);
  line-height:1;
  pointer-events:none;
}
.ingredient-field-qty,
.ingredient-field-unit,
.ingredient-field-price,
.ingredient-field-cost,
.ingredient-field-min,
.ingredient-field-max,
.ingredient-field-step{
  flex:1 1 0;
  min-width:0;
}
.ingredient-control-wrap .control{
  width:100%;
  padding:6px 8px;
}
.ingredient-remove-btn{
  border:none;
  background:transparent;
  box-shadow:none;
  padding:4px;
  line-height:1;
  cursor:pointer;
}
.ingredient-remove-btn:hover{
  background:var(--color-surface-2);
}

.units-card .units-form{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:8px;
  align-items:center;
}
.unit-row{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 0.7fr auto auto auto;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--color-border);
  border-radius:10px;
  background:var(--color-surface);
  margin-bottom:8px;
}
.unit-input{
  min-width:0;
}
.unit-delete{
  border:none;
  background:transparent;
  box-shadow:none;
}
.conversion-row{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr auto auto;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--color-border);
  border-radius:10px;
  background:var(--color-surface);
  margin-bottom:8px;
}

.input-with-suffix{
  display:flex;
  align-items:center;
  gap:8px;
}
.input-with-suffix .control{
  flex:1 1 auto;
}
.input-suffix{
  white-space:nowrap;
  color:var(--color-text-dim);
  font-size:12px;
}
.option-row-remove{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  color:var(--color-text-faint);
  padding:4px;
  cursor:pointer;
}
.option-row-remove:hover{
  color:var(--color-primary);
}
.option-row-remove:focus-visible{
  outline:2px solid var(--primary-25);
  outline-offset:2px;
}
.btn-ghost{
  border:none;
  background:transparent;
  box-shadow:none;
}
.option-item-row .control.is-invalid{
  border-color:var(--color-primary);
}
.option-assignment-row .control.is-invalid{
  border-color:var(--color-primary);
}
.app-toast{
  position:fixed;
  right:20px;
  bottom:20px;
  background:var(--color-text-strong);
  color:var(--color-white);
  padding:10px 14px;
  border-radius:10px;
  box-shadow:0 10px 24px var(--overlay-ink-24);
  font-size:13px;
  z-index:3000;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.app-toast.is-visible{
  opacity:1;
  transform:translateY(0);
}
.app-toast.is-error{
  background:var(--color-primary);
}
.option-picker-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  flex-wrap:nowrap;
  padding-bottom:8px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.option-picker-tabs::-webkit-scrollbar{
  height:0;
  display:none;
}
.option-picker-tabs.is-dragging{
  cursor:grabbing;
}
.option-picker-tab{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--color-border);
  background:var(--color-white);
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
.option-picker-tab.is-active{
  background:var(--primary-12);
  border-color:var(--primary-25);
  color:var(--color-primary);
}
.option-picker-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.option-picker-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--color-border);
  background:var(--color-white);
  cursor:pointer;
  user-select:none;
  min-width:0;
}
.option-picker-photo{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:6px;
  overflow:hidden;
  background:var(--color-surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
}
.option-picker-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.option-picker-row.is-selected{
  border-color:var(--primary-25);
  background:var(--primary-12);
}
.option-picker-title{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.option-picker-price{
  flex:0 0 auto;
  margin-left:auto;
  text-align:right;
  white-space:nowrap;
  font-size:12px;
  color:var(--color-text-dim);
}
.option-picker-controls{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
  min-width:0;
}
.option-picker-search{
  flex:1;
  min-width:0;
}
.option-picker-select-all{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--color-text-secondary);
  white-space:nowrap;
}
.option-picker-select-all input{
  margin:0;
}
.option-picker-panel{
  overflow-x:hidden;
}
.inline-modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:12px 16px;
  border-top:1px solid var(--color-border);
}
.option-group-meta{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.option-picker-checkbox{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}
.option-summary-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.option-summary-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--color-border);
  background:var(--color-white);
}
.option-summary-title{font-weight:600;}
.option-summary-meta{font-size:12px;color:var(--color-text-dim);}
.option-summary-price{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:12px;
  gap:4px;
}
.product-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ================= Product tabs header ================= */

.product-tabs-header{
  padding:8px 12px;
  border-bottom:1px solid var(--color-border);
}

.product-tabs{
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.product-tabs::-webkit-scrollbar{
  display:none;
}

.product-tab{
  width:100px;
  flex:0 0 100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  cursor:pointer;
  user-select:none;
}

.product-tab.is-active{
  background:var(--primary-14);
  border-color:var(--primary-25);
}

.product-tab-title{
  font-size:12px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1 1 auto;
}

.product-tab-close{
  border:none;
  background:transparent;
  color:var(--color-text-muted);
  width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}

.product-tab-close:hover{
  color:var(--color-text);
}

/* ================= Product info title ================= */

.product-info-title{
  margin-bottom:12px;
}

.product-title-text{
  font-weight:800;
  font-size:16px;
  line-height:1.2;
}

.product-title-sku{
  font-size:12px;
}
.info-accordion .stage-item{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
}
.info-accordion .stage-item .stage-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.info-accordion .acc-panel-inner{margin-top:10px;}

/* Option accordion in product editor - title + description left, actions right */
#peOptionAccordion .stage-item.acc-trigger {
  justify-content: space-between;
  flex-wrap: nowrap;
  cursor: pointer;
  align-items: center;
  gap: 12px;
}

#peOptionAccordion .stage-item.acc-trigger .stage-meta {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

#peOptionAccordion .stage-item.acc-trigger .stage-meta b {
  display: block;
  font-weight: 600;
}

#peOptionAccordion .stage-item.acc-trigger .stage-meta small {
  display: block;
  margin-left: 0;
  font-weight: normal;
}

#peOptionAccordion .stage-item.acc-trigger .option-actions-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-grow: 0;
  margin-left: auto;
}

#peOptionAccordion .stage-item.acc-trigger .option-actions-inline button.btn {
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;
}

#peOptionAccordion .stage-item.acc-trigger .option-actions-inline button.btn:hover {
  background: var(--color-surface-2);
  border: none;
  box-shadow: none;
}

#peOptionAccordion .stage-item.acc-trigger .option-actions-inline button.btn:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

#peOptionAccordion .stage-item.acc-trigger .option-actions-inline .acc-chevron {
  flex-shrink: 0;
  pointer-events: none;
}

.inline-modal-header{
  padding:10px 12px;
  border-bottom:1px solid var(--color-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.inline-modal-title{font-weight:900}
.inline-modal-body{padding:12px;padding-bottom:200px;overflow:auto}

.picker-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--color-border);
  border-radius:12px;
  background:var(--color-surface);
  margin-bottom:10px;
  min-height:64px;
}
.picker-row.is-selected{
  background:var(--primary-14);
  border-color:var(--primary-25);
}
.picker-title{font-weight:900}

/* ================= Switch (Apple, ровный) ================= */
.switch{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  line-height:1;
  vertical-align:middle;
  min-height:var(--switch-h);
}

.switch-input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

.switch-ui{
  width:var(--switch-w);
  height:var(--switch-h);
  border-radius:12px;
  background:var(--switch-off-bg);
  border:1px solid var(--switch-off-border);
  box-sizing:border-box;
  display:inline-block;
  position:relative;
  flex:0 0 auto;
  cursor:pointer;
  transition:
    background var(--dur-fast) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth);
  box-shadow: inset 0 1px 2px var(--overlay-bg);
}

.switch-ui::after{
  content:"";
  position:absolute;
  top:var(--switch-pad);
  left:var(--switch-pad);
  width:calc(var(--switch-h) - (var(--switch-pad) * 2) - 2px);
  height:calc(var(--switch-h) - (var(--switch-pad) * 2) - 2px);
  border-radius:10px;
  background:var(--switch-knob);
  box-shadow: 0 1px 3px var(--overlay-bg);
  transform:translateX(0);
  transition:transform var(--dur-fast) var(--ease-smooth);
  will-change:transform;
  box-sizing:border-box;
}

.switch-input:checked + .switch-ui{
  background:var(--switch-on);
  border-color:transparent;
}
.switch-input:checked + .switch-ui::after{
  transform:translateX(calc(var(--switch-w) - var(--switch-h) + 2px));
}

.switch-input:focus-visible + .switch-ui{
  box-shadow:0 0 0 3px var(--primary-12);
}

.switch-input:disabled + .switch-ui{
  opacity:.55;
  cursor:not-allowed;
}

.switch-text{color:var(--color-text);font-weight:600}

.settings-row-switches .switch{
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.settings-row-switches .switch-text{
  font-size:12px;
  color:var(--color-text-muted);
  font-weight:600;
}

/* ================= Product editor header (150x150) ================= */
.product-editor-top{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:12px;
  align-items:start;
}

.product-photo-main{
  width:150px;
  height:150px;
  border-radius:16px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  overflow:hidden;
  position:relative;
  display:grid;
  place-items:center;
  transition:border-color 0.2s, box-shadow 0.2s;
}

.product-photo-main.drag-over{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--primary-12);
  background:var(--primary-14);
}

.photo-main-wrapper{
  width:100%;
  height:100%;
  position:relative;
  display:grid;
  place-items:center;
}

.category-icon-upload{
  display:grid;
  gap:8px;
}

.category-icon-preview{
  width:120px;
  height:120px;
}

.category-editor-layout{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:16px;
  align-items:start;
}

.category-editor-photo{
  display:grid;
  gap:8px;
}

.category-editor-fields{
  display:grid;
  gap:12px;
  align-content:start;
}

.category-editor-preview{
  width:160px;
  height:160px;
  border-radius:16px;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.category-editor-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.category-editor-actions{
  display:grid;
  gap:8px;
}

@media (max-width:640px){
  .category-editor-layout{
    grid-template-columns:1fr;
  }
  .category-editor-preview{
    width:100%;
    max-width:200px;
  }
}

.product-photo-placeholder{
  color:var(--color-text-muted);
  font-size:12px;
  text-align:center;
  padding:10px;
}

/* В этом месте (под 150x150) миниатюры поменьше */
.product-photo-thumbs-wrapper{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:4px;
}
.product-photo-thumbs{
  flex:1;
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.product-photo-thumbs::-webkit-scrollbar{
  height:4px;
}
.product-photo-thumbs::-webkit-scrollbar-track{
  background:transparent;
}
.product-photo-thumbs::-webkit-scrollbar-thumb{
  background:var(--color-border);
  border-radius:2px;
}

/* JS рисует .img-thumb — делаем их 40x40 только в этом контейнере */
.img-thumb-wrapper{
  position:relative;
  cursor:move;
}

.img-thumb-wrapper.is-dragging{
  opacity:0.5;
}

.img-thumb-wrapper.drag-over{
  transform:translateY(-2px);
}

.product-photo-thumbs .img-thumb{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  padding:0;
  transition:border-color 0.2s, box-shadow 0.2s;
}

.product-photo-thumbs .img-thumb:hover{
  border-color:var(--color-primary);
}

.product-photo-thumbs .img-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.product-photo-thumbs .img-thumb.is-active{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--primary-12);
}
.product-thumbs-nav{
  flex-shrink:0;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  color:var(--color-text);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:10px;
  transition:background 0.2s, border-color 0.2s, color 0.2s;
}
.product-thumbs-nav:hover{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-white);
}
.product-thumbs-nav:disabled{
  opacity:0.4;
  cursor:not-allowed;
}

.img-del{
  position:absolute;
  top:2px;
  right:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--color-primary);
  color:var(--color-white);
  display:grid;
  place-items:center;
  font-size:10px;
  cursor:pointer;
  opacity:0;
  transition:opacity 0.2s;
  z-index:2;
}

.img-thumb:hover .img-del{
  opacity:1;
}

.img-del:hover{
  background:var(--color-primary);
}

.img-drag-handle{
  position:absolute;
  bottom:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:4px;
  background:var(--overlay-bg);
  color:var(--color-white);
  display:grid;
  place-items:center;
  font-size:10px;
  cursor:grab;
  opacity:0;
  transition:opacity 0.2s;
  z-index:2;
}

.img-thumb:hover .img-drag-handle{
  opacity:1;
}

.img-drag-handle:active{
  cursor:grabbing;
}

/* верхние кнопки фото */
.product-photo-tools{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
}

.product-editor-view .product-photo-tools,
.product-editor-view .chip-remove,
.product-editor-view .chip-plus,
.product-editor-view .img-del,
.product-editor-view .img-drag-handle,
.product-editor-view .option-actions,
.product-editor-view .option-actions-inline button,
.product-editor-view .ingredient-acc-controls .ingredient-variable-switch,
.product-editor-view .ingredient-acc-controls .ingredient-remove-btn{
  display:none !important;
}

.product-editor-view .img-thumb-wrapper{
  cursor:default;
}

/* правая часть в топе */
.product-editor-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Для img main используем существующий класс, но в этом месте он должен быть 150x150 */
.product-photo-main .img-main{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.img-main.hidden{display:none}
.photo-size-badge{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:5px;pointer-events:none;z-index:10;line-height:1.3}

/* Стрелки навигации фото */
.photo-nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--overlay-bg);
  color:var(--color-white);
  border:none;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:14px;
  opacity:0;
  transition:opacity 0.2s, background 0.2s;
  z-index:3;
}

.photo-main-wrapper:hover .photo-nav-btn{
  opacity:1;
}

.photo-nav-btn:hover{
  background:var(--overlay-bg);
}

.photo-nav-prev{
  left:8px;
}

.photo-nav-next{
  right:8px;
}

.photo-nav-btn.hidden{
  display:none;
}

/* Точки-индикаторы */
.photo-dots{
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:3;
}

.photo-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--on-primary);
  cursor:pointer;
  transition:background 0.2s, transform 0.2s;
}

.photo-dot:hover{
  background:var(--on-primary);
  transform:scale(1.2);
}

.photo-dot.is-active{
  background:var(--color-white);
  transform:scale(1.3);
}

.photo-dots.hidden{
  display:none;
}

/* мобилка: в колонку */
@media (max-width:520px){
  .product-editor-top{
    grid-template-columns:1fr;
  }
}
/* ================= Fix: product photo in list ================= */
/* Фото в списке товаров всегда маленькое (как аватар), не влияет на высоту строки */
.product-thumb{
  width:44px;
  height:44px;
  border-radius:14px;
  object-fit:cover;
  display:block;
  background:var(--primary-14);
  border:1px solid var(--primary-25);
}

/* Блок комбо: строка товара с фото, шеврон слева, звезда и крестик справа */
.combo-block-product-row-wrapper{
  display:flex;
  flex-direction:column;
  gap:0;
}
.combo-block-product-row-wrapper:has(.combo-block-product-details:not([hidden])) .option-item-row.combo-block-product-row{
  border-radius:10px 10px 0 0;
}
.option-item-row.combo-block-product-row{
  position:relative;
  grid-template-columns:auto auto minmax(0, 1fr) auto auto auto;
  padding-right:36px;
}
#comboBlockProductsList.is-view-mode .option-item-row.combo-block-product-row{
  grid-template-columns:auto auto minmax(0, 1fr) auto;
  padding-right:10px;
}
.combo-block-product-chevron{
  border:none;
  background:transparent;
  color:var(--color-text-faint);
  padding:4px 6px;
  cursor:pointer;
  align-self:center;
}
.combo-block-product-chevron:hover{
  color:var(--primary);
}
.combo-block-product-chevron i{
  display:block;
  transition:transform 0.2s;
}
.combo-block-product-price{
  margin-left:auto;
  font-weight:600;
  color:var(--color-primary);
  white-space:nowrap;
}
.combo-block-product-star{
  margin-left:8px;
}
.option-item-row.combo-block-product-row .option-row-remove{
  right:8px;
}
.combo-block-product-thumb{
  width:44px;
  height:44px;
  border-radius:10px;
  object-fit:cover;
  display:block;
  background:var(--color-border);
  border:1px solid var(--color-border);
}
.combo-block-product-thumb-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-text-faint);
  font-size:18px;
}
.option-item-actions .fa-star.is-default{
  color:var(--primary);
}
/* Область списка товаров в блоке комбо: скролл и отступ снизу, чтобы раскрытый контент не уходил под футер */
.combo-block-products-panel-inner{
  max-height:min(55vh, 480px);
  overflow-y:auto;
  padding-bottom:80px;
  /* общий контейнер со скроллом, но без видимого скроллбара */
  scrollbar-width:none; /* Firefox */
}
.combo-block-products-panel-inner::-webkit-scrollbar{
  display:none; /* WebKit */
}
/* Внутри блока комбо убираем "рамку" вокруг товаров — остаётся общий контейнер */
.combo-block-products-panel-inner .option-item-row.combo-block-product-row{
  background:transparent;
  border:none;
}
.combo-block-product-details{
  padding:8px 10px 10px 36px;
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-top:none;
  border-radius:0 0 10px 10px;
  font-size:13px;
}
.combo-block-product-detail{
  padding:2px 0;
}
.combo-block-product-detail .muted{
  margin-right:6px;
}
.combo-block-detail-section{
  margin-bottom:10px;
}
.combo-block-detail-section:last-child{
  margin-bottom:0;
}
.combo-block-detail-label{
  font-weight:600;
  margin-bottom:6px;
  font-size:13px;
}
.combo-block-detail-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.combo-block-detail-chip{
  display:inline-block;
  padding:6px 12px;
  border-radius:10px;
  border:1px solid var(--color-border);
  background:var(--color-bg);
  font-size:13px;
  color:var(--color-text);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.combo-block-detail-chip:hover{
  border-color:var(--color-primary);
}
.combo-block-detail-chip.is-selected{
  border-color:var(--color-primary);
  background:var(--primary-12);
  color:var(--color-primary);
}
.combo-block-detail-ingredients{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.combo-block-detail-ingredient-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--color-text);
  padding:6px 0;
}
.combo-block-ingredient-thumb{
  width:40px;
  height:40px;
  border-radius:8px;
  object-fit:cover;
  background:var(--color-border);
  flex-shrink:0;
}
.combo-block-ingredient-thumb-placeholder{
  width:40px;
  height:40px;
  border-radius:8px;
  background:var(--color-border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-text-faint);
  font-size:16px;
}
.combo-block-ingredient-name{
  flex:1;
  min-width:0;
}
.combo-block-ingredient-qty-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}
.combo-block-ingredient-btn{
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid var(--color-border);
  background:var(--color-bg);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--color-text);
}
.combo-block-ingredient-btn:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.combo-block-ingredient-qty{
  min-width:3em;
  text-align:center;
}

/* на всякий случай: если где-то попадёт img в row без класса */
.order-row img{
  max-width:100%;
  height:auto;
}
/* ================= Header: logo near burger ================= */
.header-left{
  display:flex;
  align-items:center;
  gap:12px;
}

/* ================= Product info header (title + sku + actions) ================= */
.product-info-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.product-info-header-left{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.product-header-title{
  max-width:300px;           /* как ты просил */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.product-header-sku{
  font-size:12px;
  line-height:1.2;
}

.product-info-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

/* ================= Product info body: photo left, card right ================= */
.product-info-top{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:12px;
  align-items:start;
}

.product-info-photoCol{
  display:flex;
  flex-direction:column;
}

/* если у тебя эти классы уже есть — этот блок просто “перебьёт” */
.product-photo-main{
  width:150px;
  height:150px;
  border-radius:16px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  overflow:hidden;
  position:relative;
  display:grid;
  place-items:center;
}

.product-photo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Сетка 4 фото из первых блоков комбо (когда своих фото нет) */
.combo-set-photo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:6px;
  width:100%;
  max-width:200px;
  aspect-ratio:1;
  margin:0 auto 8px;
}
.combo-set-photo-grid-cell{
  border-radius:8px;
  overflow:hidden;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
}
.combo-set-photo-grid-cell img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.combo-set-photo-grid-cell-empty{
  min-height:0;
}
.combo-set-photo-grid-hint{
  display:block;
  color:var(--color-text-muted);
  font-size:12px;
  text-align:center;
}

/* поддержка двух вариантов миниатюр (если JS рисует img-thumb или product-photo-thumb) */
#infoPhotoThumbs .img-thumb,
#infoPhotoThumbs .product-photo-thumb{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  overflow:hidden;
  cursor:pointer;
  flex:0 0 auto;
}
#infoPhotoThumbs .img-thumb img,
#infoPhotoThumbs .product-photo-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:520px){
  .product-info-top{ grid-template-columns:1fr; }
}
/* ================= Fix: Center column main panel should stretch and scroll ================= */
/* center-stack содержит 2 панели: toolbar + контент. Контентная панель должна занимать остаток высоты. */
.center-stack{
  flex: 1;
  min-height: 0;
}

.center-stack > .panel{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* верхняя панель (toolbar) — по контенту */
.center-stack > .panel:first-child{
  flex: 0 0 auto;
}

/* нижняя панель (основной контент) — заполняет всё оставшееся */
.center-stack > .panel:last-child{
  flex: 1 1 auto;
  min-height: 0;
}

/* panel-body внутри нижней панели — скроллится */
.center-stack > .panel:last-child > .panel-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* ================= Fix: Hide product info header when nothing selected ================= */
/* Работает автоматически через :has() (Chrome/Edge/Safari). */
#productInfoPanel:has(#productEmpty:not(.hidden)) .product-info-header,
#productInfoPanel:has(#categoryEmpty:not(.hidden)) .product-info-header,
#productInfoPanel:has(#optionEmpty:not(.hidden)) .product-info-header{
  display: none !important;
}
#productInfoPanel:has(#productInfo:not(.hidden)) .product-info-header,
#productInfoPanel:has(#categoryInfo:not(.hidden)) .product-info-header,
#productInfoPanel:has(#optionGroupInfo:not(.hidden)) .product-info-header{
  display: flex !important;
}

/* подсказки (используется в админке и витрине) */
.empty-hint{
  margin-top:10px;
  padding:12px;
  border:1px dashed var(--color-border);
  border-radius:12px;
  background:var(--color-surface);
  color:var(--color-text-muted);
  text-align:center;
  font-weight:600;
}

/* Picker overlay - перекрывает header */
.picker-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-surface);
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.picker-overlay-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.picker-overlay-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

.picker-overlay-header .panel-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
}

.picker-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 200px;
}

/* Footer закреплен внизу */
#productInfoPanel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative; /* Для позиционирования .picker-overlay внутри панели */
}

#productInfoPanel .panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Когда открыт комбо или форма товара — контент с самого верха, без пустого поля сверху */
#productInfoPanel:has(#comboSetInfo:not(.hidden)) .panel-body,
#productInfoPanel:has(.product-editor-wrapper) .panel-body {
  padding-top: 0;
}
#productInfoPanel:has(#comboSetInfo:not(.hidden)) {
  background: var(--color-white);
}
#productInfoPanel:has(#comboSetInfo:not(.hidden)) .panel-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  background: var(--color-white);
  padding: 6px;
}
#productInfoPanel:has(#comboSetInfo:not(.hidden)) #comboSetInfo {
  flex: 0 0 auto;
  align-self: stretch;
  margin-top: 0;
  background: var(--color-white);
}
/* Когда открыт комбо — показываем только #comboSetInfo, остальные дети body скрыты (убирает пустое место сверху) */
#productInfoPanel:has(#comboSetInfo:not(.hidden)) #productInfoBody > *:not(#comboSetInfo) {
  display: none !important;
}

/* Просмотр товара/категории: отступы */
#productInfoPanel #productInfo:not(.hidden),
#productInfoPanel #categoryInfo:not(.hidden) {
  padding: 12px 1px;
}

/* Комбо-набор: минимальные отступы по периметру, ближе к краям */
#productInfoPanel #comboSetInfo:not(.hidden) {
  padding: 6px 4px;
}
/* Режим просмотра комбо: скрыть кнопки добавления и удаления */
#comboSetInfo.combo-set-view-mode #comboSetCategoryChipPlus,
#comboSetInfo.combo-set-view-mode .chip-remove,
#comboSetInfo.combo-set-view-mode #comboSetBlocksAddBtn,
#comboSetInfo.combo-set-view-mode [data-remove-combo-set-block],
#comboSetInfo.combo-set-view-mode #comboSetAddPhotosBtn,
#comboSetInfo.combo-set-view-mode .combo-set-photo-grid-hint {
  display: none !important;
}
#comboSetInfo.combo-set-view-mode .product-photo-main {
  pointer-events: none;
}
#productInfoPanel #comboSetInfo .combo-set-blocks-section {
  margin-top: 12px;
}
.combo-set-blocks-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
/* Карточка заголовка секции «Блоки в наборе»: белый фон, рамка, скругления, шеврон справа по образцу */
.combo-set-blocks-header-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  min-height: 48px;
  justify-content: center;
}
.combo-set-blocks-header-card b {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.3;
}
.combo-set-blocks-header-card .muted {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted, var(--color-text-dim));
  line-height: 1.35;
  margin-top: 0;
}
/* Строка блока в наборе: карточка как на образце — белый фон, рамка, шеврон справа, крестик внутри */
#comboSetBlocksList .combo-set-block-acc-item .combo-set-block-acc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 0;
}
#comboSetBlocksList .combo-set-block-acc-item .acc-panel[data-acc-panel] {
  border: none;
  border-radius: 0 0 10px 10px;
  margin-top: 0;
}
#comboSetBlocksList .combo-set-block-acc-item .acc-trigger {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
#comboSetBlocksList .combo-set-block-acc-item .acc-trigger .combo-set-block-trigger-text {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#comboSetBlocksList .combo-set-block-acc-item .acc-trigger .option-item-title {
  font-weight: 600;
  color: var(--color-text);
}
#comboSetBlocksList .combo-set-block-acc-item .acc-trigger .option-item-meta {
  color: var(--color-text-muted, var(--color-text-dim));
  font-size: 13px;
}
#comboSetBlocksList .combo-set-block-acc-item .acc-chevron {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--color-text-muted, var(--color-text-dim));
  transition: transform var(--dur-fast, 0.2s) ease, background 0.15s ease;
}
#comboSetBlocksList .combo-set-block-acc-item .acc-trigger:hover .acc-chevron {
  background: var(--color-surface-2);
}
#comboSetBlocksList .combo-set-block-acc-item .acc-trigger.is-open .acc-chevron {
  transform: rotate(180deg);
}
#comboSetBlocksList .combo-set-block-acc-item .option-row-remove {
  position: static;
  flex-shrink: 0;
  margin-left: 0;
  color: var(--color-text-muted);
  transition: none;
  transform: none;
}
#comboSetBlocksList .combo-set-block-acc-item .option-row-remove:hover {
  color: var(--color-primary);
  transition: none;
}
#comboSetBlocksList .combo-set-block-acc-item .acc-panel-inner {
  padding: 0;
  margin: 0;
  background: var(--color-white);
}
#comboSetBlocksList .combo-set-block-acc-item + .combo-set-block-acc-item {
  margin-top: 8px;
}
/* Список товаров — ровно друг под другом, без смещения */
#comboSetBlocksList .combo-set-block-panel-inner .combo-set-block-products-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  padding: 0;
  margin: 0;
}
#comboSetBlocksList .combo-set-block-panel-inner .combo-block-product-row-wrapper {
  border-radius: 10px;
  border: none;
  background: var(--color-white);
  padding: 14px 12px;
  margin: 0 !important;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  box-shadow: none;
  flex-shrink: 0;
}
/* Фиксированная сетка — шеврон, фото, название, цена (старая/новая) ровно друг под другом */
#comboSetBlocksList .combo-set-block-panel-inner .option-item-row.combo-block-product-row {
  display: grid;
  grid-template-columns: 32px 44px minmax(0, 1fr) minmax(90px, auto);
  align-items: center;
  gap: 10px;
  padding: 0;
  min-height: 56px;
}
#comboSetBlocksList .combo-set-block-panel-inner .combo-block-product-chevron {
  width: 32px;
  min-width: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#comboSetBlocksList .combo-set-block-panel-inner .combo-block-product-thumb,
#comboSetBlocksList .combo-set-block-panel-inner .combo-block-product-thumb-placeholder {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
#comboSetBlocksList .combo-set-block-panel-inner .option-item-row.combo-block-product-row .option-item-title {
  font-size: 14px;
  line-height: 1.35;
}
#comboSetBlocksList .combo-set-block-panel-inner .combo-block-product-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border);
  color: var(--color-text-faint);
}
#comboSetBlocksList .combo-set-block-panel-inner .combo-set-price-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}
#comboSetBlocksList .combo-set-block-panel-inner .combo-set-price-old {
  text-decoration: line-through;
  color: var(--color-text-muted, var(--color-text-dim));
  font-size: 13px;
  white-space: nowrap;
}
#comboSetBlocksList .combo-set-block-panel-inner .combo-block-product-price {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  text-align: right;
  justify-self: end;
}
#comboSetBlocksList .combo-set-block-panel-inner .combo-block-product-details {
  margin-top: 10px;
  margin-left: 0;
  padding: 8px 0 4px 12px;
  border-radius: 8px;
}

#productInfoFooter {
  margin-top: auto;
  flex: 0 0 auto;
}

/* Adjust footer position when in picker mode */
#productInfoPanel:has(.picker-overlay) #productInfoFooter {
  position: sticky;
  bottom: 0;
  z-index: 35;
  box-shadow: 0 -2px 8px var(--overlay-bg);
}

/* Unit conversion row styles */
.unit-conversions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.unit-conversion-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-surface-2);
  border-radius: 8px;
}

.unit-conversion-from,
.unit-conversion-to {
  font-weight: 500;
  color: var(--color-text);
  min-width: 40px;
  text-align: center;
}

.unit-conversion-arrow {
  color: var(--color-text-muted);
  font-size: 14px;
}

.unit-conversion-factor {
  flex: 1;
  max-width: 120px;
}

.unit-conversion-delete {
  margin-left: auto;
  color: var(--color-text-muted);
}

.unit-conversion-delete:hover {
  color: var(--color-primary);
}

/* store hours */
.store-hours-grid {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.store-hours-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.store-hours-row .store-hours-day {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-ink);
  width: 42px;
}
.store-hours-inputs {
  display: flex;
  gap: 6px;
  align-items: center;
}
.store-hours-input {
  width: 110px;
  max-width: 110px;
  font-size: 0.9rem;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-sizing: border-box;
}
.store-hours-switch-control {
  margin: 0;
}
.store-hours-switch-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.store-hours-switch-wrap .switch {
  margin: 0;
}
.store-hours-switch-text {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
@media (max-width: 640px) {
  .store-hours-row {
    flex-direction: row;
  }
}
.store-hours-row--global {
  gap: 12px;
}

.store-hours-row--global .store-hours-day {
  width: auto;
  font-size: 1rem;
  font-weight: 600;
  min-width: 90px;
}

.store-hours-row--global .store-hours-inputs {
  flex: 1;
}

/* ================= Global Telegram Notifications ================= */

.settings-section {
  margin-bottom: 20px;
}
.settings-section-title {
  font-weight: 700;
  margin-bottom: 8px;
}
.settings-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 20px 0;
}

/* Global Telegram Bindings - Compact Design */
.global-telegram-add-toggle {
  margin-left: auto;
}
#globalTelegramBindings,
#settingsStoreTelegramList {
  margin-top: 12px;
}
.global-telegram-binding {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}
.global-telegram-binding:last-child {
  margin-bottom: 0;
}
.global-telegram-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.global-telegram-api-key {
  flex: 1;
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
}
.global-telegram-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.global-telegram-gear i {
  transition: transform 0.2s;
  display: inline-block;
}
.global-telegram-gear.active {
  color: var(--color-primary);
}
.global-telegram-gear.active i {
  transform: rotate(90deg);
}
.btn-danger-text {
  color: var(--color-danger);
}
.btn-danger-text:hover {
  color: var(--color-danger);
  opacity: 0.8;
}
.global-telegram-stores {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.global-telegram-stores.hidden {
  display: none;
}
.global-telegram-stores-list {
  display: grid;
  gap: 8px;
}
.global-telegram-store-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.global-telegram-store-row .store-name {
  font-size: 14px;
}
.global-telegram-connect {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.global-telegram-connect.hidden {
  display: none;
}
.global-telegram-connect .field-group {
  margin-bottom: 12px;
}
.global-telegram-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-border);
  transition: 0.2s;
  border-radius: 24px;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--color-white);
  transition: 0.2s;
  border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider {
  background-color: var(--color-primary);
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* ================= Admin Client Profile (shop-style) ================= */
:is(.page-clients, .page-orders) .shop-profile-top{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:16px;
  align-items:start;
  padding:12px;
}
:is(.page-clients, .page-orders) .shop-profile-photo-wrap{display:block;}
:is(.page-clients, .page-orders) .shop-profile-photo{
  width:120px;
  height:120px;
  border-radius:16px;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  display:grid;
  place-items:center;
  overflow:hidden;
}
:is(.page-clients, .page-orders) .shop-profile-photo-img{
  width:100%;height:100%;object-fit:cover;display:block;
}
:is(.page-clients, .page-orders) .shop-profile-photo-placeholder{
  font-size:12px;color:var(--color-text-muted);text-align:center;padding:8px;
}
:is(.page-clients, .page-orders) .shop-profile-info{display:grid;gap:8px;}
:is(.page-clients, .page-orders) .shop-profile-line{display:grid;gap:4px;}
:is(.page-clients, .page-orders) .shop-profile-line-title{font-size:12px;color:var(--color-text-muted);}
:is(.page-clients, .page-orders) .shop-profile-line-value{font-weight:800;color:var(--color-text);}
:is(.page-clients, .page-orders) .shop-profile-name-value{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
:is(.page-clients, .page-orders) .shop-profile-name-edit{
  width:28px;height:28px;font-size:.75rem;color:var(--color-text-muted);flex-shrink:0;
}
:is(.page-clients, .page-orders) .shop-profile-name-edit:hover{color:var(--color-primary);}

:is(.page-clients, .page-orders) .shop-profile-tabs{
  display:flex;gap:8px;border-bottom:1px solid var(--color-border);padding:0 12px;
}
:is(.page-clients, .page-orders) .shop-profile-tab{
  padding:10px 12px;border:0;background:transparent;cursor:pointer;
  font-weight:700;color:var(--color-text-muted);border-bottom:2px solid transparent;
}
:is(.page-clients, .page-orders) .shop-profile-tab.is-active{
  color:var(--color-text);border-color:var(--color-primary);
}
:is(.page-clients, .page-orders) .shop-profile-tab-panel{display:none;padding:12px;}
:is(.page-clients, .page-orders) .shop-profile-tab-panel.is-active{display:grid;gap:12px;}

:is(.page-clients, .page-orders) .shop-profile-list{display:grid;gap:10px;}
:is(.page-clients, .page-orders) .shop-profile-card{
  border:1px solid var(--color-border);border-radius:14px;padding:10px 12px;background:var(--color-surface);
}
:is(.page-clients, .page-orders) .shop-profile-card--compact{padding:10px;}
:is(.page-clients, .page-orders) .shop-address-card{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex:1;min-width:0;
}
:is(.page-clients, .page-orders) .shop-address-card-main{min-width:0;flex:1;display:grid;gap:4px;}
:is(.page-clients, .page-orders) .shop-address-card-title{font-weight:500;font-size:.9rem;line-height:1.3;}
:is(.page-clients, .page-orders) .shop-address-card-sub{
  font-size:12px;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
:is(.page-clients, .page-orders) .shop-address-actions--compact{display:flex;gap:6px;margin-top:0;}
:is(.page-clients, .page-orders) .shop-address-action-icon{
  width:32px;height:32px;border-radius:10px;border:1px solid var(--color-border);
  background:var(--color-surface);display:grid;place-items:center;cursor:pointer;
  color:var(--color-text-muted);
}
:is(.page-clients, .page-orders) .shop-address-action-icon:hover{background:var(--color-surface-2);}
:is(.page-clients, .page-orders) .shop-address-action-icon.is-default{color:var(--color-text-muted);}
:is(.page-clients, .page-orders) .shop-address-action-icon.is-default.is-active{color:var(--color-primary);}
:is(.page-clients, .page-orders) .shop-address-action-icon.is-danger{color:var(--color-primary);}

:is(.page-clients, .page-orders) .shop-chip-btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border:1px solid var(--color-border);border-radius:20px;background:var(--color-surface);
  cursor:pointer;font-weight:700;font-size:.85rem;color:var(--color-text);
}
:is(.page-clients, .page-orders) .shop-chip-btn:hover{background:var(--color-surface-2);}

:is(.page-clients, .page-orders) .shop-address-form-grid{display:grid;gap:12px;}
:is(.page-clients, .page-orders) .shop-address-form-row{display:grid;gap:6px;}
:is(.page-clients, .page-orders) .shop-address-form-row--grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
:is(.page-clients, .page-orders) .shop-address-form-field{display:grid;gap:6px;min-width:0;}
:is(.page-clients, .page-orders) .shop-address-form-field .control{width:100%;min-width:0;}

/* --- Order detail back button --- */
.cl-order-detail-back{
  display:flex;align-items:center;gap:8px;padding:0 0 8px;cursor:pointer;font-weight:700;
}
.cl-order-detail-back .icon-btn{
  width:32px;height:32px;border-radius:10px;border:1px solid var(--color-border);
  background:var(--color-surface);display:grid;place-items:center;cursor:pointer;
}

/* --- Order detail card --- */
.cl-order-detail{display:grid;gap:16px;}
.cl-od-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--color-border);
}
.cl-od-title{font-size:18px;font-weight:700;}
.cl-od-status{font-size:14px;color:var(--color-text-muted);padding:4px 8px;border-radius:8px;background:var(--color-surface-2);}

.cl-od-info{display:grid;gap:10px;}
.cl-od-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.cl-od-label{font-size:14px;color:var(--color-text-muted);}
.cl-od-value{font-size:14px;font-weight:500;text-align:right;}

.cl-od-section{
  display:grid;gap:8px;padding:12px;border-radius:12px;
  border:1px solid var(--color-border);background:var(--color-surface);
}
.cl-od-section-title{font-size:14px;font-weight:600;}

/* --- Order items --- */
.cl-od-items{display:grid;gap:10px;}
.cl-order-item{
  display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:start;
  padding:10px;border-radius:14px;border:1px solid var(--color-border);background:var(--color-surface);
}
.cl-order-item-photo{
  width:72px;height:72px;border-radius:12px;object-fit:cover;
  border:1px solid var(--color-border);background:var(--color-surface-2);
}
.cl-order-item-photo--empty{
  display:grid;place-items:center;
}
.cl-order-item-mid{min-width:0;display:grid;gap:2px;}
.cl-order-item-title{font-weight:700;font-size:.9rem;line-height:1.3;}
.cl-order-item-sub{font-size:12px;color:var(--color-text-muted);line-height:1.4;}
.cl-order-item-right{text-align:right;display:grid;gap:2px;align-self:end;}
.cl-order-item-qty{font-size:12px;color:var(--color-text-muted);}
.cl-order-item-price{font-weight:700;}

/* --- Summary --- */
.cl-od-summary{display:flex;flex-direction:column;gap:8px;}
.cl-od-summary-title{font-weight:700;margin-bottom:2px;}
.cl-od-summary-row{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.cl-od-summary-divider{border-top:1px dashed var(--color-border);margin:6px 0 2px;}
.cl-od-summary-total{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-weight:700;font-size:16px;
}

/* в”Ђв”Ђ Clients toolbar: expandable search в”Ђв”Ђ */
.cl-search-wrap{
  display:flex;
  align-items:center;
  position:relative;
  flex-direction:row;
}
.cl-search-toggle{
  position:relative;
  z-index:2;
  flex-shrink:0;
  order:2;
}
.cl-search-input{
  width:0;
  height:36px;
  padding:0;
  border:1px solid transparent;
  border-radius:8px;
  background:var(--color-surface);
  font-size:14px;
  color:var(--color-text);
  outline:none;
  opacity:0;
  order:1;
  margin-right:0;
  transition:width 0.25s ease, padding 0.25s ease, border-color 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}
.cl-search-wrap.is-open .cl-search-input{
  width:180px;
  padding:0 10px;
  border-color:var(--color-border);
  opacity:1;
  margin-right:8px;
}
.cl-search-input:focus{border-color:var(--color-primary);}
.cl-search-input::placeholder{color:var(--color-text-muted);opacity:.6;}

/* в”Ђв”Ђ Clients toolbar: sort dropdown в”Ђв”Ђ */
.cl-sort-wrap{position:relative;}
#clientsSortToggle{
  display:flex;
  align-items:center;
  gap:0;
}
#clientsSortToggle i{
  font-size:12px;
  line-height:1;
}
#clientsSortToggle i:first-child{
  margin-right:-2px;
}
.cl-sort-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:12px;
  box-shadow:0 8px 24px var(--overlay-bg);
  display:grid;
  min-width:200px;
  z-index:50;
  overflow:hidden;
  padding:4px 0;
}
.cl-sort-dropdown.hidden{display:none;}
.cl-sort-option{
  padding:10px 14px;
  text-align:left;
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  color:var(--color-text);
  transition:background var(--dur-fast) ease;
}
.cl-sort-option:hover{background:var(--color-surface-2);}
.cl-sort-option.is-active{
  color:var(--color-primary);
  font-weight:600;
  background:var(--primary-12);
}

/* в”Ђв”Ђ Clients accordion в”Ђв”Ђ */
.clients-accordion{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.clients-accordion .acc-trigger{
  background:var(--primary-14);
  border-color:var(--primary-25);
}
.clients-accordion .acc-trigger .stage-text b{
  color:var(--color-text);
  font-weight:700;
}
.clients-accordion .acc-trigger:hover{
  background:var(--primary-18);
}
.clients-accordion .acc-panel-inner{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.clients-accordion .acc-panel-inner .stage-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.clients-accordion .acc-panel-inner .stage-item .stage-meta{
  flex:1;
  min-width:0;
}
.clients-accordion .acc-panel-inner .stage-item .stage-count{
  flex-shrink:0;
  margin-left:auto;
}

/* в”Ђв”Ђ Filter Editor Form в”Ђв”Ђ */
#filterEditorForm .control{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}
#filterEditorForm select.control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
  cursor:pointer;
}
.filter-rule-row{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.filter-rule-row .control{
  height:36px;
  font-size:13px;
}
.filter-rule-row .rule-field{flex:2;min-width:0;}
.filter-rule-row .rule-operator{flex:1;min-width:60px;}
.filter-rule-row .rule-value{flex:2;min-width:0;}
.filter-rule-row .rule-value.hidden{display:none;}
.filter-rule-row .rule-date-input{
  flex:2;
  display:flex;
  align-items:center;
  gap:4px;
}
.filter-rule-row .rule-date-input.hidden{display:none;}
.filter-rule-row .rule-value-days{
  width:80px;
  flex-shrink:0;
}
.filter-rule-row .rule-date-suffix{
  font-size:12px;
  color:var(--color-text-muted);
  white-space:nowrap;
}
.filter-rule-row .rule-remove{
  flex-shrink:0;
  width:32px;
  height:32px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Panel footer for filter editor */
.panel-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border-top:1px solid var(--color-border);
  background:var(--color-surface);
}
.panel-footer .btn-danger{
  margin-right:auto;
}
.panel-footer .btn-primary{
  margin-left:auto;
}

/* в”Ђв”Ђ Custom Select Component (modern dropdown style) в”Ђв”Ђ */
.custom-select{
  position:relative;
  display:inline-flex;
  min-width:0;
}
.custom-select .cs-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  text-align:left;
  cursor:pointer;
  background:var(--color-surface);
}
.custom-select .cs-value{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.custom-select .cs-arrow{
  font-size:10px;
  color:var(--color-text-muted);
  flex-shrink:0;
  transition:transform .15s;
}
.custom-select.is-open .cs-arrow{
  transform:rotate(180deg);
}
.custom-select .cs-dropdown{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  min-width:100%;
  z-index:200;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:12px;
  box-shadow:0 4px 20px var(--overlay-bg);
  padding:4px 0;
  max-height:220px;
  overflow-y:auto;
}
.custom-select .cs-dropdown.hidden{
  display:none;
}
.custom-select .cs-option{
  display:block;
  width:100%;
  padding:10px 14px;
  border:none;
  background:none;
  text-align:left;
  font-size:14px;
  color:var(--color-text);
  cursor:pointer;
  transition:background .12s;
  border-bottom:1px solid var(--color-border);
}
.custom-select .cs-option:last-child{
  border-bottom:none;
}
.custom-select .cs-option:hover{
  background:var(--primary-10);
}
.custom-select .cs-option.is-selected{
  color:var(--color-primary);
  font-weight:600;
  background:var(--primary-12);
}

/* Filter rule row adjustments for custom select */
.filter-rule-row .custom-select.rule-field{flex:2;min-width:0;}
.filter-rule-row .custom-select.rule-operator{flex:1;min-width:60px;}
.filter-rule-row .custom-select .cs-trigger{
  height:36px;
  font-size:13px;
  padding:0 10px;
}

/* Logic select full width */
.custom-select.logic-select{
  display:flex;
  width:100%;
}
.custom-select.logic-select .cs-trigger{
  height:40px;
}

/* в”Ђв”Ђ Filter category row (compact single line) в”Ђв”Ђ */
.filter-category-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:10px;
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
.filter-category-row:hover{
  background:var(--color-surface-2);
}
.filter-category-row.is-active{
  border-color:var(--color-primary);
  background:var(--primary-10);
}
.filter-category-row .filter-cat-icon{
  font-size:14px;
  color:var(--color-primary);
  flex-shrink:0;
}
.filter-category-row .filter-cat-title{
  flex:1;
  font-weight:500;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.filter-category-row .filter-cat-count{
  flex-shrink:0;
  font-size:12px;
  color:var(--color-text-muted);
  background:var(--color-surface-2);
  padding:2px 8px;
  border-radius:12px;
}

/* в”Ђв”Ђ Discount Editor Form в”Ђв”Ђ */
#discountEditorForm .control{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}
#discountEditorForm select.control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
  cursor:pointer;
}
.weekdays-selector{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.weekday-checkbox{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px 10px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
  transition:background .12s, border-color .12s;
}
.weekday-checkbox:hover{
  background:var(--color-surface-3);
}
.weekday-checkbox input:checked + span{
  font-weight:600;
}
.weekday-checkbox input{
  accent-color:var(--color-primary);
}
.field-hint{
  font-size:12px;
  color:var(--color-text-muted);
  margin-top:4px;
}

/* в”Ђв”Ђ Discount Info Panel в”Ђв”Ђ */
.discount-info-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.discount-info-icon{
  width:48px;
  height:48px;
  background:var(--primary-14);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:var(--color-primary);
}
.discount-info-title{
  flex:1;
  font-size:18px;
  font-weight:600;
  color:var(--color-text);
}
.discount-info-badge{
  padding:4px 10px;
  font-size:12px;
  font-weight:500;
  border-radius:12px;
  background:var(--color-success-bg);
  color:var(--color-primary);
}
.discount-info-badge.inactive{
  background:var(--color-surface-2);
  color:var(--color-text-muted);
}
.discount-info-stats{
  display:flex;
  gap:16px;
  margin-bottom:16px;
}
.discount-info-stat{
  flex:1;
  background:var(--color-surface-2);
  border-radius:10px;
  padding:12px;
  text-align:center;
}
.discount-info-stat-value{
  font-size:20px;
  font-weight:700;
  color:var(--color-primary);
}
.discount-info-stat-label{
  font-size:12px;
  color:var(--color-text-muted);
  margin-top:4px;
}
.discount-info-details{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.discount-info-row{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid var(--color-border);
}
.discount-info-row:last-child{
  border-bottom:none;
}
.discount-info-row-label{
  font-size:13px;
  color:var(--color-text-muted);
}
.discount-info-row-value{
  font-size:13px;
  font-weight:500;
  color:var(--color-text);
}

/* в”Ђв”Ђ Discount row (list item) в”Ђв”Ђ */
.discount-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:10px;
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
.discount-row:hover{
  background:var(--color-surface-2);
}
.discount-row.is-active{
  border-color:var(--color-primary);
  background:var(--primary-10);
}
.discount-row .discount-row-icon{
  width:36px;
  height:36px;
  background:var(--primary-14);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:var(--color-primary);
  flex-shrink:0;
}
.discount-row .discount-row-info{
  flex:1;
  min-width:0;
}
.discount-row .discount-row-title{
  font-weight:500;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.discount-row .discount-row-meta{
  font-size:12px;
  color:var(--color-text-muted);
  margin-top:2px;
}
.discount-row .discount-row-value{
  flex-shrink:0;
  font-size:14px;
  font-weight:600;
  color:var(--color-primary);
}
.discount-row .discount-row-status{
  flex-shrink:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--color-primary);
}
.discount-row .discount-row-status.inactive{
  background:var(--color-text-muted);
}

/* История применения скидки: одна строка на запись */
.clients-panel .order-row.discount-order-row{
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px;
  align-items: center;
}
.discount-order-row .order-row-info{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.discount-order-row .order-row-title{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.discount-order-row .order-row-meta{
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--color-text-muted);
}
.discount-order-row .order-row-right{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}
.discount-order-row .order-row-total{
  white-space: nowrap;
  font-weight: 600;
}
.discount-order-row .order-row-discount{
  white-space: nowrap;
  color: var(--color-success);
  font-size: 12px;
}

/* в”Ђв”Ђ Discount chips (product/customer selection) в”Ђв”Ђ */
.discount-chips-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
}
.discount-chips{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  flex:1;
  min-width:0;
}
.discount-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px 4px 10px;
  background:var(--primary-14);
  border-radius:16px;
  font-size:12px;
  color:var(--color-text);
  max-width:180px;
}
.discount-chip-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.discount-chip-remove{
  cursor:pointer;
  color:var(--color-text-muted);
  font-size:10px;
  flex-shrink:0;
  width:14px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:background .12s, color .12s;
}
.discount-chip-remove:hover{
  color:var(--color-danger);
  background:var(--primary-12);
}
.discount-chip.is-category{
  background:var(--color-info-bg);
  color:var(--color-primary);
}
.discount-chip.is-combo{
  background:var(--color-primary);
  color:var(--color-primary);
}
.discount-chips-empty{
  font-size:12px;
  color:var(--color-text-muted);
  font-style:italic;
}

/* в”Ђв”Ђ Discount info sections в”Ђв”Ђ */
.discount-info-section{
  margin-top:16px;
}
.discount-info-section-title{
  font-size:13px;
  font-weight:600;
  margin-bottom:8px;
  color:var(--color-text);
}

/* в”Ђв”Ђ Order item old price (strikethrough) в”Ђв”Ђ */
.order-item-old-price{
  text-decoration:line-through;
  color:var(--color-text-muted, var(--color-text-faint));
  margin-right:6px;
}

/* ================= Stock Documents ================= */
.stock-doc-row{grid-template-columns:1.5fr .6fr .6fr .8fr .6fr}
.chip-success{background:var(--color-success-bg);border-color:var(--color-primary);color:var(--color-primary)}
.chip-draft{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary)}
.stock-items-list{display:grid;gap:6px}
.stock-item-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--color-border);background:var(--color-white)}
.stock-item-photo{width:36px;height:36px;border-radius:8px;object-fit:cover;flex-shrink:0}
.stock-item-photo-empty{width:36px;height:36px;border-radius:8px;background:var(--color-surface-2);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);flex-shrink:0;font-size:14px}
.stock-item-info{flex:1;min-width:0}
.stock-item-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stock-item-meta{font-size:12px;color:var(--color-text-dim)}
.stock-item-del{flex-shrink:0}
.stock-item-editable{flex-direction:column;align-items:stretch;gap:6px}
.stock-item-header{display:flex;align-items:center;gap:10px}
.stock-item-header .stock-item-name{flex:1;min-width:0}
.stock-item-fields{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px}
.stock-item-field .field-label{font-size:11px;margin-bottom:2px;color:var(--color-text-dim)}
.stock-item-field .control-sm{height:32px;font-size:13px;padding:4px 8px}

/* ==========================================================================
   SHOP LAYER (витрина) — специфичные правила
   ========================================================================== */

/* ==========================================================================
   SHOP (витрина) — отдельные стили
   Самодостаточный файл витрины (включает базовые стили)
   ========================================================================== */

:root{
  /* ==========================================================================
     SHOP (витрина) — токены (переменные)
     Все цвета вынесены сюда. Комментарии — по назначению.
     ========================================================================== */

  /* ===== Бренд (оранжевый) ===== */
  --shop-buy: #f97316;            /* основной акцент: кнопки "Добавить/Оформить", бейджи */
  --shop-buy-hover: #ea580c;      /* hover для акцента */
  --shop-buy-text: #ffffff;       /* текст на акцентных кнопках */
  --shop-buy-glow: rgba(249,115,22,.18); /* мягкая подсветка акцента (ring/glow) */

  /* ===== Базовые нейтрали (используются локально в shop.css) ===== */
  --shop-white: #ffffff;          /* белый (иконки/текст на фото, фон кнопок) */
  --shop-border: #e5e7eb;        /* локальная рамка для иконок в хедере */
  --shop-gray-400: #9ca3af;       /* нейтральные иконки/звёзды "не активно" */
  --shop-amber-500: #f59e0b;      /* звезда "основной адрес" */
  --shop-danger: #ef4444;         /* опасные действия/ошибки (fallback) */

  /* ===== Полупрозрачные (для hover/текста на фото) ===== */
  --shop-shadow-text: rgba(0,0,0,.55);   /* тень текста на фото */
  --shop-hover-dark: rgba(0,0,0,.06);    /* hover на светлой теме */
  --shop-hover-light: rgba(255,255,255,.08); /* hover на тёмной теме */

  /* ===== Геометрия / размеры ===== */
  --shop-radius: 18px;
  --shop-gap: 14px;
  --shop-bottomnav-h: 50px;
  --shop-sheet-top-gap: 8px;
  --shop-sheet-scroll-pad: 200px;
  --shop-footer-height:64px;

  /* ===== Масштабирование UI карточек (container queries) ===== */
  --sp-pad: 12px;
  --sp-title-size: 14px;
  --sp-sub-size: 12px;
  --sp-gap: 8px;
  --sp-pill-h: 32px;
  --sp-pill-side: 44px;

  /* ===== Контрол количества (общие размеры) ===== */
  --qty-pill-h: var(--sp-pill-h);
  --qty-pill-side: var(--sp-pill-side);
}

html[data-theme="dark"]{
  --shop-buy: var(--color-primary);
  --shop-buy-hover: var(--color-primary);
}

/* Тёмная тема витрины: более контрастные подписи категорий */
html[data-theme="dark"] body.page-shop{
  /* можно переиспользовать в будущих местах */
  --shop-category-title-color: var(--color-text);
}

html[data-theme="dark"] body.page-shop .shop-cat-title{
  color: var(--shop-category-title-color, var(--color-text));
}

/* Чипы категорий под хедером (мобильный вид) в тёмной теме */
html[data-theme="dark"] body.page-shop .shop-cat-chip{
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

html[data-theme="dark"] body.page-shop .shop-cat-chip.is-active{
  background: var(--shop-buy);
  border-color: var(--shop-buy);
  color: var(--shop-buy-text);
}

body.page-shop{
  --column-scroll-pad: 400px;
}

/* ==========================================================================
   Layout
   ========================================================================== */

body.page-shop .main-container{
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  padding: 14px;
}

body.page-shop #theme-toggle{
  display: none;
}

body.page-shop .shop-company-chat-btn{
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

body.page-shop .shop-company-chat-unread{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  border: 2px solid var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
  box-sizing: border-box;
}

body.page-shop .shop-company-chat-btn:hover{
  background: var(--color-surface-2);
  color: var(--color-text);
}

body.page-shop .shop-company-chat-btn:focus,
body.page-shop .shop-company-chat-btn:focus-visible,
body.page-shop .shop-company-chat-btn:active{
  outline: none;
  box-shadow: none;
  background: var(--color-surface-2);
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
}

body.page-shop .shop-company-chat-btn > i,
body.page-shop .shop-company-chat-btn > .shop-company-chat-unread{
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}

.shop-company-chat-overlay{
  --shop-chat-mobile-keyboard-inset: 0px;
  --shop-chat-scroll-down-composer-extra: 0px;
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.66);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overscroll-behavior: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.shop-company-chat-overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease;
}

.shop-company-chat-modal{
  width: min(486px, calc(100vw - 40px));
  height: calc(100dvh - 40px);
  max-height: calc(100vh - 40px);
  background: var(--color-surface);
  border-radius: 34px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  transform: translateX(44px);
  opacity: 0.98;
  transition: transform 280ms cubic-bezier(.2,.9,.25,1), opacity 220ms ease;
}

.shop-company-chat-overlay.is-open .shop-company-chat-modal{
  transform: translateX(0);
  opacity: 1;
}

@media (min-width: 769px){
  .shop-company-chat-overlay.is-open .shop-company-chat-modal.is-image-viewer-open{
    transform: none;
  }
}

.shop-company-chat-modal__header{
  min-height: 74px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 0;
}

.shop-company-chat-modal__title{
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.shop-company-chat-modal__close{
  position: absolute;
  right: 14px;
  top: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.shop-company-chat-modal__close:hover{
  color: var(--color-text);
}

.shop-company-chat-modal__back{
  position: absolute;
  left: 14px;
  top: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.shop-company-chat-modal__back:hover{
  color: var(--color-text);
}

.shop-company-chat-order-view{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 16px 14px;
}

.shop-company-chat-order-empty{
  border: 1px dashed var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  padding: 14px 12px;
  text-align: center;
  font-size: 14px;
}

.shop-company-chat-order-view .shop-order-details{
  padding-bottom: 0;
}

.shop-company-chat-order-footer-spacer{
  height: 92px;
}

.shop-company-chat-order-footer{
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: -84px;
  padding: 10px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-surface), transparent 0%) 66%, transparent 100%);
  z-index: 2;
}

.shop-company-chat-order-total-btn{
  flex: 1 1 auto;
  min-width: 0;
}

.shop-company-chat-order-total-btn .shop-checkout-total{
  white-space: nowrap;
}

.shop-company-chat-modal__body{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0;
  overscroll-behavior: contain;
  transition: padding-bottom 280ms cubic-bezier(.22,.76,.24,1);
}

.shop-company-chat-overlay.is-mobile-keyboard-open .shop-company-chat-modal__body{
  transition: padding-bottom 220ms cubic-bezier(.22,.76,.24,1);
}

.shop-company-chat-modal__body .chat-attach-preview-overlay{
  position: fixed;
  inset: 0;
  z-index: 1450;
  padding: 14px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 0;
}

.shop-company-chat-modal__body .chat-attach-preview-card{
  width: min(560px, 100%);
  max-height: 100%;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--color-border), transparent 15%);
  background: var(--color-surface);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.28);
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto auto;
  overflow: hidden;
}

.shop-company-chat-modal__body .chat-attach-preview-head{
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 20%);
}

.shop-company-chat-modal__body .chat-attach-preview-title{
  min-width: 0;
  text-align: left;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-company-chat-modal__body .chat-attach-preview-icon-btn{
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.shop-company-chat-modal__body .chat-attach-preview-icon-btn:hover{
  background: var(--color-surface-2);
  color: var(--color-text);
}

.shop-company-chat-modal__body .chat-attach-preview-media-wrap{
  background: #090b10;
  display: grid;
  place-items: center;
  min-height: 220px;
  max-height: min(58vh, 520px);
}

.shop-company-chat-modal__body .chat-attach-preview-image{
  max-width: 100%;
  max-height: min(58vh, 520px);
  object-fit: contain;
  display: block;
}

.shop-company-chat-modal__body .chat-attach-preview-thumbs{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  border-top: 1px solid color-mix(in srgb, var(--color-border), transparent 20%);
  background: color-mix(in srgb, var(--color-surface), #fff 12%);
}

.shop-company-chat-modal__body .chat-attach-preview-thumb{
  width: 54px;
  height: 54px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
}

.shop-company-chat-modal__body .chat-attach-preview-thumb.is-active{
  border-color: var(--color-primary);
}

.shop-company-chat-modal__body .chat-attach-preview-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-company-chat-modal__body .chat-attach-preview-foot{
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
}

.shop-company-chat-modal__body .chat-attach-preview-caption{
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--color-border), transparent 8%);
  border-radius: 12px;
  padding: 0 12px;
  font-size: 17px;
  line-height: 1;
  color: var(--color-text);
  background: var(--color-surface-2);
  outline: none;
}

.shop-company-chat-modal__body .chat-attach-preview-caption:focus{
  border-color: color-mix(in srgb, var(--color-primary), transparent 45%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary), transparent 82%);
}

.shop-company-chat-modal__body .chat-attach-preview-send{
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: #3b82f6;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2px;
  cursor: pointer;
}

.shop-company-chat-modal__body .chat-attach-preview-send:hover{
  background: #2563eb;
}

.shop-company-chat-modal__body .chat-attach-preview-send:disabled,
.shop-company-chat-modal__body .chat-attach-preview-caption:disabled,
.shop-company-chat-modal__body .chat-attach-preview-icon-btn:disabled{
  opacity: .6;
  cursor: default;
}

.shop-company-chat-modal__body .chat-image-viewer-overlay{
  position: fixed;
  inset: 0;
  z-index: 1452;
  padding: 14px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.shop-company-chat-modal__body .chat-image-viewer-card{
  width: min(var(--chat-image-viewer-max-width, 96vw), 1080px);
  height: min(var(--chat-image-viewer-max-height, 88vh), 820px);
  position: relative;
  display: grid;
  place-items: center;
}

.shop-company-chat-modal__body .chat-image-viewer-image{
  max-width: min(var(--chat-image-viewer-target-width, 100%), 100%);
  max-height: min(var(--chat-image-viewer-target-height, 100%), 100%);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  background: #090b10;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.28);
}

.shop-company-chat-modal__body .chat-image-viewer-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1;
}

.shop-company-chat-modal__body .chat-image-viewer-close:hover{
  background: #fff;
}

.shop-company-chat-delete-confirm-overlay{
  position: absolute !important;
  inset: 0;
  z-index: 1400 !important;
  padding: 14px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(2px);
  border-radius: 0 0 34px 34px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.shop-company-chat-delete-confirm-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-card{
  width: min(92%, 372px);
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-border), transparent 6%);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.24);
  padding: 18px 18px 14px;
  transform: translateY(8px) scale(.98);
  transition: transform .16s ease;
}

.shop-company-chat-delete-confirm-overlay.is-open .chat-delete-confirm-card{
  transform: translateY(0) scale(1);
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-title{
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-text{
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.32;
  color: var(--color-text);
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-check{
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-checkbox{
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid color-mix(in srgb, var(--color-primary), #fff 62%);
  background: var(--color-surface);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-checkbox::after{
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease;
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-checkbox:checked{
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-checkbox:checked::after{
  transform: rotate(45deg) scale(1);
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-check-text{
  font-size: 15px;
  line-height: 1.24;
  color: var(--color-text);
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-actions{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-btn{
  border: 1px solid color-mix(in srgb, var(--color-border), transparent 8%);
  background: var(--color-surface-2);
  color: var(--color-text);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-btn--cancel{
  color: var(--color-text-muted);
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-btn--danger{
  color: #ef4444;
  border-color: color-mix(in srgb, #ef4444, transparent 70%);
  background: color-mix(in srgb, #ef4444, transparent 92%);
}

.shop-company-chat-delete-confirm-overlay .chat-delete-confirm-btn:hover{
  filter: brightness(.98);
}

@media (max-width: 768px){
  .shop-company-chat-delete-confirm-overlay{
    padding: 10px;
  }

  .shop-company-chat-delete-confirm-overlay .chat-delete-confirm-card{
    width: min(96%, 360px);
    border-radius: 18px;
    padding: 16px 14px 12px;
  }
}

.shop-company-chat-feed{
  flex: 1;
  min-height: 0;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 10px 16px 14px;
  scroll-padding-top: 12px;
  scrollbar-gutter: stable;
}

.shop-company-chat-modal__body.is-bootstrap-loading .shop-company-chat-thread{
  opacity: 0;
}

.shop-company-chat-modal__body.is-bootstrap-loading .shop-company-chat-feed{
  overflow: hidden;
}

.shop-company-chat-modal__body.is-bootstrap-loading .shop-company-chat-scroll-down{
  opacity: 0;
  pointer-events: none;
}

.shop-company-chat-bootstrap-loader{
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #fff;
}

.shop-company-chat-bootstrap-loader.hidden{
  display: none;
}

.shop-company-chat-bootstrap-loader__stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.shop-company-chat-bootstrap-loader__logo{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
}

.shop-company-chat-bootstrap-loader__track{
  width: 48px;
  height: 3px;
  background: #eee;
  border-radius: 999px;
  overflow: hidden;
}

.shop-company-chat-bootstrap-loader__fill{
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: #f60;
  animation: shop-company-chat-splash-bar 1.2s ease-in-out infinite;
}

@keyframes shop-company-chat-splash-bar{
  0%{ transform: translateX(-100%); }
  50%{ transform: translateX(150%); }
  100%{ transform: translateX(-100%); }
}

.shop-company-chat-permission-prompt{
  position: absolute;
  inset: 0;
  z-index: 18;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(15, 23, 42, .34);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.shop-company-chat-permission-prompt__card{
  position: relative;
  width: min(92%, 348px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--color-border), transparent 14%);
  background: color-mix(in srgb, #fff, var(--color-surface) 8%);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
}

.shop-company-chat-permission-prompt.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.shop-company-chat-permission-prompt__close{
  position: absolute;
  right: 8px;
  top: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #71717a;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.shop-company-chat-permission-prompt__text{
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-text);
  padding-right: 22px;
}

.shop-company-chat-permission-prompt__allow{
  min-height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #f60;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.shop-company-chat-permission-prompt__allow:hover{
  background: #ea580c;
}

.shop-company-chat-feed:focus{
  outline: none;
}

.shop-company-chat-feed.is-image-drop-target::before{
  content:"\041F\0435\0440\0435\0442\0430\0449\0438\0442\0435\0020\0438\0437\043E\0431\0440\0430\0436\0435\043D\0438\044F\0020\0441\044E\0434\0430\A\0414\043B\044F\0020\0431\044B\0441\0442\0440\043E\0439\0020\043E\0442\043F\0440\0430\0432\043A\0438";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 44px));
  min-height: 164px;
  padding: 22px 18px;
  box-sizing: border-box;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: pre-line;
  font-size: 19px;
  line-height: 1.28;
  font-weight: 700;
  color: color-mix(in srgb, var(--shop-buy), #1e293b 22%);
  border: 2px dashed color-mix(in srgb, var(--shop-buy), #fff 20%);
  border-radius: 20px;
  background: color-mix(in srgb, var(--shop-buy), transparent 84%);
  pointer-events: none;
}

.shop-company-chat-thread{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}

.shop-company-chat-day{
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin: 2px 0 4px;
}

.shop-company-chat-welcome{
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin: 2px 0 6px;
}

.shop-company-chat-row{
  display: flex;
  align-items: flex-end;
  gap: 8px;
  position: relative;
  transition: transform .15s ease;
  -webkit-touch-callout: none;
}

.shop-company-chat-row *{
  -webkit-touch-callout: none;
}

.shop-company-chat-row.is-agent{
  justify-content: flex-start;
}

.shop-company-chat-row.is-user{
  justify-content: flex-end;
}

.shop-company-chat-bubble{
  width: fit-content;
  max-width: min(86%, 360px);
  padding: 12px 14px 8px;
  border-radius: 18px;
  background: var(--color-surface-2);
  color: var(--color-text);
  box-shadow: none;
  position: relative;
  transition: transform 160ms cubic-bezier(.2,.8,.25,1);
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.shop-company-chat-row.is-user .shop-company-chat-bubble{
  background: #5f6167;
  color: #ffffff;
  border-bottom-right-radius: 0;
}

.shop-company-chat-row.is-agent .shop-company-chat-bubble{
  border-bottom-left-radius: 0;
}

.shop-company-chat-row.is-selected .shop-company-chat-bubble{
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, .24),
    0 2px 8px rgba(15, 23, 42, .05);
}

.shop-company-chat-row.is-selected{
  transform: translateY(-1px);
}

.shop-company-chat-select-badge{
  position: absolute;
  left: -30px;
  bottom: 8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .95);
  background: rgba(255, 255, 255, .25);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}

.shop-company-chat-row.is-selection-mode .shop-company-chat-select-badge{
  display: inline-flex;
}

.shop-company-chat-row.is-selection-mode .shop-company-chat-select-badge i{
  opacity: 0;
}

.shop-company-chat-row.is-selected .shop-company-chat-select-badge{
  background: #22c55e;
  border-color: #fff;
}

.shop-company-chat-row.is-selected .shop-company-chat-select-badge i{
  opacity: 1;
}

.shop-company-chat-author{
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  color: #8f8f95;
  margin-bottom: 3px;
}

/* Keep author label readable above image-only bubbles */
.shop-company-chat-bubble.has-attachment-only .shop-company-chat-author{
  display: block;
  margin: 0;
  padding: 7px 10px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-company-chat-row.is-user .shop-company-chat-bubble.has-attachment-only .shop-company-chat-author{
  color: rgba(255, 255, 255, 0.9);
}

.shop-company-chat-reply-snippet{
  margin-bottom: 8px;
  border-radius: 10px;
  border-left: 3px solid #7c6bff;
  padding: 6px 8px;
  padding-right: 72px;
  background: rgba(124, 107, 255, 0.12);
  max-width: 100%;
}

.shop-company-chat-row.is-edited .shop-company-chat-text,
.shop-company-chat-row.is-edited .shop-company-chat-reply-snippet{
  padding-right: 104px;
}

.shop-company-chat-row.is-agent .shop-company-chat-text,
.shop-company-chat-row.is-agent .shop-company-chat-reply-snippet{
  padding-right: 46px;
}

.shop-company-chat-row.is-agent.is-edited .shop-company-chat-text,
.shop-company-chat-row.is-agent.is-edited .shop-company-chat-reply-snippet{
  padding-right: 78px;
}

.shop-company-chat-row.is-user .shop-company-chat-text,
.shop-company-chat-row.is-user .shop-company-chat-reply-snippet{
  padding-right: 88px;
}

.shop-company-chat-row.is-user.is-edited .shop-company-chat-text,
.shop-company-chat-row.is-user.is-edited .shop-company-chat-reply-snippet{
  padding-right: 120px;
}

.shop-company-chat-reply-snippet[data-reply-jump-id]{
  cursor: pointer;
}

.shop-company-chat-row.is-user .shop-company-chat-reply-snippet{
  border-left-color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.15);
}

.shop-company-chat-reply-name{
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  color: #7c6bff;
  margin-bottom: 2px;
}

.shop-company-chat-row.is-user .shop-company-chat-reply-name{
  color: #ffffff;
}

.shop-company-chat-reply-line{
  font-size: 13px;
  line-height: 1.2;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-company-chat-row.is-user .shop-company-chat-reply-line{
  color: rgba(255, 255, 255, 0.92);
}

.shop-company-chat-row.is-reply-highlight .shop-company-chat-bubble{
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--color-primary), transparent 62%),
    0 12px 24px rgba(15, 23, 42, 0.14);
}

.shop-company-chat-text{
  font-size: 16px;
  line-height: 1.35;
  white-space: pre-line;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding-right: 72px;
}

.shop-company-chat-bubble--order-card{
  width: min(92%, 380px);
}

.shop-company-chat-bubble--order-card .shop-company-chat-text{
  padding-right: 0;
}

.shop-company-chat-bubble--order-card .shop-company-chat-meta{
  position: static;
  margin-top: 8px;
  margin-left: auto;
  display: flex;
  width: max-content;
  justify-content: flex-end;
}

.shop-company-chat-order-card-strip{
  margin-top: 10px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  cursor: grab;
}

.shop-company-chat-order-card-strip::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.shop-company-chat-order-card-strip.is-mouse-dragging{
  cursor: grabbing;
  user-select: none;
}

.shop-company-chat-order-card-strip.is-mouse-dragging *{
  user-select: none;
}

.shop-company-chat-order-card{
  display: grid;
  gap: 4px;
  margin-top: 0;
  width: 184px;
  min-width: 184px;
  max-width: 184px;
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  padding: 8px 9px;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
}

.shop-company-chat-order-card:hover{
  border-color: color-mix(in srgb, var(--shop-buy), var(--color-border) 60%);
  background: color-mix(in srgb, var(--color-surface), var(--shop-buy) 3%);
}

.shop-company-chat-order-card:disabled{
  cursor: default;
  opacity: .7;
}

.shop-company-chat-order-card__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shop-company-chat-order-card__title{
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.shop-company-chat-order-card__status{
  font-size: 11px;
  color: var(--shop-buy);
  font-weight: 700;
  text-align: right;
}

.shop-company-chat-order-card__meta{
  font-size: 11px;
  color: var(--color-text-muted);
}

.shop-company-chat-order-card__total{
  font-size: 16px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--color-text);
}

.shop-company-chat-order-card__photos{
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.shop-company-chat-order-card__photos::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.shop-company-chat-order-card__photo{
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  object-fit: cover;
  background: var(--color-surface-2);
}

.shop-company-chat-attachment{
  position: relative;
  max-width: min(214px, 48vw) !important;
  border-radius: 12px;
  overflow: hidden;
}

.shop-company-chat-attachment-image{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: zoom-in;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.shop-company-chat-time{
  text-align: right;
  font-size: 12px;
  line-height: 1;
  color: #a5a5ab;
}

.shop-company-chat-meta{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  right: 10px;
  bottom: 8px;
  justify-content: flex-end;
  min-height: 0;
  line-height: 1;
}

.shop-company-chat-bubble.has-attachment .shop-company-chat-meta{
  right: 8px;
  bottom: 6px;
  border-radius: 999px;
  padding: 2px 6px;
  background: rgba(15, 23, 42, 0.24);
  backdrop-filter: blur(2px);
}

.shop-company-chat-bubble.has-attachment-only{
  padding: 4px;
}

.shop-company-chat-row.is-user .shop-company-chat-bubble.has-attachment-only{
  padding: 0;
  overflow: hidden;
}

.shop-company-chat-row.is-user .shop-company-chat-bubble.has-attachment-only.has-reaction{
  overflow: visible;
}

.shop-company-chat-row.is-user .shop-company-chat-bubble.has-attachment-only .shop-company-chat-attachment{
  border-radius: inherit;
}

.shop-company-chat-row.is-agent .shop-company-chat-bubble.has-attachment-only{
  padding: 0;
  overflow: hidden;
}

.shop-company-chat-row.is-agent .shop-company-chat-bubble.has-attachment-only.has-reaction{
  overflow: visible;
}

.shop-company-chat-row.is-agent .shop-company-chat-bubble.has-attachment-only .shop-company-chat-attachment{
  border-radius: inherit;
}

.shop-company-chat-status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 16px;
  line-height: 1;
  color: #a5a5ab;
  transform: none;
}

.shop-company-chat-status-icon{
  width: 22px;
  height: 16px;
  display: block;
}

.shop-company-chat-status-icon path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shop-company-chat-status--sent,
.shop-company-chat-status--delivered{
  color: #a5a5ab;
}

.shop-company-chat-status--read{
  color: #38bdf8;
}

.shop-company-chat-row.is-user .shop-company-chat-time{
  color: rgba(255, 255, 255, 0.75);
}

.shop-company-chat-reaction-pill{
  margin: 0;
  position: static;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  min-height: 26px;
  min-width: 26px;
  padding: 0 2px;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 1;
}

.shop-company-chat-reaction-pill:focus,
.shop-company-chat-reaction-pill:focus-visible{
  outline: none;
  box-shadow: none;
}

.shop-company-chat-reaction-pill:active{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.shop-company-chat-reaction-pill.is-reaction-pop{
  animation: shop-company-chat-reaction-pill-pop 240ms cubic-bezier(.18,.88,.24,1.18) both;
  animation-delay: var(--reaction-pop-delay, 0ms);
}

.shop-company-chat-reactions{
  position: absolute;
  right: auto;
  left: auto;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  max-width: none;
}

.shop-company-chat-row.is-user .shop-company-chat-reactions{
  right: calc(100% + 6px) !important;
  left: auto !important;
  flex-direction: row-reverse;
}

.shop-company-chat-row.is-agent .shop-company-chat-reactions{
  left: calc(100% + 6px) !important;
  right: auto !important;
  flex-direction: row;
}

.shop-company-chat-row.is-agent .shop-company-chat-reaction-pill + .shop-company-chat-reaction-pill{
  margin-left: -9px;
}

.shop-company-chat-row.is-user .shop-company-chat-reaction-pill + .shop-company-chat-reaction-pill{
  margin-right: -9px;
}

@keyframes shop-company-chat-reaction-pill-pop{
  0%{
    opacity: 0;
    transform: translateY(8px) scale(.7);
  }
  68%{
    opacity: 1;
    transform: translateY(-2px) scale(1.12);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce){
  .shop-company-chat-reaction-pill.is-reaction-pop{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.shop-company-chat-bubble.is-emoji-only{
  background: transparent !important;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.shop-company-chat-bubble.is-emoji-only .shop-company-chat-text{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.05;
  padding-right: 0;
}

.shop-company-chat-bubble.is-emoji-only-single .shop-company-chat-text{
  font-size: 76px;
  line-height: 1;
}

.shop-company-chat-bubble.is-emoji-only-few .shop-company-chat-text{
  font-size: 62px;
  line-height: 1;
}

.shop-company-chat-bubble.is-emoji-only-many .shop-company-chat-text{
  font-size: 52px;
  line-height: 1;
}

.shop-company-chat-bubble.is-emoji-only .shop-company-chat-meta{
  position: static;
  display: flex;
  width: max-content;
  margin-top: 4px;
  margin-left: auto;
  justify-content: flex-end;
  min-height: 14px;
}

.shop-company-chat-bubble.is-emoji-only .shop-company-chat-time{
  color: #a5a5ab;
}

.shop-company-chat-row.is-user .shop-company-chat-bubble.is-emoji-only .shop-company-chat-status--sent,
.shop-company-chat-row.is-user .shop-company-chat-bubble.is-emoji-only .shop-company-chat-status--delivered{
  color: #a5a5ab;
}

.shop-company-chat-row.is-user .shop-company-chat-bubble.is-emoji-only .shop-company-chat-status--read{
  color: #38bdf8;
}

.shop-company-chat-bubble.is-emoji-only-single .shop-company-chat-emoji-glyph--inline{
  width: 76px;
  height: 76px;
  margin: 0 1px;
  vertical-align: 0;
}

.shop-company-chat-bubble.is-emoji-only-few .shop-company-chat-emoji-glyph--inline{
  width: 62px;
  height: 62px;
  margin: 0 1px;
  vertical-align: 0;
}

.shop-company-chat-bubble.is-emoji-only-many .shop-company-chat-emoji-glyph--inline{
  width: 52px;
  height: 52px;
  margin: 0 1px;
  vertical-align: 0;
}

.shop-company-chat-bubble--options{
  width: min(90%, 360px);
}

.shop-company-chat-quick{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.shop-company-chat-quick__btn{
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  color: #2f3137;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.shop-company-chat-quick__btn:hover{
  background: #f8f8f9;
}

.shop-company-chat-context-menu{
  position: fixed;
  min-width: 246px;
  background: color-mix(in srgb, var(--color-surface), #fff 30%);
  border: 1px solid color-mix(in srgb, var(--color-border), transparent 8%);
  border-radius: 28px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 10px 12px;
  z-index: 1310;
  display: grid;
  gap: 2px;
}

.shop-company-chat-context-menu:not(.hidden){
  animation: shop-company-chat-context-pop .24s cubic-bezier(.22,.76,.24,1);
}

@keyframes shop-company-chat-context-pop{
  from{
    opacity: 0;
    transform: translateY(10px) scale(.95);
  }
  72%{
    opacity: 1;
    transform: translateY(-1px) scale(1.01);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shop-company-chat-context-reactions-expand{
  from{
    opacity: .92;
    transform: translateY(-2px) scale(.985);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shop-company-chat-context-extra-in{
  from{
    opacity: 0;
    transform: translateY(6px) scale(.72);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.shop-company-chat-context-reactions{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px;
  padding: 2px;
  overflow: hidden;
}

.shop-company-chat-context-reaction{
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 17px;
  transition: transform var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
}

.shop-company-chat-context-reaction:hover{
  transform: scale(1.08);
  opacity: .92;
}

.shop-company-chat-context-reaction--extra{
  display: none;
}

.shop-company-chat-context-menu.is-reactions-expanded .shop-company-chat-context-reaction--extra{
  display: inline-flex;
}

.shop-company-chat-context-menu.is-reactions-expanded .shop-company-chat-context-reactions{
  display: grid;
  grid-template-columns: repeat(8, 24px);
  justify-content: start;
  align-content: start;
  gap: 3px;
  width: min(228px, calc(100vw - 36px));
  max-height: min(40vh, 216px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-border), transparent 12%) transparent;
  animation: shop-company-chat-context-reactions-expand .2s cubic-bezier(.22,.76,.24,1);
}

.shop-company-chat-context-reaction--toggle{
  margin-left: 0;
  color: #6b7280;
  background: color-mix(in srgb, var(--color-surface-2), #cbd5e1 22%);
  border: 1px solid color-mix(in srgb, var(--color-border), transparent 10%);
  border-radius: 999px;
}

.shop-company-chat-context-reaction--toggle i{
  pointer-events: none;
  transition: transform var(--dur-fast) var(--ease-smooth);
}

.shop-company-chat-context-menu.is-reactions-expanded .shop-company-chat-context-reaction--toggle i{
  transform: rotate(180deg);
}

.shop-company-chat-context-reaction[data-chat-msg-reaction-slot="quick"]{
  order: 1;
}

.shop-company-chat-context-reaction--toggle{
  order: 2;
}

.shop-company-chat-context-reaction--extra{
  order: 3;
}

.shop-company-chat-context-menu.is-reactions-expanded .shop-company-chat-context-reaction--extra,
.shop-company-chat-context-menu.is-reactions-expanded .shop-company-chat-context-reaction[data-chat-msg-reaction-slot="extra-all"]{
  animation: shop-company-chat-context-extra-in .18s cubic-bezier(.2,.88,.28,1) both;
  transform-origin: center;
  will-change: transform, opacity;
}

.shop-company-chat-context-menu.is-reactions-expanded .shop-company-chat-context-reactions::-webkit-scrollbar{
  width: 6px;
}

.shop-company-chat-context-menu.is-reactions-expanded .shop-company-chat-context-reactions::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--color-border), transparent 12%);
  border-radius: 999px;
}

.shop-company-chat-context-btn{
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 14px;
  min-height: 46px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}

.shop-company-chat-context-btn i{
  width: 22px;
  text-align: center;
  font-size: 20px;
  color: inherit;
}

.shop-company-chat-context-btn span{
  flex: 1;
}

.shop-company-chat-context-btn:hover{
  background: var(--color-surface-2);
  border-color: color-mix(in srgb, var(--color-border), transparent 20%);
}

.shop-company-chat-context-btn.is-danger{
  color: #dc2626;
}

.shop-company-chat-context-divider{
  height: 1px;
  background: color-mix(in srgb, var(--color-border), transparent 15%);
  margin: 8px 4px;
}

.shop-company-chat-scroll-down{
  position: absolute;
  right: 22px;
  bottom: calc(128px + var(--shop-chat-scroll-down-composer-extra));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  filter: blur(0);
  will-change: transform, opacity, filter;
  transition:
    bottom 280ms cubic-bezier(.22,.76,.24,1),
    opacity 260ms cubic-bezier(.22,.61,.36,1),
    transform 280ms cubic-bezier(.22,.61,.36,1),
    filter 260ms cubic-bezier(.22,.61,.36,1);
}

.shop-company-chat-scroll-down.hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateY(30px) scale(.82);
  filter: blur(2px);
  animation: shop-company-chat-scroll-down-hide 240ms cubic-bezier(.4,0,.2,1) both;
}

.shop-company-chat-scroll-down:not(.hidden){
  animation: shop-company-chat-scroll-down-rise 320ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes shop-company-chat-scroll-down-rise{
  0%{
    opacity: 0;
    transform: translateY(34px) scale(.72);
    filter: blur(2px);
  }
  70%{
    opacity: 1;
    transform: translateY(-4px) scale(1.06);
    filter: blur(0);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes shop-company-chat-scroll-down-hide{
  0%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100%{
    opacity: 0;
    transform: translateY(30px) scale(.82);
    filter: blur(2px);
  }
}

.shop-company-chat-typing-row{
  justify-content: flex-start;
}

.shop-company-chat-typing-row.is-hidden{
  display: none;
}

.shop-company-chat-typing-indicator{
  width: fit-content;
  max-width: min(86%, 360px);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  min-height: 20px;
  padding-left: 14px;
  padding-right: 14px;
  display: inline-flex;
  align-items: center;
  pointer-events: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

.shop-company-chat-typing-indicator::after{
  content: "";
  display: inline-block;
  min-width: 1.8em;
  margin-left: 2px;
  text-align: left;
  animation: shop-company-chat-typing-indicator-dots 1.1s steps(1, end) infinite;
}

.shop-company-chat-typing-row.is-hidden .shop-company-chat-typing-indicator::after{
  content: "";
  animation: none;
}

@keyframes shop-company-chat-typing-indicator-dots{
  0%, 20%{ content: ""; }
  40%{ content: "."; }
  60%{ content: ".."; }
  80%, 100%{ content: "..."; }
}

.shop-company-chat-scroll-down-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  border: 2px solid var(--color-surface);
  background: #22c55e;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  box-sizing: border-box;
}

.shop-company-chat-scroll-down-badge.is-count-tick{
  animation: shop-company-chat-scroll-down-badge-tick 180ms cubic-bezier(.2,.8,.2,1);
}

@keyframes shop-company-chat-scroll-down-badge-tick{
  0%{ transform: scale(.72); }
  62%{ transform: scale(1.14); }
  100%{ transform: scale(1); }
}

.shop-company-chat-scroll-down-badge.hidden{
  display: none;
}

.shop-company-chat-reaction-bar{
  position: fixed;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  max-width: min(250px, calc(100vw - 16px));
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-border), transparent 22%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-surface), #fff 42%),
      color-mix(in srgb, var(--color-surface-2), #fff 26%)
    );
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  z-index: 1300;
}

.shop-company-chat-reaction-btn.shop-company-chat-reaction-extra{
  display: none;
}

.shop-company-chat-reaction-bar.is-expanded .shop-company-chat-reaction-btn.shop-company-chat-reaction-extra{
  display: grid;
}

.shop-company-chat-reaction-bar.is-expanded{
  display: grid;
  grid-template-columns: repeat(8, 24px);
  justify-content: start;
  align-content: start;
  gap: 3px;
  width: min(228px, calc(100vw - 16px));
  max-height: min(44vh, 236px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 14px;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-border), transparent 12%) transparent;
}

.shop-company-chat-reaction-btn{
  width: 24px;
  height: 24px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: none;
  transition:
    opacity var(--dur-fast) var(--ease-smooth),
    transform var(--dur-fast) var(--ease-smooth);
}

.shop-company-chat-reaction-btn:focus,
.shop-company-chat-reaction-btn:focus-visible{
  outline: none;
  box-shadow: none;
}

.shop-company-chat-reaction-btn:hover{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  opacity: .92;
  transform: scale(1.08);
}

.shop-company-chat-reaction-btn.is-active{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: scale(1.08);
}

.shop-company-chat-reaction-close{
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  cursor: pointer;
  box-shadow: none;
  transition:
    opacity var(--dur-fast) var(--ease-smooth),
    transform var(--dur-fast) var(--ease-smooth);
}

.shop-company-chat-reaction-close:hover{
  color: var(--color-text);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: .92;
  transform: scale(1.08);
}

.shop-company-chat-reaction-more i{
  transition: transform var(--dur-fast) var(--ease-smooth);
}

.shop-company-chat-reaction-bar.is-expanded .shop-company-chat-reaction-more i{
  transform: rotate(180deg);
}

.shop-company-chat-reaction-more{
  color: #6b7280;
  background: color-mix(in srgb, var(--color-surface-2), #cbd5e1 22%);
  border: 1px solid color-mix(in srgb, var(--color-border), transparent 10%);
  border-radius: 999px;
}

.shop-company-chat-reaction-btn[data-reaction-slot="quick"]{
  order: 1;
}

.shop-company-chat-reaction-more{
  order: 2;
}

.shop-company-chat-reaction-btn.shop-company-chat-reaction-extra{
  order: 3;
}

.shop-company-chat-reaction-bar.is-expanded::-webkit-scrollbar{
  width: 6px;
}

.shop-company-chat-reaction-bar.is-expanded::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--color-border), transparent 12%);
  border-radius: 999px;
}

.shop-company-chat-reaction-bar:not(.hidden){
  animation: shop-company-chat-reaction-pop .24s cubic-bezier(.22,.76,.24,1);
}

.shop-company-chat-reaction-bar.is-expanded{
  animation: shop-company-chat-reaction-expand .22s cubic-bezier(.22,.76,.24,1);
}

.shop-company-chat-reaction-bar.is-expanded .shop-company-chat-reaction-btn.shop-company-chat-reaction-extra,
.shop-company-chat-reaction-bar.is-expanded .shop-company-chat-reaction-btn[data-reaction-slot="extra-all"]{
  animation: shop-company-chat-reaction-extra-in .18s cubic-bezier(.2,.88,.28,1) both;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes shop-company-chat-reaction-pop{
  from{
    opacity: 0;
    transform: translateY(10px) scale(.93);
  }
  72%{
    opacity: 1;
    transform: translateY(-1px) scale(1.01);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shop-company-chat-reaction-expand{
  from{
    opacity: .72;
    transform: translateY(4px) scale(.97);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shop-company-chat-reaction-extra-in{
  from{
    opacity: 0;
    transform: translateY(6px) scale(.72);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.shop-company-chat-emoji-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.shop-company-chat-emoji-popover{
  position: absolute;
  bottom: 46px;
  right: 0;
  left: auto;
  width: 298px;
  max-height: 352px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px;
  z-index: 20;
}

.shop-company-chat-emoji-popover.is-mobile-sheet{
  position: fixed;
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  bottom: calc(8px + env(safe-area-inset-bottom));
  width: auto;
  height: clamp(220px, 41vh, 290px);
  max-height: clamp(220px, 41vh, 290px);
  min-height: 220px;
  border-radius: 18px;
  padding: 8px 10px 10px;
  z-index: 1705;
  animation: shop-company-chat-emoji-sheet-up .26s cubic-bezier(.22,.76,.24,1);
}

.shop-company-chat-emoji-popover.is-mobile-sheet::before{
  content: "";
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text-muted), transparent 40%);
  margin: 1px auto 8px;
  flex-shrink: 0;
}

.shop-company-chat-emoji-popover.is-attach-preview{
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 1700;
}

.shop-company-chat-emoji-popover.is-mobile-sheet.is-attach-preview{
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  bottom: calc(8px + env(safe-area-inset-bottom));
  transform: none;
}

.shop-company-chat-emoji-categories{
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 7px;
}

.shop-company-chat-emoji-category-btn{
  height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 15px;
  cursor: pointer;
}

.shop-company-chat-emoji-category-btn:hover{
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

.shop-company-chat-emoji-category-btn.is-active{
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

.shop-company-chat-emoji-category-btn.is-disabled{
  opacity: .35;
  cursor: default;
}

.shop-company-chat-emoji-category-btn.is-disabled:hover{
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
}

.shop-company-chat-emoji-body{
  margin-top: 6px;
  min-height: 170px;
  max-height: 272px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.shop-company-chat-emoji-popover.is-mobile-sheet .shop-company-chat-emoji-body{
  margin-top: 8px;
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.shop-company-chat-emoji-body::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.shop-company-chat-emoji-title{
  font-size: 12px;
  line-height: 1.2;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.shop-company-chat-emoji-section + .shop-company-chat-emoji-section{
  margin-top: 10px;
}

.shop-company-chat-emoji-popover.is-mobile-sheet .shop-company-chat-emoji-section{
  width: max-content;
  min-width: max-content;
  max-width: none;
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.shop-company-chat-emoji-popover.is-mobile-sheet .shop-company-chat-emoji-section + .shop-company-chat-emoji-section{
  margin-left: 0;
  margin-top: 0;
}

.shop-company-chat-emoji-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.shop-company-chat-emoji-popover.is-mobile-sheet .shop-company-chat-emoji-grid{
  flex: 0 0 auto;
  min-height: auto;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 40px);
  grid-auto-columns: 40px;
  justify-content: start;
  align-content: start;
  width: max-content;
  overflow: hidden;
  gap: 6px;
  padding-top: 2px;
  padding-bottom: 8px;
}

.shop-company-chat-emoji-empty{
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 12px;
}

.shop-company-chat-emoji-btn{
  width: 100%;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-company-chat-emoji-popover.is-mobile-sheet .shop-company-chat-emoji-btn{
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 10px;
}

.shop-company-chat-emoji-glyph{
  display: block;
  width: 24px;
  height: 24px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-variant-emoji: emoji;
  line-height: 1;
  white-space: nowrap;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
  margin: 0 auto;
}

.shop-company-chat-emoji-glyph--picker{
  width: 24px;
  height: 24px;
}

.shop-company-chat-emoji-glyph--reaction{
  width: 21px;
  height: 21px;
  display: block;
  overflow: visible;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.shop-company-chat-emoji-glyph--pill{
  width: 26px;
  height: 26px;
  display: block;
  border-radius: 999px;
  background-color: transparent !important;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.shop-company-chat-emoji-glyph--composer{
  width: 30px;
  height: 30px;
}

.shop-company-chat-emoji-glyph--composer-inline{
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0 1px;
  vertical-align: -0.14em;
}

.shop-company-chat-emoji-glyph--input-inline{
  display: inline-block;
  width: 1.22em;
  height: 1.22em;
  margin: 0 .04em;
  vertical-align: -0.14em;
}

.shop-company-chat-emoji-glyph--preview{
  display: inline-block;
  width: 1.12em;
  height: 1.12em;
  margin: 0 .02em;
  vertical-align: -0.12em;
}

.shop-company-chat-emoji-glyph--inline{
  display: inline-block;
  width: 1.22em;
  height: 1.22em;
  margin: 0 .04em;
  vertical-align: -0.16em;
}

.shop-company-chat-composer__btn.has-emoji-content{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.shop-company-chat-input-rich-wrap{
  flex: 1;
  min-width: 0;
  min-height: 38px;
  max-height: 160px;
  position: relative;
  display: block;
}

.shop-company-chat-input-rich-wrap .shop-company-chat-composer__input{
  width: 100%;
  min-height: 38px;
  max-height: 160px;
  position: relative;
  z-index: 2;
}

.shop-company-chat-input-rich-preview{
  position: absolute;
  inset: 0;
  padding: 9px 0 8px;
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.25;
}

.shop-company-chat-composer__input.is-rich-emoji-preview{
  color: transparent;
  caret-color: var(--color-text);
}

.shop-company-chat-emoji-btn:hover{
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

@keyframes shop-company-chat-emoji-sheet-up{
  from{
    opacity: 0;
    transform: translateY(12px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.shop-company-chat-composer{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin: 0 14px 14px;
  min-height: 58px;
  border-radius: 14px;
  border: 0;
  background: var(--color-surface-2);
  padding: 8px 10px;
}

.shop-company-chat-selection-toolbar{
  margin: 0 14px 14px;
  min-height: 58px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--color-border), transparent 5%);
  background: color-mix(in srgb, var(--color-surface), #fff 20%);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

.shop-company-chat-selection-close{
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.shop-company-chat-selection-close:hover{
  background: var(--color-surface-2);
  color: var(--color-text);
}

.shop-company-chat-selection-count{
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-company-chat-selection-actions{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop-company-chat-selection-action{
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.shop-company-chat-selection-action:hover{
  background: var(--color-surface-2);
  color: var(--color-text);
}

.shop-company-chat-selection-action.is-danger{
  color: #ef4444;
}

.shop-company-chat-selection-action.is-danger:hover{
  background: rgba(239, 68, 68, 0.1);
}

.shop-company-chat-modal__body.is-selection-mode .shop-company-chat-composer{
  display: none;
}

.shop-company-chat-modal__body.is-selection-mode .shop-company-chat-thread{
  padding-left: 30px;
}

.shop-company-chat-modal__body.is-selection-mode .shop-company-chat-selection-toolbar{
  display: flex;
}

.shop-company-chat-composer-reply{
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--color-border), transparent 8%);
  background: color-mix(in srgb, var(--color-surface), #fff 18%);
  padding: 6px 8px;
  min-height: 44px;
}

.shop-company-chat-composer-reply__bar{
  width: 3px;
  align-self: stretch;
  border-radius: 999px;
  background: var(--color-primary);
  opacity: .9;
}

.shop-company-chat-composer-reply__content{
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.shop-company-chat-composer-reply__name{
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-primary);
}

.shop-company-chat-composer-reply__text{
  font-size: 13px;
  line-height: 1.2;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-company-chat-composer-reply__close{
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.shop-company-chat-composer-reply__close:hover{
  color: var(--color-text);
}

.shop-company-chat-bubble.is-swipe-active{
  transition: none;
}

.shop-company-chat-bubble.is-swipe-returning{
  transition: transform 160ms cubic-bezier(.2,.8,.25,1);
}

.shop-company-chat-composer__btn{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  flex-shrink: 0;
}

.shop-company-chat-composer__btn:hover{
  color: var(--color-text);
}

.shop-company-chat-composer__btn--send{
  color: var(--shop-buy);
}

.shop-company-chat-composer__btn--send:hover{
  color: var(--shop-buy-hover);
}

.shop-company-chat-composer__input{
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  max-height: 160px;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 9px 0 8px;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.25;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  resize: none;
  overflow-x: hidden;
  overflow-y: hidden;
}

.shop-company-chat-composer__input::placeholder{
  text-align: left;
  line-height: 1.45;
  transform: translateY(2px);
  color: var(--color-text-muted);
}

body.page-shop.shop-company-chat-open{
  overflow: hidden;
}

@media (max-width: 768px){
  .shop-company-chat-overlay{
    padding: 0;
    justify-content: stretch;
    align-items: flex-end;
    background: var(--overlay-bg);
  }

  .shop-company-chat-modal{
    width: 100%;
    max-width: 100%;
    height: calc(100dvh - var(--header-height) - var(--shop-sheet-top-gap));
    max-height: calc(100dvh - var(--header-height) - var(--shop-sheet-top-gap));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-sm);
    transform: translateY(110%);
    opacity: 1;
    transition: transform var(--dur-med) var(--ease-smooth);
  }

  .shop-company-chat-overlay.is-open .shop-company-chat-modal{
    transform: translateY(0);
  }

  .shop-company-chat-modal__header{
    box-sizing: border-box;
    height: 45px;
    min-height: 45px;
    padding: 0 12px;
  }

  .shop-company-chat-modal__title{
    font-size: 16px;
    line-height: 1.2;
  }

  .shop-company-chat-modal__close,
  .shop-company-chat-modal__back{
    top: 50%;
    width: 40px;
    height: 40px;
    font-size: 16px;
    transform: translateY(-50%);
  }

  .shop-company-chat-modal__close{
    right: 12px;
  }

  .shop-company-chat-modal__back{
    left: 12px;
  }

  .shop-company-chat-order-view{
    padding: 8px 10px 10px;
  }

  .shop-company-chat-order-footer{
    padding-bottom: 4px;
  }

  .shop-company-chat-order-footer-spacer{
    height: 84px;
  }

  .shop-company-chat-order-card{
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    padding: 8px;
  }

  .shop-company-chat-order-card-strip{
    gap: 7px;
  }

  .shop-company-chat-order-card__title{
    font-size: 14px;
  }

  .shop-company-chat-order-card__total{
    font-size: 15px;
  }

  .shop-company-chat-feed{
    padding-top: 14px;
  }

  .shop-company-chat-text{
    font-size: 15px;
  }

  .shop-company-chat-day{
    font-size: 12px;
  }

  .shop-company-chat-welcome{
    font-size: 13px;
  }

  .shop-company-chat-time{
    font-size: 12px;
  }

  .shop-company-chat-status{
    min-width: 22px;
    height: 16px;
  }

  .shop-company-chat-status-icon{
    width: 22px;
    height: 16px;
  }

  .shop-company-chat-composer{
    min-height: 50px;
    margin: 0 10px 10px;
  }

  .shop-company-chat-modal__body{
    padding-bottom: var(--shop-chat-mobile-keyboard-inset);
  }

  .shop-company-chat-modal__body.is-emoji-sheet-open{
    padding-bottom: max(
      var(--shop-chat-mobile-keyboard-inset),
      calc(clamp(220px, 41vh, 290px) + 12px + env(safe-area-inset-bottom))
    );
  }

  .shop-company-chat-modal__body.is-emoji-sheet-open .shop-company-chat-scroll-down{
    bottom: calc(
      108px + max(var(--shop-chat-mobile-keyboard-inset), clamp(220px, 41vh, 290px))
      + var(--shop-chat-scroll-down-composer-extra)
    );
  }

  .shop-company-chat-selection-toolbar{
    margin: 0 10px 10px;
    border-radius: 14px;
    padding: 6px 8px;
  }

  .shop-company-chat-permission-prompt{
    padding: 10px;
  }

  .shop-company-chat-permission-prompt__card{
    width: min(96%, 332px);
    padding: 12px 12px 10px;
  }

  .shop-company-chat-permission-prompt__text{
    font-size: 13px;
    padding-right: 20px;
  }

  .shop-company-chat-selection-count{
    font-size: 15px;
  }

  .shop-company-chat-composer__btn{
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  .shop-company-chat-composer__input{
    font-size: 16px;
  }

  .shop-company-chat-composer .shop-company-chat-emoji-wrap{
    display: none;
  }

  .shop-company-chat-scroll-down{
    right: 18px;
    bottom: calc(
      108px + var(--shop-chat-mobile-keyboard-inset)
      + var(--shop-chat-scroll-down-composer-extra)
    );
    width: 38px;
    height: 38px;
  }

  .shop-company-chat-typing-indicator{
    max-width: min(86%, 340px);
    padding-left: 12px;
    padding-right: 12px;
  }

  .shop-company-chat-reaction-bar{
    gap: 3px;
    padding: 4px 5px;
  }

  .shop-company-chat-reaction-btn,
  .shop-company-chat-reaction-close{
    width: 26px;
    height: 26px;
  }

  .shop-company-chat-reaction-btn{
    font-size: 18px;
  }

  .shop-company-chat-reaction-pill{
    min-height: 26px;
    min-width: 26px;
    font-size: 20px;
    bottom: -10px;
  }

  .shop-company-chat-context-menu{
    min-width: 224px;
    border-radius: 24px;
  }

  .shop-company-chat-context-btn{
    min-height: 42px;
    font-size: 15px;
  }

  .shop-company-chat-modal__body .chat-attach-preview-overlay{
    padding: 10px;
    border-radius: 0;
  }

  .shop-company-chat-modal__body .chat-image-viewer-overlay{
    position: absolute;
    inset: 0;
    padding: 10px;
    border-radius: 0;
  }

  .shop-company-chat-modal__body .chat-attach-preview-card{
    border-radius: 18px;
    grid-template-rows: auto minmax(180px, 1fr) auto auto;
  }

  .shop-company-chat-modal__body .chat-attach-preview-title{
    font-size: 18px;
  }

  .shop-company-chat-modal__body .chat-attach-preview-media-wrap{
    min-height: 180px;
    max-height: 46vh;
  }

  .shop-company-chat-modal__body .chat-attach-preview-image{
    max-height: 46vh;
  }

  .shop-company-chat-modal__body .chat-attach-preview-foot{
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 8px 10px 10px;
  }

  .shop-company-chat-modal__body #shopCompanyChatAttachPreviewEmojiBtn{
    display: none;
  }

  .shop-company-chat-modal__body #shopCompanyChatAttachPreviewOverlay .chat-attach-preview-foot{
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .shop-company-chat-modal__body .chat-attach-preview-caption{
    height: 38px;
    font-size: 15px;
  }

  .shop-company-chat-modal__body .chat-attach-preview-send{
    height: 38px;
    padding: 0 14px;
    font-size: 14px;
  }
}

body.page-shop .shop-toolbar-cart{
  display: none;
}

/* Баннер онлайн/офлайн (витрина) */
.shop-connection-banner{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-height, 56px);
  z-index: 900;
  padding: 10px 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 8px var(--overlay-bg);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.shop-connection-banner.hidden{
  display: none;
}
.shop-connection-banner--offline{
  background: var(--color-primary);
  color: var(--color-white);
}
.shop-connection-banner--online{
  background: var(--color-primary);
  color: var(--color-white);
}
.shop-connection-banner__text{
  display: block;
}

/* Chips under header (mobile categories) */
.shop-cat-chips-wrap{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: none;
  position: relative;
}
.shop-cat-chips{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 6px;
  background: transparent;
  scrollbar-width: none;
}
.shop-cat-chips::-webkit-scrollbar{ display: none; }
.shop-cat-chip{
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.shop-cat-chip.is-active{
  background: var(--shop-buy);
  border-color: var(--shop-buy);
  color: var(--shop-buy-text);
}
.shop-cat-chips-wrap::before,
.shop-cat-chips-wrap::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  pointer-events: none;
}
.shop-cat-chips-wrap::before{
  left: 0;
  background: linear-gradient(90deg, var(--color-surface) 0%, transparent 100%);
}
.shop-cat-chips-wrap::after{
  right: 0;
  background: linear-gradient(270deg, var(--color-surface) 0%, transparent 100%);
}

/* Подхедер (toolbar) только на главной странице витрины */
body.page-shop:not(.shop-main) .center-stack > .panel:first-child{
  display: none;
}

.shop-grid{
  height: 100%;
  display: grid;
  /* правая колонка фиксированная 500px */
  grid-template-columns: 260px 1fr 500px;
  gap: var(--shop-gap);
  align-items: stretch;
}

.shop-col .panel{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.shop-col .panel-body{
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* чтобы в products-panel можно было масштабировать элементы через container queries */
.shop-col-products .panel-body{
  container-type: inline-size;
  padding-bottom: 400px;
}


/* мобилка: показываем только товары, категории/корзина через нижнее меню */
@media (max-width: 768px){
  body.page-shop{
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  body.page-shop.modal-open,
  body.page-shop.sheet-open{
    overflow: hidden;
  }

  body.page-shop > header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 140;
  }

  body.page-shop .logo-text{
    display: none;
  }

  body.page-shop .center-stack > .panel:first-child{
    display: none;
  }

  body.page-shop.shop-main:not(.modal-open):not(.sheet-open) .center-stack > .panel:first-child{
    display: flex;
    position: sticky;
    top: var(--header-height);
    z-index: 135;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  body.page-shop .center-stack > .panel:first-child .toolbar{
    background: transparent;
    padding: 0 4px;
    border: none;
    box-shadow: none;
  }

  body.page-shop .center-stack > .panel:first-child .toolbar-title{
    display: none;
  }
  body.page-shop .center-stack > .panel:first-child .shop-cat-chips-wrap{
    display: block;
  }

  body.page-shop .main-container{
    padding: 12px;
    padding-top: calc(12px + var(--header-height));
    padding-left: 0;
    padding-right: 0;
    height: auto;
    min-height: calc(100dvh - var(--header-height));
  }

  .shop-grid{
    grid-template-columns: 1fr;
  }

  /* Панель товаров на всю ширину экрана */
  body.page-shop .shop-products-panel{
    width: 100%;
    max-width: 100vw;
  }
  body.page-shop .shop-products-panel .panel-body{
    padding-left: 8px;
    padding-right: 8px;
  }
  body.page-shop .center-stack > .panel:first-child{
    padding-left: 12px;
    padding-right: 12px;
  }

  .shop-col-cats,
  .shop-col-cart{
    display: none;
  }

  /* чтобы контент не уезжал под нижний таббар */
  .shop-col-products .panel-body{
    padding-bottom: 400px;
    overflow: visible;
  }

  body.page-shop .shop-products-panel .panel-body,
  body.page-shop .center-stack > .panel:last-child > .panel-body{
    overflow: visible;
  }

  body.page-shop #shopProfileBtn,
  body.page-shop #shopHeaderFavBtn{
    display: none;
  }
}

/* ==========================================================================
   Categories list
   ========================================================================== */

.shop-cats-list,
.shop-categories-list{
  display: grid;
  gap: 10px;
  padding: 4px 0;
}

.shop-cat-item{
  width: 100%;
  text-align: left;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 18px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}

.shop-cat-item:hover{ background: var(--color-surface-2); }
.shop-cat-item.is-active{
  border-color: var(--primary-45);
  box-shadow: 0 0 0 3px var(--primary-12);
}

.shop-cat-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.shop-cat-icon-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-cat-icon-ph{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-text-muted);
  opacity: .35;
}

.shop-cat-text{ min-width: 0; }
.shop-cat-title{
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes shop-skeleton-wave{
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.shop-skeleton-shimmer{
  position: relative;
  overflow: hidden;
  background: #eceef2;
}

.shop-skeleton-shimmer::after{
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  animation: shop-skeleton-wave 1.2s linear infinite;
}

.shop-cat-item--skeleton{
  pointer-events: none;
}

.shop-cat-item--skeleton .shop-cat-icon{
  border-color: transparent;
  background: transparent;
}

.shop-cat-title--skeleton{
  width: 76%;
  height: 12px;
  border-radius: 999px;
}

/* ==========================================================================
   Products grid & cards
   Требование: на десктопе 2..5 карточек в ряд, без пустот.
   Карточка и контент внутри "масштабируются" вместе.
   ========================================================================== */

.shop-products-grid{
  display: grid;
  gap: 12px;

  /* по умолчанию: 4 карточки в ряд на десктопе */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
  align-items: stretch;
}

@media (min-width: 1920px){
  .shop-products-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* планшет */
@media (max-width: 1024px){
  .shop-products-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* мобилка */
@media (max-width: 768px){
  .shop-products-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* компактный десктоп/планшет: сужаем боковые колонки, центр держит 5 карточек */
@media (min-width: 769px) and (max-width: 1366px){
  body.page-shop .main-container{
    padding: 10px;
  }
  .shop-grid{
    grid-template-columns: 210px 1fr 360px;
    gap: 10px;
  }
  .shop-products-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* планшет: категории в chips сверху, без левой колонки */
@media (min-width: 769px) and (max-width: 1199px){
  body.page-shop .app-grid{
    grid-template-columns: 1fr 420px !important;
  }
  body.page-shop .page-col-left{
    display: none !important;
  }
  body.page-shop .page-col-center{
    display: flex !important;
    min-width: 0;
  }
  body.page-shop .page-col-right{
    display: flex !important;
    min-width: 0;
  }
  .shop-col-cats{
    display: none !important;
  }
  .shop-grid{
    grid-template-columns: 1fr 420px;
  }
  .shop-col-products{
    grid-column: 1;
  }
  .shop-col-cart{
    grid-column: 2;
  }
  body.page-shop .page-col-center .center-stack > .panel:first-child .toolbar-title{
    display: none !important;
  }
  body.page-shop .page-col-center #shopCatChipsWrap{
    display: block !important;
  }
}

/* --- "масштабирование" размеров UI в карточке от ширины контейнера (без JS) --- */
/* базовые значения будут меняться плавно, чтобы при 5 в ряд всё было компактнее,
   при 2-3 в ряд — чуть крупнее. */
/* container query: ширина панели товаров */
/* карточка */
.sp-card{
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--shop-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 16;
  min-width: 0;

  /* фиксируем визуальную "геометрию" без зависимости от текста:
     высота определяется структурой: квадратное фото + фикс блоки текста + кнопка снизу */
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}

.sp-card:hover{
  transform: translateY(-1px);
  background: var(--color-surface);
}

.sp-card.is-unavailable{
  opacity: 0.7;
}

.sp-card.is-unavailable:hover{
  transform: none;
}

.sp-card--skeleton{
  pointer-events: none;
}

.sp-card--skeleton:hover{
  transform: none;
  background: var(--color-surface);
}

.sp-card--skeleton .sp-media{
  border-radius: 0 0 14px 14px;
  background: transparent;
}

.sp-skel-line{
  display: block;
  height: 12px;
  border-radius: 999px;
}

.sp-skel-line--title{
  width: 82%;
}

.sp-skel-line--sub{
  width: 58%;
}

.sp-skel-pill{
  width: 96px;
  height: var(--qty-pill-h);
  border-radius: 999px;
}

.sp-media{
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 14px 14px;
  margin: 0;
  align-self: center;
}

.sp-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0;
  transition: opacity 220ms ease-out;
  pointer-events: none;
  z-index: 2;
}

.sp-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

/* Полноразмерное изображение может быть в <picture> (WebP) — не ломаем сетку */
.sp-media > picture{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sp-media > picture > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* LQIP-превью и основное изображение в карточке товара */
.sp-img-lqip,
.sp-img-full{
  position: absolute;
  inset: 0;
}

.sp-img-lqip{
  filter: blur(14px);
  transform: scale(1.08);
  transition: opacity 200ms ease-out;
}

.sp-img-full{
  opacity: 0;
  transition: opacity 220ms ease-out;
}

.sp-media.is-loaded .sp-img-full{
  opacity: 1;
}

.sp-media.is-loaded .sp-img-lqip{
  opacity: 0;
}

/* затемнение при добавлении */
.sp-media.is-dim::after{
  opacity: 1;
}

/* qty overlay */
.sp-qtyOverlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
}

.sp-qtyOverlay.hidden{ display: none; }

.qty-carousel{
  width: 56px;
  height: 48px;
  border-radius: 16px;
  background: transparent;
  color: var(--shop-white);
  font-weight: 900;
  font-size: 36px;
  text-shadow: 0 6px 18px var(--shop-shadow-text);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

/* для анимации цифр */
.qty-num{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 320ms cubic-bezier(.16,.84,.28,1), opacity 320ms ease-out;
  will-change: transform, opacity;
}

/* info */
.sp-info{
  padding: var(--sp-pad);
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap);
  min-width: 0;
  flex: 1;
}

.sp-title{
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.15;
  font-size: var(--sp-title-size);
  min-width: 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;             /* 2 строки */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}

.sp-sub{
  color: var(--color-text-muted);
  font-size: var(--sp-sub-size);
  line-height: 1.2;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* даже если описания нет — место резервируем, чтобы карточка не прыгала */
  min-height: 14px;
}

/* Комбо-карточка в каталоге */
.sp-card--combo .sp-media--combo{ position: relative; }
.sp-combo-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  aspect-ratio: 1 / 1;
  gap: 2px;
  background: var(--color-surface-2);
}
.sp-combo-grid__cell{
  position: relative;
  overflow: hidden;
  background: var(--color-surface-2);
}
.sp-combo-grid__cell--empty{
  background: var(--color-border);
}
.sp-combo-grid__cell > picture{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sp-combo-grid__cell > picture > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-combo-grid__cell .sp-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Плавное появление изображений в сетке комбо */
.sp-combo-grid__cell.is-loaded .sp-img-full{
  opacity: 1;
}

.sp-combo-grid__cell.is-loaded .sp-img-lqip{
  opacity: 0;
}
.sp-combo-discount{
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--shop-buy);
  color: var(--shop-buy-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.sp-title--two-lines{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-sub--one-line{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-combo-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: var(--qty-pill-h);
  border-radius: 999px;
  background: var(--shop-buy);
  color: var(--shop-buy-text);
  font-weight: 700;
  font-size: var(--sp-sub-size);
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-smooth);
}
.sp-combo-btn:hover{ background: var(--shop-buy-hover); }
.sp-combo-btn__arrow{ font-size: 1.1em; }

/* Экран детали комбо (правая панель / sheet) */
.shop-combo-detail{
  padding: var(--sp-pad);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.shop-combo-detail-back{
  align-self: flex-start;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--color-surface-2);
  color: var(--color-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease-smooth);
}
.shop-combo-detail-back:hover{ background: var(--shop-hover-dark); }
.shop-combo-detail-title{
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}
.shop-combo-detail-desc{
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.35;
}
.shop-combo-detail-discount{
  font-size: 14px;
  font-weight: 700;
  color: var(--shop-buy);
  margin: 0;
}
.shop-combo-detail-block{
  margin: 0;
}
.shop-combo-detail-block-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px 0;
}
.shop-combo-detail-products{
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.shop-combo-detail-products li{ padding: 2px 0; }

/* Обёртка экрана комбо: скролл + футер внизу */
.shop-combo-view{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.shop-combo-detail-scroll{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-pad);
}

/* Мобилка: уменьшаем горизонтальные отступы на экранах комбо (чтобы контейнер был шире) */
@media (max-width: 768px){
  .shop-product-content .shop-combo-detail-scroll{
    padding-left: 0;
    padding-right: 0;
  }
}

/* Новый экран комбо (как корзина) */
.shop-combo-detail-caption{
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.35;
  margin-top: -8px;
}

.shop-combo-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-combo-row{
  margin-bottom: 0;
  cursor: default;
  position: relative;
  grid-template-columns: 92px 1fr; /* убираем колонку для цены */
}
.shop-combo-row .shop-combo-mid{
  padding-right: 0;
}

.shop-combo-row .cart-title{
  font-weight: 800;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-combo-picker-row .cart-title{
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}
.shop-combo-row .cart-sub,
.shop-combo-picker-row .cart-sub{
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-combo-mid{
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.shop-combo-row-bottom{
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.shop-combo-replace{
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.shop-combo-replace:hover{ background: var(--shop-hover-dark); }

.shop-combo-old{
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  margin-left: auto;
  white-space: nowrap;
}
.shop-combo-price{
  font-size: 15px;
  font-weight: 900;
  color: var(--color-text);
  white-space: nowrap;
  margin-left: auto;
}
.shop-combo-old + .shop-combo-price{
  margin-left: 0;
}

/* Футер комбо — прижат к низу панели, не скроллится */
.shop-combo-footer{
  flex-shrink: 0;
  background: var(--color-surface);
  padding: 4px 12px calc(4px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Выбор внутри блока */
.shop-combo-picker-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shop-combo-picker-row{
  width: 100%;
  text-align: left;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  position: relative;
  grid-template-columns: 92px 1fr;
  grid-template-rows: 92px auto;
}
.shop-combo-picker-row.is-selected{
  border-color: var(--shop-buy);
}
.shop-combo-picker-row > .cart-thumb{
  grid-row: 1;
  grid-column: 1;
  align-self: start;
}
.shop-combo-picker-row > .shop-combo-picker-mid{
  grid-row: 1;
  grid-column: 2;
  align-self: start;
  min-height: 0;
}
.shop-combo-picker-row > .shop-combo-picker-bottom{
  grid-row: 2;
  grid-column: 2;
  align-self: end;
}
.shop-combo-picker-mid{
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.shop-combo-picker-bottom{
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.shop-combo-picker-gear{
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), transform 0.3s ease;
}
.shop-combo-picker-gear:hover{
  background: var(--shop-hover-dark);
  color: var(--color-text);
}
.shop-combo-picker-gear svg{
  display: block;
  width: 18px;
  height: 18px;
}
.shop-combo-picker-gear.is-open{
  color: var(--color-primary);
  transform: rotate(180deg);
}
.shop-combo-picker-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.shop-combo-picker-price{
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.shop-combo-radio{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--overlay-bg);
  margin-left: 0;
  flex: 0 0 auto;
  align-self: center;
  position: relative;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.shop-combo-radio.is-selected{
  border-color: var(--shop-buy);
  background: var(--shop-buy);
}
.shop-combo-radio.is-selected::after{
  content: "\2713";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--shop-buy-text);
  font-size: 18px;
  font-weight: 900;
}

/* Расширение самой карточки: варианты и состав внутри; разграничитель по низу фото/строки с ценой */
.shop-combo-picker-expand{
  margin-top: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  grid-row: 3;
  grid-column: 1 / -1;
  min-width: 0;
  overflow-x: hidden;
}
.shop-combo-picker-expand-loading{
  padding: 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}
.shop-combo-picker-expand-header{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s ease;
}
.shop-combo-picker-expand-header:hover{
  background: var(--color-surface-2);
}
.shop-combo-picker-expand-header-arrow{
  color: var(--color-text-muted);
  font-size: 14px;
  flex-shrink: 0;
}
.shop-combo-picker-expand-header-thumb{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface-2);
}
.shop-combo-picker-expand-header-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-combo-picker-expand-header-name{
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-combo-picker-expand-header-price{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}
.shop-combo-picker-expand-header-old{
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.shop-combo-picker-expand-header-current{
  font-size: 16px;
  font-weight: 900;
  color: var(--color-primary);
}

.shop-combo-picker-expand-inner{
  padding: 12px 0 14px;
  background: var(--color-surface);
  min-width: 0;
  overflow-x: hidden;
}
.shop-combo-picker-expand-title{
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-combo-picker-variants{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.shop-combo-picker-variants:last-child{
  margin-bottom: 0;
}
.shop-combo-picker-variants-row{
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.shop-combo-picker-variants-row::-webkit-scrollbar{
  display: none;
}
.shop-combo-picker-variant-btn{
  padding: 10px 16px;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
   /* чтобы не сжимались и шли в одну линию */
  flex: 0 0 auto;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.shop-combo-picker-variant-btn:hover{
  border-color: var(--color-text-muted);
  color: var(--color-text);
}
.shop-combo-picker-variant-btn.is-active{
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--primary-12);
}

.shop-combo-picker-ingredients{
  margin-top: 4px;
}
.shop-combo-picker-ingredients .shop-combo-picker-expand-title{
  margin-bottom: 10px;
}
.shop-combo-picker-ingredient-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.shop-combo-picker-ingredient-row:last-child{
  border-bottom: none;
}
.shop-combo-picker-ingredient-img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface-2);
}
.shop-combo-picker-ingredient-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-combo-picker-ingredient-name{
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-combo-picker-ingredient-qty{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.shop-combo-picker-ingredient-qty-val{
  min-width: 44px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text);
}
.shop-combo-picker-ingredient-btn{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--shop-buy);
  background: var(--shop-buy);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transform: scale(1);
  box-shadow: 0 4px 10px rgba(255, 136, 0, 0.24);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.14s ease, box-shadow 0.14s ease, color 0.14s ease, filter 0.14s ease;
}
.shop-combo-picker-ingredient-btn:hover{
  filter: brightness(1.03);
  box-shadow: 0 6px 12px rgba(255, 136, 0, 0.3);
}
.shop-combo-picker-ingredient-btn:active,
.shop-combo-picker-ingredient-btn.is-pressed{
  background: #ef7600;
  border-color: #ef7600;
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(255, 136, 0, 0.2), 0 8px 14px rgba(255, 136, 0, 0.36);
}
.shop-combo-picker-ingredient-btn:disabled{
  background: #eef0f3;
  border-color: #e0e5ea;
  color: #9ca3ad;
  transform: none;
  box-shadow: none;
  filter: none;
  cursor: default;
}

/* Полный экран комбо: карточки + заменить + добавить */
.shop-combo-detail-discount-bar{
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
}
.shop-combo-detail-cards{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.shop-combo-detail-card{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.shop-combo-detail-card__media{
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-2);
}
.shop-combo-detail-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-combo-detail-card__body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shop-combo-detail-card__name{
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.25;
}
.shop-combo-detail-card__desc{
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.shop-combo-detail-card__replace{
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.shop-combo-detail-card__replace:hover{
  background: var(--color-surface-2);
}
.shop-combo-detail-card__price{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.shop-combo-detail-card__price-old{
  font-size: 14px;
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.shop-combo-detail-card__price-current{
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text);
}
.shop-combo-detail-add{
  margin-top: auto;
  width: 100%;
  padding: 16px 20px;
  border-radius: 14px;
  border: 0;
  background: var(--shop-buy);
  color: var(--shop-buy-text);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-smooth);
}
.shop-combo-detail-add:hover{ background: var(--shop-buy-hover); }

/* Экран выбора товара в блоке (Заменить) */
.shop-combo-detail--picker .shop-combo-detail-title{ display: none; }
.shop-combo-detail--picker{ padding-top: 0; }
.shop-combo-picker-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow: auto;
}
.shop-combo-picker-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.shop-combo-picker-card:hover{
  background: var(--color-surface-2);
  border-color: var(--shop-buy);
}
.shop-combo-picker-card.is-selected{
  border-color: var(--shop-buy);
  background: var(--color-surface-2);
}
.shop-combo-picker-card__media{
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-2);
}
.shop-combo-picker-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-combo-picker-card__body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shop-combo-picker-card__name{
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
}
.shop-combo-picker-card__desc{
  font-size: 12px;
  color: var(--color-text-muted);
}
.shop-combo-picker-card__price{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.shop-combo-picker-card__price-old{
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.shop-combo-picker-card__price-current{
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
}
.shop-combo-picker-card__radio{
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  display: grid;
  place-items: center;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.shop-combo-picker-card.is-selected .shop-combo-picker-card__radio{
  border-color: var(--shop-buy);
  background: var(--shop-buy);
  color: var(--shop-buy-text);
  font-size: 14px;
  font-weight: 700;
}
.shop-combo-picker-card.is-selected .shop-combo-picker-card__radio::after{
  content: "\2713";
}

.sp-bottom{
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;

  /* кнопка всегда внизу */
  margin-top: auto;
}

/* ========================================================================
   Единый контрол количества/покупки (каталог / корзина / модалка)
   Требования:
   - без внутренних полосок/разделителей
   - одинаковая ширина +/- (hit-area)
   - кнопка в карточке снизу слева
   - ширина пилюли растёт вправо под контент (old, price, +/-)
   - старая цена слева внутри кнопки (когда qty=0)
   - при добавлении старая цена исчезает и появляется "—"
   ======================================================================== */

/* общие размеры через переменные (подхватывают container query выше) */
/* базовый pill */
.qty-pill{
  height: var(--qty-pill-h);
  border-radius: 999px;
  background: var(--shop-buy);
  color: var(--shop-buy-text);

  display: inline-flex;
  align-items: center;

  /* растём вправо под контент */
  width: max-content;
  max-width: 100%;

  overflow: hidden;
  user-select: none;
}

/* никаких внутренних разделителей */
.qty-pill, .qty-pill *{
  border: 0;
  outline: none;
  box-shadow: none;
}
.qty-pill::before, .qty-pill::after{ content:none !important; }

.qty-pill:hover{ background: var(--shop-buy-hover); }

/* кнопки +/- одинаковой ширины */
.qty-pill__btn{
  width: var(--qty-pill-side);
  height: 100%;
  background: transparent;
  color: inherit;
  font-weight: 900;
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.qty-pill__btn:active{ transform: scale(.98); }

.qty-pill__btn.is-disabled{
  opacity: .35;
  pointer-events: none;
}

/* центр */
.qty-pill__center{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  text-align: center;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  padding: 0 10px;
}

/* старая цена внутри кнопки слева от текущей */
.qty-pill__center .old{
  text-decoration: line-through;
  opacity: .85;
}

/* Стили скидок */
.sp-discount-badge{
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
  line-height: 1.2;
}
.sp-old-price{
  text-decoration: line-through;
  opacity: .65;
  margin-right: 6px;
  font-size: 0.9em;
  color: var(--color-text-muted, var(--color-text-dim));
}
.sp-discount-badge--cart{
  font-size: 9px;
  padding: 2px 4px;
  margin-right: 4px;
}

/* когда корзина пустая — прячем "минус", показываем old (если есть) */
.qty-pill.is-empty .qty-pill__btn--minus{
  display: none;
}

/* когда товар добавлен — old скрываем (JS может добавлять класс .has-qty) */
.qty-pill.has-qty .qty-pill__center .old{
  display: none;
}
.qty-pill.has-qty .qty-pill__center .sp-discount-badge{
  display: none;
}
.qty-pill.has-qty .qty-pill__center .sp-old-price{
  display: none;
}

/* вариант для корзины (серый) */
.qty-pill--muted{
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.qty-pill--muted:hover{ background: var(--color-surface-2); }
.qty-pill--muted .qty-pill__btn:hover{
  background: var(--shop-hover-dark);
}
html[data-theme="dark"] .qty-pill--muted .qty-pill__btn:hover{
  background: var(--shop-hover-dark);
}

/* крупнее в деталке товара */
.qty-pill--big{
  --qty-pill-h: 44px;
  --qty-pill-side: 48px;
}
.qty-pill--big .qty-pill__center{ font-size: 16px; }

/* ==========================================================================
   Cart (desktop panel + sheet)
   ========================================================================== */

/* ========== Свайп для карточек корзины ========== */
.cart-swipe-container {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: 16px;
}

.cart-swipe-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-right: 12px;
}

.cart-swipe-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.cart-swipe-btn:active {
  transform: scale(0.9);
}

.cart-swipe-fav {
  color: var(--color-text-faint);
}

.cart-swipe-fav.is-active {
  color: var(--color-text-faint);
}

.cart-swipe-fav.is-active i {
  animation: none;
}

@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.cart-swipe-delete {
  color: var(--color-primary);
}

.cart-swipe-content {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  will-change: transform;
  touch-action: pan-y;
  overflow: hidden;
}

.cart-swipe-container .cart-row {
  margin-bottom: 0;
}

/* ========== Десктопные кнопки действий в корзине ========== */
.cart-desktop-actions {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
}

@media (min-width: 769px) {
  .cart-desktop-actions {
    display: flex;
  }
  
  /* Скрываем свайп-кнопки на десктопе */
  .cart-swipe-actions {
    display: none !important;
  }
}

.cart-desktop-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 6px;
  transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.cart-desktop-btn:hover {
  background: var(--color-surface-2);
}

.cart-desktop-btn:active {
  transform: scale(0.9);
}

.cart-desktop-fav {
  color: var(--color-text-faint);
}

.cart-desktop-fav:hover {
  color: var(--color-text-faint);
}

.cart-desktop-fav.is-active {
  color: var(--color-text-faint);
}

.cart-desktop-fav.is-active i {
  animation: none;
}

.cart-desktop-delete {
  color: var(--color-text-faint);
}

.cart-desktop-delete:hover {
  color: var(--color-primary);
}

/* ========== Toast ========== */
.shop-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--overlay-bg);
  color: var(--color-white);
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 14px;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.shop-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ========== Карточка корзины ========== */
.cart-row{
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.cart-row.is-auto-ghost{
  background: var(--color-surface-2);
  border-style: dashed;
  opacity: 0.65;
}

.cart-row.is-auto-ghost .cart-title,
.cart-row.is-auto-ghost .cart-sub-container,
.cart-row.is-auto-ghost .cart-price{
  color: var(--color-text-muted);
}

.cart-thumb{
  width: 70px;
  height: 70px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  flex-shrink: 0;
}

/* Комбо в корзине: сетка 2x2 вместо одного фото */
.cart-combo-thumb{
  width: 70px;
  height: 70px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  background: var(--color-surface-2);
  flex-shrink: 0;
}
.cart-combo-thumb__cell{
  overflow: hidden;
  background: var(--color-surface-2);
}
.cart-combo-thumb__cell--empty{
  background: var(--color-border);
}
.cart-combo-thumb__cell .cart-thumb{
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
}
.cart-row--combo .cart-sub-detail-item{
  font-size: 0.9em;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.cart-combo-details{
  margin-top: 4px;
}
.cart-combo-detail-block{
  margin-top: 6px;
}
.cart-combo-detail-block:first-child{
  margin-top: 0;
}
.cart-combo-detail-name{
  font-size: 0.9em;
  color: var(--color-text);
  padding-left: 8px;
}
.cart-combo-detail-block .cart-sub-details{
  padding-left: 8px;
  margin-top: 2px;
  display: block;
}

.cart-mid{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 92px;
  align-self: stretch;
}

.cart-title{
  font-weight: 900;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 1 строка */
}

/* Корзина (панель + sheet): заголовок товара/комбо — 2 строки и ellipsis */
.shop-cart-content .cart-title,
.shop-cart-sheet .cart-title,
#shopCartContent .cart-title,
.shop-cart-body .cart-title{
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Комбо в заказах/корзине: на всякий случай дублируем правило по селектору строки */
.cart-row--combo .cart-title{
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-sub{
  font-size: 12px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 1 строка */
  min-height: 1.2em;
}

.cart-sub-container{
  font-size: 12px;
  color: var(--color-text-muted);
  min-height: 1.2em;
}

.cart-sub-summary{
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

.cart-sub-summary:hover{
  color: var(--color-text, var(--color-text-secondary));
}

.cart-sub-text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.cart-sub-arrow{
  flex-shrink: 0;
  margin-left: 4px;
  font-size: 0.85em;
  transition: transform 0.2s;
}

.cart-sub-details{
  margin-top: 4px;
  padding-left: 8px;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cart-sub-detail-item{
  font-size: 0.9em;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.cart-sub-collapse{
  cursor: pointer;
  font-size: 0.85em;
  color: var(--color-text-muted);
  margin-top: 4px;
  padding-left: 8px;
  user-select: none;
  transition: color 0.2s;
}

.cart-sub-collapse:hover{
  color: var(--color-text, var(--color-text-secondary));
}

.cart-qty{ display: inline-flex; }

.cart-right{
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  align-self: end;
}

/* Нижняя строка корзины: qty, цена и иконки в одну линию (мобилка + десктоп) */
.shop-cart-sheet .cart-row,
#shopCartContent .cart-row,
.shop-cart-content .cart-row{
  grid-template-columns: 70px 1fr;
}
.cart-bottom-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}
.cart-bottom-row .cart-right{
  align-self: center;
}

/* компактный фиксированный qty-pill в корзине */
.cart-bottom-row .qty-pill{
  --qty-pill-h: 28px;
  --qty-pill-side: 32px;
}
.cart-bottom-row .qty-pill__center{
  min-width: 24px;
  width: 24px;
  padding: 0;
  font-size: 13px;
}

.cart-old{
  font-size: 11px;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.cart-old.hidden{ display: none; }

.cart-price{
  font-weight: 900;
  font-size: 13px;
  color: var(--color-text);
  white-space: nowrap;
}

/* пустая корзина в шите */
.shop-cart-empty-sheet{
  padding: 32px 16px;
  text-align: center;
}
.shop-cart-empty-sheet .empty-state{
  min-height: auto;
  gap: 6px;
}

.shop-cart-sheet{
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.shop-cart-sheet .shop-cart-list,
.shop-cart-sheet .shop-checkout-content,
.shop-cart-sheet .shop-address-content{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  /* Добавляем padding-bottom чтобы контент не перекрывался футером */
  padding-bottom: calc(12px + 70px + env(safe-area-inset-bottom));
}

.shop-cart-sheet .shop-product-content{
  flex: 1;
  min-height: 0;
  padding: 0 12px calc(var(--shop-bottomnav-h) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shop-cart-sheet .shop-product-content .shop-pd{
  flex: 1;
  min-height: 0;
  min-height: 100%;
}

.shop-cart-sheet .shop-product-content .shop-pd-scroll{
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.shop-cart-sheet .shop-product-content .shop-pd-footer{
  margin-top: auto;
  position: static;
  bottom: auto;
}

/* Комбо-экран в шите (мобильный) */
.shop-cart-sheet .shop-product-content .shop-combo-view{
  flex: 1;
  min-height: 0;
  height: auto;
}
.shop-cart-sheet .shop-product-content .shop-combo-detail-scroll{
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(12px + var(--shop-bottomnav-h) + env(safe-area-inset-bottom));
}

/* футер корзины в панели/шите — фиксируется внизу колонки через flex */
.shop-cart-footer,
.shop-cart-sheet-footer{
  position: relative;
  bottom: auto;
  margin-top: auto; /* важно: чтобы футер прижимался вниз в колонке */
  flex: 0 0 auto;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 1;
  box-shadow: none;
}

/* Шкала доставки на десктопе — один блок с кнопкой «Оформить» */
.shop-cart-delivery-progress{
  padding: 10px 12px 6px;
  background: var(--color-surface);
  flex-shrink: 0;
}
.shop-cart-delivery-progress.hidden{
  display: none;
}
.shop-cart-delivery-progress-bar{
  height: 6px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.shop-cart-delivery-progress-fill{
  height: 100%;
  width: 0%;
  max-width: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.shop-cart-delivery-progress-label{
  font-size: 12px;
  color: var(--color-text-muted, var(--color-text-dim));
  margin-top: 4px;
  line-height: 1.2;
}
.shop-cart-delivery-progress-label strong{
  font-weight: 700;
}
.shop-cart-delivery-progress-label.is-free{
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.shop-cart-delivery-progress-label .shop-delivery-check{
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 900;
  margin-left: 6px;
  flex-shrink: 0;
}
/* Десктоп: шкала доставки — во всю ширину, верх закруглённый */
@media (min-width: 769px){
  .shop-cart-delivery-progress{
    border-radius: 12px 12px 0 0;
    padding: 10px 16px 8px;
    font-size: 13px;
  }
  .shop-cart-delivery-progress-label{
    font-size: 13px;
  }
  .shop-cart-footer{
    border-top: 1px solid var(--color-border) !important;
  }
  .shop-cart-footer .shop-checkout-total{
    font-size: calc(1em + 2pt);
    font-weight: 700;
  }
}
/* Мобилка: шкалу десктопа скрываем (используется мобильная версия) */
@media (max-width: 768px){
  .shop-cart-delivery-progress{
    display: none !important;
  }
}
/* Не показывать шкалу доставки при просмотре товара, комбо или профиля */
@media (min-width: 769px){
  .shop-cart-body:has(.shop-product-content:not(.hidden)) .shop-cart-delivery-progress,
  .shop-cart-body:has(.shop-profile-content:not(.hidden)) .shop-cart-delivery-progress{
    display: none !important;
  }
}
@media (max-width: 768px){
  /* Скрываем footer в sheet на мобильных, используем единый блок внизу */
  .shop-cart-sheet-footer {
    display: none !important;
  }
  
  .shop-cart-footer {
    bottom: calc(var(--shop-bottomnav-h) + 8px + env(safe-area-inset-bottom));
  }
  
  /* На мобильных увеличиваем padding-bottom контента с учетом нижней навигации */
  .shop-cart-sheet .shop-cart-list,
  .shop-cart-sheet .shop-checkout-content,
  .shop-cart-sheet .shop-address-content{
    padding-bottom: calc(12px + 70px + var(--shop-bottomnav-h) + var(--shop-sheet-scroll-pad) + env(safe-area-inset-bottom));
  }
}

.shop-category-header{
  grid-column: 1 / -1;
  font-weight: 900;
  font-size: 18px;
  color: var(--color-text);
  margin-top: 18px;
  padding: 4px 2px;
  scroll-margin-top: 12px;
}
.shop-category-header:first-child{
  margin-top: 8px;
}

@media (max-width: 768px){
  .shop-sheet-content,
  .shop-cart-content,
  .shop-address-content,
  .shop-checkout-content,
  .shop-profile-content,
  .shop-product-content{
    padding-bottom: calc(12px + var(--shop-sheet-scroll-pad) + env(safe-area-inset-bottom));
  }
}

.shop-cart-footer-actions,
.shop-checkout-footer-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.shop-checkout-footer-actions{
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas:
    "comment comment"
    "back submit";
  align-items: center;
  row-gap: 10px;
  column-gap: 10px;
}
.shop-checkout-footer-actions.has-name-input{
  grid-template-areas:
    "name name"
    "comment comment"
    "back submit";
}
.shop-checkout-footer-name-input{
  grid-area: name;
  width: 100%;
  min-width: 0;
}
.shop-checkout-footer-comment-input{
  grid-area: comment;
  width: 100%;
  min-width: 0;
}
#shopCheckoutBackBtn{
  grid-area: back;
}
#shopCheckoutSubmitBtn{
  grid-area: submit;
  width: 100%;
  min-width: 0;
}

.shop-checkout-footer-actions.is-order-success .shop-checkout-back,
.shop-mobile-cart-actions-checkout.is-order-success .shop-checkout-back{
  display: none !important;
}
.shop-checkout-footer-actions.is-order-success{
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "submit";
}
.shop-checkout-footer-actions.is-order-success .shop-checkout-footer-comment-input,
.shop-checkout-footer-actions.is-order-success .shop-checkout-footer-name-input{
  display: none !important;
}
.shop-checkout-footer-actions.is-order-success .shop-checkout-submit-btn,
.shop-mobile-cart-actions-checkout.is-order-success .shop-checkout-submit-btn{
  flex: 1;
  min-width: 0;
  width: 100%;
}

.shop-cart-sheet-total{
  display: grid;
  gap: 4px;
  color: var(--color-text);
}

.shop-cart-sheet-total span{
  font-size: 12px;
  color: var(--color-text-muted);
}

.shop-cart-clear{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--shop-buy);
  background: var(--shop-buy);
  color: var(--shop-buy-text);
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  transition: all var(--dur-fast) var(--ease-smooth);
}

.shop-cart-clear:hover{
  background: var(--shop-buy-hover);
  border-color: var(--shop-buy-hover);
}

.shop-cart-clear.is-confirm{
  width: auto;
  border-radius: 999px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 800;
}

.shop-cart-clear.is-edit-cancel{
  border-color: var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
}

.shop-cart-clear.is-edit-cancel:hover{
  background: var(--color-surface-3);
  border-color: var(--color-border-strong);
}

.shop-cart-clear.is-edit-cancel .fa-arrow-left{
  font-size: 17px;
}

.shop-checkout-btn{
  height: 52px;
  border-radius: 999px;
  padding: 0 18px;
  width: 100%;
  flex: 1 1 auto;
  background: var(--shop-buy);
  color: var(--shop-buy-text);
  border: 1px solid var(--shop-buy);
  font-weight: 800;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* Цены в кнопке действия комбо: старая + новая в одну строку */
.shop-pd-action-prices{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.shop-pd-action-old{
  font-size: 13px;
  color: var(--shop-buy-text);
  text-decoration: line-through;
  opacity: 0.8;
}

.shop-checkout-btn:hover{
  background: var(--shop-buy-hover);
  border-color: var(--shop-buy-hover);
}

/* Cart footer checkout button should be one line: "Оформить · 1 234 ₽" */
.shop-cart-footer-actions .shop-checkout-btn,
.shop-mobile-cart-actions .shop-checkout-btn{
  flex-direction: row;
  gap: 6px;
  white-space: nowrap;
}

.shop-checkout-back{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--shop-buy);
  background: var(--shop-buy);
  color: var(--shop-buy-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.shop-checkout-back:hover{
  background: var(--shop-buy-hover);
  border-color: var(--shop-buy-hover);
}

.shop-checkout-submit-btn{
  height: 52px;
  border-radius: 999px;
  padding: 0 18px;
  width: 100%;
  flex: 1 1 auto;
  background: var(--shop-buy);
  color: var(--shop-buy-text);
  border: 1px solid var(--shop-buy);
  font-weight: 800;
  cursor: pointer;
}

.shop-checkout-submit-btn:hover{
  background: var(--shop-buy-hover);
  border-color: var(--shop-buy-hover);
}

.shop-order-details-repeat-btn {
  border-color: var(--color-border);
  background: var(--color-surface, var(--color-white));
  color: var(--color-text, var(--color-text-ink));
  width: 52px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  transition: all var(--dur-fast, 0.2s) var(--ease-smooth, ease);
}

.shop-order-details-repeat-btn:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

.shop-order-details-repeat-btn .shop-order-details-repeat-text {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width var(--dur-fast, 0.2s) var(--ease-smooth, ease), opacity var(--dur-fast, 0.2s) var(--ease-smooth, ease);
}

.shop-order-details-repeat-btn.is-expanded {
  width: auto;
  padding: 0 16px;
}

.shop-order-details-repeat-btn.is-expanded .shop-order-details-repeat-text {
  max-width: 180px;
  opacity: 1;
}

.shop-order-details-repeat-btn.is-expanded i {
  display: none;
}

.shop-checkout-sending-overlay{
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(1px);
}

.shop-checkout-sending-overlay.hidden{
  display: none !important;
}

.shop-checkout-sending-card{
  min-width: 260px;
  max-width: min(92vw, 360px);
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--color-border, #e2e8f0);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.shop-checkout-sending-spinner{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(249, 115, 22, 0.25);
  border-top-color: #f97316;
  animation: shopCheckoutSpin 0.8s linear infinite;
  flex: 0 0 auto;
}

.shop-checkout-sending-text{
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: var(--color-text, #0f172a);
}

@keyframes shopCheckoutSpin{
  to{ transform: rotate(360deg); }
}

/* ==========================================================================
   Bottom nav (mobile) — pill style (50px / padding 8px / tab 34px)
   ========================================================================== */

.shop-nav,
.shop-bottom-nav{
  position: relative;
  width: 100%;
  height: 50px;

  display: none;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 8px;

  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 10px 22px var(--overlay-bg);
}

/* показываем только на мобилке */
@media (max-width: 768px){
  .shop-nav,
  .shop-bottom-nav{ display: grid; }
}

.shop-nav-btn{
  height: 34px;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  color: var(--color-text-muted);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.shop-nav-btn span{
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  line-height: 1;
  white-space: nowrap;
}

.shop-nav-btn i{
  font-size: 20px;
  line-height: 1;
  color: inherit;
}

/* active: фон-плашка + оранжевая иконка, текст остаётся серым */
.shop-nav-btn.is-active{
  background: var(--primary-14);
}
.shop-nav-btn.is-active i{
  color: var(--shop-buy);
}

/* badge */
.shop-nav-badge{
  position: absolute;
  top: -7px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--shop-buy);
  color: var(--shop-buy-text) !important;
  font-weight: 900;
  font-size: 11px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border: 2px solid var(--shop-buy);
}

.shop-nav-badge.hidden{ display: none; }

/* корзина: подпрыгивание + flash при добавлении */
@keyframes shopNavBounce{
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-4px); }
  60%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

.shop-nav-btn.is-bounce{
  animation: shopNavBounce .35s ease;
}

.shop-nav-btn.is-flash{
  background: var(--primary-25);
}

/* ==========================================================================
   Sheets content
   ========================================================================== */

.shop-sheet-list{
  display: grid;
  gap: 10px;
}

.shop-sheet-row{
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 14px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.shop-sheet-row.is-active{
  border-color: var(--primary-45);
  box-shadow: 0 0 0 3px var(--primary-12);
}

.shop-sheet-row-title{
  font-weight: 900;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-sheet-content{
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 4px 12px;
  box-sizing: border-box;
}

@media (max-width: 768px){
  .shop-sheet-content{
    padding-bottom: calc(200px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   Product Details (modal/sheet)
   ========================================================================== */

.shop-pd{
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-pd-back{
  display: flex;
}

.shop-pd-scroll{
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 8px;
  grid-auto-rows: minmax(min-content, auto);
  align-content: start;
}

@media (max-width: 768px){
  .shop-pd-scroll{
    padding-bottom: calc(var(--shop-bottomnav-h) + 16px + env(safe-area-inset-bottom));
  }
}

.shop-pd-footer{
  position: sticky;
  bottom: 0;
  background: var(--color-surface);
  padding: 4px 12px calc(4px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 768px){
  .shop-pd-footer{
    display: none; /* Скрываем на мобильных, используем единый блок внизу (товары и комбо — shopMobileProductActions) */
  }
}

.shop-pd-fav{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.shop-pd-fav.is-active{
  box-shadow: none;
}

.shop-sheet-fav i,
.shop-pd-fav i,
.shop-product-hero-fav i{
  color: var(--color-text-faint);
}

.shop-pd-head{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: start;
}

.shop-pd-thumb{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.shop-pd-meta{
  min-width: 0;
  display: grid;
  gap: 6px;
}

.shop-pd-title{
  font-weight: 900;
  font-size: 1.2em;
  color: var(--color-text);
  line-height: 1.15;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-pd-sub{
  font-size: 12px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* базовая цена товара под названием (не зависит от опций) */
.shop-pd-baseprice{
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  color: var(--color-text);
}

/* короткое описание под ценой */
.shop-pd-short{
  font-size: 12px;
  line-height: 1.25;
  color: var(--color-text-muted);
}

.shop-pd-prices{
  text-align: right;
  display: grid;
  gap: 4px;
  align-content: start;
}

.shop-pd-old{
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.shop-pd-old.hidden{ display:none; }

.shop-pd-price{
  font-weight: 900;
  color: var(--color-text);
}

.shop-pd-desc{
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.35;
  margin-top: 6px;
}
.shop-pd-options{
  display: grid;
  gap: 6px;
}
.shop-pd-option-accordion{
  border: 0;
  background: transparent;
  contain: layout;
}
.shop-pd-option-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.shop-pd-option-summary::-webkit-details-marker{
  display: none;
}
.shop-pd-option-summary-icon{
  transition: transform 0.2s ease;
}
.shop-pd-option-accordion[open] .shop-pd-option-summary-icon{
  transform: rotate(180deg);
}
.shop-pd-option-cards{
  display: grid;
  gap: 6px;
  margin-top: 4px;
}
.shop-pd-option-card{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: inherit;
  text-align: left;
}
.shop-pd-option-card.has-variants{
  flex-direction: column;
  align-items: stretch;
}
.shop-pd-option-card.is-clickable{
  cursor: pointer;
}
.shop-pd-option-card.is-selected{
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.shop-pd-option-card.is-unavailable{
  opacity: 0.55;
  cursor: not-allowed;
}
.shop-pd-option-card.is-unavailable.is-selected{
  opacity: 1;
  cursor: default;
}

/* Кастомный круглый радио-чекбокс для опций (как в комбо) */
.shop-pd-option-radio{
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--overlay-bg);
  background: transparent;
  display: grid;
  place-items: center;
  position: relative;
  transition: all 0.2s;
  cursor: pointer;
}
.shop-pd-option-radio.is-checked{
  border-color: var(--shop-buy);
  background: var(--shop-buy);
}
.shop-pd-option-radio.is-checked::after{
  content: "\2713";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--shop-buy-text);
  font-size: 18px;
  font-weight: 700;
}

.shop-pd-option-thumb{
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--color-bg);
  flex: 0 0 auto;
}
/* placeholder "—" когда нет фото: центрируем текст */
div.shop-pd-option-thumb{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-muted);
}
.shop-pd-option-info{
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.shop-pd-option-name{
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.shop-pd-option-price{
  font-size: 12px;
  color: var(--color-text-muted);
}
.shop-pd-option-qty{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shop-pd-option-qty-btn{
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: 1px solid var(--shop-buy);
  border-radius: 50%;
  background: var(--shop-buy);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  gap: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  transform-origin: center center;
  transform: scale(1);
  box-shadow: 0 4px 10px rgba(255, 136, 0, 0.24);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.14s ease, box-shadow 0.14s ease, color 0.14s ease, filter 0.14s ease;
  cursor: pointer;
}
.shop-pd-option-qty-btn:hover:not(:disabled){
  background: var(--shop-buy);
  border-color: var(--shop-buy);
  color: #fff;
  filter: brightness(1.03);
  box-shadow: 0 6px 12px rgba(255, 136, 0, 0.3);
  transform: scale(1);
}
.shop-pd-option-qty-btn:active:not(:disabled),
.shop-pd-option-qty-btn.is-pressed:not(:disabled){
  background: #ef7600;
  border-color: #ef7600;
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(255, 136, 0, 0.2), 0 8px 14px rgba(255, 136, 0, 0.36);
}
.shop-pd-option-qty-btn:disabled{
  background: #eef0f3;
  border-color: #e0e5ea;
  color: #9ca3ad;
  transform: none;
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}
.shop-pd-option-qty-value{
  min-width: 16px;
  text-align: center;
  font-weight: 700;
}
.shop-pd-accordion{
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.shop-pd-accordion-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.shop-pd-accordion-summary::-webkit-details-marker{
  display: none;
}
.shop-pd-accordion-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.shop-pd-accordion-toggle-icon{
  transition: transform 0.2s ease;
}
.shop-pd-accordion[open] .shop-pd-accordion-toggle-icon{
  transform: rotate(180deg);
}
.shop-pd-action{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-right: 18px;
  padding-left: 18px;
}

/* Зачёркнутая старая цена (комбо) */
.shop-pd-action .shop-pd-action-old{
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  line-height: 1.2;
}

/* Цена сверху */
.shop-pd-action .shop-pd-action-price,
.shop-pd-action .shop-checkout-total{
  font-weight: 900;
  font-size: inherit;
  line-height: 1.2;
}

/* Текст "в корзину" снизу */
.shop-pd-action .shop-pd-action-label{
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0.9;
}

/* ================= Ingredients ================= */
.shop-pd-ingredients{
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.shop-pd-section-title{
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.shop-pd-ingredient-block{
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-bg-secondary);
  border-radius: var(--shop-radius);
  align-items: center;
}

.shop-pd-ingredient-photo{
  width: 36px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.shop-pd-ingredient-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-pd-ingredient-info{
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.shop-pd-ingredient-name{
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
}

.shop-pd-ingredient-controls{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.shop-pd-ingredient-controls .qty-btn{
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  border: 1px solid var(--shop-buy);
  background: var(--shop-buy);
  color: #fff;
  cursor: pointer;
  transform: scale(1);
  box-shadow: 0 4px 10px rgba(255, 136, 0, 0.24);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.14s ease, box-shadow 0.14s ease, color 0.14s ease, filter 0.14s ease;
}

.shop-pd-ingredient-controls .qty-btn:hover:not(:disabled){
  filter: brightness(1.03);
  box-shadow: 0 6px 12px rgba(255, 136, 0, 0.3);
}

.shop-pd-ingredient-controls .qty-btn:active:not(:disabled),
.shop-pd-ingredient-controls .qty-btn.is-pressed:not(:disabled){
  background: #ef7600;
  border-color: #ef7600;
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(255, 136, 0, 0.2), 0 8px 14px rgba(255, 136, 0, 0.36);
}

.shop-pd-ingredient-controls .qty-btn:disabled{
  background: #eef0f3;
  border-color: #e0e5ea;
  color: #9ca3ad;
  opacity: 1;
  transform: none;
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}

.shop-pd-ingredient-controls .qty-display{
  min-width: 70px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
}

.shop-pd-ingredient-price{
  flex-shrink: 0;
  text-align: right;
}

.shop-pd-ingredient-price .ingredient-total {
  font-weight: 600;
  color: var(--color-text);
  font-size: 14px;
  white-space: nowrap;
}

.shop-pd-ingredient-qty-fixed{
  font-size: 13px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}


.shop-product-hero{
  position: relative;
}

.shop-product-hero-media{
  width: min(350px, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: var(--color-surface, var(--color-white));
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px){
  .shop-product-hero-media{
    width: min(300px, 100%);
    aspect-ratio: auto;
    height: 250px;
  }
}

.shop-product-hero-image{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;   /* ключевое */
  object-position: center;
  display: block;
}

/* стрелки (desktop) */
.shop-product-hero-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--on-primary);
  color: var(--color-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
}

.shop-product-hero-arrow.is-prev{ left: 10px; }
.shop-product-hero-arrow.is-next{ right: 10px; }

.shop-product-hero-arrow:hover{
  box-shadow: 0 8px 18px var(--overlay-bg);
}

html[data-theme="dark"] .shop-product-hero-arrow{
  background: var(--on-primary);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* dots */
.shop-product-hero-dots{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.shop-product-hero-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--on-primary);
  cursor: pointer;
  transition: width .18s ease, background-color .18s ease;
}

.shop-product-hero-dot.is-active{
  width: 18px;             /* активная точка шире */
  background: var(--on-primary);
}

html[data-theme="dark"] .shop-product-hero-dot{
  background: var(--on-primary);
}

html[data-theme="dark"] .shop-product-hero-dot.is-active{
  background: var(--on-primary);
}

/* мобильная: стрелки скрываем */
@media (max-width: 768px){
  .shop-product-hero-arrow{
    display: none;
  }
}

.shop-product-hero-meta{
  margin-top: 8px;
  padding: 0 4px;
}

.shop-product-hero-title{
  font-weight: 900;
  font-size: 1.25em;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
}

/* ==========================================================================
   Auth sheet placeholder
   ========================================================================== */

.shop-auth{
  display: grid;
  gap: 16px;
  max-width: 320px;
  margin: 40px auto 0;
  text-align: center;
}
@media (max-width: 768px){
  .app-modal-body .shop-auth{
    margin-top: 196px;
  }
}

.shop-auth-title{
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text);
}

.shop-auth-text{
  font-size: 14px;
}

.shop-auth-form{
  display: grid;
  gap: 16px;
}
.shop-auth-error{
  color: var(--color-danger, var(--shop-danger));
  font-size: 12px;
}
.shop-auth .field-label{
  display: none;
}
.shop-auth .control{
  border-radius: 999px;
  padding-left: 24px;
  padding-right: 24px;
  height: 52px;
  font-size: 22px;
  font-weight: 700;
  text-align: left;
  letter-spacing: 3px;
  width: 100%;
  box-sizing: border-box;
}
.shop-auth .btn{
  border-radius: 999px;
  height: 52px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-auth .control.is-invalid{
  border-color: var(--color-danger, var(--shop-danger));
  box-shadow: 0 0 0 2px var(--primary-14);
}
.shop-auth-bday-input-wrap{
  position: relative;
}
.shop-auth-bday-input-wrap .control{
  padding-right: 40px;
}
.shop-auth-bday-info-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
.shop-auth-bday-info-btn i{
  font-size: 11px;
}
.shop-auth-bday-info-btn:hover{
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.shop-auth-bday-info-btn:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.shop-auth-bday-info-hint{
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  max-width: min(280px, calc(100vw - 48px));
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.3;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  z-index: 5;
  text-align: left;
}
.shop-auth-code-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}
.shop-auth-code-wrap.hidden{
  display:none;
}
.shop-auth-code-cell{
  width:56px;
  height:56px;
  border-radius:16px;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  text-align:center;
  font-size:26px;
  font-weight:700;
  line-height:1;
  padding:0;
  box-sizing:border-box;
}
.shop-auth-code-cell:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--primary-14);
}
.shop-auth-social-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-top:4px;
}
.shop-auth-social-btn{
  width:56px;
  height:56px;
  border-radius:16px;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  transition:transform var(--dur-fast, 220ms) var(--ease-smooth, cubic-bezier(.2,.8,.2,1)), box-shadow var(--dur-fast, 220ms) var(--ease-smooth, cubic-bezier(.2,.8,.2,1));
}
.shop-auth-social-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,0.10);
}
.shop-auth-social-btn:disabled{
  opacity:.7;
  cursor:not-allowed;
}
.shop-auth-social-btn.is-loading{
  opacity:.5;
}
.shop-auth-social-btn img{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.shop-address-chip{
  cursor:pointer;
  max-width:280px;
  min-width:200px;
  min-height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.shop-address-content{
  padding-top:4px;
}

#shopCartPanel #shopAddressContent .shop-address-list-view{
  display:flex;
  flex-direction:column;
  min-height:100%;
  height:100%;
}

#shopCartPanel #shopAddressContent .shop-address-list,
#shopCartPanel #shopAddressContent .shop-pickup-inline-list{
  flex:1;
  min-height:0;
  overflow:auto;
}

#shopCartPanel #shopAddressContent .shop-address-confirm-wrap{
  margin-top:auto;
  padding:12px 0 2px;
  border-top:1px solid var(--color-border);
  background:var(--color-surface);
}

#shopCartPanel #shopAddressContent .shop-address-confirm-btn{
  width:100%;
}

#shopCartPanel #shopAddressContent .shop-address-confirm-btn:disabled{
  opacity:0.5;
  cursor:default;
  pointer-events:none;
}

/* Delivery / Pickup toggle */
.shop-delivery-toggle-wrap{
  display:flex;
  justify-content:center;
  flex:1;
  padding:0;
}
.shop-delivery-toggle{
  display:inline-flex;
  border-radius:999px;
  background:var(--color-surface-2);
  padding:0;
  gap:0;
}
.shop-delivery-toggle-btn{
  border:none;
  outline:none;
  cursor:pointer;
  padding:8px 22px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:600;
  transition:background .2s, color .2s, box-shadow .2s;
  background:transparent;
  color:var(--color-text-muted);
}
.shop-delivery-toggle-btn.is-active{
  background:var(--color-primary);
  color:var(--color-white);
  box-shadow:0 1px 4px var(--overlay-bg);
}

/* Inline pickup list inside address view */
.shop-pickup-inline-list{
  display:flex;
  flex-direction:column;
}
.shop-pickup-city{
  font-size:.8rem;
  color:var(--color-text-muted);
  margin-bottom:1px;
}
.shop-pickup-address{
  font-size:1rem;
  font-weight:700;
  color:var(--color-text);
}
.shop-pickup-status{
  font-size:.78rem;
  font-weight:600;
  margin-top:3px;
}
.shop-pickup-status.is-open{color:var(--color-primary)}
.shop-pickup-status.is-closed{color:var(--color-primary)}
.shop-pickup-info-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:6px;
  font-size:.85rem;
}
.shop-pickup-info-label{
  color:var(--color-text-muted);
  white-space:nowrap;
}
.shop-pickup-info-value{
  color:var(--color-text);
}
.shop-pickup-phone-link{
  color:var(--color-primary);
  text-decoration:none;
  font-weight:500;
}

.shop-address-list-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  padding:0 4px;
}
.shop-address-list-title{
  font-size:1.05rem;
  font-weight:700;
  color:var(--color-text);
}

/* Pickup list header */
.shop-pickup-list-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  padding:0 4px;
  gap:12px;
}
.shop-pickup-list-title{
  font-size:1.05rem;
  font-weight:700;
  color:var(--color-text);
}
.shop-pickup-city-selector{
  position:relative;
  flex-shrink:0;
}

/* Chip-style for city selector (matches .shop-address-new-btn) */
.chip-city{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 14px;
  border-radius:999px;
  background:none;
  border:1px solid var(--color-border);
  color:var(--color-text-muted);
  font-weight:600;
  font-size:.82rem;
  cursor:pointer;
  white-space:nowrap;
}
.chip-city-arrow{
  font-size:10px;
  transition:transform 0.2s;
}
.chip-city.is-open .chip-city-arrow{
  transform:rotate(180deg);
}

/* Dropdown for cities */
.chip-city-dropdown{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  min-width:160px;
  max-width:250px;
  max-height:300px;
  overflow-y:auto;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:8px;
  box-shadow:0 4px 12px var(--overlay-bg);
  z-index:100;
  padding:4px;
}
.chip-city-dropdown.hidden{
  display:none;
}
.chip-city-option{
  display:block;
  width:100%;
  padding:8px 12px;
  background:transparent;
  border:none;
  border-radius:4px;
  text-align:left;
  color:var(--color-text);
  font-size:0.9rem;
  cursor:pointer;
  transition:background 0.15s;
}
.chip-city-option:hover{
  background:var(--color-surface-2);
}
.chip-city-option.is-selected{
  background:var(--primary-14);
  color:var(--primary);
  font-weight:600;
}

.shop-address-new-btn,
.shop-address-list-top .chip-plus{
  border:1px solid var(--color-border);
  border-radius:999px;
  background:none;
  color:var(--color-text-muted);
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  padding:5px 14px;
  height:auto;
}

.shop-address-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.shop-address-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 4px;
  border-bottom:1px solid var(--color-border);
  cursor:pointer;
}
.shop-address-row:last-child{border-bottom:none}
.shop-address-row:active{
  background:var(--color-surface-2);
}
.shop-address-radio{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid var(--color-border);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s;
}
.shop-address-radio::after{
  content:"";
  width:12px;
  height:12px;
  border-radius:50%;
  background:transparent;
  transition:background .15s;
}
.shop-address-row.is-selected .shop-address-radio{
  border-color:var(--color-primary);
}
.shop-address-row.is-selected .shop-address-radio::after{
  background:var(--color-primary);
}

.shop-address-row-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.shop-address-row-title{font-weight:800;}
.shop-address-row-sub{
  margin-top:4px;
  font-size:13px;
  color:var(--color-text-2);
}

.shop-address-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.shop-address-actions .btn{
  padding:6px 10px;
  height:32px;
  border-radius:10px;
}

.shop-address-form-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.shop-address-form-actions .btn{flex:1;}
.shop-address-form-grid{
  display:grid;
  gap:12px;
}

.shop-address-form-row{
  display:grid;
  gap:6px;
}

.shop-address-form-row--grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}

@media (max-width: 640px){
  .shop-address-form-row--grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.shop-address-form-field{
  display:grid;
  gap:6px;
  min-width:0;
}

.shop-address-form-field .control{
  width: 100%;
  min-width: 0;
}

/* Checkout: read-only address + change */
.shop-checkout-address-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.shop-checkout-change-address{
  padding:6px;
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  white-space: nowrap;
}
.shop-checkout-address input[readonly]{
  background:var(--color-surface-2);
}

.shop-cart-body{
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.shop-cart{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.shop-cart-content,
.shop-address-content,
.shop-checkout-content,
.shop-profile-content,
.shop-product-content{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 12px;
}

.shop-checkout-content{
  padding-top: 12px;
}

.shop-profile-header-actions{
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.shop-profile-header-actions.hidden{
  display: none;
}

@media (min-width: 769px){
  #shopProfileSettingsBtn{
    display: none !important;
  }
}

.shop-profile-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: grid;
  min-width: 200px;
  z-index: 10;
}

.shop-profile-photo-menu{
  left: 0;
  right: auto;
  z-index: 20;
}

.shop-profile-menu.hidden{
  display: none;
}

.shop-profile-menu-item{
  padding: 10px 12px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}

.shop-profile-menu-item:hover{
  background: var(--color-surface-2);
}

.shop-profile{
  display: grid;
  gap: 16px;
  overflow-x: hidden;
}

.shop-profile-top{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: start;
  overflow: visible;
}

.shop-profile-top.hidden,
.shop-profile-tabs.hidden {
  display: none !important;
}

@media (max-width: 640px){
  .shop-profile-top{
    grid-template-columns: 120px 1fr;
    align-items: center;
  }
}

.shop-profile-photo{
  width: 160px;
  height: 160px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.shop-profile-photo-wrap{
  display: grid;
  gap: 8px;
  align-content: start;
  position: relative;
  overflow: visible;
}

.shop-profile-photo-actions{
  width: 100%;
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.shop-profile-photo-actions .shop-profile-photo-btn{
  width: 100%;
}

.shop-profile-photo-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-profile-photo-placeholder{
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 8px;
}

.shop-profile-photo-btn{
  font-size: 12px;
  padding: 6px 8px;
}

.shop-profile-photo-btn--ghost{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.shop-profile-info{
  display: grid;
  gap: 8px;
}

.shop-profile-rows{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.shop-profile-row-text{
  min-width: 0;
  flex: 1;
}

.shop-profile-card--compact{
  padding: 10px;
}

.shop-address-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex:1;
  min-width:0;
}

.shop-address-card-main{
  min-width: 0;
  flex:1;
  display: grid;
  gap: 4px;
}

.shop-address-card-title{
  font-weight: 500;
  font-size: .9rem;
  line-height: 1.3;
}

.shop-address-card-sub{
  font-size: 12px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-address-card-hours{
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.shop-address-row.is-closed{
  opacity: 0.6;
}

.shop-address-row.is-closed .shop-address-card-hours{
  color: var(--color-primary);
}

.shop-address-actions--compact{
  margin-top: 0;
}

.shop-address-action-icon{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.shop-address-action-icon.is-default{
  color: var(--shop-gray-400);
}

.shop-address-action-icon.is-default.is-active{
  color: var(--shop-amber-500);
}

.shop-address-action-icon.is-default:disabled{
  opacity: 0.7;
  cursor: default;
}

.shop-address-action-icon.is-danger{
  color: var(--color-danger, var(--shop-danger));
}

.shop-address-action-icon.is-confirm{
  width: auto;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-danger, var(--shop-danger));
  background: var(--color-surface-2);
}

.shop-profile-address-toggle{
  align-self: flex-start;
  width: auto;
}

.shop-chip-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  cursor: pointer;
}

.shop-chip-btn:hover{
  background: var(--color-surface-2);
}

.shop-profile-settings{
  display: grid;
  gap: 12px;
}

.shop-profile-settings-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shop-profile-settings-title{
  font-weight: 700;
}

.shop-profile-settings-row .switch-text{
  display: none;
}

.shop-profile-logout-btn{
  width: 100%;
  color: var(--color-primary);
  border-color: var(--color-primary);
  margin-top: 8px;
}
.shop-profile-logout-btn:hover{
  background: var(--color-primary);
  color: var(--color-white);
}

@media (max-width: 640px){
  .shop-profile-photo{
    width: 120px;
    height: 120px;
  }
}

.shop-checkout-grid-row{
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.shop-checkout-delivery-info{
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.shop-checkout-discount-row{
  color: var(--color-primary);
}
.shop-checkout-discount-label-wrap{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.shop-checkout-discount-info-btn{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
.shop-checkout-discount-info-btn i{
  font-size: 10px;
}
.shop-checkout-discount-info-btn:hover{
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.shop-checkout-discount-info-btn:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.shop-checkout-discount-value{
  font-weight: 600;
  color: var(--color-primary);
}
.shop-checkout-discount-breakdown{
  display: none;
  margin-top: 6px;
  margin-bottom: 2px;
  padding: 10px;
  border-radius: 10px;
  border: 1px dashed var(--color-border);
  background: var(--color-surface-2);
}
.shop-checkout-discount-breakdown.is-open{
  display: grid;
  gap: 6px;
}
.shop-checkout-discount-breakdown-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.shop-checkout-discount-breakdown-label{
  color: var(--color-text-muted);
}
.shop-checkout-discount-breakdown-value{
  color: var(--color-primary);
  font-weight: 600;
}
.shop-checkout-discount-breakdown-note{
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-text-muted);
}
.shop-checkout-total-row{
  margin-top: 6px;
  font-weight: 700;
}

@media (max-width: 768px){
  .shop-checkout-discount-breakdown{
    padding: 8px;
  }
  .shop-checkout-discount-breakdown-row{
    font-size: 12px;
  }
}

.shop-checkout-grid-row .control{
  min-width: 0;
  width: 100%;
}

.shop-checkout-grid-row--two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shop-checkout-method-block{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.shop-checkout-method-picker{
  display:flex;
  align-items:stretch;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
  --carousel-side-pad: 0px;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
}

.shop-checkout-method-pill{
  --carousel-focus: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:120px;
  padding:10px 14px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--color-text);
  cursor:pointer;
  transform:scale(calc(0.84 + (var(--carousel-focus) * 0.16)));
  opacity:calc(0.65 + (var(--carousel-focus) * 0.35));
  transition:background-color .1s ease, color .1s ease, transform .07s linear, opacity .07s linear;
  scroll-snap-align:center;
  scroll-snap-stop:always;
}

.shop-checkout-method-picker{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.shop-checkout-method-picker::-webkit-scrollbar{
  width:0;
  height:0;
}
.shop-checkout-method-spacer{
  flex:0 0 var(--carousel-side-pad);
  pointer-events:none;
}

.shop-checkout-method-pill-icon{
  width:80px;
  height:80px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  font-size:40px;
  transform:scale(calc(0.72 + (var(--carousel-focus) * 0.28)));
  transform-origin:center;
  transition:transform .07s linear, background-color .1s ease, color .1s ease, box-shadow .1s ease;
}

.shop-checkout-method-pill-icon-img{
  width:80px;
  height:80px;
  object-fit:contain;
}

.shop-checkout-method-pill-title{
  font-size:13px;
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
  color:var(--color-text-muted);
}

.shop-checkout-method-pill:hover{
  background:transparent;
}

.shop-checkout-method-pill.is-active{
  background:transparent;
}

.shop-checkout-method-pill.is-active .shop-checkout-method-pill-icon{
  background:color-mix(in srgb, var(--color-primary) 14%, var(--color-surface-2));
  color:var(--color-primary);
  box-shadow:0 7px 18px rgba(107, 114, 128, 0.35);
}

.shop-checkout-method-pill.is-active .shop-checkout-method-pill-title{
  color:var(--color-text);
}

.shop-checkout-name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-checkout .control.is-invalid{
  border-color: var(--color-danger, #ef4444);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

.shop-checkout-phone{
  width: 180px;
}

.shop-checkout-comment{
  border-radius: 999px;
  padding-inline: 16px;
}

.shop-checkout-footer-comment-input,
.shop-mobile-checkout-comment-input{
  display: block;
  width: 100%;
  min-height: 40px;
  height: 40px;
  max-height: 150px;
  resize: none;
  overflow-y: hidden;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  line-height: 1.25;
  padding-top: 10px;
  padding-bottom: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shop-checkout-footer-comment-input::-webkit-scrollbar,
.shop-mobile-checkout-comment-input::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

.shop-checkout-footer-comment-input.is-expanded,
.shop-mobile-checkout-comment-input.is-expanded{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-y: auto;
  text-overflow: clip;
  border-radius: 16px;
}

.shop-checkout-dropdown-wrap{
  position: relative;
  width: 100%;
}
.shop-checkout-dropdown-wrap:has(.shop-checkout-dropdown.is-open){
  z-index: 1000;
}

.shop-checkout-select{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  font-weight: 700;
  width: 100%;
  justify-content: space-between;
}

.shop-checkout-time-static-label:disabled{
  opacity: 1;
  cursor: default;
}

.shop-checkout-select::after{
  content: "\25BE";
  font-size: 12px;
  color: var(--color-text-muted);
}

.shop-checkout-change-custom{
  margin-top: 0;
  width: calc((100% - 8px) / 2);
  border-radius: 999px;
  text-align: center;
}

.shop-checkout-change{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.shop-checkout-change > .shop-checkout-time-wheel-wrap,
.shop-checkout-change > .shop-checkout-change-noncash{
  width: calc((100% - 8px) / 2);
}
.shop-checkout-change .shop-checkout-select{
  justify-content: center;
  text-align: center;
}
.shop-checkout-change.is-combined{
  gap:0;
  width: calc((100% - 8px) / 2);
  margin-inline:auto;
  border:1px solid var(--color-border);
  border-radius:26px;
  background:var(--color-surface);
  overflow:visible;
  position:relative;
}
.shop-checkout-change.is-combined > .shop-checkout-time-wheel-wrap,
.shop-checkout-change.is-combined > .shop-checkout-change-custom{
  width:100%;
}
.shop-checkout-change.is-combined > .shop-checkout-time-wheel-wrap.is-open{
  z-index:1200;
}
.shop-checkout-change.is-combined > .shop-checkout-time-wheel-wrap .shop-checkout-time-wheel-trigger{
  height:40px;
  min-height:40px;
}
.shop-checkout-change.is-combined > .shop-checkout-time-wheel-wrap .shop-checkout-select{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.shop-checkout-change.is-combined > .shop-checkout-change-custom{
  height:40px;
  min-height:40px;
  margin-top:0;
  border:0;
  border-top:1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding-top:0;
  padding-bottom:0;
  text-align:center;
}


.shop-checkout-dropdown{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: none;
  z-index: 1000;
}

.shop-checkout-dropdown.is-open{
  display: grid;
}

/* Убираем overflow у родителей когда dropdown или time wheel открыт — чтобы список не обрезался.
   Ограничиваем это поведение десктопом: на мобилке изменение overflow дергает bottom sheet
   и уводит пользователя в начало формы. */
@media (min-width: 769px){
  .shop-checkout-content:has(.shop-checkout-dropdown.is-open),
  .shop-checkout-content:has(.shop-checkout-time-wheel-panel.is-open),
  .app-modal-body:has(.shop-checkout-dropdown.is-open),
  .app-modal-body:has(.shop-checkout-time-wheel-panel.is-open),
  .panel-body:has(.shop-checkout-dropdown.is-open),
  .panel-body:has(.shop-checkout-time-wheel-panel.is-open){
    overflow: visible !important;
  }
}

.shop-checkout-option{
  padding: 8px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-weight: 600;
}

.shop-checkout-option:hover{
  background: var(--color-surface-2);
}

.shop-checkout-address-field{
  position: relative;
  width: 100%;
}

.shop-checkout-address-field input{
  padding-right: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-checkout-address-field .shop-checkout-change-address{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.shop-checkout-address-row{
  display: none;
}

.shop-checkout-time-input{
  margin-top: 8px;
}
.shop-checkout-time-row{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:6px;
}
.shop-checkout-time-row .shop-checkout-dropdown-wrap{
  flex:1;
}
.shop-checkout-time-input--manual,
.shop-checkout-time-input--slots{
  flex:1;
}
.shop-checkout-time-input--slots{
  margin-top:0;
}

/* === "На дату" date selector === */
/* Row 1: [На дату ▾] + [Другой день] или [Ко времени ▾] + [19:00 ▾] */
.shop-checkout-date-row1{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  margin-top:6px;
}
.shop-checkout-date-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:inherit;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  width:100%;
}
.shop-checkout-date-toggle:hover{
  background:var(--color-surface-2);
}
/* Секция под первым рядом */
.shop-checkout-time-input--ondate{
  margin-top:6px;
}
.shop-checkout-date-calendar{
  position:relative;
  margin-bottom:0;
  overflow:visible;
}
.shop-checkout-date-calendar .date-popover{
  position:absolute;
  top:50%;
  left:50%;
  right:auto;
  width:236px;
  transform:translate(-50%, -50%);
  z-index:1200;
}
.shop-checkout-date-calendar .date-popover{
  padding: 8px;
  gap: 6px;
  border-radius: 30px;
}
.shop-checkout-date-calendar .icon-btn.btn-xs{
  width:32px;
  height:32px;
  border-radius:999px;
  padding:0;
}
.shop-checkout-date-calendar .date-popover-title{
  font-size: 13px;
}
.shop-checkout-date-calendar .date-weekdays{
  font-size: 10px;
  gap: 3px;
}
.shop-checkout-date-calendar .date-grid{
  gap: 3px;
}
.shop-checkout-date-calendar .date-cell,
.shop-checkout-date-calendar .date-empty{
  height: 30px;
}
.shop-checkout-date-calendar .date-cell{
  border-radius: 30px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.shop-checkout-date-calendar .date-cell.is-start,
.shop-checkout-date-calendar .date-cell.is-end{
  border-color: transparent;
}
.shop-checkout-date-calendar .date-cell.is-past{
  opacity: 0.5;
}
/* Row 2: [дата] + [слоты времени] — 50/50 */
.shop-checkout-date-row2{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}
.shop-checkout-time-stack.is-combined{
  gap:0;
  width: calc((100% - 8px) / 2);
  margin-inline:auto;
  border:1px solid var(--color-border);
  border-radius:26px;
  background:var(--color-surface);
  overflow:visible;
  position:relative;
}
.shop-checkout-time-stack.is-combined .shop-checkout-dropdown-wrap,
.shop-checkout-time-stack.is-combined .shop-checkout-time-input--slots{
  width:100%;
}
.shop-checkout-time-stack.is-combined .shop-checkout-time-stack-divider{
  border-top:1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
}
.shop-checkout-time-stack.is-combined .shop-checkout-select{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.shop-checkout-time-stack.is-combined .shop-checkout-select:hover{
  background:transparent;
}
.shop-checkout-date-row1 .shop-checkout-dropdown-wrap,
.shop-checkout-date-row2 .shop-checkout-dropdown-wrap{
  width: calc((100% - 8px) / 2);
}
.shop-checkout-date-row1 .shop-checkout-select,
.shop-checkout-date-row2 .shop-checkout-select{
  justify-content: center;
  text-align: center;
}
.shop-checkout-date-row1 .shop-checkout-select::after,
.shop-checkout-date-row2 .shop-checkout-select::after{
  right: 12px;
}
.shop-checkout-time-input--slots{
  width: calc((100% - 8px) / 2);
}
.shop-checkout-time-input--slots .shop-checkout-dropdown-wrap{
  width: 100%;
}
/* dateDisplay стилизуется через .shop-checkout-select, убираем стрелку */
.shop-checkout-date-display.shop-checkout-select::after{
  content:none;
}

/* === Time wheel (Apple-style): поверх контента, значение по центру === */
.shop-checkout-time-wheel-wrap{
  position: relative;
  width: 100%;
}
.shop-checkout-time-wheel-wrap.is-open{
  z-index: 1200;
}
.shop-checkout-time-wheel-trigger{
  width: 100%;
  min-height:40px;
  height:40px;
}
.shop-checkout-time-stack.is-combined .shop-checkout-select{
  height:40px;
  min-height:40px;
  padding-top:0;
  padding-bottom:0;
}
/* Панель раскрывается в обе стороны: центр (серая полоса) на месте кнопки */
.shop-checkout-time-wheel-panel{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 1001;
  transform: translateY(-50%);
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 30px;
  box-shadow: 0 8px 24px var(--overlay-bg), 0 2px 8px var(--overlay-bg);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.15s, opacity 0.15s ease;
  pointer-events: none;
}
.shop-checkout-time-wheel-panel.is-open{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* Обёртка: полоса выделения сзади, контент спереди — значение видно по центру */
.shop-checkout-time-wheel-panel-inner{
  position: relative;
  height: 220px;
}
/* Полоса выделения ЗА контентом (z-index 0), чтобы цифры были поверх и по центру */
.shop-checkout-time-wheel-panel-inner::before{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  border-radius: 30px;
  background: var(--color-surface-2);
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 0 0 1px var(--color-border);
}
.shop-checkout-time-wheel-scroll{
  position: relative;
  z-index: 1;
  height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to bottom, transparent 0%, var(--color-black) 30%, var(--color-black) 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--color-black) 30%, var(--color-black) 70%, transparent 100%);
}
.shop-checkout-time-wheel-scroll::-webkit-scrollbar{
  display: none;
}
.shop-checkout-time-wheel-pad{
  flex-shrink: 0;
  pointer-events: none;
}
.shop-checkout-time-wheel-item{
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
  line-height: 1;
}
.shop-checkout-time-wheel-item:hover{
  background: transparent;
}
.shop-checkout-time-wheel-item:active{
  background: transparent;
}

/* Серый qty-pill в карточке товара на мобильных */
@media (max-width: 768px) {
  .shop-mobile-product-actions .qty-pill {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
  }
  
  .shop-mobile-product-actions .qty-pill:hover {
    background: var(--color-surface-2) !important;
  }
  
  .shop-mobile-product-actions .qty-pill__btn {
    color: var(--color-text-muted) !important;
    background: transparent !important;
  }
  
  .shop-mobile-product-actions .qty-pill__btn:not(.is-disabled):hover {
    color: var(--color-text) !important;
    background: var(--shop-hover-dark) !important;
  }
  
  .shop-mobile-product-actions .qty-pill__center {
    color: var(--color-text) !important;
  }
  
  .shop-mobile-product-actions .qty-pill__btn.is-disabled {
    opacity: 0.4;
  }
}

.shop-pd-footer .qty-pill{
  flex: 1;
  justify-content: center;
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
@media (min-width: 769px){
  .shop-pd-footer .qty-pill{
    --qty-pill-h: 52px;
    --qty-pill-side: 52px;
  }
}
.shop-profile-line{
  display: grid;
  gap: 4px;
}

.shop-profile-line-title{
  font-size: 12px;
  color: var(--color-text-muted);
}

.shop-profile-line-value{
  font-weight: 800;
  color: var(--color-text);
}

.shop-profile-name-value{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.shop-profile-name-edit{
  width: 28px;
  height: 28px;
  font-size: .75rem;
  color: var(--color-text-muted, var(--color-text-faint));
  flex-shrink: 0;
}
.shop-profile-name-edit:hover{
  color: var(--color-primary);
}
.shop-profile-name-edit.hidden{ display: none; }

.shop-profile-name-input{
  width: 100%;
  margin-top: 0;
  flex-basis: 100%;
}

.shop-profile-name-actions{
  display: flex;
  gap: 8px;
  margin-top: 2px;
  flex-basis: 100%;
}

.shop-profile-name-input.hidden,
.shop-profile-name-text.hidden,
.shop-profile-name-actions.hidden{
  display: none;
}

.shop-profile-tabs{
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.shop-profile-tabs::-webkit-scrollbar{
  display: none;
}

/* Hide universal modal footer in shop */
body.page-shop .app-modal-footer{
  display:none;
}
body.page-shop .app-modal-body::after{
  height:0;
}

@media (max-width: 768px){
  body.page-shop .app-modal{
    top: calc(var(--header-height) + var(--shop-sheet-top-gap));
    bottom: 0;
    height: calc(100dvh - var(--header-height) - var(--shop-sheet-top-gap));
    max-height: calc(100dvh - var(--header-height) - var(--shop-sheet-top-gap));
  }
}

.shop-profile-tab{
  flex: 0 0 auto;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
}

.shop-profile-tab.is-active{
  color: var(--color-text);
  border-color: var(--shop-buy);
}

.shop-profile-tab-panel{
  display: none;
  min-width: 0;
  overflow-x: hidden;
}

.shop-profile-tab-panel.is-active{
  display: grid;
  gap: 12px;
}

.shop-profile-list{
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.shop-profile-card{
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--color-surface);
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.shop-profile-order-photos{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.shop-profile-order-photos::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

.shop-profile-order-photo{
  width: 50px;
  height: 50px;
  min-width: 50px;
  flex: 0 0 50px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.shop-favorites-list{
  display: grid;
  gap: 10px;
}

.shop-favorites-chips-wrap{
  display: block;
  width: min(520px, 100%);
  margin: 0 auto 8px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-surface);
}

.shop-favorites-chips{
  padding-left: 0;
  padding-right: 0;
}

.shop-favorites-sheet .shop-favorites-category-header{
  margin-top: 6px;
}

.shop-favorites-sheet .shop-favorites-category-header:first-child{
  margin-top: 0;
}

.shop-favorites-sheet{
  padding-top: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.shop-favorites-sheet::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

.shop-favorites-card{
  display: grid;
  gap: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

.shop-favorites-card .cart-row{
  margin-bottom: 0;
}

.shop-favorite-swipe-container{
  --favorite-swipe-reveal: 68px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-surface);
}

.shop-favorite-swipe-content{
  position: relative;
  z-index: 2;
  background: var(--color-surface);
  will-change: transform;
  touch-action: pan-y;
}

.shop-favorite-swipe-action{
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--favorite-swipe-reveal);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-text-faint);
  font-size: 18px;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.shop-favorite-swipe-action i{
  font-size: 18px;
  line-height: 1;
}

.shop-favorite-swipe-action--add{
  left: 0;
  transform: translateX(-8px);
}

.shop-favorite-swipe-action--remove{
  right: 0;
  color: var(--color-primary);
  transform: translateX(8px);
}

.shop-order-repeat-swipe-container .shop-favorite-swipe-action--remove{
  color: var(--color-text-faint);
}

.shop-favorite-swipe-container.is-swipe-right .shop-favorite-swipe-action--add,
.shop-favorite-swipe-container.is-swipe-left .shop-favorite-swipe-action--remove,
.shop-favorite-swipe-container.is-open-add .shop-favorite-swipe-action--add,
.shop-favorite-swipe-container.is-open-remove .shop-favorite-swipe-action--remove,
.shop-favorite-swipe-container.is-action-busy .shop-favorite-swipe-action{
  opacity: 1;
  pointer-events: auto;
}

.shop-favorite-swipe-container.is-swipe-right .shop-favorite-swipe-action--add,
.shop-favorite-swipe-container.is-open-add .shop-favorite-swipe-action--add{
  transform: translateX(0);
}

.shop-favorite-swipe-container.is-swipe-left .shop-favorite-swipe-action--remove,
.shop-favorite-swipe-container.is-open-remove .shop-favorite-swipe-action--remove{
  transform: translateX(0);
}

.shop-favorite-swipe-container.is-armed-add .shop-favorite-swipe-action--add,
.shop-favorite-swipe-container.is-armed-remove .shop-favorite-swipe-action--remove{
  filter: brightness(.95);
}

.shop-favorite-swipe-container.is-action-busy{
  pointer-events: none;
}

.shop-favorite-swipe-container.is-add-disabled .shop-favorite-swipe-action--add{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-8px) !important;
}

.shop-favorite-swipe-container.is-unavailable .shop-favorite-swipe-content{
  opacity: .72;
}

.shop-favorite-swipe-container.is-unavailable .cart-old{
  display: none !important;
}

.shop-favorite-swipe-container .cart-price.is-unavailable-label{
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 700;
}

.shop-favorites-card .shop-cart-items{
  gap: 0;
}

@media (max-width: 768px){
  .shop-favorites-sheet{
    padding-left: 0;
    padding-right: 0;
  }

  .shop-favorites-list{
    width: min(520px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}

.shop-favorites-card-actions{
  display: flex;
  justify-content: flex-end;
}

.shop-favorites-remove-btn{
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}

.shop-favorites-remove-btn:hover{
  border-color: var(--shop-buy);
  color: var(--shop-buy);
}

.shop-favorites-remove-btn:disabled{
  opacity: .6;
  cursor: default;
}

.shop-favorites-empty{
  text-align: center;
  padding: 28px 12px;
}

.shop-favorites-auth{
  display: grid;
  gap: 10px;
  justify-items: center;
}

/* Стили карточки скидки в профиле */
.shop-profile-discount-card{
  margin-bottom: 10px;
}
.shop-profile-discount-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.shop-profile-discount-title{
  font-weight: 600;
  font-size: 15px;
  flex: 1;
  min-width: 0;
}
.shop-profile-discount-desc{
  font-size: 13px;
  color: var(--color-text-muted, var(--color-text-dim));
  margin-bottom: 8px;
}
.shop-profile-discount-details{
  font-size: 12px;
  color: var(--color-text-muted, var(--color-text-dim));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shop-profile-discounts-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-profile-empty{
  padding: 20px;
  text-align: center;
  color: var(--color-text-muted, var(--color-text-dim));
  font-size: 14px;
}

.shop-profile-edit{
  display: none;
  gap: 10px;
}

.shop-profile-edit.is-active{
  display: grid;
}

.app-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-modal-body.shop-cart-sheet-body{
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-modal-body.shop-cart-sheet-body .shop-cart-sheet{
  flex: 1;
  min-height: 0;
}

.shop-profile-modal-actions{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.shop-profile-modal-actions .btn{
  height: 32px;
  width: 32px;
  padding: 0;
}

.shop-profile-modal-settings{
  margin: 0;
}

/* ==========================================================================
   Невидимые скроллбары на странице магазина (десктоп и мобилка, прокрутка сохраняется)
   ========================================================================== */
body.page-shop .shop-col .panel-body,
body.page-shop .shop-combo-detail-scroll,
body.page-shop .shop-combo-picker-list,
body.page-shop .shop-combo-picker-variants,
body.page-shop .shop-pd-scroll,
body.page-shop .shop-cart-sheet .shop-product-content .shop-pd-scroll,
body.page-shop .shop-cart-sheet .shop-product-content .shop-combo-detail-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.page-shop .shop-col .panel-body::-webkit-scrollbar,
body.page-shop .shop-combo-detail-scroll::-webkit-scrollbar,
body.page-shop .shop-combo-picker-list::-webkit-scrollbar,
body.page-shop .shop-combo-picker-variants::-webkit-scrollbar,
body.page-shop .shop-pd-scroll::-webkit-scrollbar,
body.page-shop .shop-cart-sheet .shop-product-content .shop-pd-scroll::-webkit-scrollbar,
body.page-shop .shop-cart-sheet .shop-product-content .shop-combo-detail-scroll::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   Utilities / мелкие фиксы
   ========================================================================== */

body.page-shop .panel-body.no-scrollbar.shop-cart-body::after{
  content: "" !important;
  display: block !important;
  height: 0 !important;
}
@media (min-width: 769px){
  body.page-shop .shop-cart-content,
  body.page-shop .shop-cart-sheet .shop-cart-list{
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body.page-shop .shop-cart-content::-webkit-scrollbar,
  body.page-shop .shop-cart-sheet .shop-cart-list::-webkit-scrollbar{
    display: none;
  }
}
@media (max-width: 768px){
  .shop-cart-sheet-footer,
  .shop-cart-footer{
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 768px){
  .shop-profile-content,
  #shopProfileContent{
    padding: 12px 0 calc(12px + var(--shop-sheet-scroll-pad) + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }
}

/* ==========================================================================
   Header (desktop panel) — режим "Товар": ← слева, ♡ справа
   ========================================================================== */

.shop-cart-header{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  row-gap: 8px;
}

.shop-cart-header-left,
.shop-cart-header-right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.shop-cart-header-mode-wrap{
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop-cart-header-mode-wrap .shop-delivery-toggle{
  min-width: 220px;
}

.shop-cart-header.is-address-mode{
  display: block;
}

.shop-cart-header.is-address-mode .shop-cart-header-left,
.shop-cart-header.is-address-mode #shopCartHeaderTitle{
  display: none !important;
}

.shop-cart-header.is-address-mode .shop-cart-header-right{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  min-width: auto;
  z-index: 3;
}

.shop-cart-header.is-address-mode .shop-cart-header-right > :not(#shopCartCloseBtn){
  display: none !important;
}

.shop-cart-header.is-address-mode .shop-cart-header-mode-wrap{
  display: flex !important;
  justify-content: center;
  padding-right: 56px;
}

@media (max-width: 768px){
  .shop-cart-header-mode-wrap{
    display: none !important;
  }
}

#shopCartHeaderTitle{
  flex:1;
  text-align:center;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.shop-cart-back,
.shop-cart-fav{
  width:40px;
  height:40px;
  border:0;
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.shop-cart-back i,
.shop-cart-fav i{ line-height:1; }

/* ==========================================================================
   Cart header: address as title (desktop + sheet)
   ========================================================================== */

.shop-cart-header.is-address-title #shopCartHeaderTitle{
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  text-align: left;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
  cursor: pointer;
}

.shop-cart-header-title-main{
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.shop-cart-header-mode-icon{
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--color-primary);
  line-height: 1;
}

.shop-cart-header-title-text-row{
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.shop-cart-header-title-text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-cart-header-title-sub{
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 500;
  color: var(--color-text-muted);
}

.shop-cart-header-title-arrow{
  flex: 0 0 auto;
  font-size: 11px;
  opacity: .6;
  margin-left: 2px;
}

/* пустое состояние — можно чуть приглушить, если хочешь */
.shop-cart-header.is-address-title #shopCartHeaderTitle.is-empty-address{
  opacity: .9;
}

/* в этом режиме chip справа не показываем вообще */
.shop-cart-header.is-address-title .shop-address-chip{
  display: none !important;
}

@media (max-width: 768px){
  .shop-cart-header-title-sub{
    display: none !important;
  }
}
/* Cart sheet (AppModal): address in title */

.app-modal-header .app-modal-title.is-cart-address-title,
.app-modal-header .modal-title.is-cart-address-title,
.app-modal-header [data-modal-title].is-cart-address-title{
  text-align: left;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* пустой адрес */
.app-modal-header .app-modal-title.is-empty-address,
.app-modal-header .modal-title.is-empty-address,
.app-modal-header [data-modal-title].is-empty-address{
  opacity: .9;
}

/* ===== OPTION ITEM VARIANTS ===== */

/* Шестерёнка для вариантов опции (как в комбо) */
.shop-pd-option-gear-btn{
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.2s, color 0.2s, transform 0.3s ease;
}
.shop-pd-option-gear-btn:hover{
  background: var(--shop-hover-dark);
  color: var(--color-text);
}
.shop-pd-option-gear-btn.is-open{
  color: var(--color-primary);
  transform: rotate(180deg);
}
.shop-pd-option-gear-btn svg{
  display: block;
  width: 18px;
  height: 18px;
}

/* Аккордеон с вариантами */
.shop-pd-option-variant-accordion {
  display: none;
  width: 100%;
  padding: 8px 0 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--border-color, var(--color-border));
}

.shop-pd-option-variant-accordion.is-open {
  display: block;
}

/* Горизонтальный скролл с вариантами */
.shop-pd-option-variant-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}

.shop-pd-option-variant-scroll::-webkit-scrollbar {
  display: none;
}

.shop-pd-option-variant-scroll:active {
  cursor: grabbing;
}

/* Кнопка варианта */
.shop-pd-option-variant-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--border-color, var(--color-border));
  border-radius: 16px;
  background: var(--bg-secondary, var(--color-surface-2));
  color: var(--text-primary, var(--color-text-secondary));
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.shop-pd-option-variant-btn:hover {
  border-color: var(--color-primary);
}

.shop-pd-option-variant-btn.is-selected {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.shop-pd-option-variant-btn.is-unavailable {
  opacity: 0.5;
  cursor: not-allowed;
}
.shop-pd-option-variant-btn.is-unavailable:hover {
  border-color: var(--border-color, var(--color-border));
}
.shop-pd-option-variant-btn.is-unavailable.is-selected {
  opacity: 1;
  cursor: default;
}

/* Лейбл выбранного варианта под названием опции */
.shop-pd-option-variant-label {
  font-size: 11px;
  color: var(--text-muted, var(--color-text-faint));
  margin-top: 2px;
}

/* Карточка опции с вариантами - flex-direction: column */
.shop-pd-option-card.has-variants {
  flex-direction: column;
  align-items: stretch;
}

.shop-pd-option-card-content {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
}

/* ==========================================================================
   Детали заказа (профиль)
   ========================================================================== */

.shop-order-details {
  display: grid;
  gap: 16px;
}

@media (max-width: 768px) {
  .shop-order-details {
    padding-bottom: calc(var(--shop-bottomnav-h) + var(--shop-mobile-action-h) + 24px + env(safe-area-inset-bottom));
  }
}

.shop-order-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.shop-order-details-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.shop-order-details-status {
  font-size: 14px;
  color: var(--color-text-muted);
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--color-surface);
}

.shop-order-details-info {
  display: grid;
  gap: 12px;
}

.shop-order-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shop-order-info-label {
  font-size: 14px;
  color: var(--color-text-muted);
}

.shop-order-info-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  text-align: right;
}

.shop-order-details-section {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--color-surface);
}

.shop-order-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.shop-order-address {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
}

.shop-order-items {
  display: grid;
  gap: 12px;
}

.shop-order-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--color-surface);
}

.shop-order-item-photo {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-border);
}

.shop-order-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-order-item-content {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 6px;
}

.shop-order-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.shop-order-item-variant,
.shop-order-item-option,
.shop-order-item-ingredient {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.shop-order-item-options,
.shop-order-item-ingredients {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.shop-order-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.shop-order-item-qty {
  font-size: 12px;
  color: var(--color-text-muted);
}

.shop-order-item-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.shop-order-comment {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
  padding: 12px;
  border-radius: 8px;
  background: var(--color-surface);
}

.shop-order-details-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: var(--shop-buy-glow);
  border: 1px solid var(--shop-buy);
}

.shop-order-total-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.shop-order-total-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--shop-buy);
}

/* Нормализованный блок «Суммы» в деталях заказа */
.shop-order-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-order-summary-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.shop-order-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.shop-order-summary-label {
  color: var(--color-text-muted);
}

.shop-order-summary-value {
  text-align: right;
}

.shop-order-summary-discount-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.shop-order-summary-discount-info-btn {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.shop-order-summary-discount-info-btn i {
  font-size: 10px;
}

.shop-order-summary-discount-info-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.shop-order-summary-discount-info-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.shop-order-summary-discount-breakdown {
  display: none;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed var(--color-border);
  background: var(--color-surface-2);
}

.shop-order-summary-discount-breakdown.is-open {
  display: grid;
  gap: 6px;
}

.shop-order-summary-discount-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.shop-order-summary-discount-breakdown-label {
  color: var(--color-text-muted);
}

.shop-order-summary-discount-breakdown-value {
  color: var(--color-primary);
  font-weight: 600;
}

.shop-order-summary-discount-breakdown-note {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.shop-order-summary-divider {
  border-top: 1px dashed var(--color-border);
  margin: 8px 0 4px;
}

.shop-order-summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.shop-order-summary-total-label {
  font-size: 16px;
}

.shop-order-summary-total-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--shop-buy);
}

.shop-order-summary-thanks {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .shop-order-summary-discount-breakdown {
    padding: 8px;
  }

  .shop-order-summary-discount-breakdown-row {
    font-size: 12px;
  }
}

/* Экран результата заказа (успех / конфликт) */
.shop-order-result.hidden {
  display: none;
}

.shop-order-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  gap: 12px;
}

.shop-order-result-icon {
  font-size: 48px;
  color: var(--shop-buy);
}

.shop-order-result-icon--warn {
  color: var(--color-primary);
}

.shop-order-result-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.shop-order-result-order,
.shop-order-result-total {
  margin: 0;
  font-size: 16px;
}

.shop-order-result-total {
  font-weight: 700;
  color: var(--shop-buy);
}

.shop-order-result-text {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

.shop-order-result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.shop-order-result-btn {
  width: 100%;
}

.shop-order-result-conflict .shop-order-result-actions {
  max-width: 280px;
}

.shop-cart-items {
  display: grid;
  gap: 10px;
}

.shop-cart-items .cart-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  line-height: 1.3;
}

/* В корзине у комбо состав может занимать место под правым блоком (цена/кол-во) */
.cart-row--combo .cart-combo-details{
  margin-right: -120px;
  padding-right: 12px;
}

/* Order details: keep item text and price in separate rows to avoid overlap */
.shop-order-details .shop-cart-items .cart-row,
.shop-favorites-list .shop-cart-items .cart-row {
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-areas:
    "thumb mid"
    "thumb right";
  align-items: start;
}

.shop-order-details .shop-cart-items .cart-thumb,
.shop-order-details .shop-cart-items .cart-combo-thumb,
.shop-favorites-list .shop-cart-items .cart-thumb,
.shop-favorites-list .shop-cart-items .cart-combo-thumb {
  grid-area: thumb;
}

.shop-order-details .shop-cart-items .cart-mid,
.shop-favorites-list .shop-cart-items .cart-mid {
  grid-area: mid;
  min-height: 0;
}

.shop-order-details .shop-cart-items .cart-right,
.shop-favorites-list .shop-cart-items .cart-right {
  grid-area: right;
  justify-self: end;
  align-self: start;
  margin-top: 6px;
}

.shop-order-details .shop-cart-items .cart-title,
.shop-favorites-list .shop-cart-items .cart-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-order-details .shop-cart-items .cart-row--combo .cart-combo-details,
.shop-favorites-list .shop-cart-items .cart-row--combo .cart-combo-details {
  margin-right: 0;
  padding-right: 0;
}

.shop-order-details .shop-cart-items .cart-sub-detail-item,
.shop-favorites-list .shop-cart-items .cart-sub-detail-item {
  overflow-wrap: anywhere;
}

.shop-order-details .shop-cart-items .cart-row.cart-row--repeat-desktop-actions {
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-areas:
    "thumb mid"
    "actions right";
}

.shop-order-details .shop-cart-items .cart-row.cart-row--repeat-desktop-actions .shop-order-repeat-desktop-actions {
  grid-area: actions;
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.shop-order-repeat-desktop-action {
  border: 0;
  background: transparent;
  color: var(--color-text-faint);
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.shop-order-repeat-desktop-action i {
  font-size: 18px;
  line-height: 1;
}

.shop-order-repeat-desktop-action:hover {
  color: var(--shop-buy);
}

.shop-order-repeat-desktop-action:active {
  transform: scale(.96);
}

/* Favorites desktop actions: static buttons under thumbnail (left-bottom) */
.shop-favorite-desktop-actions {
  display: none;
}

.shop-favorite-desktop-action {
  border: 0;
  background: transparent;
  color: var(--color-text-faint);
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.shop-favorite-desktop-action i {
  font-size: 18px;
  line-height: 1;
}

.shop-favorite-desktop-action:hover {
  color: var(--shop-buy);
}

.shop-favorite-desktop-action:active {
  transform: scale(.96);
}

.shop-favorite-desktop-action:disabled,
.shop-favorite-desktop-action[aria-disabled="true"] {
  opacity: .45;
  cursor: default;
  color: var(--color-text-faint);
}

.shop-favorite-desktop-action:disabled:hover,
.shop-favorite-desktop-action[aria-disabled="true"]:hover {
  color: var(--color-text-faint);
}

@media (min-width: 769px) {
  .shop-favorites-list .shop-cart-items .cart-row.cart-row--favorite-desktop-actions {
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-areas:
      "thumb mid"
      "actions right";
  }

  .shop-favorites-list .shop-cart-items .cart-row.cart-row--favorite-desktop-actions .shop-favorite-desktop-actions {
    grid-area: actions;
    align-self: end;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
  }
}

@media (max-width: 768px) {
  .shop-order-details .shop-order-details-section .shop-cart-items {
    margin-left: -12px;
    margin-right: -12px;
  }

  .shop-order-details .shop-cart-items .cart-row.cart-row--repeat-desktop-actions .shop-order-repeat-desktop-actions {
    display: none;
  }
}

/* ==========================================================================
   Выбор точки самовывоза (новый view в правой панели)
   ========================================================================== */

.shop-pickup-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.shop-pickup-list-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.shop-pickup-list {
  display: grid;
  gap: 12px;
  padding: 16px;
}

/* Используем те же классы что и для адресов для единообразия */
.shop-pickup-list .shop-address-row {
  border:1px solid var(--color-border);
  border-radius:14px;
  padding:10px 12px;
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  cursor: pointer;
}
.shop-pickup-list .shop-address-row.is-selected{
  border-color:var(--shop-buy);
}

.shop-pickup-list .shop-address-card {
  position: relative;
  padding-right: 40px; /* место для галочки */
}

.shop-pickup-list .shop-address-row.is-selected .shop-address-card {
  border-color: var(--shop-buy);
  background: transparent;
}

.shop-pickup-list .shop-address-check-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--shop-buy);
  font-size: 20px;
}

.store-hours-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--color-white);
}


/* Store status notice in toolbar */
.toolbar-status {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 400;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--color-border);
}

.toolbar-status:empty,
.toolbar-status.hidden {
  display: none;
}

/* Hide on mobile to save space */
@media (max-width: 768px) {
  .toolbar-status {
    display: none;
  }
}

/* Скрытие скроллбаров но сохранение прокрутки */
.shop-order-details,
.shop-profile-panel,
.shop-profile-content,
#shopProfileContent,
.app-modal-body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.shop-order-details::-webkit-scrollbar,
.shop-profile-panel::-webkit-scrollbar,
.shop-profile-content::-webkit-scrollbar,
#shopProfileContent::-webkit-scrollbar,
.app-modal-body::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Mobile adaptations for pickup city selector */
@media (max-width: 768px) {
  .shop-pickup-list-top {
    padding: 0 8px;
    margin-bottom: 10px;
  }
}


/* moved from style.css: active orders + mobile bottom actions */
.shop-active-orders-badge {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 999px;
  padding: 0 16px;
  height: 40px;
  min-width: 245px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  transition: background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
  border: 1px solid transparent;
}

.shop-active-orders-badge:hover {
  background: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--overlay-bg);
}

.shop-active-orders-badge.hidden {
  display: none !important;
}

/* Мобильный бейдж активных заказов - скрыт на десктопе */
.shop-mobile-active-orders-wrapper {
  display: none;
}

/* Единый контейнер для мобильной навигации, кнопок и ботомщита */
.shop-mobile-bottom-container {
  display: none;
}

/* На мобильных: скрываем header бейдж, показываем мобильный */
@media (max-width: 768px) {
  .shop-checkout-footer-comment-input{
    display: none !important;
  }
  .header-profile-wrapper .shop-active-orders-badge {
    display: none !important;
  }
  
  .shop-mobile-active-orders-wrapper {
    display: none !important;
  }
  
  /* Единый контейнер внизу экрана */
  .shop-mobile-bottom-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(520px, calc(100% - 24px));
    z-index: 120;
    gap: 8px;
    --shop-mobile-action-h: 44px;
    pointer-events: none;
  }
  .shop-mobile-bottom-container > * {
    pointer-events: auto;
  }
  
  
  /* Кнопки добавления в корзину - прилипают к навигации */
  .shop-mobile-product-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--color-surface, var(--color-white));
    border: 1px solid var(--color-border);
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    box-shadow: 0 10px 22px var(--overlay-bg);
    margin-bottom: 0;
  }
  
  .shop-mobile-product-actions.hidden {
    display: none;
    margin-bottom: 0;
  }
  
  /* Кнопки корзины (Оформить/Заказать) - прилипают к навигации */
  .shop-mobile-cart-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    background: var(--color-surface, var(--color-white));
    border: 1px solid var(--color-border);
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    box-shadow: 0 10px 22px var(--overlay-bg);
    margin-bottom: 0;
  }
  
  .shop-mobile-cart-actions.hidden {
    display: none;
    margin-bottom: 0;
  }
  
  /* Полоска прогресса до бесплатной доставки */
  .shop-mobile-delivery-progress-wrap {
    width: 100%;
    flex-shrink: 0;
  }
  .shop-mobile-delivery-progress-wrap.hidden {
    display: none;
  }
  .shop-mobile-checkout-comment-wrap {
    width: 100%;
    flex-shrink: 0;
  }
  .shop-mobile-checkout-name-wrap {
    width: 100%;
    flex-shrink: 0;
  }
  .shop-mobile-checkout-name-wrap.hidden {
    display: none;
  }
  .shop-mobile-checkout-comment-wrap.hidden {
    display: none;
  }
  .shop-mobile-checkout-name-input {
    width: 100%;
    border-radius: 999px;
    padding-inline: 16px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .shop-mobile-checkout-comment-input {
    width: 100%;
  }
  .shop-mobile-delivery-progress-bar {
    height: 6px;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
  }
  .shop-mobile-delivery-progress-fill {
    height: 100%;
    width: 0%;
    max-width: 100%;
    background: var(--color-primary);
    border-radius: 999px;
    transition: width 0.25s ease;
  }
  .shop-mobile-delivery-progress-label {
    font-size: 13px;
    color: var(--color-text-muted, var(--color-text-dim));
    margin-top: 4px;
    line-height: 1.2;
  }
  .shop-mobile-delivery-progress-label strong {
    font-weight: 700;
  }
  .shop-mobile-delivery-progress-label.is-free {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .shop-mobile-delivery-progress-label .shop-delivery-check {
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 900;
    margin-left: 6px;
    flex-shrink: 0;
  }
  .shop-mobile-cart-actions .shop-checkout-total {
    font-size: calc(1em + 1pt);
    font-weight: 700;
  }
  
  .shop-mobile-cart-actions-cart,
  .shop-mobile-cart-actions-checkout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  
  .shop-mobile-cart-actions-cart.hidden,
  .shop-mobile-cart-actions-checkout.hidden {
    display: none;
  }

  .shop-mobile-order-details-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--color-surface, var(--color-white));
    border: 1px solid var(--color-border);
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    box-shadow: 0 10px 22px var(--overlay-bg);
    margin-bottom: 0;
  }

  .shop-mobile-order-details-actions.hidden {
    display: none;
  }

  .shop-mobile-order-details-actions-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .shop-mobile-order-repeat-btn {
    height: var(--shop-mobile-action-h);
    width: var(--shop-mobile-action-h);
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface, var(--color-white));
    color: var(--color-text, var(--color-text-ink));
    font-weight: 700;
    padding: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--dur-fast, 0.2s) var(--ease-smooth, ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    flex: 0 0 auto;
  }

  .shop-mobile-order-repeat-btn:hover {
    background: var(--color-surface-2);
  }

  .shop-mobile-order-repeat-btn i {
    font-size: 16px;
    line-height: 1;
    flex: 0 0 auto;
  }

  .shop-mobile-order-repeat-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width var(--dur-fast, 0.2s) var(--ease-smooth, ease), opacity var(--dur-fast, 0.2s) var(--ease-smooth, ease);
  }

  .shop-mobile-order-repeat-btn.is-expanded {
    width: auto;
    padding: 0 14px;
    gap: 0;
  }

  .shop-mobile-order-repeat-btn.is-expanded .shop-mobile-order-repeat-text {
    max-width: 180px;
    opacity: 1;
  }

  .shop-mobile-order-repeat-btn.is-expanded i {
    display: none;
  }

  .shop-mobile-order-total-btn {
    height: var(--shop-mobile-action-h);
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    white-space: nowrap;
  }

  .shop-mobile-address-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--color-surface, var(--color-white));
    border: 1px solid var(--color-border);
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    box-shadow: 0 10px 22px var(--overlay-bg);
    margin-bottom: 0;
  }

  .shop-mobile-address-actions.hidden {
    display: none;
    margin-bottom: 0;
  }

  .shop-cart-sheet .shop-address-form-actions {
    display: none;
  }
  
  .shop-mobile-cart-actions .shop-cart-clear {
    width: var(--shop-mobile-action-h);
    height: var(--shop-mobile-action-h);
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--shop-buy-text, var(--color-white));
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    transition: all var(--dur-fast, 0.2s) var(--ease-smooth, ease);
  }

  .shop-mobile-cart-actions .shop-cart-clear.is-confirm {
    width: auto;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
  }
  
  .shop-mobile-cart-actions .shop-checkout-btn {
    height: var(--shop-mobile-action-h);
    flex: 1;
    min-width: 0;
  }
  
  .shop-mobile-cart-actions .shop-checkout-back {
    width: var(--shop-mobile-action-h);
    height: var(--shop-mobile-action-h);
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface, var(--color-white));
    color: var(--color-text, var(--color-text-ink));
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
  }
  
  .shop-mobile-cart-actions .shop-checkout-submit-btn {
    height: var(--shop-mobile-action-h);
    flex: 1;
    min-width: 0;
  }

  .shop-mobile-address-actions .shop-checkout-btn,
  .shop-mobile-address-actions .shop-mobile-address-cancel {
    height: var(--shop-mobile-action-h);
    flex: 1;
    min-width: 0;
  }

  .shop-mobile-address-actions .shop-mobile-address-cancel {
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface, var(--color-white));
    color: var(--color-text, var(--color-text-ink));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--dur-fast, 0.2s) var(--ease-smooth, ease);
  }

  .shop-mobile-address-actions .shop-mobile-address-cancel:hover {
    background: var(--color-surface-2);
  }

  .shop-mobile-address-confirm {
    display: flex;
    align-items: center;
    padding: 8px;
    background: var(--color-surface, var(--color-white));
    border: 1px solid var(--color-border);
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    box-shadow: 0 10px 22px var(--overlay-bg);
  }
  body:not(.shop-address-sheet-active) .shop-mobile-address-confirm {
    display: none !important;
  }
  .shop-mobile-address-confirm.hidden { display: none }
  .shop-mobile-address-confirm .shop-checkout-btn {
    height: var(--shop-mobile-action-h);
    flex: 1;
    min-width: 0;
  }
  
  .shop-mobile-product-actions .qty-pill-wrap {
    flex-shrink: 0;
  }
  
  .shop-mobile-product-actions .shop-pd-action {
    height: var(--shop-mobile-action-h);
    flex: 1;
    min-width: 0;
  }
  
  /* Серый qty-pill в мобильных кнопках (как muted вариант) */
  .shop-mobile-product-actions .qty-pill {
    --qty-pill-h: var(--shop-mobile-action-h);
    --qty-pill-side: var(--shop-mobile-action-h);
  }
  
  /* Ботомщит активного заказа - прилипает к навигации */
  .shop-active-orders-sheet-collapsed {
    pointer-events: auto;
    width: 100%;
    max-width: 100%;
    background: var(--color-surface, var(--color-white));
    color: var(--color-text, var(--color-text-ink));
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--color-border);
    border-bottom: none;
    box-shadow: 0 -4px 20px var(--overlay-bg);
    padding: 20px 16px 16px;
    position: relative;
    min-height: 60px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 0;
  }
  
  .shop-active-orders-sheet-collapsed.hidden {
    display: none;
  }

  /* Скрываем активный заказ, когда открыт любой модал/боттом-щит */
  body.modal-open .shop-active-orders-sheet-collapsed {
    display: none;
  }
  
  .shop-active-orders-sheet-collapsed:active {
    transform: translateY(-2px);
    box-shadow: 0 -6px 24px var(--overlay-bg);
  }
  
  /* Навигация прилипает к ботомщиту - единый блок */
  .shop-mobile-bottom-container .shop-nav {
    border-radius: 0 0 16px 16px;
    margin-top: 0;
    border-top: none;
    box-shadow: 0 10px 22px var(--overlay-bg);
  }

  /* Когда активный заказ свернут, навигация и карточка сливаются в один блок */
  .shop-mobile-bottom-container .shop-active-orders-sheet-collapsed:not(.hidden) + .shop-nav,
  .shop-mobile-bottom-container .shop-mobile-product-actions:not(.hidden) + .shop-mobile-cart-actions.hidden + .shop-mobile-order-details-actions.hidden + .shop-mobile-address-actions.hidden + .shop-mobile-address-confirm.hidden + .shop-active-orders-sheet-collapsed + .shop-nav,
  .shop-mobile-bottom-container .shop-mobile-product-actions:not(.hidden) + .shop-mobile-cart-actions.hidden + .shop-mobile-order-details-actions.hidden + .shop-mobile-address-actions.hidden + .shop-mobile-address-confirm.hidden + .shop-nav,
  .shop-mobile-bottom-container .shop-mobile-cart-actions:not(.hidden) + .shop-mobile-order-details-actions.hidden + .shop-mobile-address-actions.hidden + .shop-mobile-address-confirm.hidden + .shop-active-orders-sheet-collapsed + .shop-nav,
  .shop-mobile-bottom-container .shop-mobile-cart-actions:not(.hidden) + .shop-mobile-order-details-actions.hidden + .shop-mobile-address-actions.hidden + .shop-mobile-address-confirm.hidden + .shop-nav,
  .shop-mobile-bottom-container .shop-mobile-order-details-actions:not(.hidden) + .shop-mobile-address-actions.hidden + .shop-mobile-address-confirm.hidden + .shop-active-orders-sheet-collapsed + .shop-nav,
  .shop-mobile-bottom-container .shop-mobile-order-details-actions:not(.hidden) + .shop-mobile-address-actions.hidden + .shop-mobile-address-confirm.hidden + .shop-nav,
  .shop-mobile-bottom-container .shop-mobile-address-actions:not(.hidden) + .shop-mobile-address-confirm.hidden + .shop-active-orders-sheet-collapsed + .shop-nav,
  .shop-mobile-bottom-container .shop-mobile-address-actions:not(.hidden) + .shop-mobile-address-confirm.hidden + .shop-nav,
  .shop-mobile-bottom-container .shop-mobile-address-confirm:not(.hidden) + .shop-active-orders-sheet-collapsed + .shop-nav,
  .shop-mobile-bottom-container .shop-mobile-address-confirm:not(.hidden) + .shop-nav,
  .shop-mobile-bottom-container .shop-mobile-product-actions.hidden + .shop-mobile-cart-actions.hidden + .shop-mobile-order-details-actions.hidden + .shop-mobile-address-actions.hidden + .shop-active-orders-sheet-collapsed:not(.hidden) + .shop-nav {
    border-radius: 0 0 16px 16px;
    border-top: none;
    margin-top: -9px;
    box-shadow: none;
  }

  .shop-mobile-bottom-container .shop-active-orders-sheet-collapsed.hidden + .shop-nav {
    border-radius: 16px;
    border-top: 1px solid var(--color-border);
    margin-top: 0;
  }



  .shop-active-orders-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: var(--color-border, var(--color-border-strong));
    border-radius: 2px;
  }
  
  .shop-active-orders-collapsed-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 600;
  }
  
  .shop-active-orders-sheet-collapsed .shop-active-orders-text,
  .shop-active-orders-sheet-collapsed .shop-active-orders-count {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text, var(--color-text-ink));
  }
  
  .shop-active-orders-sheet-collapsed .shop-active-orders-count {
    font-weight: 700;
    color: var(--color-primary);
  }
}

.shop-active-orders-text {
  font-size: 20px;
}

.shop-active-orders-count {
  font-size: 20px;
  font-weight: 700;
}

/* Доскролл в списке активных заказов (bottom sheet), чтобы последняя карточка не упиралась в нижнее меню */
.shop-active-orders-list {
  padding-bottom: 200px;
}

/* moved from style.css: sheet discount badge */
.shop-sheet-discount-badge{
  margin:0 auto;
  padding:4px 10px;
  border-radius:8px;
  background:var(--shop-buy);
  color:var(--shop-buy-text);
  font-size:14px;
  font-weight:700;
  line-height:1.2;
}


/* moved from style.css: shop grid/footer legacy rules */
body.page-shop .app-grid{
  grid-template-columns:250px 1fr 500px !important;
}

/* На витрине бургер не нужен */
body.page-shop #sidebar-edge-toggle{display:none}
body.page-shop .sidebar-open-tab{display:none}

/* Mobile footer (только витрина) */
.shop-footer{display:none}

@media (max-width:768px){
  body.page-shop .main-container{
    height:auto;
    min-height:calc(100dvh - var(--header-height));
  }

  body.page-shop .page-col-left,
  body.page-shop .page-col-right{display:none}

  body.page-shop .page-col-center{display:flex}

  .shop-footer{
    position:fixed;
    left:0;right:0;bottom:0;
    height:var(--shop-footer-height);
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
    padding:10px 12px;
    background:var(--color-surface);
    border-top:1px solid var(--color-border);
    z-index:95;
  }

  .shop-footer-btn{
    border:1px solid var(--color-border);
    background:var(--color-surface);
    color:var(--color-text);
    border-radius:12px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:800;
    cursor:pointer;
  }
  .shop-footer-btn span{font-size:12px}
  .shop-footer-btn i{font-size:14px;color:var(--color-text-muted)}
  .shop-footer-btn.is-primary{
    background:var(--color-primary);
    color:var(--on-primary);
    border-color:transparent;
  }
  .shop-footer-btn.is-primary i{color:var(--on-primary)}
}


/* moved from style.css: shop product info header visibility */
#shopProductInfoPanel:has(#shopProductEmpty:not(.hidden)) .product-info-header{
  display:none !important;
}
#shopProductInfoPanel:has(#shopProductInfo:not(.hidden)) .product-info-header{
  display:flex !important;
}


/* moved from style.css: mobile logo-city hide on shop */
@media (max-width:768px){
  .page-shop .logo-city-wrapper{display:none!important}
}

/* ===== Cart Upsell Block ===== */
.shop-cart-upsell{
  padding: 12px 0 0;
  margin-left: -12px;
  margin-right: -12px;
}
.shop-cart-upsell-title{
  font-size: 15px;
  font-weight: 700;
  padding: 0 12px;
  margin-bottom: 10px;
  color: var(--color-text);
}
.shop-cart-upsell-scroll{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 12px 12px;
  scrollbar-width: none;
}
.shop-cart-upsell-scroll::-webkit-scrollbar{display:none}

.cart-upsell-card{
  flex: 0 0 110px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--shop-radius, 14px);
  overflow: hidden;
}
.cart-upsell-photo{
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}
.cart-upsell-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-upsell-no-photo{
  width: 100%;
  height: 100%;
  background: var(--color-surface-2);
}
.cart-upsell-name{
  font-size: 11px;
  line-height: 1.3;
  padding: 5px 7px 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-text);
  flex: 1;
}
.cart-upsell-desc{
  font-size: 9px;
  line-height: 1.2;
  padding: 0 7px 5px;
  color: var(--color-text-muted);
}
.cart-upsell-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 7px 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  background: var(--color-surface-2);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-text);
  white-space: nowrap;
}

/* Portrait lock fallback for mobile browsers that ignore orientation lock. */
.shop-portrait-guard {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 18, 24, 0.94);
}

.shop-portrait-guard.hidden {
  display: none;
}

.shop-portrait-guard-card {
  max-width: 420px;
  width: 100%;
  border-radius: 16px;
  padding: 16px 18px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

body.shop-portrait-guard-active {
  overflow: hidden !important;
}