/* ============================================
   商品ページ周り（product.css）
   ============================================
   単品販売／キャラ重なりモック／ノートブックモック
   商品詳細などで必要なときだけ読み込む
   ============================================ */


/* ============================================
   1. 単品販売（.pp-child-picker）
   ============================================ */

/* ============================================
   1. 外側枠・ロック状態（Figma tanpin 準拠）
   ============================================ */
/* 【場所】商品詳細ページの単品販売ブロック
   【意図】外側のピンク枠（padding は内側 form 側） */
.pp-child-picker {
    margin: 1.25rem 0 1.5rem;
    padding: 0;
    box-sizing: border-box;
    background: rgba(255, 199, 205, 0.3);
    border: 2px solid #ffc7cd;
    border-radius: 26px;
    overflow: hidden;
}

/* カートが解除ライン未満：カードごと半透明＆クリック不可 */
/* 【場所】商品詳細ページの単品販売ブロック
   【意図】ロック中はカードを半透明にしてクリック不可にする */
.pp-child-picker.is-locked .pp-child-picker__scroll {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}
/* 【場所】商品詳細ページの単品販売ブロック
   【意図】ロック中は送信ボタンも押せなくする */
.pp-child-picker.is-locked .pp-child-picker__submit {
    opacity: 0.4;
    pointer-events: none;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】見出しの文字・余白 */
.pp-child-picker__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    margin: 0 0 10px;
    padding: 22px 18px 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #f58690;
    text-align: center;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】見出しの文字・余白 */
.pp-child-picker__heading img {
    width: 36px;
    height: 37px;
    flex-shrink: 0;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】説明文・本文 */
.pp-child-picker__hint {
    margin: 0;
    padding: 0 18px 18px;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--pp-text-dark, #4f3829);
    text-align: center;
    border-bottom: 2px dashed rgba(245, 134, 144, 0.25);
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】説明文・本文 */
.pp-child-picker__hint strong {
    font-weight: 700;
    color: var(--pp-brand-daisy-label, #4aa9c2);
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】フォーム／数量 */
.pp-child-picker__form {
    margin: 0;
    /* 外側にあった padding を内側へ（上は見出し側で確保） */
    padding: 0 18px 24px;
    box-sizing: border-box;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】単品選択UI */
.pp-child-picker__scroll {
    max-height: 22rem;
    overflow-y: auto;
    margin: 0;
    padding: 18px 4px 12px;
    background: rgba(255, 255, 255, 0.5);
    -webkit-overflow-scrolling: touch;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】並び・レイアウト */
.pp-child-picker__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】単品選択UI */
.pp-child-picker__item {
    margin: 0;
    min-width: 0;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】合計・ラベル表示 */
.pp-child-picker__label {
    display: block;
    cursor: pointer;
    margin: 0;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】単品選択UI */
.pp-child-picker__check {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】単品選択UI */
.pp-child-picker__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.35rem 0.5rem;
    border: 2px solid var(--pp-border-pink, #F5C6D0);
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】単品選択UI */
.pp-child-picker__check:checked + .pp-child-picker__card,
.pp-child-picker__item.is-selected .pp-child-picker__card  {
    border-color: var(--pp-brand-poppy, #f58690);
    border-width: 2.5px;
    box-shadow: none;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】単品選択UI */
.pp-child-picker__media {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    background: #f7f0ea;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】画像の枠・切り抜き */
.pp-child-picker__media img,
.pp-child-picker__img  {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】商品名・メタ情報 */
.pp-child-picker__name {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--pp-text-dark, #4f3829);
    word-break: break-word;
}

/* 数字をメイン、¥はひとまわり小さく（カードが崩れないサイズ） */
/* 【場所】商品詳細ページの単品販売ブロック
   【意図】数字をメイン、¥はひとまわり小さく（カードが崩れないサイズ） */
.pp-child-picker__price {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--pp-brand-poppy, #f58690);
    text-align: center;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】価格表示 */
.pp-child-picker__price .woocommerce-Price-currencySymbol {
    font-size: 0.72em;
    font-weight: 700;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】価格表示 */
.pp-child-picker__price del {
    color: var(--pp-text-light, #8B7B6B);
    font-size: 0.78em;
    font-weight: 600;
    margin-right: 0.2em;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】価格表示 */
.pp-child-picker__price ins {
    text-decoration: none;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】単品選択UI */
.pp-child-picker__soldout {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: #999;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】合計・ラベル表示 */
.pp-child-picker__item.is-soldout .pp-child-picker__label {
    cursor: not-allowed;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】単品選択UI */
.pp-child-picker__item.is-soldout .pp-child-picker__card {
    opacity: 0.45;
    border-color: #ccc;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】単品選択UI */
.pp-child-picker__msg {
    margin: 0;
    padding: 0 4px 8px;
    font-size: 0.85rem;
    color: #c0392b;
    background: rgba(255, 255, 255, 0.5);
}

/* tanpin ボタン：ピンクピル＋白点線 */
/* 【場所】商品詳細ページの単品販売ブロック
   【意図】tanpin ボタン：ピンクピル＋白点線 */
.pp-child-picker__submit.pp-product__add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 480px;
    margin: 12px auto 0;
    padding: 12px 20px;
    box-sizing: border-box;
    border: none;
    border-radius: 999px;
    background-color: #ff748c;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    outline: 1px dashed rgba(255, 255, 255, 0.9);
    outline-offset: -6px;
    box-shadow: none;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】ボタンの見た目 */
.pp-child-picker__submit.pp-product__add-btn:hover {
    background-color: #f58690;
    color: #fff;
    opacity: 1;
}

/* 【場所】商品詳細ページの単品販売ブロック
   【意図】ボタンの見た目 */
.pp-child-picker__submit .pp-product__add-flower {
    width: 28px;
    height: auto;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】単品選択UI */
.pp-child-picker {
        padding: 0;
        border-radius: 20px;
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】見出しの文字・余白 */
.pp-child-picker__heading {
        font-size: 24px;
        gap: 12px;
        margin-bottom: 8px;
        padding: 18px 12px 0;
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】見出しの文字・余白 */
.pp-child-picker__heading img {
        width: 30px;
        height: 31px;
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】説明文・本文 */
.pp-child-picker__hint {
        font-size: 14px;
        padding: 0 12px 14px;
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】フォーム／数量 */
.pp-child-picker__form {
        padding: 0 12px 20px;
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】並び・レイアウト */
.pp-child-picker__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】単品選択UI */
.pp-child-picker__scroll {
        max-height: 18rem;
        padding-top: 14px;
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】ボタンの見た目 */
.pp-child-picker__submit.pp-product__add-btn {
        font-size: 15px;
        padding: 10px 16px;
        outline-offset: -5px;
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】ボタンの見た目 */
.pp-child-picker__submit .pp-product__add-flower {
        width: 24px;
    }
}

@media (max-width: 450px) {
    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】単品選択UI */
.pp-child-picker {
        padding: 0;
        border-radius: 18px;
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】見出しの文字・余白 */
.pp-child-picker__heading {
        font-size: 20px;
        gap: 8px;
        padding: 14px 10px 0;
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】見出しの文字・余白 */
.pp-child-picker__heading img {
        width: 20px;
        height: 20px;
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】説明文・本文 */
.pp-child-picker__hint {
        font-size: 12px;
        padding: 0 10px 6px;
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】フォーム／数量 */
.pp-child-picker__form {
        padding: 0 10px 16px;
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】ボタンの見た目 */
.pp-child-picker__submit.pp-product__add-btn {
        font-size: 14px;
        padding: 10px 12px;
        gap: 6px;
        outline-offset: -4px;
    }

    /* 【場所】商品詳細ページの単品販売ブロック
   【意図】ボタンの見た目 */
.pp-child-picker__submit .pp-product__add-flower {
        width: 20px;
    }
}


/* ============================================
   2. キャラ重なりモック（opp-mock）
   ============================================ */

/* 【場所】OPP袋モックのルート要素
   【意図】合成レイヤーをこの中に閉じ込める */
.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% ＝ 上下のパディングまでいっぱいに使う
       ※ Yずらしがあるときは PHP 側で縮めた値を --pp-opp-char-height に渡す
         （はみ出し分も含めて袋の中に収めるため） */
    --pp-opp-char-height: 100%;
    /* 重なりは自動。さらに重ねたいときだけ数字を上げる（0%でOK） */
    --pp-opp-overlap: 0%;
}

/* 【場所】非表示状態のモック */
.pp-opp-mock[hidden] {
    display: none;
}

/* 【場所】商品詳細のメイン画像用モック
   【意図】注意書きの cqh 用に container-type を指定 */
.pp-opp-mock--main {
    z-index: 2;
    border-radius: 16px;
    /* 注意書きの文字サイズ（cqh）用 */
    container-type: size;
}

/* 【場所】商品詳細のサムネイル用モック */
.pp-opp-mock--thumb {
    z-index: 1;
    border-radius: 10px;
}

/* 【場所】ショップ一覧カード内のモック
   【意図】absolute にせず枠にフィット */
.pp-opp-mock--card {
    /* カードの中では枠にはめ込むだけ（absolute にしない） */
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    border-radius: 14px;
}

/* 【場所】商品カードのホバー時
   【意図】OPPキャラ・ロゴは拡大しない（枠で切れるため） */
.pp-product-card:hover .pp-product-card__image img.pp-opp-mock__chara,
.pp-product-card:hover .pp-product-card__image img.pp-opp-mock__logo {
    transform: none;
}

/* 【場所】OPPサムネボタン
   【意図】モックの absolute 基準にする */
.pp-product__thumb--opp {
    position: relative;
    display: block;
    padding: 0;
    background: #f2f0ec;
}

/* ============================================
   1. 背景レイヤー（opp_back.jpg）
   ============================================ */

/* 【場所】袋の背景画像レイヤー
   【意図】キャラ z-index の基準（z-index: 0） */
.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. キャラ配置（高さ基準・自動で重なる）
   ============================================ */

/* 【場所】キャラを並べる flex コンテナ
   【意図】台紙エリア内で space-around 配置 */
.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;
}

/* 【場所】キャラ1人分の置き場所
   【意図】管理画面の X/Y % で微調整可能 */
.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;
    /*
     * 位置の微調整（管理画面の「X％」「Y％」→ --pp-opp-x / --pp-opp-y）
     * ・％の基準は台紙エリア（.pp-opp-mock__grid）の幅・高さ
     * ・X：マイナス＝左／プラス＝右（はみ出し＝隣への重なり。今までどおり）
     * ・Y：マイナス＝上／プラス＝下
     *   → はみ出さないよう、PHP が全体の高さ（--pp-opp-char-height）も縮める
     * ・flex のマスはそのまま、見た目だけずらす
     */
    left: calc(var(--pp-opp-x, 0) * 1%);
    top: calc(var(--pp-opp-y, 0) * 1%);
}

/* 【場所】最後のキャラ
   【意図】右端をパディングに揃える */
.pp-opp-mock__item:last-child {
    flex-shrink: 0;
}

/* 【場所】隣接キャラ間の重なり量 */
.pp-opp-mock__item + .pp-opp-mock__item {
    margin-left: calc(var(--pp-opp-overlap) * -1);
}

/* 【場所】キャラ画像
   【意図】WooCommerce の width:100% を打ち消し、高さ基準で配置
   大事：Shop（ul.products）では WooCommerce 標準の
   .woocommerce ul.products li.product a img { width: 100%; }
   が効いてしまう。下の長いセレクタはその width:100% に負けないための指定。 */
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,
.woocommerce ul.products li.product a img.pp-opp-mock__chara,
.woocommerce-page ul.products li.product a img.pp-opp-mock__chara,
.woocommerce ul.products li.product .pp-product-card__image img.pp-opp-mock__chara,
.woocommerce-page ul.products li.product .pp-product-card__image img.pp-opp-mock__chara {
    display: block;
    /* 高さだけそろえる。幅は画像ごとの比率で決まる（縮めない → 隣へ重なる） */
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    max-width: none;
    max-height: none;
    /*
     * カード共通の object-fit:cover を打ち消す。
     * none は「原寸のまま枠で切る」になるので使わない。
     * contain ＝ 枠の高さに合わせて全体を収める（縦横比キープ）
     */
    object-fit: contain;
}

/* 【場所】キャラ画像の白フチ＋影（サイズ別） */
.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. 袋の影・くもり（乗算 blend）
   ============================================ */

/* 【場所】袋の影レイヤー
   【意図】白い部分は変化なし、暗い部分だけ影になる */
.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. 袋の光沢・反射（スクリーン blend）
   ============================================ */

/* 【場所】袋の光沢レイヤー
   【意図】黒い部分は変化なし、明るい部分だけ光る */
.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. ロゴ（最前面・blend なし）
   ============================================ */

/* 【場所】袋のロゴ画像
   【意図】枠いっぱいに敷く（位置は画像内で決まっている） */
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,
.woocommerce ul.products li.product a img.pp-opp-mock__logo,
.woocommerce-page ul.products li.product a img.pp-opp-mock__logo,
.woocommerce ul.products li.product .pp-product-card__image img.pp-opp-mock__logo,
.woocommerce-page ul.products li.product .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;
}

/* ============================================
   モック表示中 — 元の商品写真を隠す
   ============================================ */

/* 【場所】OPPモック表示中のメイン画像エリア */
.pp-product__main-image.is-opp-view {
    cursor: default;
}
/* 【場所】OPPモック表示中の元写真
   【意図】visibility で非表示（レイアウトは維持） */
.pp-product__main-image.is-opp-view .pp-product__main-img {
    visibility: hidden;
}

/* ============================================
   6. 注意書き（メイン画像のみ・cqh で可変）
   ============================================ */

/* 【場所】袋画像内の注意書きテキスト
   【意図】cqh で画像高さに連動、ロゴより前面 */
.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;
}


/* ============================================
   3. ノートブックモック（notebook-mock）
   ============================================ */

/* 【場所】手帳モックのルート要素
   【意図】キャラ高さは CSS 変数で一括管理 */
.pp-nb-mock {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #f6f2ee;

    /* ---- ここの数字だけで調整できる ---- */
    /* キャラの高さ（台紙の高さに対しての割合）。4人ともこの高さでそろう */
    --pp-nb-char-height: 22.2%;
}

/* 【場所】非表示状態のモック */
.pp-nb-mock[hidden] {
    display: none;
}

/* 【場所】商品詳細のメイン画像用モック */
.pp-nb-mock--main {
    z-index: 2;
    border-radius: 16px;
}

/* 【場所】商品詳細のサムネイル用モック */
.pp-nb-mock--thumb {
    z-index: 1;
    border-radius: 10px;
}

/* 【場所】手帳サムネボタン
   【意図】モックの absolute 基準にする */
.pp-product__thumb--notebook {
    position: relative;
    display: block;
    padding: 0;
    background: #f6f2ee;
    border-color: #e3dcd2;
}

/* ============================================
   1. 台紙（手帳の写真）
   ============================================ */

/* 【場所】手帳台紙の背景画像 */
.pp-nb-mock__sheet {
    position: absolute;
    inset: 0;
    background-image: url("../images/mock.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* ============================================
   2. キャラの置き場所（4スロット）
   ============================================ */

/* 【場所】キャラ1人分のスロット
   【意図】中心基準＋回転。管理画面の dx/dy で微調整 */
.pp-nb-mock__slot {
    position: absolute;
    /*
     * 基準位置（--pp-nb-x / --pp-nb-y）に、管理画面の微調整（--pp-nb-dx / --pp-nb-dy）を足す
     * ・dx：マイナス＝左／プラス＝右
     * ・dy：マイナス＝上／プラス＝下
     * ・単位はどちらも「台紙に対する％」
     */
    left: calc(var(--pp-nb-x) + (var(--pp-nb-dx, 0) * 1%));
    top: calc(var(--pp-nb-y) + (var(--pp-nb-dy, 0) * 1%));
    height: var(--pp-nb-char-height);
    /* 幅はキャラ画像の縦横比まかせ */
    width: auto;
    transform: translate(-50%, -50%) rotate(var(--pp-nb-deg, 0deg));
}

/* 【場所】1人目（左）の位置・傾き */
.pp-nb-mock__slot--1 {
    --pp-nb-x: 61.1%;
    --pp-nb-y: 41.9%;
    --pp-nb-deg: -2.6deg;
}
/* 【場所】2人目（中央上）の位置・傾き */
.pp-nb-mock__slot--2 {
    --pp-nb-x: 73.1%;
    --pp-nb-y: 35.4%;
    --pp-nb-deg: 10.2deg;
}
/* 【場所】3人目（中央下）の位置・傾き */
.pp-nb-mock__slot--3 {
    --pp-nb-x: 71.6%;
    --pp-nb-y: 62.1%;
    --pp-nb-deg: 9deg;
}
/* 【場所】4人目（右）の位置・傾き */
.pp-nb-mock__slot--4 {
    --pp-nb-x: 83.7%;
    --pp-nb-y: 52.5%;
    --pp-nb-deg: -10.2deg;
}

/* 【場所】キャラ画像
   【意図】WooCommerce の img 指定より優先させる */
img.pp-nb-mock__chara,
.woocommerce img.pp-nb-mock__chara,
.woocommerce-page img.pp-nb-mock__chara,
.pp-product__thumb--notebook img.pp-nb-mock__chara {
    display: block;
    /* 高さ基準。幅は auto なので縦横比はそのまま */
    height: 100%;
    width: auto;
    max-width: none;
    max-height: none;
}

/* 【場所】キャラ画像の白フチ＋影（メイン）
   白フチは inc/notebook-mock.php の SVG フィルタ。
   drop-shadow の数字は「横 縦 ぼかし 色（濃さ）」 */
.pp-nb-mock--main .pp-nb-mock__chara {
    filter: url(#pp-nb-img-outline) drop-shadow(0 1px 1px rgba(120, 100, 90, 0.13));
}
/* 【場所】キャラ画像の白フチ＋影（サムネ） */
.pp-nb-mock--thumb .pp-nb-mock__chara {
    filter: url(#pp-nb-img-outline-mini) drop-shadow(0 0.5px 0.5px rgba(120, 100, 90, 0.13));
}

/* ============================================
   モック表示中 — 元の商品写真を隠す
   ============================================ */

/* 【場所】手帳モック表示中のメイン画像エリア */
.pp-product__main-image.is-nb-view {
    cursor: default;
}
/* 【場所】手帳モック表示中の元写真
   【意図】visibility で非表示（レイアウトは維持） */
.pp-product__main-image.is-nb-view .pp-product__main-img {
    visibility: hidden;
}