.configux-cloud-product {
  position: relative;
  clear: both;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 1.5rem;
  overflow: hidden;
}

/* The checkout template does not use WooCommerce's cart thumbnail filter.
   Show the verified per-configuration preview and hide only this line's
   product-level fallback image supplied by the active shop theme. */
.woocommerce-checkout tr.configux-checkout-preview-line .product-item-thumbnail {
  display: none;
}

.woocommerce-checkout .configux-checkout-preview {
  display: inline-block;
  width: 64px;
  height: 64px;
  margin: 8px 8px 8px 0;
  vertical-align: middle;
}

.woocommerce-checkout .configux-checkout-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* The first paint belongs to the shop, not to connector diagnostics. A small
   neutral indicator covers the surface until the verified first selection is
   received. Poster imagery inside the Player can then take over naturally. */
.configux-cloud-loader {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f7f8fb;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.configux-cloud-loader span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #111111;
  animation: configux-cloud-loader-dot 900ms ease-in-out infinite;
}

.configux-cloud-loader span:nth-child(2) { animation-delay: 120ms; }
.configux-cloud-loader span:nth-child(3) { animation-delay: 240ms; }

@keyframes configux-cloud-loader-dot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

.configux-cloud-product[data-ready="true"] .configux-cloud-loader {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .configux-cloud-loader span { animation: none; opacity: .65; }
}

/* Hide the native WooCommerce submit controls on the server-rendered first
   paint whenever Builder owns the customer action. JavaScript reinforces this
   after hydration, but the initial frame can no longer flash a huge button. */
body.configux-presentation-standalone_fullscreen .configux-cloud-product[data-primary-action="true"] ~ .quantity,
body.configux-presentation-standalone_fullscreen .configux-cloud-product[data-primary-action="true"] ~ button[type="submit"],
body.configux-presentation-standalone_fullscreen .configux-cloud-product[data-primary-action="true"] ~ .single_add_to_cart_button,
body.configux-presentation-woocommerce_split .configux-cloud-product[data-primary-action="true"] ~ .quantity,
body.configux-presentation-woocommerce_split .configux-cloud-product[data-primary-action="true"] ~ button[type="submit"],
body.configux-presentation-woocommerce_split .configux-cloud-product[data-primary-action="true"] ~ .single_add_to_cart_button,
body.configux-presentation-site_framed .configux-cloud-product[data-primary-action="true"] ~ .quantity,
body.configux-presentation-site_framed .configux-cloud-product[data-primary-action="true"] ~ button[type="submit"],
body.configux-presentation-site_framed .configux-cloud-product[data-primary-action="true"] ~ .single_add_to_cart_button {
  display: none !important;
}

.configux-cloud-player {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 720px;
  box-sizing: border-box;
  border: 1px solid #dfe4ee;
  border-radius: 16px;
  background: #f7f8fb;
}

.configux-cloud-status {
  margin: .75rem 0 0;
  color: #596275;
  font-size: .875rem;
}

.configux-cloud-product[data-ready="true"] .configux-cloud-status {
  color: #125c47;
}

@media (max-width: 720px) {
  .configux-cloud-product {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }

  .configux-cloud-player {
    width: 100%;
    max-width: 100%;
    min-height: 920px;
    border-radius: 12px;
  }
}

/* Block 28WP-2: binding-owned presentation modes (review 15R).
   Presentation never alters canonical selections, the server price or
   package integrity - these rules only move and hide chrome. */

/* standalone_fullscreen: ConfigUX owns the viewport; the WooCommerce cart
   form is the fullscreen surface so the verified add-to-cart stays inside.
   The final browser layers stay reserved for host-owned commerce overlays,
   such as the shop's native mini-cart/drawer, and for the WordPress toolbar. */
html.configux-presentation-standalone_fullscreen {
  --configux-wordpress-top-offset: 0px;
}

html.configux-presentation-standalone_fullscreen,
html.configux-presentation-standalone_fullscreen body {
  width: 100%;
  height: 100%;
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.configux-presentation-standalone_fullscreen #wpadminbar {
  z-index: 2147483647 !important;
}

body.configux-presentation-standalone_fullscreen form.cart {
  position: fixed;
  top: var(--configux-wordpress-top-offset, 0px);
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 2147482000;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: calc(100dvh - var(--configux-wordpress-top-offset, 0px));
  margin: 0;
  padding: 0;
  background: #ffffff;
  overflow: hidden;
}

body.configux-presentation-standalone_fullscreen .configux-cloud-product {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* NAT-15: standalone_fullscreen is the presentation used by the Visualbuy
   pilot. It must expose the exact Player canvas without connector chrome. */
body.configux-presentation-standalone_fullscreen div.product form.cart {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.configux-presentation-standalone_fullscreen .configux-cloud-player {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none !important;
}

/* Runway BYG-29: in fullscreen presentation the direct embed fills the whole
   form surface - the height travels into the shadow via a custom property. */
body.configux-presentation-standalone_fullscreen .configux-cloud-player.is-direct {
  --configux-embed-height: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

body.configux-presentation-standalone_fullscreen .woocommerce-product-gallery,
body.configux-presentation-standalone_fullscreen .product_title,
body.configux-presentation-standalone_fullscreen .summary > .price,
body.configux-presentation-standalone_fullscreen .woocommerce-product-details__short-description,
body.configux-presentation-standalone_fullscreen .woocommerce-tabs,
body.configux-presentation-standalone_fullscreen .related.products {
  display: none;
}

/* woocommerce_split: the viewer replaces the theme gallery; ConfigUX choices
   and price replace the summary price and description while the title stays. */
body.configux-presentation-woocommerce_split .woocommerce-product-gallery,
body.configux-presentation-woocommerce_split .summary > .price,
body.configux-presentation-woocommerce_split .woocommerce-product-details__short-description {
  display: none;
}

body.configux-presentation-woocommerce_split .configux-cloud-product {
  margin-top: 0;
}

/* site_framed: a bounded placement inside the site chrome. The connector
   deliberately adds no visual frame of its own, so the exact same Player
   surface is shown here and on player.configux.com. */
body.configux-presentation-site_framed .woocommerce-product-gallery,
body.configux-presentation-site_framed .product_title,
body.configux-presentation-site_framed .summary > .price,
body.configux-presentation-site_framed .woocommerce-product-details__short-description,
body.configux-presentation-site_framed .product_meta,
body.configux-presentation-site_framed .woocommerce-tabs,
body.configux-presentation-site_framed .related.products {
  display: none;
}

body.configux-presentation-site_framed div.product div.summary,
body.configux-presentation-site_framed form.cart {
  float: none;
  width: 100%;
  max-width: 100%;
}

/* NAT-14: site_framed must render the exact Player surface. Theme-owned
   WooCommerce cart chrome is deliberately neutralised only in this mode. */
body.configux-presentation-site_framed div.product form.cart {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.configux-presentation-site_framed .configux-cloud-product {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.configux-presentation-site_framed .configux-cloud-player {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none !important;
}

/* embedded: the unchanged 15-series pilot layout; no extra rules. */

/* Runway BYG-26/28: the direct embed sizes itself from its shadow layout.
   The shadow shell draws its own frame, so the host element has no chrome,
   no minimum height and no background at any breakpoint. */
.configux-cloud-player.is-direct,
body .configux-cloud-player.is-direct {
  height: auto;
  min-height: 0;
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
}