/*
 * The size chooser and the preview modal.
 *
 * The personalization's own controls are not styled here: each vendor's runtime
 * draws them from its own stylesheet (inc/vendor.php). What is left is the markup
 * this theme prints — the size pills, the preview modal, and the rule that hides a
 * vendor's own dialog while a render is taken from it.
 */

/* ---------- gallery ---------- */

/* The live mockup is the gallery's active image. The server prints `#bzp-gallery`
   before the photographs; `form.js` moves it inside `.product-images`, and these
   rules lay it over the photo rather than under it. It stays out of the flow until
   the runtime has drawn its gallery, so the photo is untouched before the first
   edit. Picking a thumbnail adds `.bzp-gallery--photo`, which puts the photo back
   until the shopper edits again. */
.product-images { position: relative; }
#bzp-gallery { position: absolute; inset: 0; z-index: 9; overflow: hidden; background: #fff; display: none; }
/* Customily draws into its own canvas, moved here by vendor-customily.js. The slot
   is revealed once that canvas exists; the vendor draws the shopper's design into
   it as soon as an option changes. */
#bzp-gallery:has(.cl-canvas-container) { display: block; }
#bzp-gallery.bzp-gallery--live { display: block; }
#bzp-gallery.bzp-gallery--photo { display: none !important; }
/* Customily draws into its own canvas container. It is moved into the slot by
   vendor-customily.js, and these rules make it fill the photo's box rather than
   keep the fixed size the vendor gave it. */
#bzp-gallery > .cl-canvas-container { position: static !important; width: 100% !important; height: auto !important; }
#bzp-gallery > .cl-canvas-container canvas { width: 100% !important; height: auto !important; }

/* ---------- personalizer ---------- */

.bzp-personalizer {
  /* Measured on the reference's own personalizer. */
  --bzp-ink: rgb(0, 0, 0);
}

.bzp-personalizer * { box-sizing: border-box; }

/* A refusal the personalizer raises is a field-level error, not WooCommerce's
   page-level notice bar: one red line at the form's own size, with a 16px mark,
   no ground and no border (1.0.139). The rule and its reason live in
   `DESIGN.md` §Notice and `NOTICES.md`; the cart's and checkout's notices keep
   the bar in `woo.css`. */
.bzp-inline-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  margin: 0 0 12px;
  color: rgb(var(--danger));
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.bzp-inline-error__icon {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
.bzp-inline-error__text { min-width: 0; }
.bzp-inline-error__text p { margin: 0; overflow-wrap: anywhere; }
.bzp-inline-error__text p + p { margin-top: 4px; }

/* The size chooser on a sized product: the reference's variant pills — the same
   measured family as the reference's own selector (2026-10-14): its
   `.form__label` for the legend, its `variant-label` for the options. */
.bzp-size { border: 0; margin: 0 0 14px; padding: 0; }
.bzp-size legend { margin: 0 0 8px; padding: 0 2px 0 0; font-size: 1.7rem; font-weight: 700; letter-spacing: .48px; line-height: 1.4167; color: var(--muted); }
.bzp-size-option { position: relative; display: inline-flex; align-items: center; height: 44px; margin: 0 12px 8px 0; padding: 0 24px; border: 1px solid var(--muted); border-radius: 4px; background: rgb(var(--color-background)); color: rgb(var(--color-foreground)); font-size: 1.5rem; font-weight: 400; letter-spacing: .1rem; cursor: pointer; }
.bzp-size-option input { position: absolute; opacity: 0; pointer-events: none; }
.bzp-size-option:has(input:checked) { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); }
.bzp-size-option:has(input:focus-visible) { outline: 2px solid rgb(var(--color-foreground)); outline-offset: 2px; }

/* The preview modal. */
.bzp-personalizer .bzp-modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 200;
}
.bzp-personalizer .bzp-modal[hidden] { display: none; }
.bzp-personalizer .bzp-modal img {
  display: block; width: 100%; height: auto; max-width: 620px;
  background: rgb(var(--color-background)); border-radius: var(--radius-plate); letter-spacing: normal;
}
/* The preview overlay's close key. Kept circular: it sits on a
   rgba(0,0,0,.55) scrim, where a circular dismiss is the convention and a 4px
   corner would read as a stray box. This is the second written exception to the
   button scale — see the list in style.css. */
.bzp-personalizer .bzp-modal-close {
  position: absolute; top: 18px; right: 18px;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgb(var(--color-background)); color: var(--bzp-ink); font-size: 22px; line-height: 1; cursor: pointer;
}

/* ---------- vendor photo control ---------- */

/* "Select Image" is the one control a photo design needs, and the vendor draws it
   as a transparent button: on the grey upload panel it reads as plain bold text.
   Give it the shop's button look so a shopper can find it. */
.customily-file-input .customily-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--fs-color-primary, #ff8831);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}
.customily-file-input .customily-download-button:hover { filter: brightness(0.95); }

/* The shop's preview key. Same weight as the add-to-cart's own key: the design
   is what the shopper came for, so the control that shows it at size should be
   as findable as the one that sells it. */
.bzp-personalizer .bzp-preview-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0 0 12px;
  padding: 10px 24px;
  border: 1px solid var(--fs-color-primary, #ff8831);
  border-radius: 999px;
  background: transparent;
  color: var(--fs-color-primary, #ff8831);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}
.bzp-personalizer .bzp-preview-button:hover {
  background: var(--fs-color-primary, #ff8831);
  color: #fff;
}