/*
Theme Name: OptiB Child
Theme URI: https://optib.with-planning.co.jp/
Description: OptiB の子テーマ。カスタマイズはすべてこちらに書きます。親テーマ (OptiB) を更新しても、この中身は上書きされません。
Author: With-Planning
Author URI: https://with-planning.co.jp/
Template: optib
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.2
Text Domain: optib-child
*/

/* ===========================================================
   ここから下に、独自のCSSを書いてください。
   親テーマの assets/css/theme.css より後に読み込まれるので、
   同じセレクタなら、こちらが勝ちます。
   =========================================================== */


/* ===========================================================
 * サイドバー：スマホでのタップ領域拡大
 * 絞り込みフィルターとカテゴリー一覧（.vt-archive-opt）は共通クラスなので、
 * ここを直せば両方に効く。PC表示は既存のまま変更しない。
 * =========================================================== */
@media (max-width: 782px) {
	.vt-archive-opt a {
		padding: 12px 6px;
		min-height: 44px;
	}
	.vt-archive-opt {
		border-bottom: 1px solid #e5e5e5;
	}
	.vt-archive-opt:last-child {
		border-bottom: none;
	}
	.vt-archive-opt__name {
		font-size: 15px;
	}
	.vt-archive-box {
		width: 20px;
		height: 20px;
	}
	.vt-archive-axis__h {
		font-size: 16px;
	}
}


/* ===========================================================
 * サイドバー：カテゴリー一覧の親子関係を視覚化
 * 親（vt-archive-opts--d0）は太字のまま、子（d1以降）はインデント＋
 * 左の縦線＋やや薄い色・小さめ文字にして階層をひと目でわかるようにする。
 * .vt-archive-widgets 内に限定しているので、絞り込みフィルター側（階層なし）には影響しない。
 * =========================================================== */
.vt-archive-widgets .vt-archive-opts--d0 > .vt-archive-opt > a .vt-archive-opt__name {
	font-weight: 700;
}
.vt-archive-widgets [class*="vt-archive-opts--d"]:not(.vt-archive-opts--d0) {
	margin-left: 0.9em;
	padding-left: 0.7em;
	border-left: 2px solid #dcdfe3;
}
.vt-archive-widgets [class*="vt-archive-opts--d"]:not(.vt-archive-opts--d0) > .vt-archive-opt > a .vt-archive-opt__name {
	font-weight: 400;
	font-size: 0.93em;
	color: #666;
}
.vt-archive-widgets [class*="vt-archive-opts--d"]:not(.vt-archive-opts--d0) > .vt-archive-opt > a .vt-archive-opt__n {
	color: #999;
}


/* ===========================================================
 * 商品一覧のページネーション：グリッドとの間隔を確保
 * 商品カードの直下にページ番号がくっついて見える問題への対応。
 * =========================================================== */
.woocommerce-pagination {
	margin-top: 32px;
}


/* ===========================================================
 * フッター：コピーライト文言の文字色
 * body.home .elementor-heading-title の広域ルールが Elementor 側の
 * 個別の白色指定を上書きしてしまうため、フッター内に限定して white で固定する。
 * =========================================================== */
footer .elementor-element-58c6b5db .elementor-heading-title {
	color: #ffffff !important;
}

/* 詳細度をさらに上げて body.home .elementor-heading-title (!important) に確実に勝つ */
body.home footer .elementor-element-58c6b5db .elementor-heading-title {
	color: #ffffff !important;
}




/* ===========================================================
 * サイドバー追従：カテゴリーアーカイブページでスクロールしても
 * サイドバーが画面内に残るようにする（sticky）。
 * align-self を指定せず、親コンテナ（flex）のデフォルト伸縮に
 * 任せることで、グリッド／フレックスの行境界でカクつく問題を避ける。
 * =========================================================== */
.vt-archive-side {
	position: relative;
}
@media (max-width: 782px) {
	.vt-archive-side {
		position: static;
	}
}


