/**
 * himarii — WooCommerce スタイル
 * 商品グリッド / 商品カード / 単品ページ / カート / チェックアウト
 */

/* ======================================================
   Shop ページ：ヘッダーバナー
   ====================================================== */
.woocommerce-products-header,
.woocommerce .page-title,
.woocommerce-page .page-title {
	display: none; /* タイトルは下のバナーで代替 */
}

/* Shop バナー（アーカイブページ上部）*/
body.post-type-archive-product .him-shop-banner,
body.tax-product_cat .him-shop-banner,
body.tax-product_tag .him-shop-banner {
	background: #2e2520;
	padding: 48px var(--him-px, 60px) 40px;
	margin-bottom: 0;
}
.him-shop-banner__title {
	font-family: var(--him-font-serif, 'Noto Serif JP', serif);
	font-size: clamp(20px, 3vw, 32px);
	font-weight: 300;
	color: #fff;
	letter-spacing: 0.06em;
	margin: 0 0 6px;
}
.him-shop-banner__sub {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
	margin: 0;
}

/* ======================================================
   Shop ページ：カテゴリー＆スタイルフィルターバー
   ====================================================== */
.him-shop-filter {
	background: #fff;
	border-bottom: 1px solid var(--him-border, #e8e0d8);
	padding: 20px var(--him-px, 60px);
	margin-bottom: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	align-items: center;
}
.him-shop-filter__group {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.him-shop-filter__label {
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--him-text-light, rgba(85,85,85,0.5));
	white-space: nowrap;
	font-family: var(--him-font-sans, 'Instrument Sans', sans-serif);
}
.him-shop-filter__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.him-shop-filter__pill {
	font-family: var(--him-font-sans, 'Instrument Sans', sans-serif);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: rgba(60,50,44,0.7) !important;
	background: transparent;
	border: 1px solid #ddd5cc;
	padding: 5px 14px;
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
	line-height: 1.5;
}
.him-shop-filter__pill:hover {
	border-color: var(--him-brown, #8c6b4a);
	color: var(--him-brown, #8c6b4a) !important;
	opacity: 1;
}
.him-shop-filter__pill.is-active {
	background: var(--him-brown, #8c6b4a);
	border-color: var(--him-brown, #8c6b4a);
	color: #fff !important;
}
/* スタイルタグは少し丸く */
.him-shop-filter__pill--style {
	border-radius: 2px;
	background: #faf7f4;
	border-color: transparent;
}
.him-shop-filter__pill--style.is-active {
	background: #2e2520;
	border-color: #2e2520;
	color: #fff !important;
}
/* フィルターグループ区切り */
.him-shop-filter__group--style {
	padding-left: 40px;
	border-left: 1px solid var(--him-border, #e8e0d8);
}

/* ======================================================
   カテゴリーアーカイブ：ページタイトルエリア
   ====================================================== */
.woocommerce-products-header__title.page-title,
.woocommerce-archive-description {
	font-family: var(--him-font-serif, 'Noto Serif JP', serif);
	font-weight: 300;
	color: var(--him-deep, #2e2520);
}

/* ======================================================
   結果件数 / 並び替え
   ====================================================== */
.woocommerce-result-count {
	font-size: 11.5px;
	color: var(--him-text-light, rgba(85,85,85,0.5)) !important;
	letter-spacing: 0.04em;
}
.woocommerce-ordering select {
	font-family: var(--him-font-sans, 'Instrument Sans', sans-serif) !important;
	font-size: 11.5px !important;
	border: 1px solid var(--him-border, #e8e0d8) !important;
	border-radius: 0 !important;
	padding: 6px 12px !important;
	color: rgba(60,50,44,0.75) !important;
	background: #fff !important;
}

/* ======================================================
   商品一覧（ショップページ）
   ====================================================== */

/* グリッドレイアウト：4列 */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	float: none !important;
	width: 100% !important;
}

/* 商品カード */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--him-bg-card);
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
	overflow: hidden;
}

/* 画像コンテナ：1:1 アスペクト比 */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a:first-child {
	display: block;
}
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img {
	display: block;
	width: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.woocommerce ul.products li.product:hover img {
	transform: scale(1.03);
}

/* テキストエリア */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	font-family: var(--him-font-sans) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--him-text) !important;
	letter-spacing: 0.04em;
	margin: 12px 0 4px !important;
	padding: 0 !important;
	line-height: 1.5;
}

/* 価格 */
.woocommerce ul.products li.product .price {
	color: var(--him-brown) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.03em;
	margin-bottom: 14px !important;
}
.woocommerce ul.products li.product .price del {
	color: var(--him-text-light) !important;
	font-weight: 400;
}

/* セールバッジ */
.woocommerce ul.products li.product .onsale {
	background: var(--him-brown) !important;
	color: #fff !important;
	border-radius: 0 !important;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 8px;
	min-height: auto !important;
	min-width: auto !important;
	line-height: 1.4;
	top: 10px;
	left: 10px;
}

/* カートボタン（一覧内）*/
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
	font-size: 11px !important;
	padding: 10px 20px !important;
	width: 100% !important;
	text-align: center !important;
	margin-top: 4px !important;
}

/* レーティング非表示（任意） */
.woocommerce ul.products li.product .star-rating {
	display: none;
}

/* ======================================================
   商品一覧ヘッダー（並び替え / 件数）
   ====================================================== */
.woocommerce .woocommerce-result-count {
	font-size: 12px;
	color: var(--him-text-light);
	letter-spacing: 0.04em;
}
.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--him-border) !important;
	font-size: 12px;
	padding: 6px 12px !important;
}

/* ======================================================
   単品ページ（商品詳細）
   ====================================================== */

/* 2カラム：画像左 / 情報右 */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery {
	grid-column: 1;
}
.woocommerce div.product .summary.entry-summary {
	grid-column: 2;
	padding-top: 8px;
}

/* 商品名 */
.woocommerce div.product .product_title {
	font-family: var(--him-font-serif) !important;
	font-size: 22px !important;
	font-weight: 300 !important;
	color: var(--him-deep) !important;
	letter-spacing: 0.04em;
	line-height: 1.5;
	margin-bottom: 16px !important;
}

/* 単品価格 */
.woocommerce div.product .price {
	color: var(--him-brown) !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	letter-spacing: 0.03em;
	margin-bottom: 24px !important;
}

/* 説明文 */
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 13px;
	line-height: 1.9;
	color: var(--him-text);
	margin-bottom: 28px;
	border-top: 1px solid var(--him-border);
	padding-top: 20px;
}

