@charset "UTF-8";
/*
 * Float the host element itself so the embed participates in surrounding
 * block-flow layout. The `align` prop is reflected to the host attribute,
 * so we target it directly — avoiding `:host(:has(...))`, which Stencil's
 * scoped CSS transform mishandles and which would otherwise leak styles
 * onto the inner card div.
 */
:host {
  display: inline-block;
  vertical-align: top;
  max-width: 12rem;
}

:host([align=left]) {
  float: inline-start;
  margin-block-end: 1em;
  margin-inline-end: 1em;
  shape-outside: margin-box;
}

:host([align=right]) {
  float: inline-end;
  margin-block-end: 1em;
  margin-inline-start: 1em;
  shape-outside: margin-box;
}

:host([align=center]) {
  display: block;
  clear: both;
  margin-block: 1em;
  margin-inline: auto;
}

.s-product-card-embed-card {
  display: block;
}