/**
 * ShopFluxx — how the fixed furniture stacks at the bottom of a phone screen.
 *
 * Order from the bottom edge up: Woodmart's toolbar, then our buy bar on a
 * product page, then Joinchat's WhatsApp button clear of both.
 *
 * The heights are set by mobile-chrome.js from the real elements. The fallbacks
 * here are what the site measured when this was written, so the layout is still
 * sane if the script does not run.
 */
:root {
  --sf-toolbar-h: 0px;
  --sf-buybar-h: 0px;
  --sf-gap: 12px;
}

@media (max-width: 1024px) {
  body.sf-has-toolbar {
    --sf-toolbar-h: 55px;
  }

  /*
   * Joinchat pins itself to bottom:6px with z-index 9000, which puts it exactly
   * over the cart icon in the toolbar. Lift it clear of everything below it.
   */
  .joinchat {
    bottom: calc(var(--sf-toolbar-h) + var(--sf-buybar-h) + var(--sf-gap)) !important;
    transition: bottom .18s ease;
  }

  /* The buy bar sits on top of the toolbar, not over it — covering the site's
     own navigation to sell one product is a bad trade. */
  body.sf-pp-has-buybar .sf-pp-buybar {
    bottom: var(--sf-toolbar-h) !important;
  }

  /* Enough room that the last of the page clears both bars. */
  body.sf-pp-has-buybar {
    padding-bottom: calc(var(--sf-toolbar-h) + var(--sf-buybar-h) + 8px) !important;
  }

  body.sf-has-toolbar:not(.sf-pp-has-buybar) {
    padding-bottom: calc(var(--sf-toolbar-h) + 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .joinchat { transition: none; }
}