/* ==========================================================
   OPP袋モック
   背景 → キャラ → 影（乗算） → 光沢（スクリーン） → ロゴ

   ※ 合成は .pp-opp-mock の中だけで完結（isolation: isolate）
      → ページの背景や他のセクションには影響しない
   ※ 枠・サムネ・画像すべて正方形（1:1）なので、
      下の % は opp_back.jpg の見た目とそのまま一致する
   ========================================================== */

.pp-opp-mock {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #f2f0ec;
    /* 乗算・スクリーンをこの中に閉じ込める（これが無いと外まで巻き込む） */
    isolation: isolate;

    /* ---- ここの数字だけで調整できる ---- */
    /* キャラを置く範囲＝黄色い台紙の内側（opp_back.jpg の実測値より少し内側） */
    --pp-opp-area-x: 14%;   /* 左右の余白 */
    --pp-opp-area-top: 21%; /* 上の余白 */
    --pp-opp-area-bottom: 20%; /* 下の余白 */
    /* キャラの高さ（上の範囲に対しての割合）。全員この高さでそろう
       100% ＝ 上下のパディングまでいっぱいに使う */
    --pp-opp-char-height: 100%;
    /* 重なりは自動。さらに重ねたいときだけ数字を上げる（0%でOK） */
    --pp-opp-overlap: 0%;
}

.pp-opp-mock[hidden] {
    display: none;
}

/* --- 大きい画像のほう --- */
.pp-opp-mock--main {
    z-index: 2;
    border-radius: 16px;
    /* 中の注意書きの文字を「この枠の大きさに対する％」で決めるため
       （黄色いカードと同じやり方。cqh が使えるようになる） */
    container-type: size;
}

/* --- 下のサムネのほう --- */
.pp-opp-mock--thumb {
    z-index: 1;
    border-radius: 10px;
}

/* --- フロントページ・ショップの一覧カード --- */
.pp-opp-mock--card {
    /* カードの中では枠にはめ込むだけなので absolute にしない */
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    border-radius: 14px;
}

/* サムネのボタン側（絶対配置の基準にする） */
.pp-product__thumb--opp {
    position: relative;
    display: block;
    padding: 0;
    background: #f2f0ec;
    border-color: #d9d4cc;
}

/* ----------------------------------------------------------
   1. 背景（袋の外側＋黄色い台紙まで入った1枚）
   ---------------------------------------------------------- */
