/*
 * アイパネル — オーダーフォーム(G / /products/detail/3)専用スタイル
 * handoff 074: モック https://ipanel-top-renewal.digden134.workers.dev/products/detail/3 に一致させる。
 *
 * 値はすべて **モックのビルド済み CSS(/assets/index-DFNCUc5Q.css)と computed style から実測**した。
 * 他ページへ波及させないため、**すべて `.ipanel-rtsub--orderform` 配下に限定**する
 * (body クラスは TwigSubscriber が `{% set body_class = 'product_page' %}` を置換して付与)。
 * クラスも `.ipnl-order-*` / `.ipnl-board*` で新設し、他ページと共有のものは使わない。
 *
 * ⚠ EC-CUBE のフォームロジックには一切触っていない。
 *   #classcategory_id1 / #classcategory_id2 / #quantity / #form1 / add-cart はそのまま。
 *   見た目だけを CSS と Twig マークアップで寄せている。
 *
 * モック側の色変数: --orange #f58213 / --ink #242321 / --muted #6e6a64 / --line #e6dfd4
 * ブレークポイント: モックと同じ順序(<=640px → <=760px)。同じプロパティは 760 側が勝つ。
 */

.ipanel-rtsub--orderform {
    --ipnlo-orange: #f58213;
    --ipnlo-orange-dark: #d96e08;
    --ipnlo-ink: #242321;
    --ipnlo-muted: #6e6a64;
    --ipnlo-line: #e6dfd4;
    --ipnlo-mincho: "游明朝", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

/* EC-CUBE 本体の中央パネル(max-width:1150px)を解除してモックと同じ全幅にする */
.ipanel-rtsub--orderform .ec-layoutRole__contents { max-width: none; }
.ipanel-rtsub--orderform .ec-layoutRole__main { padding-left: 0; padding-right: 0; }

/* ---- G-02 上部の価格説明パネル(モック .order-intro)---- */
.ipanel-rtsub--orderform .ipnl-order-intro {
    text-align: center;
    background: #fff;
    padding: 120px 7vw 85px;
}
.ipanel-rtsub--orderform .ipnl-order-priceLead {
    margin: 0;
    font-family: var(--ipnlo-mincho);
    font-size: clamp(19px, 2.1vw, 29px);
    font-weight: 500;
    line-height: 1.8;
    color: var(--ipnlo-ink);
}
.ipanel-rtsub--orderform .ipnl-order-priceLead strong { color: var(--ipnlo-orange); font-weight: 600; }
.ipanel-rtsub--orderform .ipnl-order-additionalCopy {
    color: var(--ipnlo-muted);
    margin: 32px auto 0;
    font-size: 13px;
    line-height: 2;
}
.ipanel-rtsub--orderform .ipnl-order-additionalCopy a {
    color: var(--ipnlo-orange);
    text-underline-offset: 4px;
    font-weight: 800;
    text-decoration: underline;
}
/* モックは desktop でこの改行を使わない(<=640px でだけ効かせる想定の逆で display:none) */
.ipanel-rtsub--orderform .ipnl-desktopBreak { display: none; }

/* ---- G-03〜G-09 のカード枠(モック .order-product / .order-options)---- */
.ipanel-rtsub--orderform .ec-productRole {
    background: #fff;
    width: min(920px, 86vw);
    margin: 0 auto;
    padding: 0 0 135px;
}
/* 商品画像スライダーと商品説明はモックに無いが、EC-CUBE の商品情報として残す。
   モックの「カード」に相当するのは注文フォームなので、フォーム側に枠を持たせる。 */
.ipanel-rtsub--orderform .ipnl-order-form {
    border: 1px solid var(--ipnlo-line);
    background: #fff;
    padding: 70px clamp(28px, 6vw, 82px);
    box-shadow: 0 24px 70px #4737270f;
}

/* 番号つき見出し(モック .order-option-heading) */
.ipanel-rtsub--orderform .ipnl-order-optionHeading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 27px;
}
.ipanel-rtsub--orderform .ipnl-order-optionHeading > span {
    border: 1px solid var(--ipnlo-orange);
    width: 48px; height: 48px;
    color: var(--ipnlo-orange);
    border-radius: 50%;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    font-family: var(--ipnlo-mincho);
    font-size: 15px;
}
.ipanel-rtsub--orderform .ipnl-order-optionHeading h2 {
    margin: 0;
    font-family: var(--ipnlo-mincho);
    font-size: 30px;
    font-weight: 600;
    color: var(--ipnlo-ink);
}

