/**
 * ComFoo Club storefront — account glance, checkout Coins, PDP earn.
 * Tokens come from the ComFoo theme. Scoped to .cf-club-* only.
 */

.cf-club-account,
.cf-club-checkout,
.cf-club-earn {
  color-scheme: inherit;
}

html.cf-theme-dark .cf-club-account,
html.cf-theme-dark .cf-club-checkout,
html.cf-theme-dark .cf-club-earn {
  color-scheme: inherit;
}

.cf-club-account .screen-reader-text,
.cf-club-checkout .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cf-club-stack {
  display: flex;
  flex-direction: column;
  gap: var(--comfoo-space-m, 1rem);
}

.cf-club-primary-nav,
.cf-club-section-nav {
  display: grid;
  min-width: 0;
  padding: var(--comfoo-space-2xs, 0.5rem);
  background: var(--comfoo-dark-5, #5e3e320d);
  border: 1px solid var(--comfoo-border-primary, hsla(0, 0%, 50%, 0.25));
  border-radius: var(--comfoo-radius-m, 0.75rem);
}

.cf-club-primary-nav {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--comfoo-space-xs, 0.64rem);
  margin: 0 0 var(--comfoo-space-l, 1.25rem);
}

.cf-club-section-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--comfoo-space-3xs, 0.41rem);
}

.cf-club-nav-more {
  min-width: 0;
}

.cf-club-nav-more[open] {
  grid-column: 1 / -1;
}

.cf-club-nav-more summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--comfoo-radius-s, 0.5rem);
  color: var(--comfoo-chocolate, #5e3e32);
  font-size: var(--comfoo-text-s, 0.89rem);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  list-style: none;
}

.cf-club-nav-more summary::-webkit-details-marker {
  display: none;
}

.cf-club-nav-more summary::after {
  content: '⌄';
  margin-left: 0.35rem;
  font-size: 1.1em;
}

.cf-club-nav-more[open] summary::after {
  transform: rotate(180deg);
}

.cf-club-nav-more summary:focus-visible {
  outline: 3px solid var(--comfoo-chocolate, #5e3e32);
  outline-offset: 2px;
}

.cf-club-nav-more__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0.4rem 0 0;
}

