@charset "utf-8";
/*
ウェブショップAPIから受け取る商品グリッド.
手作り合成画像（model_264x264_*.jpg / 原稿 model_264x264_02.psd）の見た目を再現している.
既存 base.css との衝突を避けるため、すべて .webshop-grid 配下にスコープする.
*/

.webshop-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	/* 非レスポンシブ。幅を固定して常に横5列にし、画面が狭くても折り返さない */
	width: 1400px;
	margin: 0 auto;
}

.webshop-grid__item {
	flex: 0 0 264px;
	width: 264px;
}

.webshop-grid .webshop-grid__link {
	display: block;
	width: 264px;
	border: 1px solid #000;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
}

/* ---- 商品画像とその上に重ねる要素 ---- */

.webshop-grid__thumb {
	position: relative;
	width: 100%;
	height: 262px;
	background: #fff;
	box-sizing: border-box;
	overflow: hidden;
}

.webshop-grid .webshop-grid__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
}

/* ブランド画像はPSDと同じ実寸・同じ位置で左上に重ねる。
   max-width は、大きすぎる画像が登録されたときの保険 */
.webshop-grid .webshop-grid__brand {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	max-width: 60%;
	height: auto;
	border: 0;
}

/* 店舗名は白文字＋黒縁。paint-order で塗りを後に描くため、太さは狙いの2倍を指定する */
.webshop-grid__shop {
	position: absolute;
	right: 5px;
	bottom: 3px;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.2;
	color: #fff;
	-webkit-text-stroke: 4px #000;
	paint-order: stroke fill;
	white-space: nowrap;
}

/* ---- 商品名。横1列に必ず収める（あふれる分はJSで横方向に圧縮） ---- */

.webshop-grid__name {
	margin: 3px 0 0;
	padding: 0 4px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.3;
	color: #0019B0;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}

/* ---- 価格。税別（赤・大）と税込（黒・小）を1行に並べる ---- */

/* 価格は省略せず、あふれたぶんだけ横に縮めて収める（JSが scaleX を当てる）.
   左端を基準にしないと、縮めても右側が枠外に残る */
.webshop-grid__price > span {
	display: inline-block;
	transform-origin: left center;
	white-space: nowrap;
}

/* 価格が出ない商品でも高さを保つため、高さを固定する */
.webshop-grid__price {
	height: 27px;
	margin: 0 0 1px;
	padding: 0 4px;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	color: #000;
}

.webshop-grid__tax {
	font-size: 10px;
	font-weight: bold;
}

.webshop-grid__tax--ex {
	font-size: 12px;
	color: #C40000;
}

/* 税込ラベルは価格に密着させ、税別価格との間だけ空ける */
.webshop-grid__tax--in {
	margin-left: 6px;
	color: #000;
}

.webshop-grid__price-ex {
	margin: 0 4px 0 1px;
	font-size: 21px;
	font-weight: bold;
	color: #C40000;
}

.webshop-grid__price-in {
	margin-left: 1px;
	font-size: 13px;
	font-weight: bold;
	color: #000;
}

/* ---- 取得失敗時 ---- */

.webshop-grid-error {
	margin: 20px 0;
	text-align: center;
}