/*
 * One-click accessories. The accent follows --sacc-accent, which the theme can redefine.
 * Every rule carries two classes so ordinary theme rules on lists, labels and inputs do not win.
 */
.sacc-block,
.sacc-cart {
  --sacc-accent: #25b9d7;
  --sacc-accent-soft: rgba(37, 185, 215, 0.08);
  --sacc-border: #e3e8ee;
  box-sizing: border-box;
  text-align: left;
}
.sacc-block {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--sacc-border);
  border-radius: 8px;
  background: #fafbfc;
}
.sacc-cart {
  clear: both;
  margin: 20px 0;
  padding: 14px 16px;
  border: 1px solid var(--sacc-border);
  border-radius: 8px;
  background: #fff;
}
.sacc-block .sacc-title,
.sacc-cart .sacc-title {
  margin: 0 0 8px;
  padding: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}
.sacc-block .sacc-list,
.sacc-cart .sacc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sacc-block .sacc-item,
.sacc-cart .sacc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  padding: 6px 8px;
  border: 1px solid var(--sacc-border);
  border-radius: 6px;
  background: #fff;
  list-style: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sacc-block .sacc-item:last-child,
.sacc-cart .sacc-item:last-child {
  margin-bottom: 0;
}
.sacc-block .sacc-item.is-checked {
  border-color: var(--sacc-accent);
  background: var(--sacc-accent-soft);
}
.sacc-block .sacc-label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.sacc-block input.sacc-check {
  -webkit-appearance: checkbox;
  appearance: auto;
  position: static;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 1;
  accent-color: var(--sacc-accent);
  cursor: pointer;
}
.sacc-block .sacc-img,
.sacc-cart .sacc-img {
  display: block;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  max-width: none;
  border-radius: 4px;
  background: #fff;
  object-fit: contain;
}
.sacc-block .sacc-img-empty,
.sacc-cart .sacc-img-empty {
  background: #f1f4f7;
}
.sacc-block .sacc-info,
.sacc-cart .sacc-info {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.3;
}
.sacc-block .sacc-name,
.sacc-cart .sacc-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sacc-block .sacc-price,
.sacc-cart .sacc-price {
  font-size: 13px;
  font-weight: 700;
}
.sacc-block .sacc-price del,
.sacc-cart .sacc-price del {
  margin-left: 4px;
  font-weight: 400;
  opacity: 0.6;
}
.sacc-block .sacc-more {
  flex-shrink: 0;
  font-size: 12px;
  white-space: nowrap;
}
.sacc-block .sacc-note {
  margin: 8px 0 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.75;
}
.sacc-cart .sacc-group + .sacc-group {
  margin-top: 12px;
}
.sacc-cart .sacc-for {
  margin: 0 0 6px;
  font-size: 13px;
}
.sacc-cart .sacc-thumb {
  flex-shrink: 0;
}
.sacc-cart .sacc-qty {
  margin-left: 6px;
  font-weight: 400;
  opacity: 0.75;
}
.sacc-cart .sacc-form {
  flex-shrink: 0;
  margin: 0;
}
/* A theme padding in percent (ZOne: .btn { padding: 7px 8% }) is left out when the form is sized,
   so the button came out wider than its form and crossed the border of the row */
.sacc-cart .sacc-add {
  padding: 7px 16px;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .sacc-block .sacc-more {
    display: none;
  }
  .sacc-cart .sacc-item {
    flex-wrap: wrap;
  }
  .sacc-cart .sacc-form {
    flex: 1 0 100%;
  }
  .sacc-cart .sacc-add {
    width: 100%;
  }
}