/*
 * EC-CUBE 4.3 対応の差分 CSS（garment テーマ）
 * garment の style.css / original.css は 4.0 系の標準 CSS をもとにしている。
 * 4.3 の標準テンプレート・JS で変わった部分だけをここで上書きする。
 */

/* カート投入モーダル: 4.0 系はチェックボックス方式、4.3 は .ec-modal を JS で show/hide する方式 */
.ec-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
}
.ec-modal .ec-modal-overlay {
  opacity: 1;
  z-index: auto;
  justify-content: center;
  align-items: center;
}
.ec-modal .ec-modal-close {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 20px;
  height: 30px;
  width: 20px;
}
.ec-modal .ec-modal-wrap {
  position: relative;
}

/* メンテナンスモード・デバッグモードの告知（4.3 の default_frame で追加。4.0 系の garment CSS には定義がない） */
.ec-maintenanceAlert {
  background: steelblue;
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  color: white;
  z-index: 9999;
  display: flex;
  font-weight: bold;
}
.ec-maintenanceAlert > * {
  margin: auto;
}
.ec-maintenanceAlert .ec-maintenanceAlert__icon {
  display: inline-block;
  margin-right: 1rem;
  width: 20px;
  height: 20px;
  color: #fff;
  fill: #fff;
  vertical-align: top;
}
.ec-maintenanceAlert + * {
  margin-top: 50px;
}
/* devモードの追加 */
.ec-debugModeAlert {
  background: red;
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  color: white;
  z-index: 9999;
  display: flex;
  font-weight: bold;
}
.ec-debugModeAlert > * {
  margin: auto;
}
.ec-debugModeAlert .ec-debugModeAlert__icon {
  display: inline-block;
  margin-right: 1rem;
  width: 20px;
  height: 20px;
  color: #fff;
  fill: #fff;
  vertical-align: top;
}
.ec-debugModeAlert + * {
  margin-top: 50px;
}
.ec-twoModeAlert + * {
  margin-top: 100px;
}

/* 商品詳細のサムネイル: 4.3 は img に width="133" height="133" 属性が付くため、4.0 系 CSS（幅のみ指定）では縦に伸びる */
.ec-sliderItemRole .slideThumb img {
  height: auto;
}

/* 特商法: 4.3 は管理画面の登録内容を標準テンプレートで表示する。4.0 の garment テンプレートは、複数行の項目（<br> を含むもの）
   だけ dd に style="line-height: 1.8" を付けていたので、同じ行間にする */
#page_help_tradelaw .ec-borderedDefs dd:has(br) {
  line-height: 1.8;
}