/*
 * アイパネル 共通ブロック(デスクトップナビ帯 + モバイル 3 アイコン + 2 drawer + 正式フッター)スタイル
 *
 * Phase 10c / handoff 004 で実装。
 * CommonBlocksSubscriber が setSource で挿入する HTML 用のスタイル定義。
 *
 * 修正履歴(handoff 004):
 *   - v2 (F-1 fix, db83fa0): モバイル幅で nav 帯消失する問題を防御層 + 注入位置変更で解決
 *   - v3 (F-2 fix, 5cf5c05): EC-CUBE drawer 統合方針で `.ipanel-drawerNav` + ::before 追加
 *   - v4 (F-3 + F-4 fix, 本ファイル): F-2 方針を撤回、3 アイコン + 2 drawer 専用構造に置換
 *     - F-2 由来の `.ipanel-drawerNav` + `.ec-drawerRole .ec-headerLink__list::before` を **撤去**
 *     - `.ipanel-mobileNav`(3 アイコンバー) + `.ipanel-drawer`(2 drawer 専用) を新規追加
 *     - EC-CUBE 既定 `.ec-headerRole__navSP`(三本線 fa-bars)を mobile で `display: none !important`
 *     - 「アカウント・カート」見出しは drawer 内 h2 として明示
 *     - F-3「全ての商品」トースト位置問題は drawer 構造完全置換により自然解消
 *
 * カラーは Phase 10a の `:root` 変数を再利用(SSOT、本ファイル先頭にも複製、Phase 10c 整理タスクで共通化予定)。
 *
 * レスポンシブ breakpoint(F-4 で 767 → 1199 に統一):
 *   - mobile: 〜 1199px(3 アイコン + 2 drawer 表示、デスクトップ用ナビ帯と EC-CUBE 既定ハンバーガー非表示)
 *   - desktop: 1200px 〜(デスクトップ用ナビ帯横並び表示、3 アイコン非表示)
 */

:root {
    --ipanel-primary: #1a1a1a;
    --ipanel-primary-dark: #000000;
    --ipanel-accent: #e63312;
    --ipanel-accent-dark: #c02a0e;
    --ipanel-bg-soft: #F5F2EA;
    --ipanel-text: #1A1A1A;
    --ipanel-text-muted: #5A5A5A;
    --ipanel-border: #E4DDC9;
    --ipanel-white: #FFFFFF;
    --ipanel-radius: 8px;
    --ipanel-shadow-sm: 0 1px 3px rgba(20, 37, 68, 0.08);
    --ipanel-shadow-md: 0 8px 24px rgba(20, 37, 68, 0.15);
}

/* ============================================================================
 * (1) デスクトップ用横並びナビ帯(1200px 以上で表示)
 * ========================================================================== */

.ipanel-globalNav {
    /*
     * F-1 防御層(維持): position: relative + z-index で他要素の下に隠れない
     * F-4: mobile (<=1199px) では下部 @media で display: none に上書き
     */
    display: block;
    position: relative;
    z-index: 50;
    background-color: var(--ipanel-bg-soft);
    border-top: 1px solid var(--ipanel-border);
    border-bottom: 1px solid var(--ipanel-border);
}

.ipanel-globalNav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    max-width: var(--ipanel-container-max, 1200px);
    margin-inline: auto;
}

.ipanel-globalNav__list li {
    margin: 0;
}

