.premade-messages {
  margin-top: 12px;
  border: 1px solid var(--line);
  background: #fcfbf8;
}

.premade-messages summary {
  padding: 10px 12px;
  color: #665740;
  font-size: 11px;
  cursor: pointer;
}

.premade-message-picker {
  padding: 4px 12px 12px;
}

.premade-message-picker select,
.personality-card-picker select {
  width: 100%;
  margin: 4px 0 8px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  background: #fffdf9;
  color: var(--ink);
  font: 11px var(--sans);
}

.message-example {
  padding: 10px;
  border-left: 2px solid #c8b79a;
  background: var(--sand);
  font: 14px/1.45 var(--serif);
}

.premade-message-picker button {
  margin: 8px 0 4px;
  padding: 5px 0;
  color: #665740;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 11px;
}

.personality-card-section legend .optional {
  align-self: center;
  font: 9px var(--sans);
}

.personality-card-picker {
  clear: both;
  padding-top: 8px;
}

.personality-card-example {
  display: flex;
  align-items: center;
  gap: 10px;
}

.personality-card-example img {
  width: 67px;
  height: auto;
  border: 1px solid #dfd3bc;
}

.note-card.handwritten .card-words p {
  line-height: 1.28;
  letter-spacing: normal;
  font-variant-ligatures: common-ligatures;
}

.gift-extra-card {
  position: absolute;
  left: 8%;
  top: 68%;
  width: 29%;
  margin: 0;
  transform: rotate(-7deg);
  filter: drop-shadow(3px 8px 8px #6c583543);
  z-index: 2;
}

.gift-extra-card img {
  width: 100%;
  height: auto;
}

.gift-scene[data-personality-card='true'][data-view='gift'] .jewelry-photo {
  left: 5%;
  top: 13%;
  width: 45%;
}

.gift-scene[data-personality-card='true'][data-view='gift'] .note-card {
  width: 35%;
  right: 7%;
  top: 34%;
}

.gift-scene[data-view='note'] .gift-extra-card {
  opacity: .2;
  transform: translateX(-23%) rotate(-12deg);
  z-index: 0;
}

.gift-scene[data-view='personality'] .gift-extra-card {
  width: 73%;
  left: 13.5%;
  top: 20%;
  transform: rotate(-2deg);
}

.gift-scene[data-view='personality'] :is(.jewelry-photo, .photo-wrap, .note-card) {
  opacity: .17;
}

dialog .gift-scene[data-personality-card='true'][data-view='gift'] {
  aspect-ratio: 1.25;
}

dialog .gift-scene[data-personality-card='true'][data-view='gift'] .jewelry-photo {
  width: 40%;
  top: 10%;
}

dialog .gift-scene[data-personality-card='true'][data-view='gift'] .note-card {
  width: 30%;
  right: 11%;
  top: 30%;
}

dialog .gift-extra-card {
  width: 24%;
  top: 65%;
}

@media (max-width: 650px) {
  .personality-card-section {
    order: 4;
    width: 100%;
  }

  #open-preview { order: 5; }
  .draft-note { order: 6; }

  .preview-top:has([data-view='personality']:not([hidden])) {
    flex-wrap: wrap;
  }

  .gift-scene[data-view='personality'] .gift-extra-card {
    top: 22%;
    width: 82%;
    left: 9%;
  }

  dialog .gift-scene[data-personality-card='true'][data-view='gift'] {
    aspect-ratio: 1.02;
  }

  dialog .gift-scene[data-personality-card='true'][data-view='gift'] .note-card {
    width: 35%;
    right: 7%;
  }
}

#square-checkout {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

#square-checkout-status:empty {
  display: none;
}

.studio-nav {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 28px;
}

.studio-nav .header-link {
  margin: 0;
  white-space: nowrap;
}

.cart-button {
  margin: 0 24px 0 12px;
  padding: 9px 13px;
  border: 1px solid #d8cdbb;
  color: #685a43;
  font-size: 11px;
  white-space: nowrap;
}

.cart-button:hover,
.secondary-button:hover {
  background: #efe9df;
}

.cart-button span {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 50%;
  background: #e7dece;
  font-size: 9px;
}

.gift-actions {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr);
  gap: 10px;
  margin-top: 2px;
}

.gift-actions .primary-button,
.gift-actions .secondary-button {
  min-width: 0;
  margin: 0;
  padding: 15px 13px;
}

.gift-actions .primary-button > span:first-child {
  font-size: 11px;
  line-height: 1.3;
  text-align: left;
}

.secondary-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #9a896d;
  background: transparent;
  color: #665740;
  font-size: 11px;
  letter-spacing: .2px;
  transition: background .2s;
}

.secondary-button > span:last-child {
  font-size: 17px;
  line-height: 12px;
}

#cart-dialog {
  max-width: 650px;
}

.cart-empty {
  padding: 23px 0;
  color: var(--muted);
  font: 15px var(--serif);
}

.cart-item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.cart-item > img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  background: #eee8dd;
}

.cart-item-detail {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.cart-item-detail strong {
  color: var(--ink);
  font: 15px var(--serif);
}

.cart-item-detail p {
  overflow-wrap: anywhere;
  color: #706351;
  font: italic 12px/1.45 var(--serif);
}

.cart-item-price {
  align-self: start;
  padding-top: 3px;
  font-size: 11px;
  white-space: nowrap;
}

.cart-remove {
  align-self: start;
  padding: 3px 0;
  color: #8b7760;
  font-size: 9px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  padding: 14px 0 7px;
  border-top: 1px solid var(--line);
  color: #756750;
  font-size: 11px;
}

.cart-total strong {
  color: var(--ink);
  font-weight: 400;
}

.cart-checkout {
  margin-top: 12px;
}

#start-square-checkout > span:first-child,
#cart-checkout > span:first-child {
  font-size: 11px;
  line-height: 1.3;
}

#cart-checkout-status:empty {
  display: none;
}

@media (max-width: 850px) {
  .studio-nav {
    gap: 14px;
  }
  .studio-nav .header-link {
    font-size: 10px;
  }
  .cart-button {
    margin-right: 14px;
  }
}

@media (max-width: 650px) {
  .studio-nav {
    display: none;
  }
  .cart-button {
    margin: 0 0 0 auto;
    padding: 8px 10px;
    font-size: 10px;
  }
  .private-label {
    display: none;
  }
  .gift-actions {
    order: 4;
    width: 100%;
    grid-template-columns: 1fr 1.15fr;
  }
  .gift-actions .primary-button,
  .gift-actions .secondary-button {
    padding: 15px 11px;
    font-size: 10px;
  }
  .gift-actions .primary-button > span:first-child {
    font-size: 10px;
  }
  .draft-note {
    order: 5;
    margin-top: -15px;
  }
  .cart-item {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
  }
  .cart-item > img {
    width: 52px;
    height: 52px;
  }
  .cart-item-price {
    grid-column: 3;
    grid-row: 1;
  }
  .cart-remove {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: start;
  }
}