@use "variables" as *;

// ===========================================================================
// オリジナル商品 (page-original.php) — Tozai Quality.
// Product list: image | (title / description / external 購入 button), one per
// row with a thin rule between. Online-shop bar pinned at the bottom.
// Content column = .inner-box--narrow (1024 design column).
// ===========================================================================

.product-list {
	border-top: 1px dashed $color-rule;
}

.product-item {
	display: grid;
	grid-template-columns: rem(300) 1fr;
	gap: rem(40);
	align-items: start;
	padding-block: rem(40);
	border-bottom: 1px dashed $color-rule;

	@include sp {
		grid-template-columns: 1fr;
		gap: rem(20);
		padding-block: rem(30);
	}
}

// Product photo fills a faint-bordered, rounded frame (cover-cropped to the box).
.product-item__img {
	aspect-ratio: 300 / 169;
	background: $color-white;
	border: 1px solid rgba($color-green, 0.2);
	border-radius: $radius-sm;
	overflow: hidden;

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

	@include sp {
		max-width: rem(280);
		margin-inline: auto;
	}
}

.product-item__title {
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(16);
	line-height: 1.4;
	color: $color-green;
}

// 読み仮名 — smaller but bold, follows the name inline (e.g. 恵 (めぐみ)).
.product-item__reading {
	margin-left: rem(4);
	font-size: rem(14);
}

.product-item__desc {
	margin-top: rem(16);
	font-family: $font-sans;
	font-size: rem(15);
	line-height: 1.8;
	color: $color-text;

	p + p {
		margin-top: 1em;
	}

	@include sp {
		font-size: rem(14);
	}
}

.product-item__buy {
	margin-top: rem(20);
}

.product-empty {
	text-align: center;
	font-size: rem(16);
	color: $color-text;
}

// ---------------------------------------------------------------------------
// .shop-bar — full-width online-shop link (thumb | label | circle arrow).
// Same green⇆white hover inversion as the TOP link bars.
// ---------------------------------------------------------------------------
.shop-bar {
	@include hover-invert;

	position: relative;
	display: flex;
	align-items: center;
	gap: rem(20);
	margin-top: rem(80);
	padding: rem(5) rem(60) rem(5) rem(5); // 5px gap between thumb and border
	border: 2px solid $color-green;
	border-radius: $radius-sm;

	@include sp {
		gap: rem(16);
		padding-right: rem(48);
		margin-top: rem(60);
	}
}

.shop-bar__thumb {
	flex-shrink: 0;
	width: rem(200);
	aspect-ratio: 200 / 90;
	border-radius: $radius-sm;
	overflow: hidden;

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

	@include sp {
		width: rem(120);
	}
}

.shop-bar__text {
	display: flex;
	flex-direction: column;
	gap: rem(4);
}

.shop-bar__ja {
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(20);
	line-height: 1.3;

	@include sp {
		font-size: rem(16);
	}
}

.shop-bar__en {
	font-family: $font-sans;
	font-size: rem(13);
	letter-spacing: 0.08em;
	text-transform: uppercase;

	@include sp {
		font-size: rem(11);
	}
}

// Circle arrow (green disc / white triangle), inverts with the bar on hover.
.shop-bar__arrow {
	@include circle-arrow($bg: var(--fg), $fg: var(--bg));
	position: absolute;
	right: rem(15);
	top: 50%;
	transform: translateY(-50%);
}