/* Product-only centered hero */
#home.hero {
  min-height: clamp(440px, 78vh, 820px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#home .product-only-hero-grid {
  width: 100%;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  min-height: inherit;
}

#home .product-only-stage {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#home .product-only-focus,
#home .product-only-stage .hero-frame {
  width: min(340px, 100%) !important;
  max-width: 340px !important;
  display: grid !important;
  place-items: center !important;
  margin-inline: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#home .single-product-hero {
  display: block !important;
  width: min(260px, 52vw) !important;
  max-width: 260px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 24px 44px rgba(124, 74, 58, 0.20));
}

@media (min-width: 901px) {
  #home.hero {
    min-height: 720px;
  }

  #home .product-only-focus,
  #home .product-only-stage .hero-frame {
    width: min(360px, 100%) !important;
    max-width: 360px !important;
  }

  #home .single-product-hero {
    width: min(275px, 22vw) !important;
    max-width: 275px !important;
    max-height: 410px !important;
  }
}

@media (max-width: 900px) {
  #home.hero {
    min-height: 500px;
  }

  #home .single-product-hero {
    width: min(210px, 56vw) !important;
    max-width: 210px !important;
    max-height: 310px !important;
  }
}

@media (max-width: 480px) {
  #home.hero {
    min-height: 420px;
  }

  #home .product-only-focus,
  #home .product-only-stage .hero-frame {
    width: min(250px, 92vw) !important;
    max-width: 250px !important;
  }

  #home .single-product-hero {
    width: min(180px, 54vw) !important;
    max-width: 180px !important;
    max-height: 260px !important;
  }
}