/* Customily inline personaliser (js/customily-inline.js): the parts that are Customily's or the
   SDK's, plus the package chooser. The dialog frame and the ornament cards use Jolly's .pm / .oc
   classes (css/jolly/components.css, css/checkout-jolly.css). */

/* The SDK slot stage stays in the DOM, exactly as the SDK renders it, and out of sight: its
   data-next-property inputs are what carry each design onto its cart line. */
#bundle-slots-stage { display:none; }
/* Technical line properties never show in the order summary. */
[data-next-item-properties] { display:none!important; }

/* Customily's viewer holds the live preview and the form; its height is set from the viewer's own report. */
#customily-options { display:block; width:100%; max-width:100%; height:560px; border:0; }

.cz-dialog { width:calc(100% - 32px); max-width:460px; max-height:85vh; overflow:auto; border:0; border-radius:16px; padding:20px; font-family:var(--font-body, system-ui, sans-serif); color:var(--color-text-primary, #1d1916); box-shadow:0 24px 64px rgba(0,0,0,.3); }
.cz-dialog::backdrop { background:rgba(29,25,22,.62); }
.cz-dialog__title { margin:0 0 8px; font:400 22px/1.2 var(--font-heading, Georgia, serif); }
.cz-dialog label { display:flex; align-items:center; gap:12px; margin:12px 0; font-weight:600; cursor:pointer; }
.cz-dialog input { width:18px; height:18px; accent-color:var(--color-brand-primary, #a22d2b); }
.cz-dialog img { width:64px; height:64px; margin-left:auto; object-fit:contain; border-radius:8px; }
.cz-dialog__actions { display:flex; justify-content:flex-end; gap:12px; margin-top:16px; }
.cz-dialog button:focus-visible, .cz-dialog input:focus-visible { outline:2px solid var(--color-brand-primary, #a22d2b); outline-offset:2px; }

@media (max-width:640px) {
  #customily-options { height:640px; }
}