/* astra-woo.css — WooCommerce の既定意匠を astravape デザインへ寄せる上書き。
   ダーク基調 + シアン(#4ec3e1)アクセント。Dawn 由来の base.css/component CSS を土台に補正する。 */

/* --- カート追加ボタン（PDP/一覧）: 既定の紫を無効化し astra ボタン（シアン枠）へ --- */
.woocommerce .single_add_to_cart_button,
.woocommerce a.button.add_to_cart_button,
.astra-product-form .single_add_to_cart_button {
	background: transparent !important;
	color: rgb(var(--color-foreground)) !important;
	border: 1px solid #4ec3e1 !important;
	border-radius: 40px !important;
	padding: 1.2rem 2.4rem !important;
	font-weight: 500;
	letter-spacing: 0.1rem;
	transition: background 0.2s ease, color 0.2s ease;
	box-shadow: none !important;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.button.add_to_cart_button:hover {
	background: #4ec3e1 !important;
	color: #000 !important;
}

/* --- ボタンの文字を中央に -------------------------------------------------
 * WooCommerce 本体が a.button / button.button に display: inline-block を当てる。
 * base.css の .button は inline-flex + 中央寄せなのに、そちらが負けるため
 * justify-content が効かず、min-width で広がった枠の中で文字が左に寄っていた
 * （「カートへ戻る」などで顕著）。
 *
 * 同じ強さで書いて、読み込みが後のこちらから戻す。 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* --- 主要 CTA（購入手続きへ・注文確定など）---
 * 商品カードの「カートに追加 / 商品詳細を見る」（.astra-add-button）と同じ意匠に
 * 揃える: 透明地・シアンの枠・シアンの文字で、ホバーでシアンに塗りつぶす。
 * 以前はここだけ塗りつぶしで、同じシアンでも別のボタンに見えていた。 */
.woocommerce .button.alt,
.woocommerce a.checkout-button,
.woocommerce .wc-proceed-to-checkout .button,
.woocommerce #place_order {
	background: transparent !important;
	color: #4ec3e1 !important;
	border: 1px solid #4ec3e1 !important;
	border-radius: 40px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font-weight: 700;
}
.woocommerce .button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover {
	background: #4ec3e1 !important;
	color: #000 !important;
}

/* 副次ボタン（更新・クーポン適用など）: 落ち着いた枠線 */
.woocommerce .button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):not(.astra-add-button) {
	background: transparent !important;
	color: rgb(var(--color-foreground)) !important;
	border: 1px solid rgba(var(--color-foreground), 0.3) !important;
	border-radius: 40px !important;
	box-shadow: none !important;
}

/* PDP: 数量入力とボタンを横並びに（Dawn の buy-buttons 風） */
.astra-product-form form.cart {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	flex-wrap: wrap;
	margin-block: 1.6rem;
}
.astra-product-form .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(var(--color-foreground), 0.3);
	border-radius: 40px;
	overflow: hidden;
}
.astra-product-form .quantity input.qty {
	width: 5rem;
	text-align: center;
	background: transparent;
	color: rgb(var(--color-foreground));
	border: 0;
	-moz-appearance: textfield;
}
.astra-product-form .single_add_to_cart_button {
	flex: 1 1 auto;
}

/* --- 数量の −/＋ ボタン ---------------------------------------------------
 * ボタンは inc/woocommerce.php が数量入力の前後に差し込む。
 * 商品ページとカートの両方に出るので、枠の形はここで共通に決める。 */
.quantity:has(.astra-quantity__button) {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(var(--color-foreground), 0.3);
	border-radius: 40px;
	overflow: hidden;
}

.quantity .astra-quantity__button {
	flex: 0 0 auto;
	width: 44px;
	align-self: stretch;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: rgb(var(--color-foreground));
	font-family: var(--astra-source-code-pro), sans-serif;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease;
}

.quantity .astra-quantity__button:hover:not(:disabled) {
	color: #4ec3e1;
}