/* ===========================================================
 * body の横スクロール防止（overflow-x: hidden）が、CSS の仕様上
 * overflow-y を暗黙的に auto に変換し、body 自体がスクロール
 * コンテナ化してしまう。これが原因でサイドバーの sticky 追従が
 * カクつく。overflow-x を clip に変えて、y 軸へ影響させない。
 * =========================================================== */
body {
	overflow-x: clip;
}


/* ===========================================================
 * scroll-behavior: smooth がホイールスクロールにもイージングを
 * かけてしまい、サイドバー追従と相まって「引っかかる」ような
 * 不自然な動きに見える。通常のスクロールに戻す。
 * =========================================================== */
html {
	scroll-behavior: auto;
}


/* ===========================================================
 * 商品一覧（スマホ幅）：WooCommerce 本体の smallscreen.css が
 * ul.products[class*="columns-"] li.product { width: 48% } を
 * 出力しており、テーマ側の grid レイアウト用の
 * `.vt-archive-main ul.products li.product { width: auto }` より
 * セレクタの詳細度が高いため負けていた。
 * 結果、グリッドセル幅に対して商品カードが 48% 幅までしか広がらず、
 * カード右側に大きな空白ができ、レイアウトが崩れて見えていた。
 * こちらは詳細度・!important の両方で確実に上書きする。
 * =========================================================== */
.vt-archive-main ul.products[class*="columns-"] li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}


/* ===========================================================
 * 商品一覧：480px 以下でも 2 カラムを維持する。
 * テーマ側のインライン CSS が 480px 以下で 1 カラム
 * （grid-template-columns: 1fr）にしていたのを、
 * 一般的なスマホ幅（iPhone 390〜430px 等）でも
 * 商品が2列に並ぶよう上書きする。
 * =========================================================== */
@media (max-width: 480px) {
	.vt-archive-main ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
}


/* ===========================================================
 * サイドバー：スマホでは商品一覧の下に表示する。
 * 782px 以下では .vt-archive-wrap を flex + column にし、
 * order で表示順だけを入れ替える（DOM順は変えないので
 * HTML構造・アクセシビリティの読み上げ順には影響しない）。
 * =========================================================== */
@media (max-width: 782px) {
	.vt-archive-wrap {
		display: flex !important;
		flex-direction: column !important;
	}
	.vt-archive-main {
		order: 1;
	}
	.vt-archive-side {
		order: 2;
		margin-top: 24px;
	}
}


/* ===========================================================
 * トップページ：商品ショートコード（新商品／よく売れている
 * 人気の商品／おすすめコンテンツ）が、スマホ幅で
 * grid-template-columns が 1 列（フル幅）になってしまい、
 * カードが縦にだけ間延びして見えていた。
 * これらは Elementor の商品ウィジェット（.elementor-grid）や
 * ショートコード出力（columns-2 等）で、ウィジェット側の
 * インライン CSS がブレークポイントごとに列数を決めているため、
 * ここでは詳細度を上げて 2 カラムに固定する。
 * =========================================================== */
@media (max-width: 767px) {
	.woocommerce ul.products.elementor-grid,
	.woocommerce ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
	}
}


/* ===========================================================
 * トップページ：商品カードのデザイン統一
 * よく売れている人気の商品セクションは shortcode 出力で
 * elementor-grid が付かず、WooCommerce 本体の float/width が
 * 残ったまま画像が細長く潰れて見えていた。body.home 限定で
 * 打ち消す。青いアクセントラインの正体は未確認、価格表示形式の
 * 違い（新商品は価格未設定）はCSSでは対応不可のため保留。
 * =========================================================== */
