/* ==========================================================
   手帳モック
   台紙（mock.jpg）→ キャラ4人

   ※ 台紙もサムネも正方形（1:1）なので、下の % は
      mock.jpg の見た目とそのまま一致する
   ※ 位置・高さ・傾きの数字は、参考画像のピンクの短冊を実測した値
   ========================================================== */

.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;
}

/* サムネのボタン側（絶対配置の基準にする） */
.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. キャラの置き場所

   ・高さだけ指定して幅は auto ＝ 縦横比は絶対に崩れない
   ・left / top は「置き場所の中心」を指す
     （translate(-50%, -50%) で中心を合わせてから回している）
   ---------------------------------------------------------- */
.pp-nb-mock__slot {
    position: absolute;
    left: var(--pp-nb-x);
    top: var(--pp-nb-y);
    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 の `.woocommerce img` / `.pp-product__thumb img` より
   優先させるための指定（クラス付きなので !important は不要） */
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 の中）。
     このモックはキャラが小さいので、黄色いカード用より細くしてある。
     太さを変えたいときは、あちらの feMorphology の radius を触る
   ・drop-shadow の数字は「横ズレ 縦ズレ ぼかし 色（最後が濃さ）」
     浮かせたくないので、縦ズレとぼかしは1px前後に抑えている
     濃くしたいときは最後の 0.13 を上げる */
.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));
}

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