/** Shopify CDN: Minification failed

Line 27:7 Unexpected "{"
Line 27:16 Expected ":"
Line 33:7 Unexpected "{"
Line 33:16 Expected ":"
Line 40:7 Unexpected "{"
Line 40:16 Expected ":"
Line 58:7 Unexpected "{"
Line 58:16 Expected ":"

**/
/* START_SECTION:ss-hero (INDEX:87) */
/* Mobile + tablet fix: restack the floating product card below the hero
   content instead of hiding it. theme.css hides .hero-card entirely via
   `@media (max-width: 960px) { .ss .hero-card { display: none; } }` and
   collapses .hero-layout to a single grid column at that same breakpoint.
   This override matches that same 960px breakpoint so there's no gap
   where the card is hidden without a stacked replacement.

   On wider stacked screens (tablets in portrait, ~750-960px, mostly
   iPad-class devices per GA data) the column is also capped at 640px
   and centered, so it doesn't stretch phone-width content edge to edge
   across a much wider screen. Below 640px this cap has no visible
   effect since the viewport is already narrower than it. */
@media screen and (max-width: 960px) {
  #ss-{{ section.id }} .hero-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #ss-{{ section.id }} .hero-content {
    order: 1;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }

  #ss-{{ section.id }} .hero-card {
    display: block !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 100% !important;
    max-width: 640px !important;
    margin: 24px auto 0 !important;
    order: 2;
  }

  #ss-{{ section.id }} .hero-card .card-img img {
    width: 100%;
    height: auto;
    display: block;
  }
}
/* END_SECTION:ss-hero */