/* ---- 選択カード共通(モック .order-choice-grid)---- */
.ipanel-rtsub--orderform .ipnl-order-choiceGrid {
    display: grid;
    gap: 12px;
    margin: 0 0 62px;
}
.ipanel-rtsub--orderform .ipnl-order-choice { cursor: pointer; position: relative; }
.ipanel-rtsub--orderform .ipnl-order-choice > span {
    background: #fff;
    border: 1px solid #ddd4c8;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 96px;
    transition: border-color .2s, background .2s;
}
/* 選択中(モックは input:checked + span)。実装は JS が .is-selected を付ける */
.ipanel-rtsub--orderform .ipnl-order-choice.is-selected > span {
    border: 2px solid var(--ipnlo-orange);
    background: #fff9f0;
    box-shadow: 0 8px 22px #f5821314;
}

/* G-03 サイズ: 2×2(モック .size-choices) */
.ipanel-rtsub--orderform .ipnl-order-sizeChoices { grid-template-columns: repeat(2, 1fr); }
.ipanel-rtsub--orderform .ipnl-order-sizeChoices .ipnl-order-choice > span { flex-direction: column; }
.ipanel-rtsub--orderform .ipnl-order-sizeChoices b {
    /* モックの <b> は既定の bold(700)。600 にすると細く見えるので 700 に合わせる。 */
    font-family: var(--ipnlo-mincho); font-size: 24px; font-weight: 700; color: var(--ipnlo-ink);
}
.ipanel-rtsub--orderform .ipnl-order-sizeChoices small { color: #81786f; font-size: 11px; }
.ipanel-rtsub--orderform .ipnl-order-sizeChoices em {
    color: var(--ipnlo-orange); font-size: 12px; font-style: normal; font-weight: 800;
}

/* 特注サイズ(モック .custom-size-choice)= 全幅の破線バー */
.ipanel-rtsub--orderform .ipnl-order-customSize {
    color: #514c47;
    background: #fcfaf7;
    border: 1px dashed #c9bba9;
    border-radius: 6px;
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    min-height: 82px;
    text-decoration: none;
}
.ipanel-rtsub--orderform .ipnl-order-customSize b { font-size: 15px; }
.ipanel-rtsub--orderform .ipnl-order-customSize small { font-size: 11px; }
.ipanel-rtsub--orderform .ipnl-order-customSize > span { color: var(--ipnlo-orange); font-size: 11px; font-weight: 800; }

/* G-04 向き: 2 カラム + 板の絵(モック .direction-choices)
   モックは画像ではなく CSS の枠で板を描いている(縦 28×40 / 横 45×31・2px の黒枠) */
.ipanel-rtsub--orderform .ipnl-order-directionChoices { grid-template-columns: 1fr 1fr; }
.ipanel-rtsub--orderform .ipnl-order-directionChoices .ipnl-order-choice > span { min-height: 105px; }
.ipanel-rtsub--orderform .ipnl-order-directionChoices i {
    background: #fff; border: 2px solid #292724; display: block;
}
.ipanel-rtsub--orderform .ipnl-boardPortrait  { width: 28px; height: 40px; }
.ipanel-rtsub--orderform .ipnl-boardLandscape { width: 45px; height: 31px; }
.ipanel-rtsub--orderform .ipnl-order-directionChoices b { font-size: 13px; color: var(--ipnlo-ink); }

/* ---- G-05 / G-06 チェックカード(モック .order-check-grid)---- */
.ipanel-rtsub--orderform .ipnl-order-checkGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 16px;
}
.ipanel-rtsub--orderform .ipnl-order-check { cursor: pointer; position: relative; }
.ipanel-rtsub--orderform .ipnl-order-check > span {
    color: #625b54;
    background: #fff;
    border: 1px solid #ddd4c8;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    font-size: 12px;
    transition: border-color .2s, background .2s;
}
.ipanel-rtsub--orderform .ipnl-order-check > span i {
    color: transparent;
    border: 1px solid #cfc5ba;
    border-radius: 3px;
    display: grid;
    place-items: center;
    width: 18px; height: 18px;
    font-size: 11px;
    font-style: normal;
}
.ipanel-rtsub--orderform .ipnl-order-check.is-selected > span {
    border-color: var(--ipnlo-orange); color: #302b27; background: #fff9f0;
}
.ipanel-rtsub--orderform .ipnl-order-check.is-selected > span i {
    border-color: var(--ipnlo-orange); background: var(--ipnlo-orange); color: #fff;
}
/* G-06 取付部品は 2 カラム(モック .parts-choices) */
.ipanel-rtsub--orderform .ipnl-order-partsChoices {
    grid-template-columns: repeat(2, 1fr); margin-bottom: 62px;
}

