.cj-list-trigger {
  position: fixed;
  z-index: 1028;
  right: 24px;
  top: 92px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  color: #3f5f55;
  background: rgb(255 255 255 / 92%);
  border: 1px solid #a8b8a3;
  border-radius: 4px;
  box-shadow: 0 14px 36px rgb(44 44 42 / 8%);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.cj-list-trigger__count {
  display: grid;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  place-items: center;
  color: #fff;
  background: #3f5f55;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.cj-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  color: #3f5f55;
  background: #fbfaf7;
  border: 1px solid rgb(168 184 163 / 70%);
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.cj-add-button:hover,
.cj-add-button.is-added {
  color: #fff;
  background: #3f5f55;
  border-color: #3f5f55;
}

.cj-add-button--icon {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  font-size: 18px;
}

.sgc-label-display__card .cj-add-button {
  margin-top: 10px;
  align-self: flex-start;
}

.cj-product-detail-add {
  width: 100%;
  max-width: 420px;
  margin: 12px 0 0;
}

.sgc-label-display[data-section-id="purpose"],
.sgc-label-display.cj-purpose-display {
  --cj-purpose-gap: 12px;
}

.sgc-label-display[data-section-id="purpose"] .sgc-label-display__title,
.sgc-label-display[data-section-id="purpose"] .sgc-label-display__description,
.sgc-label-display.cj-purpose-display .sgc-label-display__title,
.sgc-label-display.cj-purpose-display .sgc-label-display__description {
  text-align: start;
}

.sgc-label-display[data-section-id="purpose"] .sgc-label-display__list,
.sgc-label-display.cj-purpose-display .sgc-label-display__list {
  display: flex;
}

.sgc-label-display[data-section-id="purpose"] .sgc-label-display__flex:not(.splide),
.sgc-label-display.cj-purpose-display .sgc-label-display__flex:not(.splide) {
  flex-wrap: nowrap;
  gap: var(--cj-purpose-gap);
  overflow-x: auto;
  padding: 2px 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sgc-label-display[data-section-id="purpose"] .sgc-label-display__flex:not(.splide)::-webkit-scrollbar,
.sgc-label-display.cj-purpose-display .sgc-label-display__flex:not(.splide)::-webkit-scrollbar {
  display: none;
}

.sgc-label-display[data-section-id="purpose"] .sgc-label-display__flex:not(.splide) .sgc-label-display__flex-item,
.sgc-label-display.cj-purpose-display .sgc-label-display__flex:not(.splide) .sgc-label-display__flex-item {
  flex: 0 0 220px;
  width: 220px;
  max-width: 220px;
  scroll-snap-align: start;
}

.sgc-label-display[data-section-id="purpose"] .sgc-label-display__card,
.sgc-label-display.cj-purpose-display .sgc-label-display__card {
  display: flex;
  min-height: 0;
  height: 176px;
  padding: 16px;
  background: rgb(255 255 255 / 84%);
  border: 1px solid #e8e3d8;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgb(44 44 42 / 4%);
  overflow: hidden;
}

.sgc-label-display[data-section-id="purpose"] .sgc-label-display__card-content,
.sgc-label-display.cj-purpose-display .sgc-label-display__card-content {
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
}

.sgc-label-display[data-section-id="purpose"] .sgc-block-subtitle,
.sgc-label-display.cj-purpose-display .sgc-block-subtitle {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  line-height: 1.12 !important;
}

.sgc-label-display[data-section-id="purpose"] .sgc-block-description,
.sgc-label-display.cj-purpose-display .sgc-block-description {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  font-size: 12px !important;
  line-height: 1.45 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.sgc-label-display[data-section-id="purpose"] .sgc-label-display__card .cj-add-button,
.sgc-label-display.cj-purpose-display .sgc-label-display__card .cj-add-button {
  min-height: 28px;
  margin-top: auto;
  padding-inline: 10px;
  font-size: 11px;
}

.block-product-card,
.product-card,
.card-product {
  position: relative;
}

.block-product-card .cj-add-button,
.product-card .cj-add-button,
.card-product .cj-add-button {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
}

.cj-list-overlay {
  position: fixed;
  z-index: 1030;
  inset: 0;
  display: none;
  background: rgb(31 31 29 / 22%);
}

.cj-list-overlay.is-open {
  display: block;
}

.cj-list-drawer {
  position: fixed;
  z-index: 1031;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  width: min(720px, 90vw);
  max-width: 100%;
  flex-direction: column;
  color: #1f1f1d;
  background: rgb(255 255 255 / 97%);
  border-left: 1px solid #e8e3d8;
  box-shadow: -26px 0 70px rgb(44 44 42 / 16%);
  transform: translateX(104%);
  transition: transform .22s ease;
}

.cj-list-drawer.is-open {
  transform: translateX(0);
}

.cj-list-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 28px 20px;
  border-bottom: 1px solid #e8e3d8;
}

.cj-list-drawer h2,
.cj-list-panel h2 {
  margin: 0;
  color: #1f1f1d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
}

.cj-list-drawer p,
.cj-list-panel p {
  margin: 6px 0 0;
  color: #6f6f68;
  font-size: 13px;
  line-height: 1.5;
}

.cj-list-close {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: #6f6f68;
  background: #fff;
  border: 1px solid #e8e3d8;
  border-radius: 999px;
  cursor: pointer;
}

.cj-list-drawer__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 28px 26px;
}

.cj-list-block {
  padding: 22px 0;
  border-bottom: 1px solid #e8e3d8;
}

.cj-list-block h3 {
  margin: 0 0 12px;
  color: #3f5f55;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cj-list-empty {
  margin: 0;
  color: #6f6f68;
  font-size: 14px;
  line-height: 1.6;
}

.cj-list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cj-list-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 34px;
  padding: 0 10px;
  color: #3f5f55;
  background: rgb(216 221 214 / 28%);
  border: 1px solid rgb(168 184 163 / 75%);
  border-radius: 999px;
  font-size: 12px;
}

.cj-list-remove {
  display: grid;
  width: 18px;
  height: 18px;
  padding: 0;
  place-items: center;
  color: #6f6f68;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.cj-list-form {
  display: grid;
  gap: 10px;
}

.cj-list-field {
  display: grid;
  gap: 6px;
}

.cj-list-field label {
  color: #2c2c2a;
  font-size: 12px;
  font-weight: 600;
}

.cj-list-field input,
.cj-list-field select,
.cj-list-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: #1f1f1d;
  background: #fbfaf7;
  border: 1px solid #e8e3d8;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
}

.cj-list-field textarea {
  min-height: 72px;
  resize: vertical;
}

.cj-list-field input:focus,
.cj-list-field select:focus,
.cj-list-field textarea:focus {
  outline: 1px solid #a8b8a3;
  border-color: #a8b8a3;
}

.cj-list-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 10px;
  padding: 16px 28px calc(24px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgb(255 255 255 / 84%), #fff 18%);
  border-top: 1px solid #e8e3d8;
}
.cj-list-actions[hidden] { display: none; }

/* === v15.12 — Two-view drawer (Trip Planner | My Trip) === */
.cj-view[hidden] { display: none; }
[data-cj-view-title][hidden] { display: none; }

/* "View My Trip" entry button — sits at the bottom of the Planner view */
.cj-view-mytrip {
  margin: 24px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  background: #fff;
  color: #3F5F55;
  border: 1.5px solid #3F5F55;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.cj-view-mytrip:hover {
  background: #3F5F55;
  color: #fff;
}
.cj-view-mytrip__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: #3F5F55;
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.cj-view-mytrip:hover .cj-view-mytrip__count {
  background: #fff;
  color: #3F5F55;
}
.cj-view-mytrip__arrow {
  font-size: 16px;
  margin-left: auto;
}
/* When My Trip is empty, soften the CTA (still clickable) */
.cj-view-mytrip[data-cj-empty="1"] {
  border-color: #c9c4b8;
  color: #6F6F68;
}
.cj-view-mytrip[data-cj-empty="1"] .cj-view-mytrip__count {
  background: #c9c4b8;
}

