/* The Pearles: final collection and studio refinements. */
.product-modal > img {
  display: block;
  width: 100%;
  height: min(78dvh, 700px);
  min-height: 0;
  padding: 16px;
  object-fit: contain;
  background: #e9eaed;
}

/* One crisp WhatsApp mark everywhere: footer, bag and order actions. */
.whatsapp-mark { display: block; width: 100%; height: 100%; }
.site-footer .whatsapp-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #25d366; color: #fff; box-shadow: 0 8px 18px rgba(37,211,102,.22); }
.site-footer .whatsapp-icon .whatsapp-mark { width: 25px; height: 25px; }
.whatsapp-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.whatsapp-button::before { content: ""; display: inline-block; width: 19px; height: 19px; flex: 0 0 19px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5A11.8 11.8 0 0 0 12.1 0C5.6 0 .3 5.3.3 11.8c0 2.1.5 4.1 1.6 5.9L.2 24l6.4-1.7a11.8 11.8 0 0 0 5.5 1.4c6.5 0 11.8-5.3 11.8-11.8 0-3.2-1.2-6.2-3.4-8.4Zm-8.4 18.2a9.8 9.8 0 0 1-5-1.4l-.4-.2-3.8 1 1-3.7-.2-.4a9.8 9.8 0 1 1 8.4 4.7Zm5.4-7.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.6.2l-.9 1.1c-.2.2-.3.2-.6.1-1.1-.5-1.9-1.1-2.6-2.1-.2-.3 0-.5.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5L10.8 8c-.2-.6-.5-.5-.7-.5h-.5c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 4.9 4.4.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5A11.8 11.8 0 0 0 12.1 0C5.6 0 .3 5.3.3 11.8c0 2.1.5 4.1 1.6 5.9L.2 24l6.4-1.7a11.8 11.8 0 0 0 5.5 1.4c6.5 0 11.8-5.3 11.8-11.8 0-3.2-1.2-6.2-3.4-8.4Zm-8.4 18.2a9.8 9.8 0 0 1-5-1.4l-.4-.2-3.8 1 1-3.7-.2-.4a9.8 9.8 0 1 1 8.4 4.7Zm5.4-7.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.6.2l-.9 1.1c-.2.2-.3.2-.6.1-1.1-.5-1.9-1.1-2.6-2.1-.2-.3 0-.5.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5L10.8 8c-.2-.6-.5-.5-.7-.5h-.5c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 4.9 4.4.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.whatsapp-button > svg { display: none; }

.site-footer {
  display: block;
  padding: 48px clamp(22px, 5vw, 64px) 24px;
  background: #0e1014;
  color: #f5f5f3;
  text-align: left;
}
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 42px;
}
.site-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-mark {
  display: grid;
  width: 62px;
  height: 62px;
  flex: none;
  overflow: hidden;
  place-items: center;
  border-radius: 16px;
  background: #d9dce4;
}
.site-footer .footer-brand img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.site-footer .footer-brand strong {
  display: block;
  color: #fff;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
}
.site-footer .footer-tagline {
  margin-top: 8px;
  color: #b9bcc5;
  font-size: .9rem;
}
.site-footer .footer-note {
  max-width: 280px;
  margin: 10px 0 0;
  color: #7f8490;
  font-size: .78rem;
  line-height: 1.5;
}
.footer-contact > span {
  display: block;
  margin-bottom: 12px;
  color: #aeb3bf;
  font-size: .73rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.site-footer .footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 10px;
}
.site-footer .footer-links a {
  display: grid;
  min-height: 68px;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 9px;
  border: 1px solid #343840;
  border-radius: 16px;
  color: #f5f5f3;
  font-size: .85rem;
  text-decoration: none;
  transition: border-color .2s, background .2s, transform .2s;
}
.site-footer .footer-links a:hover {
  transform: translateY(-2px);
  border-color: #8a8f9a;
  background: #1d2027;
}
.footer-social-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: none;
  place-items: center;
  border-radius: 50%;
}
.site-footer .footer-contact-card strong,
.site-footer .footer-contact-card small { display: block; }
.site-footer .footer-contact-card strong { font-size: .82rem; font-weight: 650; }
.site-footer .footer-contact-card small { margin-top: 3px; color: #9da2ad; font-size: .7rem; }
.site-footer .footer-contact-card > b { color: #aeb3bf; font-size: 1rem; font-weight: 400; }
.site-footer .footer-links svg {
  width: 23px;
  height: 23px;
}
.whatsapp-icon { background: #237e61; color: #fff; }
.instagram-icon { background: #38313f; color: #fff; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid #34373e;
}
.site-footer .footer-bottom small {
  color: #9da2ad;
  font-size: .79rem;
}
.footer-bottom a { color: #c7cbd3; font-size: .82rem; text-decoration: none; }
.footer-bottom a:hover { color: #fff; text-decoration: underline; }

/* Atlas cells are portrait, so both the live canvas and its CSS box must stay portrait. */
.bouquet-composer .bouquet-flower {
  width: 28%;
  aspect-ratio: 3 / 4;
}
.bouquet-composer.material-ribbon .composed-flowers { inset: 0; }
.bouquet-composer.material-ribbon .bouquet-flower { width: 24%; }
.bouquet-composer.material-ribbon.size-large .bouquet-flower { width: 22%; }
.bouquet-composer.material-ribbon.size-extra .bouquet-flower { width: 20%; }
.bouquet-composer.material-chenille.size-large .bouquet-flower { width: 25%; }
.bouquet-composer.material-chenille.size-extra .bouquet-flower { width: 22%; }
.bouquet-composer .wrap-sprite {
  right: 14%;
  bottom: -2%;
  left: 14%;
  height: 70%;
}
.bouquet-composer .wrap-back { z-index: 5; }
.studio-tabs { grid-template-columns: repeat(3, 1fr); }
.wrap-card-image {
  height: auto;
  aspect-ratio: 3 / 4;
  background-color: #edf0f4;
  background-size: calc(var(--sprite-columns) * 102%) calc(var(--sprite-rows) * 102%);
}
.order-details[hidden],
.preview-unavailable[hidden] { display: none !important; }
.order-details {
  margin-top: 36px;
  padding-top: 34px;
  border-top: 1px solid #d9dadd;
}
.review-details-form { margin: 22px 0 30px; }
.preview-unavailable {
  margin: 22px 0;
  padding: 18px;
  border: 1px solid #d8dbe1;
  border-radius: 14px;
  color: #555b65;
  line-height: 1.55;
  background: #f2f3f5;
}
.flower-sprite { background: none; }
.flower-library-main { grid-template-columns: 62px minmax(0, 1fr) auto; }
.library-sprite {
  display: block;
  width: 62px;
  height: 82px;
  border-radius: 10px;
  object-fit: contain;
  background: #eef0f4;
}
.flower-library-main > span:not(.flower-sprite) { min-width: 0; }
.flower-library-copy { display: grid; gap: 4px; }
.flower-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.flower-name-row b { min-width: 0; overflow-wrap: anywhere; }
.flower-unit-price { flex: 0 0 auto; color: #2a2d34; font-size: .78rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.flower-add-button { flex: none; }

.final-preview-frame {
  width: min(76vw, 430px);
  aspect-ratio: 4 / 5;
}
.final-preview-frame canvas,
.final-preview-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 24px;
  background: #d7dce4;
  box-shadow: 0 24px 50px rgba(34, 38, 48, .22);
}
.final-preview-frame [hidden] { display: none !important; }
.generation-panel {
  display: grid;
  gap: 16px;
  margin: 0 0 30px;
  padding: 23px;
  border-radius: 18px;
  background: #20242d;
  color: #fff;
}
.generation-panel[hidden] { display: none !important; }
.generation-panel .eyebrow { color: #bfc7d6; }
.generation-panel h3 {
  margin: 5px 0 8px;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.1;
}
.generation-panel p { margin: 0; color: #d2d7df; font-size: .9rem; line-height: 1.55; }
.generation-panel .button {
  justify-self: start;
  min-width: min(100%, 230px);
  background: #fff;
  border-color: #fff;
  color: #20242d;
}
.generation-panel .button:disabled { cursor: wait; opacity: .62; }
.generation-panel .button[hidden] { display: none !important; }
.generation-panel #generation-status { min-height: 1.4em; color: #c2c9d5; font-size: .82rem; }

@media (max-width: 700px) {
  .product-modal > img {
    height: min(62dvh, 600px);
    padding: 11px;
  }
  .footer-top { flex-direction: column; gap: 34px; padding-bottom: 32px; }
  .site-footer .footer-links { grid-template-columns: 1fr; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 9px; }
  .bouquet-composer .bouquet-flower { width: 30%; }
  .bouquet-composer.size-large .bouquet-flower { width: 26%; }
  .bouquet-composer.size-extra .bouquet-flower { width: 23%; }
  .flower-library-main { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .library-sprite { width: 52px; height: 70px; }
  .final-preview-frame { width: min(88vw, 390px); }
  .final-preview-frame canvas,
  .final-preview-frame img { border-radius: 18px; }
  .generation-panel { padding: 19px; }
  .generation-panel .button { width: 100%; justify-self: stretch; }
}

@media (max-width: 620px) {
  .studio-choice-grid.sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flower-library { grid-template-columns: 1fr; }
  .flower-library-main { grid-template-columns: 64px minmax(0, 1fr) 38px; gap: 13px; padding: 12px; }
  .flower-library-main b { font-size: 1rem; }
  .flower-library-main small { font-size: .74rem; }
  .library-sprite { width: 64px; height: 86px; }
  .flower-add-button { min-width: 38px; min-height: 38px; }
  .color-row button { width: 33px; height: 33px; }
  .flower-controls .quantity-control button { width: 38px; height: 38px; }
  .wrap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wrap-showcase { padding: 12px; border-radius: 18px; }
  .wrap-showcase-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
}

.wrap-showcase {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid #e0e2e6;
  border-radius: 22px;
  background: #f5f6f7;
}
.wrap-showcase-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.wrap-showcase-heading strong { color: #2a2d34; font-size: .82rem; letter-spacing: .04em; }
.wrap-showcase-heading span { color: #7c828c; font-size: .7rem; }
.wrap-showcase .wrap-grid { margin-top: 0; }

/* Use the studio's real wrapper photography in the finish selector. */
.wrap-card {
  overflow: hidden;
  padding: 0;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wrap-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(35, 39, 47, .1); }
.wrap-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  margin: 0;
  border-radius: 0;
  background-image: url('assets/studio/wraps-atlas.png');
  background-position: var(--wrap-x) var(--wrap-y);
  background-repeat: no-repeat;
  background-size: 300% var(--wrap-size-y, 174%);
  background-color: #edf0f4;
}
.wrap-card-copy { display: block; padding: 12px 12px 15px; }
.wrap-card-copy b,
.wrap-card-copy small { display: block; }
.wrap-card-copy b { padding-right: 24px; }
.wrap-card-copy small { margin-top: 4px; }
.wrap-card.active { border-color: #20242a; box-shadow: 0 0 0 2px #20242a, 0 12px 24px rgba(35, 39, 47, .12); }
.wrap-card.active:after { top: 10px; right: 10px; }

.site-footer .footer-social-icon {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 6px 14px rgba(0,0,0,.14);
}
.site-footer .footer-social-icon svg { width: 22px; height: 22px; }
.site-footer .whatsapp-icon { background: #1f7a5b; }
.site-footer .instagram-icon { background: linear-gradient(145deg, #5d3c68, #b2526e 58%, #d59a55); }
.site-footer .footer-contact-card > b { font-size: 1.15rem; }

@media (max-width: 620px) {
  .wrap-card-image { aspect-ratio: 1 / 1.04; }
  .wrap-card-copy { padding: 10px 9px 12px; }
  .wrap-card-copy b { font-size: .82rem; }
}

.wrap-card-photo {
  object-fit: contain;
  padding: 8px;
  background: #edf0f4;
}

.final-preview-frame { position: relative; }
.generated-concept-notice {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  left: 12px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 12px;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  background: rgba(20,23,29,.78);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.generated-concept-notice[hidden] { display: none !important; }

.studio-price-estimate {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid #cfd5dd;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(34, 38, 48, .08);
  overflow-wrap: anywhere;
}
.studio-estimate-label { color: #737a84; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.studio-price-estimate strong { color: #14513d; font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.1; text-align: right; }

@media (max-width: 620px) {
  .flower-name-row { align-items: flex-start; flex-direction: column; gap: 3px; }
  .flower-unit-price { font-size: .74rem; }
  .studio-price-estimate { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 12px; padding: 16px; }
  .studio-price-estimate strong { text-align: left; }
}

.admin-tabs { overflow-x: auto; }
.studio-upload-guide {
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px solid #d9dde3;
  border-radius: 17px;
  background: #f5f6f7;
}
.studio-upload-guide strong { display: block; margin-bottom: 6px; }
.studio-upload-guide p { max-width: 900px; margin: 0; color: #606772; font-size: .84rem; line-height: 1.6; }
.studio-admin-list { display: grid; gap: 20px; }
.studio-admin-style {
  overflow: hidden;
  border: 1px solid #dfe2e7;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(35,39,47,.06);
}
.studio-admin-style-head {
  display: grid;
  grid-template-columns: 112px minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid #e5e7eb;
}
.studio-admin-style-head > img { width: 112px; height: 98px; object-fit: cover; border-radius: 14px; background: #eef0f3; }
.studio-admin-style-head h2 { margin: 4px 0; font-family: var(--serif); font-size: 1.55rem; font-weight: 500; }
.studio-admin-style-head p { margin: 0 0 5px; color: #616873; font-size: .8rem; }
.studio-admin-style-head small { color: #8a9099; font-size: .7rem; }
.studio-admin-description { min-width: 0; overflow-wrap: anywhere; }
.admin-status { color: #846321; font-size: .65rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.admin-status.is-live { color: #2b6b52; }
.studio-reference-section { padding: 18px; border-bottom: 1px solid #e5e7eb; }
.studio-reference-section h3 { margin: 0; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }
.studio-reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.studio-reference-card { display: grid; min-width: 0; gap: 8px; padding: 10px; border: 1px solid #e3e5e9; border-radius: 14px; background: #fafafa; font-size: .72rem; overflow-wrap: anywhere; }
.studio-reference-card > label { display: grid; gap: 4px; min-width: 0; }
.studio-reference-preview { display: grid; width: 100%; aspect-ratio: 4 / 3; max-height: 180px; object-fit: contain; place-items: center; border: 1px solid #e0e3e8; border-radius: 10px; background: #f0f2f5; }
.studio-reference-empty { color: #737a84; font-size: .68rem; }
.studio-admin-columns { display: grid; grid-template-columns: 1.25fr .75fr; gap: 0; }
.studio-admin-columns > section { min-width: 0; padding: 18px; }
.studio-admin-columns > section + section { border-left: 1px solid #e5e7eb; }
.studio-admin-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.studio-admin-subhead span { display: block; font-weight: 750; }
.studio-admin-subhead small { display: block; margin-top: 3px; color: #858b94; font-size: .68rem; }
.studio-admin-subhead button { padding: 8px 10px; border: 1px solid #ccd1d8; border-radius: 10px; background: #fff; font-size: .7rem; font-weight: 700; }
.studio-admin-items { display: grid; gap: 9px; }
.studio-admin-items > article { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 10px; border: 1px solid #e3e5e9; border-radius: 14px; background: #fafafa; }
.studio-admin-items > article > img { width: 58px; height: 58px; object-fit: contain; border-radius: 10px; background: #eef0f3; }
.studio-admin-items strong,
.studio-admin-items small { display: block; }
.studio-admin-items small { margin-top: 3px; color: #737a84; font-size: .66rem; line-height: 1.4; }
.admin-colour-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.admin-colour-list > span,
.add-colour-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 3px 6px; border: 1px solid #d7dae0; border-radius: 20px; color: #535964; background: #fff; font-size: .62rem; }
.admin-colour-list i { width: 14px; height: 14px; border: 1px solid rgba(0,0,0,.12); border-radius: 50%; background: var(--admin-colour); }
.admin-colour-list button { padding: 1px 3px; border: 0; color: #737983; background: transparent; font-size: .58rem; }
.add-colour-chip { font-weight: 700; }
.admin-empty.compact { padding: 16px; font-size: .75rem; }
.studio-admin-form .form-help { margin: 3px 0 12px; color: #737a84; font-size: .72rem; line-height: 1.5; }
.studio-form-preview { width: 100%; max-height: 210px; object-fit: contain; border: 1px solid #e0e3e8; border-radius: 14px; background: #f0f2f5; }
.remove-image { color: #8f3434; font-size: .76rem; }

@media (max-width: 860px) {
  .studio-admin-columns { grid-template-columns: 1fr; }
  .studio-admin-columns > section + section { border-top: 1px solid #e5e7eb; border-left: 0; }
  .studio-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .studio-admin-style-head { grid-template-columns: 74px minmax(0,1fr); }
  .studio-admin-style-head > img { width: 74px; height: 74px; }
  .studio-admin-style-head > .admin-row-actions { grid-column: 1 / -1; }
  .studio-admin-items > article { grid-template-columns: 48px minmax(0,1fr); }
  .studio-admin-items > article > img { width: 48px; height: 48px; }
  .studio-admin-items > article > .admin-row-actions { grid-column: 1 / -1; }
  .studio-reference-grid { grid-template-columns: 1fr; }
  .studio-admin-actions { flex-direction: column; align-items: stretch; }
  .studio-admin-actions button { width: 100%; }
}

/* Final responsive guardrails and one inline WhatsApp mark for every action. */
.studio-workbench,
.studio-preview-column,
.studio-controls,
.studio-panel,
.review-page,
.review-visual,
.review-copy,
.generation-panel,
.order-decision,
.order-details,
.review-actions { min-width: 0; }
.review-intro,
.generation-panel p,
.order-decision p,
.order-details,
.studio-admin-description,
.wrap-card-copy,
.studio-reference-card { overflow-wrap: anywhere; }
.review-actions { width: 100%; }
.review-actions .button,
.order-decision .button,
.whatsapp-button { min-width: 0; }
.whatsapp-button::before { display: none; }
.whatsapp-button > .whatsapp-mark {
  display: block;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}
.whatsapp-text-link { display: inline-flex; align-items: center; gap: 8px; }
.whatsapp-text-link .whatsapp-mark { width: 18px; height: 18px; flex: 0 0 18px; }

@media (max-width: 620px) {
  .review-actions { grid-template-columns: 1fr; }
  .review-actions .ghost { grid-column: auto; }
  .review-actions .button { width: 100%; }
  .order-decision { padding: 20px; }
  .order-decision .button,
  .order-decision .text-link { width: 100%; justify-self: stretch; text-align: center; }
  .studio-admin-subhead { align-items: stretch; flex-direction: column; }
  .studio-admin-subhead button { width: 100%; }
  .studio-final-action { max-width: calc(100% - 20px); }
}

/* Keep the live count and price together after the customer starts choosing. */
.studio-live-meta { width: min(100%, 440px); }
.studio-live-meta .composer-summary > strong { grid-row: 1; }
.studio-live-meta .composer-summary { margin-bottom: 12px; }
.studio-price-count { display: grid; grid-template-columns: minmax(96px, .62fr) minmax(0, 1.8fr); gap: 12px; align-items: stretch; }
.studio-count-meter { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 15px; border: 1px solid #cfd5dd; border-radius: 16px; background: #f7f8f9; }
.studio-count-meter strong { color: #2a2d34; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; line-height: 1.05; }
.studio-count-meter span { margin-top: 5px; color: #737a84; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.studio-price-count .studio-price-estimate { margin-top: 0; }
.wrap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wrap-card-name { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wrap-card-name b { min-width: 0; padding-right: 0; overflow-wrap: anywhere; }
.wrap-card-price { flex: 0 0 auto; color: #14513d; font-size: .76rem; font-weight: 750; white-space: nowrap; }

@media (max-width: 620px) {
  .studio-live-meta { width: min(100%, 390px); }
  .studio-price-count { grid-template-columns: minmax(84px, .7fr) minmax(0, 1.6fr); gap: 8px; }
  .studio-count-meter { padding: 12px 10px; }
  .studio-count-meter strong { font-size: 1rem; }
  .studio-count-meter span { font-size: .62rem; }
  .wrap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wrap-card-price { font-size: .68rem; }
}