/**
 * ショップ一覧（商品カード）専用スタイル
 *
 * WHY (2026-09-28): クライアント参考デザインの指示。価格をオレンジの大きな
 *      太字にし、「オプションを選択」リンクを全幅の角丸グラデーションボタン
 *      （カートアイコン・区切り線・矢印付き）へ差し替える。ボタンの中身の
 *      再構築は inc/woocommerce.php kdc_render_shop_archive_card_cta()
 *      （`woocommerce_loop_add_to_cart_link` フィルタ）。「(税込)」の付与は
 *      同ファイル kdc_append_tax_included_price_suffix()。
 *      is_shop() || is_product_taxonomy() でのみ読み込む（functions.php 側で判定）。
 *      色・角丸は tokens.css の --ds-* / style.css の --global-palette* を使い、
 *      直値でハードコードしない。
 */

/*
 * WHY: 親テーマ Kadence の woocommerce.min.css は
 *      `.woo-archive-action-on-hover .product-action-wrap` を
 *      `position:absolute; bottom:-2rem; opacity:0` にし、カード :hover /
 *      :focus-within のときだけ見せる仕様になっている。マウスホバーが
 *      存在しないスマホでは、この「オプションを選択」ボタンが実質
 *      永久に見えない・押せない状態になっていた（375px 実機の DOM 座標で
 *      確認済み: ボタンがカード自身の overflow:hidden 領域の外側に
 *      配置されていた）。クライアント要望の「常時表示の全幅ボタン」とも
 *      矛盾するため、ホバー演出を無効化し、常に通常のドキュメントフローで
 *      表示する。
 */
.woocommerce ul.products li.product .product-action-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .product-action-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product:focus-within .product-action-wrap {
	position: static;
	right: auto;
	bottom: auto;
	opacity: 1;
	margin-top: 14px;
	padding: 0;
	transition: none;
}

.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .entry-content-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product:focus-within .entry-content-wrap {
	transform: none;
}

/* WHY: 商品名の下に大きなオレンジ価格を出す（カンプ準拠）。「(税込)」は
   小さく添える（kdc_append_tax_included_price_suffix() が付与）。 */
.woocommerce ul.products li.product .price {
	display: block;
	margin: 6px 0 0;
}

.woocommerce ul.products li.product .price .woocommerce-Price-amount {
	color: var(--global-palette2);
	font-family: var(--ds-font-family-heading);
	font-size: clamp(22px, 6vw, 26px);
	font-weight: 800;
}

.woocommerce ul.products li.product .price .ds-price-tax-suffix {
	margin-left: 4px;
	color: var(--ds-fg-soft);
	font-size: var(--ds-font-xs);
	font-weight: 400;
}

/*
 * WHY: 「🛒｜カラーを選んで購入 ›」の全幅ボタン。カード幅に応じて文字を
 *      15px 程度まで縮められる想定のため、front.css .ds-btn-primary が使う
 *      「大きい文字」基準（bold 18.66px以上・3:1）の白文字/#FC5210 は
 *      小さいサイズで基準未達になる。ここでは通常文字基準（4.5:1）を
 *      どの文字サイズでも満たす --ds-cta-ink（#D63F00・白文字 4.60:1）→
 *      --ds-cta-ink-hover（#C84B00・白文字 4.71:1）のグラデーションを使う
 *      （tokens.css 定義済みの2値をそのまま使い、新規の色は増やさない）。
 *
 * WHY (セレクタの長さ): 親テーマ Kadence の woocommerce.min.css が
 *      `.woocommerce ul.products:not(.woo-archive-btn-button)
 *      li:where(:not(.woo-archive-btn-button)) .button:not(.kb-button)`
 *      （クラス5・要素2 相当の詳細度）で `display:inline` 等を強く指定して
 *      いるため、単純な `.ds-shop-card__cta` 1クラスでは負ける（実機で
 *      display:flex が無視されるのを確認済み）。同等以上の詳細度になるよう
 *      祖先クラスを連ねる（!important は使わず、既存の
 *      .ds-section-head__mascot 打ち消しと同じ「詳細度を上げる」方式に揃える）。
 */
.woocommerce ul.products li.product .product-details .product-action-wrap .ds-shop-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 10px;
	padding: 13px 14px;
	background: linear-gradient(180deg, var(--ds-cta-ink) 0%, var(--ds-cta-ink-hover) 100%);
	border: none;
	border-radius: var(--ds-radius-md);
	color: #fff;
	font-weight: 700;
	font-size: clamp(15px, 4vw, 16px);
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
}

.woocommerce ul.products li.product .product-details .product-action-wrap .ds-shop-card__cta:hover,
.woocommerce ul.products li.product .product-details .product-action-wrap .ds-shop-card__cta:focus-visible {
	background: linear-gradient(180deg, var(--ds-cta-ink-hover) 0%, var(--ds-cta-ink) 100%);
	color: #fff;
}

.woocommerce ul.products li.product .product-details .product-action-wrap .ds-shop-card__cta:focus-visible {
	outline: 3px solid var(--ds-fg);
	outline-offset: 2px;
}

.ds-shop-card__cta-icon {
	display: flex;
	flex-shrink: 0;
	width: 19px;
	height: 19px;
	color: #fff;
}

.ds-shop-card__cta-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ds-shop-card__cta-divider {
	flex-shrink: 0;
	width: 1px;
	height: 18px;
	background-color: rgba(255, 255, 255, .55);
}

.ds-shop-card__cta-text {
	flex: 0 1 auto;
	white-space: nowrap;
}

.ds-shop-card__cta-arrow {
	flex-shrink: 0;
	font-size: 1.3em;
	line-height: 1;
}

/*
 * WHY: 375px 実機でアイコン・区切り線・矢印を含めた1行表示がぎりぎりの
 *      商品名・価格文字数になりうるため、極小幅ではテキストサイズと
 *      余白を少し絞って折り返しを防ぐ（実測して調整。DSK-016 の教訓＝
 *      モック計算値でなく実測に基づく）。
 */
@media (max-width: 359px) {
	.ds-shop-card__cta {
		gap: 8px;
		padding: 12px 10px;
		font-size: 14px;
	}

	.ds-shop-card__cta-text {
		white-space: normal;
	}
}