/* ============ お気に入り一覧CSS：WP化時はお気に入りページのみで読み込む ============ */
@layer page {
  .p-favorites {
    .p-favorites__title {
      /* cap-height実測から逆算したfont-size（.p-news-list__titleと同じ頭打ち構造） */
      font-size: clamp(8rem, 4rem + 7.5vw, 13rem);
      font-weight: var(--fw-heavy);
      line-height: 1;
      /* PDF実測：カードリストと同じ左右余白で揃える（WORKSと同様、非対称にしない） */
      padding-inline: var(--page-padding-150);
    }

    /* キャプチャ実測：タイトルとカードの間の12remに収める（4.3＋枠5＋2.7）ためカード位置は動かない */
    .p-favorites__alert {
      margin-block-start: 4.3rem;
      margin-inline: var(--page-padding-150);
      padding: 0.8rem 1.6rem;
      background-color: var(--color-bg);
      color: #e60012; /* サンプル請求：不可のバッジと同じ赤 */
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      line-height: 1.4; /* キャプチャ実測の行送り17pxから算出 */
    }

    .p-favorites__list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4.5rem 2rem;
      margin-block-start: 12rem; /* PDF実測：タイトル下端からカード上端まで */
      padding-inline: var(
        --page-padding-150
      ); /* PDF実測：768px→30px、1920px→150px */
    }

    .p-favorites__alert:not([hidden]) + .p-favorites__list {
      margin-block-start: 2.7rem;
    }

    /* デザインに無い0件の状態。カードと同じ位置に出す */
    .p-favorites__empty {
      margin-block-start: 12rem;
      padding-inline: var(--page-padding-150);
      font-size: var(--fs-sm);
      text-align: center;
    }

    .p-favorites-card {
      position: relative; /* 削除ボタンを右上角に絶対配置する基準 */
    }

    .p-favorites-card__link {
      display: block;
    }

    .p-favorites-card__image {
      aspect-ratio: 390 / 219.3; /* PDF実測 */
      object-fit: cover;
    }

    .p-favorites-card__code {
      margin-block-start: 1.7rem; /* PDF実測：画像下端から品番上端まで */
      font-size: 1.9rem; /* PDFテキストオブジェクト実測値 */
      font-weight: var(--fw-heavy);
      font-family: var(--font-base);
    }

    .p-favorites-card__desc {
      font-size: var(--fs-xs);
    }

    .p-favorites-card__badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-block-start: 1rem; /* PDF実測：説明下端からバッジ上端まで */
      padding-inline: 1.56rem;
      height: 3rem;
      background-color: var(--color-text);
      color: var(--color-text-invert);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
    }

    .p-favorites-card__badge--unavailable {
      background-color: #e60012;
    }

    .p-favorites__request {
      display: flex;
      justify-content: center;
      margin-block-start: 7.5rem; /* PDF実測：カード最終行から本ボタンまで */
      padding-inline: var(--page-padding-150);

      /* display:flexがhidden属性より強いため、0件の時に消えるよう明示する */
      &[hidden] {
        display: none;
      }
    }

    .p-favorites__request-btn {
      /* c-buttonの固定20rem幅だと長い文言が折り返るため、実測幅に上書きする */
      width: 44rem; /* PDF実測440px幅 */

      /* 上限超え・請求不可がある間は進ませない(js側)。見た目は商品詳細のお気に入りボタンと同じ */
      &[aria-disabled="true"] {
        cursor: not-allowed;
        opacity: 0.4;
      }
    }

    .p-favorites__flow {
      margin-block-start: 16rem; /* PDF実測：本ボタン下端から見出しまで */
      /* PDF実測：タイトル/リストより幅が狭い列（左右320px）。ここだけ他要素と揃えない */
      padding-inline: var(--page-padding-320);
    }

    .p-favorites__flow-title {
      font-size: 2.4rem; /* PDFテキストオブジェクト実測値 */
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
    }

    .p-favorites__flow-list {
      margin-block-start: 8rem; /* PDF実測：見出し下端から最初のステップまで */
    }

    .p-favorites__flow-item {
      padding-block: 1.5rem; /* PDF実測：ステップ間の余白を上下均等に分配 */
      border-block-end: 1px solid var(--color-border);

      &:first-child {
        padding-block-start: 0;
      }

      &:last-child {
        border-block-end: none;
      }
    }

    .p-favorites__flow-step {
      font-size: 2rem; /* PDFテキストオブジェクト実測値 */
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
      /* --font-baseだと数字がAvenir(700ウェイト無し)に化けるため和文フォントに固定 */
      font-family:
        "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
        "Yu Gothic Medium", "Meiryo", sans-serif;
    }

    .p-favorites__flow-text {
      margin-block-start: 0.5rem; /* PDF実測：ステップ見出し下端から本文まで */
      font-size: var(--fs-sm);
      line-height: 1.7; /* PDF実測の行送りから算出 */
    }

    /* SPは4カラム→1カラムの縦積みに変わる。数値は一覧・詳細ページの他要素と同じ計算式 */
    @media (max-width: 767px) {
      .p-favorites__title {
        /* PDFテキストオブジェクト実測：640px時143px */
        font-size: clamp(7rem, 22.344vw, 14.3rem);
        padding-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
        /* 親paddingを負marginで打ち消し、"F"の左サイドベアリング0.079em分も追加で詰める */
        margin-inline-start: calc(-2rem - 0.079em);
      }

      .p-favorites__alert {
        margin-block-start: 3rem;
        margin-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
        padding: 1rem 1.6rem;
        /* 品番の下の説明と同じ大きさにそろえる */
        font-size: clamp(1.2rem, 0.351rem + 2.264vw, 1.8rem);
      }

      .p-favorites__list {
        grid-template-columns: 1fr;
        gap: 4rem; /* PDF実測：SPのカード間隔 */
        margin-block-start: 3rem;
        padding-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
      }

      .p-favorites__alert:not([hidden]) + .p-favorites__list {
        margin-block-start: 2rem;
      }

      .p-favorites__empty {
        margin-block-start: 3rem;
        padding-inline: 2rem;
        font-size: clamp(1.2rem, 0.351rem + 2.264vw, 1.8rem);
        text-align: start; /* SPは文の切れ目で改行して左に揃える */
      }

      .p-favorites-card__remove {
        /* PCはPDF実測(20px/13px)に合わせたが、SPはこれまでの見た目を維持する */
        translate: 25% -25%;
        width: 3rem;
        height: 3rem;
      }

      .p-favorites-card__remove-icon {
        width: 2rem;
        height: 2rem;
      }

      .p-favorites-card__code {
        margin-block-start: 1.2rem;
        /* PC1.9rem(19px)→SP640px実測2.8rem(28px)の確定式で算出 */
        font-size: clamp(1.9rem, 0.626rem + 3.396vw, 2.8rem);
      }

      .p-favorites-card__desc {
        /* PC1.2rem(12px)→SP640px実測1.8rem(18px)の確定式で算出 */
        font-size: clamp(1.2rem, 0.351rem + 2.264vw, 1.8rem);
      }

      .p-favorites-card__badge {
        margin-block-start: 1.2rem;
        height: 3.4rem;
        /* PC1.2rem(12px)→SP640px実測1.7rem(17px)の確定式で算出 */
        font-size: clamp(1.2rem, 0.492rem + 1.887vw, 1.7rem);
      }

      .p-favorites__request {
        margin-block-start: 5rem;
        padding-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
      }

      .p-favorites__request-btn {
        width: 100%;
      }

      .p-favorites__flow {
        margin-block-start: 10rem;
        padding-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
      }

      .p-favorites__flow-title {
        /* デザイン比率とズレるためPC値に収束させず、640px基準の比例スケールのまま頭打ち */
        font-size: clamp(1.758rem, 4.6875vw, 3rem);
      }

      .p-favorites__flow-list {
        margin-block-start: 4rem;
      }

      .p-favorites__flow-step {
        /* 640px実測24px基準の比例スケール。375pxは比率そのまま延長した値で頭打ち */
        font-size: clamp(1.406rem, 3.75vw, 2.4rem);
      }

      .p-favorites__flow-text {
        /* 640px実測18px基準の比例スケール。375pxは比率そのまま延長した値で頭打ち */
        font-size: clamp(1.055rem, 2.8125vw, 1.8rem);
      }
    }
  }
}