@media screen and (max-width: 749px) {
  .quick-add-modal__content:has(.bl-inputs:is([data-type^='fluted'], [data-type='initial'], [data-type^='zodiac'], [data-type^='moon-phase'], [data-type^='hand-drawing'], [data-type='handwriting-clip'], [data-type='letter-clip'])):has([data-bl-preview-led]) {
    /* The switch on the preview, bottom-left, the same 28px high as the flip / zoom buttons
       (bottom-right) and on their baseline. The selection language of the other personaliser
       toggles: a tinted field, the chosen option solid sage. The sage pill slides to the chosen
       option (220ms); the two options are equal widths so it can. */
    .bl-preview-mode {
      display: grid;
      grid-template-columns: 1fr 1fr;
      height: 28px;
      box-sizing: border-box;
      padding: 2px;
      border-radius: 999px;
      background-color: var(--bl-field);
      isolation: isolate;
      /* Its own layer: on iPhone Safari it flickered while the 3D canvas under it animated (a flip). */
      transform: translateZ(0);
    }

    .bl-preview-mode::before {
      content: '';
      position: absolute;
      inset-block: 2px;
      inset-inline-start: 2px;
      width: calc(50% - 2px);
      border-radius: 999px;
      background-color: var(--bl-select, var(--color-palette-1));
      z-index: -1;
      transition: translate var(--bl-speed-state, 220ms) var(--bl-ease, ease);
    }

    .bl-preview-mode:has(.bl-preview-mode__option:last-child[aria-pressed='true'])::before {
      translate: 100% 0;
    }

    .bl-preview-mode__option {
      height: 24px;
      padding: 0 var(--space-3);
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: rgb(var(--color-foreground-rgb) / 0.75);
      font-family: var(--font-body--family);
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
      transition: color var(--bl-speed-state, 220ms) var(--bl-ease, ease),
        background-color var(--bl-speed-state, 220ms) var(--bl-ease, ease), scale 160ms var(--bl-spring, ease);
    }

    .bl-preview-mode__option[aria-pressed='true'] {
      color: var(--bl-select-text, var(--color-background));
    }

    /* Hover (where there is one): the other option darkens and takes the toggles' hover tint, so it reads
       as the one to tap; pressed, an option gives slightly, as the other toggles do. */
    @media (hover: hover) {
      .bl-preview-mode__option:not([aria-pressed='true']):hover {
        background-color: var(--bl-field-hover);
        color: var(--color-foreground);
      }
    }

    .bl-preview-mode__option:active {
      scale: 0.96;
    }

    @media (prefers-reduced-motion: reduce) {
      .bl-preview-mode::before,
      .bl-preview-mode__option {
        transition: none;
      }
    }

    /* The photo counter ("1 / 5") runs along the same bottom edge as the switch: the photos still
       swipe without it. The star sign has no switch, so it keeps its counter. */
    &:has(.bl-preview-mode) .slideshow-controls__counter {
      display: none;
    }

    /* Heart: back in the flow on the badge's row, top-right (it was pinned to the panel's first row,
       which is now the engraving field). It takes no height of its own. */
    .product-details .bl-wishlist-block {
      position: static;
      align-self: flex-end;
      margin-block: -10px calc(-44px - 20px + 10px);
    }

    /* The engraving field: first in the panel, flush with the preview, edge to edge. */
    .product-details .shopify-app-block:has(.bl-inputs:is([data-type^='fluted'], [data-type='initial'], [data-type^='zodiac'], [data-type^='moon-phase'], [data-type^='hand-drawing'], [data-type='handwriting-clip'], [data-type='letter-clip'])) {
      order: -1;
      margin-block-start: -20px;
      padding-inline: 0;
      /* The engraving row's height before the app fills it, so the title doesn't jump down. */
      min-height: 62px;
    }

    .bl-inputs .bl-inputs-root {
      gap: 0 !important;
    }

    /* The row styling below is for each type's main field only, a direct child of the inputs: a
       field nested elsewhere (the handwriting's back engraving, inside More options) keeps its own
       label and look, so it doesn't read as the main field. */

    /* The choices now on the preview, the heading, and the star sign list (the row replaces it). */
    .bl-inputs .bl-inputs-root .bl-inputs-heading,
    .bl-inputs .bl-inputs-root [data-bl-field='type'][role='group'],
    .bl-inputs .bl-inputs-root [data-bl-field='handwritingMode'][role='group'],
    .bl-inputs .bl-inputs-root .bl-zodiac-list {
      display: none !important;
    }

    /* Solid / Outline: only once the app draws that switch on the preview (an app version without it
       for a type, e.g. the moon phase clip before its release, keeps the buttons here). */
    &:has(.bl-preview-mode) .bl-inputs .bl-inputs-root [data-bl-field='outline'][role='group'] {
      display: none !important;
    }

    .bl-inputs-root > .bl-field {
      gap: 0 !important;
    }

    /* The label stays for screen readers; the row shows ENGRAVE instead. */
    .bl-inputs-root > .bl-field .bl-field__label,
    .bl-inputs-root [data-bl-field='font'][role='group'] > label {
      position: absolute !important;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .bl-inputs-root > .bl-field .bl-field__row {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      min-height: 60px;
      box-sizing: border-box;
      padding: 0 20px;
      border-block-start: 1px solid var(--color-palette-2);
      border-block-end: 1.5px solid var(--color-foreground);
      background-color: #fff;
    }

    .bl-inputs-root > .bl-field .bl-field__prefix,
    .bl-inputs-root > .bl-field .bl-field__count {
      display: block;
      flex-shrink: 0;
      font-size: 12px;
      color: rgb(var(--color-foreground-rgb) / 0.7);
      -webkit-user-select: none;
      user-select: none;
    }

    .bl-inputs-root > .bl-field .bl-field__prefix {
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .bl-inputs-root > .bl-field .bl-field__row :is(input, textarea) {
      flex: 1 1 auto;
      width: auto !important;
      min-width: 0;
      min-height: 0;
      padding: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      font-family: var(--bl-engrave-font, 'Luxurious Roman'), serif !important;
      text-align: start !important;
    }

    .bl-inputs-root > .bl-field .bl-field__row input {
      font-size: 26px !important;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* Message: three lines, the count under them on the right. */
    .bl-inputs-root > .bl-field--message .bl-field__row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      row-gap: var(--space-1);
      padding-block: 14px 10px;
    }

    .bl-inputs-root > .bl-field--message .bl-field__prefix {
      padding-block-start: 5px;
    }

    /* 18px: still at least 16px, so iOS doesn't zoom in on focus. */
    .bl-inputs-root > .bl-field--message .bl-field__row textarea {
      height: calc(3 * 1.3em) !important;
      font-size: 18px !important;
      line-height: 1.3 !important;
    }

    .bl-inputs-root > .bl-field--message .bl-field__count {
      grid-column: 2;
      justify-self: end;
    }

    .bl-inputs-root > .bl-field--message > button {
      padding: var(--space-2) 20px 0;
    }

    /* Letter charm: the font tiles (the theme's option toggles) under the row. */
    .bl-inputs-root [data-bl-field='font'][role='group'] {
      padding: var(--space-3) 20px 0;
    }

    /* Moon phase: the date in the display face, not the engraving one; the phase name under it. */
    .bl-inputs-root > .bl-field--date .bl-field__row input {
      height: auto;
      max-width: none;
      font-family: var(--font-heading--family) !important;
      font-size: 18px !important;
      letter-spacing: 0;
      text-transform: none;
    }

    .bl-inputs-root > .bl-field--date .bl-field__row > :not(.bl-field__prefix) {
      flex: 1 1 auto;
      min-width: 0;
    }

    /* The date picker's calendar icon: at the row's end (it sat over the date's first letters). */
    /* The calendar opens above the date when there's no room below (the app decides). In quick add the
       details panel is masked (its scroll fade), which clips anything outside it, and sits under the
       gallery: while the calendar is open the mask is off and the panel comes up over the gallery, or
       the calendar would be cut off behind the 3D preview. */
    .product-details:has(.bl-field--date .z-50) {
      z-index: 3;
      -webkit-mask-image: none;
      mask-image: none;
    }

    /* The date row: hovering anywhere on it grows the calendar icon a little (the whole row opens it). */
    .bl-inputs-root > .bl-field--date .bl-field__row .pointer-events-none svg {
      transition: scale var(--bl-speed-state, 220ms) var(--bl-spring, ease);
    }

    @media (hover: hover) {
      .bl-inputs-root > .bl-field--date .bl-field__row:hover .pointer-events-none svg {
        scale: 1.18;
      }
    }

    .bl-inputs-root > .bl-field--date .bl-field__row .pointer-events-none {
      inset-inline: auto 0;
      padding: 0;
    }

    .bl-inputs-root > .bl-field--date .bl-field__row input {
      padding-inline-end: 28px !important;
    }

    .bl-inputs-root > .bl-field .bl-field__note {
      display: block;
      margin: 0;
      padding: var(--space-2) 20px 0;
      font-size: 13px;
      color: rgb(var(--color-foreground-rgb) / 0.7);
    }

    /* Handwriting: the typed text in the generator's script (not uppercase), the heart shapes under
       it, then "More options" (photo upload, back engraving) as before. No switch on the preview. */
    .bl-inputs-root > .bl-field--handwriting .bl-field__row input {
      font-size: 20px !important;
      letter-spacing: 0;
      text-transform: none;
    }

    .bl-inputs:is([data-type^='hand-drawing'], [data-type='handwriting-clip'])
      .bl-inputs-root
      > :not(.bl-field, .bl-inputs-heading) {
      padding-inline: 20px;
      margin-block-start: var(--space-3);
    }

    /* More options (letter clip, handwriting): inset like the rest, a little space above it. */
    .bl-inputs-root > .bl-collapsible {
      padding-inline: 20px;
      margin-block-start: var(--space-3);
    }

    .bl-inputs-root > .bl-field--date .bl-field__row {
      cursor: pointer;
    }

    /* Handwriting, Upload: "NOTE  [examples] Upload a photo of your note / tip  ⤒" in the row (then the
       note's thumbnail, "Adjust crop" and remove). The box is the row itself here: no box of its own. */
    .bl-inputs-root > .bl-field--note .bl-field__row {
      min-height: 72px;
    }

    .bl-inputs-root > .bl-field--note .bl-note__upload {
      padding-inline: 0;
      background: transparent;
      box-shadow: none;
      font-size: 14px;
    }

    .bl-inputs-root > .bl-field--note .bl-note__thumb {
      box-shadow: inset 0 0 0 1px var(--color-palette-2);
    }

    .bl-shape > label {
      font-size: 10px !important;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgb(var(--color-foreground-rgb) / 0.7) !important;
    }

    /* Star sign: every sign as a card in a row that swipes, the chosen one solid sage. */
    .bl-zodiac-rail {
      display: block;
      padding-block: var(--space-3) 14px;
      border-block-start: 1px solid var(--color-palette-2);
      border-block-end: 1.5px solid var(--color-foreground);
      background-color: #fff;
    }

    .bl-zodiac-rail__head {
      display: flex;
      justify-content: space-between;
      padding: 0 20px var(--space-2);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgb(var(--color-foreground-rgb) / 0.7);
      -webkit-user-select: none;
      user-select: none;
    }

    .bl-zodiac-rail__track {
      display: flex;
      gap: var(--space-2);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 20px;
      padding-inline: 20px;
      scrollbar-width: none;
    }

    .bl-zodiac-rail__track::-webkit-scrollbar {
      display: none;
    }

    .bl-zodiac-rail__card {
      flex: 0 0 84px;
      height: 96px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-1);
      padding: 0;
      border: 0;
      border-radius: 0;
      background-color: var(--bl-field);
      color: var(--color-foreground);
      font-family: var(--font-body--family);
      scroll-snap-align: center;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: background-color var(--bl-speed-state, 220ms) var(--bl-ease, ease),
        color var(--bl-speed-state, 220ms) var(--bl-ease, ease), scale 160ms var(--bl-spring, ease);
    }

    /* Hover: the option toggles' lighter tint, so the cards read as choices; pressed, a card gives
       slightly (as the toggles do). Hover only where there is one, so a tap leaves nothing behind. */
    @media (hover: hover) {
      .bl-zodiac-rail__card:not([aria-pressed='true']):hover {
        background-color: var(--bl-field-hover);
      }
    }

    .bl-zodiac-rail__card:active {
      scale: 0.97;
    }

    .bl-zodiac-rail__card img {
      width: 28px;
      height: 28px;
      transition: filter var(--bl-speed-state, 220ms) var(--bl-ease, ease);
    }

    .bl-zodiac-rail__name {
      font-size: 13px;
    }

    .bl-zodiac-rail__dates {
      font-size: 10px;
      opacity: 0.75;
    }

    .bl-zodiac-rail__card[aria-pressed='true'] {
      background-color: var(--bl-select, var(--color-palette-1));
      color: var(--bl-select-text, var(--color-background));
    }

    .bl-zodiac-rail__card[aria-pressed='true'] img {
      filter: brightness(0) invert(1);
    }
  }
}

.bl-drawer__content:has(.bl-inputs:is([data-type^='fluted'], [data-type='initial'], [data-type^='zodiac'], [data-type^='moon-phase'], [data-type^='hand-drawing'], [data-type='handwriting-clip'], [data-type='letter-clip'])):has([data-bl-preview-led]) {
  /* The switch on the preview, bottom-left, the same 28px high as the flip / zoom buttons
       (bottom-right) and on their baseline. The selection language of the other personaliser
       toggles: a tinted field, the chosen option solid sage. The sage pill slides to the chosen
       option (220ms); the two options are equal widths so it can. */
    .bl-preview-mode {
      display: grid;
      grid-template-columns: 1fr 1fr;
      height: 28px;
      box-sizing: border-box;
      padding: 2px;
      border-radius: 999px;
      background-color: var(--bl-field);
      isolation: isolate;
      /* Its own layer: on iPhone Safari it flickered while the 3D canvas under it animated (a flip). */
      transform: translateZ(0);
    }

    .bl-preview-mode::before {
      content: '';
      position: absolute;
      inset-block: 2px;
      inset-inline-start: 2px;
      width: calc(50% - 2px);
      border-radius: 999px;
      background-color: var(--bl-select, var(--color-palette-1));
      z-index: -1;
      transition: translate var(--bl-speed-state, 220ms) var(--bl-ease, ease);
    }

    .bl-preview-mode:has(.bl-preview-mode__option:last-child[aria-pressed='true'])::before {
      translate: 100% 0;
    }

    .bl-preview-mode__option {
      height: 24px;
      padding: 0 var(--space-3);
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: rgb(var(--color-foreground-rgb) / 0.75);
      font-family: var(--font-body--family);
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
      transition: color var(--bl-speed-state, 220ms) var(--bl-ease, ease),
        background-color var(--bl-speed-state, 220ms) var(--bl-ease, ease), scale 160ms var(--bl-spring, ease);
    }

    .bl-preview-mode__option[aria-pressed='true'] {
      color: var(--bl-select-text, var(--color-background));
    }

    /* Hover (where there is one): the other option darkens and takes the toggles' hover tint, so it reads
       as the one to tap; pressed, an option gives slightly, as the other toggles do. */
    @media (hover: hover) {
      .bl-preview-mode__option:not([aria-pressed='true']):hover {
        background-color: var(--bl-field-hover);
        color: var(--color-foreground);
      }
    }

    .bl-preview-mode__option:active {
      scale: 0.96;
    }

    @media (prefers-reduced-motion: reduce) {
      .bl-preview-mode::before,
      .bl-preview-mode__option {
        transition: none;
      }
    }

    /* The photo counter ("1 / 5") runs along the same bottom edge as the switch: the photos still
       swipe without it. The star sign has no switch, so it keeps its counter. */
    &:has(.bl-preview-mode) .slideshow-controls__counter {
      display: none;
    }

    /* Heart: back in the flow on the badge's row, top-right (it was pinned to the panel's first row,
       which is now the engraving field). It takes no height of its own. */
    .product-details .bl-wishlist-block {
      position: static;
      align-self: flex-end;
      margin-block: -10px calc(-44px - 20px + 10px);
    }

    /* The engraving field: first in the panel, flush with the preview, edge to edge. */
    .product-details .shopify-app-block:has(.bl-inputs:is([data-type^='fluted'], [data-type='initial'], [data-type^='zodiac'], [data-type^='moon-phase'], [data-type^='hand-drawing'], [data-type='handwriting-clip'], [data-type='letter-clip'])) {
      order: -1;
      margin-block-start: -20px;
      padding-inline: 0;
      /* The engraving row's height before the app fills it, so the title doesn't jump down. */
      min-height: 62px;
    }

    .bl-inputs .bl-inputs-root {
      gap: 0 !important;
    }

    /* The row styling below is for each type's main field only, a direct child of the inputs: a
       field nested elsewhere (the handwriting's back engraving, inside More options) keeps its own
       label and look, so it doesn't read as the main field. */

    /* The choices now on the preview, the heading, and the star sign list (the row replaces it). */
    .bl-inputs .bl-inputs-root .bl-inputs-heading,
    .bl-inputs .bl-inputs-root [data-bl-field='type'][role='group'],
    .bl-inputs .bl-inputs-root [data-bl-field='handwritingMode'][role='group'],
    .bl-inputs .bl-inputs-root .bl-zodiac-list {
      display: none !important;
    }

    /* Solid / Outline: only once the app draws that switch on the preview (an app version without it
       for a type, e.g. the moon phase clip before its release, keeps the buttons here). */
    &:has(.bl-preview-mode) .bl-inputs .bl-inputs-root [data-bl-field='outline'][role='group'] {
      display: none !important;
    }

    .bl-inputs-root > .bl-field {
      gap: 0 !important;
    }

    /* The label stays for screen readers; the row shows ENGRAVE instead. */
    .bl-inputs-root > .bl-field .bl-field__label,
    .bl-inputs-root [data-bl-field='font'][role='group'] > label {
      position: absolute !important;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .bl-inputs-root > .bl-field .bl-field__row {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      min-height: 60px;
      box-sizing: border-box;
      padding: 0 20px;
      border-block-start: 1px solid var(--color-palette-2);
      border-block-end: 1.5px solid var(--color-foreground);
      background-color: #fff;
    }

    .bl-inputs-root > .bl-field .bl-field__prefix,
    .bl-inputs-root > .bl-field .bl-field__count {
      display: block;
      flex-shrink: 0;
      font-size: 12px;
      color: rgb(var(--color-foreground-rgb) / 0.7);
      -webkit-user-select: none;
      user-select: none;
    }

    .bl-inputs-root > .bl-field .bl-field__prefix {
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .bl-inputs-root > .bl-field .bl-field__row :is(input, textarea) {
      flex: 1 1 auto;
      width: auto !important;
      min-width: 0;
      min-height: 0;
      padding: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      font-family: var(--bl-engrave-font, 'Luxurious Roman'), serif !important;
      text-align: start !important;
    }

    .bl-inputs-root > .bl-field .bl-field__row input {
      font-size: 26px !important;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* Message: three lines, the count under them on the right. */
    .bl-inputs-root > .bl-field--message .bl-field__row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      row-gap: var(--space-1);
      padding-block: 14px 10px;
    }

    .bl-inputs-root > .bl-field--message .bl-field__prefix {
      padding-block-start: 5px;
    }

    /* 18px: still at least 16px, so iOS doesn't zoom in on focus. */
    .bl-inputs-root > .bl-field--message .bl-field__row textarea {
      height: calc(3 * 1.3em) !important;
      font-size: 18px !important;
      line-height: 1.3 !important;
    }

    .bl-inputs-root > .bl-field--message .bl-field__count {
      grid-column: 2;
      justify-self: end;
    }

    .bl-inputs-root > .bl-field--message > button {
      padding: var(--space-2) 20px 0;
    }

    /* Letter charm: the font tiles (the theme's option toggles) under the row. */
    .bl-inputs-root [data-bl-field='font'][role='group'] {
      padding: var(--space-3) 20px 0;
    }

    /* Moon phase: the date in the display face, not the engraving one; the phase name under it. */
    .bl-inputs-root > .bl-field--date .bl-field__row input {
      height: auto;
      max-width: none;
      font-family: var(--font-heading--family) !important;
      font-size: 18px !important;
      letter-spacing: 0;
      text-transform: none;
    }

    .bl-inputs-root > .bl-field--date .bl-field__row > :not(.bl-field__prefix) {
      flex: 1 1 auto;
      min-width: 0;
    }

    /* The date picker's calendar icon: at the row's end (it sat over the date's first letters). */
    /* The calendar opens above the date when there's no room below (the app decides). In quick add the
       details panel is masked (its scroll fade), which clips anything outside it, and sits under the
       gallery: while the calendar is open the mask is off and the panel comes up over the gallery, or
       the calendar would be cut off behind the 3D preview. */
    .product-details:has(.bl-field--date .z-50) {
      z-index: 3;
      -webkit-mask-image: none;
      mask-image: none;
    }

    /* The date row: hovering anywhere on it grows the calendar icon a little (the whole row opens it). */
    .bl-inputs-root > .bl-field--date .bl-field__row .pointer-events-none svg {
      transition: scale var(--bl-speed-state, 220ms) var(--bl-spring, ease);
    }

    @media (hover: hover) {
      .bl-inputs-root > .bl-field--date .bl-field__row:hover .pointer-events-none svg {
        scale: 1.18;
      }
    }

    .bl-inputs-root > .bl-field--date .bl-field__row .pointer-events-none {
      inset-inline: auto 0;
      padding: 0;
    }

    .bl-inputs-root > .bl-field--date .bl-field__row input {
      padding-inline-end: 28px !important;
    }

    .bl-inputs-root > .bl-field .bl-field__note {
      display: block;
      margin: 0;
      padding: var(--space-2) 20px 0;
      font-size: 13px;
      color: rgb(var(--color-foreground-rgb) / 0.7);
    }

    /* Handwriting: the typed text in the generator's script (not uppercase), the heart shapes under
       it, then "More options" (photo upload, back engraving) as before. No switch on the preview. */
    .bl-inputs-root > .bl-field--handwriting .bl-field__row input {
      font-size: 20px !important;
      letter-spacing: 0;
      text-transform: none;
    }

    .bl-inputs:is([data-type^='hand-drawing'], [data-type='handwriting-clip'])
      .bl-inputs-root
      > :not(.bl-field, .bl-inputs-heading) {
      padding-inline: 20px;
      margin-block-start: var(--space-3);
    }

    /* More options (letter clip, handwriting): inset like the rest, a little space above it. */
    .bl-inputs-root > .bl-collapsible {
      padding-inline: 20px;
      margin-block-start: var(--space-3);
    }

    .bl-inputs-root > .bl-field--date .bl-field__row {
      cursor: pointer;
    }

    /* Handwriting, Upload: "NOTE  [examples] Upload a photo of your note / tip  ⤒" in the row (then the
       note's thumbnail, "Adjust crop" and remove). The box is the row itself here: no box of its own. */
    .bl-inputs-root > .bl-field--note .bl-field__row {
      min-height: 72px;
    }

    .bl-inputs-root > .bl-field--note .bl-note__upload {
      padding-inline: 0;
      background: transparent;
      box-shadow: none;
      font-size: 14px;
    }

    .bl-inputs-root > .bl-field--note .bl-note__thumb {
      box-shadow: inset 0 0 0 1px var(--color-palette-2);
    }

    .bl-shape > label {
      font-size: 10px !important;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgb(var(--color-foreground-rgb) / 0.7) !important;
    }

    /* Star sign: every sign as a card in a row that swipes, the chosen one solid sage. */
    .bl-zodiac-rail {
      display: block;
      padding-block: var(--space-3) 14px;
      border-block-start: 1px solid var(--color-palette-2);
      border-block-end: 1.5px solid var(--color-foreground);
      background-color: #fff;
    }

    .bl-zodiac-rail__head {
      display: flex;
      justify-content: space-between;
      padding: 0 20px var(--space-2);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgb(var(--color-foreground-rgb) / 0.7);
      -webkit-user-select: none;
      user-select: none;
    }

    .bl-zodiac-rail__track {
      display: flex;
      gap: var(--space-2);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 20px;
      padding-inline: 20px;
      scrollbar-width: none;
    }

    .bl-zodiac-rail__track::-webkit-scrollbar {
      display: none;
    }

    .bl-zodiac-rail__card {
      flex: 0 0 84px;
      height: 96px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-1);
      padding: 0;
      border: 0;
      border-radius: 0;
      background-color: var(--bl-field);
      color: var(--color-foreground);
      font-family: var(--font-body--family);
      scroll-snap-align: center;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: background-color var(--bl-speed-state, 220ms) var(--bl-ease, ease),
        color var(--bl-speed-state, 220ms) var(--bl-ease, ease), scale 160ms var(--bl-spring, ease);
    }

    /* Hover: the option toggles' lighter tint, so the cards read as choices; pressed, a card gives
       slightly (as the toggles do). Hover only where there is one, so a tap leaves nothing behind. */
    @media (hover: hover) {
      .bl-zodiac-rail__card:not([aria-pressed='true']):hover {
        background-color: var(--bl-field-hover);
      }
    }

    .bl-zodiac-rail__card:active {
      scale: 0.97;
    }

    .bl-zodiac-rail__card img {
      width: 28px;
      height: 28px;
      transition: filter var(--bl-speed-state, 220ms) var(--bl-ease, ease);
    }

    .bl-zodiac-rail__name {
      font-size: 13px;
    }

    .bl-zodiac-rail__dates {
      font-size: 10px;
      opacity: 0.75;
    }

    .bl-zodiac-rail__card[aria-pressed='true'] {
      background-color: var(--bl-select, var(--color-palette-1));
      color: var(--bl-select-text, var(--color-background));
    }

    .bl-zodiac-rail__card[aria-pressed='true'] img {
      filter: brightness(0) invert(1);
    }

  /* The drawer keeps its own inset: the preview and the field sit inside it as one white card, the
     field flush under the preview (no gap), its parts not inset a second time. */
  > .shopify-app-block:has(.bl-inputs) {
    margin-block-start: calc(-1 * var(--space-4));
  }

  .bl-inputs-root > .bl-field .bl-field__row {
    padding-inline: 16px;
  }

  .bl-inputs-root > .bl-field .bl-field__note,
  .bl-inputs-root > .bl-field--message > button,
  .bl-inputs-root [data-bl-field='font'][role='group'],
  .bl-inputs-root > .bl-collapsible,
  .bl-inputs:is([data-type^='hand-drawing'], [data-type='handwriting-clip']) .bl-inputs-root > :not(.bl-field, .bl-inputs-heading) {
    padding-inline: 0;
  }

  .bl-zodiac-rail__head,
  .bl-zodiac-rail__track {
    padding-inline: 16px;
  }

  .bl-zodiac-rail__track {
    scroll-padding-inline: 16px;
  }
}