/* 「その他」入力欄(モック .order-other-field)。選択時のみ表示する */
.ipanel-rtsub--orderform .ipnl-order-otherField { margin: 0 0 62px; display: none; }
.ipanel-rtsub--orderform .ipnl-order-otherField.is-show { display: block; }
.ipanel-rtsub--orderform .ipnl-order-otherField span {
    color: #8d847c; margin: 0 0 8px; font-size: 10px; display: block;
}
.ipanel-rtsub--orderform .ipnl-order-otherField input {
    background: #fff; border: 1px solid #ddd4c8; border-radius: 6px;
    width: 100%; height: 50px; padding: 0 15px; font-size: 12px;
}

/* ---- G-07 備考(モック .order-message)---- */
.ipanel-rtsub--orderform .ipnl-order-message { margin: 0 0 62px; }
.ipanel-rtsub--orderform .ipnl-order-message textarea {
    color: #514c47; width: 100%; font: inherit; resize: vertical;
    background: #fff; border: 1px solid #ddd4c8; border-radius: 6px;
    padding: 16px; font-size: 12px; line-height: 1.8;
}
.ipanel-rtsub--orderform .ipnl-order-message p {
    color: #9a9187; margin: 9px 0 0; font-size: 9px; line-height: 1.7;
}

/* ---- G-08 数量(モック .order-quantity)----
 * EC-CUBE の input#quantity を JS でこの中へ移設している。 */
.ipanel-rtsub--orderform .ipnl-order-quantity {
    background: #fff9f0;
    border: 1px solid #ddd4c8;
    border-radius: 6px;
    display: flex;
    align-items: baseline;
    margin: 0 0 12px;
    padding: 18px 22px;
}
/* handoff 075: 数量は 1 固定(readonly)。モックは `<strong>1</strong>` の素のテキストなので、
   入力欄に見えないように枠と数値スピナーを消して数字だけに見せる。 */
.ipanel-rtsub--orderform .ipnl-order-quantity input {
    color: var(--ipnlo-orange);
    font-family: var(--ipnlo-mincho);
    font-size: 34px;
    font-weight: 600;
    /* input は既定の size 属性で幅を持つので、数字 1 文字ぶんに固定して
       モックの `<strong>1</strong>` と同じ詰まり方にする(空白が空くのを防ぐ)。 */
    width: 1.1em;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    /* モックの strong は 34px / 高さ 53px 相当。1.2 だと 10px 低くなるので合わせる。 */
    line-height: 1.55;
    pointer-events: none;              /* 1 固定なので操作させない */
    -moz-appearance: textfield;
    appearance: textfield;
}
.ipanel-rtsub--orderform .ipnl-order-quantity input::-webkit-outer-spin-button,
.ipanel-rtsub--orderform .ipnl-order-quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
/* 「追加する」の連打防止(AJAX 中は薄くする) */
.ipanel-rtsub--orderform .ipnl-order-addButton.is-busy { opacity: .5; pointer-events: none; }
.ipanel-rtsub--orderform .ipnl-order-quantityUnit {
    color: var(--ipnlo-ink); margin-left: 8px; font-size: 13px; font-weight: 800;
}
.ipanel-rtsub--orderform .ipnl-order-quantityNote {
    color: #8f867d; margin: 0 0 65px; font-size: 10px; line-height: 1.8;
}
.ipanel-rtsub--orderform .ipnl-order-quantityNote a,
.ipanel-rtsub--orderform .ipnl-order-confirmation a {
    color: var(--ipnlo-orange); text-underline-offset: 3px;
    margin-left: .35em; font-weight: 800; text-decoration: underline;
}