@media (max-width: 600px) {
  .cj-view-mytrip { margin-top: 18px; min-height: 52px; font-size: 15px; }
  .cj-list-actions { padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
}

.cj-list-action {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: #3f5f55;
  background: #fff;
  border: 1px solid #a8b8a3;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.cj-list-action--primary {
  color: #fff;
  background: #3f5f55;
  border-color: #3f5f55;
}

.cj-list-note {
  padding: 14px;
  color: #4f554f;
  background: linear-gradient(135deg, rgb(237 229 214 / 70%), rgb(216 221 214 / 40%));
  border: 1px solid #e8e3d8;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.cj-mobile-bar,
.cj-list-panel {
  display: none;
}

@media (max-width: 959px) {
  .cj-list-trigger {
    display: none;
  }

  .cj-list-drawer {
    width: 100vw;
    max-width: 100vw;
    /* v15.14 — solid background on mobile so the page text behind doesn't
       ghost through. Desktop keeps its softer 97% translucency. */
    background: #ffffff;
  }
  .cj-list-drawer__body { background: #ffffff; }

  .cj-mobile-bar {
    position: fixed;
    z-index: 1028;
    inset-inline: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 10px 12px 10px 16px;
    color: #1f1f1d;
    background: rgb(255 255 255 / 96%);
    border: 1px solid #e8e3d8;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgb(44 44 42 / 16%);
    transform: translateY(calc(100% + 24px));
    transition: transform .2s ease;
  }

  .cj-mobile-bar.is-visible {
    transform: translateY(0);
  }

  .cj-mobile-bar b {
    font-size: 13px;
    line-height: 1.25;
  }

  .cj-mobile-bar button {
    min-height: 38px;
    padding: 0 16px;
    color: #fff;
    background: #3f5f55;
    border: 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
  }

  .cj-list-panel {
    position: fixed;
    z-index: 1032;
    inset-inline: 12px;
    bottom: 84px;
    max-height: calc(100vh - 110px);
    overflow: auto;
    padding: 18px;
    background: #fff;
    border: 1px solid #e8e3d8;
    border-radius: 12px;
    box-shadow: 0 18px 54px rgb(44 44 42 / 18%);
    transform: translateY(18px);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity .18s ease,
      transform .18s ease;
  }

  .cj-list-panel.is-open {
    display: block;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .cj-list-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e3d8;
  }

  .cj-list-panel .cj-list-block {
    padding: 16px 0;
  }

  .cj-list-panel .cj-list-actions {
    position: static;
    padding: 14px 0 0;
    border-top: 0;
  }
}

/* -------------------------------------------------------------
   Detail polish — drawer form & chip refinements
   ------------------------------------------------------------- */

/* Underline-style form fields */
.cj-list-field input[type="text"],
.cj-list-field input[type="tel"],
.cj-list-field input[type="email"],
.cj-list-field input[type="number"],
.cj-list-field select,
.cj-list-field textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cj-line, #E8E3D8) !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  font-size: 14px !important;
  color: #1F1F1D !important;
  transition: border-color 0.2s ease;
  width: 100% !important;
  appearance: none;
  -webkit-appearance: none;
}

.cj-list-field input:focus,
.cj-list-field select:focus,
.cj-list-field textarea:focus {
  outline: none !important;
  border-bottom-color: #3F5F55 !important;
}

.cj-list-field label {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: #6F6F68 !important;
  font-weight: 400 !important;
}

/* Chip refinement — hairline x, off-edge */
.cj-list-tag {
  background: transparent !important;
  border: 1px solid #E8E3D8 !important;
  color: #1F1F1D !important;
  padding: 6px 8px 6px 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 6px 8px 0 !important;
}

.cj-list-remove {
  background: transparent !important;
  border: 0 !important;
  color: #B0B0A8 !important;
  font-size: 13px !important;
  padding: 0 4px !important;
  line-height: 1 !important;
  cursor: pointer;
}

.cj-list-remove:hover {
  color: #1F1F1D !important;
}

/* Drawer headings & block titles — quieter */
.cj-list-block h3 {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: #3F5F55 !important;
  font-weight: 400 !important;
  margin: 0 0 12px !important;
}

/* Send button — square corners, refined */
.cj-list-action--primary {
  border-radius: 1px !important;
  letter-spacing: 0.1em !important;
  padding: 14px 18px !important;
  font-size: 12px !important;
  text-transform: uppercase;
}

/* Secondary button — text link */
.cj-list-action:not(.cj-list-action--primary) {
  background: transparent !important;
  border: 0 !important;
  color: #6F6F68 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

/* Floating trigger pill — refined */
.cj-list-trigger {
  border-radius: 999px !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  text-transform: uppercase;
  padding: 10px 18px !important;
  border: 1px solid #E8E3D8 !important;
  background: #FFFFFF !important;
  color: #1F1F1D !important;
  box-shadow: 0 8px 24px rgba(31,31,29,0.06) !important;
}

.cj-list-trigger__count {
  background: #3F5F55 !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  font-size: 11px !important;
}

/* Travel-details form grid (My Journey List form) */
.cj-list-details h4 {
  margin: 0 0 12px;
  color: #3F5F55;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cj-list-details__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.cj-list-details__grid > textarea,
.cj-list-details__grid > input[type="text"][data-cj-detail="notes"] {
  grid-column: 1 / -1;
}

.cj-list-details__grid select,
.cj-list-details__grid input,
.cj-list-details__grid textarea {
  width: 100%;
  min-height: 40px;
  padding: 10px 0;
  color: #1F1F1D;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #E8E3D8;
  border-radius: 0;
  font: inherit;
  font-size: 13px;
  appearance: none;
  -webkit-appearance: none;
}

.cj-list-details__grid textarea {
  min-height: 64px;
  resize: vertical;
}

.cj-list-details__grid select:focus,
.cj-list-details__grid input:focus,
.cj-list-details__grid textarea:focus {
  outline: none;
  border-bottom-color: #3F5F55;
}

.cj-list-details__grid select {
  background-image: linear-gradient(45deg, transparent 50%, #6F6F68 50%),
                    linear-gradient(135deg, #6F6F68 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 22px;
}

/* AI panel — search, pills, cards, detail */
.cj-ai-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 0 14px;
}
.cj-ai-search__label {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1F1F1D;
}
.cj-ai-search__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.cj-ai-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 10px 14px;
  color: #1F1F1D;
  background: #FFFFFF;
  border: 1px solid #E8E3D8;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
}

.cj-ai-input:focus {
  outline: 1px solid #A8B8A3;
  border-color: #A8B8A3;
}

.cj-ai-explore {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 18px;
  color: #FFFFFF;
  background: #3F5F55;
  border: 1px solid #3F5F55;
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .cj-ai-search__row { flex-direction: column; gap: 8px; }
  .cj-ai-explore { width: 100%; min-height: 46px; font-size: 13px; }
}

.cj-ai-pills {
  /* v15.7.6 — The cross-seed 27-pill row is gone. The drawer now reflects
     ONLY the carousel card the customer clicked: title + hint + that card's
     tag pills (rendered into .cj-ai-tag-pills below the kicker). Any static
     pills left in journey-list.html are visually hidden. */
  display: none;
}
.cj-ai-pills::-webkit-scrollbar { height: 4px; }
.cj-ai-pills::-webkit-scrollbar-track { background: transparent; }
.cj-ai-pills::-webkit-scrollbar-thumb { background: #C8D5CF; border-radius: 2px; }

.cj-ai-pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 30px;
  padding: 0 14px;
  color: #3F5F55;
  background: #FFFFFF;
  border: 1px solid #E8E3D8;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.cj-ai-pill:hover,
.cj-ai-pill--active {
  color: #FFFFFF;
  background: #3F5F55;
  border-color: #3F5F55;
}

.cj-ai-results {
  padding: 18px 0;
  border-bottom: 1px solid #E8E3D8;
}

.cj-ai-caption {
  margin: 0 0 12px;
  color: #6F6F68;
  font-size: 12px;
  line-height: 1.5;
}

.cj-ai-cards {
  display: grid;
  gap: 12px;
  max-height: 50vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  /* v15.7.7 — always-on placeholder frame. Visible whether the container is
     empty, holds the empty-state hint, or has been filled with AI cards. */
  padding: 14px;
  min-height: 140px;
  background: #F8F6F1;
  border: 1px solid #E8E3D8;
  border-radius: 6px;
}

.cj-ai-cards::-webkit-scrollbar {
  width: 4px;
}
.cj-ai-cards::-webkit-scrollbar-track {
  background: transparent;
}
.cj-ai-cards::-webkit-scrollbar-thumb {
  background: #C8D5CF;
  border-radius: 2px;
}
.cj-ai-cards::-webkit-scrollbar-thumb:hover {
  background: #3F5F55;
}

@media (max-width: 768px) {
  .cj-ai-cards {
    max-height: 45vh;
  }
}

/* v15.14 — mobile: drop the nested scroll on .cj-ai-cards. At 390×844 the
   45vh window (~380px) was shorter than a single card, so the first card's
   Add/View buttons were clipped while "View more places" appeared just
   below. Let cards flow naturally and let the drawer body own scrolling. */
@media (max-width: 600px) {
  .cj-ai-cards {
    max-height: none;
    overflow: visible;
    padding: 10px;
    min-height: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .cj-ai-results { padding: 14px 0 18px; }
  .cj-ai-more { margin-top: 18px; }
}

/* tag.html emits .cj-card-tag <div> as the DATA carrier (carries data-cj-tag-*
   attrs). It must stay in DOM (JS reads it) but be visually hidden — the visible
   row is the preview chip strip below built by card.html. */
.cj-card-tag {
  display: none !important;
}

/* Visual preview row on each carousel card — first 3 tags as celadon chips */
.cj-card-tags-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.cj-card-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid #E8E3D8;
  border-radius: 999px;
  background: #FFFFFF;
  color: #3F5F55;
  font-size: 11px;
  line-height: 1.4;
}

/* SHOPLINE template engine doesn't support arithmetic in {{#set}}, so we
   render every $tag block and cap the visible row at 3 via CSS. The hidden
   chips beyond #3 stay in DOM but don't occupy visual space. */
.cj-card-tags-preview .cj-card-tag-chip:nth-child(n+4) {
  display: none;
}

/* L2 tag pill row inside AI drawer — sits between kicker and result cards */
.cj-ai-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}
.cj-ai-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #E8E3D8;
  border-radius: 999px;
  background: #FFFFFF;
  color: #3F5F55;
  font-size: 12px;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.cj-ai-tag-pill:hover {
  background: #F8F6F1;
}
.cj-ai-tag-pill.is-active {
  background: #3F5F55;
  color: #FFFFFF;
  border-color: #3F5F55;
}

/* v15.7 — AI fetch error placeholder shown when the Worker is unreachable */
.cj-ai-empty {
  margin: 0;
  padding: 24px 0;
  color: #6F6F68;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.cj-ai-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E8E3D8;
  border-radius: 4px;
  overflow: hidden;
}

.cj-ai-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #EDE5D6;
}

.cj-ai-card__img--placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #EDE5D6, #F8F6F1);
}

.cj-ai-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px;
}

.cj-ai-card__title {
  margin: 0;
  color: #1F1F1D;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

/* v15.7.7 — Title + province sit on the same row. Title fills, province
   pills out on the right. On narrow widths, province wraps below. Lede
   is no longer rendered on the list card (it lives in the VIEW detail panel). */
.cj-ai-card__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.cj-ai-card__meta .cj-ai-card__title {
  flex: 1 1 auto;
  min-width: 0;
}
.cj-ai-card__lede {
  margin: 0;
  color: #6F6F68;
  font-size: 12px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cj-ai-card__province {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 500;
  color: #3F5F55;
  background: #F8F6F1;
  border: 1px solid #E8E3D8;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.cj-ai-card__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.cj-ai-card__add,
.cj-ai-card__view {
  min-height: 30px;
  padding: 0 14px;
  border-radius: 2px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.cj-ai-card__add {
  color: #FFFFFF;
  background: #3F5F55;
  border: 1px solid #3F5F55;
}

.cj-ai-card__add.is-added {
  background: #6F6F68;
  border-color: #6F6F68;
}

.cj-ai-card__view {
  color: #1F1F1D;
  background: #FFFFFF;
  border: 1px solid #1F1F1D;
}

/* v15.13 — mobile: card actions need more vertical room so they aren't cut */
@media (max-width: 600px) {
  .cj-ai-card__body { padding: 14px 14px 16px; }
  .cj-ai-card__actions { gap: 10px; margin-top: 14px; }
  .cj-ai-card__add,
  .cj-ai-card__view { min-height: 38px; padding: 0 16px; font-size: 12px; }
}

/* v15.7.8 — Make "View more" actually look like a button so customers click it.
   v15.7.10 — Was <a href="#"> (Shopline router intercepted it as nav).
   Now a real <button>; need to override <button> defaults (font-family, etc). */
.cj-ai-more {
  display: block;
  margin: 16px auto 8px;
  padding: 10px 18px;
  width: fit-content;
  color: #3F5F55;
  background: #FFFFFF;
  border: 1px solid #3F5F55;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cj-ai-more:hover {
  background: #3F5F55;
  color: #FFFFFF;
}
/* v15.15 — loading / retry states for the View more button */
.cj-ai-more.is-loading {
  color: #6F6F68;
  border-color: #C9C4B8;
  background: #F5F2E9;
  cursor: progress;
}
.cj-ai-more.is-error {
  color: #FFFFFF;
  background: #B57B5C;
  border-color: #B57B5C;
}
.cj-ai-more.is-error::before { content: "↻ "; }
.cj-ai-more:disabled { opacity: 0.7; cursor: progress; }

/* v15.15 — POI card image quality guard.
   Codex flagged Amap 500px-wide images being upscaled to ~612px and looking
   soft. Cap the card image so it never enlarges past its natural pixel size,
   and centre when the natural size is smaller than the card. */
.cj-ai-card__img {
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
  background: #EDE5D6;
}

.cj-ai-detail {
  padding: 18px 0;
  border-bottom: 1px solid #E8E3D8;
}

.cj-ai-detail[hidden] {
  display: none;
}

.cj-ai-detail__back {
  background: transparent;
  border: 0;
  color: #6F6F68;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 0 0 12px;
  cursor: pointer;
}

.cj-ai-detail__media img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 12px;
}

.cj-ai-detail h3 {
  margin: 0 0 6px;
  color: #1F1F1D;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

.cj-ai-detail__lede {
  margin: 0 0 14px;
  color: #6F6F68;
  font-size: 13px;
  line-height: 1.5;
}

.cj-ai-detail__meta {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.cj-ai-detail__meta dt {
  color: #3F5F55;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cj-ai-detail__meta dd {
  margin: 0 0 6px;
  color: #1F1F1D;
}

.cj-ai-detail__add {
  width: 100%;
  min-height: 44px;
  padding: 0 18px;
  color: #FFFFFF;
  background: #3F5F55;
  border: 1px solid #3F5F55;
  border-radius: 2px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.cj-list-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.cj-list-clear {
  background: transparent;
  border: 0;
  color: #6F6F68;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

/* === v15.13 — Quiet "Back to Trip Planner" link in My Trip view === */
.cj-mytrip-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 14px;
  padding: 6px 0;
  background: transparent;
  border: 0;
  color: #3F5F55;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.cj-mytrip-back:hover { color: #1F1F1D; text-decoration: underline; }

/* === v15.11 — Trip summary sections (replaces 5-tab layout) === */
.cj-trip-summary {
  display: flex;
  flex-direction: column;
}
.cj-trip-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #E8E3D8;
}
.cj-trip-section:first-of-type {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}
.cj-trip-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cj-trip-section__head h4 {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1F1F1D;
}
.cj-trip-section__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  background: #EDE5D6;
  color: #3F5F55;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.cj-trip-section__hint {
  margin: -6px 0 12px;
  font-size: 12px;
  color: #6F6F68;
  line-height: 1.5;
}
/* Service Preferences — stack toggles with comfortable spacing */
.cj-trip-section[data-cj-trip-section="prefs"] .cj-jl-toggle,
.cj-trip-section[data-cj-trip-section="prefs"] .cj-jl-insurance {
  margin-bottom: 10px;
}
.cj-trip-section[data-cj-trip-section="prefs"] .cj-jl-toggle__notes-wrap {
  margin-bottom: 14px;
}
/* Travel Details fits neatly inside its section — strip the legacy h4 */
.cj-trip-section[data-cj-trip-section="details"] .cj-list-details h4 { display: none; }
.cj-trip-section[data-cj-trip-section="details"] .cj-list-details { margin-top: 0; }

@media (max-width: 600px) {
  .cj-trip-section { margin-top: 16px; padding-top: 14px; }
  .cj-trip-section__head h4 { font-size: 12px; }
}


/* === v15.7.3 — photo thumbs / detail gallery === */
.cj-ai-card__media { position: relative; }
/* v15.7.8 — Rating badge moved out of media overlay into the thumbnails row
   (right-aligned). No longer absolutely positioned. */
.cj-ai-card__rating {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(63, 95, 85, 0.92);
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-left: auto;
  align-self: center;
}
.cj-ai-card__thumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: #FFFFFF;
  border-top: 1px solid #EDE5D6;
}
.cj-ai-card__thumbs-strip {
  display: flex;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}
.cj-ai-card__thumbs-strip::-webkit-scrollbar { height: 0; }
.cj-ai-card__thumb {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 2px;
  background: #EDE5D6;
  flex: 0 0 auto;
  /* v15.7.7 — clickable: swaps with the card's main image inline. */
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.cj-ai-card__thumb:hover {
  border-color: #3F5F55;
}
.cj-ai-detail__amap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 8px 0 12px;
  font-size: 13px;
  color: #6F6F68;
}
.cj-ai-detail__rating {
  font-weight: 600;
  color: #3F5F55;
}
.cj-ai-detail__addr {
  color: #6F6F68;
}
.cj-ai-detail__gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}
.cj-ai-detail__thumb {
  width: 84px;
  height: 64px;
  object-fit: cover;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid #E8E3D8;
  background: #EDE5D6;
}
.cj-ai-detail__thumb:hover {
  border-color: #3F5F55;
}

/* v15.7.7 — empty-state hint sits INSIDE the framed .cj-ai-cards container,
   so the hint itself no longer needs its own border/background. */
.cj-ai-empty-hint {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: #6F6F68;
  font-size: 13px;
  line-height: 1.6;
}

/* v15.7.5 — Hide the legacy 27-category pill row.
   Customer arrives at drawer already locked to a seed (from clicking a homepage card),
   so the unrelated category buttons add no value. Per-card AI Tag pills replace them. */
[data-ai-pills] {
  display: none;
}

/* v15.7.7 — Skeleton loading state for the AI cards container.
   Shown by showDrawerLoading() between a TAB click and the worker's response,
   so the customer knows the AI is working and not frozen. */
.cj-loading-state {
  display: grid;
  gap: 12px;
}
.cj-loading-skeleton-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid #E8E3D8;
  min-height: 96px;
  padding: 14px;
}
.cj-loading-skeleton-card::before {
  content: "";
  display: block;
  width: 38%;
  height: 14px;
  border-radius: 3px;
  background: #EDE5D6;
  margin-bottom: 10px;
}
.cj-loading-skeleton-card::after {
  content: "";
  display: block;
  width: 78%;
  height: 10px;
  border-radius: 3px;
  background: #F0EADC;
}
.cj-loading-skeleton-card {
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(196, 209, 200, 0.35) 50%,
    rgba(255,255,255,0) 100%
  );
  background-repeat: no-repeat;
  background-size: 220px 100%;
  background-position: -220px 0;
  animation: cj-shimmer 1.4s ease-in-out infinite;
}
@keyframes cj-shimmer {
  0%   { background-position: -220px 0; }
  100% { background-position: calc(100% + 220px) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cj-loading-skeleton-card { animation: none; }
}

/* v15.7.7 — Lightbox for detail-panel photo gallery.
   Thumb click or main image click opens a fullscreen overlay with prev/next. */
.cj-ai-detail__thumb,
[data-ai-detail-image] {
  cursor: zoom-in;
}

.cj-ai-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 18, 17, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.cj-ai-lightbox--open {
  display: flex;
}
.cj-ai-lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  border-radius: 4px;
}
.cj-ai-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.cj-ai-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
}
.cj-ai-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.cj-ai-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.22);
}
.cj-ai-lightbox__nav--prev { left: 18px; }
.cj-ai-lightbox__nav--next { right: 18px; }
.cj-ai-lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .cj-ai-lightbox { padding: 12px; }
  .cj-ai-lightbox__nav { width: 40px; height: 40px; font-size: 24px; }
  .cj-ai-lightbox__nav--prev { left: 8px; }
  .cj-ai-lightbox__nav--next { right: 8px; }
  .cj-ai-lightbox__img { max-width: 96vw; max-height: 82vh; }
}

