/* subscription_ad_exclusive: ページ表示時ポップアップ（Figma Group 1000002807 相当をモーダル幅にスケール） */

/* 遅延表示後のふんわり出現（JS が .c-adExclusivePopup--open を付与） */
.c-modal.c-adExclusivePopup:not([hidden]):not(.c-adExclusivePopup--open) {
  opacity: 0;
  pointer-events: none;
}

.c-modal.c-adExclusivePopup.c-adExclusivePopup--open {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.55s ease-out;
}

.c-modal.c-adExclusivePopup .c-modal__content {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-modal.c-adExclusivePopup:not(.c-adExclusivePopup--open) .c-modal__content {
  transform: translateY(14px);
}

.c-modal.c-adExclusivePopup.c-adExclusivePopup--open .c-modal__content {
  transform: translateY(0);
}

.c-adExclusivePopup__priceFallback {
  font-size: 14px;
  color: #999;
}

.c-adExclusivePopup .c-addedBox__close {
  border: none;
  background: transparent;
  padding: 0;
}

.c-adExclusivePopup__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── 比較行（通常購入） ── */
.c-adExclusivePopup__compare {
  width: 100%;
}

.c-adExclusivePopup__baselineMedia {
  justify-content: center;
  width: 100%;
  max-width: 358px;
  margin: 0 auto;
}

.c-adExclusivePopup__baselineMedia .c-addedMedia__image {
  padding: 15px;

  @media (max-width: 425px) {
    padding: 10px;
  }
}

.c-adExclusivePopup__offer {
  box-sizing: border-box;
  background: #EAE3D9;
  border: 1px solid #B8996B;
  overflow: hidden;
  border-radius: 8px;
}

.c-adExclusivePopup__offerHead {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  min-height: 48px;

  @media (max-width: 425px) {
    min-height: 44px;
  }
}

.c-adExclusivePopup__offerBadgeCell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: #B8996B;

  @media (max-width: 425px) {
    padding: 8px 12px;
  }
}

.c-adExclusivePopup__offerBadge {
  font-family: var(--font-HankenGrotesk, 'Hanken Grotesk', sans-serif);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;

  @media (max-width: 425px) {
    font-size: 18px;
  }
}

.c-adExclusivePopup__offerTitleRow {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: flex-end;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  min-width: 0;
  background: #EAE3D9;
}

.c-adExclusivePopup__offerTitle {
  margin: 0;
  flex-shrink: 0;
  font-family: var(--font-HankenGrotesk, 'Hanken Grotesk', sans-serif);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #B8996B;
}

.c-adExclusivePopup__offerTitleLine {
  flex: 1;
  height: 0;
  border-top: 1px solid #B8996B;
  min-width: 24px;
}

/* Group 1000002808: 画像 + テキスト */
.c-adExclusivePopup__offerMedia {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 10px;
  max-width: 400px;
  margin: 0 auto;
}

.c-adExclusivePopup__offerImg {
  flex: 0 0 100px;

  @media (max-width: 425px) {
    flex: 0 0 90px;
  }
}

.c-adExclusivePopup__offerImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: darken;
}

.c-adExclusivePopup__offerInfo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-adExclusivePopup__offerKicker {
  font-family: var(--font-NotoSansJP, 'Noto Sans JP', sans-serif);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.35;
  color: #2A2727;
  margin: 0;
}

.c-adExclusivePopup__offerName {
  font-family: var(--font-NotoSansJP, 'Noto Sans JP', sans-serif);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  color: #2A2727;
  margin: 0;
}

.c-adExclusivePopup__offerFlavor {
  font-family: var(--font-NotoSansJP, 'Noto Sans JP', sans-serif);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  color: #2A2727;
  margin: 0;
}

.c-adExclusivePopup__offerPrice {
  font-family: var(--font-HankenGrotesk, 'Hanken Grotesk', sans-serif);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  margin: 2px 0 0;
}

/* 価格ブロック（JS が .c-upsell__price* を出力） */
.c-adExclusivePopup .c-upsell__priceAd {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;

  @media (min-width: 769px) {
    gap: 6px;
  }
}

.c-adExclusivePopup .c-upsell__priceAdRegular {
  font-size: 13px;
  font-weight: 400;
  color: #2A2727;

  @media (max-width: 425px) {
    font-size: 3.45vw;
  }
}

.c-adExclusivePopup .c-upsell__priceAdArrow {
  color: #2A2727;
  font-size: 13px;
  font-weight: 400;
}

.c-adExclusivePopup .c-upsell__priceAdSpecial {
  font-weight: 700;
  font-size: 18px;
  color: #E6003E;

  @media (max-width: 425px) {
    font-size: 4.6vw;
  }
}

.c-adExclusivePopup .c-upsell__priceNote {
  font-weight: 500;
  font-size: inherit;
}

.c-adExclusivePopup .c-upsell__priceJpy {
  font-size: 0.85em;
}

/* Frame 1000002728: 特徴リスト（Figma gap 40 → モーダル用に縮小） */
.c-adExclusivePopup__features {
  list-style: none;
  margin: 0;
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 auto;
  max-width: 358px;
}

.c-adExclusivePopup__feature {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  font-family: var(--font-NotoSansJP, 'Noto Sans JP', sans-serif);
  font-weight: 400;
  font-size: clamp(11px, 3vw, 12px);
  line-height: 1.25;
  color: #2A2727;
}

.c-adExclusivePopup__feature::before {
  content: "";
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  box-sizing: border-box;
  background-image: url("../../../images/common/icons/check-square-g.svg");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
}

/* btn: ページをブックマーク（Figma は巨大値のためモーダル向けに調整） */
.c-adExclusivePopup__bookmarkBtn {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 28px);
  max-width: 358px;
  margin: 8px auto 16px;
  padding: 14px 20px;
  border: none;
  border-radius: 1000px;
  background: #B8996B;
  font-family: var(--font-NotoSansJP, 'Noto Sans JP', sans-serif);
  font-weight: 500;
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1.2;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.c-adExclusivePopup__bookmarkBtn:hover {
  opacity: 0.88;
}

.c-adExclusivePopup__foot {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.c-adExclusivePopup__dismiss {
  box-sizing: border-box;
  width: 100%;
  max-width: 358px;
  padding: 14px 20px;
  border: 1px solid #B8996B;
  border-radius: 1000px;
  background: #fff;
  font-family: var(--font-NotoSansJP, 'Noto Sans JP', sans-serif);
  font-weight: 500;
  font-size: clamp(13px, 3.4vw, 15px);
  color: #B8996B;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.c-adExclusivePopup__dismiss:hover {
  opacity: 0.85;
}

@media (min-width: 769px) {
  .c-adExclusivePopup__features {
    gap: 10px;
    padding-left: 16px;
    padding-right: 16px;
  }
}