/**
 * ShopLaRosee Framework - Collection
 *
 * 商品一覧（アーカイブ）の骨格。
 *   - 上部に SORT BY と列数切替
 *   - 商品画像は薄いグレーの下地に載せる
 *   - 画像の下に商品名（左）と価格・状態（右）を 1 行で並べる
 *
 * WooCommerce のテンプレート上書きは Phase 2 で行います。
 * ここでは表示の型のみを定義しています。
 *
 * @package ShopLaRosee
 * @since   0.2.0
 */

/* ---------------------------------------------------------------------
 * ツールバー
 * ------------------------------------------------------------------ */
.slr-collection__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--slr-space-4);
	margin-bottom: var(--slr-space-5);
	font-size: var(--slr-text-xs);
	letter-spacing: var(--slr-tracking-wide);
	text-transform: uppercase;
}

/* 列数切替。四角の集合で列数そのものを表す（アイコンが意味を持つ） */
.slr-columns-switch {
	display: flex;
	gap: var(--slr-space-4);
}

.slr-columns-switch button {
	display: grid;
	gap: 2px;
	color: var(--slr-color-ink-muted);
	transition: color var(--slr-duration-fast) var(--slr-ease);
}

.slr-columns-switch button[aria-pressed="true"] {
	color: var(--slr-color-ink);
}

.slr-columns-switch__cell {
	width: 6px;
	height: 6px;
	background-color: currentColor;
}

.slr-columns-switch--2 { grid-template-columns: repeat(2, 6px); }
.slr-columns-switch--3 { grid-template-columns: repeat(3, 6px); }
.slr-columns-switch--4 { grid-template-columns: repeat(4, 6px); }

/* ---------------------------------------------------------------------
 * 商品
 * ------------------------------------------------------------------ */
.slr-product__media {
	position: relative;
	overflow: hidden;
	background-color: var(--slr-color-surface);
	aspect-ratio: var(--slr-ratio-product);
}

.slr-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 2 枚目の画像。ホバーで静かに入れ替える */
.slr-product__media-hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--slr-duration) var(--slr-ease);
}

@media (hover: hover) {
	.slr-product:hover .slr-product__media-hover {
		opacity: 1;
	}
}

/* 商品名と価格を 1 行で両端に置く */
.slr-product__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--slr-space-4);
	margin-top: var(--slr-space-4);
	font-size: var(--slr-text-sm);
}

.slr-product__title {
	font-family: var(--slr-font-body);
	font-size: var(--slr-text-sm);
	font-weight: var(--slr-weight-regular);
	line-height: var(--slr-leading-snug);
	letter-spacing: var(--slr-tracking-normal);
}

.slr-product__price {
	white-space: nowrap;
}

.slr-product__price del {
	color: var(--slr-color-ink-muted);
	margin-right: var(--slr-space-2);
}

.slr-product__price ins {
	color: var(--slr-color-sale);
	text-decoration: none;
}

/* 在庫切れ。色ではなくグレーで示す */
.slr-product__status {
	color: var(--slr-color-ink-muted);
	white-space: nowrap;
}

/* カラー展開の点。商品名の下に小さく並べる */
.slr-product__colors {
	display: flex;
	gap: var(--slr-space-2);
	margin-top: var(--slr-space-2);
}

.slr-product__color {
	width: 8px;
	height: 8px;
	border: var(--slr-border-width) solid var(--slr-color-line);
}

@media (max-width: 640px) {
	.slr-product__meta {
		flex-direction: column;
		gap: var(--slr-space-1);
	}
}