:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #15171a;
  --muted: #717783;
  --accent: #2481cc;
  --border: #e5e7eb;
  --danger: #b91c1c;
  --ok: #166534;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; background: var(--bg); color: var(--text); padding-bottom: 86px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 14px 10px; position: sticky; top: 0; background: rgba(245,246,248,.96); backdrop-filter: blur(12px); z-index: 5; border-bottom: 1px solid rgba(229,231,235,.65); }
h1 { margin: 0; font-size: 22px; line-height: 1.1; }
h2 { margin: 0; font-size: 22px; }
h3 { margin: 0; font-size: 18px; }
p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
button { font: inherit; cursor: pointer; }
.cart, .loadMore, .qty button, .panelBottom button { border: 0; border-radius: 14px; background: var(--accent); color: white; padding: 11px 13px; font-weight: 800; }
.cart { min-width: 116px; }
.searchBox { padding: 10px 14px; }
.searchBox input { width: 100%; border: 1px solid var(--border); border-radius: 16px; padding: 13px 15px; font-size: 16px; outline: none; background: #fff; }
.chips { display: flex; overflow-x: auto; gap: 8px; padding: 0 14px 10px; }
.chip { white-space: nowrap; border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 9px 12px; }
.chip.active { background: var(--accent); color: white; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; padding: 0 14px; }
.card { background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.06); display: flex; flex-direction: column; min-height: 236px; }
.img { height: 110px; background: #e8eaef; display: flex; align-items: center; justify-content: center; font-size: 34px; overflow: hidden; }
.img img { width: 100%; height: 100%; object-fit: cover; }
.content { padding: 10px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.name { font-weight: 800; line-height: 1.18; min-height: 35px; font-size: 14px; }
.price { font-size: 16px; font-weight: 900; margin-top: auto; }
.stock, .desc { color: var(--muted); font-size: 11px; line-height: 1.25; }
.desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qty { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 7px; }
.qty button { padding: 9px 0; border-radius: 12px; }
.qty span { text-align: center; font-weight: 800; }
.loadMore { margin: 14px; width: calc(100% - 28px); }
.hidden { display: none !important; }
body.sectionMode .catalogOnly { display: none !important; }
.sitePage { margin: 10px 14px 0; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 4px 18px rgba(0,0,0,.05); padding: 14px; }
.panelHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.panelHead button { border: 0; background: transparent; font-size: 30px; line-height: 1; padding: 0 4px; color: var(--text); }
.cartItems { display: grid; gap: 0; }
.cartLine { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); align-items: start; }
.cartLine b:last-child { white-space: nowrap; }
.checkoutBox { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.checkoutBox label { color: var(--muted); font-size: 12px; font-weight: 800; }
.checkoutBox textarea, .checkoutBox select, .geoFields input { width: 100%; border: 1px solid var(--border); border-radius: 14px; padding: 12px; font: inherit; background: #fff; outline: none; }
.checkoutBox textarea { min-height: 58px; resize: vertical; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segment { border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 14px; padding: 11px; font-weight: 800; }
.segment.active { background: var(--accent); color: #fff; }
.deliveryOnly { display: grid; gap: 8px; }
.deliveryTools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.secondaryBtn { border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 13px; padding: 10px 11px; font-weight: 800; }
.deliveryQuote { color: var(--muted); font-size: 13px; width: 100%; }
.geoFields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; }
.mapPreview { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; height: 240px; background: #eef2f7; position: relative; }
.mapPreview .leaflet-container { width: 100%; height: 100%; }
.mapFallback { height: 100%; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 16px; }
.checkoutResult { border-radius: 14px; padding: 12px; background: #eef7ee; color: var(--ok); font-weight: 800; }
.checkoutResult.error { background: #fee2e2; color: #991b1b; }
.orderDetail { margin-top: 12px; border: 1px solid var(--border); border-radius: 16px; padding: 12px; background: #fff; position: relative; }
.orderDetail p { margin: 3px 0; }
.orderDetailHead { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.orderDetailHead h3 { margin: 0 0 4px; }
.closeOrderBtn { position: absolute; right: 12px; top: 8px; border:0; background:transparent; font-size:28px; color:var(--text); }
.orderItemLine { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.orderItemLine small { color: var(--muted); }
.orderTotal { padding-top: 10px; font-size: 18px; }
.orderActions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.orderActions button, .checkoutResult button { border: 0; border-radius: 12px; padding: 10px 12px; font-weight: 800; }
.payOrderBtn, .openOrderBtn { background: var(--accent); color: #fff; }
.cancelOrderBtn { background: #fee2e2; color: var(--danger); }
.panelBottom { position: sticky; bottom: 70px; background: rgba(255,255,255,.98); padding: 12px 0 0; margin-top: 8px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; z-index: 4; }
.panelBottom button:disabled { opacity: .55; cursor: wait; }
.bottomNav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--border); backdrop-filter: blur(12px); }
.bottomNav button { border: 0; border-radius: 13px; background: transparent; color: var(--muted); padding: 7px 4px; font-weight: 800; display: grid; place-items: center; gap: 2px; font-size: 17px; }
.bottomNav button span { font-size: 10px; }
.bottomNav button.active { background: var(--accent); color: #fff; }
.siteOrderList { display: grid; gap: 8px; }
.siteOrderCard { width: 100%; border: 1px solid var(--border); border-radius: 14px; background: #fff; color: var(--text); padding: 12px; text-align: left; display: grid; gap: 4px; }
.siteOrderCard b { font-size: 17px; }
.siteOrderCard span { color: var(--muted); font-size: 13px; }
.loyaltyBox { display: grid; gap: 12px; }
.cardCode { border: 1px dashed var(--accent); border-radius: 16px; background: #eef6ff; padding: 18px; text-align: center; font-weight: 900; font-size: 22px; letter-spacing: .04em; }
.loyaltyGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.loyaltyGrid div { border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: #fff; }
.loyaltyGrid span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.loyaltyGrid b { font-size: 18px; }
.emptyState, .error { padding: 18px; text-align: center; color: var(--muted); }
@media (min-width: 650px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body { max-width: 980px; margin: 0 auto; }
  .bottomNav { max-width: 980px; margin: 0 auto; }
  .sitePage { margin-left: 16px; margin-right: 16px; }
}
@media (max-width: 430px) {
  h1 { font-size: 21px; }
  .top { padding-left: 12px; padding-right: 12px; }
  .cart { min-width: 106px; padding: 10px 11px; }
  .grid { padding: 0 10px; gap: 9px; }
  .card { min-height: 222px; border-radius: 16px; }
  .img { height: 100px; }
  .content { padding: 9px; }
  .geoFields { grid-template-columns: 1fr 1fr; }
  .geoFields button { grid-column: 1 / -1; }
  .panelBottom { bottom: 64px; }
}


/* v31 client order/payment polish */
.orderDetailHead h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.receiveTitle { font-size: 18px; font-weight: 900; }
.payOrderBtn { background: var(--accent); color: #fff; }
.panelBottom button:disabled { opacity: .45; cursor: not-allowed; }

.receiveTitle.small { font-size: 16px; }

/* v32 client checkout/order compact actions + discount totals */
.createdOrderBox { display: grid; gap: 8px; }
.createdOrderActions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.createdOrderActions button { border: 0; border-radius: 12px; padding: 10px 12px; font-weight: 800; }
.markPaidBtn { background: #16a34a; color: #fff; }
.markPaidBtn:disabled { opacity: .65; }
.orderTotals { display: grid; gap: 6px; padding-top: 10px; }
.orderTotals div { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); }
.orderTotals b { color: var(--text); white-space: nowrap; }
.orderTotals .discountRow b { color: var(--ok); }
.orderTotals .grandTotal { border-top: 1px solid var(--border); padding-top: 8px; color: var(--text); font-size: 18px; }
.orderTotals .grandTotal b { font-size: 19px; }


/* v35 loyalty QR */
.qrBox { display: flex; justify-content: center; padding: 8px 0 2px; }
.qrBox img { width: min(260px, 74vw); height: auto; image-rendering: pixelated; border: 1px solid var(--border); border-radius: 16px; background: #fff; padding: 10px; }
.cardCodeLabel { text-align: center; color: var(--muted); font-size: 12px; font-weight: 800; margin-top: 2px; }
.cardCode { margin-top: 2px; }

/* v36 client order rating */
.reviewBox { margin-top: 12px; border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; padding: 12px; display: grid; gap: 8px; }
.ratingButtons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.ratingButtons button, .editReviewBtn { border: 0; border-radius: 12px; padding: 10px; font-weight: 900; background: var(--accent); color: #fff; }
.reviewComment { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 10px; font: inherit; resize: vertical; min-height: 58px; }
.orderTotals div span::after { content: ""; }


/* v37: fixed catalog search while product list scrolls */
body:not(.sectionMode) .searchBox.catalogOnly {
  position: sticky;
  top: 64px;
  z-index: 6;
  background: rgba(245,246,248,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229,231,235,.55);
}
@media (max-width: 430px) {
  body:not(.sectionMode) .searchBox.catalogOnly { top: 58px; }
}

/* v38: payment hints and phone confirmation */
.paymentHint, .phoneConfirm { border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; padding: 10px 12px; color: var(--text); font-size: 13px; }
.paymentHint button, .phoneConfirm button { border: 0; border-radius: 10px; padding: 8px 10px; background: var(--accent); color: #fff; font-weight: 900; margin-top: 6px; }
.paymentHint small { color: var(--muted); }
.orderPaymentHint { margin-top: 10px; }
.phoneConfirm.ok { background: #eef7ee; color: var(--ok); }


/* v39 client delivery addresses and order-list detail flow */
.mutedBox { border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; padding: 10px 12px; color: var(--muted); font-size: 13px; }
.addressPanel { border: 1px solid var(--border); border-radius: 14px; background: #fff; padding: 8px; }
.addressList { display: grid; gap: 7px; }
.addressPick { width: 100%; border: 1px solid var(--border); border-radius: 12px; background: #f8fafc; color: var(--text); padding: 9px 10px; text-align: left; display: grid; gap: 2px; }
.addressPick span, .addressPick small { color: var(--muted); font-size: 12px; }
.backToOrderListBtn { margin-bottom: 10px; }
.orderDetail .secondaryBtn { background: #eef2f7; }

/* v40: categories button, compact address editor, no modal crosses */
#closeInfo, .closeOrderBtn { display: none !important; }
.categoryToggle { border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text); padding: 10px 14px; font-weight: 900; }
.categoryPanel { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 2px; }
.categoryPanel.hidden { display: none !important; }
.addressTools { display: grid; gap: 8px; }
.compactDeliveryTools { align-items: center; }
.siteToast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(12px); background: rgba(15,23,42,.92); color: #fff; padding: 10px 14px; border-radius: 999px; font-weight: 900; z-index: 80; opacity: 0; pointer-events: none; transition: .18s ease; }
.siteToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* v41: sticky catalog category button and address editor actions */
.searchBox.catalogOnly { position: sticky; top: 62px; z-index: 6; background: rgba(245,246,248,.96); backdrop-filter: blur(12px); padding-bottom: 8px; }
.chips.catalogOnly { position: sticky; top: 125px; z-index: 5; background: rgba(245,246,248,.96); backdrop-filter: blur(12px); padding-top: 4px; }
.categoryToggle { position: sticky; left: 0; z-index: 2; box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.addressPanel { position: relative; padding: 12px; box-shadow: 0 8px 26px rgba(15,23,42,.08); }
.addressPanel::before { content: "Мои адреса"; display: block; font-size: 18px; font-weight: 900; margin-bottom: 8px; }
.addressRow { border: 1px solid var(--border); border-radius: 13px; background: #f8fafc; padding: 8px; display: grid; gap: 7px; }
.addressRow .addressPick { border: 0; background: transparent; padding: 0; border-radius: 0; }
.addressRowActions { display: flex; gap: 7px; }
.addressRowActions button { border: 0; border-radius: 10px; padding: 8px 10px; background: #eaf0f7; color: var(--text); font-weight: 900; }
.addressRowActions .addressDelete { background: #fee2e2; color: var(--danger); }
.softHidden { display: none !important; }
@media (max-width: 430px) {
  .searchBox.catalogOnly { top: 58px; }
  .chips.catalogOnly { top: 116px; }
}

/* v42: client switch interface and delivery address modes */
.bottomNav .switchNav { display: none; }
body.hasInterfaceSwitch .bottomNav { grid-template-columns: repeat(6, 1fr); }
body.hasInterfaceSwitch .bottomNav .switchNav { display: grid; }
.switchList { display: grid; gap: 8px; }
.switchLink { border: 0; border-radius: 14px; background: var(--accent); color: #fff; padding: 12px; font-weight: 900; text-align: center; }
body.simpleAddressMode #addressPanel { display: block; }
body.simpleAddressMode #addressPanel .addressList,
body.simpleAddressMode #findAddressBtn,
body.simpleAddressMode #locateBtn,
body.simpleAddressMode #openMapBtn,
body.simpleAddressMode #saveAddressBtn,
body.simpleAddressMode .geoFields,
body.simpleAddressMode #mapPreview { display: none !important; }
body.simpleAddressMode #addressesBtn { display: none !important; }
body.simpleAddressMode #deliveryAddress { display: block; }
@media (max-width: 430px) {
  body.hasInterfaceSwitch .bottomNav button { font-size: 15px; padding-left: 2px; padding-right: 2px; }
  body.hasInterfaceSwitch .bottomNav button span { font-size: 9px; }
}

/* v43: client header, category reset, sticky order detail, mobile width fixes */
#catalogSubtitle { display: none !important; }
.categoryToolbar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.categoryToolbar .categoryToggle { white-space: nowrap; flex: 0 0 auto; }
.categoryToolbar .allCategories { background: #eef2f7; }
.paymentBadge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; background: #eef2f7; color: var(--muted); font-size: 12px; font-weight: 900; margin-left: 6px; vertical-align: middle; }
.paymentBadge.paid { background: #dcfce7; color: #166534; }
.statusLine { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.statusLine .paymentBadge { margin-left: 0; }
body.hasInterfaceSwitch .bottomNav .switchNav { display: grid !important; }
body:not(.hasInterfaceSwitch) .bottomNav .switchNav { display: none !important; }
html, body { max-width: 100%; overflow-x: hidden; }
#infoPanel .panelHead { position: sticky; top: 64px; z-index: 16; background: rgba(255,255,255,.98); padding: 10px 0; margin: -14px 0 8px; border-bottom: 1px solid var(--border); }
.backToOrderListBtn { position: sticky; top: 124px; z-index: 15; width: 100%; margin: 0 0 10px; box-shadow: 0 6px 16px rgba(15,23,42,.08); }
.orderItemLine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.orderItemLine span { min-width: 0; overflow-wrap: anywhere; }
.orderItemLine b { white-space: nowrap; }
.card, .panel, .orderDetail, .orderCard, .categoryToolbar { max-width: 100%; }
@media (max-width: 430px) {
  #infoPanel .panelHead { top: 58px; }
  .backToOrderListBtn { top: 114px; }
  .sitePage { margin-left: 10px; margin-right: 10px; }
  .products { gap: 12px; }
  .card .content { min-width: 0; }
  .card .name { overflow-wrap: anywhere; }
}

/* v44: fixed panels with only item blocks scrolling, editable cart quantities */
.categoryToolbar { justify-content: flex-start; }
.categoryToolbar .allCategories { order: -1; }
.cartLine.editable { align-items: start; }
.cartLineControls { grid-column: 1 / -1; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; align-items: center; margin-top: 6px; }
.cartLineControls button { min-height: 40px; border-radius: 12px; padding: 0; font-size: 22px; line-height: 1; }
.cartQtyInput { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 9px 10px; text-align: center; font: inherit; font-weight: 900; font-size: 18px; }
body.simpleAddressMode #addressPanel .addressList,
body.simpleAddressMode #findAddressBtn,
body.simpleAddressMode #locateBtn,
body.simpleAddressMode #openMapBtn,
body.simpleAddressMode #saveAddressBtn,
body.simpleAddressMode .geoFields,
body.simpleAddressMode #mapPreview,
body.simpleAddressMode #addressesBtn { display: revert !important; }
body.sectionMode .sitePage:not(.hidden) { position: fixed; left: 10px; right: 10px; top: 72px; bottom: calc(76px + env(safe-area-inset-bottom)); margin: 0; display: flex; flex-direction: column; overflow: hidden; }
#cartPanel .panelHead, #infoPanel .panelHead, #cartPanel .checkoutBox, #cartPanel .panelBottom, #infoPanel .orderDetailHead, #infoPanel .orderTotals, #infoPanel .orderActions, #infoPanel .reviewBox, #infoPanel .orderPaymentHint { flex: 0 0 auto; }
#cartItems { flex: 1 1 auto; min-height: 74px; overflow-y: auto; padding-right: 2px; }
#infoBody { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
#infoBody > .checkoutResult { flex: 0 0 auto; }
#infoBody > .orderDetail, #infoBody > .backToOrderListBtn + .orderDetail { flex: 1 1 auto; min-height: 0; }
.orderDetail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.orderItems { flex: 1 1 auto; min-height: 76px; overflow-y: auto; padding-right: 2px; }
.backToOrderListBtn { position: static; flex: 0 0 auto; top: auto; z-index: auto; }
.siteOrderList { min-height: 0; overflow-y: auto; }
@media (max-width: 430px) {
  body.sectionMode .sitePage:not(.hidden) { left: 8px; right: 8px; top: 66px; bottom: calc(74px + env(safe-area-inset-bottom)); }
  #cartPanel .checkoutBox { max-height: 48vh; overflow-y: auto; }
  .orderItemLine { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .orderItems { min-height: 120px; }
}

/* v45: undo over-fixed client panels; category picker as a readable list */
.chips.catalogOnly {
  overflow: visible;
  display: block;
  padding-bottom: 10px;
}
.categoryToolbar {
  display: flex;
  gap: 8px;
  overflow: visible;
  align-items: center;
  padding-bottom: 0;
}
.categoryToolbar .categoryToggle {
  position: static;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.categoryToolbar .allCategories {
  order: 0;
  flex: 0 0 auto;
  background: #fff;
  max-width: 45vw;
}
.categoryToolbar .allCategories.active {
  background: var(--accent);
  color: #fff;
}
#categoryToggle {
  flex: 1 1 auto;
}
.categoryPanel {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 55;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(15,23,42,.22);
  padding: 12px;
}
.categoryPanel.hidden { display: none !important; }
.categoryPanelHead {
  position: sticky;
  top: -12px;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 2px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  z-index: 1;
}
.categoryPanelHead b { font-size: 18px; }
.categoryPanelHead button {
  border: 0;
  background: #eef2f7;
  color: var(--text);
  border-radius: 12px;
  width: 40px;
  height: 36px;
  font-size: 24px;
  line-height: 1;
}
.categoryList {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.categoryList .chip {
  width: 100%;
  text-align: left;
  white-space: normal;
  border-radius: 14px;
  padding: 12px;
  font-weight: 900;
}
/* return sections to natural card flow; only bottom action remains sticky */
body.sectionMode .sitePage:not(.hidden) {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  display: block;
  min-height: 0;
  overflow: visible;
  margin: 10px 14px 0;
}
#cartItems, #infoBody, #infoBody > .orderDetail, .orderDetail, .orderItems, .siteOrderList {
  flex: initial;
  min-height: 0;
  max-height: none;
  overflow: visible;
  display: initial;
}
#cartItems.cartItems, .siteOrderList { display: grid; }
#infoBody > .orderDetail, .orderDetail { display: block; }
#infoPanel .panelHead {
  position: static;
  top: auto;
  margin: 0 0 8px;
  padding: 0;
  border-bottom: 0;
  background: transparent;
}
.backToOrderListBtn {
  position: sticky;
  top: 60px;
  z-index: 7;
  width: 100%;
  margin: 0 0 10px;
  box-shadow: 0 6px 16px rgba(15,23,42,.08);
}
#cartPanel .checkoutBox {
  max-height: none;
  overflow: visible;
}
/* tighter cart quantity controls */
.cartLine { grid-template-columns: minmax(0, 1fr) auto; }
.cartLine > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.cartLineControls {
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 7px;
  margin-top: 5px;
}
.cartLineControls button {
  min-height: 34px;
  border-radius: 10px;
  font-size: 20px;
}
.cartQtyInput {
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 17px;
}
.panelBottom {
  bottom: calc(68px + env(safe-area-inset-bottom));
  padding-top: 10px;
}
.loyaltyBox { padding-top: 0; }
.qrBox { padding-top: 2px; }
@media (max-width: 430px) {
  body.sectionMode .sitePage:not(.hidden) {
    margin-left: 10px;
    margin-right: 10px;
  }
  .categoryPanel { left: 10px; right: 10px; }
  .categoryToolbar .allCategories { max-width: 42vw; }
  .panelBottom { align-items: center; }
  .panelBottom b { font-size: 16px; }
  .panelBottom button { padding: 10px 12px; }
  .cartLineControls { grid-template-columns: 32px minmax(0, 1fr) 32px; }
}

/* v46: stable modal categories, profile, and fixed item-scroll order panels */
.categoryToolbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  overflow: visible !important;
  align-items: center;
}
.categoryToolbar .categoryToggle {
  min-height: 42px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.categoryToolbar .allCategories {
  max-width: none !important;
  order: 0 !important;
}
.activeCategoryName {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  padding-left: 4px;
}
.categoryOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, .42);
  display: grid;
  align-items: end;
  padding: 12px;
}
.categoryOverlay.hidden { display: none !important; }
.categorySheet {
  width: min(680px, 100%);
  margin: 0 auto calc(70px + env(safe-area-inset-bottom));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 22px 60px rgba(15,23,42,.28);
  padding: 12px;
}
.categorySheet .categoryPanelHead {
  position: sticky;
  top: -12px;
  z-index: 2;
}
.categoryPanel { position: static; }

.paymentHint.warning {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fed7aa;
}

body.sectionMode .sitePage:not(.hidden) {
  position: fixed !important;
  left: 10px !important;
  right: 10px !important;
  top: 72px !important;
  bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 14px !important;
}
#cartPanel .panelHead,
#cartPanel .checkoutBox,
#cartPanel .panelBottom,
#infoPanel .panelHead,
#infoPanel .backToOrderListBtn,
#infoPanel .orderDetailHead,
#infoPanel .orderTotals,
#infoPanel .orderActions,
#infoPanel .reviewBox,
#infoPanel .orderPaymentHint {
  flex: 0 0 auto;
}
#cartItems {
  display: grid !important;
  gap: 0;
  flex: 1 1 auto !important;
  min-height: 70px !important;
  overflow-y: auto !important;
  padding-right: 2px;
}
#cartPanel .checkoutBox {
  margin-top: 10px;
  max-height: none !important;
  overflow: visible !important;
}
#cartPanel .panelBottom {
  position: static !important;
  bottom: auto !important;
  margin-top: 8px;
  padding-top: 10px;
}
#infoBody {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: block !important;
}
#infoPanel.orderDetailMode #infoBody {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
#infoPanel.orderDetailMode .orderDetail {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#infoPanel.orderDetailMode .orderItems {
  flex: 1 1 auto !important;
  min-height: 90px !important;
  overflow-y: auto !important;
  padding-right: 2px;
}
#infoPanel .panelHead {
  position: static !important;
  margin: 0 0 8px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
}
.backToOrderListBtn {
  position: static !important;
  width: 100%;
  margin: 0 0 10px !important;
  box-shadow: none !important;
}
.siteOrderList {
  display: grid !important;
  gap: 8px;
}
.orderDetail { margin-top: 0; }
.orderItems { display: block !important; }

.cartLineControls {
  grid-template-columns: 30px minmax(0, 1fr) 30px !important;
  gap: 6px !important;
}
.cartLineControls button {
  min-height: 30px !important;
  border-radius: 9px !important;
  font-size: 18px !important;
}
.cartQtyInput {
  min-height: 30px !important;
  padding: 4px 8px !important;
  font-size: 16px !important;
}

.profileBox { display: grid; gap: 12px; min-height: 0; }
.profileCardTop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.profileCardInfo { min-width: 0; display: grid; gap: 8px; }
.compactQr { padding: 0; }
.compactQr img { width: min(170px, 34vw); padding: 7px; }
.loyaltyGrid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profileSection { border: 1px solid var(--border); border-radius: 16px; background: #fff; padding: 12px; display: grid; gap: 8px; }
.profileSection h3 { margin: 0; }
.phoneBindRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; }
.phoneBindRow input { min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: 10px; font: inherit; }
.dangerBtn { background: #fee2e2 !important; color: var(--danger) !important; }
.addressProfileSection #addressPanel { display: grid; gap: 8px; box-shadow: none; padding: 0; border: 0; }
.addressProfileSection #addressPanel::before { display: none; }
.addressProfileSection #addressTools { display: grid; gap: 8px; }
.addressProfileSection .addressList { max-height: 180px; overflow-y: auto; }

@media (max-width: 430px) {
  body.sectionMode .sitePage:not(.hidden) {
    left: 8px !important;
    right: 8px !important;
    top: 66px !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    padding: 12px !important;
  }
  #cartPanel .checkoutBox { gap: 7px; }
  .profileCardTop { grid-template-columns: 1fr; }
  .compactQr img { width: min(230px, 72vw); }
  .phoneBindRow { grid-template-columns: 1fr; }
  .categorySheet { margin-bottom: calc(66px + env(safe-area-inset-bottom)); }
}

/* v47: compact checkout forms, profile action buttons, stable foreground category sheet */
.categoryOverlay { z-index: 5000 !important; align-items: center !important; }
.categorySheet { margin: 0 auto !important; max-height: min(78vh, 620px) !important; }
.categoryToolbar { grid-template-columns: auto minmax(0, 1fr) !important; }
.categoryToolbar .allCategories { justify-self: start; }

.compactCheckout { gap: 8px !important; }
.checkoutQuick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.checkoutQuick button { border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 14px; padding: 8px 7px; min-width: 0; text-align: left; display: grid; gap: 2px; }
.checkoutQuick span { color: var(--muted); font-size: 11px; font-weight: 900; }
.checkoutQuick b { font-size: 13px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compactWarning { padding: 7px 9px !important; font-size: 12px !important; line-height: 1.25; margin: 0 !important; }
.checkoutEditorOverlay { position: fixed; inset: 0; z-index: 5100; background: rgba(15,23,42,.42); display: grid; align-items: end; padding: 12px; }
.checkoutEditorOverlay.hidden { display: none !important; }
.checkoutEditorSheet { width: min(620px, 100%); margin: 0 auto calc(70px + env(safe-area-inset-bottom)); background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 22px 60px rgba(15,23,42,.28); padding: 12px; display: grid; gap: 10px; max-height: min(78vh, 620px); overflow-y: auto; }
.checkoutEditorHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.checkoutEditorHead b { font-size: 18px; }
.checkoutEditorHead button { min-width: 40px; min-height: 36px; font-size: 22px; padding: 0; }
.checkoutEditor { display: grid; gap: 8px; }
.compactSegmented { margin-bottom: 0; }
#cartPanel .checkoutBox { flex: 0 0 auto !important; margin-top: 8px !important; }
#cartPanel .panelBottom { flex: 0 0 auto !important; }
#cartItems { min-height: 110px !important; }
.cartLine { padding: 8px 0 !important; gap: 6px !important; }
.cartLineControls { grid-template-columns: 28px minmax(0, 1fr) 28px !important; gap: 5px !important; }
.cartLineControls button { min-height: 28px !important; width: 28px !important; border-radius: 9px !important; font-size: 17px !important; }
.cartQtyInput { min-height: 28px !important; padding: 3px 6px !important; font-size: 15px !important; }

.profileActionButtons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.profileActionButtons button { border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 16px; padding: 11px 12px; min-width: 0; display: grid; gap: 4px; text-align: left; }
.profileActionButtons span { color: var(--muted); font-size: 12px; font-weight: 900; }
.profileActionButtons b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.profileNextLevel { margin: 0; color: var(--muted); font-size: 13px; }
.profileActionSheet { position: fixed; inset: 0; z-index: 5200; background: rgba(15,23,42,.42); display: grid; align-items: end; padding: 12px; }
.profileSheetBox { width: min(620px, 100%); margin: 0 auto calc(70px + env(safe-area-inset-bottom)); background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 22px 60px rgba(15,23,42,.28); padding: 12px; max-height: min(78vh, 620px); overflow-y: auto; display: grid; gap: 10px; }
.profileSheetHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.profileSheetHead b { font-size: 18px; }
.profileSheetHead button { min-width: 40px; min-height: 36px; font-size: 22px; padding: 0; }
.profileSheetBody { display: grid; gap: 8px; }
.mutedText { margin: 0; color: var(--muted); font-size: 13px; }
.profileSheetBody #addressPanel { display: grid; gap: 8px; border: 0; box-shadow: none; padding: 0; }
.profileSheetBody #addressPanel::before { display: none; }
.profileSheetBody .addressList { max-height: 220px; overflow-y: auto; }

@media (max-width: 430px) {
  .checkoutQuick { gap: 6px; }
  .checkoutQuick button { padding: 7px 6px; border-radius: 12px; }
  .checkoutQuick b { font-size: 12px; }
  .checkoutQuick span { font-size: 10px; }
  .checkoutEditorSheet, .profileSheetBox { margin-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .profileActionButtons { grid-template-columns: 1fr; }
  #cartItems { min-height: 140px !important; }
}

/* v48: compact catalog/cart/order/profile polish */
.addToCartBtn {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  min-height: 42px;
  font-weight: 900;
  font-size: 15px;
}
.productQty { margin-top: 8px; }
.cartItems { min-height: 0; }
.cartLineCompact {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
}
.cartLineImg {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: #f1f5f9;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 22px;
}
.cartLineImg img { width: 100%; height: 100%; object-fit: contain; }
.cartLineMain { min-width: 0; display: grid; gap: 2px; }
.cartLineMain b { font-size: 14px; line-height: 1.12; }
.cartLineMain small { color: var(--muted); font-size: 12px; }
.cartLineMain strong { font-size: 16px; }
.compactStepper {
  display: grid;
  grid-template-columns: 36px 48px 24px 36px;
  align-items: center;
  gap: 4px;
}
.compactStepper button {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  padding: 0;
  font-size: 20px;
}
.compactStepper input {
  width: 48px;
  min-width: 0;
  height: 36px;
  padding: 4px;
  font-size: 16px;
  text-align: center;
}
.compactStepper span { color: var(--muted); font-size: 12px; font-weight: 900; }
.editorActions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.primaryBtn { border: 0; border-radius: 12px; background: var(--accent); color: #fff; padding: 10px 12px; font-weight: 900; }
.profileNextLevel { margin: 8px 0 0; color: var(--muted); font-size: 12px; font-weight: 800; }
/* Client order details: only product block scrolls, header/totals/actions stay visible */
#infoPanel.orderDetailMode #infoBody { min-height: 0; }
#infoPanel.orderDetailMode .orderDetail {
  max-height: calc(100vh - 190px - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#infoPanel.orderDetailMode .orderDetailHead,
#infoPanel.orderDetailMode .orderTotals,
#infoPanel.orderDetailMode .paymentHint,
#infoPanel.orderDetailMode .orderActions,
#infoPanel.orderDetailMode .reviewBox { flex: 0 0 auto; }
#infoPanel.orderDetailMode .orderItems {
  flex: 1 1 auto;
  min-height: 96px;
  overflow-y: auto;
  padding-right: 2px;
}
.orderDetailHead h3 { font-size: 17px; line-height: 1.14; }
.orderDetailHead p { margin: 4px 0; font-size: 13px; }
.orderItemLine { padding: 7px 0; gap: 8px; }
.orderItemLine span { font-size: 14px; line-height: 1.15; }
.orderItemLine small { font-size: 12px; }
.orderItemLine > b { font-size: 14px; white-space: nowrap; }
.orderTotals { gap: 3px; padding-top: 7px; }
.orderTotals div { font-size: 14px; }
.orderTotals .grandTotal { font-size: 16px; padding-top: 6px; }
.orderTotals .grandTotal b { font-size: 17px; }
.reviewBox { padding: 9px; gap: 6px; }
.ratingButtons { gap: 6px; }
.ratingButtons button, .editReviewBtn { padding: 8px; border-radius: 10px; }
.reviewComment { min-height: 48px; padding: 8px; font-size: 14px; }
@media (max-width: 430px) {
  #infoPanel.orderDetailMode .orderDetail { max-height: calc(100vh - 176px - env(safe-area-inset-bottom)); }
  .cartLineCompact { grid-template-columns: 48px minmax(0, 1fr); gap: 7px; }
  .cartLineImg { width: 46px; height: 46px; }
  .cartLineControls.compactStepper { grid-column: 1 / -1; justify-self: end; }
  .compactStepper { grid-template-columns: 34px 44px 22px 34px; }
  .compactStepper button { width: 34px; height: 34px; border-radius: 11px; }
  .compactStepper input { width: 44px; height: 34px; }
  .checkoutQuick button { padding: 8px 7px; min-height: 54px; }
  .compactWarning { font-size: 12px; padding: 7px 9px; }
  .orderDetailHead h3 { font-size: 16px; }
  .orderItemLine span { font-size: 13px; }
  .orderTotals div { font-size: 13px; }
}
.editorHeadActions { display: flex; align-items: center; gap: 8px; }
.commentSaveHead.hidden { display: none !important; }

/* v49: iPhone compact UI, fixed header, larger product-scroll area in order details */
.top {
  padding: 10px 14px 8px !important;
  z-index: 80 !important;
}
.top h1 {
  font-size: 20px !important;
  line-height: 1.08 !important;
  max-width: calc(100vw - 150px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart {
  min-width: 104px !important;
  padding: 9px 11px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
}
.searchBox.catalogOnly { top: 54px !important; }
.chips.catalogOnly { top: 112px !important; }
.categoryToolbar {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 7px !important;
}
.categoryToolbar .categoryToggle {
  min-height: 36px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  line-height: 1.08 !important;
  min-width: 0 !important;
  width: 100% !important;
  justify-self: stretch !important;
}
.activeCategoryName { font-size: 11px !important; margin-top: 4px !important; }

/* Cart: keep quantity controls in one compact horizontal row */
#cartPanel .panelHead { margin-bottom: 4px !important; }
#cartPanel .panelHead h2 { font-size: 21px !important; }
#cartPanel .panelHead p { font-size: 12px !important; }
.cartLineCompact {
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 7px !important;
  align-items: center !important;
  padding: 7px 0 !important;
}
.cartLineImg {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  font-size: 18px !important;
}
.cartLineMain b { font-size: 13px !important; line-height: 1.08 !important; }
.cartLineMain small { font-size: 11px !important; }
.cartLineMain strong { font-size: 15px !important; }
.cartStepperInline,
.cartLineControls.cartStepperInline,
.cartLineControls.compactStepper.cartStepperInline {
  grid-column: auto !important;
  display: grid !important;
  grid-template-columns: 28px 44px 20px 28px !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 4px !important;
  margin-top: 0 !important;
  min-width: 128px !important;
}
.cartStepperInline button,
.cartLineControls.cartStepperInline button {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 9px !important;
  font-size: 16px !important;
  padding: 0 !important;
}
.cartStepperInline input,
.cartLineControls.cartStepperInline input {
  width: 44px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 2px 4px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
}
.cartStepperInline span { font-size: 11px !important; }
.checkoutQuick button { min-height: 48px !important; padding: 6px 7px !important; }
.checkoutQuick span { font-size: 10px !important; }
.checkoutQuick b { font-size: 12px !important; }
.compactWarning { font-size: 11px !important; padding: 6px 8px !important; }
#cartPanel .checkoutBox { gap: 6px !important; margin-top: 6px !important; padding-top: 8px !important; }
#cartPanel .checkoutBox h3 { font-size: 18px !important; }
#cartPanel .panelBottom { padding-top: 8px !important; margin-top: 6px !important; }
#cartPanel .panelBottom b { font-size: 15px !important; }
#cartPanel .panelBottom button { padding: 9px 11px !important; font-size: 15px !important; }

/* Order details: remove duplicate outer title and make only products scroll */
#infoPanel.orderDetailMode > .panelHead { display: none !important; }
#infoPanel.orderDetailMode {
  top: 62px !important;
  bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  padding: 10px !important;
}
#infoPanel.orderDetailMode #infoBody {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
#infoPanel.orderDetailMode .backToOrderListBtn {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  margin-bottom: 8px !important;
  font-size: 15px !important;
}
#infoPanel.orderDetailMode .orderDetail {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 10px !important;
  border-radius: 15px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#infoPanel.orderDetailMode .orderDetailHead { padding-bottom: 5px !important; }
#infoPanel.orderDetailMode .orderDetailHead h3 { font-size: 15px !important; line-height: 1.1 !important; margin-bottom: 2px !important; }
#infoPanel.orderDetailMode .receiveTitle { font-size: 15px !important; }
#infoPanel.orderDetailMode .orderDetailHead p { font-size: 11px !important; line-height: 1.15 !important; margin: 2px 0 !important; }
#infoPanel.orderDetailMode .orderItems {
  flex: 1 1 55% !important;
  min-height: 135px !important;
  overflow-y: auto !important;
  padding-right: 3px !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
#infoPanel.orderDetailMode .orderItemLine { padding: 6px 0 !important; gap: 6px !important; }
#infoPanel.orderDetailMode .orderItemLine span { font-size: 12px !important; line-height: 1.1 !important; }
#infoPanel.orderDetailMode .orderItemLine small { font-size: 10px !important; }
#infoPanel.orderDetailMode .orderItemLine > b { font-size: 12px !important; }
#infoPanel.orderDetailMode .orderTotals { padding-top: 6px !important; gap: 2px !important; }
#infoPanel.orderDetailMode .orderTotals div { font-size: 12px !important; line-height: 1.15 !important; }
#infoPanel.orderDetailMode .orderTotals .grandTotal { font-size: 14px !important; padding-top: 4px !important; }
#infoPanel.orderDetailMode .orderTotals .grandTotal b { font-size: 15px !important; }
#infoPanel.orderDetailMode .orderPaymentHint { display: none !important; }
#infoPanel.orderDetailMode .orderActions { gap: 6px !important; margin-top: 7px !important; }
#infoPanel.orderDetailMode .orderActions button { padding: 8px 10px !important; font-size: 13px !important; }
#infoPanel.orderDetailMode .reviewBox {
  margin-top: 7px !important;
  padding: 8px !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
  max-height: 150px !important;
  overflow-y: auto !important;
}
#infoPanel.orderDetailMode .reviewBox b { font-size: 13px !important; }
#infoPanel.orderDetailMode .ratingButtons { gap: 5px !important; }
#infoPanel.orderDetailMode .ratingButtons button,
#infoPanel.orderDetailMode .editReviewBtn { padding: 7px !important; font-size: 13px !important; }
#infoPanel.orderDetailMode .reviewComment { min-height: 42px !important; font-size: 12px !important; padding: 7px !important; }

@media (max-width: 430px) {
  .top { padding: 9px 12px 7px !important; }
  .top h1 { font-size: 19px !important; max-width: calc(100vw - 142px); }
  .cart { min-width: 100px !important; padding: 8px 10px !important; font-size: 14px !important; }
  .searchBox.catalogOnly { top: 50px !important; }
  .chips.catalogOnly { top: 106px !important; padding-left: 10px !important; padding-right: 10px !important; }
  .categoryToolbar { gap: 6px !important; }
  .categoryToolbar .categoryToggle { font-size: 13px !important; padding: 7px 8px !important; min-height: 34px !important; }
  .cartLineCompact { grid-template-columns: 38px minmax(0, 1fr) !important; grid-template-areas: "img main" "img controls"; align-items: start !important; }
  .cartLineImg { grid-area: img; width: 36px !important; height: 36px !important; }
  .cartLineMain { grid-area: main; }
  .cartStepperInline { grid-area: controls; justify-content: start !important; }
  #infoPanel.orderDetailMode { top: 58px !important; left: 8px !important; right: 8px !important; }
}

/* v50: one category button, compact iPhone cart rows, icon save for comments */
.singleCategoryToolbar {
  display: block !important;
  padding: 4px 10px 2px !important;
  overflow: visible !important;
}
.singleCategoryToolbar .categoryToggle {
  width: auto !important;
  max-width: min(190px, 56vw) !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.06) !important;
  background: #fff !important;
  color: var(--text) !important;
}
.activeCategoryName {
  display: inline-flex !important;
  margin: 4px 10px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}
.activeCategoryName b { color: var(--text); }
.categorySheet { z-index: 5001 !important; }
#cartPanel .panelHead p { display: none !important; }
#cartPanel .panelHead { padding-bottom: 2px !important; }
#cartPanel .panelHead h2 { font-size: 21px !important; line-height: 1.05 !important; }
.iconSaveBtn {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  padding: 0 !important;
}
.cartLineCompact {
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  min-height: 72px !important;
  padding: 8px 0 !important;
  column-gap: 9px !important;
}
.cartLineImg {
  width: 50px !important;
  height: 100% !important;
  min-height: 58px !important;
  align-self: stretch !important;
  border-radius: 12px !important;
}
.cartLineMain {
  align-content: center !important;
  gap: 1px !important;
}
.cartLineMain b { font-size: 13px !important; line-height: 1.08 !important; }
.cartLineMain small { font-size: 11px !important; line-height: 1.05 !important; }
.cartLineMain strong { font-size: 16px !important; margin-top: 2px !important; }
.cartLineControls.cartStepperInline,
.cartLineControls.compactStepper.cartStepperInline {
  grid-column: auto !important;
  display: grid !important;
  grid-template-columns: 34px 44px 34px !important;
  gap: 5px !important;
  min-width: 122px !important;
  justify-content: end !important;
  align-self: center !important;
  margin: 0 !important;
}
.cartLineControls.cartStepperInline button {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  background: #f3f4f6 !important;
  color: var(--text) !important;
  border: 1px solid #d1d5db !important;
}
.cartQtyBox {
  display: grid !important;
  grid-template-rows: 19px 13px !important;
  align-items: center !important;
  justify-items: center !important;
  min-width: 40px !important;
}
.cartQtyBox .cartQtyInput,
.cartLineControls.cartStepperInline .cartQtyInput {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 44px !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-align: center !important;
}
.cartQtyBox span {
  font-size: 10px !important;
  line-height: 1 !important;
  color: var(--muted) !important;
  font-weight: 800 !important;
}
@media (max-width: 430px) {
  .chips.catalogOnly { top: 106px !important; }
  .singleCategoryToolbar { padding-left: 10px !important; padding-right: 10px !important; }
  .singleCategoryToolbar .categoryToggle { max-width: 170px !important; font-size: 12px !important; min-height: 32px !important; }
  .cartLineCompact {
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    grid-template-areas: none !important;
    min-height: 70px !important;
    column-gap: 8px !important;
  }
  .cartLineImg { grid-area: auto !important; width: 48px !important; min-height: 58px !important; }
  .cartLineMain { grid-area: auto !important; }
  .cartStepperInline { grid-area: auto !important; justify-content: end !important; }
  .cartLineControls.cartStepperInline { grid-template-columns: 32px 42px 32px !important; min-width: 112px !important; gap: 4px !important; }
  .cartLineControls.cartStepperInline button { width: 32px !important; height: 32px !important; min-height: 32px !important; }
  .cartQtyBox .cartQtyInput { width: 42px !important; font-size: 15px !important; }
  #cartItems { min-height: 150px !important; }
}

/* v51: active all-categories button, square cart preview and 1kg/1l cart steps visual tune */
.singleCategoryToolbar .categoryToggle.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 6px 18px rgba(2,132,199,.22) !important;
}
.activeCategoryName {
  display: inline-flex !important;
  align-items: center !important;
  max-width: calc(100% - 20px) !important;
  border-radius: 999px !important;
  background: #eef6ff !important;
  color: #075985 !important;
  padding: 4px 9px !important;
  font-weight: 800 !important;
}
.activeCategoryName b { color: #0f172a !important; }
.cartLineImg {
  width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  aspect-ratio: 1 / 1 !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.cartLineImg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.cartLineCompact {
  grid-template-columns: 58px minmax(0, 1fr) auto !important;
  min-height: 70px !important;
  align-items: center !important;
}
.cartLineControls.cartStepperInline,
.cartLineControls.compactStepper.cartStepperInline {
  grid-template-columns: 36px 42px 36px !important;
  min-width: 124px !important;
}
.cartLineControls.cartStepperInline button {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
}
@media (max-width: 430px) {
  .cartLineCompact { grid-template-columns: 56px minmax(0, 1fr) auto !important; }
  .cartLineImg { width: 52px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; }
  .cartLineControls.cartStepperInline { grid-template-columns: 34px 40px 34px !important; min-width: 116px !important; }
  .cartLineControls.cartStepperInline button { width: 34px !important; height: 34px !important; min-height: 34px !important; }
  .cartQtyBox .cartQtyInput { width: 40px !important; }
}

/* v52: clearer selected-category hint and safer iPhone category state */
.activeCategoryName {
  max-width: calc(100% - 20px) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.15 !important;
}
.activeCategoryName b::after { content: ""; }


/* v53: category selected text spacing */
.activeCategoryName b { margin-left: 2px; }

/* v54: selected category one-line hint, separate payment/method badges and deferred transfer hint */
.activeCategoryName {
  display: block !important;
  max-width: calc(100% - 20px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  padding: 4px 8px !important;
}
.activeCategoryName span,
.activeCategoryName b {
  display: inline !important;
  white-space: nowrap !important;
}
.paymentBadge.waiting {
  background: #ffedd5 !important;
  color: #9a3412 !important;
}
.paymentBadge.method {
  background: #fff7ed !important;
  color: #7c2d12 !important;
}
.statusLine {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}
.statusLine .paymentBadge { margin-left: 0 !important; }
.paymentHint.deferTransferHint { font-size: 12px !important; padding: 7px 9px !important; }
@media (max-width: 430px) {
  .activeCategoryName { font-size: 10.5px !important; padding: 3px 7px !important; }
}

/* v55: category hint, paid/status pills, no duplicate paid action */
.categoryToolbar.singleCategoryToolbar {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.categoryToggle.resetMode {
  background: var(--accent) !important;
  color: #fff !important;
}
.activeCategoryName {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  padding: 4px 10px !important;
  color: #075985 !important;
  background: #e0f2fe !important;
  border-radius: 999px !important;
  border: 0 !important;
}
.activeCategoryName span,
.activeCategoryName b { white-space: nowrap !important; }
.statusPill,
.paymentBadge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}
.statusPill { background: #eef2f7; color: #64748b; }
.statusPill.waiting { background: #ffedd5; color: #9a3412; }
.statusPill.ready { background: #dcfce7; color: #166534; }
.paymentBadge.paid { background: #dcfce7 !important; color: #166534 !important; }
.paymentBadge.waiting { background: #ffedd5 !important; color: #9a3412 !important; }
.paymentBadge.method { background: #fff7ed !important; color: #7c2d12 !important; }
.statusLine { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 5px !important; }
@media (max-width: 430px) {
  .categoryToggle { font-size: 13px !important; padding: 8px 11px !important; }
  .activeCategoryName { font-size: 11px !important; padding: 3px 8px !important; }
}

/* v56: mobile-shell layout on desktop and clearer weighted checkout notice */
@media (min-width: 650px) {
  html { background: var(--bg); }
  body { max-width: 600px !important; margin: 0 auto !important; }
  .bottomNav { max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sitePage { margin-left: 14px !important; margin-right: 14px !important; }
}
.weightPaymentNote,
.paymentHint.warning.compactWarning { line-height: 1.25 !important; }

/* v57: one mobile shell everywhere, unified pills and star review buttons */
@media (min-width: 431px) {
  html { background: var(--bg) !important; }
  body { width: min(100%, 600px) !important; max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; }
  .top, .bottomNav { width: min(100%, 600px) !important; max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sitePage { margin-left: 14px !important; margin-right: 14px !important; }
}
.statusPill,
.paymentBadge,
.statusBadge,
.paidBadge,
.badge.statusBadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
.paymentBadge.method,
.paidBadge.method {
  background: #ffedd5 !important;
  color: #9a3412 !important;
}
.ratingButtons.starRating {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  margin: 8px 0 !important;
}
.ratingButtons.starRating .starBtn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--text) !important;
  font-size: 22px !important;
  line-height: 1 !important;
}


/* v58: true mobile shell for modal sections on PC, standard badges everywhere */
@media (min-width: 431px) {
  body.sectionMode .sitePage:not(.hidden) {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    width: min(calc(100vw - 20px), 580px) !important;
    max-width: 580px !important;
    transform: translateX(-50%) !important;
    top: 72px !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #cartPanel .cartItems, #infoPanel #infoBody {
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  #cartPanel .panelBottom {
    flex: 0 0 auto !important;
    position: static !important;
    margin: 8px -12px -12px !important;
    padding: 10px 12px !important;
  }
}
.statusPill.waiting,
.paymentBadge.waiting,
.paymentBadge.method,
.statusBadge.waiting,
.paidBadge.waiting,
.paidBadge.method {
  background: #ffedd5 !important;
  color: #9a3412 !important;
  border: 0 !important;
}
.statusPill.ready,
.paymentBadge.paid,
.statusBadge.ready,
.paidBadge.paid {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 0 !important;
}
.statusLine .statusPill,
.statusLine .paymentBadge {
  min-width: 0 !important;
  margin: 0 !important;
}

/* v59: compact client panels, updated rating stars and tighter profile/card gaps */
body.sectionMode .sitePage:not(.hidden) {
  top: 56px !important;
  bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  padding: 10px !important;
}
#infoPanel.profileMode { padding: 9px !important; }
#infoPanel.profileMode .panelHead { margin: -9px 0 6px !important; padding: 7px 0 !important; }
#infoPanel.profileMode #infoBody { overflow-y: auto !important; }
.profileBox { min-height: 100% !important; gap: 8px !important; align-content: start !important; }
.profileCardTop { gap: 8px !important; }
.profileCardInfo { gap: 6px !important; }
.profileActionButtons { gap: 7px !important; }
.profileActionButtons button { padding: 9px 10px !important; border-radius: 14px !important; }
.sitePage { border-radius: 16px !important; }
.statusPill, .paymentBadge, .statusBadge, .paidBadge, .badge.statusBadge {
  min-height: 23px !important;
  padding: 4px 9px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  border-radius: 999px !important;
  border: 0 !important;
  box-shadow: none !important;
}
.statusPill.waiting, .paymentBadge.waiting, .paymentBadge.method, .statusPill:not(.ready), .paymentBadge:not(.paid) { background: #ffedd5 !important; color: #9a3412 !important; }
.statusPill.ready, .paymentBadge.paid { background: #dcfce7 !important; color: #166534 !important; }
.ratingButtons.starRating { gap: 5px !important; margin: 6px 0 !important; }
.ratingButtons.starRating .starBtn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 10px !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: #f59e0b !important;
  font-size: 24px !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.ratingButtons.starRating .starBtn.selected { background: #fffbeb !important; border-color: #fbbf24 !important; color: #f59e0b !important; }
.reviewBox.reviewed .ratingButtons.starRating .starBtn { pointer-events: none !important; }
#infoPanel.orderDetailMode .reviewBox { max-height: 128px !important; }
#infoPanel.orderDetailMode .ratingButtons.starRating .starBtn { width: 34px !important; height: 34px !important; min-width: 34px !important; font-size: 22px !important; }
@media (max-width: 430px) {
  body.sectionMode .sitePage:not(.hidden) { top: 56px !important; bottom: calc(64px + env(safe-area-inset-bottom)) !important; padding: 9px !important; }
  #infoPanel.profileMode .panelHead { margin: -9px 0 6px !important; }
}

/* v60: compact switch screen, address editor and phone editor */
.switchList,
.interfaceSwitchBox .switchList {
  width: 100% !important;
  display: grid !important;
  gap: 10px !important;
}
.switchLink {
  width: 100% !important;
  min-height: 56px !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  font-size: 18px !important;
}
.selectedAddress {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}
.addressQuickEditBtn {
  border: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--text) !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  padding: 0 !important;
  font-size: 18px !important;
}
.addressProfileActions { display: grid !important; gap: 8px !important; }
.addressProfileActions button,
#saveAddressBtn {
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--accent) !important;
  color: #fff !important;
  padding: 12px !important;
  font-weight: 900 !important;
}
#findAddressBtn,
#locateBtn,
#openMapBtn,
.geoFields,
#mapPreview { display: none !important; }
.addressPanel { display: grid !important; gap: 8px !important; }
.addressTools { gap: 8px !important; }
.addressTools textarea { min-height: 74px !important; }
.addressTools .deliveryTools { display: grid !important; grid-template-columns: 1fr !important; }
.addressRow { background: #fff !important; border-radius: 14px !important; padding: 9px !important; }
.addressRow .addressPick { display: grid !important; gap: 3px !important; color: var(--text) !important; }
.addressRowActions { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; }
.addressRowActions button { padding: 8px 6px !important; font-size: 12px !important; }
.phoneBoundBox { display: grid !important; gap: 10px !important; }
.phoneValueBox {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  border: 1px solid #bbf7d0 !important;
  background: #dcfce7 !important;
  color: #166534 !important;
  border-radius: 14px !important;
  padding: 11px 12px !important;
}
.phoneValueBox span { font-weight: 900 !important; }
.phoneValueBox b { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.phoneActionRow { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.okBtn { border: 0 !important; border-radius: 12px !important; background: #dcfce7 !important; color: #166534 !important; padding: 10px 12px !important; font-weight: 900 !important; }
.dangerBtn { border: 0 !important; border-radius: 12px !important; padding: 10px 12px !important; font-weight: 900 !important; }

/* v61: collapsible totals and payment status action */
.paymentBadge.clientPayStatusBtn,
button.paymentBadge {
  border: 0 !important;
  cursor: pointer !important;
  appearance: none !important;
  font-family: inherit !important;
}
.paymentBadge.clientPayStatusBtn:active { transform: translateY(1px); }
.orderTotals.totalsPanel {
  display: grid !important;
  gap: 3px !important;
  padding-top: 7px !important;
  line-height: 1.15 !important;
}
.orderTotals.totalsPanel .totalsFull {
  display: grid !important;
  gap: 3px !important;
}
.orderTotals.totalsPanel .totalsFull > div,
.orderTotals.totalsPanel .grandTotal {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}
.orderTotals.totalsPanel .grandTotal {
  grid-template-columns: minmax(0, 1fr) 34px auto !important;
  border-top: 1px solid var(--border) !important;
  padding-top: 5px !important;
  margin-top: 2px !important;
  font-size: 15px !important;
  color: var(--text) !important;
}
.orderTotals.totalsPanel span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.orderTotals.totalsPanel b {
  color: var(--text) !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}
.orderTotals.totalsPanel .discountRow b { color: #047857 !important; }
.orderTotals.totalsPanel .grandTotal b { font-size: 17px !important; }
.orderTotals.totalsPanel .totalsToggle {
  width: 30px !important;
  min-width: 30px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #eef2f7 !important;
  color: var(--muted) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.orderTotals.totalsPanel.collapsed .totalsFull { display: none !important; }
.orderTotals.totalsPanel.collapsed .grandTotal {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.clientPaymentBox {
  display: grid !important;
  gap: 10px !important;
}
.clientPaymentBox h3 { margin: 0 !important; }
.clientPaymentBox button.markPaidBtn {
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--accent) !important;
  color: #fff !important;
  padding: 12px !important;
  font-weight: 900 !important;
}

/* v62: compact payment sheet, smaller address buttons and aligned totals */
.clientPaymentOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5400 !important;
  background: rgba(15,23,42,.38) !important;
  display: grid !important;
  align-items: end !important;
  padding: 12px !important;
}
.clientPaymentSheet {
  width: min(420px, 100%) !important;
  margin: 0 auto calc(70px + env(safe-area-inset-bottom)) !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(15,23,42,.28) !important;
  padding: 12px !important;
  display: grid !important;
  gap: 10px !important;
}
.clientPaymentHead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 8px !important;
}
.clientPaymentHead b { font-size: 18px !important; }
.clientPaymentClose {
  min-width: 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 12px !important;
  padding: 0 !important;
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  font-size: 22px !important;
}
.compactPayBox { gap: 8px !important; }
.paymentTransferCard {
  display: grid !important;
  gap: 6px !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  padding: 10px !important;
}
.paymentTransferCard span,
.paymentTransferCard small { color: var(--muted) !important; font-size: 12px !important; font-weight: 800 !important; }
.paymentTransferCard .copyPhoneBtn {
  width: 100% !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 0 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}
.addressRowActions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}
.addressRowActions button {
  min-height: 28px !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}
.addressRowActions .addressDefault.isDefault {
  background: #dcfce7 !important;
  color: #166534 !important;
  opacity: 1 !important;
}
.orderTotals.totalsPanel .totalsFull > div,
.orderTotals.totalsPanel .grandTotal {
  grid-template-columns: minmax(0, 1fr) auto !important;
}
.orderTotals.totalsPanel .grandTotal {
  grid-template-columns: minmax(0, 1fr) 30px auto !important;
}
.orderTotals.totalsPanel b,
.orderTotals.totalsPanel .grandTotal b {
  text-align: right !important;
  justify-self: end !important;
}
.orderTotals.totalsPanel .totalsToggle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 430px) {
  .clientPaymentSheet { margin-bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
  .addressRowActions button { font-size: 9px !important; padding-left: 5px !important; padding-right: 5px !important; }
}

/* v63: standard cart totals, checkout address editor and delivery text */
.cartTotalsBox {
  width: 100% !important;
  display: grid !important;
  gap: 3px !important;
  line-height: 1.15 !important;
  min-width: 0 !important;
}
.cartTotalsBox > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}
.cartTotalsBox b {
  justify-self: end !important;
  text-align: right !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  font-weight: 900 !important;
}
.cartTotalsBox .discountRow b { color: #047857 !important; }
.cartTotalsBox .grandTotal {
  border-top: 1px solid var(--border) !important;
  padding-top: 5px !important;
  margin-top: 2px !important;
  color: var(--text) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
.cartTotalsBox .grandTotal b { font-size: 17px !important; }
#cartPanel .panelBottom {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
}
#cartPanel .panelBottom #checkoutBtn { align-self: end !important; }
.checkoutEditor #addressPanel::before,
.checkoutEditor #addressPanel .addressList,
.checkoutHiddenList { display: none !important; }
.checkoutEditor #addressPanel {
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.deliveryQuote {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-height: 24px !important;
  border-radius: 999px !important;
  background: #ffedd5 !important;
  color: #9a3412 !important;
  padding: 4px 9px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
.addressRowActions .addressDefault.isDefault { background: #dcfce7 !important; color: #166534 !important; }
@media (max-width: 430px) {
  #cartPanel .panelBottom { grid-template-columns: 1fr !important; align-items: stretch !important; }
  #cartPanel .panelBottom #checkoutBtn { width: 100% !important; }
}

/* v64: cart collapsible totals, status cards and address editor cleanup */
.cartTotalsBox.totalsPanel {
  display: grid !important;
  gap: 3px !important;
  line-height: 1.15 !important;
  width: 100% !important;
}
.cartTotalsBox.totalsPanel .totalsFull {
  display: grid !important;
  gap: 3px !important;
}
.cartTotalsBox.totalsPanel .totalsFull > div,
.cartTotalsBox.totalsPanel .grandTotal {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}
.cartTotalsBox.totalsPanel .grandTotal {
  grid-template-columns: minmax(0, 1fr) 30px auto !important;
  border-top: 1px solid var(--border) !important;
  padding-top: 5px !important;
  margin-top: 2px !important;
  color: var(--text) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
.cartTotalsBox.totalsPanel b,
.cartTotalsBox.totalsPanel .grandTotal b {
  justify-self: end !important;
  text-align: right !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  font-weight: 900 !important;
}
.cartTotalsBox.totalsPanel .discountRow b { color: #047857 !important; }
.cartTotalsBox.totalsPanel .grandTotal b { font-size: 17px !important; }
.cartTotalsBox.totalsPanel .totalsToggle {
  width: 30px !important;
  min-width: 30px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-weight: 900 !important;
}
.cartTotalsBox.totalsPanel.collapsed .totalsFull { display: none !important; }
.cartTotalsBox.totalsPanel.collapsed .grandTotal {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.clientOrderCard {
  display: grid !important;
  gap: 8px !important;
  text-align: left !important;
  cursor: pointer !important;
}
.clientOrderCardTop {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: start !important;
}
.clientOrderCardTop b { min-width: 0 !important; }
.clientOrderCardTop strong {
  justify-self: end !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-size: 14px !important;
}
.orderListStatusLine,
.orderDetailHead .statusLine {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-top: 6px !important;
}
.statusPill.addressPill {
  background: #e0f2fe !important;
  color: #075985 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.addressRow .addressPick small { display: none !important; }
.addressQuickEditBtn {
  min-width: 34px !important;
  width: 34px !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}
#cartPanel .panelBottom {
  align-items: end !important;
}


/* v65: cart totals one-column layout, checkout below totals, history/cancel status cleanup */
.cartTotalsBox.totalsPanel > .totalsFull,
.cartTotalsBox.totalsPanel .totalsFull,
.orderTotals.totalsPanel > .totalsFull,
.orderTotals.totalsPanel .totalsFull {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
}
.cartTotalsBox.totalsPanel .totalsFull > div,
.orderTotals.totalsPanel .totalsFull > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 8px !important;
}
#cartPanel .panelBottom {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  gap: 8px !important;
}
#cartPanel .panelBottom #checkoutBtn {
  width: 100% !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}
.statusPill.cancelled,
.paymentBadge.cancelled {
  background: #fee2e2 !important;
  color: #991b1b !important;
}
.orderListStatusLine {
  justify-content: flex-end !important;
}

/* v66: unified status rows, catalog fixed controls, totals standard */
.searchBox.catalogOnly { display: block !important; }
.searchInputWrap { position: relative; width: 100%; }
.searchInputWrap input { padding-right: 42px !important; }
.clearSearchBtn {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #eef2f7 !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.clearSearchBtn.hidden { display: none !important; }
body:not(.sectionMode) .searchBox.catalogOnly {
  position: sticky !important;
  top: 58px !important;
  z-index: 25 !important;
  background: rgba(245,246,248,.98) !important;
  backdrop-filter: blur(12px) !important;
}
body:not(.sectionMode) #groups.catalogOnly {
  position: sticky !important;
  top: 122px !important;
  z-index: 24 !important;
  background: rgba(245,246,248,.98) !important;
  backdrop-filter: blur(12px) !important;
  padding: 8px 12px !important;
}
.categoryToolbar.singleCategoryToolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.activeCategoryChip {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  max-width: 100% !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: #e0f2fe !important;
  color: #075985 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.activeCategoryChip b { font-weight: 900 !important; }
.standardOrderCard {
  display: grid !important;
  gap: 8px !important;
  padding: 12px 14px !important;
}
.standardOrderTop {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: start !important;
}
.standardOrderTitle {
  min-width: 0 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  color: var(--text) !important;
}
.standardOrderTop .statusStack {
  justify-self: end !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  max-width: 245px !important;
}
.standardOrderBottom {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  align-items: center !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}
.orderDetailHead .statusLine,
#infoPanel.orderDetailMode .statusLine {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.cartTotalsBox.totalsPanel,
.orderTotals.totalsPanel {
  font-size: 13px !important;
}
.cartTotalsBox.totalsPanel .totalsFull > div,
.orderTotals.totalsPanel .totalsFull > div,
.cartTotalsBox.totalsPanel .grandTotal,
.orderTotals.totalsPanel .grandTotal {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 8px !important;
}
.cartTotalsBox.totalsPanel .grandTotal,
.orderTotals.totalsPanel .grandTotal {
  grid-template-columns: minmax(0, 1fr) 30px auto !important;
  padding-top: 6px !important;
}
.cartTotalsBox.totalsPanel b,
.orderTotals.totalsPanel b,
.cartTotalsBox.totalsPanel .grandTotal b,
.orderTotals.totalsPanel .grandTotal b {
  justify-self: end !important;
  text-align: right !important;
  font-size: 15px !important;
}
.cartTotalsBox.totalsPanel span,
.orderTotals.totalsPanel span { color: #6b7280 !important; }
.cartTotalsBox.totalsPanel .grandTotal span,
.orderTotals.totalsPanel .grandTotal span { color: #111827 !important; font-weight: 900 !important; }
.cartTotalsBox.totalsPanel .totalsToggle,
.orderTotals.totalsPanel .totalsToggle {
  justify-self: center !important;
  align-self: center !important;
  width: 30px !important;
  height: 26px !important;
  min-height: 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #6b7280 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.cartTotalsBox.totalsPanel.collapsed .grandTotal,
.orderTotals.totalsPanel.collapsed .grandTotal {
  grid-template-columns: minmax(0, 1fr) 30px auto !important;
}
@media (max-width: 430px) {
  body:not(.sectionMode) #groups.catalogOnly { top: 112px !important; }
  .standardOrderTop { grid-template-columns: minmax(0, 1fr) auto !important; }
  .standardOrderTop .statusStack { max-width: 220px !important; }
}

/* v67: order rating moved from bottom block into status button + compact sheet */
.reviewStatusBtn {
  border: 0;
  cursor: pointer;
  font: inherit;
}
.reviewSheetBox {
  margin: 0 !important;
  background: #fff !important;
  border: 0 !important;
  padding: 6px 0 0 !important;
}
.reviewGroup {
  display: grid;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.reviewGroup b {
  font-size: 15px;
}
.reviewSheetBox .reviewComment {
  width: 100%;
  min-height: 70px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  font: inherit;
  resize: vertical;
}

/* v73: order history moved into Orders, bottom product scanner, centered totals button */
.navBarcodeIcon {
  width: 22px !important;
  height: 18px !important;
  display: block !important;
}
.clientOrderTabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.clientOrderTabs button {
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: 13px !important;
  min-height: 38px !important;
  padding: 8px 14px !important;
  font-weight: 900 !important;
  background: #eef2f7 !important;
  color: var(--text) !important;
}
.clientOrderTabs button.activeTab {
  background: var(--accent) !important;
  color: #fff !important;
}
.scannerOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  background: rgba(15,23,42,.86) !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
}
.scannerBox {
  width: min(520px, 100%) !important;
  background: #fff !important;
  border-radius: 18px !important;
  padding: 12px !important;
  display: grid !important;
  gap: 10px !important;
  position: relative !important;
}
.scannerHead { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; }
.scannerBox video { width: 100% !important; max-height: 58vh !important; object-fit: cover !important; border-radius: 14px !important; background: #111827 !important; }
.scannerFrame { pointer-events: none !important; position: absolute !important; left: 12% !important; right: 12% !important; top: 45% !important; height: 2px !important; background: #22c55e !important; box-shadow: 0 0 0 9999px rgba(0,0,0,.14) !important; }
.scannerActions, .productScanActions { display: flex !important; gap: 8px !important; }
.scannerBox p { margin: 0 !important; color: var(--muted) !important; font-size: 13px !important; }
.productScanResult {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}
.productScanThumb {
  width: 92px !important;
  height: 92px !important;
  border-radius: 16px !important;
  background: #f1f5f9 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 36px !important;
  overflow: hidden !important;
}
.productScanThumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.productScanInfo h3 { margin: 0 0 8px !important; font-size: 18px !important; line-height: 1.15 !important; }
.productScanRows { display: grid !important; gap: 6px !important; }
.productScanRows div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 5px !important;
}
.productScanRows span { color: var(--muted) !important; font-size: 12px !important; font-weight: 800 !important; }
.productScanRows b { text-align: right !important; white-space: nowrap !important; }
.cartTotalsBox.totalsPanel .totalsToggle,
.orderTotals.totalsPanel .totalsToggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-1px) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
@media (max-width: 430px) {
  .productScanResult { grid-template-columns: 76px minmax(0, 1fr) !important; gap: 10px !important; }
  .productScanThumb { width: 76px !important; height: 76px !important; }
  .clientOrderTabs button { min-height: 36px !important; padding: 7px 12px !important; font-size: 13px !important; }
}

/* v74: unified active/history tabs, site-styled inputs/selects, scan sounds support */
.nativeHiddenSelect {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.paymentChoiceList {
  display: grid !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
.paymentChoice {
  width: 100% !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  color: var(--text) !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  font-weight: 900 !important;
  text-align: left !important;
}
.paymentChoice.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.siteInputSheet label {
  font-weight: 900 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}
.siteTextInput {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  outline: none !important;
}
.siteTextInput:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(36,129,204,.15) !important;
}
.smallEmpty { padding: 8px !important; }
.productScanThumb img { background: #f1f5f9 !important; }
.productScanThumb img:not([src]), .productScanThumb img[src=""] { display: none !important; }


/* v75: louder scanner-like beeps, clickable status actions and small shell gaps */
button.paymentBadge,
.paymentBadge.clientPayStatusBtn {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(36,129,204,.18) !important;
}
button.paymentBadge.waiting,
.paymentBadge.clientPayStatusBtn.waiting {
  background: var(--accent) !important;
  color: #fff !important;
}
.siteConfirmMessage {
  padding: 10px 2px 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: var(--text) !important;
}
.siteConfirmSheet .dangerBtn {
  background: #fee2e2 !important;
  color: #991b1b !important;
}
body.sectionMode .sitePage:not(.hidden) {
  top: 60px !important;
  bottom: calc(70px + env(safe-area-inset-bottom)) !important;
}
@media (max-width: 430px) {
  body.sectionMode .sitePage:not(.hidden) {
    top: 60px !important;
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
}

/* v76: catalog search reliability and compact square product cards */
.top {
  padding-top: 8px !important;
  padding-bottom: 6px !important;
}
.searchBox.catalogOnly,
body:not(.sectionMode) .searchBox.catalogOnly {
  top: 48px !important;
  padding: 4px 12px !important;
  border-bottom: 0 !important;
}
.searchInputWrap input,
.searchBox input {
  min-height: 42px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  border-radius: 16px !important;
}
#groups.catalogOnly,
body:not(.sectionMode) #groups.catalogOnly {
  top: 98px !important;
  padding: 4px 12px 6px !important;
}
.grid.catalogOnly {
  gap: 9px !important;
  padding: 0 10px !important;
}
.grid.catalogOnly .card {
  min-height: 0 !important;
  border-radius: 16px !important;
}
.grid.catalogOnly .img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  background: #f1f5f9 !important;
}
.grid.catalogOnly .img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #fff !important;
}
.grid.catalogOnly .content {
  padding: 8px !important;
  gap: 5px !important;
}
.grid.catalogOnly .name {
  min-height: 32px !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.grid.catalogOnly .price {
  font-size: 15px !important;
  line-height: 1.1 !important;
}
.grid.catalogOnly .addToCartBtn {
  min-height: 36px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
}
.grid.catalogOnly .productQty {
  margin-top: 2px !important;
}
.grid.catalogOnly .qty {
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  gap: 6px !important;
}
.grid.catalogOnly .qty button {
  min-height: 38px !important;
  border-radius: 12px !important;
  padding: 0 !important;
}
@media (max-width: 430px) {
  .top {
    padding-top: 7px !important;
    padding-bottom: 5px !important;
  }
  .searchBox.catalogOnly,
  body:not(.sectionMode) .searchBox.catalogOnly {
    top: 46px !important;
    padding: 4px 10px !important;
  }
  #groups.catalogOnly,
  body:not(.sectionMode) #groups.catalogOnly {
    top: 94px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .grid.catalogOnly .content {
    padding: 7px !important;
  }
  .grid.catalogOnly .name {
    font-size: 13px !important;
    min-height: 30px !important;
  }
  .grid.catalogOnly .price {
    font-size: 15px !important;
  }
}


/* v78: standalone PWA auth and compact scanner window */
.authLocked .catalogOnly,
.authLocked #cartPanel,
.authLocked #infoPanel,
.authLocked .bottomNav {
  filter: blur(2px);
  pointer-events: none;
}
.authGateOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 250 !important;
  background: rgba(15, 23, 42, .72) !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
}
.authGateBox {
  width: min(430px, 100%) !important;
  border-radius: 24px !important;
  background: #fff !important;
  padding: 20px !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .24) !important;
  display: grid !important;
  gap: 12px !important;
  text-align: left !important;
}
.authGateIcon { width: 52px !important; height: 52px !important; border-radius: 18px !important; background: #e0f2fe !important; display: grid !important; place-items: center !important; font-size: 28px !important; }
.authGateBox h2 { margin: 0 !important; font-size: 24px !important; line-height: 1.15 !important; }
.authGateBox p { margin: 0 !important; color: var(--muted) !important; line-height: 1.35 !important; }
.authPrimaryBtn, .authPhoneRow button {
  border: 0 !important;
  border-radius: 14px !important;
  min-height: 46px !important;
  padding: 10px 14px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 16px !important;
}
.authDivider { text-align: center !important; color: var(--muted) !important; font-weight: 800 !important; font-size: 13px !important; }
.authPhoneLabel { font-weight: 900 !important; color: var(--text) !important; }
.authPhoneRow { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; }
.authPhoneRow input {
  min-width: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  font: inherit !important;
  font-size: 16px !important;
}
.authGateMessage, .authGateError { color: #991b1b !important; background: #fee2e2 !important; border-radius: 12px !important; padding: 9px 10px !important; font-weight: 800 !important; min-height: 0 !important; }
.authGateMessage:empty { display: none !important; }
.authGateError.small { font-size: 13px !important; }
.scannerBox video {
  height: clamp(160px, 32vh, 240px) !important;
  max-height: none !important;
  aspect-ratio: 16 / 7 !important;
}
.scannerHint { min-height: 18px !important; }
@media (max-width: 430px) {
  .scannerOverlay { padding: 16px !important; }
  .scannerBox { gap: 8px !important; padding: 12px !important; }
  .scannerBox video { height: clamp(150px, 28vh, 220px) !important; }
}

/* v79: Safari scanner fallback, tighter fixed scanner size and +7 phone input */
.scannerBox {
  max-height: min(430px, calc(100dvh - 74px)) !important;
  overflow: hidden !important;
}
.scannerBox video {
  width: 100% !important;
  height: 178px !important;
  min-height: 178px !important;
  max-height: 178px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  display: block !important;
}
.authPhoneRow input,
.phoneBindRow input {
  letter-spacing: .01em !important;
  font-weight: 800 !important;
}
@media (max-width: 430px) {
  .scannerBox {
    max-height: min(410px, calc(100dvh - 68px)) !important;
  }
  .scannerBox video {
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
  }
}


/* v90: client catalog state reset after checkout, fixed catalog header/search/categories, zoom guard support */
html, body {
  touch-action: pan-x pan-y;
  -ms-touch-action: pan-x pan-y;
}
body:not(.sectionMode) .top {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  background: rgba(245,246,248,.98) !important;
  backdrop-filter: blur(12px);
}
body:not(.sectionMode) .searchBox.catalogOnly {
  position: sticky !important;
  top: 62px !important;
  z-index: 59 !important;
  background: rgba(245,246,248,.98) !important;
  backdrop-filter: blur(12px);
}
body:not(.sectionMode) .chips.catalogOnly {
  position: sticky !important;
  top: 124px !important;
  z-index: 58 !important;
  background: rgba(245,246,248,.98) !important;
  backdrop-filter: blur(12px);
}
@media (max-width: 430px) {
  body:not(.sectionMode) .searchBox.catalogOnly { top: 58px !important; }
  body:not(.sectionMode) .chips.catalogOnly { top: 116px !important; }
}


/* v98: fixed client catalog controls without overlapping search/categories */
.catalogSticky {
  position: sticky;
  top: 0;
  z-index: 25;
  background: rgba(245,246,248,.98);
  border-bottom: 1px solid rgba(229,231,235,.75);
  backdrop-filter: blur(12px);
}
.catalogSticky .top {
  position: static !important;
  border-bottom: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  z-index: auto !important;
}
.catalogSticky .searchBox,
.catalogSticky .chips {
  position: static !important;
  background: transparent !important;
  z-index: auto !important;
}
.catalogSticky .searchBox { padding-bottom: 6px; }
.catalogSticky .chips { padding-bottom: 12px; }
body.sectionMode .catalogSticky .catalogOnly { display: none !important; }

/* v99: one fixed client catalog header, no nested sticky overlap */
body:not(.sectionMode) .catalogSticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  display: block !important;
  background: rgba(245,246,248,.99) !important;
  border-bottom: 1px solid rgba(229,231,235,.85) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.05) !important;
  backdrop-filter: blur(12px) !important;
}
body:not(.sectionMode) .catalogSticky .top,
body:not(.sectionMode) .catalogSticky .searchBox.catalogOnly,
body:not(.sectionMode) .catalogSticky #groups.catalogOnly,
body:not(.sectionMode) .catalogSticky .chips.catalogOnly {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body:not(.sectionMode) .catalogSticky .top {
  padding: 10px 14px 8px !important;
}
body:not(.sectionMode) .catalogSticky .searchBox.catalogOnly {
  display: block !important;
  padding: 8px 14px 6px !important;
}
body:not(.sectionMode) .catalogSticky #groups.catalogOnly,
body:not(.sectionMode) .catalogSticky .chips.catalogOnly {
  display: block !important;
  padding: 6px 14px 10px !important;
  overflow: visible !important;
}
body.sectionMode .catalogSticky .catalogOnly,
body.sectionMode .catalogSticky #groups.catalogOnly {
  display: none !important;
}
body:not(.sectionMode) #products.grid.catalogOnly {
  padding-top: 10px !important;
}


/* v100: true fixed client catalog header, compact 1mm-like gaps */
body:not(.sectionMode) .catalogSticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 900 !important;
  background: rgba(245,246,248,.995) !important;
  border-bottom: 1px solid rgba(229,231,235,.9) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.05) !important;
  backdrop-filter: blur(12px) !important;
}
body:not(.sectionMode) .catalogSticky .top {
  padding: 7px 12px 3px !important;
  gap: 8px !important;
}
body:not(.sectionMode) .catalogSticky .searchBox.catalogOnly {
  padding: 3px 12px 3px !important;
}
body:not(.sectionMode) .catalogSticky .searchBox.catalogOnly input {
  min-height: 48px !important;
}
body:not(.sectionMode) .catalogSticky #groups.catalogOnly,
body:not(.sectionMode) .catalogSticky .chips.catalogOnly {
  padding: 3px 12px 6px !important;
  overflow: visible !important;
}
body:not(.sectionMode) .catalogSticky .categoryToolbar {
  margin: 0 !important;
  padding: 0 !important;
}
body:not(.sectionMode) .catalogSticky .categoryToggle {
  margin-top: 0 !important;
  min-height: 44px !important;
}
body:not(.sectionMode) #products.grid.catalogOnly {
  padding-top: calc(var(--catalog-sticky-height, 202px) + 8px) !important;
}
body:not(.sectionMode) #loadMore.catalogOnly {
  margin-bottom: 88px !important;
}
@media (max-width: 430px) {
  body:not(.sectionMode) .catalogSticky .top { padding: 6px 10px 2px !important; }
  body:not(.sectionMode) .catalogSticky .searchBox.catalogOnly { padding: 2px 10px 2px !important; }
  body:not(.sectionMode) .catalogSticky #groups.catalogOnly,
  body:not(.sectionMode) .catalogSticky .chips.catalogOnly { padding: 2px 10px 5px !important; }
  body:not(.sectionMode) .catalogSticky .searchBox.catalogOnly input { min-height: 46px !important; }
  body:not(.sectionMode) .catalogSticky .categoryToggle { min-height: 42px !important; }
}

/* v101: Telegram -> browser/PWA install hint and phone-gated loyalty */
.appInstallHint {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0 12px 7px;
  padding: 9px 10px;
  border: 1px solid rgba(36,129,204,.22);
  border-radius: 14px;
  background: #eef6ff;
  color: var(--text);
}
.appInstallHint.hidden { display: none !important; }
.installHintText { display: grid; gap: 2px; min-width: 0; }
.installHintText b { font-size: 13px; line-height: 1.15; }
.installHintText span { color: var(--muted); font-size: 12px; line-height: 1.25; }
.installHintActions { display: flex; align-items: center; gap: 6px; }
.installHintActions button {
  border: 0;
  border-radius: 11px;
  padding: 8px 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}
.installHintActions .secondaryInstallBtn {
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(15,23,42,.08);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}
.loyaltyActivationBox {
  border: 1px solid rgba(36,129,204,.22);
  border-radius: 16px;
  background: #eef6ff;
  padding: 14px;
  display: grid;
  gap: 8px;
}
.loyaltyActivationBox b { font-size: 17px; }
.loyaltyActivationBox p { margin: 0; color: var(--muted); line-height: 1.35; }
.loyaltyActivationBox button {
  border: 0;
  border-radius: 12px;
  padding: 11px 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
}
@media (max-width: 430px) {
  .appInstallHint { grid-template-columns: 1fr; margin-left: 10px; margin-right: 10px; padding: 8px 9px; }
  .installHintActions { justify-content: stretch; }
  .installHintActions button:not(.secondaryInstallBtn) { flex: 1; }
}


/* v108: client favorites and animated clickable status buttons */
.topActions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.favoriteTop {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  color: #64748b;
  padding: 10px 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 42px;
  white-space: nowrap;
}
.favoriteTop.active { background: #fee2e2; border-color: #fecaca; color: #dc2626; }
.favoriteTop b { position: absolute; right: -5px; top: -6px; min-width: 18px; height: 18px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; line-height: 18px; text-align: center; padding: 0 5px; }
.productActions { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px; align-items: stretch; margin-top: 2px; }
.favoriteBtn {
  width: 42px;
  min-width: 42px;
  border: 1px solid #fecaca;
  border-radius: 13px;
  background: #fff;
  color: #dc2626;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  display: grid;
  place-items: center;
  padding: 0;
}
.favoriteBtn.active { background: #dc2626; color: #fff; border-color: #dc2626; box-shadow: 0 8px 18px rgba(220,38,38,.22); }
.favoriteBtn:disabled { opacity: .6; cursor: wait; }
.productActions .addToCartBtn { width: 100%; border: 0; border-radius: 13px; background: var(--accent); color: #fff; padding: 10px 8px; font-weight: 900; }
.productActions .productQty { margin: 0; }
@keyframes clickableStatusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(36,129,204,.34); transform: translateZ(0) scale(1); }
  50% { box-shadow: 0 0 0 7px rgba(36,129,204,0); transform: translateZ(0) scale(1.025); }
}
button.statusPill,
.paymentBadge.clientPayStatusBtn,
button.paymentBadge,
.reviewStatusBtn {
  animation: clickableStatusPulse 1.65s ease-in-out infinite;
  position: relative;
  isolation: isolate;
}
button.statusPill:hover,
.paymentBadge.clientPayStatusBtn:hover,
button.paymentBadge:hover,
.reviewStatusBtn:hover { filter: brightness(1.02); }
@media (prefers-reduced-motion: reduce) {
  button.statusPill,
  .paymentBadge.clientPayStatusBtn,
  button.paymentBadge,
  .reviewStatusBtn { animation: none !important; }
}
@media (max-width: 430px) {
  .topActions { gap: 6px; }
  .favoriteTop { min-width: 44px; padding: 10px; }
  .favoriteTop span { display: none; }
  .productActions { grid-template-columns: 40px minmax(0, 1fr); gap: 6px; }
  .favoriteBtn { width: 40px; min-width: 40px; }
}
.clientOrderCard[role="button"] .statusStack .statusPill {
  animation: clickableStatusPulse 1.65s ease-in-out infinite;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .clientOrderCard[role="button"] .statusStack .statusPill { animation: none !important; }
}

/* v109: product favorite heart in image corner + stronger clickable status pulse */
.topActions {
  align-items: center !important;
}
.top .cart,
.top .favoriteTop {
  height: 46px !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.top .cart { padding: 0 13px !important; }
.favoriteTop {
  padding: 0 12px !important;
  border-radius: 16px !important;
}
.img {
  position: relative !important;
}
.productActions {
  display: block !important;
  margin-top: 2px !important;
}
.favoriteBtn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1f2937 !important;
  font-size: 36px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-shadow:
    0 2px 5px rgba(255,255,255,.95),
    0 -1px 4px rgba(255,255,255,.9),
    1px 0 4px rgba(255,255,255,.9),
    -1px 0 4px rgba(255,255,255,.9) !important;
  z-index: 3 !important;
}
.favoriteBtn.active {
  background: transparent !important;
  color: #ef0000 !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow:
    0 2px 5px rgba(255,255,255,.9),
    0 0 10px rgba(239,0,0,.22) !important;
}
.favoriteBtn:active { transform: scale(.92); }
.productActions .addToCartBtn,
.productActions .productQty {
  width: 100% !important;
  min-height: 42px !important;
}
@media (max-width: 430px) {
  .top .cart,
  .top .favoriteTop { height: 44px !important; min-height: 44px !important; }
  .top .cart { padding: 0 11px !important; }
  .favoriteTop { min-width: 44px !important; padding: 0 10px !important; }
  .favoriteBtn { top: 7px !important; right: 7px !important; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; font-size: 34px !important; }
}
@keyframes clickableStatusPulseStrong {
  0%, 100% { transform: translateZ(0) scale(1); filter: brightness(1); }
  50% { transform: translateZ(0) scale(1.055); filter: brightness(1.09); }
}
@keyframes clickableStatusPulseRing {
  0% { opacity: .75; box-shadow: 0 0 0 0 rgba(36,129,204,.46); }
  68%, 100% { opacity: 0; box-shadow: 0 0 0 11px rgba(36,129,204,0); }
}
button.statusPill,
.paymentBadge.clientPayStatusBtn,
button.paymentBadge,
.reviewStatusBtn,
.clientOrderCard[role="button"] .statusStack .statusPill {
  animation: clickableStatusPulseStrong 1.12s ease-in-out infinite !important;
  position: relative !important;
  overflow: visible !important;
}
button.statusPill::after,
.paymentBadge.clientPayStatusBtn::after,
button.paymentBadge::after,
.reviewStatusBtn::after,
.clientOrderCard[role="button"] .statusStack .statusPill::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  animation: clickableStatusPulseRing 1.12s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  button.statusPill,
  .paymentBadge.clientPayStatusBtn,
  button.paymentBadge,
  .reviewStatusBtn,
  .clientOrderCard[role="button"] .statusStack .statusPill { animation: none !important; }
  button.statusPill::after,
  .paymentBadge.clientPayStatusBtn::after,
  button.paymentBadge::after,
  .reviewStatusBtn::after,
  .clientOrderCard[role="button"] .statusStack .statusPill::after { animation: none !important; display: none !important; }
}

/* v110: favorite heart shape like marketplace card, only real clickable statuses pulse, review save flow */
.favoriteBtn {
  color: transparent !important;
  text-shadow: none !important;
  font-size: 0 !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  top: 7px !important;
  right: 7px !important;
  opacity: .98;
}
.favoriteBtn::before {
  content: "";
  width: 31px;
  height: 31px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.1l-1.25-1.12C5.2 14.98 2 12.08 2 8.52 2 5.62 4.25 3.35 7.15 3.35c1.64 0 3.21.77 4.25 1.98 1.04-1.21 2.61-1.98 4.25-1.98 2.9 0 5.15 2.27 5.15 5.17 0 3.56-3.2 6.46-8.75 11.46L12 21.1z' fill='white' stroke='%2322252b' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 3px rgba(255,255,255,.95));
}
.favoriteBtn.active::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.1l-1.25-1.12C5.2 14.98 2 12.08 2 8.52 2 5.62 4.25 3.35 7.15 3.35c1.64 0 3.21.77 4.25 1.98 1.04-1.21 2.61-1.98 4.25-1.98 2.9 0 5.15 2.27 5.15 5.17 0 3.56-3.2 6.46-8.75 11.46L12 21.1z' fill='%23ef0000' stroke='%23ef0000' stroke-width='1.35' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 3px rgba(255,255,255,.88)) drop-shadow(0 0 5px rgba(239,0,0,.20));
}
.clientOrderCard[role="button"] .statusStack .statusPill:not(.reviewStatusBtn),
.clientOrderCard[role="button"] .statusStack .paymentBadge:not(.clientPayStatusBtn) {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}
.clientOrderCard[role="button"] .statusStack .statusPill:not(.reviewStatusBtn)::after,
.clientOrderCard[role="button"] .statusStack .paymentBadge:not(.clientPayStatusBtn)::after {
  display: none !important;
  animation: none !important;
  content: none !important;
}
.reviewHeadActions { display: inline-flex; align-items: center; gap: 8px; }
.reviewSaveBtn {
  min-width: 40px;
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}
.reviewSaveBtn:disabled { opacity: .34; filter: grayscale(.45); cursor: default; }
.clientReviewSheet .reviewSheetBox { border: 0; background: transparent; padding: 0; margin-top: 0; }
.clientReviewSheet .reviewGroup { border: 1px solid var(--border); border-radius: 16px; background: #fff; padding: 12px; display: grid; gap: 9px; }
.clientReviewSheet .reviewGroup b { font-size: 15px; }
.clientReviewSheet .reviewComment { min-height: 64px; }

/* v118 per-store branding */
.storeLogo { width: 48px; height: 48px; object-fit: contain; border-radius: 12px; flex: 0 0 auto; background: var(--card); }
body { background-repeat: no-repeat; background-position: center; }


/* v123: explicit PWA install entry point. The native prompt still requires a user gesture. */
.installAppTop { display:inline-flex; align-items:center; gap:6px; min-height:42px; padding:0 12px; border:0; border-radius:12px; background:var(--primary,#2481cc); color:#fff; font-weight:800; white-space:nowrap; }
.installAppTop.hidden { display:none !important; }
@media (max-width:700px) {
  .installAppTop { width:42px; padding:0; justify-content:center; }
  .installAppTop span { display:none; }
}


/* v123 explicit PWA install offer. Native browser prompt still opens only after a user gesture. */
.installOfferOverlay{position:fixed;inset:0;z-index:2400;display:grid;place-items:center;padding:18px;background:rgba(15,23,42,.56);backdrop-filter:blur(5px)}
.installOfferBox{width:min(92vw,430px);display:grid;gap:12px;padding:22px;border-radius:22px;background:#fff;color:var(--text);box-shadow:0 24px 70px rgba(15,23,42,.32);text-align:center}
.installOfferBox h2,.installOfferBox p{margin:0}.installOfferBox p{color:var(--muted);line-height:1.45}.installOfferIcon{font-size:44px}.installOfferActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:5px}.installOfferActions button{min-height:46px}
@media(max-width:420px){.installOfferActions{grid-template-columns:1fr}.installOfferActions [data-install-now]{order:-1}}

/* v124: QR onboarding, one-button Telegram link and resilient PWA guidance. */
.telegramLinkSteps {
  display:grid;
  gap:5px;
  padding:10px 12px;
  border-radius:13px;
  background:#eff6ff;
  color:#1e3a8a;
  text-align:left;
}
.telegramLinkSteps.hidden { display:none !important; }
.telegramLinkSteps span { font-size:13px; }
.onboardingGate { max-width:430px !important; }
.installHelpBox { text-align:left !important; }
.installHelpBox h2 { text-align:center; }
.installHelpBox ol { display:grid; gap:10px; padding-left:24px; line-height:1.4; }
.installHelpBox > button { width:100%; }
@media (max-width:430px) {
  .appInstallHint { grid-template-columns:1fr !important; }
  .installHintActions { justify-content:stretch !important; }
  .installHintActions #installPrimaryBtn { flex:1 1 auto !important; }
  .authGateBox { width:calc(100vw - 24px) !important; max-height:calc(100vh - 24px) !important; overflow:auto !important; }
}

/* v132: adaptive top favourite icon and one 0.5 mm rhythm between outer UI blocks. */
:root{--ui-block-gap:.5mm;--section-top-offset:58px}
.top>div:nth-child(2){min-width:0}.topActions{flex:0 0 auto;min-width:0}.favoriteTop{flex:0 0 auto!important;overflow:visible!important}.favoriteTop::before{content:"";display:block;flex:0 0 auto;width:24px;height:24px;aspect-ratio:1/1;background-repeat:no-repeat;background-position:center;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.1l-1.25-1.12C5.2 14.98 2 12.08 2 8.52 2 5.62 4.25 3.35 7.15 3.35c1.64 0 3.21.77 4.25 1.98 1.04-1.21 2.61-1.98 4.25-1.98 2.9 0 5.15 2.27 5.15 5.17 0 3.56-3.2 6.46-8.75 11.46L12 21.1z' fill='white' stroke='%2364748b' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E")}.favoriteTop.active::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.1l-1.25-1.12C5.2 14.98 2 12.08 2 8.52 2 5.62 4.25 3.35 7.15 3.35c1.64 0 3.21.77 4.25 1.98 1.04-1.21 2.61-1.98 4.25-1.98 2.9 0 5.15 2.27 5.15 5.17 0 3.56-3.2 6.46-8.75 11.46L12 21.1z' fill='%23ef0000' stroke='%23ef0000' stroke-width='1.35' stroke-linejoin='round'/%3E%3C/svg%3E")}.favoriteTop{font-size:0!important}.favoriteTop span{font-size:14px!important}.favoriteTop b{font-size:11px!important}
body.sectionMode .sitePage:not(.hidden){top:calc(var(--section-top-offset) + var(--ui-block-gap))!important}
body:not(.sectionMode) #products.grid.catalogOnly{gap:var(--ui-block-gap)!important;padding-top:var(--ui-block-gap)!important}.panelHead{margin-bottom:var(--ui-block-gap)!important}.sitePage{margin-top:var(--ui-block-gap)!important}#cartPanel .checkoutBox{margin-top:var(--ui-block-gap)!important}#cartPanel .panelBottom{margin-top:var(--ui-block-gap)!important}.checkoutQuick{gap:var(--ui-block-gap)!important}.bottomNav{gap:var(--ui-block-gap)!important}.cartItems{gap:var(--ui-block-gap)!important}
body:not(.sectionMode) .catalogSticky .top{padding-bottom:var(--ui-block-gap)!important}body:not(.sectionMode) .catalogSticky .searchBox.catalogOnly{padding-top:var(--ui-block-gap)!important;padding-bottom:var(--ui-block-gap)!important}body:not(.sectionMode) .catalogSticky #groups.catalogOnly,body:not(.sectionMode) .catalogSticky .chips.catalogOnly{padding-top:var(--ui-block-gap)!important;padding-bottom:var(--ui-block-gap)!important}
@media(max-width:430px){.favoriteTop{width:clamp(44px,12vw,52px)!important;min-width:44px!important;max-width:52px!important;padding:0!important;aspect-ratio:1/1!important}.favoriteTop::before{width:27px;height:27px}.favoriteTop span{display:none!important}.topActions{gap:var(--ui-block-gap)!important}.top .cart{min-width:0!important;padding-left:10px!important;padding-right:10px!important}.top h1{max-width:none!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}