/* v15.7.13 — "Nearby" row in the detail panel (worker mode=around) */
.cj-ai-detail__nearby {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #E8E3D8;
}
.cj-ai-detail__nearby-title {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 600;
  color: #3F5F55;
  letter-spacing: 0.02em;
}
.cj-ai-detail__nearby-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}
.cj-ai-detail__nearby-row::-webkit-scrollbar { height: 0; }

.cj-ai-nearby__card {
  flex: 0 0 auto;
  width: 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.15s ease;
}
.cj-ai-nearby__card:hover {
  transform: translateY(-2px);
}
.cj-ai-nearby__img {
  width: 140px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  background: #EDE5D6;
  display: block;
}
.cj-ai-nearby__img--placeholder {
  background: linear-gradient(135deg, #EDE5D6, #F8F6F1);
}
.cj-ai-nearby__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px;
}
.cj-ai-nearby__title {
  font-size: 12px;
  font-weight: 500;
  color: #1F1F1D;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cj-ai-nearby__sub {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #6F6F68;
  letter-spacing: 0.02em;
}
.cj-ai-nearby__rating {
  color: #3F5F55;
  font-weight: 500;
}
.cj-ai-nearby__dist {
  color: #6F6F68;
}

/* Loading skeleton for nearby thumbs */
.cj-ai-nearby-skel {
  flex: 0 0 auto;
  width: 140px;
  height: 130px;
  border-radius: 4px;
  background: #F8F6F1;
  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(196, 209, 200, 0.35) 50%,
    rgba(255,255,255,0) 100%);
  background-repeat: no-repeat;
  background-size: 180px 100%;
  background-position: -180px 0;
  animation: cj-shimmer 1.4s ease-in-out infinite;
}

