/* v1.6.5 shop "coming soon" banner — sits above every shop slider. No fixed height.
   Art is a real <picture><img> in .fg-shop-banner__art (no CSS background-image / image-set). */
.fg-shop-banner{
  position:relative; display:flex; align-items:center;
  margin:0 0 16px; padding:28px 32% 28px 32px;
  border-radius:10px; overflow:hidden;
  background:#fbecd2 none !important;
  color:#2b2622;
  aspect-ratio:4/1; /* minimum shape so the lotus isn't cropped; content can still grow it */
  box-sizing:border-box;
}
.fg-shop-banner__art{
  position:absolute; inset:0; z-index:0; display:block !important;
  margin:0; padding:0; overflow:hidden; pointer-events:none;
}
.fg-shop-banner__pic{ display:block; width:100%; height:100%; margin:0; }
.fg-shop-banner .fg-shop-banner__img{
  display:block !important; width:100% !important; height:100% !important; max-width:none !important;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  object-fit:cover; object-position:right center;
  opacity:1 !important; visibility:visible !important;
}
.fg-shop-banner__text{ position:relative; z-index:1; max-width:36em; }
.fg-shop-banner p{ margin:0; }
.fg-shop-banner__title{ font-size:1.35em; font-weight:700; line-height:1.25; color:#2b2622; margin-bottom:.35em !important; }
.fg-shop-banner__sub{ font-size:1em; line-height:1.5; color:#3a332d; }
@media (max-width:782px){
  .fg-shop-banner{ padding:22px 42% 22px 22px; aspect-ratio:2.4/1; }
}
@media (max-width:480px){
  .fg-shop-banner{ display:block; padding:0; aspect-ratio:auto; }
  .fg-shop-banner__art{ position:relative; inset:auto; aspect-ratio:750/300; }
  .fg-shop-banner__text{ padding:14px 18px 18px; }
  .fg-shop-banner__title{ font-size:1.2em; }
}