/* ---- G-09 デザイン校正の 4 段カード(モック .order-confirmation)---- */
.ipanel-rtsub--orderform .ipnl-order-confirmation {
    background: #faf7f2;
    border: 1px solid #eadfce;
    margin: 0 0 30px;
    padding: 34px 30px 28px;
}
.ipanel-rtsub--orderform .ipnl-order-flowTitle {
    text-align: center; margin: 0 0 28px;
    font-family: var(--ipnlo-mincho); font-size: 21px; font-weight: 700; color: var(--ipnlo-ink);
}
.ipanel-rtsub--orderform .ipnl-order-reviewFlow {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
    margin: 0; padding: 0; list-style: none;
}
.ipanel-rtsub--orderform .ipnl-order-reviewFlow li {
    text-align: center; background: #fff; border: 1px solid #e2d8cb; border-radius: 6px;
    min-height: 180px; padding: 22px 16px 18px; position: relative;
}
/* カード間のオレンジ矢印 */
.ipanel-rtsub--orderform .ipnl-order-reviewFlow li:not(:last-child)::after {
    content: "→"; color: var(--ipnlo-orange); font-size: 22px; font-weight: 400;
    position: absolute; top: 50%; right: -24px; transform: translateY(-50%);
}
.ipanel-rtsub--orderform .ipnl-order-reviewFlow li > span {
    background: var(--ipnlo-orange); color: #fff; border-radius: 50%;
    display: grid; place-items: center; width: 38px; height: 38px;
    margin: 0 auto 16px; font-family: var(--ipnlo-mincho); font-size: 13px;
}
.ipanel-rtsub--orderform .ipnl-order-reviewFlow li > p {
    color: #625b54; margin: 0; font-size: 11px; font-weight: 700; line-height: 1.8;
}
.ipanel-rtsub--orderform .ipnl-order-reviewFlow li > p small {
    color: #9a7160; margin-top: 8px; font-size: 9px; font-weight: 500; line-height: 1.6; display: block;
}
.ipanel-rtsub--orderform .ipnl-order-flowNote {
    color: #8b8178; text-align: center; border-top: 1px solid #e3d9ce;
    margin: 22px 0 0; padding-top: 18px; font-size: 10px; line-height: 1.8;
}

/* ---- G-10 カートに入れる(モック .order-cart-button)----
 * EC-CUBE 本体の .ec-blockBtn--action.add-cart を上書きする(赤ピル → オレンジ矩形)。 */
/* handoff 092 ①: 「カートに入れる」と「お気に入りに追加」をセンター配置し、間隔を広げる。
 * 看板市場様フィードバック:「カートと、お気に入りに追加はもう少し間をあけてセンター配置」。
 * 変更前は左寄せ(left=336 / 幅 470)で、上のオプション群(中央寄せ・幅 618)と軸がずれていた。
 * ボタンの幅は変えず、中央に寄せるだけにとどめる。 */
.ipanel-rtsub--orderform .ec-productRole__btn {
    margin: 0 auto;
    padding-top: 5px;
}
.ipanel-rtsub--orderform .ec-productRole__btn .add-cart,
.ipanel-rtsub--orderform .ec-productRole__btn .ec-blockBtn--action {
    background: var(--ipnlo-orange);
    border-color: var(--ipnlo-orange);
    color: #fff;
    border-radius: 5px;
    width: 100%;
    height: auto;
    padding: 22px 26px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    box-shadow: 0 14px 32px #f5821333;
}
.ipanel-rtsub--orderform .ec-productRole__btn .add-cart:hover {
    background: var(--ipnlo-orange-dark); border-color: var(--ipnlo-orange-dark); color: #fff;
}

/* ---- G-11 お気に入り(モック .order-favorite)+ 追加する(.order-add-button)---- */
.ipanel-rtsub--orderform .ec-productRole__btn .ec-blockBtn--cancel {
    color: #615b55;
    background: #fff;
    border: 1px solid #d7cec4;
    border-radius: 5px;
    width: 100%;
    height: auto;
    /* handoff 092 ①: カートとの間隔を 13px → 32px に広げる */
    margin-top: 32px;
    padding: 17px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}
.ipanel-rtsub--orderform .ipnl-order-addButton {
    border: 1px solid var(--ipnlo-orange);
    width: 100%;
    color: var(--ipnlo-orange);
    background: #fff9f0;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 13px;
    padding: 18px;
    font-size: 13px;
    text-decoration: none;
}
.ipanel-rtsub--orderform .ipnl-order-addButton > span { font-size: 20px; }
.ipanel-rtsub--orderform .ipnl-order-addButton b { font-weight: 900; }

