html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.app-shell {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.reservation-product-banner {
  height: 52px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 64px;
  background: #151c28;
  color: white;
  text-align: center;
}
.reservation-product-banner[hidden] { display: none; }
.reservation-product-banner strong { font-size: .95rem; font-weight: 650; }
.reservation-product-banner button { position: absolute; top: 0; right: 16px; width: 52px; height: 52px; padding: 0; border: 0; background: transparent; color: white; font-size: 2rem; font-weight: 250; }
body.reservation-product-mode .topbar { display: none; }

.workspace {
  --order-side-panel-width: clamp(280px, calc(32vw - 4cm), 360px);
  grid-template-columns: minmax(0, 1fr) var(--order-side-panel-width);
  width: 100%;
  height: calc(100vh - 52px);
  min-height: 0;
  overflow: hidden;
}

.catalog-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: #e9edf2;
}

.progress-strip, .catalog-heading { display: none; }

.catalog-toolbar {
  flex: 0 0 52px;
  min-width: 0;
  display: flex;
  border-bottom: 1px solid #ccd4de;
  background: #e9edf2;
}
.category-row {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: 0;
  padding: 0 18px;
  border-bottom: 0;
  border-radius: 0;
  background: #e9edf2;
}
.category-tab {
  position: relative;
  flex: 1 0 132px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 0;
  color: #5e6a7a;
  font-size: 1.05rem;
  font-weight: 600;
}
.category-tab:hover { color: #283447; }
.category-tab.active { background: transparent; color: #202b3b; box-shadow: none; }
.category-tab.active::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #344154;
}
.category-tools { flex: 0 0 auto; display: flex; align-items: stretch; padding-right: 10px; background: #e9edf2; }
.category-tools button { border: 0; background: transparent; color: #7f8b9a; }
.category-tools button:hover:not(:disabled) { background: rgba(255,255,255,.6); color: #344154; }
.category-tools button:disabled { color: #b7c0cb; cursor: default; }
.category-tool-icon { width: 48px; display: grid; place-items: center; padding: 0; }
.category-tool-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.category-manage-tab { color: #536174; font-size: .9rem; white-space: nowrap; }
.category-manage-tab span { margin-right: 3px; color: var(--blue); font-size: 1.15rem; vertical-align: -1px; }

.product-grid {
  --product-card-size: 100px;
  --product-card-width: 100px;
  --product-card-height: 100px;
  --product-card-padding: 9px;
  --product-card-radius: 12px;
  --product-name-size: .78rem;
  --product-price-size: .74rem;
  --product-add-size: 24px;
  --product-add-font-size: 1rem;
  --product-edit-icon-size: .96rem;
  --product-slot-font-size: 2rem;
  --product-edit-icon-inset: 7px;
  --product-edit-copy-space: 25px;
  flex: 1 1 auto;
  min-height: 0;
  container-type: size;
  grid-template-columns: repeat(6, var(--product-card-width));
  grid-template-rows: repeat(4, var(--product-card-height));
  place-content: start;
  place-items: stretch;
  gap: 4px;
  padding: 6px 8px;
  overflow: hidden;
}
.product-card {
  width: 100%;
  min-height: 0;
  height: 100%;
  padding: var(--product-card-padding);
  border: 0;
  border-radius: var(--product-card-radius);
  box-shadow: 0 4px 12px rgba(39, 50, 68, .1);
}
.product-card:hover,.product-card:active { transform: none; border-color: transparent; box-shadow: 0 4px 12px rgba(39, 50, 68, .1); }
.product-card.in-cart { border: 0; background: white; }
.product-card.in-cart.color-card { background: var(--product-color); }
.product-card .cart-count { display: none; }
.product-name { display: -webkit-box; overflow: hidden; font-size: var(--product-name-size); line-height: 1.25; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-description { display: none; }
.product-price { font-size: var(--product-price-size); }
.product-card .add-mark { display: none; }

.pos-catalog-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  padding: 2px 10px 3px;
}
.pos-catalog-actions > div:first-child { display: flex; gap: 10px; }
.pos-catalog-actions > div:first-child[hidden] { display: none !important; }
.catalog-action-button {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #536174;
  font-weight: 600;
}
.catalog-action-button:hover { background: rgba(255,255,255,.7); color: #263346; }
.catalog-action-button.active { background: #344154; color: white; }
.catalog-action-button span { margin-right: 4px; font-size: 1.1rem; }
.catalog-page-indicator { display: flex; align-items: center; gap: 16px; color: #647185; }
.catalog-page-indicator button { width: 34px; height: 34px; border: 0; background: transparent; color: #9ba7b6; font-size: 1.8rem; }
.catalog-page-indicator strong { font-size: .86rem; }

.options-zone {
  flex: 0 0 clamp(96px, 12vh, 120px);
  min-height: 96px;
  margin: 0;
  padding: 7px 14px 10px;
  border: 0;
  border-top: 1px solid #d2d9e2;
  border-radius: 0;
  background: #e9edf2;
  overflow: hidden;
}
.options-zone .section-heading { min-height: 26px; margin-bottom: 5px; }
.options-zone .eyebrow { display: none; }
.options-zone h2 { font-size: .86rem; }
.options-zone h2 small { color: #748195; font-size: .68rem; font-weight: 600; }
.quick-option-heading { justify-content: flex-start; }
.quick-option-heading .active-item-badge { max-width: 210px; margin-left: auto; padding: 4px 8px; overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.quick-option-heading .active-item-badge.empty { background: #f1f3f6; color: #8a95a4; }
.option-page-controls { grid-column: 4; grid-row: 2; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; overflow: hidden; border-radius: 11px; background: white; color: #6f7c8e; }
.option-page-controls button { width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: #a2adba; font-size: 1.75rem; }
.option-page-controls button:not(:disabled) { color: #506075; cursor: pointer; }
.option-page-controls button:disabled { opacity: .38; cursor: default; }
.option-page-controls strong { display: none; }
.quick-option-layout { min-height: 0; height: calc(100% - 31px); display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 7px; }
.option-list { display: contents; }
.option-chip {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 9px;
  border: 0;
  border-radius: 11px;
  background: white;
  box-shadow: 0 2px 7px rgba(39,50,68,.06);
  text-align: center;
}
.option-chip:disabled { opacity: 1; cursor: not-allowed; }
.option-chip:disabled .option-check { display: none; }
.option-chip:disabled:not(.option-add-chip) { background: rgba(255,255,255,.58); color: #98a3b1; }
.option-chip > span:first-child { min-width: 0; }
.option-chip strong { display: block; overflow: hidden; font-size: .76rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.option-chip span { color: #768396; font-size: .68rem; }
.option-add-chip { display: grid; place-items: center; border: 1px dashed #9eabbc; background: transparent; box-shadow: none; }
.option-add-chip > span:first-child { color: #9eabbc; font-size: 1.65rem; }
.option-add-chip:hover { border-color: var(--blue); background: #f3f8ff; }
.option-chip.selected { border-color: var(--blue); background: var(--blue); color: white; box-shadow: none; }
.option-chip.selected strong,.option-chip.selected span { color: white; }
.option-chip-quantity { display: grid; grid-template-columns: 30px minmax(0,1fr) 30px; gap: 5px; padding: 6px; }
.option-chip-quantity > button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: white; font-size: 1.55rem; font-weight: 300; line-height: 1; }
.option-chip-quantity > button:hover { background: rgba(255,255,255,.3); }
.option-chip-quantity > span { min-width: 0; }
.quick-option-actions { display: contents; }
.quick-option-actions button { min-width: 0; min-height: 0; padding: 0 6px; border: 0; border-radius: 10px; background: #687589; color: white; font-size: .76rem; font-weight: 650; white-space: nowrap; }
.quick-option-actions #quickMemoButton { grid-column: 5; grid-row: 1; }
.quick-option-actions #manageFavoriteOptions { grid-column: 5; grid-row: 2; }
.quick-option-actions button:hover { background: #546176; }
body.hide-favorite-options .options-zone { display: none; }
body.large-product-text .product-name, body.large-product-text .product-edit-card strong { font-size: calc(var(--product-name-size) + 2px); }
body.large-product-text .product-price, body.large-product-text .product-edit-card b { font-size: calc(var(--product-price-size) + 2px); }
body.category-two-rows .catalog-toolbar { flex-basis: 104px; }
body.category-two-rows .category-row { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); overflow: visible; }
body.category-two-rows .category-tab { min-height: 52px; }

.order-panel {
  position: relative;
  top: auto;
  min-width: 0;
  height: 100%;
  border-left: 1px solid #d6dde6;
  overflow: hidden;
}
.order-header.order-toolbar {
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 0 12px;
}
.order-tool-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6d7989;
}
.order-tool-button:hover { background: #f1f4f8; color: #2f3d50; }
.order-tool-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.order-tool-button#saveOrder svg { fill: currentColor; stroke: none; }
.order-list { padding: 0 12px; overflow: hidden; background: white; }
.order-empty { min-height: 160px; color: #8793a2; }
.order-empty strong { color: #657286; font-size: .84rem; }
.order-empty p { margin: 6px 0 0; font-size: .68rem; }
.order-item { border: 0; background: #f5f9ff; box-shadow: inset 4px 0 0 var(--blue); }
.order-item.active { border: 0; background: #e8f3ff; box-shadow: inset 4px 0 0 var(--blue); }

.order-line { min-width: 0; border-bottom: 1px solid #edf0f4; }
.order-line-main {
  width: 100%;
  min-height: 55px;
  display: block;
  padding: 8px 2px;
  border: 0;
  background: white;
  color: #344154;
  text-align: left;
}
.order-line-main:hover { background: #f8fafc; }
.order-line.active .order-line-main { background: #f2f7ff; }
.order-line-main span { min-width: 0; }
.order-line-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.order-line-main strong,.order-line-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-line-main strong { font-size: .76rem; font-weight: 650; }
.order-line-top { align-items: flex-start; }
.order-line-top strong { overflow: visible; line-height: 1.35; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.order-line-options { display: grid; grid-template-columns: 1fr; gap: 3px; margin-top: 6px; padding-left: 8px; }
.order-line-options small { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 9px; color: #7b8899; font-size: .64rem; font-weight: 450; }
.order-line-options small::before { content: "·"; position: absolute; left: 0; }
.order-line-options small span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-line-options small em { flex: 0 0 auto; color: #697688; font-style: normal; font-weight: 550; white-space: nowrap; }
.order-line-main b { color: #344154; font-size: .77rem; font-weight: 550; white-space: nowrap; }

.order-info-panel { flex: 0 0 auto; border-top: 1px solid var(--line); background: #fff; }
.order-info-panel summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #455367;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.order-info-panel summary::-webkit-details-marker { display: none; }
.order-info-panel summary::after { content: "+"; color: var(--blue); font-size: 1.3rem; }
.order-info-panel[open] summary::after { content: "−"; }
.order-info-panel summary small { margin-left: auto; margin-right: 10px; color: #98a3b2; font-size: .68rem; font-weight: 500; }
.order-info-panel .booking-form {
  max-height: 280px;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 14px 18px 18px;
  overflow-y: auto;
  border: 0;
  border-top: 1px solid #eef1f5;
  border-radius: 0;
  background: #fbfcfe;
}
.order-info-panel .customer-section, .order-info-panel .time-section, .order-info-panel .memo-section { grid-column: 1 / -1; }
.order-info-panel .time-grid { grid-template-columns: repeat(3, 1fr); }
.order-info-panel textarea { min-height: 58px; }

.order-summary { flex: 0 0 auto; }
.order-bottom-actions {
  flex: 0 0 clamp(150px, 20vh, 190px);
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: repeat(2,minmax(0,1fr));
  gap: 7px;
  padding: 38px 12px 10px;
  border-top: 1px solid #e4e9ef;
  background: white;
}
/* Payback and reservation use the same label-left, amount-right button styling. */
.order-bottom-actions .order-button { min-width: 0; min-height: 0; height: 100%; margin: 0; }

.edit-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #d6dde6;
  background: white;
}
body.order-editing .workspace { grid-template-columns: minmax(0, 1fr) var(--order-side-panel-width); }
.order-panel[hidden], .edit-panel[hidden] { display: none !important; }
.edit-panel-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.edit-panel-head h2 { font-size: 1rem; }
.edit-panel-head span { color: #98a3b2; font-size: .68rem; font-weight: 600; white-space: nowrap; }
.edit-settings { padding: 10px 16px; }
.edit-settings[hidden], .edit-panel-note[hidden], .edit-move-panel[hidden] { display: none !important; }
.edit-setting-row { display: grid; grid-template-columns: minmax(80px, .8fr) minmax(124px, 1.2fr); align-items: center; gap: 8px; padding: 10px 0; }
.edit-setting-row.vertical { grid-template-columns: 1fr; gap: 10px; }
.edit-setting-row strong, .edit-setting-row small { display: block; }
.edit-setting-row > div:first-child { min-width: 0; }
.edit-setting-row strong { font-size: .8rem; white-space: nowrap; }
.edit-setting-row small { margin-top: 2px; color: #96a1b0; font-size: .62rem; line-height: 1.3; white-space: nowrap; }
.segmented-control { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 13px; background: #f0f2f5; }
.segmented-control button { min-height: 38px; padding: 0 7px; border: 0; border-radius: 10px; background: transparent; color: #7a8797; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.segmented-control button.active { background: white; color: #29364a; box-shadow: 0 2px 7px rgba(36,49,68,.09); }
.edit-panel-note { margin: auto 16px 14px; padding: 12px; border-radius: 13px; background: #f5f7fa; color: #758195; font-size: .68rem; }
.edit-panel-note strong { color: #526074; }
.edit-panel-note p { margin: 4px 0 0; }
.finish-edit-button { min-height: 50px; margin: 0 16px 16px; border: 0; border-radius: 14px; background: var(--blue); color: white; font-weight: 700; }
.edit-move-panel { min-height: 0; flex: 1; display: grid; align-content: center; justify-items: center; padding: 32px 24px; text-align: center; }
.edit-move-icon { position: relative; width: 72px; height: 58px; display: grid; place-items: center; margin-bottom: 22px; color: var(--blue); font-size: 2.25rem; }
.edit-move-icon i { position: absolute; right: 1px; width: 29px; height: 38px; border: 3px solid #e1e6ed; border-radius: 9px; }
.edit-move-icon span { position: relative; z-index: 1; transform: translateX(-14px); }
.edit-move-panel > strong { color: #344155; font-size: 1.05rem; font-weight: 650; }
.edit-move-panel > p { margin: 12px 0 22px; color: #7c8898; font-size: .82rem; line-height: 1.6; }
.edit-move-panel > button { min-height: 42px; padding: 0 18px; border: 0; border-radius: 11px; background: #eff2f6; color: #647286; font-weight: 650; }

body.order-editing .product-grid { grid-template-columns: repeat(6, var(--product-card-width)); grid-template-rows: repeat(4, var(--product-card-height)); }
.product-edit-card, .product-edit-slot, .product-empty-slot { width: 100%; min-height: 0; height: 100%; border-radius: var(--product-card-radius); }
.product-edit-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: var(--product-card-padding); border: 0; background: white; box-shadow: 0 4px 12px rgba(39,50,68,.09); cursor: pointer; }
.product-edit-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(39,50,68,.14); }
.product-edit-card:focus-visible { outline: 3px solid rgba(50,125,240,.5); outline-offset: 2px; }
.product-edit-card.move-selected { outline: 3px solid var(--blue); outline-offset: -3px; }
.product-edit-card strong, .product-edit-card small { display: block; }
.product-edit-card small { margin-top: 4px; color: #8995a5; font-size: .7rem; }
.product-edit-card strong { display: -webkit-box; overflow: hidden; font-size: var(--product-name-size); line-height: 1.25; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-edit-card b { font-size: var(--product-price-size); }
.edit-product-button { position: absolute; top: var(--product-edit-icon-inset); right: var(--product-edit-icon-inset); width: var(--product-add-size); height: var(--product-add-size); display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: var(--product-edit-icon-size); line-height: 1; }
.edit-product-button:hover { background: transparent; transform: scale(1.08); }
.product-edit-card > span { padding-right: var(--product-edit-copy-space); }
.product-edit-slot { display: grid; place-items: center; border: 1px dashed #9eabbc; background: transparent; color: #aab5c2; font-size: var(--product-slot-font-size); }
.product-edit-slot:hover { border-color: var(--blue); background: rgba(255,255,255,.45); color: var(--blue); }
.product-empty-slot { display: block; visibility: hidden; border: 0; background: transparent; pointer-events: none; }

.product-manager-dialog { width: min(560px, calc(100% - 28px)); max-height: 82vh; padding: 0; border: 0; border-radius: 22px; color: var(--ink); box-shadow: 0 30px 70px rgba(17,30,49,.3); }
.product-manager-dialog::backdrop { background: rgba(16,26,41,.6); backdrop-filter: blur(3px); }
.product-manager-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.product-manager-head p:not(.eyebrow) { margin: 5px 0 0; color: #7d8999; font-size: .8rem; }
.product-manager-head > button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #f0f3f7; color: #687587; font-size: 1.4rem; }
.product-manager-list { max-height: 50vh; display: grid; gap: 8px; padding: 16px 24px; overflow-y: auto; }
.product-manager-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 10px 13px; border: 1px solid #e0e6ee; border-radius: 12px; background: white; color: var(--ink); text-align: left; }
.product-manager-item.selected { border-color: var(--blue); background: var(--blue-soft); }
.product-manager-item strong, .product-manager-item small { display: block; }
.product-manager-item small { margin-top: 3px; color: #8190a2; }
.product-manager-item i { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #eef2f7; color: #748195; font-style: normal; font-weight: 700; }
.product-manager-item.selected i { background: var(--blue); color: white; }
.product-manager-dialog .finish-edit-button { width: calc(100% - 48px); margin-top: 0; }

.add-product-dialog {
  width: min(960px, calc(100% - 32px));
  height: min(900px, calc(100vh - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 26px;
  color: var(--ink);
  box-shadow: 0 32px 90px rgba(17,30,49,.34);
  overflow: hidden;
}
.add-product-dialog::backdrop { background: rgba(16,26,41,.6); backdrop-filter: blur(3px); }
.add-product-dialog form { height: 100%; display: grid; grid-template-rows: 82px minmax(0,1fr) 92px; }
.add-product-head { display: flex; align-items: center; justify-content: space-between; padding: 0 38px; border-bottom: 1px solid #eef1f5; }
.add-product-head h2 { margin: 0; font-size: 1.45rem; font-weight: 600; }
.add-product-head button { width: 42px; height: 42px; border: 0; border-radius: 12px; background: #f1f3f6; color: #687588; font-size: 1.8rem; line-height: 1; }
.add-product-body { min-height: 0; padding: 30px 38px; overflow-y: auto; }
.product-style-picker { display: grid; grid-template-columns: 132px minmax(0,1fr); align-items: center; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid #e5e9ef; }
.new-product-preview { width: 132px; height: 112px; display: flex; align-items: flex-start; padding: 16px; border: 1px solid #dfe4eb; border-radius: 15px; background: var(--preview-color,#fff); color: #344155; box-shadow: 0 3px 10px rgba(39,50,68,.05); }
.new-product-preview span { overflow: hidden; color: #9aa5b4; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.product-color-options { display: flex; align-items: center; flex-wrap: wrap; gap: 15px 24px; margin: 0; padding: 0; border: 0; }
.product-color-options .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.product-color-options label { cursor: pointer; }
.product-color-options input { position: absolute; opacity: 0; pointer-events: none; }
.product-color-options label > span { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; background: var(--swatch); color: transparent; font-size: 1.25rem; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(69,82,101,.08); }
.product-color-options label:first-of-type > span { border-color: #d7dde6; color: #435166; }
.product-color-options label.selected > span { outline: 3px solid #dceaff; outline-offset: 3px; color: white; }
.product-color-options label.selected:first-of-type > span { color: #435166; }
.add-product-switch-row { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #f0f2f5; }
.add-product-switch-row strong { font-size: .96rem; font-weight: 600; }
.add-product-switch-row small { margin-left: 10px; color: #7f8b9b; font-size: .8rem; }
.switch-control { position: relative; flex: 0 0 auto; cursor: pointer; }
.switch-control input { position: absolute; opacity: 0; }
.switch-control span { width: 54px; height: 32px; display: block; padding: 4px; border-radius: 99px; background: #dfe3e9; transition: background .15s ease; }
.switch-control span::after { content: ""; width: 24px; height: 24px; display: block; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(28,39,55,.18); transition: transform .15s ease; }
.switch-control input:checked + span { background: var(--blue); }
.switch-control input:checked + span::after { transform: translateX(22px); }
.add-product-duration { position: relative; display: grid; grid-template-columns: 110px 1fr 26px; align-items: center; gap: 10px; padding: 10px 0 14px; color: #566477; font-size: .82rem; font-weight: 600; }
.add-product-duration[hidden] { display: none; }
.add-product-duration input { height: 42px; padding: 0 12px; }
.add-product-field { display: block; margin-top: 24px; color: #526075; font-size: .86rem; font-weight: 600; }
.add-product-field em, .new-product-categories em { color: #ef5965; font-style: normal; }
.add-product-field > input { width: 100%; height: 54px; display: block; margin-top: 9px; padding: 0 15px; border: 1px solid #dfe4eb; border-radius: 12px; font: inherit; font-weight: 400; }
.add-product-field > input:focus, .new-product-price input:focus { border-color: var(--blue); outline: 2px solid rgba(50,125,240,.16); }
.new-product-categories { margin: 24px 0 0; padding: 0; border: 0; }
.new-product-categories legend { margin-bottom: 10px; color: #526075; font-size: .86rem; font-weight: 600; }
.new-product-categories > div { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.new-product-category { min-height: 42px; padding: 0 16px; border: 1px solid transparent; border-radius: 99px; background: #f1f3f6; color: #58667a; font-weight: 600; }
.new-product-category.selected { border-color: #9bc0f7; background: #eaf3ff; color: #286bcf; }
#addCategorySoon { min-height: 42px; margin-left: 8px; padding: 0 15px; border: 1px dashed #cbd3de; border-radius: 99px; background: white; color: #8b96a5; font-weight: 600; }
.new-product-price { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-top: 9px; border: 1px solid #dfe4eb; border-radius: 12px; overflow: hidden; }
.new-product-price:focus-within { border-color: var(--blue); outline: 2px solid rgba(50,125,240,.16); }
.new-product-price input { width: 100%; height: 54px; padding: 0 15px; border: 0; outline: 0; font: inherit; font-weight: 400; }
.new-product-price b { padding-right: 16px; color: #6f7b8c; font-weight: 500; }
.manual-price-check { width: fit-content; display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; color: #566477; cursor: pointer; }
.manual-price-check input { position: absolute; opacity: 0; pointer-events: none; }
.manual-price-check > span { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #cfd6df; border-radius: 6px; background: white; color: transparent; font-size: .8rem; font-weight: 700; }
.manual-price-check input:checked + span { border-color: var(--blue); background: var(--blue); color: white; }
.manual-price-check input:focus-visible + span { outline: 3px solid rgba(50,125,240,.2); outline-offset: 2px; }
.manual-price-check strong { font-size: .86rem; font-weight: 500; }
.new-product-options { margin: 24px 0 0; padding: 0; border: 0; }
.new-product-options legend { margin-bottom: 10px; color: #526075; font-size: .86rem; font-weight: 600; }
.new-product-options button { min-height: 42px; margin-right: 8px; padding: 0 16px; border: 1px solid transparent; border-radius: 99px; background: #eaf3ff; color: #286bcf; font-weight: 600; }
.new-product-options .add-option-soon { border-color: #cbd3de; border-style: dashed; background: white; color: #8b96a5; }
.new-product-options button:disabled { opacity: .62; cursor: not-allowed; }
.new-product-options small { display: block; margin-top: 8px; color: #a0a9b6; font-size: .7rem; }
.product-option-group-choices { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.product-option-group-choices button { margin: 0; border-color: #dce2ea; background: #f3f5f8; color: #778395; }
.product-option-group-choices button.selected { border-color: #8eb8f5; background: #e5f0ff; color: #176ad8; }
.add-product-error { min-height: 18px; margin: 9px 0 0; color: #e04d5b; font-size: .76rem; }
.add-product-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 38px; border-top: 1px solid #e7ebf0; background: white; }
.add-product-footer button { min-width: 142px; min-height: 54px; border: 0; border-radius: 14px; background: #f1f3f6; color: #566477; font-size: .96rem; font-weight: 700; }
.add-product-footer button[type="submit"] { min-width: 210px; background: var(--blue); color: white; }
.add-product-footer button[type="submit"]:disabled { background: #c9dcfa; color: rgba(255,255,255,.9); cursor: not-allowed; }
.add-product-footer .danger { margin-right: auto; background: #fff0f2; color: #ef4355; }
.add-product-footer .danger[hidden] { display: none; }
.product-card .product-color-dot, .product-edit-card .product-color-dot { position: absolute; top: 13px; left: 13px; width: 11px; height: 11px; border: 1px solid rgba(49,61,78,.12); border-radius: 50%; background: var(--product-color); }
.product-card:has(.product-color-dot) .product-copy, .product-edit-card:has(.product-color-dot) .product-copy { padding-left: 18px; }

.favorite-product-dialog {
  width: min(760px, calc(100% - 32px));
  height: min(760px, calc(100vh - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 26px;
  color: var(--ink);
  box-shadow: 0 32px 90px rgba(17,30,49,.34);
  overflow: hidden;
}
.favorite-product-dialog::backdrop { background: rgba(16,26,41,.62); backdrop-filter: blur(3px); }
.favorite-product-dialog form { height: 100%; display: grid; grid-template-rows: 86px minmax(0,1fr) 92px; }
.favorite-product-head { display: flex; align-items: center; justify-content: space-between; padding: 0 38px; }
.favorite-product-head h2 { margin: 0; font-size: 1.42rem; font-weight: 600; }
.favorite-product-head button { width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; color: #687588; font-size: 2rem; line-height: 1; }
.favorite-product-body { min-height: 0; padding: 24px 38px 30px; overflow-y: auto; }
.favorite-source-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; border: 0; }
.favorite-source-fields legend { grid-column: 1 / -1; margin-bottom: 2px; color: #526075; font-size: .86rem; font-weight: 600; }
.favorite-source-fields em { color: #ef5965; font-style: normal; }
.favorite-source-fields select { width: 100%; height: 52px; padding: 0 42px 0 14px; border: 1px solid #dfe4eb; border-radius: 11px; background: white; color: #445267; font: inherit; }
.favorite-source-fields select:disabled { background: #f3f5f8; color: #a7b0bd; }
.favorite-price-section { margin-top: 22px; }
.favorite-price-section[hidden] { display: none; }
.favorite-price-section h3, .favorite-options-section h3 { margin: 0 0 10px; color: #536176; font-size: .86rem; font-weight: 600; }
.favorite-price-section p { display: flex; align-items: center; gap: 10px; margin: 0; color: #647185; font-size: .82rem; }
.favorite-price-section p span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: white; font-weight: 700; }
.favorite-name-field { display: block; margin-top: 24px; color: #526075; font-size: .86rem; font-weight: 600; }
.favorite-name-field small { margin-left: 6px; color: #a0a9b5; font-weight: 400; }
.favorite-name-field input { width: 100%; height: 52px; display: block; margin-top: 9px; padding: 0 14px; border: 1px solid #dfe4eb; border-radius: 11px; color: #354154; font: inherit; font-weight: 400; }
.favorite-name-field input:focus { border-color: var(--blue); outline: 2px solid rgba(50,125,240,.16); }
.favorite-style-picker { display: grid; grid-template-columns: 118px minmax(0,1fr); align-items: center; gap: 26px; margin-top: 24px; }
.favorite-product-preview { width: 118px; height: 106px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; border: 1px solid #dfe4eb; border-radius: 13px; background: var(--preview-color,#fff); color: var(--preview-text,#344155); overflow: hidden; }
.favorite-product-preview strong { font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
.favorite-product-preview small { opacity: .78; }
.favorite-color-options { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin: 0; padding: 0; border: 0; }
.favorite-color-options .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.favorite-color-options label { cursor: pointer; }
.favorite-color-options input { position: absolute; opacity: 0; pointer-events: none; }
.favorite-color-options label > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; background: var(--swatch); color: transparent; font-size: 1.12rem; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(69,82,101,.08); }
.favorite-color-options label:first-of-type > span { border-color: #d7dde6; color: #435166; }
.favorite-color-options label.selected > span { outline: 3px solid #dceaff; outline-offset: 3px; color: white; }
.favorite-color-options label.selected:first-of-type > span { color: #435166; }
.favorite-options-section { margin-top: 24px; }
.favorite-options-section > button { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 11px; background: #f1f3f6; color: #5d6a7d; font-weight: 600; }
.favorite-options-section > button span { font-size: 1.3rem; }
#favoriteOptionChoices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
#favoriteOptionChoices[hidden] { display: none; }
.favorite-option-choice { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border: 1px solid #dfe4eb; border-radius: 10px; background: white; color: #5e6b7d; }
.favorite-option-choice.selected { border-color: var(--blue); background: #eaf3ff; color: #286bcf; }
.favorite-product-error { min-height: 18px; margin: 10px 0 0; color: #e04d5b; font-size: .76rem; }
.favorite-product-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 38px; border-top: 1px solid #e7ebf0; background: white; }
.favorite-product-footer button { min-width: 110px; min-height: 54px; border: 0; border-radius: 13px; background: #f1f3f6; color: #566477; font-size: .94rem; font-weight: 700; }
.favorite-product-footer button[type="submit"] { min-width: 190px; background: var(--blue); color: white; }
.favorite-product-footer button[type="submit"]:disabled { background: #c9dcfa; cursor: not-allowed; }
.product-card.color-card { background: var(--product-color); color: white; }
.product-card.color-card .product-description, .product-card.color-card .product-price { color: rgba(255,255,255,.84); }
.product-card.color-card .add-mark { background: rgba(255,255,255,.22); color: white; }
.product-card.color-card.light-color { color: #344155; }
.product-card.color-card.light-color .product-description, .product-card.color-card.light-color .product-price { color: #617086; }
.product-card.color-card.light-color .add-mark { background: rgba(255,255,255,.55); color: #405066; }
.product-edit-card.color-card { background: var(--product-color); color: white; }
.product-edit-card.color-card.light-color { color: #344155; }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.category-manager-dialog {
  width: min(920px, calc(100% - 36px));
  height: min(820px, calc(100vh - 36px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 28px;
  color: var(--ink);
  box-shadow: 0 32px 90px rgba(17,30,49,.34);
  overflow: hidden;
}
.category-manager-dialog::backdrop { background: rgba(16,26,41,.62); backdrop-filter: blur(3px); }
.category-manager-shell { height: 100%; display: grid; grid-template-rows: 104px auto minmax(0,1fr) 36px; padding: 0 54px 24px; background: white; }
.category-manager-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.category-manager-head h2 { font-size: 1.45rem; font-weight: 600; }
.category-manager-head > div { display: flex; align-items: center; gap: 22px; }
.category-delete-mode { padding: 8px 2px 5px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: #6c7888; font-size: .95rem; }
.category-delete-mode.active { color: #ef4e5d; }
.category-manager-close { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #697688; font-size: 2.5rem; font-weight: 300; line-height: 1; }
.new-category-form { display: grid; grid-template-columns: minmax(0,1fr) 104px; gap: 14px; padding: 12px 0 24px; border-bottom: 1px solid #e5e9ef; }
.new-category-form input { width: 100%; height: 58px; padding: 0 18px; border: 1px solid #dde3ea; border-radius: 12px; color: #354154; font-size: 1rem; }
.new-category-form input:focus { border-color: var(--blue); outline: 2px solid rgba(50,125,240,.16); }
.new-category-form button { border: 0; border-radius: 14px; background: #e5f0ff; color: var(--blue); font-size: 1rem; font-weight: 650; }
.new-category-form button:disabled { background: #edf3fb; color: #a8c8f7; cursor: not-allowed; }
.category-manager-list { min-height: 0; overflow-y: auto; }
.category-manager-row { min-height: 92px; display: grid; grid-template-columns: minmax(0,1fr) 104px; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid #e5e9ef; }
.category-manager-row strong { padding-left: 20px; font-size: 1.12rem; font-weight: 550; }
.category-manager-row input { width: 100%; height: 58px; padding: 0 18px; border: 1px solid #dde3ea; border-radius: 12px; color: #354154; font-size: 1.02rem; }
.category-manager-row input:focus { border-color: var(--blue); outline: 2px solid rgba(50,125,240,.16); }
.category-manager-row button { height: 58px; border: 0; border-radius: 14px; background: #f1f2f4; color: #536174; font-size: 1rem; font-weight: 600; }
.category-manager-row button.save { background: #e4f0ff; color: #1f73e8; }
.category-manager-row button.delete { background: #fff0f2; color: #ef4355; }
.category-manager-error { min-height: 28px; margin: 0; padding-top: 8px; color: #df4b59; font-size: .78rem; }

.favorite-option-manager-dialog {
  width: min(820px, calc(100% - 36px));
  height: min(720px, calc(100vh - 36px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 26px;
  color: var(--ink);
  box-shadow: 0 32px 90px rgba(17,30,49,.34);
  overflow: hidden;
}
.favorite-option-manager-dialog::backdrop { background: rgba(16,26,41,.62); backdrop-filter: blur(3px); }
.favorite-option-manager-shell { height: 100%; display: grid; grid-template-rows: 92px 96px minmax(0,1fr) 82px; background: white; }
.favorite-option-manager-head { display: flex; align-items: center; justify-content: space-between; padding: 0 38px; }
.favorite-option-manager-head .eyebrow { margin: 0 0 4px; }
.favorite-option-manager-head h2 { margin: 0; font-size: 1.4rem; font-weight: 600; }
.favorite-option-manager-head > button { width: 44px; height: 44px; border: 0; background: transparent; color: #687588; font-size: 2.2rem; line-height: 1; }
.favorite-option-form { display: grid; grid-template-columns: 1fr 160px; gap: 13px 12px; padding: 18px 38px 20px; border-top: 1px solid #edf0f4; border-bottom: 1px solid #e5e9ef; background: #fafbfd; }
.favorite-option-form > label { color: #536176; font-size: .78rem; font-weight: 600; }
.favorite-option-form sup { color: #ef5965; }
.favorite-option-form input { width: 100%; height: 48px; display: block; margin-top: 7px; padding: 0 13px; border: 1px solid #dfe4eb; border-radius: 10px; background: white; color: #354154; font: inherit; font-weight: 400; }
.favorite-option-form input:focus { border-color: var(--blue); outline: 2px solid rgba(50,125,240,.15); }
.option-price-input { position: relative; display: block; }
.option-price-input input { padding-right: 38px; text-align: right; }
.option-price-input em { position: absolute; right: 13px; bottom: 14px; color: #7c8899; font-style: normal; font-weight: 500; }
.option-description-field { grid-column: 1 / -1; }
.favorite-option-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.favorite-option-form-actions button { min-width: 90px; height: 42px; border: 0; border-radius: 10px; background: #edf0f4; color: #59677a; font-weight: 650; }
.favorite-option-form-actions button[type="submit"] { background: var(--blue); color: white; }
.favorite-option-form-actions button[type="submit"]:disabled { background: #c9dcfa; cursor: not-allowed; }
.favorite-option-error { grid-column: 1 / -1; min-height: 18px; margin: -5px 0 0; color: #df4b59; font-size: .74rem; text-align: right; }
.favorite-option-manager-list { min-height: 0; padding: 0 38px; overflow-y: auto; }
.favorite-option-manager-row { min-height: 76px; display: grid; grid-template-columns: minmax(0,1fr) 110px 72px 72px; align-items: center; gap: 10px; border-bottom: 1px solid #e7ebf0; }
.favorite-option-manager-row > span { min-width: 0; }
.favorite-option-manager-row strong,.favorite-option-manager-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favorite-option-manager-row strong { color: #344154; font-size: .92rem; }
.favorite-option-manager-row small { margin-top: 4px; color: #8b96a5; font-size: .72rem; }
.favorite-option-manager-row > b { color: #536176; font-size: .84rem; text-align: right; }
.favorite-option-manager-row button { height: 40px; border: 0; border-radius: 9px; background: #f0f2f5; color: #566477; font-weight: 600; }
.favorite-option-manager-row button.delete { background: #fff0f2; color: #e84253; }
.favorite-option-manager-empty { margin-top: 24px; padding: 36px 18px; border: 1px dashed #ccd4df; border-radius: 14px; color: #8a96a6; text-align: center; }
.favorite-option-manager-footer { display: flex; align-items: center; justify-content: flex-end; padding: 14px 38px; border-top: 1px solid #e7ebf0; }
.favorite-option-manager-footer button { min-width: 180px; height: 52px; border: 0; border-radius: 12px; background: var(--blue); color: white; font-size: .92rem; font-weight: 700; }
.new-option-group-button { margin: 14px 38px 20px; border: 0; border-top: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; background: white; color: var(--blue); font-size: 1.05rem; }
.option-group-manager-row { width: 100%; min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 18px; border: 0; border-bottom: 1px solid #e7ebf0; background: white; color: #354154; text-align: left; }
.option-group-manager-row:hover { background: #f7faff; }
.option-group-manager-row span { min-width: 0; }
.option-group-manager-row strong,.option-group-manager-row small { display: block; }
.option-group-manager-row strong { font-size: 1.03rem; }
.option-group-manager-row small { margin-top: 7px; color: #8995a5; font-size: .76rem; }
.option-group-manager-row > b { color: #8290a2; font-size: 1.8rem; font-weight: 400; }

.option-group-editor-dialog,.option-sort-dialog { max-width: none; max-height: none; padding: 0; border: 0; border-radius: 28px; color: var(--ink); box-shadow: 0 32px 90px rgba(17,30,49,.36); overflow: hidden; }
.option-group-editor-dialog { width: min(900px, calc(100vw - 42px)); height: min(820px, calc(100vh - 42px)); }
.option-group-editor-dialog::backdrop,.option-sort-dialog::backdrop { background: rgba(16,26,41,.58); backdrop-filter: blur(2px); }
.option-group-editor-shell { height: 100%; display: grid; grid-template-rows: 74px minmax(0,1fr) 28px 92px; background: white; }
.option-editor-head { position: absolute; top: 13px; right: 22px; z-index: 2; }
.option-editor-head button { width: 42px; height: 42px; border: 0; background: transparent; color: #687588; font-size: 2.1rem; line-height: 1; }
.option-editor-steps { width: calc(100% - 110px); align-self: end; justify-self: center; display: grid; grid-template-columns: 1fr 1fr; padding: 7px; border-radius: 18px; background: #f4f7fb; }
.option-editor-steps button { min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border: 0; border-radius: 14px; background: transparent; color: #657286; font-size: .95rem; font-weight: 700; text-align: left; }
.option-editor-steps button.active { background: white; color: #344154; box-shadow: 0 2px 10px rgba(35,51,73,.05); }
.option-editor-steps span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e2e7ed; color: #788596; font-size: .78rem; }
.option-editor-steps button.active span { background: #e5f0ff; color: #2677e5; }
.option-editor-panel { min-height: 0; padding: 34px 58px 24px; overflow-y: auto; }
.option-editor-panel[hidden] { display: none; }
.option-group-name-field { display: block; color: #566477; font-size: .86rem; font-weight: 650; }
.option-group-name-field em { color: #ef5965; font-style: normal; }
.option-group-name-field input { width: 100%; height: 56px; display: block; margin-top: 10px; padding: 0 16px; border: 1px solid #dce2e9; border-radius: 12px; color: #354154; font: inherit; font-weight: 450; }
.option-group-name-field input:focus,.option-draft-row input:focus,.option-product-search:focus-within { border-color: var(--blue); outline: 2px solid rgba(50,125,240,.14); }
.option-items-heading { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 10px; color: #566477; font-size: .86rem; }
.option-items-heading button { border: 0; background: transparent; color: #6d798a; font-weight: 600; }
.option-items-heading button:disabled { opacity: .35; }
.option-draft-items { display: grid; gap: 10px; }
.option-draft-row { display: grid; grid-template-columns: minmax(0,1fr) 190px 52px; gap: 10px; }
.option-draft-row > input,.option-draft-row label { height: 54px; border: 1px solid #dce2e9; border-radius: 11px; background: white; }
.option-draft-row > input { min-width: 0; padding: 0 15px; color: #354154; font: inherit; }
.option-draft-row label { display: grid; grid-template-columns: 32px minmax(0,1fr) 28px; align-items: center; padding: 0 12px; color: #637084; }
.option-draft-row label input { min-width: 0; border: 0; outline: 0; color: #354154; font: inherit; text-align: right; }
.option-draft-row > button { border: 0; border-radius: 11px; background: #f1f3f6; color: #8995a5; font-size: 1.2rem; }
.add-option-draft-item { margin-top: 14px; padding: 8px 4px; border: 0; background: transparent; color: var(--blue); font-size: .92rem; font-weight: 650; }
.option-product-search { height: 56px; display: grid; grid-template-columns: 42px 1fr; align-items: center; padding: 0 14px; border: 1px solid #dce2e9; border-radius: 12px; color: #6f7d90; }
.option-product-search span { font-size: 1.45rem; }
.option-product-search input { min-width: 0; border: 0; outline: 0; color: #354154; font: inherit; }
.option-products-title { display: flex; justify-content: space-between; align-items: center; margin: 28px 0 12px; }
.option-products-title strong { font-size: 1rem; }
.option-products-title button { border: 0; background: transparent; color: #8a96a6; font-weight: 600; }
.option-product-category-head { min-height: 64px; display: grid; grid-template-columns: minmax(0,1fr) auto 44px; align-items: center; gap: 12px; border-bottom: 1px solid #edf0f4; }
.option-product-category-head > button:first-child { display: flex; align-items: center; gap: 13px; border: 0; background: transparent; color: #354154; font-size: .96rem; font-weight: 700; text-align: left; }
.option-product-category-head > span b { color: var(--blue); font-size: .82rem; }
.option-check { width: 32px; height: 32px; border: 2px solid #dce2e9; border-radius: 50%; background: white; color: transparent; font-weight: 700; }
.option-check.selected { border-color: var(--blue); background: var(--blue); color: white; }
.option-product-list { padding: 4px 0 10px 42px; }
.option-product-list button { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 12px; border: 0; background: white; color: #566477; text-align: left; }
.option-product-list button b { color: transparent; font-size: 1.2rem; }
.option-product-list button.selected b { color: var(--blue); }
.option-confirm-panel { padding-top: 44px; }
.option-confirm-back { padding: 4px 0; border: 0; background: transparent; color: #778496; font-size: .9rem; }
.option-confirm-panel h3 { margin: 32px 0 28px; color: #344154; font-size: 1.32rem; }
.option-confirm-panel h3 b { color: var(--blue); }
.option-confirm-panel > p { color: #8995a5; font-size: .82rem; }
#optionConfirmCategories { display: flex; flex-wrap: wrap; gap: 8px; }
#optionConfirmCategories span { padding: 11px 14px; border-radius: 8px; background: #f1f3f6; color: #566477; font-weight: 600; }
.option-editor-error { margin: 0; padding: 4px 58px; color: #df4b59; font-size: .76rem; text-align: right; }
.option-editor-footer { display: grid; grid-template-columns: auto 1fr 120px 190px; align-items: center; gap: 12px; padding: 16px 58px; border-top: 1px solid #e7ebf0; }
.option-editor-footer button { min-height: 54px; border: 0; border-radius: 13px; background: #f1f3f6; color: #566477; font-size: .94rem; font-weight: 700; }
.option-editor-footer #nextOptionEditor { background: var(--blue); color: white; }
.option-editor-footer .danger { min-width: 110px; background: #fff0f2; color: #ef4355; }
.option-sort-dialog { width: min(720px, calc(100vw - 42px)); height: min(720px, calc(100vh - 42px)); }
.option-sort-shell { height: 100%; display: grid; grid-template-rows: 100px minmax(0,1fr) 90px; background: white; }
.option-sort-shell header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 52px; }
.option-sort-shell h2 { margin: 0; font-size: 1.28rem; }
.option-sort-shell header div { display: flex; gap: 8px; }
.option-sort-shell header button { min-height: 42px; padding: 0 14px; border: 0; border-radius: 9px; background: #e8f2ff; color: #2878e6; font-weight: 650; }
.option-sort-list { min-height: 0; padding: 0 52px; overflow-y: auto; }
.option-sort-list button { width: 100%; min-height: 74px; display: flex; align-items: center; gap: 17px; padding: 0 24px; border: 0; border-bottom: 1px solid #e7ebf0; background: white; color: #354154; font-size: .96rem; font-weight: 600; text-align: left; }
.option-sort-list button.selected { background: #e8f2ff; }
.option-sort-list button span { width: 24px; height: 24px; border: 2px solid #d5dce5; border-radius: 50%; }
.option-sort-list button.selected span { border: 7px solid var(--blue); }
.option-sort-shell footer { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 16px 52px; border-top: 1px solid #e7ebf0; }
.option-sort-shell footer button { min-width: 130px; height: 54px; border: 0; border-radius: 13px; background: #f1f3f6; color: #566477; font-weight: 700; }
.option-sort-shell footer button:last-child { min-width: 190px; background: var(--blue); color: white; }

/* Saved orders and payback */
.saved-order-dialog,.payback-dialog {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 26px;
  color: var(--ink);
  box-shadow: 0 32px 90px rgba(17,30,49,.34);
  overflow: hidden;
}
.saved-order-dialog::backdrop,.payback-dialog::backdrop { background: rgba(16,26,41,.62); backdrop-filter: blur(3px); }
.saved-order-dialog { width: min(780px, calc(100vw - 48px)); height: min(760px, calc(100vh - 48px)); }
.saved-order-shell { height: 100%; display: grid; grid-template-rows: 104px minmax(0,1fr); background: white; }
.saved-order-shell > header { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 0 44px; border-bottom: 1px solid #edf0f4; }
.saved-order-shell h2 { margin: 0; color: #303d50; font-size: 1.4rem; font-weight: 650; }
.saved-order-shell header > div { display: flex; align-items: center; gap: 8px; }
.saved-order-clear { height: 42px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: #657286; font-size: .84rem; }
.saved-order-clear:hover:not(:disabled) { background: #f1f4f8; }
.saved-order-clear:disabled { opacity: .4; cursor: default; }
.saved-order-close,.payback-shell header > button { width: 46px; height: 46px; padding: 0; border: 0; background: transparent; color: #687588; font-size: 2.4rem; font-weight: 300; line-height: 1; }
.saved-order-list { min-height: 0; padding: 16px 44px 36px; overflow-y: auto; }
.saved-order-row { min-height: 92px; display: grid; grid-template-columns: minmax(0,1fr) 104px; align-items: center; gap: 18px; border-bottom: 1px solid #e7ebf0; }
.saved-order-row span { min-width: 0; }
.saved-order-row strong,.saved-order-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-order-row strong { color: #3e4b5d; font-size: .94rem; }
.saved-order-row small { margin-top: 7px; color: #7e8b9c; font-size: .78rem; }
.saved-order-row > button { height: 48px; border: 0; border-radius: 12px; background: #e8f2ff; color: #2677e5; font-size: .86rem; font-weight: 700; }
.saved-order-row > button:hover { background: #dbeaff; }
.saved-order-empty { margin-top: 12px; padding: 52px 18px; border: 1px dashed #cbd4df; border-radius: 14px; color: #8793a3; text-align: center; }

.payback-dialog { width: min(430px, calc(100vw - 28px)); height: min(620px, calc(100vh - 28px)); }
.payback-shell { height: 100%; display: grid; grid-template-rows: 92px minmax(0,1fr) 94px; background: white; }
.payback-shell > header { display: flex; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 1px solid #edf0f4; }
.payback-shell h2 { margin: 0; color: #687588; font-size: 1.35rem; font-weight: 600; }
.payback-body { min-height: 0; padding: 38px 50px 26px; }
.payback-display-row { min-height: 64px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; border-bottom: 1px solid #e7ebf0; }
.payback-display-row > strong { overflow: hidden; color: #8a96a6; font-size: 1.3rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.payback-units { display: flex; gap: 7px; }
.payback-units button { width: 48px; height: 46px; border: 0; border-radius: 11px; background: #f1f3f6; color: #4e5c70; font-size: 1rem; font-weight: 700; }
.payback-units button.active { background: #536176; color: white; }
.payback-keypad { display: grid; grid-template-columns: repeat(3,1fr); align-items: center; justify-items: center; gap: 4px 24px; margin-top: 30px; }
.payback-keypad button { width: 72px; height: 62px; padding: 0; border: 0; border-radius: 14px; background: transparent; color: #4d5a6d; font-size: 2rem; font-weight: 450; }
.payback-keypad button:hover { background: #f3f6fa; }
.payback-shell > footer { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 12px; padding: 16px 36px; border-top: 1px solid #e6eaf0; }
.payback-shell > footer button { border: 0; border-radius: 13px; font-size: .95rem; font-weight: 700; }
#cancelPayback { background: #f1f3f6; color: #576477; }
#confirmPayback { background: var(--blue); color: white; }

/* Order to reservation flow */
.order-reservation-flow-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
.order-reservation-flow-dialog::backdrop { background: transparent; }
.order-reservation-flow-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.order-reservation-flow-loading { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; justify-items: center; gap: 16px; background: rgba(16,26,41,.62); color: white; }
.order-reservation-flow-loading[hidden] { display: none; }
.order-reservation-flow-loading p { max-width: 480px; margin: 0; padding: 0 24px; line-height: 1.7; text-align: center; word-break: keep-all; }
.order-reservation-flow-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.order-reservation-flow-loading button { padding: 12px 32px; border: 0; border-radius: 12px; background: white; color: var(--ink); font: inherit; }
.order-reservation-flow-loading button[hidden] { display: none; }
.order-reservation-flow-loading #retryOrderReservationFlow { background: var(--blue); color: white; }
.order-customer-dialog,.order-booking-dialog { max-width: none; max-height: none; padding: 0; border: 0; color: var(--ink); box-shadow: 0 32px 90px rgba(17,30,49,.34); overflow: hidden; }
.order-customer-dialog::backdrop,.order-booking-dialog::backdrop { background: rgba(16,26,41,.62); backdrop-filter: blur(3px); }
.order-customer-dialog { width: min(760px, calc(100% - 48px)); height: min(760px, calc(100vh - 48px)); border-radius: 26px; }
.order-customer-shell { height: 100%; display: grid; grid-template-rows: 104px 82px minmax(0,1fr); background: white; }
.order-customer-shell > header,.order-booking-shell > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 42px; border-bottom: 1px solid #edf0f4; }
.order-customer-shell header .eyebrow,.order-booking-shell header .eyebrow { margin: 0 0 4px; }
.order-customer-shell h2,.order-booking-shell h2 { margin: 0; color: #303d50; font-size: 1.45rem; font-weight: 620; }
.order-customer-shell header > button,.booking-close { width: 46px; height: 46px; flex: 0 0 46px; border: 0; background: transparent; color: #687588; font-size: 2.35rem; font-weight: 300; line-height: 1; }
.order-customer-search { height: 56px; display: flex; align-items: center; gap: 12px; margin: 14px 42px 12px; padding: 0 17px; border: 1px solid #dfe5ec; border-radius: 12px; background: #fff; }
.order-customer-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(50,125,240,.12); }
.order-customer-search svg { width: 20px; fill: none; stroke: #8a96a6; stroke-width: 1.8; }
.order-customer-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #354154; font: inherit; }
.order-customer-list { min-height: 0; padding: 4px 42px 34px; overflow-y: auto; }
.order-customer-card { width: 100%; min-height: 88px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 17px 18px; border: 0; border-bottom: 1px solid #e8ecf1; background: white; color: #354154; text-align: left; }
.order-customer-card:hover,.order-customer-card:focus-visible { border-radius: 12px; outline: 0; background: #f2f7ff; }
.order-customer-card strong,.order-customer-card small,.order-customer-card em { display: block; }
.order-customer-card strong { font-size: 1rem; font-weight: 650; }
.order-customer-card small { margin-top: 5px; color: #7e8a9a; font-size: .78rem; }
.order-customer-card em { max-width: 220px; color: #8995a5; font-size: .72rem; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-customer-empty { margin-top: 20px; padding: 44px 18px; border: 1px dashed #ccd4df; border-radius: 14px; color: #8a96a6; text-align: center; }

.order-booking-dialog { width: min(640px, calc(100vw - 32px)); height: min(640px, calc(100vh - 32px)); border-radius: 28px; }
.order-booking-shell { height: 100%; display: grid; grid-template-rows: 88px minmax(0,1fr) 82px; background: white; }
.order-booking-shell > header { position: relative; display: grid; grid-template-columns: 46px minmax(0,1fr) 46px; }
.order-booking-shell header > div { min-width: 0; }
.order-booking-shell header > div > p:last-child { margin: 6px 0 0; color: #8190a2; font-size: .78rem; }
.booking-back { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 10px; background: #f1f4f8; color: #66758a; font-size: 2rem; line-height: 1; }
.order-booking-body { min-height: 0; padding: 26px 44px 34px; overflow-y: auto; }
.booking-field { display: block; }
.booking-field > span,.booking-date-time legend,.booking-products h3,.booking-employees legend { color: #354154; font-size: .88rem; font-weight: 650; }
.booking-field small { margin-left: 5px; color: #98a3b2; font-size: .7rem; font-weight: 450; }
.booking-customer { padding-bottom: 20px; border-bottom: 1px solid #e9edf2; }
.booking-customer select { width: 100%; height: 54px; display: block; margin-top: 10px; padding: 0 15px; border: 1px solid #dce2e9; border-radius: 12px; background: white; color: #354154; font: inherit; }
.booking-customer select:focus { border-color: var(--blue); outline: 3px solid rgba(50,125,240,.12); }
.booking-deposit { display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: center; padding: 20px 0; border-bottom: 1px solid #e9edf2; }
.booking-deposit > div { position: relative; }
.booking-deposit input { width: 100%; height: 52px; padding: 0 44px 0 16px; border: 1px solid #dde3ea; border-radius: 11px; color: #354154; font: inherit; text-align: right; }
.booking-deposit b { position: absolute; right: 16px; top: 17px; color: #687588; font-size: .85rem; }
.booking-date-time,.booking-employees { margin: 0; padding: 24px 0; border: 0; border-bottom: 1px solid #e9edf2; }
.booking-date-time { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10px; }
.booking-date-time legend { margin-bottom: 16px; }
.booking-date-time label:first-of-type { grid-column: 1 / -1; }
.booking-date-time label span { display: block; margin: 0 0 7px; color: #7d8999; font-size: .72rem; }
.booking-date-time input,.booking-date-time select { width: 100%; height: 50px; padding: 0 13px; border: 1px solid #dde3ea; border-radius: 10px; background: white; color: #354154; font: inherit; }
.booking-time-separator { display: none; }
.booking-products { padding: 24px 0; border-bottom: 1px solid #e9edf2; }
.booking-products > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.booking-products h3 { margin: 0; }
.booking-products h3 span { color: #2d7fee; }
.booking-products > div:first-child > strong { color: #2577e7; font-size: 1rem; }
.booking-product-line { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding: 11px 14px; border-radius: 10px; background: #f7f9fc; }
.booking-product-line + .booking-product-line { margin-top: 7px; }
.booking-product-line strong,.booking-product-line small { display: block; }
.booking-product-line strong { color: #3b485a; font-size: .82rem; }
.booking-product-line small { margin-top: 4px; color: #8793a3; font-size: .69rem; }
.booking-product-line > b { align-self: center; color: #566477; font-size: .78rem; }
.booking-employees legend { margin-bottom: 14px; }
.booking-employees > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.booking-employee input { position: absolute; opacity: 0; }
.booking-employee span { min-height: 48px; display: grid; place-items: center; padding: 8px; border: 1px solid #dfe4eb; border-radius: 11px; color: #667487; font-size: .78rem; text-align: center; }
.booking-employee input:checked + span { border-color: var(--blue); background: #e8f2ff; color: #1e72e5; font-weight: 650; }
.booking-memo { padding-top: 24px; }
.booking-memo textarea { width: 100%; min-height: 94px; display: block; margin-top: 10px; padding: 14px; border: 1px solid #dde3ea; border-radius: 11px; color: #354154; font: inherit; resize: vertical; }
.order-booking-error { min-height: 20px; margin: 10px 0 0; color: #df4b59; font-size: .75rem; text-align: right; }
.order-booking-shell > footer { display: flex; align-items: center; justify-content: flex-end; padding: 15px 44px; border-top: 1px solid #e7ebf0; background: #fff; }
.order-booking-shell > footer button { min-width: 230px; height: 56px; border: 0; border-radius: 13px; background: var(--blue); color: white; font-size: 1rem; font-weight: 700; }

@media (max-width: 1180px) {
  .workspace, body.order-editing .workspace { grid-template-columns: minmax(0, 1fr) 260px; }
  .product-grid, body.order-editing .product-grid { grid-template-columns: repeat(6, var(--product-card-width)); grid-template-rows: repeat(4, var(--product-card-height)); }
  .quick-option-layout { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

@media (max-width: 780px) {
  .workspace, body.order-editing .workspace { display: grid; grid-template-columns: minmax(0,1fr) min(42vw,260px); height: calc(100vh - 52px); }
  .catalog-panel { height: 100%; min-height: 0; }
  .catalog-toolbar { flex-basis: 62px; overflow-x: auto; }
  .category-row { min-width: 0; padding-inline: 8px; }
  .category-tab { min-height: 62px; font-size: .92rem; }
  .category-tools { position: sticky; right: 0; min-height: 62px; box-shadow: -8px 0 14px rgba(68,82,102,.08); }
  .product-grid, body.order-editing .product-grid { flex: 1 1 auto; min-height: 0; container-type: size; grid-template-columns: repeat(6,var(--product-card-width)); grid-template-rows: repeat(4,var(--product-card-height)); padding: 5px 6px; overflow: hidden; }
  .product-card, .product-edit-card, .product-edit-slot, .product-empty-slot { width: 100%; height: 100%; }
  .pos-catalog-actions { padding-inline: 14px; }
  .catalog-page-indicator { display: none; }
  .options-zone { min-height: 92px; flex-basis: 104px; padding-inline: 8px; }
  .quick-option-layout { height: calc(100% - 31px); grid-template-columns: repeat(5,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); }
  .option-page-controls { grid-column: 4; grid-row: 2; }
  .quick-option-actions #quickMemoButton,.quick-option-actions #manageFavoriteOptions { grid-column: auto; grid-row: auto; }
  .order-panel { height: 100%; min-height: 0; border-radius: 0; }
  .order-customer-dialog,.order-booking-dialog { width: calc(100% - 20px); height: calc(100vh - 20px); border-radius: 20px; }
  .order-customer-shell { grid-template-rows: 84px 76px minmax(0,1fr); }
  .order-customer-shell > header,.order-booking-shell > header { padding: 0 20px; }
  .order-customer-shell h2,.order-booking-shell h2 { font-size: 1.15rem; }
  .order-customer-search { margin-right: 20px; margin-left: 20px; }
  .order-customer-list { padding-right: 20px; padding-left: 20px; }
  .order-booking-shell { grid-template-rows: 96px minmax(0,1fr) 78px; }
  .order-booking-body,.order-booking-shell > footer { padding-right: 20px; padding-left: 20px; }
  .booking-date-time { grid-template-columns: 1fr 1fr; }
  .booking-date-time legend { grid-column: 1 / -1; }
  .booking-time-separator { display: none; }
  .booking-employees > div { grid-template-columns: 1fr; }
  .order-booking-shell > footer button { min-width: 0; width: 100%; }
  .add-product-dialog { width: calc(100% - 20px); height: calc(100vh - 20px); border-radius: 20px; }
  .add-product-dialog form { grid-template-rows: 68px minmax(0,1fr) 78px; }
  .add-product-head, .add-product-body, .add-product-footer { padding-right: 20px; padding-left: 20px; }
  .product-style-picker { grid-template-columns: 96px 1fr; gap: 18px; }
  .new-product-preview { width: 96px; height: 96px; }
  .product-color-options { gap: 13px; }
  .product-color-options label > span { width: 38px; height: 38px; }
  .add-product-switch-row small { display: block; margin: 3px 0 0; }
  .add-product-footer button, .add-product-footer button[type="submit"] { min-width: 0; flex: 1; }
  .favorite-product-dialog { width: calc(100% - 20px); height: calc(100vh - 20px); border-radius: 20px; }
  .favorite-product-dialog form { grid-template-rows: 68px minmax(0,1fr) 78px; }
  .favorite-product-head, .favorite-product-body, .favorite-product-footer { padding-right: 20px; padding-left: 20px; }
  .favorite-source-fields { grid-template-columns: 1fr; }
  .favorite-style-picker { grid-template-columns: 96px 1fr; gap: 18px; }
  .favorite-product-preview { width: 96px; height: 96px; }
  .favorite-color-options { gap: 12px; }
  .favorite-color-options label > span { width: 36px; height: 36px; }
  .favorite-product-footer button, .favorite-product-footer button[type="submit"] { min-width: 0; flex: 1; }
  .category-manager-dialog { width: calc(100% - 20px); height: calc(100vh - 20px); border-radius: 20px; }
  .category-manager-shell { grid-template-rows: 76px auto minmax(0,1fr) 32px; padding: 0 20px 16px; }
  .category-manager-head h2 { font-size: 1.2rem; }
  .category-manager-head > div { gap: 12px; }
  .category-manager-close { width: 40px; height: 40px; }
  .new-category-form, .category-manager-row { grid-template-columns: minmax(0,1fr) 84px; gap: 9px; }
  .category-manager-row strong { padding-left: 8px; }
  .favorite-option-manager-dialog { width: calc(100% - 20px); height: calc(100vh - 20px); border-radius: 20px; }
  .favorite-option-manager-shell { grid-template-rows: 76px auto minmax(0,1fr) 72px; }
  .favorite-option-manager-head,.favorite-option-manager-list,.favorite-option-manager-footer { padding-right: 20px; padding-left: 20px; }
  .new-option-group-button { margin-right: 20px; margin-left: 20px; }
  .favorite-option-form { grid-template-columns: 1fr; padding: 16px 20px; }
  .option-description-field { grid-column: auto; }
  .favorite-option-form-actions,.favorite-option-error { grid-column: auto; }
  .favorite-option-manager-row { grid-template-columns: minmax(0,1fr) 84px 58px; gap: 6px; padding: 10px 0; }
  .favorite-option-manager-row > b { grid-column: 2 / 4; grid-row: 1; }
  .favorite-option-manager-row button { grid-row: 2; }
  .option-group-editor-dialog,.option-sort-dialog { width: calc(100% - 20px); height: calc(100vh - 20px); border-radius: 20px; }
  .option-group-editor-shell { grid-template-rows: 68px minmax(0,1fr) 28px 82px; }
  .option-editor-steps { width: calc(100% - 40px); }
  .option-editor-steps button { min-height: 50px; padding: 0 10px; font-size: .82rem; }
  .option-editor-panel { padding: 24px 20px 18px; }
  .option-draft-row { grid-template-columns: minmax(0,1fr) 132px 44px; gap: 6px; }
  .option-editor-error { padding-right: 20px; padding-left: 20px; }
  .option-editor-footer { grid-template-columns: auto 1fr 90px 120px; padding: 13px 20px; }
  .option-sort-shell { grid-template-rows: 88px minmax(0,1fr) 80px; }
  .option-sort-shell header,.option-sort-list,.option-sort-shell footer { padding-right: 20px; padding-left: 20px; }
}