/* Hide the theme's default purchase block (price, quantity, buy buttons) but
     keep the variant selector visible.

     .selector-wrapper / #productSelect cover the native option_selection.js
     markup. Outerbloom's theme renders its own picker as .swatch radio groups
     and hides both native controls itself, so .swatch has to be kept too -
     without it the shopper has no way to choose a variant at all. */
  #purchaseProduct > *:not(.selector-wrapper):not(#productSelect):not(.swatch) {
    display: none;
  }
  .personalize-board {
    inline-size: 100%;
    color: #212121;
    font-family: inherit;
  }

  .personalize-board input::placeholder,
  .personalize-board textarea::placeholder {
    color: var(--pbd-placeholder-color, #6b7280);
    opacity: 1;
  }

  /* Android in-app WebView (Gboard) IME repaint fix.
     When the preview/store link is opened inside an Android System WebView
     instead of Chrome, characters typed via Gboard are not painted inside a
     focused field (including the contenteditable board preview) until it blurs.
     Promoting each editable field to its own compositing layer forces the
     WebView to repaint on every keystroke. Verify on a real device via an
     in-app browser (not desktop Chrome), per CLAUDE.md. */
  .personalize-board input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  .personalize-board textarea {
    transform: translateZ(0);
  }
  /* The contenteditable board-preview fields need the same layer promotion, but
     several already use `transform` to centre themselves. Setting a blanket
     `transform: translateZ(0)` here overrode that centring (message/sender text
     spilled out of the board), so the translateZ(0) is appended to each field's
     own transform in its rule below instead of being applied here. */

  .personalize-board__header {
    margin-block-end: 24px;
  }

  .personalize-board__title {
    margin: 0;
    color: #212121;
    font-size: 18px!important;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .personalize-board__intro {
    margin: 8px 0 0;
    color: #4d4d4d;
    font-size: 14px!important;
    line-height: 1.45;
  }

  /* First-paint skeleton.
     personalize-board.js is deferred, so between the block painting and initRoot() running
     the shopper briefly sees a half-built board (and, on the legacy theme, the purchase
     block underneath it). Everything except the skeleton is held back until initRoot sets
     data-personalize-board-initialized, so the first paint is this stand-in for the method
     chooser: heading + subtitle, two option cards, secure note.

     The <i> (bars) and <b> (cards) children are deliberately generic, unlabelled shape
     placeholders — the extension is close to Shopify's 100 KB Liquid cap (see
     scripts/check-liquid-budget.mjs), so the markup stays minimal and all shape lives here.
     The container is aria-hidden. */
  .personalize-board:not([data-personalize-board-initialized="true"]) > *:not(.personalize-board__skeleton) {
    display: none;
  }

  .personalize-board[data-personalize-board-initialized="true"] .personalize-board__skeleton {
    display: none;
  }

  .personalize-board__skeleton {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 12px;
    animation: personalize-board-skeleton-pulse 1.4s ease-in-out infinite;
  }

  .personalize-board__skeleton i {
    grid-column: 1 / -1;
    display: block;
    block-size: 14px;
    background: var(--pbd-border-color, #e2e4e6);
  }

  /* "HOW WOULD YOU LIKE TO PREPARE THIS BOARD?" */
  .personalize-board__skeleton i:nth-child(1) {
    inline-size: 60%;
    block-size: 18px;
  }

  /* "Choose the way that works best for you." */
  .personalize-board__skeleton i:nth-child(2) {
    inline-size: 40%;
    margin-block-end: 6px;
  }

  /* Secure note, centred under the cards. */
  .personalize-board__skeleton i:nth-child(5) {
    inline-size: 240px;
    block-size: 12px;
    justify-self: center;
    margin-block-start: 6px;
  }

  .personalize-board__skeleton b {
    display: flex;
    flex-direction: column;
    gap: 18px;
    grid-column: auto;
  }

  /* The option image. */
  .personalize-board__skeleton b::before {
    content: "";
    display: block;
    block-size: 180px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f2f1ef 0%, #f8f7f6 54%, #ece8e5 100%);
  }

  /* Title, two description lines and the action button, drawn as stacked gradient bars so
     the card needs no extra elements. */
  .personalize-board__skeleton b::after {
    content: "";
    display: block;
    block-size: 132px;
    background-image:
      linear-gradient(var(--pbd-border-color, #e2e4e6) 0 0),
      linear-gradient(var(--pbd-border-color, #e2e4e6) 0 0),
      linear-gradient(var(--pbd-border-color, #e2e4e6) 0 0),
      linear-gradient(var(--pbd-border-color, #e2e4e6) 0 0);
    background-repeat: no-repeat;
    background-size: 55% 16px, 100% 10px, 80% 10px, 100% 44px;
    background-position: 0 0, 0 30px, 0 48px, 0 88px;
  }

  @keyframes personalize-board-skeleton-pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.55;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .personalize-board__skeleton {
      animation: none;
    }
  }

  .personalize-board__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .personalize-board.is-method-selected .personalize-board__options {
    display: none;
  }

  .personalize-board.is-method-selected .personalize-board__header {
    display: none;
  }

  .personalize-board__step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: 0;
    margin-block-end: 24px;
    padding-block-end: 16px;
    border-block-end: 1px solid #e2e4e6;
  }

  .personalize-board__step-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #212121;
    font: inherit;
    font-size: 13px!important;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 150ms ease;
  }

  .personalize-board__step-back:hover {
    opacity: 0.65;
  }

  .personalize-board__step-back:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 3px;
  }

  .personalize-board__step-nav-list {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .personalize-board__step-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #b8b8b8;
    min-inline-size: 0;
  }

  .personalize-board__step-nav-count {
    font-size: 13px!important;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
  }

  .personalize-board__step-nav-label {
    font-size: 13px!important;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .personalize-board__step-nav-item.is-active {
    color: var(--pbd-text-color, #212121);
  }

  .personalize-board__step-nav-item.is-complete {
    color: #555555;
  }

  .personalize-board__choice {
    position: relative;
    display: block;
    min-inline-size: 0;
    cursor: pointer;
  }

  .personalize-board__input {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    opacity: 0;
  }

  .personalize-board__option {
    display: flex;
    min-block-size: 100%;
    flex-direction: column;
    gap: 18px;
    border-radius: 8px;
    padding: 4px;
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

  .personalize-board__choice:hover .personalize-board__option {
    border-color: #1a1a1a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
  }

  .personalize-board__input:focus-visible + .personalize-board__option {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 3px;
  }

  /* Same values as .personalize-board__addon-card.is-soldout — reused, not
     reinvented. :has() is safe here: this codebase already relies on
     evergreen-only features (dvh, aspect-ratio) elsewhere. */
  .personalize-board__choice:has(.personalize-board__input:disabled) {
    cursor: not-allowed;
  }

  .personalize-board__choice:has(.personalize-board__input:disabled):hover .personalize-board__option {
    transform: none;
    box-shadow: none;
  }

  .personalize-board__input:disabled + .personalize-board__option {
    background: #f5f5f5;
    border-color: var(--pbd-border-color, #e2e4e6);
    color: #bbbbbb;
    opacity: 0.65;
  }

  .personalize-board__visual {
    position: relative;
    display: block;
    overflow: hidden;
    min-block-size: 180px;
    border-radius: 8px;
    background:
      radial-gradient(circle at 78% 24%, rgb(255 255 255 / 70%), transparent 34%),
      linear-gradient(135deg, #f2f1ef 0%, #f8f7f6 54%, #ece8e5 100%);
  }

  .personalize-board__visual--ai {
    background: transparent;
  }

  .personalize-board__visual--ai::before,
  .personalize-board__visual--manual::before {
    display: none;
  }

  .personalize-board__visual--manual {
    background: transparent;
  }

  .personalize-board__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(145deg, transparent 0 48%, rgb(214 203 195 / 22%) 49% 50%, transparent 51%),
      linear-gradient(28deg, transparent 0 58%, rgb(214 203 195 / 16%) 59% 60%, transparent 61%);
    pointer-events: none;
  }

  .personalize-board__sparkle {
    position: absolute;
    z-index: 2;
    inline-size: 18px;
    block-size: 18px;
  }

  .personalize-board__sparkle::before,
  .personalize-board__sparkle::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    background: #b79c8e;
    transform: translate(-50%, -50%);
  }

  .personalize-board__sparkle::before {
    inline-size: 2px;
    block-size: 18px;
  }

  .personalize-board__sparkle::after {
    inline-size: 18px;
    block-size: 2px;
  }

  .personalize-board__sparkle--large {
    inset-block-start: 18px;
    inset-inline-start: 34px;
  }

  .personalize-board__sparkle--soft {
    inset-block-start: 18px;
    inset-inline-start: 40px;
    opacity: 0.45;
  }

  .personalize-board__phone {
    position: absolute;
    z-index: 1;
    inset-block-end: 22px;
    inset-inline-start: 54px;
    inline-size: 74px;
    block-size: 124px;
    border: 4px solid #8f8f8f;
    border-radius: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
    box-shadow: 0 7px 14px rgb(0 0 0 / 9%);
  }

  .personalize-board__phone-notch {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: 34px;
    block-size: 7px;
    border-radius: 0 0 7px 7px;
    background: #8f8f8f;
    transform: translateX(-50%);
  }

  .personalize-board__upload-icon {
    position: absolute;
    inset-block-start: 48px;
    inset-inline-start: 50%;
    inline-size: 28px;
    block-size: 28px;
    border: 3px solid #aaaaaa;
    border-block-start: 0;
    border-radius: 0;
    transform: translateX(-50%);
  }

  .personalize-board__upload-icon::before {
    content: "";
    position: absolute;
    inset-block-start: -27px;
    inset-inline-start: 50%;
    inline-size: 3px;
    block-size: 30px;
    background: #aaaaaa;
    transform: translateX(-50%);
  }

  .personalize-board__upload-icon::after {
    content: "";
    position: absolute;
    inset-block-start: -25px;
    inset-inline-start: 50%;
    inline-size: 13px;
    block-size: 13px;
    border-inline-start: 3px solid #aaaaaa;
    border-block-start: 3px solid #aaaaaa;
    transform: translateX(-50%) rotate(45deg);
  }

  .personalize-board__invitation-card {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid #e1cfc7;
    border-radius: 0;
    background: rgb(255 255 255 / 84%);
    color: #aa8274;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    line-height: 1.45;
    box-shadow: 0 8px 18px rgb(0 0 0 / 8%);
  }

  .personalize-board__invitation-card::before,
  .personalize-board__invitation-card::after {
    content: "";
    position: absolute;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: #d6b5a7;
  }

  .personalize-board__invitation-card::before {
    inset-block-start: 10px;
    inset-inline-start: 10px;
  }

  .personalize-board__invitation-card::after {
    inset-block-start: 10px;
    inset-inline-end: 10px;
  }

  .personalize-board__invitation-card--small {
    inset-block-start: 50px;
    inset-inline-start: 142px;
    inline-size: 134px;
    block-size: 82px;
    padding-inline: 20px;
    font-size: 11px!important;
  }

  .personalize-board__invitation-card--large {
    inset-block-start: 45px;
    inset-inline-start: 72px;
    inline-size: 184px;
    block-size: 96px;
    padding-inline: 28px;
    font-size: 15px!important;
  }

  .personalize-board__pen {
    position: absolute;
    z-index: 2;
    inset-block-start: 84px;
    inset-inline-start: 222px;
    inline-size: 100px;
    block-size: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pbd-text-color, #212121) 0 72%, #777777 72% 86%, var(--pbd-text-color, #212121) 86% 100%);
    box-shadow: 0 7px 12px rgb(0 0 0 / 18%);
    transform: rotate(-28deg);
    transform-origin: center;
  }

  .personalize-board__pen::before {
    content: "";
    position: absolute;
    inset-block-start: 3px;
    inset-inline-end: -14px;
    inline-size: 20px;
    block-size: 12px;
    background: #2c2c2c;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

  .personalize-board__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
  }

  .personalize-board__heading-row {
    display: flex;
    min-block-size: 26px;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .personalize-board__option-title {
    color: #222222;
    font-size: 15px!important;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .personalize-board__badge {
    display: inline-flex;
    min-block-size: 20px;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    background: #f4e9e6;
    color: #9b6a61;
    font-size: 10px!important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .personalize-board__description {
    display: block;
    color: #555555;
    font-size: 14px!important;
    line-height: 1.55;
  }

  .personalize-board__action {
    display: inline-flex;
    min-block-size: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-block-start: auto;
    border: 1px solid #212121;
    padding: 12px 18px;
    background: var(--pbd-bg-color, #ffffff);
    color: #212121;
    font-size: 14px!important;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    transition:
      background 180ms ease,
      border-color 180ms ease,
      color 180ms ease;
  }

  .personalize-board__input:checked + .personalize-board__option {
    border-color: #1a1a1a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .personalize-board__input:checked + .personalize-board__option .personalize-board__action {
    border-color: var(--pbd-text-color, #212121);
    background: var(--pbd-text-color, #212121);
    color: #ffffff;
  }

  .personalize-board__ai-flow {
    display: grid;
    gap: 16px;
    margin-block-start: 24px;
  }

  .personalize-board__ai-flow[hidden],
  .personalize-board__manual-flow[hidden],
  .personalize-board__board-preview-card[hidden],
  .personalize-board__delivery-card[hidden],
  .personalize-board__step-nav[hidden],
  .personalize-board__paste-panel[hidden],
  .personalize-board__upload-panel[hidden],
  .personalize-board__upload-preview[hidden],
  .personalize-board__step-card[hidden],
  .personalize-board__message-status[hidden],
  .personalize-board__preview-sender[hidden],
  .personalize-board__preview-occasion[hidden],
  .personalize-board__preview-logo-img[hidden],
  .personalize-board__message-section[hidden],
  .personalize-board__step-nav-item[hidden] {
    display: none;
  }

  .personalize-board__step-next[hidden] {
    display: none;
  }

  .personalize-board__manual-flow {
    display: grid;
    gap: 28px;
    margin-block-start: 24px;
  }

  .personalize-board.is-method-selected .personalize-board__ai-flow,
  .personalize-board.is-method-selected .personalize-board__manual-flow {
    margin-block-start: 0;
  }

  .personalize-board.is-step-review .personalize-board__step-card--source,
  .personalize-board.is-step-review .personalize-board__manual-flow {
    display: none;
  }

  .personalize-board.is-step-review .personalize-board__header {
    display: none;
  }

  .personalize-board__manual-group {
    min-inline-size: 0;
    margin: 0;
    border: 0;
    padding: 0;
  }

  .personalize-board__manual-label {
    display: block;
    margin: 0 0 12px;
    color: #232323;
    font-size: 13px!important;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .personalize-board__manual-label span {
    color: #585858;
    font-size: 12px!important;
    font-weight: 600;
    text-transform: none;
  }

  /* Keep every manual-flow section label the same size (Main Message / Sender
     Logo / Sender Name / Preview My Board). */
  .personalize-board__manual-flow .personalize-board__logo-field-label,
  .personalize-board__manual-flow .personalize-board__preview-section-label {
    font-size: 13px!important;
    font-weight: 800;
  }

  .personalize-board__manual-options-carousel {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .personalize-board__manual-options {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    flex: 1 1 0;
    min-inline-size: 0;
    padding-block: 4px;
    cursor: grab;
  }

  .personalize-board__manual-options::-webkit-scrollbar {
    display: none;
  }

  .personalize-board__manual-options.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
  }

  .personalize-board__manual-options.is-dragging * {
    cursor: grabbing;
  }

  .personalize-board__manual-options-nav {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    inline-size: 26px;
    block-size: 26px;
    padding: 0;
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    background: var(--pbd-bg-color, #ffffff);
    color: #333333;
    font-size: 16px!important;
    line-height: 1;
    cursor: pointer;
  }

  .personalize-board__manual-options-nav:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .personalize-board__manual-options-nav[hidden] {
    display: none;
  }

  .personalize-board__manual-option {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-inline-size: 72px;
    min-block-size: 38px;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
  }

  .personalize-board__manual-radio {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .personalize-board__manual-option span {
    display: inline-flex;
    inline-size: 100%;
    min-block-size: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d4d8;
    border-radius: 0;
    padding: 8px 18px;
    background: var(--pbd-bg-color, #ffffff);
    color: #4a4a4a;
    font-size: 13px!important;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition:
      border-color 160ms ease,
      background-color 160ms ease,
      color 160ms ease,
      box-shadow 160ms ease;
  }

  .personalize-board__manual-radio:checked + span {
    border-color: #151515;
    background: #151515;
    color: #ffffff;
    box-shadow: 0 8px 16px rgb(0 0 0 / 14%);
  }

  .personalize-board__manual-radio:focus-visible + span {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 3px;
  }

  .personalize-board__manual-textarea:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 3px;
  }

  .personalize-board__manual-textarea {
    display: block;
    inline-size: 100%;
    resize: vertical;
    border: 1px solid #e2e4e6;
    border-radius: 0;
    padding: 15px 18px;
    background: var(--pbd-bg-color, #ffffff);
    color: #343434;
    font: inherit;
    font-size: 14px!important;
    line-height: 1.55;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 3%);
  }

  .personalize-board__manual-textarea::placeholder {
    color: var(--pbd-placeholder-color, #6b7280);
    opacity: 1;
  }

  .personalize-board__manual-occasion-title {
    display: block;
    inline-size: 100%;
    margin-block-start: 12px;
    border: 1px solid #e2e4e6;
    border-radius: 0;
    padding: 12px 16px;
    background: var(--pbd-bg-color, #ffffff);
    color: #343434;
    font: inherit;
    font-size: 14px!important;
    line-height: 1.4;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 3%);
  }

  .personalize-board__manual-occasion-title::placeholder {
    color: var(--pbd-placeholder-color, #6b7280);
    opacity: 1;
  }

  .personalize-board__manual-occasion-title:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 3px;
  }

  .personalize-board__manual-textarea--message {
    min-block-size: 120px;
  }

  .personalize-board__manual-count {
    margin: 7px 0 0;
    color: #525252;
    font-size: 12px!important;
    font-weight: 600;
    line-height: 1.2;
    text-align: end;
  }

  .personalize-board__step-action {
    margin-block-start: 22px;
  }

  .personalize-board__step-action--review {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .personalize-board__step-reupload-link {
    margin-block-start: 2px;
  }

  .personalize-board__step-next {
    display: inline-flex;
    inline-size: 100%;
    min-block-size: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--pbd-text-color, #212121);
    border-radius: 0;
    padding: 14px 18px;
    background: var(--pbd-text-color, #212121);
    color: #ffffff;
    font: inherit;
    font-size: 14px!important;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 9px rgb(0 0 0 / 12%);
    transition:
      background 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

  .personalize-board__step-next:hover:not(:disabled) {
    border-color: var(--pbd-text-color, #212121);
    background: var(--pbd-bg-color, #ffffff);
    color: var(--pbd-text-color, #212121);
    box-shadow: 0 5px 14px rgb(0 0 0 / 15%);
    transform: translateY(-1px);
  }

  .personalize-board__step-next:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    transform: none;
  }

  .personalize-board__step-next-arrow {
    font-size: 18px!important;
    line-height: 1;
  }

  .personalize-board__board-preview-card {
    border: 1px solid #e2e4e6;
    border-radius: 0;
    padding: 22px;
    background: var(--pbd-bg-color, #ffffff);
  }

  .personalize-board__preview-shell {
    inline-size: 100%;
    max-inline-size: 460px;
    margin-inline: auto;
  }

  .personalize-board__preview-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, #4a7a38 0%, #6a9a52 35%, #4a7a38 65%, #3a5a28 100%);
  }

  .personalize-board__preview-pattern,
  .personalize-board__preview-shade {
    position: absolute;
    inset: 0;
  }

  .personalize-board__preview-pattern {
    background-image:
      radial-gradient(circle, rgb(255 220 120 / 35%) 2.5px, transparent 2.5px),
      radial-gradient(circle, rgb(255 180 80 / 25%) 1.5px, transparent 1.5px),
      radial-gradient(circle, rgb(255 255 255 / 12%) 1px, transparent 1px);
    background-position: 0 0, 7px 11px, 4px 4px;
    background-size: 22px 22px, 15px 15px, 9px 9px;
  }

  .personalize-board__preview-shade {
    background:
      radial-gradient(at 0% 0%, rgb(0 0 0 / 30%) 0%, transparent 50%),
      radial-gradient(at 100% 100%, rgb(0 0 0 / 30%) 0%, transparent 50%);
  }

  .personalize-board__preview-paper {
    position: absolute;
    inset: 12px 14px;
    display: flex;
    flex-direction: column;
    background: var(--pbd-bg-color, #ffffff);
    box-shadow:
      0 4px 20px rgb(0 0 0 / 22%),
      inset 0 0 0 1px rgb(0 0 0 / 6%);
    overflow: hidden;
  }

  .personalize-board__preview-occasion {
    padding: 5px 12px;
    border-block-end: 1px solid #f0f0f0;
    text-align: center;
    color: #8a7060;
    font-size: 9px!important;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .personalize-board__preview-message-wrap {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    min-block-size: 0;
    overflow: hidden;
  }

  .personalize-board__preview-message {
    color: #111827;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px!important;
    line-height: 1.55;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: pre-line;
  }

  .personalize-board__preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 10px;
    border-block-start: 1px solid #f0f0f0;
  }

  .personalize-board__preview-brand {
    color: #9ca3af;
    font-size: 7px!important;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .personalize-board__preview-logo-img {
    display: block;
    max-height: 24px;
    max-width: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .personalize-board__preview-brand:has(.personalize-board__preview-logo-img:not([hidden])) .personalize-board__preview-brand-text {
    display: none;
  }

  .personalize-board__preview-sender {
    color: #374151;
    font-size: 8px!important;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-transform: uppercase;
    white-space: pre-line;
    text-align: right;
  }

  .personalize-board__preview-stand {
    display: flex;
    justify-content: center;
    gap: 72px;
  }

  .personalize-board__preview-stand span:first-child {
    inline-size: 3px;
    block-size: 16px;
    background: #d1d5db;
    transform: rotate(-6deg);
    transform-origin: top center;
  }

  .personalize-board__preview-stand span:last-child {
    inline-size: 3px;
    block-size: 16px;
    background: #d1d5db;
    transform: rotate(6deg);
    transform-origin: top center;
  }

  .personalize-board__step-head {
    display: flex;
    align-items: flex-start;
    margin-block-end: 20px;
  }

  .personalize-board__step-head--source {
    flex-direction: column;
  }

  .personalize-board__step-head--with-action {
    justify-content: space-between;
    gap: 18px;
  }

  .personalize-board__step-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-inline-size: 0;
  }

  .personalize-board__step-number {
    display: inline-flex;
    flex: 0 0 auto;
    inline-size: 32px;
    block-size: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfcfcf;
    border-radius: 50%;
    color: #333333;
    font-size: 16px!important;
    font-weight: 700;
    line-height: 1;
  }

  .personalize-board__step-title {
    margin: 1px 0 0;
    color: #222222;
    font-size: 17px!important;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .personalize-board__step-copy {
    margin: 0;
    color: #5b5b5b;
    font-size: 14px!important;
    line-height: 1.45;
  }

  .personalize-board__source-tabs {
    display: flex;
    border-block-end: 1px solid #e2e4e6;
    margin-block-start: 20px;
  }

  .personalize-board__source-tab {
    flex: 1;
    padding: 10px 12px 12px;
    border: 0;
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    background: transparent;
    color: #a0a0a0;
    font: inherit;
    font-size: 13px!important;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition:
      color 150ms ease,
      border-color 150ms ease;
  }

  .personalize-board__source-tab:hover {
    color: #555555;
  }

  .personalize-board__source-tab.is-active {
    color: var(--pbd-text-color, #212121);
    border-block-end-color: var(--pbd-text-color, #212121);
  }

  .personalize-board__source-tab:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 2px;
  }

  .personalize-board__regenerate-button {
    display: inline-flex;
    min-block-size: 54px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid #dedede;
    border-radius: 0;
    padding: 12px 16px;
    background: var(--pbd-bg-color, #ffffff);
    color: #212121;
    font: inherit;
    font-size: 13px!important;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      background 180ms ease;
  }

  .personalize-board__regenerate-button:hover {
    border-color: #8f8f8f;
  }

  .personalize-board__regenerate-button:focus-visible,
  .personalize-board__step-next:focus-visible,
  .personalize-board__text-button:focus-visible,
  .personalize-board__paste-textarea:focus-visible,
  .personalize-board__detail-input:focus-visible,
  .personalize-board__message-output:focus-visible {
    outline: 1px solid var(--pbd-text-color, #212121);
    outline-offset: 1px;
    outline: none;
  }

  .personalize-board__upload-document-title {
    color: #212121;
    font-size: 15px!important;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  /* Pinned to the viewport for the same reason as .personalize-board__logo-file-input:
     an off-flow file input is a scroll target, so opening the picker jumped the page. */
  .personalize-board__file-input {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .personalize-board__upload-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(220px, 0.98fr);
    gap: 14px;
    align-items: stretch;
    margin-block-start: 18px;
  }

  .personalize-board__upload-dropzone {
    display: flex;
    grid-column: 1 / -1;
    min-block-size: 168px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed #dedede;
    border-radius: 0;
    padding: 20px;
    background: var(--pbd-bg-color, #ffffff);
    color: #262626;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      background 180ms ease;
  }

  .personalize-board__upload-panel.has-upload-preview .personalize-board__upload-dropzone {
    display: none;
  }

  .personalize-board__upload-dropzone:hover,
  .personalize-board__upload-dropzone:focus-visible,
  .personalize-board__upload-dropzone.is-dragover {
    border-color: #9f9f9f;
    background: #fbfbfb;
    box-shadow: 0 10px 24px rgba(18, 18, 18, 0.06);
    outline: none;
  }

  .personalize-board__upload-drop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 38px;
    block-size: 38px;
    color: #292929;
  }

  .personalize-board__upload-drop-title {
    color: #2f2f2f;
    font-size: 15px!important;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .personalize-board__upload-drop-meta {
    color: #6c6c6c;
    font-size: 13px!important;
    line-height: 1.3;
    letter-spacing: 0;
  }

  .personalize-board__upload-preview {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    border: 1px solid #e2e2e2;
    border-radius: 0;
    background: var(--pbd-bg-color, #ffffff);
    box-shadow: 0 10px 28px rgba(18, 18, 18, 0.06);
    overflow: hidden;
  }

  .personalize-board__upload-preview-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
  }

  .personalize-board__upload-preview-media {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 48px;
    color: #6c6c6c;
  }

  .personalize-board__upload-preview-media img {
    display: block;
    inline-size: 40px;
    block-size: 48px;
    object-fit: cover;
    border-radius: 4px;
  }

  .personalize-board__upload-preview-detail {
    display: grid;
    gap: 4px;
    min-inline-size: 0;
    flex: 1;
  }

  .personalize-board__upload-preview-name,
  .personalize-board__upload-preview-size {
    display: block;
    letter-spacing: 0;
  }

  .personalize-board__upload-preview-name {
    color: #2e2e2e;
    font-size: 13px!important;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-transform: uppercase;
  }

  .personalize-board__upload-preview-size {
    color: #5f5f5f;
    font-size: 13px!important;
    font-weight: 500;
    line-height: 1.35;
  }

  .personalize-board__upload-preview-badge {
    flex-shrink: 0;
    color: #2a7a4f;
    font-size: 12px!important;
    font-weight: 700;
    text-transform: uppercase;
  }

  .personalize-board__upload-preview-divider {
    margin: 0;
    border: none;
    border-block-start: 1px solid #e8e8e8;
  }

  .personalize-board__upload-preview-actions {
    display: flex;
    align-items: center;
  }

  .personalize-board__upload-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding-block: 12px;
    background: transparent;
    border: none;
    color: #2e2e2e;
    font: inherit;
    font-size: 13px!important;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
  }

  .personalize-board__upload-action:hover {
    background: #f6f6f6;
  }

  .personalize-board__upload-action-icon {
    display: inline-flex;
    flex-shrink: 0;
  }

  .personalize-board__upload-action-sep {
    display: block;
    inline-size: 1px;
    block-size: 20px;
    background: #e8e8e8;
  }

  .personalize-board__paste-panel {
    position: relative;
    margin-block-start: 20px;
  }

  .personalize-board__paste-textarea,
  .personalize-board__message-output {
    display: block;
    inline-size: 100%;
    min-block-size: 150px;
    resize: vertical;
    border: 1px solid #e1e1e1;
    border-radius: 0;
    padding: 18px 22px;
    background: var(--pbd-bg-color, #ffffff);
    color: #303030;
    font: inherit;
    font-size: 15px!important;
    line-height: 1.65;
  }

  .personalize-board__paste-textarea::placeholder,
  .personalize-board__message-output::placeholder,
  .personalize-board__detail-input::placeholder {
    color: var(--pbd-placeholder-color, #6b7280);
    opacity: 1;
  }

  .personalize-board__character-count {
    margin: 10px 2px 0;
    color: #6d6d6d;
    font-size: 13px!important;
    line-height: 1.2;
    text-align: end;
  }

  .personalize-board__ai-status,
  .personalize-board__message-status {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 0;
    color: #595959;
    font-size: 14px!important;
    line-height: 1.45;
    transition: color 150ms ease;
  }

  .personalize-board__ai-status.is-error {
    color: var(--pbd-accent-color, #640000);
  }

  .personalize-board__status-icon,
  .personalize-board__regenerate-icon {
    position: relative;
    flex: 0 0 auto;
    inline-size: 22px;
    block-size: 22px;
  }

  .personalize-board__status-icon,
  .personalize-board__regenerate-icon {
    display: inline-block;
  }

  .personalize-board__status-symbol,
  .personalize-board__regenerate-symbol {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    fill: #000000;
  }

  .personalize-board.is-loading .personalize-board__status-icon {
    animation: personalize-board-spin 900ms linear infinite;
  }

  .personalize-board__detail-list {
    overflow: hidden;
    border: 1px solid #e4e4e4;
    border-radius: 0;
  }

  .personalize-board__detail-row {
    display: grid;
    grid-template-columns: 34px 1fr auto 36px;
    align-items: center;
    align-content: center;
    gap: 0 14px;
    min-block-size: 64px;
    margin: 0;
    padding: 14px 16px 14px 20px;
    border-block-start: 1px solid #e8e8e8;
  }

  .personalize-board__detail-row:first-child {
    border-block-start: 0;
  }

  .personalize-board__detail-row--message {
    align-items: flex-start;
    padding-block: 16px;
  }

  /* The content wrapper dissolves into the row grid so the badge and edit button
     can sit level with the label/sublabel (rows 1-2) while the input escapes the
     content column and spans full width on its own row. */
  .personalize-board__detail-content {
    display: contents;
  }

  .personalize-board__detail-content > .personalize-board__detail-label {
    grid-column: 2;
    grid-row: 1;
  }

  .personalize-board__detail-content > .personalize-board__detail-sublabel {
    grid-column: 2;
    grid-row: 2;
    margin-block: 4px 0;
  }

  .personalize-board__detail-content > .personalize-board__detail-input {
    grid-column: 2 / -1;
    grid-row: 3;
    margin-block-start: 6px;
  }

  .personalize-board__detail-content > .personalize-board__logo-field {
    grid-column: 2 / -1;
    grid-row: 4;
  }

  .personalize-board__detail-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    inline-size: 28px;
    block-size: 28px;
    border: 2px solid #333333;
    border-radius: 0;
  }

  .personalize-board__detail-icon--event {
    border-radius: 50%;
  }

  .personalize-board__detail-icon--event::before,
  .personalize-board__detail-icon--event::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    background: #333333;
    transform: translate(-50%, -50%);
  }

  .personalize-board__detail-icon--event::before {
    inline-size: 2px;
    block-size: 16px;
  }

  .personalize-board__detail-icon--event::after {
    inline-size: 16px;
    block-size: 2px;
  }

  .personalize-board__detail-icon--recipient::before,
  .personalize-board__detail-icon--sender::before,
  .personalize-board__detail-icon--venue::before,
  .personalize-board__detail-icon--date::before,
  .personalize-board__detail-icon--location::before {
    content: "";
    position: absolute;
    inset-inline-start: 5px;
    inset-inline-end: 5px;
    inset-block-start: 8px;
    block-size: 2px;
    background: #333333;
    box-shadow: 0 6px 0 #333333;
  }

  .personalize-board__detail-icon--sender {
    border-radius: 50%;
  }

  .personalize-board__detail-icon--date::after {
    content: "";
    position: absolute;
    inset-block-start: -5px;
    inset-inline-start: 6px;
    inline-size: 12px;
    block-size: 7px;
    border-inline: 2px solid #333333;
  }

  .personalize-board__detail-icon--location {
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
  }

  .personalize-board__detail-icon--location::before {
    inset-block-start: 8px;
    inset-inline-start: 8px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    box-shadow: none;
    transform: rotate(45deg);
  }

  .personalize-board__detail-icon--message {
    border-radius: 4px 4px 4px 0;
    margin-block-start: 2px;
  }

  .personalize-board__detail-icon--message::before {
    content: "";
    position: absolute;
    inset-inline-start: 5px;
    inset-inline-end: 5px;
    inset-block-start: 7px;
    block-size: 2px;
    background: #333333;
    box-shadow: 0 5px 0 #333333;
  }

  .personalize-board__detail-label {
    font-size: 10px!important;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
  }

  .personalize-board__detail-sublabel {
    color: #888888;
    font-size: 11px!important;
    font-weight: 400;
    line-height: 1.3;
    margin-block: 1px 2px;
  }

  .personalize-board__detail-input {
    inline-size: 100%;
    min-inline-size: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: #222222;
    font: inherit;
    font-size: 14px!important;
    font-weight: 500;
    line-height: 1.4;
  }

  .personalize-board__detail-input:not([readonly]) {
    border-block-end: 1px solid #c9c9c9;
    padding-block: 4px;
  }

  .personalize-board__detail-date-native {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    opacity: 0;
    pointer-events: none;
    border: 0;
    padding: 0;
  }

  .personalize-board__message-output {
    resize: none;
    min-block-size: 72px;
    field-sizing: content;
  }

  .personalize-board__detail-textarea {
    resize: none;
    min-block-size: 20px;
    field-sizing: content;
  }

  /* === Status badges — Outerbloom status-badge colour spec ===
     Spec: 24px height, 14px / 600 semibold, ALL CAPS, pill radius.
       NOT DETECTED        text #40586F  surface #EEF3F6  border #5C738A
       NEEDS CONFIRMATION  text #75460F  surface #FBF1E5  border #B8742D
       VERIFIED            text #3F5B45  surface #EDF3ED  border #58705A
       INVALID             text #8A2F2F  surface #F9ECEC  border #A53A3A
     Icons use `.pob-ic { background-color: currentColor }`, so `color: inherit`
     on the icon makes it follow each state's text colour. */
  .personalize-board__detail-badge {
    display: inline-flex;
    flex: 0 0 auto;
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    align-items: center;
    gap: 6px;
    min-block-size: 24px;
    padding: 2px 12px;
    box-sizing: border-box;
    background: #EDF3ED;
    border: 1px solid #58705A;
    border-radius: 9999px;
    color: #3F5B45;
    font-size: 14px!important;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  }

  /* NEEDS CONFIRMATION */
  .personalize-board__detail-badge.is-warn {
    background: #FBF1E5;
    border-color: #B8742D;
    color: #75460F;
  }

  /* INVALID — e.g. delivery city confirmed but not serviceable. */
  .personalize-board__detail-badge.is-invalid {
    background: #F9ECEC;
    border-color: #A53A3A;
    color: #8A2F2F;
  }

  .personalize-board__detail-badge-icon {
    display: block;
    flex: 0 0 auto;
    color: inherit;
  }

  .personalize-board__detail-badge-warn-icon {
    display: none;
  }

  .personalize-board__detail-badge.is-warn .personalize-board__detail-badge-warn-icon,
  .personalize-board__detail-badge.is-invalid .personalize-board__detail-badge-warn-icon {
    display: block;
  }

  .personalize-board__detail-badge.is-warn .personalize-board__detail-badge-check,
  .personalize-board__detail-badge.is-invalid .personalize-board__detail-badge-check {
    display: none;
  }

  /* NOT DETECTED — guidance, not an error. */
  .personalize-board__detail-badge.is-not-detected {
    background: #EEF3F6;
    border-color: #5C738A;
    color: #40586F;
  }

  .personalize-board__detail-badge.is-not-detected .personalize-board__detail-badge-icon {
    display: none;
  }

  /* Clickable confirm badge defaults to NEEDS CONFIRMATION until confirmed. */
  .personalize-board__detail-badge--confirm {
    font: inherit;
    font-size: 14px!important;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    background: #FBF1E5;
    border-color: #B8742D;
    color: #75460F;
  }

  .personalize-board__detail-badge--confirm .personalize-board__detail-badge-check {
    display: none;
  }

  .personalize-board__detail-badge--confirm .personalize-board__detail-badge-warn-icon {
    display: block;
    color: inherit;
  }

  .personalize-board__detail-badge--confirm:hover {
    background: #F6E6CE;
  }

  /* VERIFIED */
  .personalize-board__detail-badge--confirm.is-confirmed {
    cursor: default;
    background: #EDF3ED;
    border-color: #58705A;
    color: #3F5B45;
  }

  .personalize-board__detail-badge--confirm.is-confirmed .personalize-board__detail-badge-check {
    display: block;
  }

  .personalize-board__detail-badge--confirm.is-confirmed .personalize-board__detail-badge-warn-icon {
    display: none;
  }

  .personalize-board__detail-row.is-needs-confirmation {
    background: #FDF8EF;
  }

  .personalize-board__detail-row.is-field-error {
    background: #fff5f4;
    box-shadow: inset 3px 0 0 var(--pbd-accent-color, #640000);
  }

  .personalize-board__location-loader[hidden] {
    display: none;
  }

  .personalize-board__location-loader {
    display: inline-block;
    flex: 0 0 auto;
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    inline-size: 16px;
    block-size: 16px;
    border: 2px solid #e4e4e4;
    border-top-color: #595959;
    border-radius: 50%;
    animation: personalize-board-spin 800ms linear infinite;
  }

  /* === Ship-to-city warning + suggested boards === */

  .personalize-board__ship-warning[hidden] {
    display: none;
  }

  .personalize-board__ship-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-block-start: 12px;
    padding: 12px 14px;
    background: #fff1f0;
    border: 1px solid #ffc4be;
    border-radius: 0;
    color: var(--pbd-accent-color, #640000);
  }

  .personalize-board__ship-warning [data-ship-warning-text] {
    margin: 0;
    font-size: 13px!important;
    font-weight: 600;
    line-height: 1.4;
  }

  .personalize-board__ship-suggestion[hidden] {
    display: none;
  }

  .personalize-board__ship-suggestion {
    margin-block-start: 12px;
    /* The host theme sizes this column by content; without inline-size
       containment the carousel's max-content (every card at natural image
       width) inflates the whole page past the viewport. */
    contain: inline-size;
  }

  .personalize-board__ship-suggestion-title {
    margin: 0 0 10px;
    font-size: 12px!important;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.4;
  }

  .personalize-board__ship-suggestion-title span {
    display: block;
    color: #888888;
    font-size: 11px!important;
    font-weight: 400;
    text-transform: none;
  }

  [data-ship-suggestion-carousel] {
    /* Containing block for the nav buttons, which overlay the card edges. */
    position: relative;
  }

  .personalize-board__ship-suggestion-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-block-end: 4px;
    min-inline-size: 0;
  }

  .personalize-board__ship-suggestion-grid::-webkit-scrollbar {
    display: none;
  }

  .personalize-board__ship-suggestion-grid > a {
    display: flex;
    flex: 0 0 calc((100% - 30px) / 3.5);
    scroll-snap-align: start;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: inherit;
  }

  .personalize-board__ship-suggestion-grid img {
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
    border: 1px solid #e4e4e4;
  }

  .personalize-board__ship-suggestion-grid span {
    font-size: 11px!important;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .personalize-board__ship-suggestion-grid .personalize-board__ship-suggestion-price {
    -webkit-line-clamp: 1;
    font-weight: 600;
  }

  [data-ship-suggestion-prev],
  [data-ship-suggestion-next] {
    /* Overlaid on the left/right card edges (vertically centred) so the grid
       stays full width and the cards line up flush with the container instead
       of being inset by the buttons. */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 26px;
    block-size: 26px;
    padding: 0;
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    background: var(--pbd-bg-color, #ffffff);
    color: #333333;
    font-size: 16px!important;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }

  [data-ship-suggestion-prev] {
    inset-inline-start: 5px;
  }

  [data-ship-suggestion-next] {
    inset-inline-end: 5px;
  }

  [data-ship-suggestion-prev]:disabled,
  [data-ship-suggestion-next]:disabled {
    opacity: 0.35;
    cursor: default;
  }

  /* === Logo upload field (nested in Board Sender row) === */

  .personalize-board__detail-row--with-logo {
    align-items: flex-start;
    padding-block: 16px;
  }

  .personalize-board__manual-group--logo .personalize-board__logo-field {
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: 0;
  }

  .personalize-board__logo-field {
    margin-block-start: 8px;
    padding-block-start: 10px;
    border-block-start: 1px dashed #e4e4e4;
  }

  .personalize-board__logo-field-label {
    display: block;
  }

  .personalize-board__logo-field-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-block-start: 6px;
  }

  .personalize-board__detail-optional {
    font-size: 10px!important;
    font-weight: 500;
    color: #888888;
    text-transform: none;
    letter-spacing: 0;
  }

  .personalize-board__logo-preview[hidden] {
    display: none;
  }

  .personalize-board__logo-preview-img {
    display: block;
    inline-size: 56px;
    block-size: 56px;
    border: 1px solid #e4e4e4;
    border-radius: 0;
    object-fit: contain;
    padding: 4px;
    background: #f8f8f8;
  }

  .personalize-board__logo-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .personalize-board__logo-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--pbd-border-color, #e2e4e6);
    border-radius: 0;
    background: transparent;
    color: #2e2e2e;
    font: inherit;
    font-size: 12px!important;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms ease, border-color 150ms ease;
  }

  .personalize-board__logo-action:hover {
    background: #f5f5f5;
    border-color: #c8c8c8;
  }

  .personalize-board__logo-action:disabled {
    opacity: 0.55;
    cursor: wait;
  }

  .personalize-board__logo-action:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 2px;
  }

  .personalize-board__logo-action--remove {
    color: var(--pbd-accent-color, #640000);
    border-color: #e8c8c5;
  }

  .personalize-board__logo-action--remove:hover {
    background: #fff5f4;
    border-color: #f5c2be;
  }

  .personalize-board__logo-action[hidden] {
    display: none;
  }

  /* Kept rendered (so the scripted .click() opens the picker in every WebView) but
     pinned to the viewport: an absolutely positioned off-flow input is a scroll
     target, and focusing it when the picker opens threw the page hundreds of
     pixels down and back again on mobile. position: fixed is always "in view", so
     the browser never scrolls for it. */
  .personalize-board__logo-file-input {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .personalize-board__detail-edit-btn {
    display: inline-flex;
    flex: 0 0 auto;
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border: 1px solid var(--pbd-border-color, #e2e4e6);
    border-radius: 0;
    padding: 0;
    background: transparent;
    color: #555555;
    cursor: pointer;
  }

  .personalize-board__detail-edit-btn:hover {
    background: #f5f5f5;
    border-color: #c8c8c8;
  }

  .personalize-board__details-error {
    margin: 10px 0 0;
    padding: 10px 14px;
    background: #fff5f4;
    border: 1px solid #f5c2be;
    border-radius: 0;
    color: #b83830;
    font-size: 13px!important;
    font-weight: 500;
    line-height: 1.45;
  }

  .personalize-board__details-confirmation {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 0;
    border: 1px solid #d7e7ca;
    border-radius: 0;
    padding: 14px 24px;
    background: #fbfff6;
    color: #4f714d;
    font-size: 14px!important;
    font-weight: 600;
    line-height: 1.35;
  }

  .personalize-board__check-icon {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    inline-size: 24px;
    block-size: 24px;
    align-items: center;
    justify-content: center;
    border: 2px solid #6d9f69;
    border-radius: 50%;
  }

  .personalize-board__check-icon::before {
    content: "";
    inline-size: 9px;
    block-size: 5px;
    border-inline-start: 2px solid #6d9f69;
    border-block-end: 2px solid #6d9f69;
    transform: rotate(-45deg);
  }

  .personalize-board__text-button {
    border: 0;
    padding: 4px 0;
    background: transparent;
    color: #333333;
    font: inherit;
    font-size: 13px!important;
    line-height: 1.2;
    text-decoration: underline;
    cursor: pointer;
  }

  .personalize-board__generated-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    border-radius: 999px;
    padding: 7px 14px;
    background: #f4e9ec;
    color: #884e5c;
    font-size: 11px!important;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .personalize-board__regenerate-button {
    inline-size: 100%;
    margin-block-start: 16px;
  }

  @keyframes personalize-board-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .personalize-board__secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 16px 0 0;
    color: #666666;
    font-size: 13px!important;
    line-height: 1.4;
    text-align: center;
  }

  .personalize-board__lock {
    position: relative;
    display: inline-block;
    inline-size: 14px;
    block-size: 12px;
    border: 2px solid #777777;
    border-radius: 0;
  }

  .personalize-board__lock::before {
    content: "";
    position: absolute;
    inset-block-start: -9px;
    inset-inline-start: 50%;
    inline-size: 8px;
    block-size: 9px;
    border: 2px solid #777777;
    border-block-end: 0;
    border-radius: 0;
    transform: translateX(-50%);
  }

  /* === Board image preview (details step) === */
  .personalize-board__img-preview[hidden] {
    display: none;
  }

  .personalize-board__img-preview {
    margin-block-start: 20px;
  }

  .personalize-board__img-preview-wrap {
    position: relative;
    border: 1px solid #e4e4e4;
    border-radius: 0;
    padding: 5px;
  }

  .personalize-board__img-preview-board {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .personalize-board__img-preview-loader[hidden] {
    display: none;
  }

  .personalize-board__img-preview-loader {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
  }

  .personalize-board__img-preview-loader-spinner {
    inline-size: 28px;
    block-size: 28px;
    border: 3px solid #e4e4e4;
    border-top-color: #595959;
    border-radius: 50%;
    animation: personalize-board-spin 800ms linear infinite;
  }

  /* === Board CSS illustration (replaces PNG background) === */
  .personalize-board__board-bg {
    block-size: unset;
    aspect-ratio: 800 / 600;
    position: relative;
    background: var(--pbd-bg-color, #ffffff);
  }

  .personalize-board__board-frame {
    position: absolute;
    inset: 2.1% 3.1% 26% 3.1%;
    background: var(--pbd-bg-color, #ffffff);
    border: 1.5px solid var(--pbd-border-color, #e2e4e6);
    border-radius: 0;
    box-shadow: 0 2px 22px rgba(0, 0, 0, 0.07);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .personalize-board__board-main {
    position: relative;
    flex: 1;
    background: #f0f0f0;
    border-radius: 2px;
  }

  .personalize-board__board-panels {
    height: 23.5%;
    display: flex;
    gap: 0.7%;
  }

  .personalize-board__board-panel-l {
    position: relative;
    width: 32%;
    background: #f0f0f0;
    border-radius: 2px;
  }

  /* The markup carries width="160" height="60" as a presentational hint, so with
     only `width` declared here the logo was stretched to a fixed 60px tall. The
     panel is a percentage of the aspect-locked board and is shorter than that on
     mobile, so the logo spilled out of its slot. Free the height and cap both
     axes against the panel so any logo scales down to fit inside it. */
  .personalize-board__board-panel-l img {
    position: absolute;
    width: 50px;
    block-size: auto;
    max-inline-size: 88%;
    max-block-size: 82%;
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .personalize-board__board-panel-r {
    position: relative;
    flex: 1;
    background: #f0f0f0;
    border-radius: 2px;
  }

  .personalize-board__board-leg {
    position: absolute;
    width: 5px;
    top: 73.8%;
    bottom: 75px;
    background: #5a5a5a;
    border-radius: 2px 2px 3px 3px;
    transform-origin: top center;
  }

  .personalize-board__board-leg--l {
    left: 38%;
    transform: rotate(25deg);
  }

  .personalize-board__board-leg--r {
    left: 60.5%;
    transform: rotate(336deg);
  }

  .personalize-board__img-preview-overlay {
    position: absolute;
    inset: 8% 14% 42% 14%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
    text-align: center;
    overflow: hidden;
    pointer-events: none;
  }

  .personalize-board__img-preview-occasion {
    transform: translateZ(0); /* WebView IME repaint layer (no centring transform here) */
    color: #8a7060;
    font-size: 20px!important;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
    padding-top: 30px;
  }

  .personalize-board__img-preview-recipient {
    color: #1a1a1a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px!important;
    font-weight: 700;
    line-height: 1.25;
    margin: 2px 0 0;
    overflow-wrap: anywhere;
  }

  .personalize-board__img-preview-message {
    color: #333333;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px!important;
    line-height: 1.55;
    margin: 6px 0 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
    padding: 0 40px;
    position: absolute;
    top: 60%;
    /* Anchored to both edges and centred by text-align, NOT by a horizontal translate.
       With width:100% and left:50% the box ran from the centre to well past the right
       edge and only looked centred because the transform pulled it back — so anything
       that drops that translate leaves the text jammed against the right edge and
       clipped, which is what Safari on macOS showed. Only the vertical offset needs a
       transform now, and losing it can no longer break the horizontal layout. */
    left: 0;
    right: 0;
    width: auto;
    /* translateZ(0) promotes a compositing layer so Android in-app WebView
       repaints typed IME text; kept alongside the vertical centring. */
    transform: translateY(-50%) translateZ(0);
    text-align: center;
  }

  .personalize-board__img-preview-logo {
    position: absolute;
    top: 60%;
    left: 7%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    width: 84px;
    height: 57px;
  }

  .personalize-board__img-preview-logo img {
    height: 50px;
    object-fit: contain;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .personalize-board__img-preview-logo:has(img[hidden]) {
    display: none;
  }

  .personalize-board__img-preview-sender {
    position: absolute;
    top: 50%;
    /* Same reason as the message above: edges, not a horizontal translate. */
    left: 0;
    right: 0;
    width: auto;
    /* translateZ(0): WebView IME repaint layer, appended to the vertical centring. */
    transform: translateY(-50%) translateZ(0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555555;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    text-align: center;
    overflow-wrap: anywhere;
    pointer-events: none;
    margin: 0;
  }

  .personalize-board__img-preview-event-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-block-start: 6px;
  }

  .personalize-board__img-preview-date,
  .personalize-board__img-preview-venue,
  .personalize-board__img-preview-address {
    display: block;
    color: #666666;
    font-size: 8px!important;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .personalize-board__img-preview-occasion:empty,
  .personalize-board__img-preview-recipient:empty,
  .personalize-board__img-preview-message:empty,
  .personalize-board__img-preview-sender:empty,
  .personalize-board__img-preview-date:empty,
  .personalize-board__img-preview-venue:empty,
  .personalize-board__img-preview-address:empty {
    display: none;
  }

  .personalize-board__img-preview-event-details:empty {
    display: none;
  }

  /* === Editable board preview fields === */
  .personalize-board__img-preview-occasion[contenteditable]:empty {
    display: block;
  }

  .personalize-board__img-preview-message[contenteditable]:empty {
    display: block;
  }

  .personalize-board__img-preview-sender[contenteditable]:empty {
    display: flex;
    position: absolute;
    inset: 0;
    transform: none;
  }

  .personalize-board__img-preview-occasion[contenteditable],
  .personalize-board__img-preview-message[contenteditable],
  .personalize-board__img-preview-sender[contenteditable] {
    cursor: text;
    pointer-events: auto;
    border-radius: 4px;
    outline-offset: 2px;
    transition: background-color 0.15s ease, outline-color 0.15s ease;
  }

  .personalize-board__img-preview-occasion[contenteditable]:hover,
  .personalize-board__img-preview-message[contenteditable]:hover,
  .personalize-board__img-preview-sender[contenteditable]:hover {
    background-color: rgba(59, 111, 186, 0.06);
    outline: 1px dashed rgba(59, 111, 186, 0.45);
  }

  .personalize-board__img-preview-occasion[contenteditable]:focus,
  .personalize-board__img-preview-message[contenteditable]:focus,
  .personalize-board__img-preview-sender[contenteditable]:focus {
    background-color: rgba(59, 111, 186, 0.08);
    outline: 1px solid #3b6fba;
  }

  .personalize-board__img-preview-occasion[contenteditable]:empty::before,
  .personalize-board__img-preview-message[contenteditable]:empty::before {
    content: attr(data-placeholder);
    color: var(--pbd-placeholder-color, #6b7280);
    font-weight: 400;
    text-transform: none;
    pointer-events: none;
  }

  /* === Editable sender placeholder icon === */
  .personalize-board__board-panel-sender-icon {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #b8b8b8;
    pointer-events: none;
  }

  .personalize-board__board-panel-r:has(.personalize-board__img-preview-sender:empty) .personalize-board__board-panel-sender-icon {
    display: flex;
  }

  /* === Editable board logo === */
  .personalize-board__board-panel-l--editable {
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .personalize-board__board-panel-l--editable:hover {
    background-color: #e6e6e6;
  }

  .personalize-board__board-panel-logo-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px!important;
    font-weight: 700;
    color: #b8b8b8;
    line-height: 1;
    pointer-events: none;
  }

  /* === SVG image fills the visual area === */
  .personalize-board__option-img {
    display: block;
    inline-size: 100%;
    min-block-size: 180px;
    object-fit: contain;
    object-position: center;
  }

  /* === Ai badge (top-left of AI visual) === */
  .personalize-board__ai-label {
    position: absolute;
    z-index: 3;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 12px!important;
    font-weight: 800;
    font-style: normal;
    line-height: 1;
  }

  /* === Phone centered and adapted for dark background === */
  .personalize-board__visual--ai .personalize-board__phone {
    inset-inline-start: 50%;
    transform: translateX(-50%);
    border-color: #cccccc;
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  }

  .personalize-board__visual--ai .personalize-board__phone-notch {
    background: #cccccc;
  }

  /* === Document card inside phone === */
  .personalize-board__phone-doc {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 5px;
    inset-inline-end: 5px;
    inset-block-end: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 2px;
    background: #f8f8f8;
    padding: 0 4px;
    overflow: hidden;
  }

  .personalize-board__phone-doc::before {
    content: "";
    display: block;
    align-self: stretch;
    block-size: 2px;
    margin-inline: 6px;
    background: #e8e8e8;
    box-shadow: 0 6px 0 #eeeeee, 0 12px 0 #eeeeee;
    margin-block-end: 8px;
  }

  .personalize-board__phone-doc-brand {
    display: block;
    color: #1a1a1a;
    font-size: 6.5px!important;
    font-weight: 800;
    font-style: normal;
    font-family: inherit;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
  }

  .personalize-board__phone-doc-sub {
    display: block;
    color: #888888;
    font-size: 5.5px!important;
    font-weight: 500;
    font-style: normal;
    font-family: inherit;
    line-height: 1.3;
    text-align: center;
  }

  /* === Floral corner decoration on manual card === */
  .personalize-board__card-floral {
    position: absolute;
    z-index: 2;
    inset-block-start: 2px;
    inset-inline-end: 6px;
    inline-size: 36px;
    block-size: 30px;
    pointer-events: none;
    font-size: 0!important;
  }

  .personalize-board__card-floral::before {
    content: "✿";
    position: absolute;
    inset-block-start: -2px;
    inset-inline-end: 0;
    color: #c07870;
    font-size: 15px!important;
    font-style: normal;
    font-family: sans-serif;
    line-height: 1;
  }

  .personalize-board__card-floral::after {
    content: "✿";
    position: absolute;
    inset-block-start: 9px;
    inset-inline-end: 14px;
    color: #e0aba4;
    font-size: 10px!important;
    font-style: normal;
    font-family: sans-serif;
    line-height: 1;
  }

  /* === Step 3: Delivery === */

  .personalize-board.is-step-delivery .personalize-board__header,
  .personalize-board.is-step-delivery .personalize-board__ai-flow,
  .personalize-board.is-step-delivery .personalize-board__manual-flow {
    display: none;
  }

  .personalize-board__delivery-header {
    margin-block-end: 20px;
  }

  .personalize-board__delivery-subtitle {
    margin: 6px 0 0;
    color: #888888;
    font-size: 13px!important;
    line-height: 1.45;
  }

  .personalize-board__delivery-section {
    margin-block-end: 18px;
  }

  .personalize-board__delivery-section:last-child {
    margin-block-end: 0;
  }

  .personalize-board__delivery-label {
    display: block;
    margin-block-end: 10px;
    color: #1a1a1a;
    font-size: 12px!important;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .personalize-board__delivery-optional {
    color: #888888;
    font-size: 11px!important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
  }

  /* --- Date picker --- */

  .personalize-board__date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Same guard as the ship suggestion carousel: keep the scroll row's
       intrinsic width from widening a content-sized ancestor. */
    contain: inline-size;
  }

  .personalize-board__date-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-block-end: 4px;
    flex: 1 1 0;
    min-inline-size: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .personalize-board__date-scroll::-webkit-scrollbar {
    display: none;
  }

  .personalize-board__date-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
  }

  .personalize-board__date-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1.5px solid var(--pbd-border-color, #e2e4e6);
    border-radius: 50%;
    padding: 0;
    background: var(--pbd-bg-color, #ffffff);
    color: #333333;
    font: inherit;
    cursor: pointer;
    transition:
      border-color 150ms ease,
      background 150ms ease,
      color 150ms ease;
  }

  .personalize-board__date-btn:hover {
    border-color: #888888;
  }

  .personalize-board__date-btn.is-selected {
    border-color: var(--pbd-text-color, #212121);
    background: var(--pbd-text-color, #212121);
    color: #ffffff;
  }

  .personalize-board__date-btn:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 2px;
  }

  .personalize-board__date-btn:disabled {
    background: #f5f5f5;
    border-color: var(--pbd-border-color, #e2e4e6);
    color: #cccccc;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
  }

  .personalize-board__date-day {
    font-size: 9px!important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #555555;
  }

  .personalize-board__date-num {
    font-size: 16px!important;
    font-weight: 700;
    line-height: 1;
  }

  .personalize-board__date-cal-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .personalize-board__date-cal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1.5px solid var(--pbd-border-color, #e2e4e6);
    border-radius: 50%;
    padding: 0;
    background: var(--pbd-bg-color, #ffffff);
    color: #555555;
    font: inherit;
    cursor: pointer;
    transition:
      border-color 150ms ease,
      background 150ms ease,
      color 150ms ease;
  }

  .personalize-board__date-cal-btn:hover {
    border-color: #888888;
  }

  .personalize-board__date-cal-btn:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 2px;
  }

  .personalize-board__date-cal-btn.is-selected {
    border-color: var(--pbd-text-color, #212121);
    background: var(--pbd-text-color, #212121);
    color: #ffffff;
  }

  .personalize-board__date-cal-btn:disabled {
    background: #f5f5f5;
    border-color: var(--pbd-border-color, #e2e4e6);
    color: #cccccc;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
  }

  .personalize-board__date-cal-label {
    font-size: 9px!important;
    font-weight: 700!important;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #555555;
  }

  .personalize-board__date-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    inline-size: 100%;
    block-size: 100%;
  }

  .personalize-board__date-row.is-error .personalize-board__date-scroll,
  .personalize-board__date-row.is-error .personalize-board__date-cal-btn {
    outline: none;
  }

  /* --- Time picker --- */

  .personalize-board__time-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .personalize-board__time-grid.is-error {
    outline: none;
  }

  .personalize-board__time-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1.5px solid var(--pbd-border-color, #e2e4e6);
    border-radius: 0;
    background: var(--pbd-bg-color, #ffffff);
    color: #444444;
    font: inherit;
    cursor: pointer;
    text-align: center;
    transition:
      border-color 150ms ease,
      box-shadow 150ms ease;
  }

  .personalize-board__time-option:hover {
    border-color: #888888;
  }

  .personalize-board__time-option.is-selected {
    border-color: var(--pbd-text-color, #212121);
    border-width: 2px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  }

  .personalize-board__time-option:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 2px;
  }

  .personalize-board__time-option:disabled {
    background: #f5f5f5;
    border-color: var(--pbd-border-color, #e2e4e6);
    color: #bbbbbb;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
    opacity: 0.6;
  }

  .personalize-board__time-option:disabled .personalize-board__time-icon svg {
    opacity: 0.4;
  }

  .personalize-board__time-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 26px;
    block-size: 26px;
    color: #555555;
  }

  .personalize-board__time-icon--morning {
    color: #e0960a;
  }

  .personalize-board__time-icon--afternoon {
    color: #d06800;
  }

  .personalize-board__time-icon--evening {
    color: #4a5580;
  }

  .personalize-board__time-name {
    font-size: 11px!important;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .personalize-board__time-range {
    color: #888888;
    font-size: 10px!important;
    font-weight: 500;
    line-height: 1.2;
  }

  /* --- Delivery inputs --- */

  .personalize-board__delivery-text,
  .personalize-board__delivery-textarea,
  .personalize-board__delivery-select {
    display: block;
    inline-size: 100%;
    border: 1px solid #e2e4e6;
    border-radius: 0;
    padding: 11px 14px;
    background: var(--pbd-bg-color, #ffffff);
    color: #303030;
    font: inherit;
    font-size: 14px!important;
    line-height: 1.45;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 3%);
    transition: border-color 150ms ease;
  }

  /* The rule above sets `display`, which beats the UA stylesheet's `[hidden] { display: none }`
     (class selector wins over the UA rule), so a field toggled with `el.hidden = true` — e.g.
     the free-text postal code input for "Kota Lainnya" in personalize-board.js — stayed
     visible. Restore the hidden semantics for this group. */
  .personalize-board__delivery-text[hidden],
  .personalize-board__delivery-textarea[hidden],
  .personalize-board__delivery-select[hidden] {
    display: none;
  }

  .personalize-board__delivery-text:focus,
  .personalize-board__delivery-textarea:focus,
  .personalize-board__delivery-select:focus {
    border-color: var(--pbd-text-color, #212121);
    outline: none;
  }

  .personalize-board__delivery-text:focus-visible,
  .personalize-board__delivery-textarea:focus-visible,
  .personalize-board__delivery-select:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 2px;
  }

  .personalize-board__delivery-textarea:disabled,
  .personalize-board__delivery-select:disabled,
  [data-zip-trigger]:disabled {
    background: #f2f2f2;
    color: #6b6b6b;
    cursor: not-allowed;
  }

  .personalize-board__field-error {
    color: var(--pbd-accent-color, #640000);
    font-size: 0.75rem!important;
    margin-block-start: 4px;
    margin-block-end: 0;
  }

  .personalize-board__delivery-text::placeholder,
  .personalize-board__delivery-textarea::placeholder {
    color: var(--pbd-placeholder-color, #6b7280);
    opacity: 1;
  }

  .personalize-board__delivery-textarea {
    min-block-size: 60px;
    resize: vertical;
  }

  .personalize-board__delivery-textarea--address {
    min-block-size: 80px;
  }

  .personalize-board__delivery-select-wrap {
    position: relative;
  }

  .personalize-board__delivery-select-wrap::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 16px;
    inline-size: 7px;
    block-size: 7px;
    border-inline-end: 2px solid #666666;
    border-block-end: 2px solid #666666;
    pointer-events: none;
    transform: translateY(-65%) rotate(45deg);
  }

  .personalize-board__delivery-select {
    appearance: none;
    padding-inline-end: 38px;
    cursor: pointer;
  }

  /* --- Zip select2-like --- */

  .personalize-board__zip-wrap {
    position: relative;
  }

  .personalize-board__zip-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    inline-size: 100%;
    border: 1px solid #e2e4e6;
    border-radius: 0;
    padding: 11px 14px;
    background: var(--pbd-bg-color, #ffffff);
    color: #303030;
    font: inherit;
    font-size: 14px!important;
    line-height: 1.45;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 3%);
    cursor: pointer;
    text-align: left;
    transition: border-color 150ms ease;
  }

  .personalize-board__zip-trigger:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 2px;
    border-color: var(--pbd-text-color, #212121);
  }

  .personalize-board__zip-trigger.is-error {
    border-color: var(--pbd-accent-color, #640000);
  }

  .personalize-board__zip-arrow {
    flex-shrink: 0;
    color: #666666;
    transition: transform 150ms ease;
  }

  .personalize-board__zip-trigger[aria-expanded="true"] .personalize-board__zip-arrow {
    transform: rotate(180deg);
  }

  .personalize-board__zip-dropdown {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    inline-size: 100%;
    z-index: 100;
    background: var(--pbd-bg-color, #ffffff);
    border: 1px solid #e2e4e6;
    border-radius: 0;
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
    margin-block-start: 2px;
  }

  .personalize-board__zip-search-wrap {
    padding: 8px;
    border-block-end: 1px solid #f0f0f0;
  }

  .personalize-board__zip-search {
    display: block;
    inline-size: 100%;
    border: 1px solid #e2e4e6;
    border-radius: 0;
    padding: 8px 10px;
    background: var(--pbd-bg-color, #ffffff);
    color: #303030;
    font: inherit;
    font-size: 13px!important;
    outline: none;
    transition: border-color 150ms ease;
  }

  .personalize-board__zip-search:focus {
    border-color: var(--pbd-text-color, #212121);
  }

  .personalize-board__zip-options {
    list-style: none;
    padding: 0;
    margin: 0;
    max-block-size: 200px;
    overflow-y: auto;
  }

  .personalize-board__zip-option {
    padding: 9px 12px;
    font-size: 13px!important;
    cursor: pointer;
    border-block-end: 1px solid #f5f5f5;
    transition: background 100ms ease;
  }

  .personalize-board__zip-option:last-child {
    border-block-end: none;
  }

  .personalize-board__zip-option:hover {
    background: #f3f4f6;
  }

  .personalize-board__zip-empty,
  .personalize-board__zip-loading {
    padding: 12px;
    text-align: center;
    font-size: 13px!important;
    color: #888888;
    list-style: none;
  }

  /* --- Two-column layout --- */

  .personalize-board__delivery-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-block-end: 18px;
  }

  /* --- ADD TO CART button --- */

  .personalize-board__delivery-cta {
    margin-block-start: 8px;
  }

  .personalize-board__add-to-cart {
    display: flex;
    inline-size: 100%;
    min-block-size: 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pbd-text-color, #212121);
    border-radius: 0;
    padding: 14px 24px;
    background: var(--pbd-text-color, #212121);
    color: #ffffff;
    font: inherit;
    font-size: 14px!important;
    font-weight: 800!important;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 9px rgb(0 0 0 / 12%);
    transition:
      background 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

  .personalize-board__add-to-cart:hover {
    background: #333333;
    border-color: #333333;
    box-shadow: 0 5px 14px rgb(0 0 0 / 15%);
    transform: translateY(-1px);
  }

  .personalize-board__add-to-cart:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 3px;
  }

  /* === Message row: inline REGENERATE + EDIT DIRECTLY header === */

  .personalize-board__detail-row--message {
    grid-template-columns: 34px 1fr auto;
    align-items: flex-start;
  }

  .personalize-board__message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: 6px;
  }

  .personalize-board__message-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  .personalize-board__message-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid var(--pbd-border-color, #e2e4e6);
    border-radius: 0;
    background: transparent;
    color: #444444;
    font: inherit;
    font-size: 10px!important;
    font-weight: 700!important;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
  }

  .personalize-board__message-action-btn:hover {
    background: #f5f5f5;
    border-color: #b0b0b0;
  }

  .personalize-board__message-action-btn:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 2px;
  }

  .personalize-board__message-action-icon {
    display: block;
    flex-shrink: 0;
    fill: currentColor;
  }

  /* === Message section below preview board === */

  .personalize-board__preview-section-label {
    margin-block-end: 10px;
  }

  .personalize-board__message-section {
    margin-block-start: 16px;
    padding-block-start: 16px;
    border-block-start: 1px solid #e2e4e6;
  }

  .personalize-board__message-section .personalize-board__message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: 8px;
  }

  .personalize-board__message-section .personalize-board__detail-label {
    color: var(--pbd-text-color, #212121);
    font-size: 11px!important;
  }

  .personalize-board__message-section .personalize-board__message-action-btn {
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    gap: 5px;
  }

  .personalize-board__message-section .personalize-board__message-action-btn:hover {
    background: transparent;
    border: none;
    color: #000000;
  }

  .personalize-board__message-section .personalize-board__detail-input {
    background: #f5f5f3;
    border-radius: 8px;
    padding: 14px 16px;
    box-sizing: border-box;
  }

  /* === Confirmation popup === */

  .personalize-board__confirm[hidden] {
    display: none;
  }

  .personalize-board__confirm {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .personalize-board__confirm {
      align-items: center;
    }
  }

  .personalize-board__confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 52%);
  }

  .personalize-board__confirm-sheet {
    position: relative;
    z-index: 1;
    inline-size: 100%;
    max-inline-size: 520px;
    max-block-size: 90dvh;
    overflow-y: auto;
    border-radius: 14px 14px 0 0;
    padding: 28px 24px 32px;
    background: var(--pbd-bg-color, #ffffff);
    box-shadow: 0 -8px 40px rgb(0 0 0 / 18%);
  }

  @media screen and (min-width: 750px) {
    .personalize-board__confirm-sheet {
      border-radius: 14px;
      max-block-size: 85dvh;
      box-shadow: 0 20px 60px rgb(0 0 0 / 22%);
    }
  }

  .personalize-board__confirm-title {
    margin: 0 0 4px;
    color: var(--pbd-text-color, #212121);
    font-size: 17px!important;
    font-weight: 800!important;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .personalize-board__confirm-subtitle {
    margin: 0 0 20px;
    color: #666666;
    font-size: 13px!important;
    line-height: 1.45;
  }

  .personalize-board__confirm-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-block-end: 24px;
  }

  .personalize-board__confirm-section {
    border: 1px solid #e8e8e8;
    border-radius: 0;
    overflow: hidden;
  }

  .personalize-board__confirm-section-title {
    margin: 0;
    padding: 10px 16px;
    background: #f7f7f7;
    border-block-end: 1px solid #e8e8e8;
    color: #444444;
    font-size: 10px!important;
    font-weight: 800!important;
    text-transform: uppercase;
    line-height: 1.3;
  }

  .personalize-board__confirm-list {
    margin: 0;
    padding: 0;
  }

  .personalize-board__confirm-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px;
    align-items: baseline;
    padding: 10px 16px;
    border-block-start: 1px solid #f0f0f0;
    font-size: 13px!important;
    line-height: 1.45;
  }

  .personalize-board__confirm-row[hidden] {
    display: none;
  }

  .personalize-board__confirm-row:first-child {
    border-block-start: 0;
  }

  .personalize-board__confirm-row dt {
    color: #888888;
    font-weight: 600!important;
    font-size: 11px!important;
    text-transform: uppercase;
  }

  .personalize-board__confirm-row dd {
    margin: 0;
    color: #222222;
    font-weight: 500!important;
    white-space: pre-line;
    overflow-wrap: anywhere;
  }

  .personalize-board__confirm-logo-img {
    display: block;
    inline-size: 64px;
    block-size: 64px;
    border: 1px solid #e4e4e4;
    border-radius: 0;
    object-fit: contain;
    padding: 4px;
    background: #f8f8f8;
  }

  .personalize-board__confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 12px;
  }

  .personalize-board__confirm-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 50px;
    border: 1.5px solid var(--pbd-text-color, #212121);
    border-radius: 0;
    padding: 12px 16px;
    background: transparent;
    color: var(--pbd-text-color, #212121);
    font: inherit;
    font-size: 13px!important;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
  }

  .personalize-board__confirm-edit-btn:hover {
    background: var(--pbd-text-color, #212121);
    color: #ffffff;
  }

  .personalize-board__confirm-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 50px;
    border: 1px solid var(--pbd-text-color, #212121);
    border-radius: 0;
    padding: 12px 20px;
    background: var(--pbd-text-color, #212121);
    color: #ffffff;
    font: inherit;
    font-size: 14px!important;
    font-weight: 800!important;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 9px rgb(0 0 0 / 14%);
    transition: background 150ms ease, box-shadow 150ms ease;
  }

  .personalize-board__confirm-cart-btn:hover {
    background: #333333;
    box-shadow: 0 5px 16px rgb(0 0 0 / 18%);
  }

  .personalize-board__confirm-cart-btn:disabled {
    opacity: 0.6;
    cursor: wait;
  }

  .personalize-board__confirm-edit-btn:focus-visible,
  .personalize-board__confirm-cart-btn:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 2px;
  }

  @media screen and (max-width: 749px) {

    .personalize-board__title {
      font-size: 16px!important;
    }

    .personalize-board__options,
    .personalize-board__skeleton {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .personalize-board__step-nav {
      gap: 8px;
      margin-block-end: 20px;
      padding-block-end: 14px;
    }

    .personalize-board__step-action--review {
      gap: 0;
    }

    .personalize-board__step-nav-list {
      gap: 12px;
    }

    .personalize-board__step-nav-count,
    .personalize-board__step-nav-label {
      font-size: 11px!important;
    }

    .personalize-board__step-back {
      font-size: 11px!important;
    }

    .personalize-board__step-card {
      padding: 18px 14px;
    }

    .personalize-board__board-preview-card {
      padding: 18px 14px;
    }

    .personalize-board__preview-shell {
      max-inline-size: 380px;
    }

    .personalize-board__step-head,
    .personalize-board__step-heading {
      gap: 12px;
    }

    .personalize-board__step-head--with-action {
      align-items: flex-start;
    }

    .personalize-board__step-title {
      font-size: 15px!important;
    }

    .personalize-board__upload-panel {
      grid-template-columns: 1fr;
    }

    .personalize-board__manual-flow {
      gap: 24px;
    }

    .personalize-board__manual-options {
      gap: 10px;
    }

    .personalize-board__manual-option {
      min-inline-size: 0;
    }

    .personalize-board__manual-textarea {
      padding: 14px 16px;
      font-size: 14px!important;
    }

    .personalize-board__upload-panel.has-upload-preview .personalize-board__upload-dropzone {
      display: none;
    }

    .personalize-board__regenerate-button {
      min-block-size: 50px;
      padding-inline: 14px;
    }

    .personalize-board__paste-textarea {
      min-block-size: 136px;
      padding: 16px;
      font-size: 14px!important;
    }

    .personalize-board__detail-row {
      grid-template-columns: auto 1fr auto 32px;
      gap: 0 10px;
      min-block-size: 0;
      padding: 12px 14px;
    }

    .personalize-board__detail-icon {
      display: none;
    }

    /* Icon column is gone on mobile: shift everything one column left. */
    .personalize-board__detail-row {
      grid-template-columns: 1fr auto 32px;
    }

    .personalize-board__detail-content > .personalize-board__detail-label,
    .personalize-board__detail-content > .personalize-board__detail-sublabel {
      grid-column: 1;
    }

    .personalize-board__detail-content > .personalize-board__detail-input,
    .personalize-board__detail-content > .personalize-board__logo-field {
      grid-column: 1 / -1;
    }

    .personalize-board__detail-badge,
    .personalize-board__location-loader {
      grid-column: 2;
    }

    .personalize-board__detail-edit-btn {
      grid-column: 3;
    }

    /* Spec is 14px, but the mobile detail row shares one line with the field
       label, so the badge is stepped down to keep long labels like "NEEDS
       CONFIRMATION" from overflowing. Colours / caps / pill are unchanged. */
    .personalize-board__detail-badge {
      font-size: 12px!important;
      padding: 2px 10px;
      min-block-size: 22px;
      gap: 5px;
    }

    .personalize-board__visual {
      min-block-size: 150px;
    }

    .personalize-board__phone {
      inset-inline-start: 34px;
      inline-size: 62px;
      block-size: 104px;
    }

    .personalize-board__option-img {
      min-block-size: 150px;
    }

    .personalize-board__invitation-card--small {
      inset-block-start: 46px;
      inset-inline-start: 112px;
      inline-size: 126px;
      block-size: 72px;
    }

    .personalize-board__invitation-card--large {
      inset-block-start: 38px;
      inset-inline-start: 44px;
      inline-size: 168px;
      block-size: 86px;
    }

    .personalize-board__pen {
      inset-block-start: 78px;
      inset-inline-start: 190px;
      inline-size: 86px;
    }

    .personalize-board__time-grid {
      gap: 8px;
    }

    .personalize-board__time-option {
      padding: 12px 6px;
      gap: 4px;
    }

    .personalize-board__time-name {
      font-size: 10px!important;
    }

    .personalize-board__time-range {
      font-size: 9px!important;
    }

    .personalize-board__delivery-cols {
      grid-template-columns: 1fr;
    }

    .personalize-board__date-btn {
      inline-size: 40px;
      block-size: 40px;
    }

    .personalize-board__date-cal-btn {
      inline-size: 40px;
      block-size: 40px;
    }

    /* The leg mixes top:73.8% with a fixed bottom:75px. On the smaller mobile
       board that 75px overruns the 73.8% top, collapsing the leg to zero (or
       negative) height so the stand disappears. Use a proportional bottom that
       scales with the aspect-locked board instead. */
    .personalize-board__board-leg {
      bottom: 12.5%;
    }

    /* The occasion sits in normal flow with a fixed 30px top padding, while the
       message is absolutely centred at top:60%. The board height scales with the
       viewport but the type does not, so on the short mobile board that padding
       drops the occasion onto the message. Pin the occasion to a proportional
       offset from the top of the board (like the message) and trim its size, so
       the gap to the message holds instead of collapsing as the board shrinks. */
    .personalize-board__img-preview-occasion {
      position: absolute;
      inset-inline: 0;
      inset-block-start: 12%;
      padding-top: 0;
      font-size: 15px!important;
      line-height: 1.15;
    }

    /* The pair reads as one greeting, so they belong close together. Correcting the
       previous fix, which pushed the occasion to the top and the message down to 63%
       and left a gap of roughly a third of the board between the two lines. */
    .personalize-board__img-preview-message {
      top: 46%;
    }
  }

/* Icons — moved out of Liquid (100 KB Liquid budget). Masked so background-color:
   currentColor reproduces the original stroke/fill:currentColor icons exactly.
   Badge icons (.pob-ic-check/.pob-ic-warn) set no display so the existing
   .personalize-board__detail-badge-* display toggling keeps working. */
.pob-ic {
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.pob-ic-pencil {
  display: inline-block;
  width: 14px;
  height: 14px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 1.5L12.5 3.5L4 12H2V10L10.5 1.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 1.5L12.5 3.5L4 12H2V10L10.5 1.5Z'/%3E%3C/svg%3E");
}
.pob-ic-upload {
  display: inline-block;
  width: 13px;
  height: 13px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 1.5V9'/%3E%3Cpath d='M3.5 4L6.5 1L9.5 4'/%3E%3Cpath d='M1.5 9.5V11C1.5 11.5523 1.94772 12 2.5 12H10.5C11.0523 12 11.5 11.5523 11.5 11V9.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 1.5V9'/%3E%3Cpath d='M3.5 4L6.5 1L9.5 4'/%3E%3Cpath d='M1.5 9.5V11C1.5 11.5523 1.94772 12 2.5 12H10.5C11.0523 12 11.5 11.5523 11.5 11V9.5'/%3E%3C/svg%3E");
}
.pob-ic-check {
  width: 10px;
  height: 8px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4L3.5 6.5L9 1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4L3.5 6.5L9 1'/%3E%3C/svg%3E");
}
.pob-ic-warn {
  width: 12px;
  height: 12px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='5'/%3E%3Cpath d='M6 3.5V6.5'/%3E%3Ccircle cx='6' cy='8.5' r='0.65' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='5'/%3E%3Cpath d='M6 3.5V6.5'/%3E%3Ccircle cx='6' cy='8.5' r='0.65' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}


/* Inline icons moved out of Liquid (100 KB budget) — generated, masked via currentColor. */
.pob-i0d9786{display:inline-block;width:38px;height:38px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38' fill='none'%3E %3Cpath d='M19 6L19 26' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E %3Cpath d='M11 14L19 6L27 14' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M7 30H31' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38' fill='none'%3E %3Cpath d='M19 6L19 26' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E %3Cpath d='M11 14L19 6L27 14' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M7 30H31' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E %3C/svg%3E")}
.pob-i50af4c{display:inline-block;width:16px;height:16px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E %3Cpath d='M2 8C2 4.68629 4.68629 2 8 2C10.1217 2 11.9823 3.09278 13.0707 4.75' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E %3Cpath d='M14 8C14 11.3137 11.3137 14 8 14C5.87833 14 4.01773 12.9072 2.92932 11.25' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E %3Cpath d='M11 4.75H13.5V2.25' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M5 11.25H2.5V13.75' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E %3Cpath d='M2 8C2 4.68629 4.68629 2 8 2C10.1217 2 11.9823 3.09278 13.0707 4.75' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E %3Cpath d='M14 8C14 11.3137 11.3137 14 8 14C5.87833 14 4.01773 12.9072 2.92932 11.25' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E %3Cpath d='M11 4.75H13.5V2.25' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M5 11.25H2.5V13.75' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E")}
.pob-i76ee38{display:inline-block;width:16px;height:16px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E %3Cpath d='M2.5 4.5H13.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E %3Cpath d='M6 4.5V2.5H10V4.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M5.5 13.5H10.5C11.0523 13.5 11.5 13.0523 11.5 12.5V5.5H4.5V12.5C4.5 13.0523 4.9477 13.5 5.5 13.5Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E %3Cpath d='M2.5 4.5H13.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E %3Cpath d='M6 4.5V2.5H10V4.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M5.5 13.5H10.5C11.0523 13.5 11.5 13.0523 11.5 12.5V5.5H4.5V12.5C4.5 13.0523 4.9477 13.5 5.5 13.5Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E")}
.pob-ieb8907{display:inline-block;width:13px;height:13px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M2 3.5H11' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M4.5 3.5V2H8.5V3.5' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 11.5H9C9.55228 11.5 10 11.0523 10 10.5V4.5H3V10.5C3 11.0523 3.44772 11.5 4 11.5Z' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M2 3.5H11' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M4.5 3.5V2H8.5V3.5' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 11.5H9C9.55228 11.5 10 11.0523 10 10.5V4.5H3V10.5C3 11.0523 3.44772 11.5 4 11.5Z' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pob-ide9fe1{display:inline-block;width:16px;height:16px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E")}
.pob-ie7344f{display:inline-block;width:22px;height:22px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'%3E%3C/circle%3E%3Cpath d='M12 2v2'%3E%3C/path%3E%3Cpath d='M12 20v2'%3E%3C/path%3E%3Cpath d='m4.93 4.93 1.41 1.41'%3E%3C/path%3E%3Cpath d='m17.66 17.66 1.41 1.41'%3E%3C/path%3E%3Cpath d='M2 12h2'%3E%3C/path%3E%3Cpath d='M20 12h2'%3E%3C/path%3E%3Cpath d='m6.34 17.66-1.41 1.41'%3E%3C/path%3E%3Cpath d='m19.07 4.93-1.41 1.41'%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'%3E%3C/circle%3E%3Cpath d='M12 2v2'%3E%3C/path%3E%3Cpath d='M12 20v2'%3E%3C/path%3E%3Cpath d='m4.93 4.93 1.41 1.41'%3E%3C/path%3E%3Cpath d='m17.66 17.66 1.41 1.41'%3E%3C/path%3E%3Cpath d='M2 12h2'%3E%3C/path%3E%3Cpath d='M20 12h2'%3E%3C/path%3E%3Cpath d='m6.34 17.66-1.41 1.41'%3E%3C/path%3E%3Cpath d='m19.07 4.93-1.41 1.41'%3E%3C/path%3E%3C/svg%3E")}
.pob-i82b83c{display:inline-block;width:22px;height:22px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v2'%3E%3C/path%3E%3Cpath d='m4.93 4.93 1.41 1.41'%3E%3C/path%3E%3Cpath d='M20 12h2'%3E%3C/path%3E%3Cpath d='m19.07 4.93-1.41 1.41'%3E%3C/path%3E%3Cpath d='M15.947 12.65a4 4 0 0 0-5.925-4.128'%3E%3C/path%3E%3Cpath d='M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z'%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v2'%3E%3C/path%3E%3Cpath d='m4.93 4.93 1.41 1.41'%3E%3C/path%3E%3Cpath d='M20 12h2'%3E%3C/path%3E%3Cpath d='m19.07 4.93-1.41 1.41'%3E%3C/path%3E%3Cpath d='M15.947 12.65a4 4 0 0 0-5.925-4.128'%3E%3C/path%3E%3Cpath d='M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z'%3E%3C/path%3E%3C/svg%3E")}
.pob-i580c81{display:inline-block;width:22px;height:22px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'%3E%3C/path%3E%3C/svg%3E")}
.pob-i1a9e38{display:inline-block;width:12px;height:12px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}


  /* === Add-on carousel (Delivery step) === */

  .personalize-board__addon {
    margin-block-start: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .personalize-board__addon-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .personalize-board__addon-subtitle {
    margin: 0;
    color: #777777;
    font-size: 13px;
    line-height: 1.4;
  }

  .personalize-board__addon-carousel {
    position: relative;
    /* Overflowing cards are clipped by this container's edges */
    overflow: hidden;
    /* Enables container queries so card count adapts to the carousel width */
    container-type: inline-size;
  }

  .personalize-board__addon-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .personalize-board__addon-track::-webkit-scrollbar {
    display: none;
  }

  .personalize-board__addon-card {
    /* ~2.5 cards in view (carousel <= 400px) */
    flex: 0 0 calc(40% - 8px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1.5px solid var(--pbd-border-color, #e2e4e6);
    border-radius: 0;
    background: var(--pbd-bg-color, #ffffff);
    color: #212121;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
      border-color 150ms ease,
      box-shadow 150ms ease;
  }

  /* Carousel wider than 400px -> ~3.5 cards in view */
  @container (min-width: 400px) {
    .personalize-board__addon-card {
      flex-basis: calc((100% / 3.5) - 9px);
    }
  }

  .personalize-board__addon-card:hover {
    border-color: #888888;
  }

  .personalize-board__addon-card.is-selected {
    border-color: var(--pbd-text-color, #212121);
    border-width: 2px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  }

  .personalize-board__addon-card:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 2px;
  }

  .personalize-board__addon-card.is-soldout {
    background: #f5f5f5;
    border-color: var(--pbd-border-color, #e2e4e6);
    color: #bbbbbb;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.65;
  }

  .personalize-board__addon-media {
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f3f3;
  }

  .personalize-board__addon-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .personalize-board__addon-img--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
  }

  .personalize-board__addon-check {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    inline-size: 20px;
    block-size: 20px;
    border: 1.5px solid #ffffff;
    border-radius: 50%;
    background: rgb(255 255 255 / 80%);
    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
    opacity: 0;
    transform: scale(0.8);
    transition:
      opacity 150ms ease,
      transform 150ms ease;
  }

  .personalize-board__addon-card.is-selected .personalize-board__addon-check {
    opacity: 1;
    transform: scale(1);
    border-color: var(--pbd-text-color, #212121);
    background: var(--pbd-text-color, #212121) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.5L7 11.5L12 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  }

  .personalize-board__addon-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #212121;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .personalize-board__addon-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--pbd-text-color, #212121);
    line-height: 1.2;
  }

  .personalize-board__addon-nav {
    position: absolute;
    inset-block-start: calc(50% - 18px);
    z-index: 2;
    inline-size: 32px;
    block-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    background: var(--pbd-bg-color, #ffffff);
    color: #212121;
    cursor: pointer;
    box-shadow: 0 2px 10px rgb(0 0 0 / 16%);
    transition:
      background 150ms ease,
      box-shadow 150ms ease;
  }

  .personalize-board__addon-nav:hover {
    background: #f5f5f5;
    box-shadow: 0 3px 12px rgb(0 0 0 / 22%);
  }

  .personalize-board__addon-nav:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 2px;
  }

  .personalize-board__addon-nav[hidden] {
    display: none;
  }

  .personalize-board__addon-nav svg {
    inline-size: 16px;
    block-size: 16px;
  }

  .personalize-board__addon-nav--prev {
    inset-inline-start: 4px;
  }

  .personalize-board__addon-nav--next {
    inset-inline-end: 4px;
  }


/* === Sticky entry CTA (mobile) ===
   The markup is built by personalize-board.js and appended to <body>: the extension
   is at Shopify's 100 KB Liquid ceiling, and a position: fixed element left inside
   the block could be trapped by a transformed ancestor in the theme's product
   layout. Desktop never shows it — the method options are already in reach there. */
.personalize-board__sticky-cta {
  display: none;
}

@media screen and (max-width: 749px) {
  .personalize-board__sticky-cta {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--pbd-bg-color, #ffffff);
    border-block-start: 1px solid var(--pbd-border-color, #e2e4e6);
    box-shadow: 0 -2px 12px rgb(0 0 0 / 10%);
  }

  .personalize-board__sticky-cta[hidden] {
    display: none;
  }

  .personalize-board__sticky-cta-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .personalize-board__sticky-cta-row[hidden] {
    display: none;
  }

  .personalize-board__sticky-cta-label {
    color: #6b7280;
    font-size: 11px!important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .personalize-board__sticky-cta-price {
    color: var(--pbd-text-color, #212121);
    font-size: 15px!important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .personalize-board__sticky-cta-btn {
    inline-size: 100%!important;
    min-block-size: 48px;
    padding: 12px 16px;
    border: 1px solid var(--pbd-text-color, #212121);
    border-radius: 0;
    background: var(--pbd-text-color, #212121);
    color: #ffffff;
    font: inherit;
    font-size: 13px!important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .personalize-board__sticky-cta-btn:focus-visible {
    outline: 2px solid var(--pbd-text-color, #212121);
    outline-offset: 2px;
  }

  /* The bar floats over the page, so give the document room to scroll clear of it.
     Set only while the bar is actually shown, so other pages keep their own spacing. */
  body.personalize-board-has-sticky-cta {
    padding-block-end: 104px;
  }
}

@media screen and (max-width: 749px) {
  /* The step's own action row, rehomed into the bar by personalize-board.js. Its
     inline layout (top border, card padding, stacked review buttons) belongs to the
     step card, not to a fixed strip, so it is flattened here. */
  .personalize-board__step-action--sticky {
    margin: 0;
    padding: 0;
    border: 0;
    inline-size: 100%;
  }

  /* The row filling its wrapper isn't enough on its own — pin the button(s) inside
     it too, !important so nothing (a stray inline style, a future theme tweak) can
     leave a narrow, off-center button floating in the fixed mobile bar. */
  .personalize-board__step-action--sticky .personalize-board__step-next,
  .personalize-board__step-action--sticky .personalize-board__add-to-cart {
    inline-size: 100%!important;
  }

  .personalize-board__sticky-cta-actions:empty {
    display: none;
  }

  .personalize-board__sticky-cta-btn[hidden] {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  /* The theme header is sticky on mobile, so a scroll that lands a card at the top of
     the viewport tucks its heading behind that header. The value is the theme's
     mobile header height, so it needs revisiting if that header changes. */
  .personalize-board,
  .personalize-board__step-card,
  .personalize-board__detail-row,
  .personalize-board__options {
    scroll-margin-block-start: 80px;
  }
}

@media screen and (max-width: 380px) {
  /* At this width the date strip fills its track, so its last button is clipped hard
     against the Full Calendar button and the two read as one control. A gap alone was
     not enough — the strip still scrolled right up to its own edge, so the neighbour
     looked attached. Give the strip trailing space of its own and widen the gap.
     380px inclusive: the previous 379px cap left the reported width uncovered. */
  .personalize-board__date-row {
    gap: 14px;
  }

  .personalize-board__date-cal-wrap {
    margin-inline-start: 2px;
  }

  .personalize-board__date-scroll {
    padding-inline-end: 8px;
    scroll-padding-inline-end: 8px;
  }
}


@media screen and (max-width: 749px) {
  /* The step's action row, made sticky where it stands by personalize-board.js. It
     renders in its normal place and only pins to the bottom edge once it would scroll
     away — sticky rather than fixed, so it keeps its own space in the flow and cannot
     collapse the layout beneath it. */
  .personalize-board__sticky-actions {
    position: sticky;
    inset-block-end: 0;
    z-index: 40;
    display: block;
    /* Unpinned the row is an ordinary element in the card, so it still needs space
       above it — .is-stuck replaces this with the bar's own padding. */
    padding-block-start: 12px;
  }

  /* Chrome only while pinned. At its natural position the row is just a button; a
     permanent border and shadow would draw a bar across the middle of the card.
     .is-stuck comes from a sentinel in JS — CSS cannot detect a pinned sticky box. */
  .personalize-board__sticky-actions.is-stuck {
    margin-inline: -14px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--pbd-bg-color, #ffffff);
    border-block-start: 1px solid var(--pbd-border-color, #e2e4e6);
    box-shadow: 0 -2px 12px rgb(0 0 0 / 10%);
  }

  /* Zero-height probe for the observer; must never affect layout. */
  .personalize-board__sticky-sentinel {
    block-size: 0;
    margin: 0;
    padding: 0;
  }
}

/* === Suggested wording (experiment: papan-bunga-v3-wt) ==============
   OB Design System: Form Label 14px/600 ALL CAPS, secondary control
   48px minimum, radius 0, hairline Platinum Slate, Obsidian on
   selection, elevation none.
   =================================================================== */
.personalize-board__wording {
  margin: 0 0 20px;
}

.personalize-board__wording-hint {
  margin: 4px 0 12px;
  font-size: 13px !important;
  line-height: 1.45;
  color: #6b6b68;
}

.personalize-board__wording-set {
  display: grid;
  gap: 8px;
}

.personalize-board__wording-option {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  text-align: left;
  background: #ffffff;
  border: 1px solid #e2e4e6;
  border-radius: 0;
  cursor: pointer;
}

.personalize-board__wording-option:hover {
  border-color: #212121;
}

.personalize-board__wording-option.is-selected {
  border-color: #212121;
  box-shadow: inset 0 0 0 1px #212121;
}

.personalize-board__wording-option:focus-visible {
  outline: 2px solid #640000;
  outline-offset: 3px;
}

.personalize-board__wording-option-name {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6b68;
}

.personalize-board__wording-option-preview {
  font-size: 14px !important;
  line-height: 1.5;
  color: #212121;
  white-space: pre-line;
}

/* === Custom calendar panel (replaces the native <input type="date"> full
   calendar so blocked dates render visibly disabled instead of only being
   rejected after they're picked) — mirrors the confirmation popup layout
   above: fixed backdrop + bottom sheet on mobile, centered >=750px. */
.personalize-board__cal-panel[hidden] {
  display: none;
}

.personalize-board__cal-panel {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media screen and (min-width: 750px) {
  .personalize-board__cal-panel {
    align-items: center;
  }
}

.personalize-board__cal-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 52%);
}

.personalize-board__cal-panel-sheet {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: 380px;
  max-block-size: 90dvh;
  overflow-y: auto;
  border-radius: 0;
  padding: 20px;
  background: var(--pbd-bg-color, #ffffff);
  color: var(--pbd-text-color, #212121);
  box-shadow: 0 -8px 40px rgb(0 0 0 / 18%);
}

@media screen and (min-width: 750px) {
  .personalize-board__cal-panel-sheet {
    max-block-size: 85dvh;
    box-shadow: 0 20px 60px rgb(0 0 0 / 22%);
  }
}

.personalize-board__cal-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 12px;
}

.personalize-board__cal-panel-title {
  font-size: 16px !important;
  font-weight: 700;
}

.personalize-board__cal-panel-nav {
  inline-size: 32px;
  block-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 0;
  background: var(--pbd-bg-color, #ffffff);
  color: #333333;
  border: 1.5px solid var(--pbd-border-color, #e2e4e6);
}

.personalize-board__cal-panel-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.personalize-board__cal-panel-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-block-end: 6px;
}

.personalize-board__cal-panel-weekdays span {
  font-size: 9px !important;
  font-weight: 700;
  text-transform: uppercase;
  color: #555555;
  text-align: center;
}

.personalize-board__cal-panel-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.personalize-board__cal-panel-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 0;
  font-size: 14px !important;
  font-weight: 700;
  background: var(--pbd-bg-color, #ffffff);
  color: #333333;
  border: 1.5px solid var(--pbd-border-color, #e2e4e6);
}

.personalize-board__cal-panel-cell:hover:not(:disabled) {
  border-color: #888888;
}

.personalize-board__cal-panel-cell:disabled {
  background: #f5f5f5;
  border-color: var(--pbd-border-color, #e2e4e6);
  color: #cccccc;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

.personalize-board__cal-panel-cell--blank {
  border: none;
  background: none;
}

.personalize-board__cal-panel-close {
  margin-block-start: 16px;
  inline-size: 100%;
  padding: 10px;
  border-radius: 0;
  font-weight: 700;
  background: var(--pbd-bg-color, #ffffff);
  color: #333333;
  border: 1.5px solid var(--pbd-border-color, #e2e4e6);
}

/* =====================================================================
   WAVE 1 — design-system compliance, promoted to all boards
   Proven for three days on the papan-bunga-v3-wt experiment template
   with zero breakage, then promoted here so every board gets it.

   Deliberately TOKEN AND SIZE ONLY. No layout properties: an earlier
   attempt at this added aspect-ratio and forced 100% sizing on gateway
   artwork and collapsed the two-card layout. Colours, type scale and
   minimum heights are safe to change blind; grid, flex and aspect
   rules are not.
   ===================================================================== */

/* --- 1. Type scale. Spec: Form Label 14px/600. Shipped: 10-12px, and
   the full-calendar label at 9px. ------------------------------------ */
.personalize-board .personalize-board__detail-label { font-size: 14px !important; letter-spacing: 0.06em; }
.personalize-board .personalize-board__detail-sublabel { font-size: 13px !important; }
.personalize-board .personalize-board__delivery-label { font-size: 14px !important; }
.personalize-board .personalize-board__manual-label { font-size: 14px !important; }
.personalize-board .personalize-board__manual-label span { font-size: 13px !important; }
.personalize-board .personalize-board__date-cal-label { font-size: 12px !important; }

/* --- 2. Status badges. The substantive fix: NEEDS CONFIRMATION shipped
   in #c0392b, the INVALID red, so "please check this" read as "this is
   broken" on the screen where the buyer decides whether to trust us.
   NOT DETECTED shipped #999 on #f2f2f2 = 2.54:1, failing WCAG AA;
   the Slate Blue token measures 6.61:1. ------------------------------ */
.personalize-board .personalize-board__detail-badge {
  font-size: 13px !important;
  min-height: 24px;
  padding: 0 12px !important;
  border-radius: 9999px;
}
.personalize-board .personalize-board__detail-badge.is-not-detected {
  background: #eef3f6 !important;
  border-color: #5c738a !important;
  color: #40586f !important;
}
.personalize-board .personalize-board__detail-badge.is-warn,
.personalize-board .personalize-board__detail-badge--confirm {
  background: #fbf1e5 !important;
  border-color: #b8742d !important;
  color: #75460f !important;
}
.personalize-board .personalize-board__detail-badge--confirm:hover { background: #f5e4ce !important; }
.personalize-board .personalize-board__detail-badge.is-warn .personalize-board__detail-badge-icon,
.personalize-board .personalize-board__detail-badge--confirm .personalize-board__detail-badge-warn-icon {
  color: #75460f !important;
}
.personalize-board .personalize-board__detail-badge--confirm.is-confirmed {
  background: #edf3ed !important;
  border-color: #58705a !important;
  color: #3f5b45 !important;
}

/* --- 3. Touch targets. Spec floor is 48px; delivery inputs and the
   confirm buttons compute to about 42px. This category is bought
   one-handed, on a phone, usually against a deadline. --------------- */
.personalize-board .personalize-board__delivery-input,
.personalize-board .personalize-board__delivery-select,
.personalize-board .personalize-board__zip-trigger {
  min-height: 48px !important;
}
.personalize-board .personalize-board__confirm-cart-btn,
.personalize-board .personalize-board__confirm-edit-btn,
.personalize-board .personalize-board__regenerate-button {
  min-height: 48px !important;
  font-size: 14px !important;
}
.personalize-board .personalize-board__date-item,
.personalize-board .personalize-board__date-cal-btn { min-height: 56px; }
.personalize-board .personalize-board__time-option { min-height: 64px; }

/* --- 4. Placeholders must not read as answers. Spec 6.1: placeholders
   Muted Ink, entered values Obsidian. The review screen shows examples
   in the value slot at the same weight as extracted text, so a hurried
   buyer cannot tell which fields are actually filled. --------------- */
.personalize-board .personalize-board__detail-input::placeholder,
.personalize-board .personalize-board__delivery-input::placeholder,
.personalize-board .personalize-board__delivery-textarea::placeholder,
.personalize-board .personalize-board__manual-textarea::placeholder {
  color: #6b6b68 !important;
  opacity: 1;
  font-style: italic;
}
.personalize-board .personalize-board__detail-input { color: #212121 !important; }

/* --- 5. Errors the buyer can actually see. Field errors ship at
   0.75rem with no offset; an error nobody notices is an abandoned cart
   with no explanation. ---------------------------------------------- */
.personalize-board .personalize-board__field-error {
  font-size: 13px !important;
  font-weight: 600;
  color: #8a2f2f !important;
  margin-block-start: 6px;
}

/* --- 6. Disabled primary reads as disabled, not as a broken enabled
   button. Spec 5.4: "do not rely on opacity alone". ----------------- */
.personalize-board .personalize-board__confirm-cart-btn:disabled {
  background: #e2e4e6 !important;
  border-color: #e2e4e6 !important;
  color: #6b6b68 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* --- 7. Visible keyboard focus on the accent token, plus a
   reduced-motion guard the wizard does not ship. -------------------- */
.personalize-board :is(button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid #640000 !important;
  outline-offset: 3px !important;
}
@media (prefers-reduced-motion: reduce) {
  .personalize-board *,
  .personalize-board *::before,
  .personalize-board *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Out-of-area WhatsApp handoff. Secondary control per Design System 5.2:
   48px, radius 0, 1px Obsidian border, ALL CAPS label. Sits inside the
   ship-warning panel and inherits its Slate Blue context. */
.personalize-board .personalize-board__ship-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-block-start: 12px;
  padding-inline: 18px;
  border: 1px solid currentColor;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}
.personalize-board .personalize-board__ship-wa:hover { opacity: 0.75; }
.personalize-board .personalize-board__ship-wa:focus-visible {
  outline: 2px solid #640000;
  outline-offset: 3px;
}