/**
 * Florisyn mobile shell — fixes split sidebar, empty gray content, and bottom nav overlap.
 * Loaded last so it wins over legacy polish @760 / @820 / @980 rules.
 */
@media (max-width: 820px) {
  body.florisyn-atelier {
    --florisyn-mobile-nav-height: calc(68px + env(safe-area-inset-bottom, 0px));
    --florisyn-mobile-header-height: 52px;
    --florisyn-mobile-drawer-width: clamp(156px, 42vw, 188px);
    --florisyn-mobile-drawer-max: 188px;
    --florisyn-pos-quick-height: 48px;
    --florisyn-pos-footer-height: 52px;
    --florisyn-pos-dock-stack: calc(
      var(--florisyn-mobile-nav-height) + var(--florisyn-pos-quick-height) + var(--florisyn-pos-footer-height) + 10px
    );
  }

  html,
  body.florisyn-atelier {
    height: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
  }

  html.florisyn-mobile-drawer-open,
  html.florisyn-mobile-drawer-open body.florisyn-atelier {
    overflow: hidden !important;
    height: 100%;
    max-height: 100dvh;
  }

  /* Native-app shell: one scroll region between header and bottom tabs */
  body.florisyn-atelier #app:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  body.florisyn-atelier #app[hidden] ~ .mobile-nav.atelier-mobile-nav {
    display: none !important;
  }

  body.florisyn-atelier .shell.florisyn-lux-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.florisyn-atelier .florisyn-lux-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.florisyn-atelier .florisyn-lux-header {
    flex: 0 0 auto !important;
    min-height: var(--florisyn-mobile-header-height) !important;
  }

  body.florisyn-atelier .florisyn-lux-main > .content,
  body.florisyn-atelier .shell > .content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Hide desktop-only chrome — mobile top bar + bottom tabs only */
  body.florisyn-atelier .platform-top-strip,
  body.florisyn-atelier .florisyn-lux-foundation,
  body.florisyn-atelier .header-brand,
  body.florisyn-atelier .florisyn-lux-shop,
  body.florisyn-atelier .atelier-global-search,
  body.florisyn-atelier .florisyn-lux-header-actions,
  body.florisyn-atelier .assistant-mini-dock {
    display: none !important;
  }

  /* Beat legacy polish rule that hid the drawer aside entirely */
  body.florisyn-atelier .shell > aside#atelierSidebarDrawer,
  body.florisyn-atelier .shell > aside#atelierSidebarDrawer.florisyn-lux-sidebar,
  body.florisyn-atelier .shell > aside {
    display: flex !important;
  }

  body.florisyn-atelier .atelier-sidebar-backdrop:not([hidden]) {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(26, 31, 60, 0.28) !important;
  }

  /* Strict single-page visibility */
  body.florisyn-atelier .page:not(.active),
  body.florisyn-atelier .page[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.florisyn-atelier #dashboardPage.pos-home.active:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.florisyn-atelier .mobile-nav.atelier-mobile-nav > button {
    touch-action: manipulation;
  }

  /* Lock page scroll when drawer or Lily chat is open */
  body.florisyn-atelier.atelier-drawer-open,
  body.florisyn-atelier.florisyn-nav-locked,
  body.florisyn-atelier.florisyn-lily-open,
  body.florisyn-atelier:has(#lilyPanel:not([hidden])) {
    overflow: hidden !important;
    touch-action: none;
    position: fixed;
    width: 100%;
    max-height: 100dvh;
  }

  body.florisyn-atelier.atelier-drawer-open #app,
  body.florisyn-atelier.florisyn-nav-locked #app {
    overflow: hidden !important;
    touch-action: none;
  }

  body.florisyn-atelier.atelier-drawer-open .florisyn-lux-main > .content,
  body.florisyn-atelier.florisyn-lily-open .florisyn-lux-main > .content,
  body.florisyn-atelier:has(#lilyPanel:not([hidden])) .florisyn-lux-main > .content {
    overflow: hidden !important;
  }

  /* Dashboard panels visible on phone (atelier-ui hid assist rail) */
  body.florisyn-atelier .atelier-assist-rail,
  body.florisyn-atelier .profit-intelligence-grid {
    display: flex !important;
  }

  body.florisyn-atelier .profit-intelligence-grid {
    display: grid !important;
  }

  /* POS — override luxury-pos + retired critical inline rules on phones */
  body.florisyn-atelier #posPage.florisyn-pos-page.active #florisynPosLux.pos-workspace.florisyn-pos-lux {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-main-row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-checkout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    border-left: 0 !important;
    border-top: 1px solid #eae6e8 !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-rail {
    /* Compact dock rules applied in POS section below */
    flex: 0 0 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux #posLuxCategories.pos-lux-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }

  /* Product cards: 2-up grid reads better than single column on phones */
  body.florisyn-atelier .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.florisyn-atelier .cards {
    grid-template-columns: 1fr !important;
  }
  body.florisyn-atelier .shell.florisyn-lux-shell {
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body.florisyn-atelier .florisyn-lux-main {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  /* Off-canvas drawer — half width; Florisyn brand fixed, nav scrolls underneath */
  body.florisyn-atelier .shell > aside#atelierSidebarDrawer,
  body.florisyn-atelier .shell > aside#atelierSidebarDrawer.florisyn-lux-sidebar,
  body.florisyn-atelier .shell > aside {
    display: flex !important;
    flex-direction: column !important;
    /* A legacy bloom-rc2-design-system.css rule (`body.bloom-rc2 aside`,
       @media max-width:900px) sets flex-wrap:wrap for the old horizontal
       chip-style mobile nav. Nothing here ever reset it back for this
       drawer, so flex-direction:column + flex-wrap:wrap made the browser
       start a new *column* the instant nav content ran taller than the
       drawer — shoving the nav to the right of the brand row and off the
       visible edge, clipping labels like "Payment Centre" mid-word. */
    flex-wrap: nowrap !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: var(--florisyn-mobile-drawer-width) !important;
    min-width: 0 !important;
    max-width: var(--florisyn-mobile-drawer-max) !important;
    transform: translateX(-105%) !important;
    transition: transform 200ms ease !important;
    z-index: 90 !important;
    overflow: hidden !important;
    border-right: 0 !important;
  }

  body.florisyn-atelier.atelier-drawer-open .shell > aside#atelierSidebarDrawer,
  body.florisyn-atelier.atelier-drawer-open .shell > aside {
    transform: translateX(0) !important;
  }

  body.florisyn-atelier .atelier-sidebar-backdrop {
    z-index: 85 !important;
  }

  body.florisyn-atelier .shell > aside#atelierSidebarDrawer .atelier-sidebar-brand {
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    padding: 12px 8px !important;
    background: var(--lux-navy, #1a1f3c) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
  }

  body.florisyn-atelier .shell > aside#atelierSidebarDrawer .atelier-sidebar-brand strong {
    font-size: 14px !important;
  }

  body.florisyn-atelier .shell > aside#atelierSidebarDrawer .florisyn-lux-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 6px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.florisyn-atelier .shell > aside#atelierSidebarDrawer .florisyn-lux-nav > button[data-page],
  body.florisyn-atelier .shell > aside#atelierSidebarDrawer .florisyn-lux-nav > button {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto;
    line-height: 1.25 !important;
    font-size: 11px !important;
    padding: 9px 8px !important;
    min-height: 44px !important;
    text-align: left !important;
  }

  body.florisyn-atelier .shell > aside#atelierSidebarDrawer .atelier-premium-card {
    display: none !important;
  }

  body.florisyn-atelier .shell > aside#atelierSidebarDrawer .florisyn-lux-nav > .florisyn-lux-nav-label {
    font-size: 9px !important;
    padding: 10px 12px 4px !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* Mobile header + foundation strip — full width, no desktop sidebar offset */
  body.florisyn-atelier .florisyn-lux-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
  }

  body.florisyn-atelier .atelier-mobile-topbar {
    display: grid !important;
    width: 100% !important;
  }

  body.florisyn-rc22 .platform-top-strip,
  body.florisyn-atelier .florisyn-lux-foundation {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Main content padding for bottom tab bar */
  body.florisyn-atelier .florisyn-lux-main > .content,
  body.florisyn-atelier .shell > .content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px calc(var(--florisyn-mobile-nav-height) + 16px) !important;
    background: transparent !important;
  }

  body.florisyn-atelier #app {
    overflow-x: hidden !important;
  }

  /* (scroll + flex assigned above) */
  body.florisyn-atelier .mobile-nav.atelier-mobile-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 70 !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: var(--florisyn-mobile-nav-height) !important;
    padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid rgba(26, 31, 60, 0.08) !important;
    box-shadow: 0 -8px 24px rgba(26, 31, 60, 0.08) !important;
    backdrop-filter: blur(12px);
    box-sizing: border-box !important;
  }

  body.florisyn-atelier .mobile-nav.atelier-mobile-nav > button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-height: 52px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    padding: 4px 2px !important;
    overflow: visible !important;
    touch-action: manipulation;
  }

  body.florisyn-atelier .mobile-nav.atelier-mobile-nav > button > span:last-child {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    line-height: 1.12 !important;
  }

  body.florisyn-atelier .mobile-nav.atelier-mobile-nav > button .mnav-ico {
    flex: 0 0 auto !important;
    line-height: 1 !important;
  }

  body.florisyn-atelier .mobile-nav.atelier-mobile-nav > button.active {
    color: var(--lux-navy, #1a1f3c) !important;
    background: rgba(246, 223, 232, 0.65) !important;
  }

  /* Lily FAB + panel sit above the tab bar */
  body.florisyn-atelier .lily-fab,
  body.bloom-rc21 .lily-fab {
    bottom: calc(var(--florisyn-mobile-nav-height) + 8px) !important;
    right: 12px !important;
    z-index: 65 !important;
  }

  body.florisyn-atelier .lily-panel,
  body.bloom-rc21 .lily-panel {
    bottom: calc(var(--florisyn-mobile-nav-height) + 72px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    z-index: 80 !important;
    max-height: min(78dvh, calc(100dvh - var(--florisyn-mobile-nav-height) - 24px)) !important;
  }

  body.florisyn-atelier .lily-panel:not([hidden]),
  body.bloom-rc21 .lily-panel:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.florisyn-atelier .lily-panel-head,
  body.bloom-rc21 .lily-panel-head {
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
  }

  body.florisyn-atelier .lily-compose,
  body.bloom-rc21 .lily-compose {
    flex: 0 0 auto !important;
  }

  body.florisyn-atelier .lily-body,
  body.bloom-rc21 .lily-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* polish-v20.2 hides `header > div:last-child` on phones for the app top bar,
     which collaterally hid the Lily panel head tools — restore them so the
     close button stays tap-reachable. */
  body.florisyn-atelier .lily-panel-head .lily-head-tools,
  body.bloom-rc21 .lily-panel-head .lily-head-tools {
    display: flex !important;
  }

  body.florisyn-atelier .lily-panel-head .lily-head-tools button,
  body.bloom-rc21 .lily-panel-head .lily-head-tools button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body.florisyn-atelier #lilyClose,
  body.bloom-rc21 #lilyClose {
    width: auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--lux-navy, #1a1f3c) !important;
    gap: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.florisyn-atelier #lilyClose .lily-close-label,
  body.bloom-rc21 #lilyClose .lily-close-label {
    display: inline !important;
  }

  body.florisyn-atelier .toast,
  body.bloom-rc21 .toast {
    bottom: calc(var(--florisyn-mobile-nav-height) + 8px) !important;
    /* Toast is informational only — it sits over the Lily FAB, so it must never swallow taps */
    pointer-events: none !important;
  }

  /* Dashboard: show desktop sections stacked (not a blank gray canvas) */
  body.florisyn-atelier .atelier-assist-rail {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }

  body.florisyn-atelier .profit-intelligence-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }

  body.florisyn-atelier .atelier-panel + .atelier-panel {
    display: block !important;
    margin-top: 12px !important;
  }

  body.florisyn-atelier .atelier-dash-columns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Pages: stack headings and actions like desktop content, not crushed */
  body.florisyn-atelier .page > .heading {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  body.florisyn-atelier .page > .heading .actions,
  body.florisyn-atelier .page > .heading .heading-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  body.florisyn-atelier .page > .heading .actions button,
  body.florisyn-atelier .page > .heading .heading-actions button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* One page visible — active page fills viewport stack */
  body.florisyn-atelier .page.active:not(#dashboardPage) {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Cards, grids, and tiles stack cleanly */
  body.florisyn-atelier .cards,
  body.florisyn-atelier .inventory-grid,
  body.florisyn-atelier #productPadGrid,
  body.florisyn-atelier .marketplace-toolbar,
  body.florisyn-atelier .expense-toolbar {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.florisyn-atelier .two,
  body.florisyn-atelier .three,
  body.florisyn-atelier .report-grid,
  body.florisyn-atelier .settings-grid,
  body.florisyn-atelier .website-studio-layout,
  body.florisyn-atelier .marketplace-shell {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  body.florisyn-atelier .report-table,
  body.florisyn-atelier .order-board,
  body.florisyn-atelier .cart-table-wrap,
  body.florisyn-atelier .telemetry-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.florisyn-atelier .order-board {
    white-space: nowrap;
  }

  body.florisyn-atelier .order-board-column {
    display: inline-block !important;
    vertical-align: top;
    width: min(86vw, 300px) !important;
    white-space: normal;
  }

  /* Forms — comfortable tap targets */
  body.florisyn-atelier .page input:not([type="checkbox"]):not([type="radio"]),
  body.florisyn-atelier .page select,
  body.florisyn-atelier .page textarea,
  body.florisyn-atelier dialog input:not([type="checkbox"]):not([type="radio"]),
  body.florisyn-atelier dialog select,
  body.florisyn-atelier dialog textarea {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  body.florisyn-atelier dialog textarea {
    min-height: 88px !important;
  }

  /* Modals fit phone screens and scroll internally */
  body.florisyn-atelier dialog {
    width: min(100vw - 16px, 100%) !important;
    max-width: none !important;
    max-height: min(92dvh, 100%) !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.florisyn-atelier dialog form,
  body.florisyn-atelier dialog .dialog-shell {
    max-height: 92dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.florisyn-atelier dialog .actions,
  body.florisyn-atelier dialog .dialog-tools,
  body.florisyn-atelier dialog .sticky-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: #fff !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2 !important;
  }

  /* Images scale without cropping important content */
  body.florisyn-atelier .page img:not(.assistant-portrait):not(.florisyn-official-logo):not(.florisyn-brand-mark),
  body.florisyn-atelier .product-card img,
  body.florisyn-atelier .floral-library-card img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  body.florisyn-atelier .product-card img,
  body.florisyn-atelier .floral-library-card img {
    max-height: 220px !important;
    object-fit: cover !important;
  }

  /* Floating mascots must not block primary actions — Daisy retired on mobile */
  body.florisyn-atelier #bloomDog,
  body.florisyn-atelier #bloomDaisy,
  body.florisyn-atelier .bloom-dog,
  body.florisyn-atelier .bloom-daisy,
  body.bloom-rc21.florisyn-atelier #bloomDaisy,
  body.bloom-rc21.florisyn-atelier .bloom-daisy {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
  }

  body.florisyn-atelier .assistant-mini-dock {
    display: none !important;
  }

  /* POS — full-width register on phones */
  body.florisyn-atelier.florisyn-pos-active .shell > .content,
  body.florisyn-atelier #posPage.active {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.florisyn-atelier.florisyn-pos-active .shell > .content {
    padding-top: 0 !important;
    padding-bottom: var(--florisyn-pos-dock-stack) !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux.pos-workspace.florisyn-pos-lux {
    min-height: calc(100dvh - var(--florisyn-mobile-nav-height) - 56px) !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-main-row {
    flex-direction: column !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-center {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-checkout {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    border-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /* Force every direct child of the checkout column (customer card, fulfillment
     fields, totals, payment buttons) to its own full-width row. On mobile these
     were rendering as a horizontal row instead of stacking — totals on the left,
     Charge/Cash/Split buttons cut off past the right edge of the screen. */
  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-checkout > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-totals {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-pay-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-pay-actions > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-pay-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: 100% !important;
  }

  /* POS quick tools — in-flow horizontal toolbar. Previously position:fixed, which
     leaked a desktop `top` value and floated a translucent bar over the top content on
     mobile (looked like a stray "Clock Out"/floral overlay). Keep it in normal flow. */
  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-rail {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 8px !important;
    gap: 6px !important;
    z-index: auto !important;
    box-shadow: none !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-main-row {
    padding-bottom: 0 !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-rail-btn {
    flex: 0 0 auto !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-rail-btn small {
    display: none !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-rail-btn .pos-lux-ico svg {
    width: 20px !important;
    height: 20px !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux #posLuxCategories.pos-lux-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }

  /* Florisyn help strip — fixed above bottom nav; Lily/Help live in quick bar + chips */
  body.florisyn-atelier #posPage .bloom-page-help.bloom-pos-mobile-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--florisyn-mobile-nav-height) !important;
    z-index: 62 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    background: rgba(250, 246, 248, 0.98) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 -2px 12px rgba(26, 31, 60, 0.08) !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body.florisyn-atelier #posPage .bloom-pos-mobile-footer .bloom-pos-footer-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body.florisyn-atelier #posPage .bloom-pos-mobile-footer .bloom-pos-footer-brand strong {
    display: block !important;
    font-size: 14px !important;
    color: var(--pos-rose, #e06b85) !important;
  }

  body.florisyn-atelier #posPage .bloom-pos-mobile-footer .bloom-pos-footer-hint {
    margin: 2px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #6b5f66 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.florisyn-atelier #posPage .bloom-pos-mobile-footer .eyebrow {
    display: none !important;
  }

  body.florisyn-atelier #posPage .bloom-pos-footer-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  body.florisyn-atelier #posPage .bloom-pos-chip {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border: 1px solid #eadde5 !important;
    background: #fff !important;
    color: var(--lux-navy, #1a1f3c) !important;
    touch-action: manipulation;
  }

  body.florisyn-atelier #posPage .bloom-pos-chip.bloom-help-lily {
    background: var(--pos-rose, #e06b85) !important;
    border-color: var(--pos-rose, #e06b85) !important;
    color: #fff !important;
  }

  body.florisyn-atelier #posPage #florisynPosLux .pos-lux-statusbar {
    margin-bottom: 0 !important;
  }

  /* Dashboard assistant cards */
  body.florisyn-atelier .atelier-assist-rail .rose-welcome-card,
  body.florisyn-atelier .atelier-assist-rail .lily-suggestion-card {
    border-radius: 16px !important;
    margin-bottom: 0 !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    min-height: 0 !important;
  }

  body.florisyn-atelier .lily-suggestion-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.florisyn-atelier .lily-suggestion-actions button {
    min-height: 44px !important;
    flex: 1 1 auto !important;
  }

  /* Rose/Lily used to render as a narrow 52x120 sliver instead of a round
     avatar: this rule's own height:52px/max-height:52px was correct, but
     without a matching min-height, the grid item's automatic minimum size
     (a replaced element's intrinsic-ratio-based auto min-height) won out
     over the explicit height and stretched the box back to ~120px, so
     object-fit:cover cropped almost the entire width of the (square)
     source photo down to a thin vertical strip — cutting off the sides of
     the face. Pinning min-height closes that gap. */
  body.florisyn-atelier .atelier-assist-rail .assistant-portrait,
  body.florisyn-atelier .rose-portrait,
  body.florisyn-atelier .lily-portrait {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
  }

  body.florisyn-atelier .sticky-actions,
  body.florisyn-atelier .payment-center-toolbar,
  body.florisyn-atelier .page > .heading .primary {
    margin-bottom: 4px !important;
  }

  body.florisyn-atelier .page .primary:last-child,
  body.florisyn-atelier .page .secondary:last-child {
    margin-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  body.florisyn-session-recovery #app,
  body.florisyn-session-recovery .mobile-nav.atelier-mobile-nav,
  body.florisyn-session-recovery .lily-fab {
    display: none !important;
  }

  body.florisyn-session-recovery #auth {
    display: block !important;
  }
}

@media (min-width: 821px) {
  body.florisyn-atelier .mobile-nav.atelier-mobile-nav {
    display: none !important;
  }
}

/* ── Mobile sidebar drawer (Florisyn launch) ─────────────────────────────────
   Legacy polish-v20.x `.shell > aside { !important }` rules leaked desktop sizing
   into mobile, breaking the off-canvas drawer. Force a clean, narrower drawer laid
   out as a flex column: the "Florisyn" brand stays pinned at the top while the menu
   scrolls underneath it, and the Premium card stays pinned at the bottom.
   Loads last, so it wins on equal specificity. */
@media (max-width: 980px) {
  body.florisyn-atelier .shell > aside#atelierSidebarDrawer,
  body.florisyn-atelier .shell > aside#atelierSidebarDrawer.florisyn-lux-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    height: 100% !important;
    width: min(248px, 80vw) !important;
    max-width: 80vw !important;
    transform: translateX(-105%) !important;
    transition: transform 0.22s ease !important;
    z-index: 1200 !important;
    display: flex !important;
    flex-direction: column !important;
    /* See the flex-wrap note on the @media(max-width:820px) drawer rule
       above — same legacy bloom-rc2 leak, same fix, this is the block
       that's actually active for 821-979px viewports. */
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  body.florisyn-atelier.atelier-drawer-open .shell > aside#atelierSidebarDrawer,
  body.florisyn-atelier.atelier-drawer-open .shell > aside#atelierSidebarDrawer.florisyn-lux-sidebar {
    transform: translateX(0) !important;
    box-shadow: 0 18px 60px rgba(26, 31, 60, 0.4) !important;
  }

  /* The drawer (z-index:1200 above) starts at top:0, so it and its own
     "Florisyn" brand row cover the real header — including the hamburger,
     logo, and notification bell — the instant it opens. Keep the header
     above the drawer/backdrop so the logo (and the button that closes the
     menu) stay visible and tappable at all times. */
  body.florisyn-atelier .florisyn-lux-header {
    z-index: 1300 !important;
  }

  /* "Florisyn" brand pinned at the top — stays put. */
  body.florisyn-atelier .shell > aside#atelierSidebarDrawer .atelier-sidebar-brand {
    flex: 0 0 auto !important;
  }
  /* Menu scrolls underneath the brand. */
  body.florisyn-atelier .shell > aside#atelierSidebarDrawer .florisyn-lux-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* The header above is z-index:1300 (raised above the drawer, see comment
       above) and physically 72px tall on real devices. Without this, the
       drawer's first nav item (Dashboard) renders directly underneath that
       opaque header and is both invisible and unclickable — confirmed live:
       elementFromPoint() on "Dashboard" resolved to the header's logo, not
       the button. Push the whole list down past the header instead of
       fighting z-index further. */
    padding-top: 76px !important;
    scroll-padding-top: 76px !important;
  }
  /* Premium card pinned at the bottom. */
  body.florisyn-atelier .shell > aside#atelierSidebarDrawer .florisyn-premium-badge {
    flex: 0 0 auto !important;
  }
  /* Nav items fill the (narrower) drawer so labels never clip. */
  body.florisyn-atelier .shell > aside#atelierSidebarDrawer button,
  body.florisyn-atelier .shell > aside#atelierSidebarDrawer a {
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }
}