.ipanel-globalNav__link {
    display: block;
    padding: 14px 18px;
    color: var(--ipanel-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.ipanel-globalNav__link:hover,
.ipanel-globalNav__link:focus {
    color: var(--ipanel-accent-dark);
    border-bottom-color: var(--ipanel-accent);
    background-color: var(--ipanel-white);
    text-decoration: none;
}

/* mobile (<=1199px): デスクトップナビ帯を完全非表示 */
@media (max-width: 1199px) {
    .ipanel-globalNav {
        display: none;
    }
}

/* ============================================================================
 * (2) モバイル用 3 アイコン header(三本線 / 人 / カート)
 *     1199px 以下で position: fixed top-right に表示
 * ========================================================================== */

.ipanel-mobileNav {
    /* デフォルト(デスクトップ)は非表示、下部 @media で mobile 時のみ flex 表示 */
    display: none;
}

@media (max-width: 1199px) {
    .ipanel-mobileNav {
        display: flex;
        position: fixed;
        top: 8px;
        right: 8px;
        z-index: 1100;     /* EC-CUBE 既定 header と drawer の上に出す */
        gap: 4px;
        background-color: rgba(255, 255, 255, 0.92);
        border: 1px solid var(--ipanel-border);
        border-radius: var(--ipanel-radius);
        box-shadow: var(--ipanel-shadow-sm);
        padding: 4px;
    }

    .ipanel-mobileNav__btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;     /* Apple HIG 44px / Material 48px をクリア */
        background: none;
        border: none;
        cursor: pointer;
        color: var(--ipanel-primary);
        font-size: 10px;
        font-weight: 600;
        text-decoration: none;
        border-radius: 6px;
        transition: background-color 0.15s ease, color 0.15s ease;
        gap: 2px;
        padding: 4px 2px;
    }

    .ipanel-mobileNav__btn:hover,
    .ipanel-mobileNav__btn:focus,
    .ipanel-mobileNav__btn[aria-expanded="true"] {
        background-color: var(--ipanel-bg-soft);
        color: var(--ipanel-accent-dark);
        text-decoration: none;
    }

    .ipanel-mobileNav__icon {
        font-size: 20px;
        line-height: 1;
    }

    .ipanel-mobileNav__label {
        font-size: 10px;
        line-height: 1.1;
        letter-spacing: 0.02em;
    }

    /*
     * drawer 展開中は 3 アイコンバーを非表示。
     * 理由:
     *   - account drawer(右スライドイン)の close ボタンと位置重なり、click intercepts が発生
     *   - UX 的にも drawer 内に close ボタンがあれば 3 アイコンバーは冗長
     * JS が body に `ipanel-drawer-open` を付与するタイミングで自動的に非表示化される。
     */
    body.ipanel-drawer-open .ipanel-mobileNav {
        display: none;
    }
}

/* ============================================================================
 * (3) EC-CUBE 既定 mobile ヘッダー要素一式を非表示(三本線 / ハート / カート / drawer 本体)
 *     F-4: 独自 3 アイコンに置換するため、EC-CUBE 標準ハンバーガーを mobile で抑止
 *     F-6: 三本線以外にも login.twig(ハート/鍵/人)+ cart.twig(カート)が背景に透けて見える
 *          F-4 時の対応漏れだったため、本ラウンドで Block/header.twig 内の関連要素を網羅的に hide
 *
 * 対象 selector(EC-CUBE 4.2 `src/Eccube/Resource/template/default/Block/header.twig` に実在):
 *   - `.ec-headerRole__navSP`       Block/nav_sp.twig 親 — 三本線(fa-bars)
 *   - `.ec-headerNavSP`             nav_sp.twig 内 — 三本線アイコンラッパ
 *   - `.ec-headerNaviRole__nav`     Block/login.twig 親 — ハート / 鍵 / 人(my 3 アイコンと重複)
 *   - `.ec-headerRole__cart`        Block/cart.twig 親 — カート(my カートアイコンと重複)
 *   - `.ec-drawerRole`              EC-CUBE 既定 drawer 本体(独自 drawer に置換済、念のため抑止)
 *   - `.ec-drawerRoleClose`         EC-CUBE 既定 drawer 閉じるボタン
 *   - `.ec-overlayRole`             EC-CUBE 既定 drawer overlay(独自 overlay に置換済、抑止)
 *
 * desktop(>=1200px)では EC-CUBE 既定の `.ec-headerNaviRole__nav` + `.ec-headerRole__cart` を維持
 * (Phase 10c desktop は横並び 7 項目ナビのみ追加、EC-CUBE 標準ヘッダーアイコン群はそのまま表示)。
 *
 * F-7 追加: ヘッダーバー高さ確保 + ロゴ「看板市場」と 3 アイコン重なり解消
 *   - `.ec-layoutRole__header { min-height: 80px }` でヘッダーバーが 3 アイコン(62px高 + 16px余白)を
 *     視覚的に内包できる高さに(松浦さん 5th ラウンド指摘「ヘッダーバー自体は通常の高さ」への対応)
 *   - `.ec-headerTitle { padding-right: 180px }` で中央寄せロゴが 3 アイコン panel(右側 ~180px)と
 *     重ならない位置に左シフト(実測:5th ラウンド時点でロゴ右端 x=355、panel 左端 x=193、
 *     162px 重なり → padding 適用で左シフトし overlap=0 になる設計)
 *   - `box-sizing: border-box` でヘッダー全体幅維持(padding が viewport overflow しない)
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * handoff 017: ヘッダーに「アイパネル」ロゴ画像を表示し、モック(ipanel-combined.html)の
 * 1 段ヘッダー(ロゴ左 + ナビ 7 + カート右)に合わせる。016 の「店舗名を消すだけ」から格上げ。
 *   - logo.twig override が .ec-headerTitle にロゴ画像を出す(shop_name テキストは廃止・DB 値は不変)。
 *   - desktop(>=1200px): EC-CUBE 既定ヘッダー(.ec-layoutRole__header=検索窓/会員メニュー/既定
 *     ロゴ・カート)を非表示にし、注入 .ipanel-deskHeader(ロゴ+ナビ+カート)を 1 段で表示。
 *     ※松浦さん判断(handoff 017): 検索窓・会員メニューは desktop ヘッダーから撤去しモックに一致。
 *   - mobile(<=1199px): EC-CUBE 既定ヘッダーにロゴを左寄せ表示(3 アイコン x>=193 と重ならない高さ)。
 *     .ipanel-deskHeader は非表示、従来の 3 アイコン + drawer を維持。
 * -------------------------------------------------------------------------- */

/* ロゴ画像共通リセット */
.ipanel-headerLogo { display: inline-block; line-height: 0; }
.ipanel-headerLogo img,
.ipanel-deskHeader__logo img { width: auto; display: block; }

/* 注入 1 段ヘッダーは既定非表示。下の @media(>=1200px) でのみ flex 表示 */
.ipanel-deskHeader { display: none; }

/* desktop: 1 段ヘッダー(ロゴ左 + ナビ + カート右) */
@media (min-width: 1200px) {
    /* EC-CUBE 既定ヘッダー(検索窓・会員メニュー・既定ロゴ/カート)は desktop では隠す */
    .ec-layoutRole__header { display: none; }

    /* handoff 019: モック同様スクロール追従(sticky)。sticky は flow 上に領域を保つため
       後続コンテンツの潜り込みは起きない。ページ内アンカーがヘッダー高に隠れないよう
       scroll-padding-top をヘッダー高ぶん確保する。mobile は従来の fixed 3 アイコン/drawer のまま。 */
    html { scroll-padding-top: 72px; }

    .ipanel-deskHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 0 40px;
        min-height: 64px;
        background-color: var(--ipanel-white);
        border-bottom: 1px solid var(--ipanel-border);
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .ipanel-deskHeader__logo { flex: 0 0 auto; line-height: 0; }
    .ipanel-deskHeader__logo img { height: 44px; }

    /* ナビ帯を 1 段ヘッダーに統合(帯の背景/枠線は解除し横並びのみ活かす) */
    .ipanel-deskHeader .ipanel-globalNav {
        flex: 1 1 auto;
        background-color: transparent;
        border: 0;
        position: static;
        z-index: auto;
    }
    .ipanel-deskHeader .ipanel-globalNav__list {
        justify-content: center;
        flex-wrap: nowrap;
    }

    /* handoff 032: 右端のアクションアイコン群(アカウント + カート)。等間隔で横並び。 */
    .ipanel-deskHeader__actions {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 20px;
    }

    /* handoff 032: アカウント(人)アイコンとカートは同挙動・同色 */
    .ipanel-deskHeader__account,
    .ipanel-deskHeader__cart {
        flex: 0 0 auto;
        color: var(--ipanel-primary);
        line-height: 1;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }
    /* handoff 034 修正1: fa-user は fa-shopping-cart よりグリフが小さく見えるため、
       font-size を個別調整して視覚サイズを揃える(カート 22px に対し人 25px)。 */
    .ipanel-deskHeader__cart { font-size: 22px; }
    .ipanel-deskHeader__account { font-size: 25px; }
    .ipanel-deskHeader__account:hover,
    .ipanel-deskHeader__account:focus,
    .ipanel-deskHeader__cart:hover,
    .ipanel-deskHeader__cart:focus { color: var(--ipanel-accent-dark); }
}

@media (max-width: 1199px) {
    .ec-headerRole__navSP,
    .ec-headerNavSP,
    .ec-headerNaviRole__nav,
    .ec-headerRole__cart,
    .ec-drawerRole,
    .ec-drawerRoleClose,
    .ec-overlayRole {
        display: none !important;
    }

    /* 注入 1 段ヘッダーは mobile では非表示(3 アイコン + drawer を使う) */
    .ipanel-deskHeader { display: none; }

    /* F-7: ヘッダーバー高さ確保(mobile 3 アイコン用に維持) */
    .ec-layoutRole__header {
        min-height: 80px;
    }
    /* mobile ロゴ: 左寄せ・内容幅に縮める・3 アイコン(x>=193)と重ならない高さ(~22px→幅~147px)。
       EC-CUBE 既定の中央寄せ(flex center / margin auto / 幅いっぱい)を上書きして左端に固定する。 */
    .ec-headerRole {
        justify-content: flex-start !important;
        padding-top: 0;
        padding-left: 16px;
    }
    .ec-headerRole__title {
        margin: 0 !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }
    .ec-headerTitle,
    .ec-headerTitle__title {
        margin: 0 !important;
        width: auto !important;
        text-align: left !important;
    }
    .ipanel-headerLogo { margin: 0 !important; }
    .ipanel-headerLogo img { height: 22px; }
}

/* ============================================================================
 * (4) drawer(ナビ専用 + アカウント・カート専用)
 *     mobile (<=1199px) のみ表示、デフォルトは画面外、is-open でスライドイン
 * ========================================================================== */

.ipanel-drawer__overlay {
    /* mobile 時のみ表示(下部 @media)、JS で hidden 属性をトグル */
    display: none;
}

.ipanel-drawer {
    /* デフォルト(デスクトップ)非表示、下部 @media で mobile 時に表示準備 */
    display: none;
}

@media (max-width: 1199px) {
    .ipanel-drawer__overlay {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1050;
        opacity: 1;
        transition: opacity 0.2s ease;
    }

    .ipanel-drawer__overlay[hidden] {
        display: none;
    }

    .ipanel-drawer {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        width: min(85vw, 360px);
        background-color: var(--ipanel-white);
        z-index: 1060;
        box-shadow: var(--ipanel-shadow-md);
        overflow-y: auto;
        transition: transform 0.25s ease;
        -webkit-overflow-scrolling: touch;
    }

    /* ナビ drawer は左からスライドイン */
    .ipanel-drawer--nav {
        left: 0;
        transform: translateX(-100%);
    }
    .ipanel-drawer--nav.is-open {
        transform: translateX(0);
    }

    /* アカウント drawer は右からスライドイン */
    .ipanel-drawer--account {
        right: 0;
        transform: translateX(100%);
    }
    .ipanel-drawer--account.is-open {
        transform: translateX(0);
    }

    .ipanel-drawer__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        background-color: var(--ipanel-bg-soft);
        border-bottom: 1px solid var(--ipanel-border);
    }

    .ipanel-drawer__title {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--ipanel-primary);
        letter-spacing: 0.06em;
    }

    .ipanel-drawer__close {
        background: none;
        border: none;
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ipanel-primary);
        font-size: 18px;
        border-radius: 6px;
        transition: background-color 0.15s ease;
    }

    .ipanel-drawer__close:hover,
    .ipanel-drawer__close:focus {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .ipanel-drawer__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ipanel-drawer__list li {
        margin: 0;
    }

    .ipanel-drawer__link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        color: var(--ipanel-primary);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid var(--ipanel-border);
        min-height: 48px;
        box-sizing: border-box;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .ipanel-drawer__link:hover,
    .ipanel-drawer__link:focus {
        background-color: var(--ipanel-bg-soft);
        color: var(--ipanel-accent-dark);
        text-decoration: none;
    }

    .ipanel-drawer__linkIcon {
        width: 20px;
        font-size: 16px;
        color: var(--ipanel-accent);
        text-align: center;
    }

    /* drawer が開いている間は body のスクロールを止める */
    body.ipanel-drawer-open {
        overflow: hidden;
    }
}

