@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap');
/* ---------- real product photo preview (their words printed on the actual product) ---------- */
.rb-photo { position: relative; display: block; overflow: hidden; height: auto !important; border-radius: var(--rb-radius-md, 20px); background: #efe4d6; box-shadow: 0 6px 0 0 rgba(43, 10, 61, 0.14); }
.rb-photo::before { content: ''; display: block; padding-top: var(--rb-pad, 100%); }
.rb-photo__img { position: absolute; top: 0; left: 0; display: block; width: 100% !important; max-width: none; height: auto !important; }
.rb-photo__box { --rb-ink: #9c7657; position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; }
.rb-photo__text { display: block; max-width: 100%; font-family: var(--rb-font-display, 'Fredoka', sans-serif); font-weight: 700; line-height: 1.02; text-align: center; overflow-wrap: anywhere; mix-blend-mode: multiply; opacity: 0.94; letter-spacing: 0.01em; }
.rb-photo__box .rb-photo__text { color: var(--rb-ink); }
.rb-preview--photo { display: flex; justify-content: center; }
.rb-studio-card__preview.rb-preview--photo { display: block; }
.rb-studio-card__preview.rb-preview--photo .rb-photo { width: 100%; box-shadow: 0 4px 0 0 rgba(43, 10, 61, 0.14); }
.rb-preview--photo.rb-preview--studio { width: 100%; max-width: 100%; }
/* the studio picture is sized from a height (--rb-h) times the photo's shape (--rb-ar), so its width is always a real number */
.rb-preview--studio .rb-photo { --rb-h: 60vh; width: calc(var(--rb-h) * var(--rb-ar, 1)); max-width: 100%; margin-inline: auto; box-shadow: 0 10px 0 0 var(--rb-plum, #2b0a3d); }
@supports (height: 1dvh) { .rb-preview--studio .rb-photo { --rb-h: min(60dvh, 64rem); } }
.rb-studio__stage:has(.rb-preview--photo) { padding-block: 2.4rem; }
@media screen and (max-width: 899px) {
  .rb-preview--studio .rb-photo { box-shadow: 0 6px 0 0 var(--rb-plum, #2b0a3d); }
}

/* script lettering for labels printed in a handwritten style (North Pole Post box): Dancing Script */
.rb-photo__box--script { overflow: visible; }
.rb-photo__box--script .rb-photo__text { font-family: 'Dancing Script', 'Brush Script MT', cursive; font-weight: 600; line-height: 1; letter-spacing: 0; white-space: nowrap; overflow-wrap: normal; opacity: 0.97; padding-inline: 0.12em; }

/* studio on phones: show the label close-up, big enough to read, and keep it readable while typing */
.rb-photo-close { display: none; }
@media screen and (max-width: 899px) {
  .rb-preview--studio .rb-photo-full { display: none; }
  .rb-preview--studio .rb-photo-close { display: block; }
  .rb-studio__stage:has(.rb-preview--photo) { max-height: 46vh; max-height: 46dvh; padding-block: 1.6rem 2rem; }
  .rb-preview--studio .rb-photo, .rb-preview--studio .rb-photo-close .rb-photo { --rb-h: 37vh; }
  .rb-studio.is-typing .rb-studio__stage:has(.rb-preview--photo) { max-height: 32vh; max-height: 32dvh; padding-block: 1rem 1.4rem; }
  .rb-studio.is-typing .rb-preview--studio .rb-photo, .rb-studio.is-typing .rb-preview--studio .rb-photo-close .rb-photo { --rb-h: 26vh; }
}

/* keep every field inside the screen (no sideways shift on phones) */
.rb-studio, .rb-studio *, .rb-studio *::before, .rb-studio *::after { box-sizing: border-box; }
.rb-studio__pane { overflow-x: hidden; }
.rb-studio .rb-input { max-width: 100%; }

/* the picture wrappers are plain blocks, so nothing can squeeze them to zero */
.rb-photo-full, .rb-photo-close { width: 100%; }
.rb-preview--photo { display: block; }