.quantity .astra-quantity__button:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* 入力はボタンのあいだで伸縮させる（既定の width:100% だとボタンを潰す）。 */
.quantity:has(.astra-quantity__button) input.qty {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	padding: 0;
	text-align: center;
}

/* 数量が1個固定の商品（スターターキット）では、WooCommerce は入力を
 * type="hidden" にするが、外側の div.quantity と −/＋ ボタンはそのまま出す。
 * 枠だけが空で残ったり、数字の無い [−][＋] が並んだりするので、中が hidden
 * だけのときは枠ごと消す。商品ページとカートの両方が対象。 */
.quantity:has(input[type='hidden']) {
	display: none;
}

/* バリエーション商品（DEVICE / スターターキット）のフォームは縦積みにする。
 * 上の form.cart の flex をそのまま当てると、選択欄と「数量＋カート」が
 * 横に並んでしまう。並びは 選択 → 価格 → 数量＋カート。 */
.astra-product-form form.variations_form {
	display: block;
}
.astra-product-form .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.6rem;
}
.astra-product-form .variations_form .variations {
	width: 100%;
}

/* --- PDP アコーディオン: details/summary --- */
.astra-pdp .product__accordion details {
	border-top: 1px solid rgba(var(--color-foreground), 0.15);
	padding-block: 0.4rem;
}
.astra-pdp .product__accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	padding-block: 1.4rem;
	list-style: none;
}
.astra-pdp .product__accordion summary::-webkit-details-marker { display: none; }
/* ▼のサイズ・向きは section-main-astra-product.css と component-accordion.css で扱う
 * （以前は × アイコンを 45 度回して + に見せていた）。 */
.astra-pdp .product__accordion .accordion__content { padding-bottom: 1.6rem; }

/* PDP share ボタン */
.astra-pdp .product__share { margin-top: 2rem; }
.astra-pdp .share-button__button {
	background: transparent;
	border: 0;
	color: rgba(var(--color-foreground), 0.7);
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}

/* --- WooCommerce clearfix 疑似要素が CSS Grid を崩すのを防止（既知の地雷）--- */
.woocommerce::before,
.woocommerce::after,
.woocommerce-page::before,
.woocommerce-page::after { display: none !important; }

/* WooCommerce の既定 notice を控えめに */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: rgba(var(--color-foreground), 0.06);
	border-top: 0;
	color: rgb(var(--color-foreground));
	list-style: none;
}

/* 通知の左余白。
 *
 * WooCommerce は左に 3.5em 空けて、そこへ絵文字アイコンを絶対配置する。
 * ところが base.css の `.rte ul`（クラス1つ・要素1つ）が padding-left: 2rem を
 * 当てており、そちらが勝って 20px まで詰まっていた。アイコンは左 24px に
 * 置かれるので、本文の上に重なっていた。
 *
 * `.rte ul` と同じ強さで、読み込みが後のこちらから戻す。 */
ul.woocommerce-error,
ul.woocommerce-info,
ul.woocommerce-message {
	padding-left: 5.6rem;
}

/* --- コレクション/一覧グリッド（astra カード）--- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--grid-desktop-vertical-spacing, 8px) var(--grid-desktop-horizontal-spacing, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products li.product,
.woocommerce ul.products li.astra-grid-item {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}
@media screen and (max-width: 989px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* コレクションのページタイトル/説明（main-collection-banner 相当） */
.woocommerce .astra-wc-content > .woocommerce-products-header,
.astra-collection-banner { text-align: center; padding-block: 3.2rem; }
/* ページタイトルは見出し既定の Source Code Pro ではなく、
 * デザイン指定どおり細い Roboto にする（トップの「Find Your Orbit」や
 * 関連商品の見出しと同じ扱い）。 */
.woocommerce-products-header__title.page-title {
	font-family: var(--astra-roboto), sans-serif;
	font-weight: var(--astra-font-weight-thin);
	font-size: clamp(3.2rem, 6vw, 6.4rem);
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--astra-gray);
	margin: 0;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: rgba(var(--color-foreground), 0.6); }

/* WooCommerce 標準の価格色をトークンへ */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.price-item { color: rgb(var(--color-foreground)); }