/* ============================================================================
 * 正式フッター(3 カラム + 著作権)
 * ========================================================================== */

.ipanel-footer {
    background-color: var(--ipanel-primary);
    color: var(--ipanel-white);
    padding-block: clamp(40px, 6vw, 64px) clamp(20px, 3vw, 32px);
    padding-inline: 16px;
    margin-top: 48px;
}

.ipanel-footer__inner {
    max-width: var(--ipanel-container-max, 1200px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: clamp(24px, 4vw, 48px);
}

.ipanel-footer__col {
    min-width: 0;
}

.ipanel-footer__col--brand {
    /* brand カラム(最左、SNS含む)*/
}

.ipanel-footer__brandName {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--ipanel-white);
    letter-spacing: 0.04em;
}

/* handoff 050 Part A: フッターの店名見出しを公式ロゴ画像へ差し替え */
.ipanel-footer__logo {
    width: 200px;
    max-width: 72%;
    height: auto;
    display: block;
    margin: 0 0 14px;
}
.ipanel-footer__ailink { display: inline-block; margin: 0 0 12px; }
.ipanel-footer__ailink img { height: 24px; width: auto; display: block; }

/* handoff 050 Part A: ヘッダー/モバイルのマイページ・カートを公式PNGアイコンへ */
.ipanel-deskHeader__iconImg { height: auto; display: block; }
.ipanel-deskHeader__account .ipanel-deskHeader__iconImg { width: 27px; }
.ipanel-deskHeader__cart .ipanel-deskHeader__iconImg { width: 25px; }
.ipanel-mobileNav__iconImg { width: 24px; height: auto; display: block; }