/* ---- G-12 求人費用プロモ帯(モック .order-help)+ 送料の細帯(.quiet-shipping-link)---- */
.ipanel-rtsub--orderform .ipnl-order-help {
    text-align: center; background: #f7f3ed; padding: 120px 7vw;
}
.ipanel-rtsub--orderform .ipnl-order-help h2 {
    margin: 14px 0 24px;
    font-family: var(--ipnlo-mincho);
    font-size: clamp(40px, 4.5vw, 64px);
    font-weight: 600; line-height: 1.45; color: var(--ipnlo-ink);
}
.ipanel-rtsub--orderform .ipnl-order-help p { color: var(--ipnlo-muted); font-size: 13px; }
.ipanel-rtsub--orderform .ipnl-order-monthlyCost {
    color: var(--ipnlo-ink) !important;
    margin: 0;
    font-family: var(--ipnlo-mincho);
    font-size: clamp(40px, 4.5vw, 64px) !important;
    line-height: 1.55;
}
.ipanel-rtsub--orderform .ipnl-order-monthlyCost strong {
    color: var(--ipnlo-orange); margin-left: .25em; font-size: 1em; font-weight: 600; display: inline-block;
}
.ipanel-rtsub--orderform .ipnl-order-shippingLink {
    text-align: center; background: #fff; padding: 25px 7vw 27px;
}
.ipanel-rtsub--orderform .ipnl-order-shippingLink a {
    color: #8f877e; letter-spacing: .03em;
    border-bottom: 1px solid #d8d1c8;
    display: inline-flex; align-items: center; gap: 12px;
    padding-bottom: 4px; font-size: 11px; text-decoration: none;
    transition: color .2s, border-color .2s;
}
.ipanel-rtsub--orderform .ipnl-order-shippingLink a:hover {
    color: var(--ipnlo-orange); border-color: var(--ipnlo-orange);
}
.ipanel-rtsub--orderform .ipnl-order-shippingLink span { font-size: 13px; }

/* ---- モックのブレークポイント(<=640px / <=760px)に合わせる ---- */
@media (max-width: 640px) {
    .ipanel-rtsub--orderform .ipnl-order-intro { padding: 78px 22px 62px; }
    .ipanel-rtsub--orderform .ipnl-desktopBreak { display: none; }
    .ipanel-rtsub--orderform .ec-productRole { width: calc(100% - 28px); padding-bottom: 90px; }
    .ipanel-rtsub--orderform .ipnl-order-form { box-shadow: none; border-radius: 10px; padding: 38px 15px; }
    .ipanel-rtsub--orderform .ipnl-order-optionHeading { align-items: flex-start; gap: 13px; }
    .ipanel-rtsub--orderform .ipnl-order-optionHeading > span { flex-basis: 42px; width: 42px; height: 42px; }
    .ipanel-rtsub--orderform .ipnl-order-optionHeading h2 { font-size: 26px; }
    .ipanel-rtsub--orderform .ipnl-order-choiceGrid { margin-bottom: 48px; }
    .ipanel-rtsub--orderform .ipnl-order-checkGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ipanel-rtsub--orderform .ipnl-order-check > span { padding: 8px 5px; font-size: 11px; }
    .ipanel-rtsub--orderform .ipnl-order-confirmation { padding: 27px 14px 24px; }
    .ipanel-rtsub--orderform .ipnl-order-reviewFlow { grid-template-columns: 1fr; }
    .ipanel-rtsub--orderform .ipnl-order-reviewFlow li { min-height: 0; padding: 20px 16px; }
    /* 縦積みになるので矢印を下向きに置き換える(モックと同じ) */
    .ipanel-rtsub--orderform .ipnl-order-reviewFlow li:not(:last-child)::after {
        content: "↓"; inset: auto auto -26px 50%; transform: translate(-50%);
    }
    .ipanel-rtsub--orderform .ipnl-order-help { padding: 78px 22px; }
    .ipanel-rtsub--orderform .ipnl-order-monthlyCost { font-size: clamp(37px, 11vw, 48px) !important; }
}
/* モックの <=760px 指定。<=640px より後に置く(モックの順序と同じ)。 */
@media (max-width: 760px) {
    .ipanel-rtsub--orderform .ipnl-order-intro { padding: 78px 22px 62px; }
    .ipanel-rtsub--orderform .ec-productRole { width: calc(100% - 28px); padding-bottom: 90px; }
    .ipanel-rtsub--orderform .ipnl-order-form { box-shadow: none; border-radius: 10px; padding: 38px 15px; }
    .ipanel-rtsub--orderform .ipnl-order-checkGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ipanel-rtsub--orderform .ipnl-order-help { padding: 78px 22px; }
}