.astra-grid-item {
  container-type: inline-size;
  container-name: card-astra;
  /* カードがグリッドの行の高さいっぱいに伸びるように。 */
  display: flex;
}

/* --- カードの高さとボタンの位置 --------------------------------------------
 *
 * 商品名やスペックの行数はカードごとに違う（「#04 SHINE MUSCAT DUO ICE」は
 * 2行になる）。そのままだと文章の量に押されてボタンの位置が上下にずれ、
 * 一覧が階段状に見えていた。
 *
 * カードを縦のフレックスにして、ボタンを下端へ寄せる。画像は正方形を保ちたい
 * ので伸ばさず（Dawn の card--extend-height は画像側を伸ばす作りなので外す）、
 * 伸縮するのは文章側にする。 */
.astra-card-wrapper.card-astra-product {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.card-astra-product .card--extend-height {
  flex: 1 1 auto;
}

/* ★セレクタは component-card.css の
 *
 *     .card--extend-height.card--standard.card--text .card__inner,
 *     .card--extend-height.card--media .card__inner { flex-grow: 1 }
 *
 *   と同じ形に揃えてある。以前は `.card--extend-height .card__inner` と短く
 *   書いていたが、クラス3つぶんしか無く Dawn 側（4つぶん）に詳細度で負けて
 *   **1件も効いていなかった**。
 *
 *   効いていなかった結果、画像枠がカードの余った縦幅ぶんだけ伸び、商品名や
 *   スペック行の行数が違うカードどうしで画像の高さが数%ずれていた
 *   （1440px で 393×393 と 393×406 が混在）。 */
.card-astra-product .card--extend-height.card--standard.card--text .card__inner,
.card-astra-product .card--extend-height.card--media .card__inner {
  flex-grow: 0;
}

.card-astra-product .card__inner + .card__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.card-astra-product .quick-add {
  margin-top: auto;
}

/* --- 商品名・スペック・価格の行を揃える ------------------------------------
 *
 * 商品名は1行のものと2行のものが混ざる（「KINMOKUSEI＋DEVICE」と
 * 「CHERRY SPICE COLA＋DEVICE」）。そのままだと商品名の行数ぶんだけ下の行が
 * ずれ、スペックと価格の位置がカードごとに違って見える。
 *
 * 商品名の高さを決め打ちするのではなく、スペックと価格をカードの下端側へ
 * 寄せて揃える。ボタンで既にうまくいっている考え方（margin-top: auto）と
 * 同じで、文字数や行数がいくつでも位置が変わらない。
 *
 * 商品名は上端、スペックと価格は下端。あいだが空くぶんには崩れて見えない。 */
.card-astra-product .card__inner + .card__content .card__information {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.card-astra-product .card__inner + .card__content .card-details {
  margin-top: auto;
}

/* --- 写真の左下の「送料無料」タグ ------------------------------------------
 *
 * ニコチンを含まない商品は送料がかからない（inc/woocommerce.php の
 * astra_is_free_shipping_product）。以前はスペック行「Nicotine 0％」の隣に
 * 文字で置いていたが、一覧を眺めているときに読み飛ばされるので、「セール」と
 * 同じ**写真の上のタグ**にして、その隣（左下）に並べる。
 *
 * ★横いっぱいに広げる指定（width: 100%）や右寄せ（margin-left: auto）をしないこと。
 *   写真の上の .card__content は1列3行のグリッドで、トップページのカードでは
 *   その列幅が「中身の幅」から決まる。中身に width: 100% を入れると計算が循環して
 *   列が 414px（カードは 246px）まで膨らみ、右寄せしたものは**カードの外**へ
 *   飛び出す（本番で実際にそうなった）。
 *   左に置くぶんには、列が広がってもタグは左端に留まるので影響を受けない。
 *   右下に置きたくなったときは、この入れ物ではなく別要素の絶対配置
 *   （right と bottom だけ。left と併用すると伸びない）で行うこと。
 *
 * 並べるための flex は幅を触らないので安全。狭いカードで「セール」と横に並べ
 * きれないときは、重ねずに折り返す。 */
.card-astra-product .card__badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* 素の .astra-free-shipping（astra-theme.css）は文章の中に混ぜる前提の見た目で、
 * 地が白の12%＝下の写真が透ける。暗い商品写真の上ではほぼ沈んで読めないので、
 * **白地に濃い文字**へ反転させる。形と余白は隣の「セール」（.badge）に合わせて、
 * 2つが同じ種類の札に見えるようにする。
 *
 * 「セール」と同じ青にしなかったのは、同じ色だと2つが一続きに見えて、
 * 値段の話（セール）と送料の話が区別できなくなるため。
 * シアンを使わないのは、サイトではシアン＝「押せる場所」の合図だから
 * （すぐ下の「カートに追加」がシアンの枠線）。 */
.card-astra-product .card__badge .astra-free-shipping {
  margin-left: 0;
  padding: 5px 13px 6px;
  border-radius: var(--badge-corner-radius);
  background: #FFFFFF;
  color: #121212;
  font-size: 14px;
  line-height: 1;
}

/* 狭いカード（スマホの2列）では「セール」と横に並ぶので、ひと回り小さくする。
 * ★11px まで落とさないこと。写真の上に重なる白い札で、面積が小さいぶん
 *   一番読みにくい要素だった。狭い側でも 13px を下限にする
 *   （並びきらないときは .card__badge の flex-wrap で折り返す）。 */
@container card-astra (max-width: 250px) {
  .card-astra-product .card__badge .astra-free-shipping,
  .card-astra-product .card__badge .badge {
    padding: 4px 10px 5px;
    font-size: 13px;
  }
}

/* スペック行が無い商品（DEVICE / CHOOSE YOUR POD＋DEVICE）でも価格の位置が
 * 変わらないように、価格のかたまり自体を下端へ寄せる。
 *
 * ★狙うのは「商品名のすぐ次に価格が来ている」＝スペック行が無いカード。
 *   以前は `.card__information > .card-information:first-child` と書いていたが、
 *   商品名（h3）が必ず先頭に来るので **1件も当たらなかった**。スペック行の無い
 *   キットだけ価格が1行ぶん上に浮いて、隣のカードと揃っていなかった。 */
.card-astra-product .card__inner + .card__content .card-information {
  margin-top: 0;
}

.card-astra-product .card__inner + .card__content .card__heading + .card-information {
  margin-top: auto;
}

.card-astra-product {
  padding: 36px 48px;
  /* 背景動画の上に重ねる黒。0.52 では動画の明るいコマで商品名と価格が沈んだ。
   * 全ページの暗い層（section-hero-image-background.css の __scrim）に加えて、
   * カードの中はさらに濃くする——文字の密度が高く、読み比べる場所なので。 */
  background-color: rgba(0, 0, 0, 0.78);
  border-radius: 24px;

  @container card-astra (max-width: 400px) {
    padding: 30px 36px;
  }

  @container card-astra (max-width: 300px) {
    padding: 26px 32px;
  }

  @container card-astra (max-width: 200px) {
    padding: 16px;
  }

  .card__information {
    grid-row-start: 1;
  }

  .card__heading {
    /* 商品名・価格は #FFFFFF。#D6D6D6 のままだと、濃くした黒の上でも
     * 下のスペック行と明るさが近く、どれが商品名か一目で分からなかった。 */
    color: #FFFFFF;
    font-family: var(--astra-source-code-pro), sans-serif;
    font-weight: var(--astra-font-weight-medium);
    font-size: 18px;
    text-align: left;
    margin-bottom: 24px;
    
    @container card-astra (max-width: 300px) {
      margin-bottom: 0;
    }

    @container card-astra (max-width: 200px) {
      font-size: 14px;
    }
  }

  .wishlist__button {
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 10px;
    width: 32px;
    height: 32px;

    .wishlist__button--button {
      cursor: pointer;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      margin: 0;
      background-color: #292929;
      border-radius: 50%;
      border: none;
    }
  }

  .card__information {
    margin-bottom: 32px;

    @container card-astra (max-width: 300px) {
      margin-bottom: 16px;
    }

    @container card-astra (max-width: 200px) {
      margin-bottom: 8px;
    }

    /* 「Nicotine 3％ | 2ml」の行。ニコチンの有無はこの店で一番取り違えたく
     * ない情報なのに、#646464 は黒地に対して 2.5:1 ほどしか差が無く、
     * 商品名や価格よりはっきり読みにくかった。明るくして本文並みに上げる。 */
    .card-details {
      color: #C9C9C9;
      font-family: var(--astra-source-code-pro), sans-serif;
      font-weight: var(--astra-font-weight-medium);
      font-size: 14px;
      text-align: left;
    }

    .price {
      color: #FFFFFF;
      font-family: var(--astra-source-code-pro), sans-serif;
      font-weight: var(--astra-font-weight-medium);
      font-size: 14px;
      text-align: left;
      margin-bottom: 6px;

      @container card-astra (max-width: 300px) {
        margin-bottom: 0;
      }

      /* 狭いカードでも 14px を下限にするので、ここでの縮小は無し
       * （以前は 12px まで落としていた）。 */
    }

    /* デバイスの色（DARK / CLEAN）の見本。値段のすぐ下に並べる。
     *
     * 写真は2色で同じ1枚しか無いので、色があること自体をここで示す。
     * 押せる印にはしていない（選ぶのは商品ページ。理由は
     * inc/woocommerce.php の astra_device_color_swatches_html）。 */
    .astra-color-swatches {
      display: flex;
      gap: 8px;

      /* 値段との間隔は指定しない。`.card-information` の中で縦に積んだ要素は
       * component-card.css が 0.7rem 空ける決まりになっていて（★あちらの
       * セレクタは :not() を重ねたぶん強く、ここで書いても勝てない）、
       * カード内の他の並びと同じ間隔になる。 */

      @container card-astra (max-width: 300px) {
        gap: 6px;
      }
    }

    .astra-color-swatch {
      display: block;
      width: 16px;
      height: 16px;
      border-radius: 3px;
      background-color: var(--astra-swatch, transparent);
      /* 枠線が要る。DARK はカードの黒い背景に、CLEAN は白飛びして、
       * どちらも枠が無いと四角に見えない。 */
      border: 1px solid rgba(255, 255, 255, 0.35);

      @container card-astra (max-width: 300px) {
        width: 14px;
        height: 14px;
      }

      @container card-astra (max-width: 200px) {
        width: 12px;
        height: 12px;
      }
    }
  }

  .astra-add-button {
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
    height: 56px;
    border-radius: 9999px;
    border: 2px solid #4EC3E1;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: #4EC3E1;
    font-size: 18px;
    font-family: var(--astra-source-code-pro), sans-serif;
    font-weight: var(--astra-font-weight-medium);
    cursor: pointer;
    text-decoration: none;

    @container card-astra (max-width: 300px) {
      min-height: unset;
      height: 32px;
      font-size: 14px;
    }

    @container card-astra (max-width: 250px) {
      padding-inline: 0;
    }

    svg {
      display: block;
      width: 18px;

      @container card-astra (max-width: 250px) {
        width: 14px;
      }
    }

    &:before, &:after {
      display: none;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: .3;
    }

    /* 売り切れ。押せないことを見た目で示す（リンクではなく span で出している）。 */
    &.is-unavailable {
      cursor: not-allowed;
      opacity: .3;
      pointer-events: none;
    }
  }

  /* ajax追加後にWooCommerceが差し込む「カートを表示」リンク。
     既定のリンク色は暗い背景では視認性が低いため、ボタンと同系色にする。 */
  .added_to_cart {
    color: #4EC3E1;
  }
}