/* 手機版の注文ページ：商品ごとの「直接注文」レイアウト（変形サイズカードの注文ページと同じ見た目）。
   js/mobile-order-direct.js が body に oc-direct を付けたときだけ有効になる。
   用途・素材の選択は商品ページ側で済んでいる前提で、デザイン → 厚み → 枚数 → 加工 の順に並べる。 */

html body.oc-direct { background: #fff !important; }
html body.oc-direct .m-page { max-width: 560px !important; background: #fff !important; padding-bottom: 150px !important; }

/* 進行バー・左のアンカー・用途／素材の選択は出さない */
html body.oc-direct .m-steps,
html body.oc-direct .m-anchor-rail,
html body.oc-direct:not(.oc-pick) #sec-usage,
html body.oc-direct #sec-material,
html body.oc-direct .m-top-bar { display: none !important; }
html body.oc-direct .m-config-body { display: block !important; }
html body.oc-direct .m-config-sections { padding: 0 20px !important; }

/* ヒーロー：商品名・価格・画像 */
html body.oc-direct .m-product-banner { margin: 0 !important; padding: 28px 20px 8px !important; background: #fff !important; border-radius: 0 !important; box-shadow: none !important; max-width: none !important; }
html body.oc-direct .m-product-banner-top { display: flex !important; flex-direction: column !important; gap: 0 !important; }
html body.oc-direct .m-product-banner-top > div { order: 1; }
html body.oc-direct .m-product-banner-top img { order: 2; display: block !important; width: min(300px, 78%) !important; height: auto !important; max-height: 220px !important; margin: 26px auto 8px !important; object-fit: contain !important; border-radius: 0 !important; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .18)); }
html body.oc-direct .m-product-banner-name { margin: 0 !important; color: #1d1d1f !important; font-size: 28px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -.03em !important; }
html body.oc-direct #ocPrice { margin: 10px 0 0; color: #1d1d1f; font-size: 17px; font-weight: 500; }
html body.oc-direct .m-product-banner-badges { display: flex; flex-wrap: wrap; gap: 8px !important; margin-top: 14px !important; }
html body.oc-direct .m-product-banner-badges span { padding: 6px 12px !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #fff !important; color: #1d1d1f !important; font-size: 12.5px !important; font-weight: 500 !important; }
html body.oc-direct .m-product-banner-badges span:nth-child(1),
html body.oc-direct .m-product-banner-badges span:nth-child(2) { display: none !important; }
html body.oc-direct .m-product-banner-badges #bannerLeadTime::before { content: "\2713\00a0"; color: #0071e3; }

/* 各セクション：カードの枠を外し、見出しを大きく */
html body.oc-direct .m-section-card { margin: 34px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html body.oc-direct .m-section-title-row { margin: 0 0 14px !important; }
html body.oc-direct .m-section-title,
html body.oc-direct .order-design-choice-title,
html body.oc-direct .card-thickness-choice legend { display: block; margin: 0 0 14px; padding: 0; color: #1d1d1f; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.03em; }
html body.oc-direct .oc-title-sub { color: #86868b; font-weight: 700; }
html body.oc-direct .m-required-tag { display: none !important; }
html body.oc-direct .card-thickness-price-note { display: block; margin: 6px 0 0 !important; color: #86868b !important; font-size: 12.5px !important; font-weight: 400; letter-spacing: 0; }

/* デザイン：選択カード */
html body.oc-direct .order-design-choice { margin: 34px 0 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
html body.oc-direct .order-design-choice-list { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
html body.oc-direct .order-design-choice-item { position: relative; display: flex !important; align-items: center !important; min-height: 58px; margin: 0 !important; padding: 12px 16px !important; border: 1px solid #d2d2d7 !important; border-radius: 16px !important; background: #fff !important; cursor: pointer; }
html body.oc-direct .order-design-choice-item input { position: absolute; opacity: 0; pointer-events: none; }
html body.oc-direct .order-design-choice-copy,
html body.oc-direct .order-design-choice-copy strong { color: #1d1d1f; font-size: 15px; font-weight: 600; }
html body.oc-direct .order-design-choice-item:has(input:checked) { border-color: #0071e3 !important; box-shadow: inset 0 0 0 1px #0071e3 !important; background: #f2f8ff !important; }
html body.oc-direct .order-design-choice-item:has(input:checked)::after { content: "\2713"; position: absolute; top: 50%; right: 14px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: #0071e3; color: #fff; font-size: 14px; }
html body.oc-direct #orderDesignUploadPanel { border-radius: 16px !important; border-color: #e5e5ea !important; }

/* 厚み：3つ並び */
html body.oc-direct .card-thickness-choice { margin: 0 !important; }
html body.oc-direct .card-thickness-options { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; max-width: none !important; }
html body.oc-direct .card-thickness-option { position: relative; justify-content: center !important; min-height: 54px; padding: 0 8px !important; border: 1px solid #d2d2d7 !important; border-radius: 16px !important; font-size: 15px !important; font-weight: 600; }
html body.oc-direct .card-thickness-option input { position: absolute; opacity: 0; pointer-events: none; }
html body.oc-direct .card-thickness-option:has(input:checked) { border-color: #0071e3 !important; box-shadow: inset 0 0 0 1px #0071e3 !important; background: #f2f8ff !important; color: #0071e3 !important; }
html body.oc-direct .card-thickness-recommend { display: none !important; }

/* 枚数 */
html body.oc-direct .m-qty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
html body.oc-direct .m-qty-card { padding: 14px 6px !important; border: 1px solid #d2d2d7 !important; border-radius: 16px !important; background: #fff !important; text-align: center; }
html body.oc-direct .m-qty-card .m-qty-num { color: #1d1d1f; font-size: 15px !important; font-weight: 700 !important; }
html body.oc-direct .m-qty-card .m-qty-price { color: #6e6e73 !important; font-size: 12px !important; }
html body.oc-direct .m-qty-card.selected { border-color: #0071e3 !important; box-shadow: inset 0 0 0 1px #0071e3 !important; background: #f2f8ff !important; }
html body.oc-direct .m-qty-card.selected .m-qty-price { color: #0071e3 !important; }
html body.oc-direct #qtyUnitNote { margin-top: 12px !important; color: #86868b !important; font-size: 12px !important; }
html body.oc-direct #customSizeNote { margin-top: 12px !important; color: #6e6e73 !important; font-size: 12.5px !important; }

/* 加工オプション：白い角丸の行 */
html body.oc-direct .processing-group-title { margin: 0 0 10px; color: #1d1d1f; font-size: 15px; font-weight: 700; }
html body.oc-direct .processing-choice-group { margin: 0 0 24px; }
html body.oc-direct .processing-choice-rows { grid-template-columns: 1fr !important; gap: 10px !important; }
html body.oc-direct .processing-choice-row { min-height: 56px; padding: 12px 16px !important; border: 1px solid #d2d2d7 !important; border-radius: 16px !important; background: #fff !important; }
html body.oc-direct .processing-choice-row:has(input:checked) { border-color: #0071e3 !important; box-shadow: inset 0 0 0 1px #0071e3 !important; background: #f2f8ff !important; }
html body.oc-direct .processing-toggle { color: #1d1d1f; font-size: 15px; font-weight: 600; }
html body.oc-direct .processing-toggle input,
html body.oc-direct .processing-finish input { accent-color: #0071e3; }
html body.oc-direct .processing-finish label { border-radius: 16px !important; }
html body.oc-direct .processing-choice-price,
html body.oc-direct .processing-free { color: #86868b; font-size: 12.5px; }
html body.oc-direct .processing-choice-note { color: #86868b; font-size: 12.5px; }

/* 下部の金額バー */
html body.oc-direct .m-bottom-bar { border-radius: 24px 24px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .08); }
html body.oc-direct .m-next-btn { border-radius: 999px !important; background: #0071e3 !important; font-weight: 600; }
html body.oc-direct .m-next-btn:disabled { background: #a8cdf5 !important; }
html body.oc-direct .m-bottom-bar-total { color: #1d1d1f !important; font-weight: 700; }

/* 用途の選択（商品が決まっていない入口だけ表示） */
html body.oc-direct.oc-pick #sec-usage { display: block !important; }
html body.oc-direct .m-usage-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
html body.oc-direct .m-usage-card { position: relative; overflow: hidden; border: 1px solid #d2d2d7 !important; border-radius: 18px !important; background: #fff !important; }
html body.oc-direct .m-usage-card img { aspect-ratio: 1.58 / 1 !important; object-fit: cover !important; }
html body.oc-direct .m-usage-card-body { min-height: 62px !important; padding: 10px 12px !important; }
html body.oc-direct .m-usage-card-name { color: #1d1d1f; font-size: 13px !important; font-weight: 600 !important; }
html body.oc-direct .m-usage-card-note { color: #86868b !important; font-size: 11px !important; }
html body.oc-direct .m-usage-card.selected { border-color: #0071e3 !important; box-shadow: inset 0 0 0 1px #0071e3 !important; background: #f2f8ff !important; }
html body.oc-direct .m-usage-check { background: #0071e3 !important; }