/* カートに追加ボタン */
.woocommerce div.product form.cart .single_add_to_cart_button {
	width: 100% !important;
	font-size: 13px !important;
	letter-spacing: 0.12em !important;
	padding: 16px !important;
}

/* 数量セレクタ */
.woocommerce div.product form.cart .qty {
	border: 1px solid var(--him-border) !important;
	border-radius: 0 !important;
	width: 64px !important;
	text-align: center;
	font-size: 14px;
}

/* ギャラリーメインイメージ */
.woocommerce-product-gallery__image img {
	width: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* サムネイル */
.woocommerce-product-gallery__wrapper .flex-control-thumbs li img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	opacity: 0.6;
	transition: opacity 0.2s;
}
.woocommerce-product-gallery__wrapper .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery__wrapper .flex-control-thumbs li img:hover {
	opacity: 1;
}

/* タブ（説明 / レビュー） */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--him-border) !important;
	padding: 0 !important;
	margin-bottom: 28px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--him-brown) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--him-text) !important;
	padding: 10px 20px !important;
	font-weight: 400 !important;
}

/* 関連商品 */
.woocommerce .related.products h2,
.woocommerce .up-sells.products h2 {
	font-family: var(--him-font-serif);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.08em;
	color: var(--him-deep);
	border-bottom: 1px solid var(--him-border);
	padding-bottom: 12px;
	margin-bottom: 28px;
}
.woocommerce .related.products ul.products,
.woocommerce .up-sells.products ul.products {
	grid-template-columns: repeat(4, 1fr) !important;
}

/* ======================================================
   カートページ
   ====================================================== */
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
	border-color: var(--him-border) !important;
	padding: 16px 12px !important;
	vertical-align: middle;
}
.woocommerce-cart table.cart th {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--him-text-light);
	font-weight: 400;
	background: transparent !important;
}
.woocommerce-cart table.cart td.product-name a {
	font-size: 13px;
}
.woocommerce-cart .cart_totals {
	background: var(--him-bg-card);
	padding: 28px;
	border: 1px solid var(--him-border);
}
.woocommerce-cart .cart_totals h2 {
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 20px !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	width: 100% !important;
}

/* ======================================================
   チェックアウトページ
   ====================================================== */
.woocommerce-checkout #order_review_heading {
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.woocommerce-checkout #payment {
	background: var(--him-bg-card) !important;
	border-radius: 0 !important;
	border: 1px solid var(--him-border) !important;
}
.woocommerce-checkout #place_order {
	width: 100% !important;
	font-size: 13px !important;
	letter-spacing: 0.12em !important;
	padding: 16px !important;
}

/* ======================================================
   ページネーション
   ====================================================== */
.woocommerce nav.woocommerce-pagination ul {
	border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--him-border) !important;
	color: var(--him-text) !important;
	padding: 8px 14px !important;
	font-size: 12px;
	border-radius: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--him-brown) !important;
	border-color: var(--him-brown) !important;
	color: #fff !important;
}

/* ======================================================
   レスポンシブ
   ====================================================== */
@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.woocommerce .related.products ul.products,
	.woocommerce .up-sells.products ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
	}
	.woocommerce div.product {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce div.product .summary.entry-summary {
		grid-column: 1;
	}
	.woocommerce .related.products ul.products,
	.woocommerce .up-sells.products ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}