@charset "utf-8";

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  GRM Component CSS
  Author : Hirohisa Kambe
  Date : 2026.04.13
  Version : 1.1
  汎用
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* =========================
   GRM Card（Catalog UI）
========================= */

.grm-card{
	background:#fff;
	border:1px solid #e5e5e5;
	transition:all 0.2s ease;
	height:100%;
}

/* hover */
.grm-card:hover{
	box-shadow:0 6px 20px rgba(0,0,0,0.08);
	transform:translateY(-3px);
}

/* link */
.grm-card-link{
	display:block;
	height:100%;
	color:inherit;
	text-decoration:none;
}

/* image */
.grm-card-img{
	width:100%;
	aspect-ratio:1 / 1;
	background:#f8f8f8;
	overflow:hidden;
}

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

/* no image */
.grm-card-noimg{
	display:flex;
	align-items:center;
	justify-content:center;
	height:100%;
	font-size:0.75rem;
	color:#999;
}

/* body */
.grm-card-body{
	padding:12px;
	display:flex;
	flex-direction:column;
}

/* category */
.grm-card-cat{
	margin-bottom:6px;
}

.grm-card-cat-item{
	font-size:0.7rem;
	color:#777;
	margin-right:6px;
}

/* title */
.grm-card-title{
	font-size:0.95rem;
	line-height:1.5;
	margin-bottom:8px;
}

/* price */
.grm-card-price{
	font-size:0.9rem;
	font-weight:600;
	margin-top:auto;
}