/* roundbox launch: square product images, studio fixes for phones, instant-add pairs, elf range, group orders, FAQ */

/* ---------- every product image shown as a square (1000 x 1000 photos fill it exactly) ---------- */
.product__media-item .product__media.media { padding-top: 100% !important; }
.product__media-item .product__media.media img { object-fit: contain; }
.card__media .media img, .card .media img { object-fit: contain; }

/* ---------- personalise studio on phones ---------- */
.rb-studio { height: 100vh; height: 100dvh; bottom: auto; overscroll-behavior: contain; }
.rb-studio__pane { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.rb-studio-lock .rb-sticky { display: none !important; }
@media screen and (max-width: 899px) {
  .rb-studio__stage { max-height: 38dvh; }
  .rb-preview--studio .rb-photo { height: min(32dvh, 30rem); }
  /* while typing, shrink the picture so the field and keyboard both fit */
  .rb-studio.is-typing .rb-studio__stage { max-height: 22dvh; padding-top: 1rem; padding-bottom: 1.2rem; }
  .rb-studio.is-typing .rb-preview--studio .rb-photo { height: min(19dvh, 18rem); }
  .rb-studio.is-typing .rb-preview--studio .rb-preview__card { min-height: 0; padding: 1.2rem; }
  .rb-studio__actions .button { min-height: 4.8rem; }
}

/* ---------- "pairs perfectly with": add straight to the basket ---------- */
.rb-pair { cursor: default; grid-template-columns: 5.6rem minmax(0, 1fr) auto; }
.rb-pair:hover { box-shadow: none; }
.rb-pair__info { display: grid; gap: 0.2rem; min-width: 0; }
.rb-pair__variant { margin-top: 0.4rem; max-width: 100%; font: inherit; font-size: 1.4rem; padding: 0.6rem 0.8rem; border-radius: 0.8rem; border: 2px solid var(--rb-lilac, #f1ddfb); background: #fff; color: var(--rb-ink, #2b0a3d); }
.rb-pair__add { min-height: 4.4rem; padding: 0 1.6rem; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 1.4rem; background: var(--rb-grape, #ae2ddd); color: #fff; box-shadow: 0 3px 0 0 var(--rb-plum, #2b0a3d); white-space: nowrap; }
.rb-pair__add[disabled] { opacity: 0.6; cursor: wait; }
.rb-pair__add.is-added { background: var(--rb-mint, #5ed6a8); color: var(--rb-plum, #2b0a3d); }
.rb-pair__note { margin: 0; font-size: 1.2rem; color: var(--rb-ink-muted, #5e3f73); }

/* ---------- elf range / landing soon ---------- */
.rb-shop__header { max-width: 64rem; margin-bottom: 2.8rem; }
.rb-shop__text { margin-top: 0.8rem; font-size: 1.6rem; }
.rb-shop__buttons { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.4rem; }
.rb-soon { display: grid; gap: 2.4rem; align-items: center; padding: 3.2rem; border-radius: var(--rb-radius-lg, 32px); background: #fff; box-shadow: 0 8px 0 0 var(--rb-plum, #2b0a3d), inset 0 0 0 2px var(--rb-lilac, #f1ddfb); }
.rb-soon__disc { width: 12rem; height: 12rem; border-radius: 50%; display: grid; place-items: center; background: var(--rb-sunshine, #f5d021); color: var(--rb-plum, #2b0a3d); transform: rotate(-6deg); font-family: var(--rb-font-display, 'Fredoka', sans-serif); font-weight: 700; font-size: 3rem; box-shadow: 0 6px 0 0 var(--rb-plum, #2b0a3d); }
.rb-soon__title { margin: 0 0 0.8rem; font-family: var(--rb-font-display, 'Fredoka', sans-serif); font-weight: 700; font-size: 2.8rem; line-height: 1.15; color: var(--rb-ink, #2b0a3d); }
.rb-soon .rte { font-size: 1.6rem; max-width: 56rem; }
.rb-soon .rb-shop__buttons { margin-top: 1.6rem; }
@media screen and (min-width: 750px) {
  .rb-soon { grid-template-columns: auto 1fr; padding: 4rem 4.8rem; gap: 4rem; }
  .rb-soon__disc { width: 16rem; height: 16rem; font-size: 4rem; }
  .rb-soon__title { font-size: 3.4rem; }
}

/* ---------- schools, nurseries and group orders ---------- */
.rb-bulk__card { display: grid; gap: 2.4rem; align-items: center; padding: 3.2rem 2.4rem; border-radius: var(--rb-radius-lg, 32px); background: var(--rb-plum, #2b0a3d); color: #fff; box-shadow: 0 8px 0 0 var(--rb-grape, #ae2ddd); }
.rb-bulk__card .rb-eyebrow { color: var(--rb-sunshine, #f5d021); }
.rb-bulk__title { margin: 0; font-family: var(--rb-font-display, 'Fredoka', sans-serif); font-weight: 700; font-size: 3.2rem; line-height: 1.1; color: #fff; }
.rb-bulk__text { margin-top: 1rem; font-size: 1.7rem; color: rgba(255, 255, 255, 0.88); }
.rb-bulk__text p { margin: 0; }
.rb-bulk__points { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1rem; }
.rb-bulk__points li { display: flex; gap: 1.2rem; align-items: flex-start; font-weight: 800; font-size: 1.6rem; }
.rb-bulk__points li::before { content: ''; flex: 0 0 1.4rem; height: 1.4rem; margin-top: 0.4rem; border-radius: 50%; background: var(--rb-sunshine, #f5d021); }
.rb-bulk__actions { display: grid; gap: 1rem; justify-items: start; }
.rb-bulk__button { min-height: 5.6rem; padding: 0 3.2rem; font-size: 1.8rem; background: var(--rb-sunshine, #f5d021) !important; color: var(--rb-plum, #2b0a3d) !important; --color-button: 245, 208, 33; --color-button-text: 43, 10, 61; }
.rb-bulk__small { margin: 0; font-size: 1.3rem; color: rgba(255, 255, 255, 0.8); max-width: 30rem; }
@media screen and (min-width: 750px) {
  .rb-bulk__card { grid-template-columns: 1fr auto; padding: 4.8rem 5.6rem; gap: 4.8rem; }
  .rb-bulk__title { font-size: 4.4rem; }
  .rb-bulk__actions { justify-items: center; text-align: center; }
}

/* ---------- elf questions ---------- */
.rb-faq__list { display: grid; gap: 1.2rem; margin-top: 2.4rem; }
.rb-faq__item { border-radius: var(--rb-radius-md, 20px); background: #fff; box-shadow: inset 0 0 0 2px var(--rb-lilac, #f1ddfb); }
.rb-faq__q { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.6rem; align-items: center; padding: 1.8rem 2rem; font-family: var(--rb-font-display, 'Fredoka', sans-serif); font-weight: 600; font-size: 1.8rem; color: var(--rb-ink, #2b0a3d); }
.rb-faq__q::-webkit-details-marker { display: none; }
.rb-faq__q::after { content: '+'; flex: 0 0 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--rb-lilac, #f1ddfb); font-size: 2rem; line-height: 1; }
.rb-faq__item[open] .rb-faq__q::after { content: '\2013'; background: var(--rb-sunshine, #f5d021); }
.rb-faq__a { padding: 0 2rem 1.8rem; font-size: 1.6rem; }
.rb-faq__a p:first-child { margin-top: 0; }
.rb-faq__a p:last-child { margin-bottom: 0; }
.rb-faq__small { margin: 2rem 0 0; font-size: 1.2rem; color: var(--rb-ink-muted, #5e3f73); }

/* drop-downs: undo Dawn's fixed 4.5rem height and extra borders so the words aren't cut off */
.rb-field .select:before, .rb-field .select:after { content: none !important; display: none !important; }
.rb-field select.rb-input.select__select {
  height: auto; min-height: 5rem; margin: 0; line-height: 1.4;
  padding: 1.2rem 4rem 1.2rem 1.4rem; box-shadow: none; outline-offset: 2px;
  border: 2px solid var(--rb-border); border-radius: var(--rb-radius-sm);
  background: var(--rb-cream); color: var(--rb-ink); font-size: 1.6rem;
}
.rb-field select.rb-input.select__select:hover, .rb-field select.rb-input.select__select:focus { border-color: var(--rb-grape); box-shadow: none; }
.rb-field select.rb-input.select__select:focus { background: #fff; }

/* product cards: no range label over the photo (it stays in the text below) */
.card__inner .rb-card-range { display: none !important; }