/* ============================================================================
 * WP 投稿本文の [product id="..."] ショートコードが描画するカート枠のスタイル。
 *
 * 中身は商品詳細ページと同じクラス階層
 * (.p-products_detail > .column_right > .cart > .cart_select ...) で出しているので、
 * デザインは style.css の既存ルールがそのまま当たる。
 * ここで書くのは、商品詳細ページ用の「2カラムレイアウト」を
 * WP 本文用に打ち消す分だけ。
 * ========================================================================= */

/* .p-products_detail は詳細ページで display:flex / padding-bottom:80px。
   本文中では単独ブロックとして置きたいので解除する。 */
.p-shortcode-product.p-products_detail {
  display: block;
  padding-bottom: 0;
  margin: 30px 0;
}

/* .column_right は詳細ページで width:48.18%（右カラム）。
   本文では中央寄せの1カラムにする。幅上限は埋め込みブロックと同じ 520px。 */
.p-shortcode-product .column_right {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* 商品写真。詳細ページの .column_left は width:48.18% だが、
   本文中ではカート枠と同じ幅で上に積む（横並びにすると本文の幅では窮屈になるため）。 */
.p-shortcode-product .column_left {
  width: 100%;
  max-width: 520px;
  margin: 0 auto 20px;
}

.p-shortcode-product .column_left .main_image img {
  width: 100%;
  height: auto;
}

.p-shortcode-product__error {
  margin: 30px 0;
  color: #c00;
  font-size: 14px;
}