.benefit-item {
  flex-direction: column;
  gap: 16px;
  border-bottom: var(--Object-Styles-Border-Width-pc-ref-border-width-s, 1px) solid var(--Utils-surface-container, rgba(10, 10, 10, 0.1));
}
@media (min-width: 480px) {
  .benefit-item {
    flex-direction: row;
    border-bottom: unset;
  }
}
.benefit-item .benefit-title {
  height: 56px;
  display: flex;
  cursor: pointer;
  align-items: center;
  font-family: var(--Typography-Family-pc-ref-typeface-family-body, Roboto);
  font-size: var(--General-Settings-Body-Body-S-Size, 14px);
  font-weight: var(--Typography-Weight-pc-ref-typeface-weight-bold, 600);
  line-height: var(--General-Settings-Body-Body-S-Line-Height, 20px);
  justify-content: space-between;
}
@media (min-width: 480px) {
  .benefit-item .benefit-title {
    height: unset;
    font-size: var(--General-Settings-Body-Body-S-Size, 16px);
    line-height: var(--General-Settings-Body-Body-S-Line-Height, 22px);
  }
}
.benefit-item .benefit-title .benefit-title-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.benefit-item .benefit-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  border-radius: 50%;
  padding: var(--Spacing-pc-ref-space-100, 8px);
  background: var(--Tan-surface-mid, #EDE1D4);
}
.benefit-item .benefit-icon svg {
  width: 20px;
  height: 20px;
}
.benefit-item .benefit-description {
  color: var(--Utils-dim-on-surface, rgba(10, 10, 10, 0.6));
  font-size: var(--General-Settings-Body-Body-S-Size, 14px);
  line-height: var(--General-Settings-Body-Body-S-Line-Height, 20px);
  font-weight: var(--Typography-Weight-pc-ref-typeface-weight-regular, 400);
  padding-bottom: 8px;
}
@media (min-width: 480px) {
  .benefit-item .benefit-description {
    padding-bottom: unset;
    font-size: var(--General-Settings-Body-Body-S-Size, 16px);
    line-height: var(--General-Settings-Body-Body-S-Line-Height, 22px);
  }
}

.benefit-title-icon .benefit-state-expanded {
  display: none;
}

.benefit-title-icon .benefit-state-closed {
  display: inline-flex;
}

.benefit-item:has(.benefit-description.show) .benefit-state-expanded {
  display: inline-flex;
}

.benefit-item:has(.benefit-description.show) .benefit-state-closed {
  display: none;
}

/*# sourceMappingURL=default\css\experience\components\commerceAssets\benefit.css.map*/