.cf-club-primary-nav a,
.cf-club-section-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 2.75rem;
  padding: var(--comfoo-space-2xs, 0.51rem) var(--comfoo-space-s, 0.8rem);
  color: var(--comfoo-chocolate, #5e3e32);
  font-size: var(--comfoo-text-s, 0.89rem);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  border: 1px solid transparent;
  border-radius: var(--comfoo-radius-s, 0.5rem);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cf-club-primary-nav a.is-active,
.cf-club-section-nav a.is-active {
  color: var(--comfoo-secondary, #2b1a14);
  background: var(--comfoo-bg-surface, #fff);
  border-color: var(--comfoo-border-primary, hsla(0, 0%, 50%, 0.25));
  box-shadow: var(--comfoo-shadow-s, 0 1.5px 3px hsla(0, 0%, 0%, 0.15));
}

@media (hover: hover) {
  .cf-club-primary-nav a:hover,
  .cf-club-section-nav a:hover {
    color: var(--comfoo-secondary, #2b1a14);
    background: var(--comfoo-vanilla, #ece8c9);
  }
}

.cf-club-primary-nav a:focus-visible,
.cf-club-section-nav a:focus-visible,
.cf-club-back a:focus-visible {
  outline: 3px solid var(--comfoo-chocolate, #5e3e32);
  outline-offset: 2px;
}

.cf-club-account [data-cf-club-panel][hidden],
.cf-club-back[hidden] {
  display: none !important;
}

.cf-club-account [data-cf-club-panel] {
  min-width: 0;
}

.cf-club-account [data-cf-club-panel]:focus {
  outline: none;
}

.cf-club-account [data-cf-club-panel]:focus-visible {
  outline: 3px solid var(--comfoo-chocolate, #5e3e32);
  outline-offset: 2px;
}

.cf-club-back {
  margin: calc(var(--comfoo-space-xs, 0.64rem) * -0.5) 0 0;
  padding-inline: var(--comfoo-space-m, 1rem);
}

.cf-club-back a {
  color: var(--comfoo-chocolate, #5e3e32);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.cf-club-woo-view__body {
  padding: var(--comfoo-space-m, 1rem);
}

.cf-club-settings-group + .cf-club-settings-group {
  margin-top: var(--comfoo-space-l, 1.25rem);
  padding-top: var(--comfoo-space-l, 1.25rem);
  border-top: 1px solid var(--comfoo-border-primary, hsla(0, 0%, 50%, 0.25));
}

.cf-club-settings-group > h3 {
  margin-top: 0;
}

.cf-club-section__title {
  margin: 0 0 var(--comfoo-space-2xs, 0.5rem);
  padding-inline: var(--comfoo-space-m, 1rem);
  font-size: var(--comfoo-text-xs, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--comfoo-chocolate, #5e3e32);
  line-height: 1.3;
}

.cf-club-section__body {
  background: var(--comfoo-bg-surface, #fff);
  border: 1px solid var(--comfoo-border-primary, hsla(0, 0%, 50%, 0.25));
  border-radius: var(--comfoo-radius-l, 1rem);
  box-shadow: var(--comfoo-shadow-s, 0 1.5px 3px hsla(0, 0%, 0%, 0.15));
  overflow: hidden;
}

.cf-club-overview-intro {
  margin: 0 0 0.8rem;
  padding-inline: var(--comfoo-space-m, 1rem);
  color: var(--comfoo-text-body, #2b1a14);
  line-height: 1.5;
}

.cf-club-glance {
  padding: var(--comfoo-space-m, 1rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--comfoo-space-m, 1rem);
  min-width: 0;
}

.cf-club-glance > * {
  min-width: 0;
}

.cf-club-profile {
  display: flex;
  align-items: flex-start;
  gap: var(--comfoo-space-s, 0.8rem);
  min-width: 0;
}

.cf-club-avatar {
  flex: 0 0 auto;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 20%;
  overflow: hidden;
  background: var(--comfoo-vanilla, #ece8c9);
  box-shadow: var(--comfoo-shadow-m, 0 2px 6px hsla(0, 0%, 0%, 0.15));
}

.cf-club-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cf-club-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.45rem 0 0;
}

.cf-club-avatars__btn {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 20%;
  background: var(--comfoo-vanilla, #ece8c9);
  cursor: pointer;
  overflow: hidden;
}

.cf-club-avatars__btn svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cf-club-avatars__btn.is-selected {
  border-color: var(--comfoo-applepie, #83bc62);
}

.cf-club-avatars__btn.is-locked {
  filter: grayscale(1);
  border-style: dashed;
  border-color: var(--comfoo-chocolate, #5e3e32);
  cursor: not-allowed;
}

.cf-club-avatars__btn:focus-visible {
  outline: 3px solid var(--comfoo-applepie, #83bc62);
  outline-offset: 2px;
}

.cf-club-profile__name {
  margin: 0;
  font-size: var(--comfoo-text-l, 1.13rem);
  font-weight: 700;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-profile__sub {
  margin: 0.15rem 0 0;
  font-size: var(--comfoo-text-s, 0.9rem);
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
  font-size: var(--comfoo-text-xs, 0.8rem);
  font-weight: 700;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-status__mark {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--comfoo-applepie, #83bc62);
}

.cf-club-level__title {
  margin: 0 0 var(--comfoo-space-s, 0.8rem);
  font-size: var(--comfoo-text-2xl, 1.42rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-level__highest {
  margin: calc(var(--comfoo-space-s, 0.8rem) * -0.5) 0 var(--comfoo-space-s, 0.8rem);
  font-size: var(--comfoo-text-s, 0.89rem);
  font-weight: 600;
  color: var(--comfoo-text-body, #2b1a14);
}

.cf-club-progress {
  display: block;
  width: 100%;
  height: 2rem;
  min-height: 28px;
  max-height: 32px;
  border-radius: var(--comfoo-radius-full, 999rem);
  background: var(--comfoo-chocolate, #5e3e32);
  box-shadow: inset 0 1px 2px hsla(20, 40%, 10%, 0.35);
  overflow: hidden;
}

.cf-club-progress__fill {
  display: block;
  height: 100%;
  background: var(--comfoo-applepie, #83bc62);
  border-radius: inherit;
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.28);
}

.cf-club-progress__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem 0.8rem;
  margin-top: 0.4rem;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.cf-club-progress__now {
  margin: 0;
  min-width: 0;
  font-size: var(--comfoo-text-m, 1rem);
  font-weight: 800;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-progress__next {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 700;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-account .cf-club-wallet {
  display: grid;
  gap: var(--comfoo-space-xs, 0.64rem);
  min-width: 0;
  padding: 0;
  border: 0;
}

.cf-club-wallet__coins {
  margin: 0;
  font-size: var(--comfoo-text-2xl, 1.42rem);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-wallet__label {
  display: block;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 700;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-wallet__kr {
  margin: 0;
  font-size: var(--comfoo-text-l, 1.13rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--comfoo-text-body, #2b1a14);
}

.cf-club-stat:not(.cf-club-stat--used) .cf-club-wallet__kr {
  margin: 0.15rem 0 0.3rem;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-stat:not(.cf-club-stat--used) .cf-club-wallet__coins {
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 600;
}

.cf-club-stat:not(.cf-club-stat--used) .cf-club-wallet__label {
  display: inline;
  margin-left: 0.25rem;
}

.cf-club-wallet__kr span {
  display: block;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 500;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-wallet__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--comfoo-space-s, 0.8rem);
}

.cf-club-account .cf-club-wallet__pair {
  grid-template-columns: 1fr;
  gap: var(--comfoo-space-2xs, 0.5rem);
}

.cf-club-stat {
  margin: 0;
  padding: var(--comfoo-space-s, 0.8rem);
  background: var(--comfoo-vanilla, #ece8c9);
  border-radius: var(--comfoo-radius-m, 0.75rem);
}

.cf-club-stat--used {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 0.75rem;
  padding: 0.15rem 0.1rem 0.25rem;
  background: transparent;
  border-radius: 0;
}

.cf-club-stat--used .cf-club-stat__kicker {
  margin: 0;
  flex: 1 1 auto;
}

.cf-club-stat--used .cf-club-wallet__coins {
  margin: 0;
  font-size: var(--comfoo-text-m, 1rem);
}

.cf-club-stat--used .cf-club-wallet__label {
  display: inline;
  margin-left: 0.3rem;
}

.cf-club-stat--used .cf-club-wallet__kr {
  flex: 1 1 100%;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 600;
}

.cf-club-stat--used .cf-club-wallet__kr span {
  display: inline;
  margin-left: 0.3rem;
}

.cf-club-stat__kicker {
  margin: 0 0 0.35rem;
  font-size: var(--comfoo-text-xs, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-stat:not(.cf-club-stat--used) .cf-club-wallet__coins {
  font-size: var(--comfoo-text-xl, 1.27rem);
}

.cf-club-wallet__used {
  margin: 0;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 600;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-convert {
  display: grid;
  gap: var(--comfoo-space-3xs, 0.41rem);
  margin: 0;
  min-width: 0;
  max-width: 100%;
  padding: var(--comfoo-space-s, 0.8rem);
  background: var(--comfoo-bg-surface, #fff);
  border: 1px solid var(--comfoo-border-primary, hsla(0, 0%, 50%, 0.25));
  border-radius: var(--comfoo-radius-m, 0.75rem);
}

.cf-club-convert__kicker {
  margin: 0;
  font-size: var(--comfoo-text-xs, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-convert__rate {
  margin: 0;
  font-size: var(--comfoo-text-l, 1.13rem);
  font-weight: 800;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-convert__hint {
  margin: 0;
  font-size: var(--comfoo-text-s, 0.9rem);
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-convert .cf-club-cta {
  margin-top: var(--comfoo-space-3xs, 0.41rem);
}

.cf-club-convert.is-pending {
  border-color: var(--comfoo-success-30, #83bc624d);
}

.cf-club-convert .cf-club-applied {
  margin-top: var(--comfoo-space-4xs, 0.25rem);
}

.cf-club-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--comfoo-space-3xs, 0.41rem);
  min-height: 2.75rem;
  width: 100%;
  max-width: min(22rem, 100%);
  min-width: 0;
  box-sizing: border-box;
  padding: 0 var(--comfoo-space-s, 0.8rem);
  background: var(--comfoo-secondary, #2b1a14);
  color: #fff !important;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--comfoo-secondary, #2b1a14);
  border-radius: var(--comfoo-radius-m, 0.75rem);
  box-shadow: var(--comfoo-shadow-m, 0 2px 6px hsla(0, 0%, 0%, 0.15));
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

@media (hover: hover) {
  .cf-club-cta:hover {
    background: var(--comfoo-chocolate, #5e3e32);
    border-color: var(--comfoo-chocolate, #5e3e32);
    color: #fff;
  }
}

.cf-club-cta:active {
  transform: translateY(1px);
}

.cf-club-cta:disabled,
.cf-club-cta[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.75;
  box-shadow: none;
  transform: none;
}

.cf-club-cta:focus-visible,
.cf-club-ghost:focus-visible,
.cf-club-input:focus-visible {
  outline: 3px solid var(--comfoo-chocolate, #5e3e32);
  outline-offset: 2px;
}

.cf-club-milestone {
  margin: 0;
  padding: 0 var(--comfoo-space-m, 1rem) var(--comfoo-space-s, 0.8rem);
  font-size: var(--comfoo-text-s, 0.9rem);
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-mission {
  padding: var(--comfoo-space-s, 0.8rem) var(--comfoo-space-m, 1rem);
  border-bottom: 1px solid var(--comfoo-border-primary, hsla(0, 0%, 50%, 0.25));
}

.cf-club-mission:last-child {
  border-bottom: 0;
}

.cf-club-mission__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--comfoo-space-s, 0.8rem);
}

.cf-club-mission__name {
  margin: 0;
  font-size: var(--comfoo-text-m, 1rem);
  font-weight: 700;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-mission__count {
  margin: 0;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cf-club-mission__hint {
  margin: 0.2rem 0 0;
  font-size: var(--comfoo-text-s, 0.9rem);
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-mission__bar {
  margin-top: 0.4rem;
  height: 0.4rem;
  border-radius: var(--comfoo-radius-full, 999rem);
  background: var(--comfoo-dark-10, #5e3e321a);
  overflow: hidden;
}

.cf-club-mission__bar > span {
  display: block;
  height: 100%;
  background: var(--comfoo-applepie, #83bc62);
}

.cf-club-badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--comfoo-border-primary, hsla(0, 0%, 50%, 0.25));
}

.cf-club-badge {
  margin: 0;
  padding: var(--comfoo-space-s, 0.8rem);
  background: var(--comfoo-bg-surface, #fff);
  text-align: left;
}

.cf-club-badge__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.4rem;
  border-radius: 20%;
  background: var(--comfoo-dark-5, #5e3e320d);
  color: var(--comfoo-chocolate, #5e3e32);
  border: 2px solid var(--comfoo-border-primary, hsla(0, 0%, 50%, 0.25));
}

.cf-club-badge.is-unlocked .cf-club-badge__mark {
  background: var(--comfoo-vanilla, #ece8c9);
  border-color: var(--comfoo-applepie, #83bc62);
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-badge.is-locked {
  opacity: 0.78;
}

.cf-club-badge.is-locked .cf-club-badge__icon {
  opacity: 0.42;
}

.cf-club-badge__name {
  margin: 0;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 700;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-badge__state {
  margin: 0.15rem 0 0;
  font-size: var(--comfoo-text-xs, 0.8rem);
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-activity-wrap {
  overflow-x: auto;
}

.cf-club-activity {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.cf-club-activity th,
.cf-club-activity td {
  padding: var(--comfoo-space-s, 0.8rem) var(--comfoo-space-xs, 0.64rem);
  border-bottom: 1px solid var(--comfoo-border-primary, hsla(0, 0%, 50%, 0.25));
  text-align: left;
  vertical-align: top;
}

.cf-club-activity thead th {
  font-size: var(--comfoo-text-xs, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-activity tbody th {
  font-weight: 700;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-activity tbody tr:last-child th,
.cf-club-activity tbody tr:last-child td {
  border-bottom: 0;
}

.cf-club-activity a {
  color: inherit;
  text-decoration: none;
}

.cf-club-activity a:hover,
.cf-club-activity a:focus-visible {
  text-decoration: underline;
}

.cf-club-activity tbody th a {
  display: block;
  margin-top: 0.15rem;
  font-weight: 600;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-activity time {
  display: block;
  margin: 0;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 700;
  color: var(--comfoo-text-title, #2b1a14);
  font-variant-numeric: tabular-nums;
}

.cf-club-activity__num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.cf-club-empty {
  margin: 0;
  padding: var(--comfoo-space-m, 1rem);
  color: var(--comfoo-chocolate, #5e3e32);
}

#cf-club-account .cf-club-activity-empty {
  margin: 0;
  padding: 32px 24px;
  color: #665246;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

.cf-club-how {
  padding: var(--comfoo-space-m, 1rem);
  display: grid;
  gap: var(--comfoo-space-s, 0.8rem);
}

.cf-club-how p {
  margin: 0;
  max-width: 65ch;
  color: var(--comfoo-text-body, #2b1a14);
}

.cf-club-how strong {
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--comfoo-space-s, 0.8rem);
}

.cf-club-ways article {
  margin: 0;
  padding: var(--comfoo-space-s, 0.8rem);
  background: var(--comfoo-vanilla, #ece8c9);
  border-radius: var(--comfoo-radius-m, 0.75rem);
}

.cf-club-ways__lead {
  margin: 0 0 0.25rem;
  font-size: var(--comfoo-text-l, 1.13rem);
  font-weight: 700;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-ways p {
  margin: 0;
}

@media (max-width: 480px) {
  .cf-club-ways {
    grid-template-columns: 1fr;
  }
}

.cf-club-how-fold {
  margin: 0;
}

.cf-club-how-fold summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--comfoo-chocolate, #5e3e32);
  list-style: none;
}

.cf-club-how-fold summary::-webkit-details-marker {
  display: none;
}

.cf-club-how-fold[open] summary {
  margin-bottom: var(--comfoo-space-s, 0.8rem);
}

.cf-club-how-fold .cf-club-ways {
  margin-bottom: var(--comfoo-space-xs, 0.64rem);
}

.cf-club-invite__body {
  padding: var(--comfoo-space-m, 1rem);
  display: grid;
  gap: var(--comfoo-space-s, 0.8rem);
}

.cf-club-invite__lead,
.cf-club-invite__status {
  margin: 0;
  color: var(--comfoo-text-body, #2b1a14);
}

.cf-club-invite__form {
  display: grid;
  gap: var(--comfoo-space-xs, 0.64rem);
}

.cf-club-invite__field {
  display: grid;
  gap: 0.25rem;
  font-size: var(--comfoo-text-s, 0.89rem);
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-invite__field .comfoo-input,
.cf-club-invite__copy-row .comfoo-input {
  width: 100%;
  min-width: 0;
  font-size: var(--comfoo-text-m, 1rem);
  padding: var(--comfoo-space-xs, 0.64rem) var(--comfoo-space-s, 0.8rem);
}

.cf-club-invite__send,
.cf-club-invite__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--comfoo-space-3xs, 0.41rem);
  padding: var(--comfoo-space-xs, 0.64rem) var(--comfoo-space-s, 0.8rem);
  background: var(--comfoo-vanilla, #ece8c9);
  color: var(--comfoo-chocolate, #5e3e32);
  font-size: var(--comfoo-text-s, 0.89rem);
  font-weight: 700;
  border-radius: var(--comfoo-radius-m, 0.75rem);
  border: 1px solid var(--comfoo-chocolate, #5e3e32);
  box-shadow: var(--comfoo-shadow-s, 0 1.5px 3px hsla(0, 0%, 0%, 0.15));
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cf-club-invite__send:hover,
.cf-club-invite__copy:hover {
  background: var(--comfoo-applepie, #83bc62);
  color: var(--comfoo-secondary, #2b1a14);
}

.cf-club-invite.is-sent .cf-club-invite__send {
  background: var(--comfoo-applepie, #83bc62);
  transform: scale(1.03);
}

.cf-club-invite.is-sent .cf-club-invite__status {
  color: var(--comfoo-chocolate, #5e3e32);
  font-weight: 600;
}

.cf-club-invite__kicker {
  margin: 0 0 0.25rem;
  font-size: var(--comfoo-text-xs, 0.79rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-invite__copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--comfoo-space-2xs, 0.51rem);
}

.cf-club-invite__names {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--comfoo-space-2xs, 0.51rem);
}

.cf-club-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  min-width: 0;
  padding: 0.2rem 0.35rem 0.2rem 0.65rem;
  background: var(--comfoo-vanilla, #ece8c9);
  border-radius: var(--comfoo-radius-full, 999rem);
  font-weight: 600;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-chip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-club-chip__status {
  flex-shrink: 0;
  font-size: var(--comfoo-text-xs, 0.79rem);
  font-weight: 600;
  padding: 0.05rem 0.45rem;
  border-radius: var(--comfoo-radius-full, 999rem);
  background: var(--comfoo-dark-10, #5e3e321a);
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-chip.is-joined {
  background: var(--comfoo-success-10, #83bc621a);
}

.cf-club-chip.is-rewarded .cf-club-chip__status {
	background: var(--comfoo-applepie, #83bc62);
	color: var(--comfoo-secondary, #2b1a14);
}

.cf-club-chip.is-reversed .cf-club-chip__status {
	background: var(--comfoo-dark-10, #5e3e321a);
	color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-invite__names li {
  padding: 0.2rem 0.6rem;
  background: var(--comfoo-vanilla, #ece8c9);
  border-radius: var(--comfoo-radius-full, 999rem);
  font-weight: 600;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-invite__names li.cf-club-chip {
  padding: 0.2rem 0.35rem 0.2rem 0.65rem;
}

.cf-club-invite__empty {
  background: transparent;
  font-weight: 400;
  padding: 0;
}

.cf-club-invite__feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--comfoo-space-2xs, 0.51rem);
}

.cf-club-invite__again {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--comfoo-space-3xs, 0.41rem) var(--comfoo-space-s, 0.8rem);
  background: transparent;
  color: var(--comfoo-chocolate, #5e3e32);
  font-size: var(--comfoo-text-s, 0.89rem);
  font-weight: 700;
  border-radius: var(--comfoo-radius-m, 0.75rem);
  border: 1px solid var(--comfoo-chocolate, #5e3e32);
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.cf-club-invite__again:hover {
  background: var(--comfoo-vanilla, #ece8c9);
}

.cf-club-invite__again[hidden] {
  display: none;
}

.cf-club-invite__send:focus-visible,
.cf-club-invite__copy:focus-visible,
.cf-club-invite__again:focus-visible {
  outline: 2px solid var(--comfoo-chocolate, #5e3e32);
  outline-offset: 2px;
}

.cf-club-invite__send:disabled {
  cursor: wait;
  opacity: 0.75;
}

.cf-club-more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--comfoo-space-2xs, 0.51rem);
  padding-inline: var(--comfoo-space-m, 1rem);
}

.cf-club-more__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: var(--comfoo-space-2xs, 0.51rem) var(--comfoo-space-s, 0.8rem);
  border-radius: var(--comfoo-radius-full, 999rem);
  background: var(--comfoo-bg-surface, #fff);
  color: var(--comfoo-chocolate, #5e3e32);
  font-size: var(--comfoo-text-s, 0.89rem);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--comfoo-border-primary, hsla(0, 0%, 50%, 0.25));
}

.cf-club-more__count {
  display: inline-flex;
  min-width: 1.15rem;
  justify-content: center;
  padding: 0 0.35rem;
  font-size: var(--comfoo-text-xs, 0.79rem);
  font-variant-numeric: tabular-nums;
  background: var(--comfoo-vanilla, #ece8c9);
  color: var(--comfoo-chocolate, #5e3e32);
  border-radius: var(--comfoo-radius-full, 999rem);
}

.cf-club-more__tab.is-active {
  background: var(--comfoo-chocolate, #5e3e32);
  color: var(--comfoo-vanilla, #ece8c9);
  border-color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-more__tab.is-active .cf-club-more__count {
  background: var(--comfoo-vanilla, #ece8c9);
  color: var(--comfoo-chocolate, #5e3e32);
}

@media (max-width: 480px) {
  .cf-club-invite__copy-row {
    grid-template-columns: 1fr;
  }
}

.cf-club-checkout {
  margin: 0 0 var(--comfoo-space-m, 1rem);
}

/* Kustom: Club lives in Woo/CFSD chrome (#kco-order-review), never inside the iframe widget. Compact buy-box, not a second Fortsätt. */
#kco-order-review .cf-club-checkout,
#kco-iframe > .cf-club-checkout {
  margin: var(--comfoo-space-s, 0.8rem) 0 0;
}

#kco-order-review .cf-club-section__title,
#kco-iframe > .cf-club-checkout .cf-club-section__title {
  padding-inline: 0;
}

#kco-order-review .cf-club-section__body,
#kco-iframe > .cf-club-checkout .cf-club-section__body {
  border: 1px solid var(--comfoo-dark-20, #5e3e3233);
  border-radius: var(--comfoo-radius-m, 0.75rem);
  box-shadow: none;
}

.cf-club-thanks {
  margin: 0 0 var(--comfoo-space-m, 1rem);
}

.cf-club-thanks .cf-club-section__body {
  padding: var(--comfoo-space-m, 1rem);
  display: grid;
  gap: var(--comfoo-space-s, 0.8rem);
}

.cf-club-thanks__awards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--comfoo-space-s, 0.8rem);
}

.cf-club-thanks__xp,
.cf-club-thanks__coins {
  margin: 0;
  font-size: var(--comfoo-text-2xl, 1.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-thanks__coins span {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 600;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-thanks__reached {
  margin: 0;
  font-size: var(--comfoo-text-l, 1.13rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-thanks__progress-label {
  margin: 0.2rem 0 0;
  font-size: var(--comfoo-text-xs, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-thanks__missions {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.cf-club-thanks__missions li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--comfoo-text-s, 0.9rem);
}

.cf-club-thanks__missions li.is-done {
  font-weight: 600;
}

@media (max-width: 480px) {
  .cf-club-thanks__awards {
    grid-template-columns: 1fr;
  }
}

.cf-club-coins {
  padding: 0.55rem 0.65rem 0.65rem;
  display: grid;
  gap: 0.35rem;
}

.cf-club-checkout__summary {
  padding: 0.55rem 0.65rem 0.65rem;
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.cf-club-checkout__earn {
  margin: 0;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: var(--comfoo-text-body, #2b1a14);
}

.cf-club-checkout__note {
  margin: 0.1rem 0 0;
  font-size: var(--comfoo-text-xs, 0.8rem);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-progress--compact {
  height: 0.65rem;
  min-height: 0.65rem;
  max-height: 0.65rem;
  background: var(--comfoo-dark-20, #5e3e3233);
  box-shadow: none;
}

.cf-club-progress--compact .cf-club-progress__fill {
  background: var(--comfoo-applepie, #83bc62);
}

.cf-club-checkout .cf-club-progress__row {
  margin-top: 0.2rem;
}

.cf-club-checkout .cf-club-progress__now,
.cf-club-checkout .cf-club-progress__next {
  font-size: var(--comfoo-text-xs, 0.8rem);
  font-weight: 600;
}

.cf-club-checkout__summary .cf-club-cta {
  margin-top: 0.2rem;
  max-width: 100%;
  white-space: normal;
}

.cf-club-checkout__summary + .cf-club-coins {
  border-top: 1px solid var(--comfoo-dark-10, #5e3e321a);
}

.cf-club-coins__have {
  margin: 0;
  font-size: var(--comfoo-text-xl, 1.27rem);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-coins__have span,
.cf-club-coins__value span {
  display: block;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 700;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-coins__value {
  margin: 0;
  font-size: var(--comfoo-text-l, 1.13rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cf-club-use {
  display: grid;
  gap: 0.2rem;
}

.cf-club-coins.is-applied .cf-club-use,
.cf-club-coins.is-applied .cf-club-preview,
.cf-club-coins.is-applied .cf-club-limits,
.cf-club-coins.is-applied #cf-club-apply {
  display: none !important;
}

.cf-club-use__label {
  margin: 0;
  font-size: var(--comfoo-text-xs, 0.8rem);
  font-weight: 700;
}

.cf-club-use__controls {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.25rem;
  gap: var(--comfoo-space-2xs, 0.5rem);
  align-items: center;
}

.cf-club-slider-wrap {
  --cf-club-slider-pct: 0%;
  --cf-club-slider-floor-pct: 0%;
  --cf-rail-h: 1.15rem;
  --cf-thumb: 1.2rem;
  position: relative;
  min-height: 2.5rem;
  min-width: 0;
}

.cf-club-slider-rail {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: 0.28rem;
  height: var(--cf-rail-h);
  border-radius: var(--comfoo-radius-full, 999rem);
  background: var(--comfoo-chocolate, #5e3e32);
  pointer-events: none;
}

.cf-club-slider-fill {
  display: block;
  height: 100%;
  width: var(--cf-club-slider-pct);
  max-width: 100%;
  background: var(--comfoo-applepie, #83bc62);
  border-radius: inherit;
}

.cf-club-slider-floor {
  position: absolute;
  top: 0.12rem;
  bottom: 0.12rem;
  left: var(--cf-club-slider-floor-pct);
  width: 2px;
  margin-left: -1px;
  background: var(--comfoo-vanilla, #ece8c9);
  opacity: 0;
}

.cf-club-slider-wrap.is-below-floor .cf-club-slider-floor {
  opacity: 0.95;
}

.cf-club-slider-thumb {
  position: absolute;
  top: 50%;
  left: var(--cf-club-slider-pct);
  width: var(--cf-thumb);
  height: var(--cf-thumb);
  transform: translate(-50%, -50%);
  background: var(--comfoo-vanilla, #ece8c9);
  border: 2px solid var(--comfoo-secondary, #2b1a14);
  border-radius: 50%;
}

.cf-club-slider-ends {
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  bottom: 0.08rem;
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--comfoo-chocolate, #5e3e32);
  pointer-events: none;
}

.cf-club-slider {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  background: transparent;
}

.cf-club-slider-wrap:focus-within {
  outline: 3px solid var(--comfoo-chocolate, #5e3e32);
  outline-offset: 2px;
  border-radius: var(--comfoo-radius-s, 0.5rem);
}

.cf-club-input {
  width: 100%;
  min-height: 2.5rem;
  padding: 0 0.4rem;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  color: var(--comfoo-text-title, #2b1a14);
  background: var(--comfoo-dark-5, #5e3e320d);
  border: 1px solid var(--comfoo-secondary, #2b1a14);
  border-radius: var(--comfoo-radius-s, 0.5rem);
}

.cf-club-input.is-invalid {
  border-color: var(--comfoo-chocolate, #5e3e32);
  background: var(--comfoo-error-10, #ef5c5c1a);
}

.cf-club-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--comfoo-space-xs, 0.64rem);
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.cf-club-preview__coins,
.cf-club-preview__kr {
  margin: 0;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 700;
}

.cf-club-preview__kr {
  color: var(--comfoo-chocolate, #5e3e32);
  white-space: nowrap;
  text-align: right;
}

.cf-club-limits {
  margin: 0;
  font-size: var(--comfoo-text-xs, 0.8rem);
  line-height: 1.3;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-error {
  margin: 0;
  padding: 0.3rem 0.5rem;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 700;
  color: #2b1a14;
  background: var(--comfoo-error-10, #ef5c5c1a);
  border: 1px solid var(--comfoo-dark-20, #5e3e3233);
  border-left: 4px solid var(--comfoo-chocolate, #5e3e32);
  border-radius: var(--comfoo-radius-s, 0.5rem);
}

.cf-club-error[hidden],
.cf-club-applied[hidden],
.cf-club-btn-row[hidden] {
  display: none !important;
}

.cf-club-applied {
  margin: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: var(--comfoo-text-s, 0.9rem);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  background: var(--comfoo-success-10, #83bc621a);
  border: 1px solid var(--comfoo-success-30, #83bc624d);
  border-radius: var(--comfoo-radius-s, 0.5rem);
}

.cf-club-actions {
  display: grid;
  gap: 0.25rem;
}

.cf-club-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

.cf-club-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  width: 100%;
  padding: 0 0.35rem;
  background: var(--comfoo-dark-5, #5e3e320d);
  color: var(--comfoo-text-body, #2b1a14);
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 700;
  font-family: inherit;
  border: 1px solid var(--comfoo-border-primary, hsla(0, 0%, 50%, 0.25));
  border-radius: var(--comfoo-radius-m, 0.75rem);
  cursor: pointer;
}

.cf-club-line-earn {
  margin: 0.15rem 0 0;
  font-size: var(--comfoo-text-xs, 0.8rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-earn {
  display: grid;
  gap: var(--comfoo-space-3xs, 0.41rem);
  margin: 0;
  padding: var(--comfoo-space-s, 0.8rem);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--comfoo-bg-surface, #fff);
  border: 1px solid var(--comfoo-dark-20, #5e3e3233);
  border-radius: var(--comfoo-radius-m, 0.75rem);
  box-shadow: var(--comfoo-shadow-xs, 0 1px 2px hsla(0, 0%, 0%, 0.15));
}

.cf-club-earn__title {
  margin: 0;
  font-size: var(--comfoo-text-xs, 0.8rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-earn__lead {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
  font-size: var(--comfoo-text-s, 0.9rem);
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--comfoo-text-title, #2b1a14);
}

.cf-club-earn__rates {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
  font-size: var(--comfoo-text-xs, 0.8rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--comfoo-chocolate, #5e3e32);
}

@media (min-width: 768px) {
  .cf-club-glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--comfoo-space-l, 1.25rem);
    align-items: stretch;
  }

  .cf-club-account .cf-club-wallet {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .cf-club-account .cf-club-wallet__pair {
    grid-template-columns: 1fr;
  }

  .cf-club-cta {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .cf-club-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cf-club-cta {
    max-width: none;
  }

  .cf-club-activity,
  .cf-club-activity thead,
  .cf-club-activity tbody,
  .cf-club-activity tr,
  .cf-club-activity th,
  .cf-club-activity td {
    display: block;
    width: 100%;
  }

  .cf-club-activity thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .cf-club-activity tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.8rem;
    padding: var(--comfoo-space-s, 0.8rem) 0;
    border-bottom: 1px solid var(--comfoo-border-primary, hsla(0, 0%, 50%, 0.25));
  }

  .cf-club-activity tbody th,
  .cf-club-activity tbody td {
    padding: 0;
    border: 0;
    text-align: left;
  }

  .cf-club-activity tbody th {
    grid-column: 1 / -1;
  }

  .cf-club-activity td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--comfoo-text-xs, 0.8rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--comfoo-chocolate, #5e3e32);
  }

  .cf-club-activity__num {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .cf-account-club-page .cf-club-section-nav .cf-club-nav-more[open] {
    flex: 1 0 100%;
  }

  .cf-account-club-page .cf-club-section-nav .cf-club-nav-more__links {
    white-space: normal;
  }
}

@media (max-width: 360px) {
  .cf-club-primary-nav,
  .cf-club-section-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .cf-club-status,
  .cf-club-profile__sub {
    display: none;
  }

  .cf-club-cta {
    white-space: normal;
    line-height: 1.25;
  }

  .cf-club-earn {
    padding: var(--comfoo-space-xs, 0.64rem) var(--comfoo-space-s, 0.8rem);
  }

  .cf-club-earn__lead {
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .cf-club-wallet__label {
    display: inline;
    margin-left: 0.3rem;
  }

  .cf-club-wallet__kr span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-club-cta,
  .cf-club-cta:active,
  .cf-club-avatars__btn,
  .cf-club-progress__fill,
  .cf-club-slider-fill,
  .cf-club-slider-thumb,
  .cf-club-invite__send,
  .cf-club-invite__copy,
  .cf-club-invite__again,
  .cf-club-primary-nav a,
  .cf-club-section-nav a,
  .cf-club-invite.is-sent .cf-club-invite__send,
  .cf-club-launcher,
  .cf-club-launcher.is-dragging {
    transition: none;
    transform: none;
  }
}

.cf-club-launcher {
  position: fixed;
  z-index: 1000;
  left: max(20px, env(safe-area-inset-left, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  max-width: min(16rem, calc(100vw - 24px));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.cf-club-launcher.is-dragging {
  cursor: grabbing;
}

.cf-club-launcher__card {
  display: grid;
  gap: var(--comfoo-space-4xs, 0.33rem);
  padding: var(--comfoo-space-s, 0.8rem) var(--comfoo-space-m, 1rem);
  color: var(--comfoo-chocolate, #5e3e32);
  background: var(--comfoo-vanilla, #ece8c9);
  border: 1px solid var(--comfoo-border-primary, hsla(0, 0%, 50%, 0.25));
  border-radius: var(--comfoo-radius-m, 0.75rem);
  box-shadow: var(--comfoo-shadow-m, 0 2px 6px hsla(0, 0%, 0%, 0.15));
  text-decoration: none;
  cursor: grab;
  -webkit-user-drag: none;
}

.cf-club-launcher__kicker {
  font-size: var(--comfoo-text-xs, 0.79rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--comfoo-chocolate, #5e3e32);
}

.cf-club-launcher__level,
.cf-club-launcher__coins,
.cf-club-launcher__cta {
  font-size: var(--comfoo-text-s, 0.89rem);
  font-weight: 600;
  line-height: 1.25;
}

body.woocommerce-cart .cf-club-launcher,
body.woocommerce-checkout .cf-club-launcher,
body.woocommerce-order-received .cf-club-launcher {
  display: none !important;
}

@media (max-width: 480px) {
  .cf-club-launcher {
    left: max(10px, env(safe-area-inset-left, 0px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
}
.cf-club-reviews {
  padding: clamp(1rem, 3vw, 1.75rem);
}

.cf-club-reviews__intro {
  max-width: 62ch;
  margin: 0;
  color: var(--comfoo-text-body, #2b1a14);
  line-height: 1.55;
}

.cf-club-review-list {
  display: grid;
  gap: 0.875rem;
  margin-top: 1.25rem;
}

.cf-club-review-item {
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border: 1px solid var(--comfoo-border-primary, #e6d9cb);
  border-radius: var(--comfoo-radius-m, 0.75rem);
  background: var(--comfoo-bg-surface, #fff);
}

.cf-club-review-item h3 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.2;
}

.cf-club-review-item form,
.cf-club-review-item label {
  display: grid;
  gap: 0.625rem;
}

.cf-club-review-item form {
  max-width: 34rem;
  gap: 1rem;
}

.cf-club-review-item label {
  font-weight: 600;
}

.cf-club-review-item select,
.cf-club-review-item textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.75rem;
  border: 1px solid #9b8574;
  border-radius: 0.5rem;
  background: #fff;
  color: #2e2019;
  font: inherit;
}

.cf-club-review-item textarea {
  min-height: 7rem;
  resize: vertical;
}

.cf-club-review-item select:focus-visible,
.cf-club-review-item textarea:focus-visible,
.cf-club-review-item button:focus-visible {
  outline: 3px solid #b75e4b;
  outline-offset: 2px;
}

.cf-club-review-item button {
  width: max-content;
  min-height: 2.75rem;
  padding: 0.7rem 1.15rem;
  border: 0;
  border-radius: 0.5rem;
  background: #2e2019;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cf-club-review-item button:hover {
  background: #51372b;
}

/* Compact Club navigation: a floating secondary menu, never an expanding page grid. */
:is(.cf-account-club-page,body) #cf-club-account .cf-club-section-nav{display:flex;align-items:center;flex-wrap:wrap;gap:6px;background:transparent;border:0;border-bottom:1px solid #dacec0;border-radius:0;padding:0 0 12px;overflow:visible}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-section-nav>a,:is(.cf-account-club-page,body) #cf-club-account .cf-club-nav-more summary{width:auto;min-height:44px;padding:10px 16px;border-radius:7px;font-size:14px;box-shadow:none}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-section-nav>a.is-active{background:#f1e9de;border:1px solid #dacec0;color:#2b1a14}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-nav-more{position:relative;flex:0 0 auto;grid-column:auto;margin:0}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-nav-more[open]{grid-column:auto}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-nav-more__links{position:absolute;top:calc(100% + 6px);right:0;z-index:20;display:flex;flex-direction:column;gap:2px;width:230px;padding:8px;background:#fffdf9;border:1px solid #dacec0;border-radius:10px;box-shadow:0 12px 24px #2b1a1412}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-nav-more:not([open]) .cf-club-nav-more__links{display:none}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-nav-more__links a{text-align:left;padding:10px 12px;min-height:44px;width:100%;font-size:13px}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-section__title{font-size:25px;text-transform:none;letter-spacing:-.025em;margin:0 0 12px;padding:0}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-badges-intro{font-size:14px;color:#665246;margin:0 0 20px}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;background:transparent;border:0;border-radius:0;box-shadow:none}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-badge{padding:22px;border:1px solid #dacec0;border-radius:10px;background:#fffdf9;min-height:145px;opacity:1}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-badge__mark{border:1px solid #dacec0;background:#f4eee5;margin-bottom:14px}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-badge__name{font-size:15px}
:is(.cf-account-club-page,body) #cf-club-account .cf-club-section__body:has(>.cf-club-badges){padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
@media(max-width:600px){:is(.cf-account-club-page,body) #cf-club-account .cf-club-section-nav{flex-wrap:wrap;overflow:visible}:is(.cf-account-club-page,body) #cf-club-account .cf-club-section-nav>a,:is(.cf-account-club-page,body) #cf-club-account .cf-club-nav-more summary{font-size:12px;padding:10px 11px}:is(.cf-account-club-page,body) #cf-club-account .cf-club-badges{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}:is(.cf-account-club-page,body) #cf-club-account .cf-club-badge{padding:16px;min-height:135px}:is(.cf-account-club-page,body) #cf-club-account .cf-club-badge__name{font-size:13px}:is(.cf-account-club-page,body) #cf-club-account .cf-club-nav-more__links{right:0;width:205px}}

@media(max-width:600px){:is(.cf-account-club-page,body) #cf-club-account .cf-club-nav-more{margin-left:auto;width:auto}:is(.cf-account-club-page,body) #cf-club-account .cf-club-nav-more__links{right:0;left:auto}}

#cf-club-account .cf-club-wallet__pair:not(:has(.cf-club-stat--used)){grid-template-columns:1fr}

/* Explain benefits and paused states without changing the loyalty configuration. */
#cf-club-account .cf-club-status-note{border-left:3px solid #8b6846;background:#f6f2eb;padding:16px 18px;border-radius:0 8px 8px 0;line-height:1.65;font-size:14px}
#cf-club-account .cf-club-explain-grid,#cf-club-account .cf-club-settings-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#cf-club-account .cf-club-settings-links>p{grid-column:1/-1;margin:0}
#cf-club-account .cf-club-settings-links{padding:22px}
#cf-club-account .cf-club-explain-grid article,#cf-club-account .cf-club-settings-links article,#cf-club-account .cf-club-example,#cf-club-account .cf-club-unavailable{border:1px solid #dacec0;border-radius:10px;background:#fffdf9;padding:22px;min-width:0}
#cf-club-account .cf-club-example{margin-block:22px}
#cf-club-account :is(.cf-club-explain-grid,.cf-club-settings-links,.cf-club-example,.cf-club-unavailable,.cf-club-empty) h3{font-size:21px;line-height:1.25;margin:0 0 12px;letter-spacing:-.02em;text-transform:none}
#cf-club-account :is(.cf-club-explain-grid,.cf-club-settings-links,.cf-club-example,.cf-club-unavailable) p{font-size:14px;line-height:1.7;margin:0 0 14px}
#cf-club-account :is(.cf-club-status-note,.cf-club-settings-links,.cf-club-unavailable,.cf-club-example) a{overflow-wrap:anywhere}
#cf-club-account .cf-club-badge__requirement{font-size:13px;line-height:1.6;color:#665246;margin:12px 0 0;overflow-wrap:anywhere}
#cf-club-account .cf-club-settings-links .cf-club-cta{display:inline-flex;align-items:center;min-height:48px;max-width:100%;white-space:normal;font-size:14px}
#cf-club-account .cf-club-how-fold{margin-top:24px}#cf-club-account .cf-club-how-fold summary{min-height:48px}
@media(max-width:600px){#cf-club-account .cf-club-explain-grid,#cf-club-account .cf-club-settings-links{grid-template-columns:1fr}#cf-club-account :is(.cf-club-example,.cf-club-unavailable){padding:18px}#cf-club-account .cf-club-settings-links .cf-club-cta{display:flex;width:100%;justify-content:center}}
@media(max-width:380px){:is(.cf-account-club-page,body) #cf-club-account .cf-club-badges{grid-template-columns:1fr}.cf-club-section-nav a{min-height:44px}}

/* One persistent introduction and direct navigation to every preloaded Club view. */
#cf-club-account .cf-club-heading .cf-club-section__title {
  margin: 0 0 8px;
}
#cf-club-account .cf-club-heading .cf-club-overview-intro {
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
#cf-club-account .cf-club-section-nav.cf-club-section-nav--pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0 0 6px;
  padding: 2px 2px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
#cf-club-account .cf-club-section-nav.cf-club-section-nav--pills > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #dacec0;
  border-radius: 999px;
  background: #f6f2eb;
  color: #2b1a14;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}
#cf-club-account .cf-club-section-nav.cf-club-section-nav--pills > a:hover {
  background: #eae1d5;
}
#cf-club-account .cf-club-section-nav.cf-club-section-nav--pills > a.is-active {
  border-color: #2b1a14;
  background: #2b1a14;
  color: #fffdf9;
}
#cf-club-account .cf-club-section-nav.cf-club-section-nav--pills > a:focus-visible {
  outline: 2px solid #7c583a;
  outline-offset: 2px;
}
@media (max-width: 700px) {
  #cf-club-account .cf-club-section-nav.cf-club-section-nav--pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 4px 10px;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 4px;
    scrollbar-width: thin;
    scrollbar-color: #b8a58f #f6f2eb;
    -webkit-overflow-scrolling: touch;
  }
  #cf-club-account .cf-club-section-nav.cf-club-section-nav--pills > a {
    min-height: 48px;
    padding-inline: 16px;
  }
}

/* Account and voucher corrections: flexible content rather than fixed desktop widths. */
#cf-club-account .cf-club-wallet { min-width:0; }
#cf-club-account .cf-club-vouchers { grid-column:1/-1; min-width:0; }
#cf-club-account .cf-club-voucher-grid { list-style:none; padding:0; margin:20px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:16px; }
#cf-club-account .cf-club-voucher-card { padding:24px; border:1px solid #dfcebc; border-radius:14px; background:#f7f3ed; min-width:0; }
#cf-club-account .cf-club-voucher-card h4 { margin:10px 0; }
#cf-club-account .cf-club-voucher-state { font-size:12px; font-weight:600; color:#224b3d; }
#cf-club-account .cf-club-voucher-value { font-size:32px; line-height:1.2; font-weight:700; margin:16px 0; }
#cf-club-account .cf-club-voucher-terms { font-size:13px; line-height:1.6; margin-top:16px; }
#cf-club-account .cf-coin-exchange-controls { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
#cf-club-account .cf-coin-exchange-controls input { flex:1 1 90px; min-width:0; max-width:150px; border:1px solid #cbb8a4; border-radius:8px; padding:12px; background:#fff; color:#301d13; font:inherit; }
#cf-club-account .cf-coin-exchange-controls button { min-height:48px; cursor:pointer; border:0; font:inherit; }
#cf-club-account [data-cf-exchange-summary] { margin-top:12px; font-size:14px; line-height:1.5; }
#cf-club-account .cf-club-voucher-exchange form { align-self:start; }
#cf-club-account .cf-club-wallet__pair { align-content:start; align-self:start; }
#cf-club-account .cf-club-activity { width:100%; table-layout:fixed; }
#cf-club-account .cf-club-activity th,#cf-club-account .cf-club-activity td { overflow-wrap:anywhere; }
#cf-club-account .cf-club-activity-detail { display:block; font-size:13px; line-height:1.5; margin-top:6px; color:#755a46; }
#cf-club-account .cf-club-activity__num { white-space:nowrap; font-variant-numeric:tabular-nums; }
#cf-club-account .cf-invite-offer-paused { grid-column:1/-1; padding:14px 18px; border-radius:8px; background:#f6efe2; font-size:14px; line-height:1.5; }
@media(max-width:700px) {
  #cf-club-account .cf-club-wallet__pair,#cf-club-account .cf-invite-grid { grid-template-columns:1fr; }
  #cf-club-account .cf-club-activity-wrap { overflow-x:auto; }
  #cf-club-account .cf-club-activity { min-width:560px; }
  #cf-club-account .cf-invite-reward-hero { padding:20px; }
  #cf-club-account .cf-coin-exchange-controls button { flex:1 1 100%; }
}