.ipanel-footer__brandLead {
    font-size: clamp(13px, 1.3vw, 14px);
    line-height: 1.7;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.85);
}

.ipanel-footer__sns {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ipanel-footer__sns a {
    display: inline-block;
    padding: 6px 12px;
    color: var(--ipanel-white);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--ipanel-radius);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.ipanel-footer__sns a:hover {
    background-color: rgba(200, 168, 91, 0.4);
    color: var(--ipanel-white);
    text-decoration: none;
}

.ipanel-footer__colTitle {
    font-size: clamp(14px, 1.4vw, 15px);
    font-weight: 700;
    color: var(--ipanel-accent);
    margin: 0 0 14px;
    letter-spacing: 0.04em;
}

.ipanel-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ipanel-footer__list li {
    margin-bottom: 8px;
}

.ipanel-footer__list a {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(13px, 1.3vw, 14px);
    text-decoration: none;
    transition: color 0.15s ease;
}

.ipanel-footer__list a:hover {
    color: var(--ipanel-accent);
    text-decoration: underline;
}

.ipanel-footer__bottom {
    max-width: var(--ipanel-container-max, 1200px);
    margin-inline: auto;
    margin-top: clamp(24px, 4vw, 40px);
    padding-top: clamp(16px, 3vw, 24px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
}

.ipanel-footer__copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 8px;
}

.ipanel-footer__note {
    font-size: 11px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    max-width: 720px;
    margin-inline: auto;
}

/* mobile / tablet 〜 767px — フッター 1 カラム積み上げ */
@media (max-width: 767px) {
    .ipanel-footer__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ipanel-footer__col--brand {
        text-align: center;
    }

    .ipanel-footer__sns {
        justify-content: center;
    }
}

/* =====================================================================
 * handoff 026: お問い合わせ(EC-CUBE 標準 Contact)の体裁のみモック寄せ
 *   - twig / フォーム項目 / 送信・CSRF は一切変更しない。CSS のみ(全ページ注入の本ファイルで .ec-contactRole を装飾)。
 *   - モックのカード + 赤アクセント調に寄せる。会社情報ストリップ等の追加コンテンツは twig 変更が要るため別途。
 * ===================================================================== */
.ec-contactRole { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.ec-contactRole .ec-pageHeader h1 {
    font-family: 'Noto Serif JP', 'Yu Mincho', serif;
    color: #1a1a1a; border-bottom: 3px solid var(--ipanel-accent);
    display: inline-block; padding-bottom: 12px; margin-bottom: 24px;
}
.ec-contactRole form {
    background: #fff; border-radius: 14px; padding: 28px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}
.ec-contactRole .ec-label { font-weight: 700; color: #333; }
/* 必須バッジ(EC-CUBE の .ec-required)を赤に */
.ec-contactRole .ec-required { color: var(--ipanel-accent); }
/* 入力 focus を赤に */
.ec-contactRole input:focus,
.ec-contactRole select:focus,
.ec-contactRole textarea:focus {
    border-color: var(--ipanel-accent);
    outline-color: var(--ipanel-accent);
}
/* 確認ボタンを赤 CTA に(EC-CUBE 標準の .ec-blockBtn--action を上書き) */
.ec-contactRole .ec-blockBtn--action {
    background-color: var(--ipanel-accent);
    border-color: var(--ipanel-accent);
    color: #fff;
}
.ec-contactRole .ec-blockBtn--action:hover {
    background-color: var(--ipanel-accent-dark);
    border-color: var(--ipanel-accent-dark);
}

/* =====================================================================
 * handoff 029: 注文(商品詳細)ページのみ、左の商品画像カラム(メイン+サムネイル)を非表示にし、
 *   右の選択フォーム(IpanelOrderExtension)を中央寄せ・快適な最大幅に整える。
 *   - body#page_product_detail でスコープ(商品詳細ページのみ。一覧・カート等の商品画像は不変)。
 *   - CSS のみ(twig 非変更)。カート投入・価格計算のロジックには不接触。
 * ===================================================================== */
body#page_product_detail .ec-productRole .ec-grid2 {
    display: block;      /* 2 カラム(flex)を解除 */
}
body#page_product_detail .ec-productRole .ec-grid2 > .ec-grid2__cell:first-child {
    display: none !important;   /* 左=商品画像スライダーを非表示。EC-CUBE 側 display 指定に勝つため !important */
}
body#page_product_detail .ec-productRole .ec-grid2 > .ec-grid2__cell:last-child {
    width: 100%;
    max-width: 800px;    /* handoff 029: 720〜820px 目安 */
    margin-left: auto;
    margin-right: auto;
    float: none;
}