/* ===================================================================
   v15.8 — Phase 2: 5-tab Journey List + stacked navigation
   =================================================================== */

/* TAB nav */
.cj-jl-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #E8E3D8;
  margin: 16px 0 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.cj-jl-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: #6F6F68;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  scroll-snap-align: start;
}
.cj-jl-tab:hover { color: #3F5F55; }
.cj-jl-tab--active {
  color: #1F1F1D;
  border-bottom-color: #3F5F55;
  font-weight: 600;
}
.cj-jl-tab__icon { font-size: 16px; }
.cj-jl-tab__label { letter-spacing: 0.02em; }
.cj-jl-tab__badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #6F6F68;
  background: #F0EADC;
  border-radius: 10px;
  text-align: center;
}
.cj-jl-tab--active .cj-jl-tab__badge {
  color: #FFFFFF;
  background: #3F5F55;
}
.cj-jl-tab__badge--check { letter-spacing: 0; }

/* TAB panels */
.cj-jl-panel {
  padding: 14px 0;
}
.cj-jl-panel[hidden] { display: none; }
.cj-jl-empty {
  margin: 8px 0;
  padding: 14px;
  background: #F8F6F1;
  border: 1px dashed #E8E3D8;
  border-radius: 4px;
  color: #6F6F68;
  font-size: 13px;
  text-align: center;
}
.cj-jl-empty[hidden] { display: none; }

