/**
 * Wrapper for iframe-embedded personalized product configurators
 * (heartbeat / signature / wedding). The design itself lives inside the iframe
 * (assets/configurators/{type}.html); here we just make the frame seamless and
 * add the floating WooCommerce add-to-cart button.
 */
.config-product { position: relative; background: #0a0605; }
.config-product .config-frame {
  display: block;
  width: 100%;
  /* A real viewport-height scroll area (NOT auto-grown to content) so the
     configurator's own fixed-position "Final preview" modal centres correctly
     over the visible area instead of the top of a very tall iframe. */
  /* dvh, not vh: on phones vh includes the browser URL-bar strip, which made
     the frame overflow the viewport and pushed the header up / the footer down
     under the mobile browser chrome. dvh tracks the *visible* height. */
  height: calc(100dvh - 84px);
  min-height: 620px;
  border: 0;
  background: #0a0605;
}

/* While the configurator's final-step preview/confirm modal is open, the frame
   takes the whole viewport and sits ABOVE the sticky header (z-50), so the
   modal centres on the full screen and can cover the header — it's a modal.
   .modal-open is toggled from product-configurator.js on the iframe's signal. */
.config-product.modal-open { position: relative; }
.config-product.modal-open .config-frame {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  z-index: 200;
}
/* keep our own floating add-to-cart out of the way while the modal is up */
.config-product.modal-open .config-float { display: none; }

.config-product .config-float {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(160%);
  z-index: 60;
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.2,0.7,0.2,1), opacity 0.45s;
}
.config-product .config-float.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.config-product .config-float .cf-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #16100a;
  background: linear-gradient(180deg, #e7c87a, #c89a44);
  padding: 16px 30px;
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  transition: transform 0.2s;
}
.config-product .config-float .cf-btn:hover { transform: translateY(-2px); }
.config-product .config-float .cf-price { font-family: 'Cormorant Garamond', serif; font-size: 18px; letter-spacing: 0; text-transform: none; }
.config-product .config-float .cf-price del { opacity: 0.6; margin-right: 6px; }
/* The pill is one line, centred — two lines made it a block on phones. */
.config-product .config-float .cf-btn { white-space: nowrap; justify-content: center; text-align: center; }