/* --- 一覧のボタンの文字を中央に ------------------------------------------
 * WooCommerce の `.woocommerce ul.products li.product .button`（クラス3つ）が
 * display: inline-block を当てるため、カード側の display:flex が負けて
 * justify-content / align-items による中央寄せが効いていなかった。
 * 一覧のときだけ文字が左に寄って見えていたのはこのため。
 *
 * あわせて同じ指定の margin-top: 1em も外す。一覧だけ余白が増えて、
 * トップページのカードと間隔がずれるため。 */
.woocommerce ul.products li.product .astra-add-button,
.astra-card-wrapper .astra-add-button {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-top: 0;
}

/* --- astra カードのクイック追加ボタン: WooCommerce 既定 CSS に勝ってシアン枠を維持 --- */
.woocommerce ul.products .astra-add-button,
.woocommerce .astra-add-button.quick-add__submit,
.astra-add-button.quick-add__submit {
	background: transparent !important;
	border: 1px solid #4ec3e1 !important;
	color: rgb(var(--color-foreground)) !important;
	border-radius: 40px !important;
	box-shadow: none !important;
	padding: 1rem 1.6rem !important;
}
.woocommerce ul.products .astra-add-button:hover,
.astra-add-button.quick-add__submit:hover {
	background: #4ec3e1 !important;
	color: #000 !important;
}

/* --- 商品グリッドの clearfix ----------------------------------------------
 * WooCommerce は ul.products にも clearfix の擬似要素を付ける。grid では
 * これがグリッドアイテムとして1マス目を占有してしまい、商品が1列ぶん
 * 右へずれて左端が空いていた。
 * 既存の指定は .woocommerce::before/::after だけで ul 側が漏れていた。 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none !important;
}

/* --- 商品カードのクイック追加 ---------------------------------------------
 * Dawn の .card__heading a::after が inset:0 / z-index:1 でカード全面を覆う
 * リンクになっている。クイック追加ボタンは z-index を持っていなかったため、
 * クリックがこのリンクに吸われて商品詳細へ遷移してしまっていた。
 * ウィッシュリストのハート（z-index:3）と同じくボタンを前面へ出す。 */
.astra-card-wrapper .astra-add-button,
.astra-card-wrapper .quick-add,
.astra-card-wrapper form.cart {
	position: relative;
	z-index: 2;
}

/* --- ウィッシュリストの選択状態 -------------------------------------------
 * Wishlist.js はボタンに .active を付け外しするが、対応する CSS が無く
 * 押しても見た目が変わらなかった。
 *
 * ハートの path は fill="currentColor" なので、path へ fill を直接当てて
 * 色を変える。currentColor 経由より依存が少なく確実。 */
.wishlist__button--button svg path {
	transition: fill 0.2s ease;
}

.wishlist__button--button.active svg path {
	fill: #4EC3E1;
}

/* --- 商品詳細の数量入力 ---------------------------------------------------
 * 枠（角丸のピル）は 142x47 あるのに、中の number 入力が 50x18 のまま
 * 左上に寄っていて見た目が崩れていた。入力を枠いっぱいに広げ、
 * ブラウザ既定のスピナーは隠す。 */
.astra-product-form .quantity {
	width: 142px;
	height: 56px;
	justify-content: center;
}

.astra-product-form .quantity input.qty {
	width: 100%;
	height: 100%;
	padding: 0 1.2rem;
	font-size: 16px;
	line-height: 1;
	appearance: textfield;
	-moz-appearance: textfield;
}

.astra-product-form .quantity input.qty::-webkit-outer-spin-button,
.astra-product-form .quantity input.qty::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

/* --- 商品詳細のサムネイル -------------------------------------------------
 * ul のまま display:block だったため、リストマーカー付きで縦に積まれ
 * 位置もずれていた。左揃えの横並びで正方形に整える。 */
.astra-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
	list-style: none;
	margin: 1.2rem 0 0;
	padding: 0;
}

