/* ==========================================================================
   個別商品ページ：縦積み構成（ビジュアル重視）
   ========================================================================== */

/* 1. レイアウト：左右に分けない（縦に積む） */
.single-products .product-header-flex {
    display: block !important; /* 強制的に縦並び */
    max-width: 900px !important; /* 広がりすぎないよう中央に寄せる */
    margin: 0 auto 60px !important;
}

/* 2. 画像：上部に大きく配置 */
.single-products .visual-column {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 40px !important;
}
.single-products .thumbnail-wrapper img {
    width: 100% !important;
    height: auto !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* 3. テキストエリア：商品名とコピーのバランス */
.single-products .info-column {
    width: 100% !important;
    text-align: center; /* 中央揃えで「カタログ」感を演出 */
}

/* 商品名（コピー含む）：大きすぎたのを抑制 */
.single-products .product-main-title {
    font-size: 1.8rem !important; /* 2.6remから大幅に縮小 */
    color: #1a1a1a !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    margin: 0 auto 20px !important;
    max-width: 800px;
}

/* ハンバーガーアイコン等の強制消去（継続） */
.single-products .product-main-title::before,
.single-products .product-main-title::after {
    content: none !important;
    display: none !important;
}

/* 説明文 */
.single-products .item-explanation {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    color: #444 !important;
    max-width: 700px;
    margin: 0 auto 40px !important;
    text-align: left; /* 文章は左読み */
}

/* 4. アクションボタン：中央配置 */
.single-products .action-unit {
    display: flex;
    flex-direction: row; /* PCでは横に2つ並べる */
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}
.single-products .btn-action {
    flex: 0 1 300px; /* ボタンの幅を適正に */
}

/* 5. モバイル対応：ボタンを縦に */
@media screen and (max-width: 767px) {
    .single-products .action-unit {
        flex-direction: column;
    }
    .single-products .btn-action {
        width: 100%;
    }
}

/* --- 商品画像の質感向上（ECサイト感を払拭） --- */

.single-products .thumbnail-wrapper {
    /* 真っ白な「キャンバス」ではなく、少し奥行きのある背景色へ */
    background: radial-gradient(circle, #fcfcfc 0%, #f0f2f5 100%) !important;
    border-radius: 4px;
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.single-products .thumbnail-wrapper img {
    /* 1. 質の悪い影を物理的に無効化 */
    box-shadow: none !important; 
    filter: none !important;
    
    /* 2. 背景の白を透明化して、グラデーションに馴染ませる */
    mix-blend-mode: multiply; 
    
    /* 3. 画像の大きさを適正化（端にくっつかないように） */
    max-width: 85% !important;
    height: auto !important;
    transform: scale(1.02); /* わずかに拡大して迫力を出す */
}

/* 4. 水平線のような細いラインを下に引き、ボートが「浮いている」のを防ぐ */
.single-products .thumbnail-wrapper::after {
    content: "";
    position: absolute;
    bottom: 25%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(1, 25, 118, 0.1), transparent);
    z-index: 1;
}