.nandi-banner {
  box-sizing: border-box;
  width: 100%;
  margin: 1rem 0;
  padding: var(--nandi-upsell-padding, 16px);
  border: 1px solid var(--nandi-upsell-border, #d8e3da);
  border-radius: 12px;
  background: var(--nandi-upsell-background, #f7faf6);
  color: var(--nandi-upsell-text, #253b31);
  overflow-wrap: anywhere;
  font: inherit;
}
.nandi-banner h3 { color: inherit; margin: 0 0 .8rem; font-size: 1.15em; }
.nandi-banner picture, .nandi-banner img, .nandi-banner video { display: block; width: 100%; max-width: 100%; height: auto; }
.nandi-banner video { aspect-ratio: 16 / 9; background: #111; object-fit: contain; }
.nandi-banner [hidden], .nandi-banner-cart-slot[hidden] { display: none !important; }
.nandi-banner-content { margin-top: .8rem; }
.nandi-banner-content > :first-child { margin-top: 0; }
.nandi-banner-content > :last-child { margin-bottom: 0; }
.nandi-banner-cta, .nandi-banner-play {
  display: inline-block; margin-top: .8rem; padding: .6rem 1rem;
  border: 0; border-radius: 6px; background: var(--nandi-upsell-accent, #426852);
  color: #fff; text-decoration: none; font: inherit; cursor: pointer; text-align: center;
}
.nandi-banner-cta:hover, .nandi-banner-cta:focus-visible, .nandi-banner-play:hover { color: #fff; filter: brightness(.93); }
.nandi-banner :focus-visible { outline: 2px solid var(--nandi-upsell-accent, #426852); outline-offset: 3px; }
.nandi-banner-youtube { position: relative; min-height: 120px; }
.nandi-banner-youtube iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.nandi-banner-youtube:has(img) .nandi-banner-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
.nandi-banner-shipping p { margin: .8rem 0 .4rem; }
.nandi-banner-shipping progress { width: 100%; height: .6rem; accent-color: var(--nandi-upsell-accent, #426852); }
.products .nandi-banner-tile, .wc-block-product-template .nandi-banner-tile, .wp-block-woocommerce-product-template .nandi-banner-tile { list-style: none; min-width: 0; }
.products .nandi-banner-tile .nandi-banner, .wc-block-product-template .nandi-banner-tile .nandi-banner, .wp-block-woocommerce-product-template .nandi-banner-tile .nandi-banner { margin: 0; height: 100%; }
.nandi-banner-cart-slot { width: 100%; clear: both; }
@media (prefers-reduced-motion: reduce) { .nandi-banner * { scroll-behavior: auto; } }