.astra-gallery__thumb {
	width: 100px;
	height: 100px;
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.astra-gallery__thumb.is-active,
.astra-gallery__thumb:hover {
	border-color: rgba(255, 255, 255, 0.6);
}

.astra-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 商品一覧の並び替え select --------------------------------------------
 * WooCommerce 既定の白いセレクトのままでサイトの意匠から浮いていた。 */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	background-color: rgba(255, 255, 255, 0.06);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' d='M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.2rem center;
	background-size: 10px 6px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 9999px;
	color: #fff;
	font-family: var(--astra-source-code-pro), monospace;
	font-size: 14px;
	padding: 0.9rem 3.2rem 0.9rem 1.6rem;
	cursor: pointer;
}

.woocommerce .woocommerce-ordering select:focus {
	outline: none;
	border-color: #4EC3E1;
}

/* ネイティブのドロップダウンは暗い配色に揃える */
.woocommerce .woocommerce-ordering select option {
	background-color: #111;
	color: #fff;
}

/* --- ボタンのホバー時のリング ---------------------------------------------
 * Dawn の .button:hover::after はボタンの外周にリングを描くが、
 * ::after 自身の border-radius が 0 のままなので、角丸のボタンに対して
 * 四角い枠が浮いて見えていた。ボタンの角丸を継承させる。 */
.button::before,
.button::after,
.astra-add-button::before,
.astra-add-button::after,
.single_add_to_cart_button::before,
.single_add_to_cart_button::after {
	border-radius: inherit;
}

/* --- 商品カードのカート追加ボタン -----------------------------------------
 * シアンの枠線に合わせて文字色もシアンにする（移植元の意匠）。
 * ホバーでシアン塗り + 黒文字に反転させる。
 *
 * color と -webkit-text-fill-color を併記している。後者は前者を上書きする
 * 性質があるため、確実に効かせる意図。
 * （調査時に「color が効かない」と見えたのは自動操作タブでトランジションが
 *   凍結していたためで、実ブラウザでは color だけでも効く。
 *   詳細は docs/migration-notes.md を参照。） */
.astra-card-wrapper .astra-add-button,
.astra-card-wrapper .astra-add-button.quick-add__submit {
	color: #4EC3E1;
	-webkit-text-fill-color: #4EC3E1;
	background-color: transparent;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, -webkit-text-fill-color 0.2s ease;
}

.astra-card-wrapper .astra-add-button:hover,
.astra-card-wrapper .astra-add-button:focus-visible {
	background-color: #4EC3E1;
	color: #000;
	-webkit-text-fill-color: #000;
}

/* 非同期追加中／追加後のフィードバック（WooCommerce が付けるクラス） */
.astra-card-wrapper .astra-add-button.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* カード内の「カートを見る」リンクは出さない（通知を消す方針と揃える） */
.astra-card-wrapper .added_to_cart {
	display: none;
}

/* --- ヘッダーのカート個数 -------------------------------------------------
 * 非同期追加のあと WooCommerce がこの要素を差し替えるため、0 件でも
 * 要素自体は出力している。空のときだけ隠す。 */
.cart-count-bubble.is-empty {
	display: none;
}

/* --- 検索入力の外枠 -------------------------------------------------------
 * Dawn の .field::after は入力欄の外周に box-shadow でリングを描くが、
 * border-radius が 0 のままなので、角丸の検索欄に四角い枠が浮いて見える。
 * 検索欄は自前で枠線を持っているのでリング自体を出さない。 */
.drawer-search .field::before,
.drawer-search .field::after,
.search-overlay .field::before,
.search-overlay .field::after,
.template-search__search .field::before,
.template-search__search .field::after {
	display: none;
}

/* --- 商品詳細のサムネイル -------------------------------------------------
 * img は <button> の中にあり、その button がサイズを持たないため
 * 画像が 100x100 の枠に対して 82x82 にとどまり余白が見えていた。
 * button を枠いっぱいに広げて画像を cover で敷き詰める。 */
