.eva-routine {
  padding-top: max(calc(var(--eva-pt, 120) * 0.5px), min(calc(var(--eva-pt, 120) * 1px), calc(var(--eva-pt, 120) / 19.2 * 1vw)));
  padding-bottom: max(calc(var(--eva-pb, 80) * 0.5px), min(calc(var(--eva-pb, 80) * 1px), calc(var(--eva-pb, 80) / 19.2 * 1vw)));
}
.eva-routine__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.eva-routine__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.eva-routine__rule { display: block; width: 60px; height: 2px; background: currentColor; }

.eva-routine__list {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 4.1667vw, 80px);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.eva-routine__item {
  display: flex;
  flex: 0 1 415px;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.eva-routine__step {
  margin: 0;
  font-weight: 700;
  font-size: var(--eva-fs-lead);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}
.eva-routine__media { position: relative; display: block; aspect-ratio: 415 / 325; overflow: hidden; }
.eva-routine__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--eva-ease);
}
.eva-routine__item:hover .eva-routine__media img { transform: scale(1.03); }
.eva-routine__body { display: flex; flex: 1; flex-direction: column; gap: 10px; text-align: center; }
.eva-routine .eva-routine__title a { color: inherit; text-decoration: none; }
.eva-routine__desc { max-width: 415px; margin-inline: auto; }
.eva-routine__price { margin: 0; font-weight: 600; }

.eva-routine__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  margin-top: 16px;
  padding: 10px 20px;
  border: 0;
  background: var(--eva-bosque);
  color: var(--eva-crema);
  font-family: var(--eva-sans);
  font-size: var(--eva-fs-eyebrow);
  line-height: 30px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s var(--eva-ease), opacity 0.25s;
}
.eva-routine__add:hover { background: var(--eva-green); }
.eva-routine__add[disabled] { opacity: 0.55; cursor: not-allowed; }
.eva-routine__add--empty { opacity: 0.4; cursor: default; }
.eva-routine__add.is-loading { opacity: 0.7; pointer-events: none; }
[data-eva-bg="bosque"] .eva-routine__add { background: var(--eva-crema); color: var(--eva-bosque); }

.eva-routine__total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
  margin-top: 8px;
}
.eva-routine__total-label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  font-size: var(--eva-fs-eyebrow);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.eva-routine__total-price { display: inline-flex; gap: 10px; align-items: baseline; text-transform: none; }
.eva-routine__total-price strong { font-size: var(--eva-fs-lead); }
.eva-routine__total-price s { opacity: 0.55; }
.eva-routine__all.is-loading { opacity: 0.7; pointer-events: none; }

@media (max-width: 959px) {
  .eva-routine__inner { gap: 28px; padding-inline: 0; }
  .eva-routine__head { padding-inline: var(--eva-gutter); }
  .eva-routine__list {
    justify-content: flex-start;
    gap: 16px;
    padding-inline: var(--eva-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--eva-gutter);
    scrollbar-width: none;
  }
  .eva-routine__list::-webkit-scrollbar { display: none; }
  .eva-routine__item { flex: 0 0 78%; gap: 16px; scroll-snap-align: start; }
  .eva-routine__total { flex-direction: column; padding-inline: var(--eva-gutter); width: 100%; }
  .eva-routine__all { width: 100%; }
}