/* Place cards — 3-col grid (desktop) → 1-col mobile */
.cj-jl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 600px) {
  .cj-jl-grid { grid-template-columns: 1fr; }
}
.cj-jl-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E8E3D8;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cj-jl-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
  background: #EDE5D6;
  display: block;
}
.cj-jl-card__img--ph { background: linear-gradient(135deg, #EDE5D6, #F8F6F1); }
.cj-jl-card__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: #1F1F1D;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cj-jl-card__remove:hover { background: #fff; color: #B23030; }
.cj-jl-card__title {
  font-size: 13px;
  font-weight: 500;
  color: #1F1F1D;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cj-jl-card__province {
  font-size: 11px;
  color: #6F6F68;
  letter-spacing: 0.02em;
}
.cj-jl-card__svc {
  margin-top: auto;
  padding: 6px 8px;
  border: 1px solid #3F5F55;
  background: #FFFFFF;
  color: #3F5F55;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cj-jl-card__svc:hover {
  background: #3F5F55;
  color: #FFFFFF;
}

/* Hotel / driver / guide rows (list style, not grid) */
.cj-jl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cj-jl-row {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid #E8E3D8;
  border-radius: 4px;
}
.cj-jl-row__img {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  object-fit: cover;
  border-radius: 3px;
  background: #EDE5D6;
}
.cj-jl-row__img--ph { background: linear-gradient(135deg, #EDE5D6, #F8F6F1); }
.cj-jl-row__body { flex: 1 1 auto; min-width: 0; }
.cj-jl-row__title { font-size: 13px; font-weight: 500; color: #1F1F1D; }
.cj-jl-row__parent { font-size: 11px; color: #6F6F68; margin-top: 2px; }
.cj-jl-row__sub { font-size: 11px; color: #3F5F55; margin-top: 2px; letter-spacing: 0.02em; }
.cj-jl-row__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6F6F68;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.cj-jl-row__remove:hover { color: #B23030; background: rgba(255,255,255,0.6); }

/* Insurance + trip-wide drivers/guides toggle (same look) */
.cj-jl-insurance,
.cj-jl-toggle {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #E8E3D8;
  border-radius: 4px;
  cursor: pointer;
  align-items: flex-start;
}
.cj-jl-insurance input,
.cj-jl-toggle input { margin-top: 4px; }
.cj-jl-insurance span,
.cj-jl-toggle span { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cj-jl-insurance strong,
.cj-jl-toggle strong { font-size: 13px; color: #1F1F1D; }
.cj-jl-insurance small,
.cj-jl-toggle small { font-size: 11px; color: #6F6F68; line-height: 1.5; }

.cj-jl-toggle__notes-wrap {
  display: block;
  margin-top: 10px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid #E8E3D8;
  border-radius: 4px;
}
.cj-jl-toggle__notes-label {
  display: block;
  font-size: 11px;
  color: #6F6F68;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.cj-jl-toggle__notes-wrap textarea {
  width: 100%;
  min-height: 40px;
  font-family: inherit;
  font-size: 12px;
  color: #1F1F1D;
  background: #F8F6F1;
  border: 1px solid #E8E3D8;
  border-radius: 3px;
  padding: 8px;
  box-sizing: border-box;
  resize: vertical;
}
.cj-jl-toggle__notes-wrap textarea:focus { outline: 1px solid #3F5F55; }

.cj-services-note {
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: #F8F6F1;
  border: 1px dashed #E8E3D8;
  border-radius: 4px;
  color: #6F6F68;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

/* Stack layers (1 & 2) — overlaid on top of drawer body */
.cj-stack-layer {
  position: absolute;
  top: 84px;  /* below header */
  left: 0;
  right: 0;
  bottom: 0;
  background: #F8F6F1;
  display: flex;
  flex-direction: column;
  animation: cj-stack-slide 0.18s ease-out;
  z-index: 2;
}
.cj-stack-layer[hidden] { display: none; }
@keyframes cj-stack-slide {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.cj-stack-layer__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #E8E3D8;
  background: #FFFFFF;
}
.cj-stack-layer__head h3 {
  margin: 0;
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #1F1F1D;
}
.cj-stack-back,
.cj-stack-close {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #3F5F55;
  cursor: pointer;
  padding: 4px 8px;
}
.cj-stack-close { font-size: 22px; line-height: 1; }
.cj-stack-back:hover, .cj-stack-close:hover { color: #1F1F1D; }
.cj-stack-layer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 20px;
}

/* Services groups */
.cj-services-group { margin-bottom: 22px; }
.cj-services-group h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #3F5F55;
  letter-spacing: 0.02em;
}
.cj-services-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cj-services-loading, .cj-services-empty {
  padding: 12px;
  background: #FFFFFF;
  border: 1px dashed #E8E3D8;
  border-radius: 4px;
  color: #6F6F68;
  font-size: 12px;
  text-align: center;
}

.cj-svc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #FFFFFF;
  border: 1px solid #E8E3D8;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.cj-svc-row:hover { border-color: #3F5F55; }
.cj-svc-row input[type=checkbox] { flex: 0 0 auto; cursor: pointer; }
.cj-svc-row__img {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: cover;
  border-radius: 3px;
  background: #EDE5D6;
}
.cj-svc-row__img--ph { background: linear-gradient(135deg, #EDE5D6, #F8F6F1); }
.cj-svc-row--simple { padding-left: 14px; }
.cj-svc-row__body { flex: 1 1 auto; min-width: 0; }
.cj-svc-row__title { font-size: 13px; font-weight: 500; color: #1F1F1D; }
.cj-svc-row__sub { font-size: 11px; color: #6F6F68; margin-top: 2px; letter-spacing: 0.02em; }
.cj-svc-row__detail {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid #3F5F55;
  background: #FFFFFF;
  color: #3F5F55;
  font-family: inherit;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
}
.cj-svc-row__detail:hover { background: #3F5F55; color: #FFFFFF; }

/* v15.15 — hotel-as-card visual: larger thumb, English name primary,
   Chinese name secondary, meta chips on a flexible second line.            */
.cj-svc-row--hotel {
  align-items: stretch;
  gap: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgb(31 31 29 / 4%);
}
.cj-svc-row--hotel .cj-svc-row__img {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 4px;
}
.cj-svc-row--hotel .cj-svc-row__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.cj-svc-row--hotel .cj-svc-row__title {
  font-size: 14px;
  font-weight: 600;
  color: #1F1F1D;
  line-height: 1.25;
  /* Long English names wrap rather than overflow horizontally on mobile */
  overflow-wrap: anywhere;
}
.cj-svc-row__title-zh {
  font-size: 11px;
  color: #6F6F68;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.cj-svc-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 2px;
  font-size: 11px;
  color: #4F5550;
}
.cj-svc-row__meta > span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.cj-svc-row__star  { color: #3F5F55; font-weight: 600; }
.cj-svc-row__area  { color: #6F6F68; }
.cj-svc-row__price { color: #1F1F1D; font-weight: 600; }
.cj-svc-row__rating { color: #B57B5C; font-weight: 600; }
.cj-svc-row--hotel .cj-svc-row__detail {
  align-self: center;
  padding: 6px 12px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .cj-svc-row--hotel { gap: 10px; padding: 10px; }
  .cj-svc-row--hotel .cj-svc-row__img { width: 64px; height: 64px; flex-basis: 64px; }
  .cj-svc-row--hotel .cj-svc-row__detail { padding: 6px 10px; font-size: 10px; }
  /* Avoid the meta row blowing out the row's right edge */
  .cj-svc-row__meta { row-gap: 4px; }
}

/* === v15.20 — Stay preference UI: category chips + banners === */
.cj-svc-banner-row {
  display: grid; gap: 8px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}
@media (max-width: 600px) {
  .cj-svc-banner-row { grid-template-columns: 1fr; }
}
.cj-svc-banner {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px;
  background: #FFFFFF;
  border: 1.5px solid #E8E3D8;
  border-radius: 4px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: #1F1F1D;
  transition: border-color 0.15s, background 0.15s;
}
.cj-svc-banner:hover { border-color: #3F5F55; }
.cj-svc-banner[data-cj-active] {
  background: #F5F2E9;
  border-color: #3F5F55;
}
.cj-svc-banner strong { font-size: 13px; font-weight: 600; color: #1F1F1D; }
.cj-svc-banner span   { font-size: 11px; color: #6F6F68; line-height: 1.4; }

.cj-svc-chips {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding: 4px 0 8px;
  margin-bottom: 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.cj-svc-chips::-webkit-scrollbar { height: 4px; }
.cj-svc-chips::-webkit-scrollbar-thumb { background: #C8D5CF; border-radius: 2px; }
.cj-svc-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  background: #FFFFFF;
  color: #3F5F55;
  border: 1px solid #E8E3D8;
  border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.cj-svc-chip:hover { border-color: #3F5F55; }
.cj-svc-chip.is-active {
  background: #3F5F55;
  color: #FFFFFF;
  border-color: #3F5F55;
}
.cj-svc-chip__count {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  background: #EDE5D6;
  color: #3F5F55;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
}
.cj-svc-chip.is-active .cj-svc-chip__count {
  background: rgba(255,255,255,0.25);
  color: #FFFFFF;
}

.cj-svc-row__cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.02em;
  background: #EDE5D6;
  color: #3F5F55;
}
.cj-svc-row__cat--international { background: #DCC5A8; color: #5E3A14; }
.cj-svc-row__cat--chinese_chain { background: #D8E3D2; color: #2E483F; }
.cj-svc-row__cat--boutique      { background: #E5D6C1; color: #6E4A28; }
.cj-svc-row__cat--scenic        { background: #C8DCD0; color: #1F4738; }
.cj-svc-row__cat--family        { background: #E2D5BF; color: #5A4520; }
.cj-svc-row__cat--best_location { background: #D5DDE0; color: #3D5560; }

.cj-svc-empty-cat {
  padding: 14px;
  background: #F8F6F1;
  border: 1px dashed #E8E3D8;
  border-radius: 4px;
  text-align: center;
  color: #6F6F68; font-size: 12px;
}

.cj-stack-done {
  display: block;
  margin: 16px auto 4px;
  padding: 10px 22px;
  border: 0;
  background: #3F5F55;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.cj-stack-done:hover { background: #2E483F; }

/* v15.9 — Detail layer (Booking-style) */
.cj-stack-detail__media { margin-bottom: 10px; }
.cj-stack-detail__media img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: #EDE5D6;
}
.cj-stack-detail__img-ph {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #EDE5D6, #F8F6F1);
  border-radius: 4px;
}
.cj-stack-detail__thumbs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cj-stack-detail__thumb {
  width: 70px;
  height: 50px;
  object-fit: cover;
  border-radius: 3px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.cj-stack-detail__thumb:hover { border-color: #3F5F55; }

.cj-stack-detail__name-en {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 600;
  color: #1F1F1D;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cj-stack-detail__name-zh {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6F6F68;
  letter-spacing: 0.04em;
}
.cj-stack-detail__name-zh[hidden] { display: none; }

.cj-stack-detail__meta-row {
  margin: 12px 0 14px;
  font-size: 13px;
  color: #3F5F55;
  letter-spacing: 0.02em;
}
.cj-stack-detail__rating { color: #B25E1A; font-weight: 600; }
.cj-stack-detail__price  { color: #1F1F1D; font-weight: 600; }
.cj-stack-detail__stars  { color: #6F6F68; }

/* amenities pills */
.cj-stack-detail__amenities {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cj-stack-detail__amenities[hidden] { display: none; }
.cj-stack-detail__amenity {
  display: inline-block;
  padding: 4px 10px;
  background: #F8F6F1;
  border: 1px solid #E8E3D8;
  border-radius: 999px;
  font-size: 11px;
  color: #3F5F55;
  letter-spacing: 0.02em;
}

/* About + Location sections */
.cj-stack-detail__about,
.cj-stack-detail__loc {
  margin-bottom: 18px;
}
.cj-stack-detail__about[hidden],
.cj-stack-detail__loc[hidden] { display: none; }
.cj-stack-detail__about h4,
.cj-stack-detail__loc h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: #6F6F68;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cj-stack-detail__about-body p {
  margin: 0 0 10px;
  font-size: 13px;
  color: #1F1F1D;
  line-height: 1.6;
}
.cj-stack-detail__about-body p:last-child { margin-bottom: 0; }
.cj-stack-detail__address {
  font-size: 12px;
  color: #6F6F68;
  margin: 0;
  line-height: 1.5;
}
.cj-stack-detail__add {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px 18px;
  border: 0;
  background: #3F5F55;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.cj-stack-detail__add:hover { background: #2E483F; }
.cj-stack-detail__add:disabled,
.cj-stack-detail__add[disabled] {
  background: #B5B5AE;
  cursor: not-allowed;
}

/* v15.10 — skeleton placeholders for thumbs + room cards during fetch */
.cj-skel {
  background: linear-gradient(90deg, #ECE7DA 0%, #F5F2E9 50%, #ECE7DA 100%);
  background-size: 200% 100%;
  animation: cjSkel 1.4s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes cjSkel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.cj-stack-detail__thumb.cj-skel {
  display: inline-block;
  vertical-align: middle;
  width: 84px; height: 64px;
  margin-right: 6px;
}
.cj-room-skel {
  height: 84px;
  margin-bottom: 8px;
}
.cj-fade-in {
  animation: cjFadeIn 0.3s ease-out;
}
@keyframes cjFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* v15.10 — Rooms section with Radio selection */
.cj-stack-detail__rooms {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #E8E3D8;
}
.cj-stack-detail__rooms h4 {
  margin: 0 0 12px;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1F1F1D;
}
.cj-stack-detail__rooms-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cj-stack-detail__rooms-err {
  font-size: 13px;
  color: #6F6F68;
  padding: 12px;
  background: #F5F2E9;
  border-radius: 4px;
}
.cj-room {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #E8E3D8;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cj-room:hover { border-color: #3F5F55; }
.cj-room input[type="radio"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  accent-color: #3F5F55;
  cursor: pointer;
}
.cj-room input[type="radio"]:checked ~ .cj-room__body { color: #1F1F1D; }
.cj-room:has(input[type="radio"]:checked) {
  border-color: #3F5F55;
  background: #F5F2E9;
}
.cj-room__img {
  flex: 0 0 64px;
  width: 64px; height: 48px;
  object-fit: cover;
  border-radius: 4px;
}
.cj-room__img--ph { background: #EDE5D6; }
.cj-room__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cj-room__name {
  font-size: 14px;
  color: #1F1F1D;
}
.cj-room__sub {
  font-size: 12px;
  color: #6F6F68;
}
.cj-room--recommend {
  background: #F8F6F1;
  border-style: dashed;
}

/* v15.10 — Hotels TAB selected_room caption */
.cj-jl-row__room {
  font-size: 12px;
  color: #3F5F55;
  margin-top: 2px;
}

@media (max-width: 600px) {
  .cj-stack-layer { top: 0; }
  .cj-stack-detail__media img { max-height: 60vh; }
}

/* ============================================================================
   v15.25 — Trip Planner preview card.
   Pinned top-right of the first viewport so the homepage hero feels like a
   premium private-travel cover with a real planner CTA, not just decoration.
   v15.25 ships desktop-only (mobile keeps the existing floating .cj-list-
   trigger as entry); v15.26 will add a compact mobile preview.
   ========================================================================= */

.cj-planner-preview {
  position: fixed;
  top: 96px;
  right: 24px;
  width: 320px;
  max-width: calc(100vw - 48px);
  z-index: 60;
  padding: 22px 24px 20px;
  border-radius: 10px;
  background: #FFFDF8;
  border: 1px solid rgba(63, 95, 85, 0.18);
  box-shadow: 0 24px 60px -28px rgba(31, 41, 38, 0.18),
              0 2px 6px rgba(31, 41, 38, 0.04);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #1e2926;
}

.cj-preview-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #6e8c7d;
  margin-bottom: 6px;
}

.cj-preview-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  line-height: 1.05;
  font-weight: 600;
  color: #1e2926;
  margin: 0 0 6px;
}

.cj-preview-sub {
  font-size: 13px;
  line-height: 1.55;
  color: #71807a;
  margin: 0 0 16px;
}

.cj-preview-current {
  background: #f8f5ee;
  border: 1px solid rgba(63, 95, 85, 0.12);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.cj-preview-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #4f5d58;
  margin-bottom: 8px;
}

.cj-preview-idea {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.4;
  color: #1e2926;
  margin: 0;
}

.cj-preview-row {
  margin-bottom: 12px;
}

.cj-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cj-preview-chip {
  appearance: none;
  border: 1px solid rgba(63, 95, 85, 0.30);
  background: #FFFDF8;
  color: #1e2926;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.cj-preview-chip:hover {
  background: #e9f0eb;
}

.cj-preview-chip[aria-pressed="true"],
.cj-preview-chip.is-selected {
  background: #3f5f55;
  color: #FFFDF8;
  border-color: #3f5f55;
}

.cj-preview-cta {
  appearance: none;
  width: 100%;
  height: 46px;
  margin-top: 6px;
  border: 1px solid #3f5f55;
  background: #3f5f55;
  color: #FFFDF8;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease;
}

.cj-preview-cta:hover { background: #344e45; }

/* v15.25 hide breakpoint kept here for history; v15.26 replaces it below with
   a responsive variant that's safe at 1024/1280 because hero is now
   left-aligned and the preview no longer competes for centered space. */

/* ============================================================================
   v15.26 — Premium polish overrides.
   Per owner direction: 结构 / 色彩 / 布局 / 排版 / 尺寸 / 文字 / 背景.
   These are project-private overrides on SHOPLINE vendor sections; they exist
   only because the schema doesn't expose the knob we need (placeholder image
   handling, low-contrast empty states, premium typographic rhythm). All
   selectors are scoped to SHOPLINE-generated class names and are safe to drop
   when the merchant uploads real imagery.
   ========================================================================= */

/* --- Brand tokens (also used inline below) ------------------------------ */
:root {
  --cj-ink: #1e2926;
  --cj-soft-text: #4f5d58;
  --cj-muted-text: #71807a;
  --cj-paper: #f8f5ee;
  --cj-light-paper: #fffdf8;
  --cj-silk: #e9f0eb;
  --cj-celadon: #3f5f55;
  --cj-celadon-2: #6e8c7d;
  --cj-line: rgba(63, 95, 85, 0.18);
  --cj-line-strong: rgba(63, 95, 85, 0.30);
}

/* --- Kill SHOPLINE broken-image placeholders + replace with celadon wash --- */

/* Slideshow hero: hide both desktop & mobile placeholder SVG when image is empty */
.sgc-featured-slideshow__image-wrapper > svg.sgc-hidden-mobile,
.sgc-featured-slideshow__image-wrapper > svg.sgc-hidden-desktop {
  display: none !important;
}
/* Apply a calm celadon-paper wash to the slide background so the hero never
   shows the SHOPLINE camera/landmark broken-image illustration. */
.sgc-featured-slideshow__slide {
  background:
    radial-gradient(70% 55% at 78% 22%, rgba(110, 140, 125, 0.10) 0%, rgba(110, 140, 125, 0) 60%),
    radial-gradient(60% 50% at 20% 80%, rgba(233, 240, 235, 0.55) 0%, rgba(248, 245, 238, 0) 70%),
    linear-gradient(180deg, #FFFDF8 0%, #F5F2EA 100%);
}
/* Silk-texture pattern: very subtle grid lines drawn in CSS to mimic mockup */
.sgc-featured-slideshow__slide::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(63, 95, 85, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 95, 85, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.55;
  mask-image: radial-gradient(80% 80% at 40% 50%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 80% at 40% 50%, #000 0%, transparent 75%);
}
.sgc-featured-slideshow__slide > * { position: relative; z-index: 1; }

/* Carousel cards (by_interest / by_region / by_companion / by_season): the
   `placeholder_svg` SHOPLINE helper drops a beige broken-image SVG. Soften it
   to a calm silk wash so empty cards read as "atmosphere" not "missing". */
.sgc-image-with-text-carousel__image-placeholder {
  background: linear-gradient(180deg, var(--cj-silk) 0%, var(--cj-paper) 100%) !important;
}
.sgc-image-with-text-carousel__image-placeholder > * { opacity: 0; }

/* Product cards (blueprints when collection is empty): same treatment */
.sgc-product-image__placeholder-image {
  background: linear-gradient(180deg, var(--cj-silk) 0%, var(--cj-paper) 100%) !important;
}
.sgc-product-image__placeholder-image > * { opacity: 0; }

/* image-promotion (bottom_cta): no image set → SHOPLINE shows a placeholder.
   Suppress; let the celadon page bg shine through */
.image-promotion .placeholder-svg,
.image-promotion svg[class*='placeholder'] {
  display: none !important;
}
.image-promotion {
  background: linear-gradient(180deg, var(--cj-silk) 0%, var(--cj-paper) 100%) !important;
}

/* --- Hide blueprints section when it has no products --------------------
   The heading section (`blueprints_heading`) is a separate rich-text section,
   so it stays. We only suppress the empty product-list shell so the heading
   doesn't sit above an empty block. The merchant filling the collection in
   SHOPLINE admin will make this rule irrelevant (children exist again). */
.sgc-product-list:not(:has(.sgc-product-card)):not(:has(.product-card)) .sgc-product-list__tab-content {
  min-height: 0;
}

/* --- Pill rounding for SHOPLINE primary buttons globally ---------------- */
/* theme.config sets button_border_radius: 2 (almost square). We can't safely
   bump that global without affecting product pages mid-flow, so we soften the
   hero/marketing buttons only via the slide / image-promotion / sgc-* scopes. */
.sgc-featured-slideshow__slide .sgc-button,
.sgc-featured-slideshow__slide a[class*='button'],
.sgc-featured-slideshow__slide button {
  border-radius: 999px !important;
  padding-inline: 22px !important;
  min-height: 46px !important;
}

/* --- Section vertical rhythm + Page bg ---------------------------------- */
body { background-color: var(--cj-light-paper); }

.sgc-image-with-text-carousel,
.sgc-product-list,
.image-promotion,
[data-module="quiet_care"] {
  padding-block: clamp(56px, 8vw, 112px) !important;
}

/* --- Carousel section titles: editorial serif, larger sizing ------------ */
.sgc-image-with-text-carousel .sgc-image-with-text-carousel__title,
.sgc-image-with-text-carousel h2 {
  font-family: 'Abhaya Libre', Georgia, 'Times New Roman', serif !important;
  font-weight: 600 !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
  color: var(--cj-ink) !important;
}

/* --- Card title: serif, restrained ------------------------------------- */
.sgc-image-with-text-carousel__card-subtitle,
.sgc-image-with-text-carousel__card .sgc-image-with-text-carousel__title {
  font-family: 'Abhaya Libre', Georgia, serif !important;
  font-weight: 600 !important;
}

/* --- Blueprints heading: keep but make sure it doesn't render orphaned -- */
[id^='shopline-section-template--index__blueprints_heading'] h2 {
  font-family: 'Abhaya Libre', Georgia, serif !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  color: var(--cj-ink) !important;
}
[id^='shopline-section-template--index__blueprints_heading'] p {
  color: var(--cj-muted-text) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* --- Trip Planner preview: pixel-align toward V15.25 mockup target ------ */
.cj-planner-preview {
  width: 360px;
  top: 104px;
  right: 32px;
  padding: 24px 24px 22px;
  border-radius: 12px;
  background: var(--cj-light-paper);
  border: 1px solid var(--cj-line);
  box-shadow:
    0 28px 64px -32px rgba(31, 41, 38, 0.22),
    0 2px 6px rgba(31, 41, 38, 0.04);
}
.cj-preview-kicker {
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--cj-celadon-2);
  margin-bottom: 6px;
  font-weight: 600;
}
.cj-preview-title {
  font-family: 'Abhaya Libre', Georgia, serif;
  font-size: 31px;
  line-height: 1.02;
  font-weight: 600;
}
.cj-preview-sub { font-size: 13px; line-height: 1.55; color: var(--cj-muted-text); }
.cj-preview-current { background: var(--cj-paper); border-color: var(--cj-line); }
.cj-preview-idea { font-family: 'Abhaya Libre', Georgia, serif; font-size: 15px; }
.cj-preview-cta { height: 46px; font-weight: 600; }

/* v15.26 — Preview now safe at 1024+ because hero is left-aligned with a
   max-width of 560px. Show it from 1024 up; tighten width for laptops. */
@media (max-width: 1399px) {
  .cj-planner-preview { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .cj-planner-preview { display: block; width: 300px; top: 92px; right: 20px; padding: 20px 20px 18px; }
  .cj-preview-title { font-size: 26px; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .cj-planner-preview { display: block; width: 320px; top: 96px; right: 24px; padding: 22px 22px 20px; }
  .cj-preview-title { font-size: 28px; }
}

/* --- Announcement bar: scheme-7 now, but force soft tone if scheme falls back */
[data-section-type="announcement-bar"],
.announcement-bar {
  --color-scheme-color_background: var(--cj-paper) !important;
  --color-scheme-color_text: var(--cj-celadon) !important;
}
.announcement-bar p { font-family: 'Montserrat', sans-serif !important; font-size: 12px !important; letter-spacing: 0.16em !important; color: var(--cj-celadon) !important; }

/* --- Cart-bubble suppression on header (cart is disabled anyway) -------- */
.header__cart-entry { display: none !important; }

/* --- The floating .cj-list-trigger floating button: tone down on desktop
       where Trip Planner preview is already visible (avoid duplicate entry).
       v15.27: lowered to ≥1024 because preview now shows from 1024 up. */
@media (min-width: 1024px) {
  .cj-list-trigger {
    opacity: 0;
    pointer-events: none;
  }
}

/* ============================================================================
   v15.27 — Push to "premium 80分" without imagery.
   Each block is labelled with the (a-h) item from the owner conversation.
   ========================================================================= */

/* (g) Bottom CTA placeholder SVG — the SHOPLINE camera/landmark drawing rendered
   inside .image-promotion is `svg.image-promotion__bg-mage` (typo of bg-image
   in vendor section). Killing it lets the silk-paper gradient bg show through
   cleanly. */
.image-promotion__bg-mage { display: none !important; }

/* (h) Logo — "CT-BY" text logo upgrade to editorial serif with tracking. Adds
   brand presence without requiring an SVG/PNG upload. */
.header__logo-text {
  font-family: 'Abhaya Libre', Georgia, 'Times New Roman', serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  color: var(--cj-ink) !important;
  text-transform: uppercase !important;
}
@media (max-width: 600px) {
  .header__logo-text { font-size: 17px !important; letter-spacing: 0.14em !important; }
}

/* (d) Alternating section background — paper / silk rhythm so the homepage
   reads as a sequence of distinct chapters rather than one uniform scroll. */
[id*='template--index__by_interest'] { background: var(--cj-light-paper) !important; }
[id*='template--index__by_region']   { background: var(--cj-paper) !important; }
[id*='template--index__by_companion']{ background: var(--cj-light-paper) !important; }
[id*='template--index__by_season']   { background: var(--cj-paper) !important; }
[id*='template--index__quiet_care']  { background: var(--cj-light-paper) !important; }
[id*='template--index__blueprints_heading'],
[id*='template--index__blueprints'] {
  background: linear-gradient(180deg, var(--cj-paper) 0%, var(--cj-silk) 100%) !important;
}

/* (b) Per-section card silk-tint differentiation. Without uploaded imagery the
   cards used to look identical; these gentle palette shifts give each section
   a recognisable mood. */
[id*='template--index__by_interest'] .sgc-image-with-text-carousel__image-placeholder {
  background: linear-gradient(135deg, #E2E7D6 0%, #F0E9D6 100%) !important;
}
[id*='template--index__by_region'] .sgc-image-with-text-carousel__image-placeholder {
  background: linear-gradient(135deg, #DCE5EB 0%, #E9F0EB 100%) !important;
}
[id*='template--index__by_companion'] .sgc-image-with-text-carousel__image-placeholder {
  background: linear-gradient(135deg, #E8E0D2 0%, #EFE6D2 100%) !important;
}
[id*='template--index__by_season'] .sgc-image-with-text-carousel__image-placeholder {
  background: linear-gradient(135deg, #DDE6DC 0%, #E9F0EB 100%) !important;
}

/* (c) Card hover lift + title underline reveal. Subtle motion = premium feel. */
.sgc-image-with-text-carousel__card,
.sgc-image-with-text-carousel a[class*='card'] {
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.sgc-image-with-text-carousel__card:hover,
.sgc-image-with-text-carousel a[class*='card']:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -22px rgba(31, 41, 38, 0.18);
}
.sgc-image-with-text-carousel__card .sgc-image-with-text-carousel__title,
.sgc-image-with-text-carousel__card-subtitle {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 280ms ease;
  display: inline-block;
}
.sgc-image-with-text-carousel__card:hover .sgc-image-with-text-carousel__title,
.sgc-image-with-text-carousel__card:hover .sgc-image-with-text-carousel__card-subtitle {
  background-size: 100% 1px;
}

/* (a) Hero CSS-drawn mountain silhouettes — three layered horizons in
   inline-SVG data URIs. Pure CSS, no asset upload. Hidden on mobile because
   the wide aspect ratio doesn't compress gracefully. */
.sgc-featured-slideshow__slide::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  z-index: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,200 L0,150 C80,120 200,135 320,120 C440,105 560,135 720,108 C880,82 1000,118 1200,98 C1320,86 1380,100 1440,92 L1440,200 Z' fill='%233F5F55' fill-opacity='0.07'/></svg>") no-repeat bottom/100% 100%,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'><path d='M0,160 L0,118 C120,100 260,108 380,90 C500,72 620,98 760,78 C900,58 1040,88 1200,72 C1320,60 1400,82 1440,74 L1440,160 Z' fill='%236E8C7D' fill-opacity='0.09'/></svg>") no-repeat bottom/100% 78%,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'><path d='M0,110 L0,72 C120,56 220,68 360,52 C500,36 620,58 760,46 C900,34 1040,52 1180,40 C1320,28 1400,46 1440,40 L1440,110 Z' fill='%231e2926' fill-opacity='0.05'/></svg>") no-repeat bottom/100% 56%;
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%);
}
@media (max-width: 760px) {
  .sgc-featured-slideshow__slide::after {
    height: 28%;
    background-size: 100% 100%, 100% 78%, 100% 56%;
  }
}

/* (e) Blueprints empty state — when the SHOPLINE product collection isn't
   bound yet (or has 0 products), don't leave the heading floating above
   nothing. Show editorial-italic placeholder copy that frames it as
   intentional ("the routes are being finalised") instead of broken. */
.sgc-product-list:not(:has(.sgc-product-card)):not(:has(.product-card))
  .sgc-product-list__tab-content::before {
  content: 'Routes are being finalised. Open Trip Planner to start shaping yours.';
  display: block;
  text-align: center;
  font-family: 'Abhaya Libre', Georgia, serif;
  font-size: 19px;
  font-style: italic;
  color: var(--cj-muted-text);
  padding: 40px 24px 36px;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ============================================================================
   v15.28 — Drawer polish (markup + CSS only; no JS logic changes).
   Items: emoji strip already in markup; rest is typographic/colour rhythm so
   the drawer reads as the same brand as the homepage hero.
   ========================================================================= */

/* Drawer header title — already editorial via global h2 override, but the
   subtitle below it was reading too "ecommerce". Give it the muted brand voice. */
.cj-list-drawer__header .cj-drawer-title p {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cj-muted-text);
}

/* Section labels in My Trip — Saved Places / Saved Hotels / Travel Details /
   Service Preferences. Was emoji + bold, now a quiet editorial label with the
   count badge celadon-tinted. */
.cj-trip-section__head h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--cj-soft-text);
  margin: 0;
}
.cj-trip-section__label { color: var(--cj-soft-text); }
.cj-trip-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--cj-silk);
  color: var(--cj-celadon);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Empty-state pills (e.g. "Nothing saved yet — tap a homepage card…") —
   originally rendered as a flat tinted box; tighten to editorial italic */
.cj-jl-empty {
  font-family: 'Abhaya Libre', Georgia, serif;
  font-size: 15px;
  font-style: italic;
  color: var(--cj-muted-text);
  background: var(--cj-paper);
  border: 1px solid var(--cj-line);
  border-radius: 10px;
  padding: 18px 20px;
  line-height: 1.55;
  text-align: center;
}

/* Form fields in Travel Details + Service Preferences — kill default browser
   chrome, give a quiet celadon underline focus state. */
.cj-list-details__grid select,
.cj-list-details__grid input,
.cj-list-details__grid textarea {
  appearance: none;
  -webkit-appearance: none;
  background: var(--cj-light-paper);
  border: 1px solid var(--cj-line);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  color: var(--cj-ink);
  transition: border-color 160ms ease, background 160ms ease;
}
.cj-list-details__grid select:focus,
.cj-list-details__grid input:focus,
.cj-list-details__grid textarea:focus {
  outline: none;
  border-color: var(--cj-celadon);
  background: #fff;
}
.cj-list-details__grid select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%234f5d58' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
}
.cj-jl-toggle__notes-wrap textarea,
.cj-jl-toggle span,
.cj-jl-insurance span {
  font-family: 'Montserrat', system-ui, sans-serif;
}

/* Service-preferences toggles — strong + small rows */
.cj-jl-toggle strong,
.cj-jl-insurance strong {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--cj-ink);
  margin-bottom: 4px;
}
.cj-jl-toggle small,
.cj-jl-insurance small {
  display: block;
  font-size: 13px;
  color: var(--cj-muted-text);
  line-height: 1.55;
}

/* Bottom action bar — primary "Request a Private Quote" → celadon pill;
   secondary "Keep Exploring" → ghost link with celadon underline */
.cj-list-action {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
.cj-list-action--primary {
  background: var(--cj-celadon) !important;
  color: var(--cj-light-paper) !important;
  border-radius: 999px !important;
  min-height: 48px !important;
  padding: 0 26px !important;
  border: 1px solid var(--cj-celadon) !important;
  font-size: 14px !important;
  text-transform: none !important;
  transition: background 160ms ease;
}
.cj-list-action--primary:hover {
  background: #344e45 !important;
}
.cj-list-action:not(.cj-list-action--primary) {
  background: transparent !important;
  color: var(--cj-celadon) !important;
  border: none !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 13px !important;
}

/* AI search "Explore" button — pill */
.cj-ai-explore {
  background: var(--cj-celadon) !important;
  color: var(--cj-light-paper) !important;
  border-radius: 999px !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  border: 1px solid var(--cj-celadon) !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.cj-ai-explore:hover { background: #344e45 !important; }

/* AI input field */
.cj-ai-input {
  background: var(--cj-light-paper) !important;
  border: 1px solid var(--cj-line) !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  min-height: 44px !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 14px !important;
}
.cj-ai-input:focus { outline: none; border-color: var(--cj-celadon) !important; }

.cj-ai-search__label {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--cj-muted-text) !important;
}

/* Seed pills — give the unselected ones a quiet outline so the bar reads as a
   row even when only one is active. */
.cj-ai-pills { gap: 8px !important; padding: 4px 0 !important; }
.cj-ai-pill {
  background: var(--cj-light-paper) !important;
  border: 1px solid var(--cj-line) !important;
  color: var(--cj-soft-text) !important;
  border-radius: 999px !important;
  height: 32px !important;
  padding: 0 14px !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.cj-ai-pill--active,
.cj-ai-pill[aria-pressed="true"] {
  background: var(--cj-celadon) !important;
  color: var(--cj-light-paper) !important;
  border-color: var(--cj-celadon) !important;
}

/* AI caption — quieter editorial italic */
.cj-ai-caption {
  font-family: 'Abhaya Libre', Georgia, serif !important;
  font-style: italic;
  font-size: 14px;
  color: var(--cj-muted-text) !important;
  margin: 8px 0 12px;
}

/* AI cards: when empty (initial state), add a centered helper line so the
   white box doesn't look broken. */
.cj-ai-cards:empty::before {
  content: 'Tap a seed above, or type a place to discover.';
  display: block;
  text-align: center;
  font-family: 'Abhaya Libre', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--cj-muted-text);
  padding: 36px 20px;
  border: 1px dashed var(--cj-line);
  border-radius: 12px;
  background: var(--cj-paper);
}

/* "View My Trip" entry button */
.cj-view-mytrip {
  background: var(--cj-light-paper) !important;
  border: 1px solid var(--cj-line) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--cj-ink) !important;
}
.cj-view-mytrip:hover { background: var(--cj-paper) !important; }
.cj-view-mytrip__count {
  background: var(--cj-silk) !important;
  color: var(--cj-celadon) !important;
  border-radius: 999px;
  padding: 0 8px;
  min-width: 22px;
  height: 22px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* My Trip back link */
.cj-mytrip-back {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--cj-celadon) !important;
}

/* Clear all link */
.cj-list-clear {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--cj-muted-text) !important;
}

/* My Trip top heading "My Trip" — Abhaya Libre */
.cj-list-summary__head h3 {
  font-family: 'Abhaya Libre', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  color: var(--cj-ink) !important;
}

/* Drawer width tightening on desktop — old 720px felt heavy. New: 480-560
   responsive. Mobile stays full-screen. */
@media (min-width: 901px) {
  .cj-list-drawer { width: 480px !important; max-width: 480px !important; }
}
@media (min-width: 1280px) {
  .cj-list-drawer { width: 540px !important; max-width: 540px !important; }
}

/* ============================================================================
   v15.29 — Kill desktop horizontal overflow.
   At 1024/1280/1440 the quiet_care section's last icon-declaration card
   extended 16-26px past the viewport (flex no-wrap fixed-width sum exceeds
   the section's content box). Two layers of defence:
   1) Global html/body overflow-x: clip — no horizontal scroll anywhere
   2) Per-section overflow-x: hidden on quiet_care so its internal carousel
      stays clipped to the section box.
   ========================================================================= */
html, body { overflow-x: clip; }
[id*='template--index__quiet_care'] { overflow-x: hidden; }

/* ============================================================================
   v15.30 — Lift by_interest / by_region / by_companion / by_season cards
   from "default sgc carousel" to "travel preference tile".
   Scope is strict [id*='template--index__by_'] so other pages using this
   SHOPLINE section type are unaffected.
   ========================================================================= */

[id*='template--index__by_'] .sgc-image-with-text-carousel__card {
  position: relative !important;
  border-radius: 12px !important;
  border: 1px solid var(--cj-line) !important;
  background: var(--cj-light-paper) !important;
  overflow: hidden !important;
  cursor: pointer;
  isolation: isolate;
}

/* Image area: collapse from ~half card to a slim 72px accent strip.
   The silk-tint per section (v15.27 b) still shows; the broken-image SVG
   inside is already faded by `.sgc-image-with-text-carousel__image-placeholder > * { opacity: 0; }`
   from v15.26 — we just need the strip to be thin. */
[id*='template--index__by_'] .sgc-image-with-text-carousel__image {
  height: 72px !important;
  border-bottom: 1px solid var(--cj-line);
}
[id*='template--index__by_'] .sgc-image-with-text-carousel__image-placeholder {
  width: 100% !important;
  height: 100% !important;
}

/* Title: left-aligned editorial serif. Override SHOPLINE's
   `.sgc-text-align-center` + Poppins 18px defaults. */
[id*='template--index__by_'] .sgc-image-with-text-carousel__card .sgc-block-subtitle {
  padding: 18px 20px 4px !important;
  text-align: left !important;
}
[id*='template--index__by_'] .sgc-image-with-text-carousel__card .sgc-block-subtitle,
[id*='template--index__by_'] .sgc-image-with-text-carousel__card .sgc-block-subtitle * {
  font-family: 'Abhaya Libre', Georgia, 'Times New Roman', serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--cj-ink) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

/* Description: small muted body, left-aligned, 2-line clamp */
[id*='template--index__by_'] .sgc-image-with-text-carousel__card .sgc-block-description {
  padding: 0 20px 36px !important;
  text-align: left !important;
}
[id*='template--index__by_'] .sgc-image-with-text-carousel__card .sgc-block-description,
[id*='template--index__by_'] .sgc-image-with-text-carousel__card .sgc-block-description * {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--cj-muted-text) !important;
  line-height: 1.55 !important;
}
[id*='template--index__by_'] .sgc-image-with-text-carousel__card .sgc-block-description span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover state: left-edge celadon bar slides in from top — reads as
   "this preference is now selected". */
[id*='template--index__by_'] .sgc-image-with-text-carousel__card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cj-celadon);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 3;
  pointer-events: none;
}
[id*='template--index__by_'] .sgc-image-with-text-carousel__card:hover::before {
  transform: scaleY(1);
}

/* Hover border + bg + lift (overrides v15.27 generic lift with sharper feel) */
[id*='template--index__by_'] .sgc-image-with-text-carousel__card:hover {
  border-color: var(--cj-celadon-2) !important;
  background: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px -24px rgba(31, 41, 38, 0.20),
    0 2px 6px rgba(31, 41, 38, 0.04);
}

/* Bottom-right "CHOOSE →" affordance — fades in on hover. Suggests
   selectable action without committing to a JS Save flow we don't own. */
[id*='template--index__by_'] .sgc-image-with-text-carousel__card::after {
  content: 'Choose →';
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cj-celadon);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 4;
  pointer-events: none;
}
[id*='template--index__by_'] .sgc-image-with-text-carousel__card:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Disable v15.27's underline-reveal on the card title (was a different feel) —
   the new hover language (left bar + Choose →) tells the story instead. */
[id*='template--index__by_'] .sgc-image-with-text-carousel__card .sgc-image-with-text-carousel__title {
  background-image: none !important;
}