.astra-gallery__thumb button {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

/* --- 商品詳細の数量入力の背景 ---------------------------------------------
 * Dawn は .quantity::before で背景を塗る。--color-background を暗色へ
 * 揃えた結果まっ黒の塗りつぶしになっていたので、他の入力欄と同じ
 * 半透明にする。 */
.astra-product-form .quantity::before {
	background-color: rgba(255, 255, 255, 0.06);
}

/* 件数（ページタイトル直下）。 */
.astra-item-count {
	margin: 1.6rem 0 0;
	font-family: var(--astra-source-code-pro), monospace;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--astra-gray);
}

/* --- カート/チェックアウトの明細テーブルがSPで横に溢れる ------------------
 * WooCommerce既定(woocommerce-smallscreen.css)の shop_table_responsive は
 * ::before{content:attr(data-title)":";float:left} + td{text-align:right!important}
 * というfloatベースの実装。ラベルと値の合計幅がコンテナ幅を超えても折り返さず
 * そのまま右へ突き抜ける（実機で「小計: $30」等が画面外に切れることを確認）。
 *
 * ★2026-08-08 追記: 一度 display:flex + justify-content:space-between に
 * 置き換えたが、商品名のように長くて折り返しが必要な値だと、space-between で
 * 右寄せに配置された折り返し2行目がなお画面外に出る事故が実機で再発した
 * （flexの幅計算はラベル分を引いた「残り幅」に厳密には追随しないため）。
 * 折り返しの可能性がある値を横並びのままにするのはそもそも無理があるので、
 * ラベルと値を完全に別行の縦積みにする（display:blockのみ・横方向の計算を
 * 一切させない）。これなら折り返しが何行になっても水平方向には絶対に出ない …
 * はずだったが、それでも実機で再発した。
 *
 * ★2026-08-08 さらに追記: 真因は <table> 自体がまだ display:table のまま
 * だったこと。tr/td だけ display:block にしても、親の <table>（と暗黙の
 * <tbody> の table-row-group）はテーブル自動レイアウトを続けており、
 * 全角の括弧・％・＋が連続して区切りの無い商品名（【Starter Kit】...
 * （NICOTINE3％）＋DEVICE など）を「最長の分割不可能なトークン」として
 * セル幅の計算に使うため、max-width/word-breakを付けたtd側の指定より先に
 * テーブルそのものがビューポートより広い幅を確保してしまっていた。
 * table/tbody もブロック化してテーブルレイアウトのアルゴリズムを完全に
 * 無効化する。これで通常のブロックフローのみになり、word-break が
 * 意図通りに効く。 */
@media screen and (max-width: 768px) {
	.woocommerce table.shop_table_responsive,
	.woocommerce-page table.shop_table_responsive {
		display: block;
	}

	.woocommerce table.shop_table_responsive tbody,
	.woocommerce-page table.shop_table_responsive tbody {
		display: block;
	}

	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		display: block;
		text-align: left !important;
		max-width: 100%;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-page table.shop_table_responsive tr td::before {
		display: block;
		float: none;
		margin-bottom: 0.3em;
	}

	.woocommerce table.shop_table_responsive,
	.woocommerce-page table.shop_table_responsive {
		max-width: 100%;
	}
}

/* --- 商品一覧のページ送り: 既定のバラバラな色(白/紫/水色)を無効化し、
   カード内ボタンと同じ「透明地+シアン枠」の丸ボタンに揃える --- */
.woocommerce nav.woocommerce-pagination {
	margin-top: 3rem;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li {
	border: none !important;
}

.woocommerce nav.woocommerce-pagination .page-numbers {
	display: flex !important;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	min-width: 0;
	background: transparent !important;
	color: #4ec3e1 !important;
	border: 2px solid #4ec3e1 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	font-weight: 500;
}

.woocommerce nav.woocommerce-pagination .page-numbers.current,
.woocommerce nav.woocommerce-pagination .page-numbers:hover {
	background: #4ec3e1 !important;
	color: #000 !important;
}

.woocommerce nav.woocommerce-pagination .page-numbers.dots {
	border: none !important;
	color: rgb(var(--color-foreground)) !important;
}