/* 
 * STOREFLO THEME - GLOBAL CUSTOM CSS
 * 
 * This file is automatically loaded for ALL pages in the storeflo theme.
 * Add your theme-wide custom styles here.
 * 
 * Best Practices:
 * - Use theme-specific class prefixes (e.g., .storeflo-*)
 * - Avoid global selectors that might conflict with other themes
 * - Use CSS variables for consistent theming
 */
:root {
  /* Storeflo Theme Colors */
  --storeflo-primary: #ccff00;
  --storeflo-secondary: #6e44ff;
  --storeflo-accent: #000000;
  --storeflo-background: #ffffff;
}

/* Storeflo content container: 1209px content + 16px side padding */

.storeflo-button {
  background: var(--storeflo-primary);
  color: var(--storeflo-accent);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

.storeflo-button:hover {
  background: var(--storeflo-secondary);
  color: white;
  transform: translateY(-2px);
}

/* Custom homepage content styling */
.custom-homepage-content {
  /* Ensure API-provided HTML renders nicely */
  line-height: 1.6;
}

.custom-homepage-content img {
  max-width: 100%;
  height: auto;
}

:root {
  --title-color: #14142b;
  --secondary-color: #007bff;
  --bg-color: #f8f9fa;
  --text-color: #4e4b66;
  --gray-color: #f2f2f2;
  --gray-color-100: #eff0f6;
  --gray-color-200: #fcfcfc;
  --gray-color-300: #f4f4f4;
  --gray-color-400: #414141;
  --gray-color-500: #181915;
  --gray-color-600: #262525;
  --border-color: #d9dbe9;
  --primary-color: #005bd4;
  --color-white: #ffffff;
  --color-black: #000000;
  --gradiant: linear-gradient(115.16deg, #096a58 17.49%, #154b96 85.34%);
  --font-family: var(--font-nunito-sans, "Nunito Sans", sans-serif);
  /* Manrope powers navigation + headings; Nunito Sans stays for body/product copy. */
  --font-heading: var(--font-manrope, "Manrope", "Nunito Sans", sans-serif);
  --font-nav: var(--font-manrope, "Manrope", "Nunito Sans", sans-serif);
  --sidebar-width: 88px;
  --mobile-bottom-nav-height: 72px;
  --mobile-sticky-header-offset: 60px;
  --transition-speed: all 0.3s ease-in-out;
  --border-radius-12: 12px;
  --border-radius-16: 16px;
}

.commerce-theme-wrapper,
.commerce-theme-wrapper *,
.swagify-theme-page,
.swagify-theme-page * {
  font-family: var(--font-family) !important;
}

/*
 * Product imprint / custom-font previews must win over the global
 * Nunito Sans !important rule above. Set --imprint-font-family on the node.
 */
.swagify-theme-page .imprint-font,
.swagify-theme-page .imprint-font *,
.commerce-theme-wrapper .imprint-font,
.commerce-theme-wrapper .imprint-font * {
  font-family: var(--imprint-font-family, var(--font-family)) !important;
}

/*
 * LEFT SIDEBAR — soften inactive icons for a calmer, premium SaaS look.
 * Only inactive items carry the `.v2-sidebar-item` class (active uses
 * `.v2-sidebar-item-swagify`, the bottom button uses `.solution-menu`),
 * so these rules never touch the active/solutions icons.
 */
.v2-sidebar-item .v2-sidebar-img-icon {
  opacity: 0.65;
  filter: grayscale(1);
  transition:
    opacity 0.18s ease,
    filter 0.18s ease;
}
.v2-sidebar-item:hover .v2-sidebar-img-icon {
  opacity: 1;
  filter: grayscale(0);
}

/*
 * LEFT SIDEBAR — labels use Manrope (overrides the global Nunito Sans
 * `!important` rule above) and stay on a single line (e.g. "Swag Shops").
 */
.v2-sidebar-icon-text {
  font-family: var(--font-nav) !important;
  white-space: nowrap;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/*
 * TYPOGRAPHY SYSTEM
 * Manrope -> navigation + headings (premium, high-contrast hierarchy)
 * Nunito Sans -> body content, product info (kept from --font-family above)
 *
 * The rules below intentionally use !important and a class+type specificity
 * (e.g. .commerce-theme-wrapper h1) so they win over the global
 * ".swagify-theme-page *" Nunito rule defined above.
 */

/* Headings: hero headlines (h1) and section/category titles (h2).
   Product names render as h3 and deliberately keep Nunito Sans. */
.commerce-theme-wrapper h1,
.commerce-theme-wrapper h2,
.commerce-theme-wrapper .storeflo-heading,
.swagify-theme-page .storeflo-heading,
.swagify-theme-page[data-page="auth"] h1,
.swagify-theme-page[data-page="auth"] h2 {
  font-family: var(--font-heading) !important;
  letter-spacing: -0.01em;
}

/*
 * Mobile homepage LCP is the hero h2. Keep it on system fonts so Manrope/Nunito
 * swap cannot push LCP from ~FCP to multi-second (display:swap + !important headings).
 */
.commerce-theme-wrapper .sf-mobile-hero-lcp,
.commerce-theme-wrapper .sf-mobile-hero-lcp h2,
.commerce-theme-wrapper .sf-mobile-hero-lcp p,
.commerce-theme-wrapper .sf-mobile-hero-lcp a,
.swagify-theme-page .sf-mobile-hero-lcp,
.swagify-theme-page .sf-mobile-hero-lcp h2,
.swagify-theme-page .sf-mobile-hero-lcp p,
.swagify-theme-page .sf-mobile-hero-lcp a {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
}

/* Navigation: Manrope across desktop, mobile, breadcrumbs and mega menus. */
.storeflo-nav,
.storeflo-nav a,
.storeflo-nav button,
.storeflo-nav span,
.storeflo-nav-link,
.storeflo-breadcrumb,
.storeflo-breadcrumb a,
.storeflo-breadcrumb span {
  font-family: var(--font-nav) !important;
}

/* Desktop main menu links: bolder, near-black, with hover/active states. */
.storeflo-nav-link {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  color: #111827 !important;
  transition: all 0.2s ease;
}

/* Long labels (>16 chars) get a slightly smaller size for even visual weight. */
.storeflo-nav-link.is-long {
  font-size: 14px !important;
}

.storeflo-nav-link:hover,
.storeflo-nav-link:focus-visible,
.group:hover .storeflo-nav-link {
  color: #0f766e !important;
}

.storeflo-nav-link.is-active {
  color: #0f766e !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #7ed957;
}

/* Top header search bar */
.header-search {
  width: 100%;
  max-width: 520px;
  border: 1.5px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.header-search:focus-within {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.header-search input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

.header-search input {
  font-family: var(--font-nav) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #111827;
  /* min-height: 48px; */
  padding: 0 0 0 18px;
}

.header-search .header-search-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-right: 4px;
}

.header-search input::placeholder {
  color: #64748b;
  opacity: 1;
}

.mobile-header-search:focus-within {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.mobile-header-search input {
  font-family: var(--font-nav) !important;
}

.mobile-header-search input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Keep the tablet/desktop search bar from leaking into the mobile header row */
@media (max-width: 767px) {
  .storeflo-desktop-header-wrapper .header-search {
    display: none !important;
  }
}

.header-search .search-icon {
  width: 32px;
  height: 32px;
  color: #111827;
}

/* Homepage product search (under the main menu) */
.homepage-product-search {
  height: 48px;
  width: 100%;
  margin: 0 auto;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

.homepage-product-search input {
  font-family: var(--font-nav) !important;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  padding: 0 52px 0 18px;
}

.homepage-product-search input::placeholder {
  color: #475569;
  opacity: 1;
}

.homepage-product-search:focus-within {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

/* Mobile/tablet fixed header for non-shell pages (product, shop, category, etc.) */
@media (max-width: 1023px) {
  .storeflo-desktop-header-wrapper.storeflo-mobile-fixed-header {
    position: fixed;
    height: 60px;
    min-height: 60px;
    flex: 0 0 auto;
    overflow: visible;
    z-index: auto;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    width: 100%;
  }

  .storeflo-desktop-header-wrapper.storeflo-mobile-fixed-header
    > .storeflo-mobile-fixed-header__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    width: 100%;
    background: #fff;
  }

  .storeflo-main-content.storeflo-mobile-fixed-header-offset {
    padding-top: 60px;
  }
}

/* Mobile header category drawer — full height, above bottom nav (1055) */
@media (max-width: 1279px) {
  .storeflo-mobile-category-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mobile-sticky-header-offset, 60px);
    bottom: 0;
    z-index: 1060;
    overflow: hidden;
    overscroll-behavior: none;
  }
}

/* Floating iOS-style mobile bottom navigation (liquid glass) */
.v2-mobile-first-menu {
  font-family: var(--font-nav) !important;
  box-sizing: border-box;
}

html.storeflo-scroll-locked,
html.storeflo-scroll-locked body {
  overflow: hidden !important;
  overscroll-behavior: none;
  /* height: 100%; */
}

html.storeflo-scroll-locked .commerce-theme-wrapper,
html.storeflo-scroll-locked .storeflo-main-content {
  overflow: hidden !important;
}

/* Soft lock (pricing chart on tablet/mobile): disable scroll but keep page painted under overlay.
   Do NOT force height:100% — that clips scrolled product content and looks like a blank page. */
html.storeflo-scroll-locked-soft,
html.storeflo-scroll-locked-soft body {
  height: auto !important;
  max-height: none !important;
}

html.storeflo-scroll-locked-soft .commerce-theme-wrapper,
html.storeflo-scroll-locked-soft .storeflo-main-content,
html.storeflo-scroll-locked-soft #__next {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/*
 * Keep layout wrappers overflow-visible so position:sticky works (TOC, PDP sidebar,
 * cart summary, filters, etc.). Do not set overflow on body or main wrappers.
 */
.commerce-theme-wrapper,
.storeflo-main-content {
  max-width: 100%;
  min-width: 0;
}

.storeflo-desktop-header-wrapper,
.storeflo-category-nav-shell {
  overflow: visible;
}

html {
  max-width: 100%;
}

body {
  max-width: 100%;
  overflow: visible;
}

@media (max-width: 1023px) {
  html.storeflo-scroll-locked,
  html.storeflo-scroll-locked body {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .v2-mobile-first-menu--liquid {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: auto;
    max-width: none;
  }

  .v2-mobile-first-menu__surface {
    background: rgba(18, 18, 20, 0.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.v2-mobile-first-menu a,
.v2-mobile-first-menu button {
  font-family: var(--font-nav) !important;
  min-height: 40px;
  min-width: 0;
  max-width: 100%;
  flex: 1;
  width: 100%;
}

.v2-mobile-first-menu__items > li {
  display: flex;
  align-items: stretch;
}

.v2-mobile-first-menu--liquid {
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.38),
    0 6px 16px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transition:
    transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.28s ease;
  will-change: transform, opacity;
}

.v2-mobile-first-menu--liquid.v2-mobile-first-menu--hidden {
  transform: translate3d(0, calc(100% + 36px), 0);
  -webkit-transform: translate3d(0, calc(100% + 36px), 0);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .storeflo-desktop-header-wrapper.storeflo-shell-header--fixed {
    position: relative !important;
    top: auto !important;
    left: auto;
    right: auto;
    width: 100%;
    flex: 0 0 auto;
    height: var(--mobile-sticky-header-offset, 60px);
    min-height: var(--mobile-sticky-header-offset, 60px);
    overflow: visible;
    z-index: auto;
  }

  .storeflo-desktop-header-wrapper.storeflo-shell-header--fixed.storeflo-shell-header--hidden {
    height: 0;
    min-height: 0;
  }

  .storeflo-desktop-header-wrapper.storeflo-shell-header--fixed > .storeflo-shell-header__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    width: 100%;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transition:
      transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.28s ease;
    will-change: transform, opacity;
  }

  .storeflo-desktop-header-wrapper.storeflo-shell-header--fixed.storeflo-shell-header--hidden
    > .storeflo-shell-header__bar {
    transform: translate3d(0, calc(-100% - 8px), 0);
    -webkit-transform: translate3d(0, calc(-100% - 8px), 0);
    opacity: 0;
    pointer-events: none;
  }

  .storeflo-desktop-header-wrapper:not(.storeflo-shell-header--fixed) {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transition:
      transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.28s ease;
    will-change: transform, opacity;
  }

  .storeflo-desktop-header-wrapper:not(
      .storeflo-shell-header--fixed
    ).storeflo-shell-header--hidden {
    transform: translate3d(0, calc(-100% - 8px), 0);
    -webkit-transform: translate3d(0, calc(-100% - 8px), 0);
    opacity: 0;
    pointer-events: none;
  }
}

.v2-mobile-first-menu__surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(22, 22, 24, 0.48);
  -webkit-backdrop-filter: blur(48px) saturate(200%) brightness(0.9);
  backdrop-filter: blur(48px) saturate(200%) brightness(0.9);
}

.v2-mobile-first-menu__sheen {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.08) 14%,
    rgba(255, 255, 255, 0.02) 36%,
    rgba(255, 255, 255, 0) 58%
  );
}

.v2-mobile-first-menu__items {
  position: relative;
  z-index: 1;
}

.v2-mobile-first-menu__track {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding: 0.1875rem;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .v2-mobile-first-menu__track {
    padding: 0.3125rem;
  }
}

.v2-mobile-first-menu__active-pill {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 14px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: none;
  transition:
    left 0.34s cubic-bezier(0.32, 0.72, 0, 1),
    width 0.34s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.2s ease,
    border-radius 0.34s cubic-bezier(0.32, 0.72, 0, 1);
}

.v2-mobile-first-menu__active-pill[data-active-index="0"] {
  left: 0 !important;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.v2-mobile-first-menu__active-pill[data-active-index="5"] {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .v2-mobile-first-menu__surface {
    background: rgba(17, 17, 17, 0.94);
  }
}

@media (max-width: 1023px) {
  .storeflo-desktop-header-wrapper.storeflo-shell-header--fixed > .storeflo-shell-header__bar {
    background-color: #ffffff;
  }
}

/*
 * Legal/policy pages — minimal spacing below category nav.
 * Sticky TOC top matches pinned category bar (~52px) + small gap.
 */
.storeflo-policy-page-section {
  padding-top: 0.75rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .storeflo-policy-page-section {
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  .storeflo-policy-page-section {
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  .storeflo-policy-toc-sticky {
    position: sticky;
    align-self: start;
    z-index: 2;
    top: calc(var(--mobile-sticky-header-offset, 124px) + 0.5rem);
  }

  .storeflo-policy-section-anchor {
    scroll-margin-top: calc(var(--mobile-sticky-header-offset, 124px) + 1rem);
  }
}

/* Solutions mega menu — single scroll panel (desktop + mobile). */
@media (min-width: 1024px) {
  .v2-solution-menu-inner {
    min-height: 0;
  }

  .v2-solution-menu-box {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .v2-solution-menu-row {
    align-items: flex-start;
  }

  .v2-solution-menu-left,
  .v2-solution-menu-right {
    overflow: visible;
    max-height: none;
  }
}

/* Solutions mega menu — single scroll panel on mobile. */
@media (max-width: 1023px) {
  #swagify-new-solutions-menu {
    touch-action: pan-y;
  }

  #swagify-new-solutions-menu .v2-solution-menu-inner,
  #swagify-new-solutions-menu .v2-solution-menu-box {
    min-height: 0;
  }

  #swagify-new-solutions-menu .v2-solution-menu-box {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  #swagify-new-solutions-menu .v2-solution-menu-right {
    overflow: visible;
  }
}

html.storeflo-scroll-locked-soft [data-scroll-lock-ignore] {
  touch-action: pan-y;
}

/* iOS Safari auto-zooms focused inputs when font-size is below 16px */
@media (max-width: 1023px) {
  .commerce-theme-wrapper
    input:not(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="hidden"],
      [type="button"],
      [type="submit"],
      [type="reset"],
      [type="file"]
    ),
  .commerce-theme-wrapper select,
  .commerce-theme-wrapper textarea {
    font-size: 16px !important;
  }
}

/*
 * CookieYes floating "revisit consent" control — hide on mobile.
 * Not required on every page after the user has chosen; it overlaps the bottom
 * nav. Visitors can still change preferences via Cookie Policy / CookieYes dashboard
 * link. Full consent banner still shows until the first Accept/Reject/Customize.
 */
@media (max-width: 1023px) {
  .cky-btn-revisit-wrapper,
  .cky-btn-revisit,
  .cky-revisit-bottom-left,
  .cky-revisit-bottom-right {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Keep footer resource links above the floating bottom nav */
  .storeflo-footer.storeflo-footer--with-mobile-nav {
    padding-bottom: calc(var(--mobile-bottom-nav-height, 72px) + 16px) !important;
  }
}

.storeflo-footer {
  background-color: #010b0e;
  color: #d9dbe9;
}

.storeflo-footer__resource-link {
  display: inline-block;
  border-radius: 0.25rem;
  background-color: #2a2b3e;
  padding: 0.5rem 0.75rem;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  color: #fcfcfc;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.storeflo-footer__resource-link:hover {
  background-color: #3a3b50;
  color: #fcfcfc;
}

/* Order detail metadata — horizontal scroll on mobile only */
@media (max-width: 767px) {
  .order-detail-metadata-scroll {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #a0a3bd #eff0f6;
  }

  .order-detail-metadata-scroll::-webkit-scrollbar {
    height: 6px;
  }

  .order-detail-metadata-scroll::-webkit-scrollbar-track {
    background: #eff0f6;
    border-radius: 999px;
  }

  .order-detail-metadata-scroll::-webkit-scrollbar-thumb {
    background: #a0a3bd;
    border-radius: 999px;
  }
}

@media (max-width: 767px) {
  body.storeflo-order-detail-sticky-total {
    --order-detail-sticky-total-height: 48px;
  }

  /* Clear sticky Total only — avoid a large empty gap above the bar */
  body.storeflo-order-detail-sticky-total .storeflo-main-content,
  body.storeflo-order-detail-sticky-total .commerce-theme-wrapper > footer,
  body.storeflo-order-detail-sticky-total .commerce-theme-wrapper > div:has(footer),
  body.storeflo-order-detail-sticky-total footer {
    padding-bottom: calc(
      var(--order-detail-sticky-total-height, 48px) - 16px + env(safe-area-inset-bottom, 0px)
    ) !important;
  }

  /* Cookie palette revisit button overlaps Total bar — hide only on this page */
  body.storeflo-order-detail-sticky-total .cky-btn-revisit-wrapper,
  body.storeflo-order-detail-sticky-total .cky-btn-revisit,
  body.storeflo-order-detail-sticky-total .cky-revisit-bottom-left,
  body.storeflo-order-detail-sticky-total .cky-revisit-bottom-right {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Help Scout chat — sit just above the sticky Total bar */
  body.storeflo-order-detail-sticky-total .BeaconFabButtonFrame,
  body.storeflo-order-detail-sticky-total .BeaconFabButtonPulse,
  body.storeflo-order-detail-sticky-total iframe.BeaconFabButtonFrame,
  body.storeflo-order-detail-sticky-total .Beacon .BeaconFabButtonFrame,
  body.storeflo-order-detail-sticky-total .Beacon .BeaconFabButtonPulse {
    bottom: calc(
      var(--order-detail-sticky-total-height, 48px) + 12px + env(safe-area-inset-bottom, 0px)
    ) !important;
    right: 12px !important;
    left: auto !important;
  }
}

/* Checkout (mobile): clear sticky bottom bar + lift Help Scout chat above price/nav */
@media (max-width: 767px) {
  body.storeflo-checkout-mobile-bottom-bar {
    --checkout-mobile-bottom-bar-height: 160px;
  }

  /* Cookie palette revisit button overlaps Estimated Total — hide only on checkout */
  body.storeflo-checkout-mobile-bottom-bar .cky-btn-revisit-wrapper,
  body.storeflo-checkout-mobile-bottom-bar .cky-btn-revisit,
  body.storeflo-checkout-mobile-bottom-bar .cky-revisit-bottom-left,
  body.storeflo-checkout-mobile-bottom-bar .cky-revisit-bottom-right {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Help Scout chat — sit above checkout sticky bar (total row + prev/next buttons) */
  body.storeflo-checkout-mobile-bottom-bar .BeaconFabButtonFrame,
  body.storeflo-checkout-mobile-bottom-bar .BeaconFabButtonPulse,
  body.storeflo-checkout-mobile-bottom-bar iframe.BeaconFabButtonFrame,
  body.storeflo-checkout-mobile-bottom-bar .Beacon .BeaconFabButtonFrame,
  body.storeflo-checkout-mobile-bottom-bar .Beacon .BeaconFabButtonPulse {
    bottom: calc(
      var(--checkout-mobile-bottom-bar-height, 160px) + 12px + env(safe-area-inset-bottom, 0px)
    ) !important;
    right: 12px !important;
    left: auto !important;
  }
}

/* Cart (mobile): lift Help Scout chat above sticky Proceed to Checkout bar */
@media (max-width: 767px) {
  body.storeflo-cart-mobile-bottom-bar {
    --cart-mobile-bottom-bar-height: 80px;
  }

  body.storeflo-cart-mobile-bottom-bar .cky-btn-revisit-wrapper,
  body.storeflo-cart-mobile-bottom-bar .cky-btn-revisit,
  body.storeflo-cart-mobile-bottom-bar .cky-revisit-bottom-left,
  body.storeflo-cart-mobile-bottom-bar .cky-revisit-bottom-right {
    /* CookieYes overrides position via inline styles — hide on cart (same as checkout) */
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.storeflo-cart-mobile-bottom-bar .BeaconFabButtonFrame,
  body.storeflo-cart-mobile-bottom-bar .BeaconFabButtonPulse,
  body.storeflo-cart-mobile-bottom-bar iframe.BeaconFabButtonFrame,
  body.storeflo-cart-mobile-bottom-bar .Beacon .BeaconFabButtonFrame,
  body.storeflo-cart-mobile-bottom-bar .Beacon .BeaconFabButtonPulse {
    bottom: calc(
      var(--cart-mobile-bottom-bar-height, 80px) + 12px + env(safe-area-inset-bottom, 0px)
    ) !important;
    right: 12px !important;
    left: auto !important;
  }

  /* Hide sticky checkout while chat is open so the form isn't clipped underneath */
  body.storeflo-cart-mobile-bottom-bar.storeflo-beacon-open [data-cart-mobile-bottom-bar] {
    transform: translateY(110%);
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.storeflo-cart-mobile-bottom-bar.storeflo-beacon-open .BeaconFabButtonFrame,
  body.storeflo-cart-mobile-bottom-bar.storeflo-beacon-open .BeaconFabButtonPulse,
  body.storeflo-cart-mobile-bottom-bar.storeflo-beacon-open iframe.BeaconFabButtonFrame,
  body.storeflo-cart-mobile-bottom-bar.storeflo-beacon-open .Beacon .BeaconFabButtonFrame,
  body.storeflo-cart-mobile-bottom-bar.storeflo-beacon-open .Beacon .BeaconFabButtonPulse {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Help Scout Beacon — above fixed mobile header (99999) so open chat isn't clipped */
.BeaconFabButtonFrame,
.BeaconFabButtonPulse,
iframe.BeaconFabButtonFrame,
.Beacon .BeaconFabButtonFrame,
.Beacon .BeaconFabButtonPulse,
.BeaconContainerFrame,
iframe.BeaconContainerFrame,
#beacon-container {
  z-index: 100050 !important;
}

/* Open Beacon panel: clear fixed header + leave room for the close FAB */
@media (max-width: 1023px) {
  body.storeflo-beacon-open .storeflo-desktop-header-wrapper.storeflo-mobile-fixed-header,
  body.storeflo-beacon-open
    .storeflo-desktop-header-wrapper.storeflo-mobile-fixed-header
    > .storeflo-mobile-fixed-header__bar {
    z-index: 1040 !important;
  }

  .BeaconContainerFrame,
  iframe.BeaconContainerFrame {
    top: calc(var(--mobile-sticky-header-offset, 60px) + 8px) !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    max-height: calc(
      100dvh - var(--mobile-sticky-header-offset, 60px) - 80px - env(safe-area-inset-bottom, 0px)
    ) !important;
    z-index: 100060 !important;
  }
}

/* Full-screen overlays — above fixed header (99999) and pinned category nav (1035) */
.storeflo-overlay-layer {
  z-index: 100010 !important;
}

/* Above profile/checkout drawers — validation modals, loaders, toasts */
.storeflo-overlay-layer-top {
  z-index: 100030 !important;
}

[data-sonner-toaster] {
  z-index: 100030 !important;
}

/* Google Places autocomplete dropdown — must sit above profile/checkout overlays */
.pac-container {
  z-index: 100020 !important;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  margin-top: 4px;
  font-family: inherit;
}

/* Fancybox lightbox — above fixed header (99999) and site overlay layers */
html.with-fancybox {
  --fancybox-zIndex: 100050;
}

html.with-fancybox .fancybox__container {
  z-index: 100050 !important;
}

@media (max-width: 1023px) {
  /* Compact/idle modes fade toolbar on touch — keep close/zoom/nav always reachable */
  html.with-fancybox .fancybox__container.is-idle .fancybox__toolbar,
  html.with-fancybox .fancybox__container.is-idle .fancybox__nav,
  html.with-fancybox .fancybox__container.is-idle .fancybox__footer,
  html.with-fancybox .fancybox__container.is-idle .fancybox__thumbs {
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: none !important;
  }

  html.with-fancybox .fancybox__toolbar .f-button,
  html.with-fancybox .fancybox__nav .f-button,
  html.with-fancybox .fancybox__content > .f-button.is-close-btn {
    pointer-events: auto !important;
  }
}

/* Keep Google-attached inputs from adding extra borders/shadows (floating-label fields) */
.pac-target-input:not(.storeflo-checkout-address-input) {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.storeflo-checkout-address-input.pac-target-input {
  outline: none !important;
  box-shadow: none !important;
}

body.storeflo-cart-drawer-open [data-storeflo-category-nav],
body.storeflo-account-menu-open [data-storeflo-category-nav],
body.storeflo-ticket-modal-open [data-storeflo-category-nav],
body.storeflo-help-modal-open [data-storeflo-category-nav] {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.storeflo-cart-drawer-open .mega-menu-dropdown-portal,
body.storeflo-account-menu-open .mega-menu-dropdown-portal,
body.storeflo-ticket-modal-open .mega-menu-dropdown-portal,
body.storeflo-help-modal-open .mega-menu-dropdown-portal {
  display: none !important;
}

/* Cart drawer open (desktop) — keep Help Scout FAB from covering Checkout in the drawer footer */
@media (min-width: 768px) {
  body.storeflo-cart-drawer-open .BeaconFabButtonFrame,
  body.storeflo-cart-drawer-open .BeaconFabButtonPulse,
  body.storeflo-cart-drawer-open iframe.BeaconFabButtonFrame,
  body.storeflo-cart-drawer-open .Beacon .BeaconFabButtonFrame,
  body.storeflo-cart-drawer-open .Beacon .BeaconFabButtonPulse,
  body.storeflo-cart-drawer-open #beacon-container .BeaconFabButtonFrame,
  body.storeflo-cart-drawer-open #beacon-container iframe.BeaconFabButtonFrame {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* If chat was already open, tuck the panel behind the cart drawer until cart closes */
  body.storeflo-cart-drawer-open .BeaconContainerFrame,
  body.storeflo-cart-drawer-open iframe.BeaconContainerFrame {
    z-index: 100000 !important;
  }
}

/* Product image lightbox — remove native button borders on toolbar (zoom/play/grid/close) */
.product-image-lightbox-toolbar,
.product-image-lightbox-toolbar > button {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.product-image-lightbox-toolbar > button:focus,
.product-image-lightbox-toolbar > button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Product gallery thumbnails — no focus ring after lightbox closes via Escape */
[data-gallery-thumbnail]:focus,
[data-gallery-thumbnail]:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Add your custom theme styles below */