.zonli-club-tiers {
  --zct-bg: #f7f4ee;
  --zct-ink: #2a3b2b;
  --zct-card: #ffffff;
  --zct-accent: #2a3b2b;
  --zct-icon-bg: #efebe3;
  --zct-btn-bg: #7d9a72;
  --zct-btn-fg: #ffffff;
  --zct-card-radius: 16px;
  width: 100%;
  background: var(--zct-bg);
  color: var(--zct-ink);
}

.zonli-club-tiers__header {
  /* No width cap on the header so the heading can use the full content width
     and stay on one line at its current font size. The description keeps its
     own readable max-width below. */
  margin: 0 0 32px;
  text-align: left;
}

.zonli-club-tiers__eyebrow {
  margin: 0 0 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

.zonli-club-tiers__heading {
  margin: 0 0 16px;
  line-height: 1.2;
}

.zonli-club-tiers__text {
  margin: 0;
  max-width: 560px;
  opacity: 0.8;
}

.zonli-club-tiers__text p {
  margin: 0;
}

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

.zonli-club-tiers__carousel {
  position: relative;
  min-width: 0;
}

.zonli-club-tiers__carousel-controls {
  display: none;
}

.zonli-club-tiers__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 0;
  border-radius: var(--zct-card-radius, var(--card-border-radius));
  background-color: var(--zct-card);
  background-image: var(--zct-card-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid rgba(42, 59, 43, 0.08);
  box-shadow: 0 4px 16px rgba(42, 59, 43, 0.035);
  text-align: left;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: default;
  min-height: var(--zct-card-min-h-mobile, 220px);
}

.zonli-club-tiers__card--has-image {
  background-image:
    linear-gradient(
      rgb(255 255 255 / var(--zct-image-overlay, 60%)),
      rgb(255 255 255 / var(--zct-image-overlay, 60%))
    ),
    var(--zct-card-image, none);
}

a.zonli-club-tiers__card {
  cursor: pointer;
  transition: transform 0.2s ease;
}

a.zonli-club-tiers__card:hover {
  transform: translateY(-2px);
}

.zonli-club-tiers__card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.zonli-club-tiers__icon {
  width: var(--zct-icon-box, 52px);
  height: var(--zct-icon-box, 52px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--zct-icon-bg, #efebe3);
  overflow: hidden;
}

.zonli-club-tiers__icon img {
  width: var(--zct-icon-size, 30px);
  height: var(--zct-icon-size, 30px);
  object-fit: contain;
}

.zonli-club-tiers__icon svg {
  width: var(--zct-icon-size, 30px);
  height: var(--zct-icon-size, 30px);
}

.zonli-club-tiers--plain-icons .zonli-club-tiers__icon { background: transparent; }

.zonli-club-tiers__name {
  margin: 0;
  font-size: var(--zct-copy-size, 16px);
  line-height: var(--zct-copy-leading, 150%);
}

.zonli-club-tiers__meta {
  display: grid;
  gap: 8px;
}

.zonli-club-tiers__threshold,
.zonli-club-tiers__multiplier,
.zonli-club-tiers__perk {
  margin: 0;
  opacity: 0.82;
  line-height: 1.35;
  font-size: var(--zct-copy-size, 16px);
  line-height: var(--zct-copy-leading, 150%);
}

.zonli-club-tiers__name + .zonli-club-tiers__meta {
  margin-top: -4px;
}

.zonli-club-tiers__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--zct-btn-h, 40px);
  padding: 0 var(--zct-btn-px, 16px);
  border: 0;
  border-radius: var(--button-border-radius);
  background: var(--zct-btn-bg, #7d9a72);
  color: var(--zct-btn-fg, #fff);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.zonli-club-tiers__cta:hover {
  opacity: 0.92;
}

.zonli-club-tiers__cta:focus-visible {
  outline: 2px solid var(--zct-ink, #2a3b2b);
  outline-offset: 3px;
}

.zonli-club-tiers__card--accent .zonli-club-tiers__cta {
  background: var(--zct-accent);
  color: var(--zct-btn-fg, #fff);
}

@media screen and (min-width: 960px) {
  /* Center the content on wide screens (otherwise it stays pinned left). */
  .zonli-club-tiers > .page-width {
    margin-inline: auto !important;
  }

  .zonli-club-tiers__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .zonli-club-tiers__card {
    padding: 20px;
    min-height: var(--zct-card-min-h-desktop, 220px);
  }
}

@media screen and (min-width: 750px) and (max-width: 959px) {
  .zonli-club-tiers__icon {
    width: var(--zct-icon-box-pad, 92px);
    height: var(--zct-icon-box-pad, 92px);
  }

  .zonli-club-tiers__icon img,
  .zonli-club-tiers__icon svg {
    width: var(--zct-icon-size-pad, 80px);
    height: var(--zct-icon-size-pad, 80px);
  }

  .zonli-club-tiers__card {
    min-height: var(--zct-card-min-h-pad, 220px);
  }

  /* Pad 端卡片 icon 水平居中（与手机端一致；桌面不变） */
  .zonli-club-tiers__card > .zonli-club-tiers__icon {
    align-self: center;
  }
}

@media screen and (max-width: 749px) {
  .zonli-club-tiers__icon {
    width: var(--zct-icon-box-mobile, 72px);
    height: var(--zct-icon-box-mobile, 72px);
  }

  /* 移动端卡片 icon 水平居中（卡片为纵向 flex，文字对齐不受影响） */
  .zonli-club-tiers__card > .zonli-club-tiers__icon {
    align-self: center;
  }

  .zonli-club-tiers__icon img,
  .zonli-club-tiers__icon svg {
    width: var(--zct-icon-size-mobile, 64px);
    height: var(--zct-icon-size-mobile, 64px);
  }
}

@media screen and (max-width: 359px) {
  .zonli-club-tiers__grid {
    grid-template-columns: 1fr;
  }
}

.zonli-club-tiers theme-dialog > dialog.zonli-club-tiers__dialog {
  inset: 0;
  width: min(var(--zct-dialog-width-desktop, 560px), calc(100vw - 48px));
  height: min(var(--zct-dialog-height-desktop, 520px), calc(100dvh - 48px));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--zct-card-radius, var(--card-border-radius));
  background: var(--zct-card, #fff);
  color: var(--zct-ink, #2a3b2b);
  box-shadow: 0 16px 40px rgba(42, 59, 43, 0.16);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: auto;
}

.zonli-club-tiers theme-dialog > dialog.zonli-club-tiers__dialog--has-image {
  background-image:
    linear-gradient(
      rgb(255 255 255 / var(--zct-image-overlay, 60%)),
      rgb(255 255 255 / var(--zct-image-overlay, 60%))
    ),
    var(--zct-dialog-image, none);
}

.zonli-club-tiers theme-dialog > dialog.zonli-club-tiers__dialog::backdrop {
  background: rgba(42, 59, 43, 0.45);
  backdrop-filter: blur(8px);
}

.zonli-club-tiers__dialog-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zct-dialog-gap, 14px);
  padding: var(--zct-dialog-pad, 32px);
  text-align: left;
}

/* Larger dialog title by default (merchant can override with the dialog name
   size control). */
.zonli-club-tiers__dialog-card .zonli-club-tiers__name {
  font-size: var(--zct-dialog-name-size, 30px);
  line-height: 1.2;
}

.zonli-club-tiers__details {
  margin: 0;
  padding: 0 0 0 1.25em;
  list-style: disc;
  display: grid;
  gap: var(--zct-dialog-list-gap, 10px);
  font-size: var(--zct-dialog-text-size, var(--zct-copy-size, 16px));
  line-height: var(--zct-copy-leading, 150%);
}

.zonli-club-tiers__details li {
  margin: 0;
  padding-left: 4px;
}

.zonli-club-tiers__details li::marker {
  color: rgba(42, 59, 43, 0.35);
}

/* Dialog action button sits bottom-left; size follows the dialog button
   controls, falling back to the shared button controls. */
.zonli-club-tiers__dialog-card .zonli-club-tiers__cta {
  align-self: flex-start;
  min-height: var(--zct-dialog-btn-h, var(--zct-btn-h, 40px));
  padding: 0 var(--zct-dialog-btn-px, var(--zct-btn-px, 16px));
}

@media (max-width: 959px) {
  .zonli-club-tiers__grid {
    display: grid;
    grid-auto-flow: column;
    /* Show two tiers at a time, then keep the remaining tiers swipeable. */
    grid-auto-columns: calc((100% - 12px) / 2);
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
  }

  .zonli-club-tiers__grid::-webkit-scrollbar { display: none; }
  .zonli-club-tiers__item { scroll-snap-align: start; }

  .zonli-club-tiers__carousel-controls {
    position: absolute;
    inset: 0 -14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2;
  }

  .zonli-club-tiers__carousel-controls[hidden] { display: none; }

  .zonli-club-tiers__carousel-button {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(42, 59, 43, 0.18);
    border-radius: 50%;
    background: var(--zct-card, #fff);
    color: var(--zct-ink, #2a3b2b);
    box-shadow: 0 4px 14px rgba(42, 59, 43, 0.14);
    font: 400 28px/1 Arial, sans-serif;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }

  .zonli-club-tiers__carousel-button span { transform: translateY(-2px); }

  .zonli-club-tiers__carousel-button:not(:disabled):active {
    transform: scale(0.94);
    box-shadow: 0 2px 8px rgba(42, 59, 43, 0.12);
  }

  .zonli-club-tiers__carousel-button:disabled {
    cursor: default;
    opacity: 0.22;
  }

  .zonli-club-tiers__carousel-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  .zonli-club-tiers theme-dialog > dialog.zonli-club-tiers__dialog {
    inset: 0;
    width: min(var(--zct-dialog-width-pad, 500px), calc(100vw - 40px));
    height: min(var(--zct-dialog-height-pad, 500px), calc(100dvh - 40px));
    margin: auto;
  }
}

@media (max-width: 749px) {
  .zonli-club-tiers theme-dialog > dialog.zonli-club-tiers__dialog {
    width: min(var(--zct-dialog-width-mobile, 340px), calc(100vw - 32px));
    height: min(var(--zct-dialog-height-mobile, 440px), calc(100dvh - 32px));
  }
}

@media (max-width: 359px) {
  .zonli-club-tiers__grid {
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 10px) / 2);
    grid-template-columns: none;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zonli-club-tiers theme-dialog > dialog.zonli-club-tiers__dialog {
    animation: none;
  }

  a.zonli-club-tiers__card,
  a.zonli-club-tiers__card:hover {
    transition: none;
    transform: none;
  }
}

/* Theme editor: align editable headings and copy without changing data/control alignment. */
.zonli-club-tiers[data-editable-text-align="left"] :is(h1, h2, h3, h4, h5, h6, p, .rte, .zonli-club-tiers__details, .zonli-club-tiers__cta) { text-align: left; }
.zonli-club-tiers[data-editable-text-align="center"] :is(h1, h2, h3, h4, h5, h6, p, .rte, .zonli-club-tiers__details, .zonli-club-tiers__cta) { text-align: center; }
.zonli-club-tiers[data-editable-text-align="right"] :is(h1, h2, h3, h4, h5, h6, p, .rte, .zonli-club-tiers__details, .zonli-club-tiers__cta) { text-align: right; }

.zonli-club-tiers[data-editable-text-align="left"] .zonli-club-tiers__cta { justify-content: flex-start; }
.zonli-club-tiers[data-editable-text-align="center"] .zonli-club-tiers__cta { justify-content: center; }
.zonli-club-tiers[data-editable-text-align="right"] .zonli-club-tiers__cta { justify-content: flex-end; }

.zonli-club-tiers[data-editable-text-align="left"] .zonli-club-tiers__details,
.zonli-club-tiers[data-editable-text-align="center"] .zonli-club-tiers__details,
.zonli-club-tiers[data-editable-text-align="right"] .zonli-club-tiers__details { width: 100%; }