.dotti-compare-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 18px;
}

.dotti-compare-add,
.dotti-compare-empty-button {
  align-items: center;
  border: 2px solid #102d29;
  border-radius: 999px;
  box-sizing: border-box;
  color: #102d29;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  justify-content: center;
  line-height: 1.4;
  min-height: 46px;
  padding: 10px 20px;
  text-decoration: none;
}

.dotti-compare-add:hover,
.dotti-compare-add:focus-visible {
  background: #f1ffd2;
  color: #102d29;
}

.dotti-compare-buy {
  align-items: center;
  background: #102d29;
  border: 2px solid #102d29;
  border-radius: 10px;
  box-sizing: border-box;
  color: #fff !important;
  display: flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  line-height: 1.45;
  margin: 12px auto 8px;
  max-width: 220px;
  min-height: 44px;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  width: 100%;
}

.dotti-compare-buy:hover,
.dotti-compare-buy:focus-visible {
  background: #0b806c;
  border-color: #0b806c;
  color: #fff !important;
}

.dotti-compare-empty {
  background: #f7f8ef;
  border: 1px solid #dce2d8;
  border-radius: 20px;
  margin: 20px 0 44px;
  padding: 52px 30px;
  text-align: center;
}

.dotti-compare-empty > span {
  color: #0b806c;
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2em;
  margin-bottom: 10px;
}

.dotti-compare-empty h2 {
  color: #102d29;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.4;
  margin: 0 0 12px;
}

.dotti-compare-empty p {
  color: #54615e;
  line-height: 1.8;
  margin: 0 auto 24px;
  max-width: 620px;
}

.dotti-compare-empty-button {
  background: #102d29;
  color: #fff !important;
  min-width: 220px;
}

.dotti-compare-empty-button:hover,
.dotti-compare-empty-button:focus-visible {
  background: #0b806c;
  border-color: #0b806c;
  color: #fff !important;
}

.dotti-decision-summary {
  background: #102d29;
  border-radius: 18px;
  color: #fff;
  margin: 0 0 20px;
  padding: 22px;
}

.dotti-decision-summary > p {
  color: #d8f357;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  margin: 0 0 7px;
}

.dotti-decision-summary h2 {
  color: #fff;
  font-size: clamp(21px, 3vw, 30px);
  line-height: 1.35;
  margin: 0;
}

.dotti-decision-summary ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 16px 0 10px;
  padding: 0;
}

.dotti-decision-summary li {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 11px;
}

.dotti-decision-summary > span {
  color: #dce6e1;
  display: block;
  font-size: 12px;
  line-height: 1.6;
}

.dotti-decision-change {
  color: #d8f357;
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  margin-top: 14px;
}

@media (max-width: 700px) {
  .dotti-compare-actions {
    justify-content: stretch;
    margin-bottom: 14px;
  }

  .dotti-compare-add {
    width: 100%;
  }

  .dotti-compare-buy {
    border-radius: 8px;
    font-size: 11px;
    min-height: 42px;
    padding: 7px 8px;
  }

  .dotti-compare-empty {
    border-radius: 16px;
    margin: 14px 0 30px;
    padding: 36px 18px;
  }

  .dotti-compare-empty p {
    font-size: 14px;
  }

  .dotti-compare-empty-button {
    min-width: 0;
    width: 100%;
  }

  .dotti-decision-summary {
    border-radius: 14px;
    margin-bottom: 14px;
    padding: 18px;
  }
}

.dotti-find-card .dotti-select-product b {
  white-space: nowrap;
}

.dotti-compare-dock-status {
  color: #d8f357;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.dotti-compare-dock[data-dotti-count="3"] .dotti-selected-names::after {
  color: #66726f;
  content: "3件選択中。別の商品を選ぶと先頭の商品と入れ替わります。";
  display: block;
  font-size: 11px;
  margin-top: 5px;
}

@media (max-width: 700px) {
  body.page-id-12 {
    padding-bottom: 112px;
  }

  .dotti-compare-dock {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .dotti-compare-dock .dotti-selected-names {
    max-height: 44px;
    overflow: hidden;
  }

  .dotti-compare-dock-status {
    display: none;
  }
}