.pp-opp-mock__sheet {
    position: absolute;
    inset: 0;
    /* キャラの z-index をこの中だけで完結させる
       （これが無いとキャラが袋の影やロゴより前に出てしまう） */
    z-index: 0;
    background-image: url("../images/opp/opp_back.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* ----------------------------------------------------------
   2. キャラを台紙の上に並べる（高さ基準・自動で重なる）
      ・高さだけ指定して幅は auto ＝ 縦横比は絶対に崩れない
      ・全員そろって同じ高さになる
      ・キャラが太いほど自動で深く重なり、左右のパディングは必ず守られる
        （仕組み：置き場所は flex に縮めさせて、画像自体は縮まないので
         はみ出したぶんが隣への重なりになる）
   ---------------------------------------------------------- */
.pp-opp-mock__grid {
    position: absolute;
    left: var(--pp-opp-area-x);
    right: var(--pp-opp-area-x);
    top: var(--pp-opp-area-top);
    bottom: var(--pp-opp-area-bottom);
    display: flex;
    align-items: center;
    /*
     * 余るときは人数ぶんに等分して置く（3人なら3分割・4人なら4分割）
     * 入りきらないときは余白がゼロになるので、この指定は効かず重なりだけになる
     */
    justify-content: space-around;
}

.pp-opp-mock__item {
    /* 重ね順（z-index）はテンプレート側で1人ずつ指定している */
    position: relative;
    /* 画像の幅を基準にして、入りきらないときは置き場所だけ縮む */
    flex: 0 1 auto;
    min-width: 0;
    /* キャラの高さはここで決まる（台紙範囲に対しての割合） */
    height: var(--pp-opp-char-height);
    display: flex;
    align-items: center;
    /* 左そろえ：はみ出しは右（＝次の子の上）へ出る */
    justify-content: flex-start;
}

/* 最後の1人だけ縮めない → 右端がパディングにピタッとそろう */
.pp-opp-mock__item:last-child {
    flex-shrink: 0;
}

/* 最低これだけは重ねたい、というとき用（ふつうは 0% でOK） */
.pp-opp-mock__item + .pp-opp-mock__item {
    margin-left: calc(var(--pp-opp-overlap) * -1);
}

/* WooCommerce の `.woocommerce img` / `.pp-product__thumb img` /
   `.pp-product-card__image img` より優先させる指定 */
img.pp-opp-mock__chara,
.woocommerce img.pp-opp-mock__chara,
.woocommerce-page img.pp-opp-mock__chara,
.pp-product__thumb--opp img.pp-opp-mock__chara,
.pp-product-card__image img.pp-opp-mock__chara {
    display: block;
    /* 高さ基準。幅は auto なので縦横比はそのまま。縮ませない */
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    max-width: none;
    max-height: none;
}

/* 白フチ（黄色いカードと同じSVGフィルタ）＋ ほんのりドロップシャドウ */
.pp-opp-mock--main .pp-opp-mock__chara {
    filter: url(#pp-sample-img-outline) drop-shadow(0 3px 5px rgba(70, 50, 40, 0.28));
}
.pp-opp-mock--thumb .pp-opp-mock__chara {
    filter: url(#pp-sample-img-outline-mini) drop-shadow(0 1px 2px rgba(70, 50, 40, 0.28));
}
.pp-opp-mock--card .pp-opp-mock__chara {
    filter: url(#pp-sample-img-outline-mini) drop-shadow(0 2px 3px rgba(70, 50, 40, 0.28));
}

/* ----------------------------------------------------------
   3. 袋の影・くもり（乗算）
      白い部分は変化なし。暗い部分だけ影になる。
   ---------------------------------------------------------- */
.pp-opp-mock__shade {
    position: absolute;
    inset: 0;
    mix-blend-mode: multiply;
    background-image: url("../images/opp/opp-shade.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* ----------------------------------------------------------
   4. 袋の光沢・反射（スクリーン）
      黒い部分は変化なし。明るい部分だけ光る。
   ---------------------------------------------------------- */
.pp-opp-mock__gloss {
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    background-image: url("../images/opp/opp-gloss.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* ----------------------------------------------------------
   5. ロゴ（合成しないで最前面）
      画像の中で位置決めされているので、枠いっぱいに敷くだけ
   ---------------------------------------------------------- */
img.pp-opp-mock__logo,
.woocommerce img.pp-opp-mock__logo,
.woocommerce-page img.pp-opp-mock__logo,
.pp-product__thumb--opp img.pp-opp-mock__logo,
.pp-product-card__image img.pp-opp-mock__logo {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

/* ----------------------------------------------------------
   モック表示中は、下の商品写真を隠す
   （黄色いカードのときと同じ考え方）
   ---------------------------------------------------------- */
.pp-product__main-image.is-opp-view {
    cursor: default;
}
.pp-product__main-image.is-opp-view .pp-product__main-img {
    visibility: hidden;
}

/* ----------------------------------------------------------
   6. 注意書き（袋の画像の中・下のほうに重ねる）

   ・テンプレート側で大きい画像のときだけ出しているので、
     出し入れの指定はここには要らない（モックと一緒に消える）
   ・文字の大きさは cqh ＝「この画像の高さに対する％」。
     画像が小さくなれば文字も一緒に小さくなる（黄色いカードと同じ考え方）
   ・位置は bottom の数字で上下、font-size で大きさを調整
   ---------------------------------------------------------- */
.pp-opp-mock__note {
    position: absolute;
    z-index: 2; /* ロゴ(1)よりも前 ＝ 乗算・スクリーンの影響を受けない */
    left: 6%;
    right: 6%;
    bottom: 3.5%;
    margin: 0;
    color: #3f3a36;
    font-size: 2.4cqh;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}