/*
 * Harashina Standard — WooCommerce標準画面（商品詳細・ショップ一覧・
 * カート・注文手続き・マイアカウント）の最小限の幅調整。
 *
 * 原因（2026-09-18調査）: このテーマは`woocommerce/`テンプレート上書き
 * ディレクトリを持たないため、WooCommerce本体のtemplates/global/
 * wrapper-start.php（デフォルトcase）がそのまま使われる。その出力は
 * `<div id="primary" class="content-area"><main id="main" class="site-main">`
 * であり、通常固定ページ（page.php等）が出す`.entry-content`とは異なる
 * クラス構成のため、style.css側の既存幅指定（body:not(.home) .entry-content）
 * が一致せず、商品詳細ページの本文（説明・関連商品）が画面幅いっぱいに
 * 表示されていた。
 *
 * 対策は新しい数値を作らず、.entry-contentと同じ既存トークン
 * （--width-content・同じclamp()のpadding）をWooCommerceのラッパーだけに
 * 適用する。#primary + .content-areaの組み合わせはWooCommerceの
 * デフォルトラッパー以外でこのテーマが出力することはない
 * （テーマ独自テンプレートは常に<main id="primary" class="site-main">を
 * 直接使い、id="primary"にclass="content-area"を付けることはない）ため、
 * 通常ページ・投稿・他のWooCommerce以外の画面には一切影響しない。
 */
.woocommerce #primary.content-area,
.woocommerce-page #primary.content-area {
	max-width: var(--width-content);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1.2rem, 4vw, 3rem);
	padding-right: clamp(1.2rem, 4vw, 3rem);
	box-sizing: border-box;
}

/*
 * ---- 商品詳細ページの数量inputを隣のadd-to-cartボタンに揃える
 * （2026-09-18、確認済みの既存値のみで整理） ----
 *
 * 隣の「お買い物カゴに追加」ボタン（.single_add_to_cart_button）は
 * WooCommerce本体の既定CSSで
 * `font-size: 100%; line-height: 1; padding: .618em 1em; border: 0;`
 * （box-sizingの指定なし＝ブラウザのform control既定に従う）。
 *
 * 数量input（.qty）側は、WooCommerce本体では
 * `width: 3.631em; text-align: center;` のみで、上記に対応する指定が
 * 一つも無かった。加えてinput要素はブラウザのUA既定で独自のfont-size・
 * border-widthを持つ（ボタン側はborder:0だが、inputは既定で非ゼロの
 * border-widthを持つ）。これが実際の高さのズレの原因だったため、
 * ボタン側の値をそのまま流用して揃える。
 *
 * ・font-size: 1rem … ボタンのfont-size:100%はhtmlの既定値（16px、
 *   このテーマはhtml/bodyにfont-size指定が無く未上書き）を継承した
 *   ものと同じ値。
 * ・line-height: 1 … ボタンと同じ値。
 * ・padding: .618em 0 … ボタンの.618em 1emのうち高さに関わる上下分のみ
 *   流用（横方向はwidth: 4.5emを崩さないため0のまま）。
 * ・border: 0 … ボタンと同じ値。この4つ（font-size/line-height/padding/
 *   border）を揃えた外寸が、ボタンの外寸（padding .618em×2 + line-height
 *   1remぶんの高さ、border 0）と一致することを既に確認済み。
 *
 * ただしborder: 0のままだと「入力欄」と分かる枠線が消えてしまうため、
 * 見た目の枠線はborderではなくoutlineで追加する。outlineはCSS仕様上
 * ボックスの寸法（width/heightの計算）に一切影響しない（border-widthの
 * ように高さを押し広げない）ため、上記で確認済みの高さ一致をそのまま
 * 崩さずに枠線だけを足せる。色・太さは新しい値を作らず、既存フォーム
 * （page-ec-estimate.css の入力欄）と同じ`1px solid var(--border-color)`
 * を流用した。outline-offset: -1pxは、outlineを既定の外側ではなく
 * 内側（borderが本来あった位置）に描画するための指定。
 *
 * width: 4.5emは前回までの幅修正をそのまま維持。
 *
 * 対象はbody.single-product かつ form.cart 配下の.qtyのみ。カートページ
 * （/cart/）はWooCommerce Blocks版のカートで、数量の「−1＋」UIは
 * .wc-block-components-quantity-selector配下の別クラス構成
 * （inputにclass="qty"が付かない）のため、このセレクタとは構造的に
 * 一致せず影響しない。body.single-productもカートページには付与されない。
 */
.single-product form.cart .quantity .qty {
	width: 4.5em;
	padding: .618em 0;
	line-height: 1;
	font-size: 1rem;
	border: 0;
	outline: 1px solid var(--border-color);
	outline-offset: -1px;
}