body.home .woocommerce ul.products[class*="columns-"] li.product,
body.home ul.products[class*="columns-"] li.product {
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* ============================================================
 * ヘッダー：ようこそ表示とログイン/新規登録ボタンをスマホでも横並びに
 * 親テーマの woo-welcome ウィジェットCSSは 599px 以下で
 * .wew-woo-welcome-button に width:48% を当てるため、
 * テキストとボタンが上下2段になってしまう。幅指定を解除して
 * 1行に収まる時は横並び、収まらない時だけ折り返すようにする。
 * ============================================================ */
@media (max-width: 599px) {
	.wew-woo-welcome-wrapper {
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 0.5em;
		row-gap: 0.35em;
	}

	.wew-woo-welcome-top,
	.wew-woo-welcome-bottom {
		width: auto;
		padding-bottom: 0;
	}

	.wew-woo-welcome-button {
		width: auto;
		margin: 0 0.2em;
	}
}

/* ==========================================================
 * 商品バリエーション選択欄の幅崩れ・レイアウト崩れ修正（2026-08-30）
 * 1) 親テーマの .variations tr td/th{display:block} に width が無く極小幅に潰れる
 * 2) .summary が display:grid(2列) で、form.cart と直後の .vt-inquiry が
 *    それぞれ grid-column:span 1 のため同じ行に並んでしまう
 * → バリエーションテーブルを持つ商品(variable)に限定して修正する
 * ========================================================== */
.woocommerce div.product form.cart .variations tr td,
.woocommerce div.product form.cart .variations tr th {
    width: 100% !important;
}
.woocommerce div.product form.cart .variations {
    flex: 0 0 100% !important;
    width: 100% !important;
    order: -1;
}
.woocommerce div.product form.cart:has(table.variations) {
    flex-wrap: wrap !important;
}
.summary .variations_form.cart:has(table.variations) {
    grid-column: 1 / -1 !important;
}
.summary .variations_form.cart:has(table.variations) + .vt-inquiry {
    grid-column: 1 / -1 !important;
}

.woocommerce div.product form.cart:has(table.variations) table.variations {
    margin-bottom: 0 !important;
}

.woocommerce div.product form.cart:has(table.variations) {
    margin-bottom: 24px !important;
    gap: 24px !important;
}

.woocommerce div.product form.cart:has(table.variations) .reset_variations {
    display: none !important;
}


/* ============================================================
 * Tablet breakpoint fix for single product summary grid (2026-08-30)
 * Cause: .single-product .summary is a 2-col grid (1fr 1fr) except
 * when max-width:820px. Between 821px and ~1300px (tablets, e.g.
 * iPad Pro 11 1194px landscape / 834px portrait) the 2-col layout
 * is too narrow: title/features/cart button overflow to the right,
 * causing horizontal scroll.
 * Fix: extend the 1-col breakpoint to align with the site's other
 * tablet/PC boundary (992/1200px).
 * ============================================================ */
@media (max-width: 1199px) {
	/* !important required: inline #vt-redesign style is enqueued after
	   this child theme stylesheet, so an unqualified rule there
	   (grid-template-columns: 1fr 1fr with no media query) otherwise
	   wins the cascade by source order despite equal specificity. */
	.single-product .summary {
		grid-template-columns: 1fr !important;
	}
	.single-product .summary > form.cart,
	.single-product .summary > .vt-inquiry {
		grid-column: 1 / -1 !important;
	}
}


/* Sale price - shrink the struck-through original price (2026-09-02) */
.summary .price del {
	font-size: 0.6em;
	opacity: 0.7;
}

/* Loop onsale badge - rectangle instead of circle to avoid overlapping title text (2026-09-02) */
a.woocommerce-loop-product__link > .onsale,
a.woocommerce-LoopProduct-link > .onsale {
	border-radius: 4px;
	width: auto;
	height: auto;
	min-height: 0;
	min-width: 0;
	padding: 4px 10px;
	line-height: 1.3;
}

/* Loop products - shrink the struck-through original price too (2026-09-02) */
.products .price del,
ul.products .price del {
	font-size: 0.6em;
	opacity: 0.7;
}

/* Sale price - remove default <ins> underline (2026-10-03) */
.price ins {
	text-decoration: none;
}

}