/* MYMOODS 商品一覧（コレクション/検索/カテゴリ）グリッド。
   Shopify の featured-collection カードを WooCommerce アーカイブで
   グリッド表示するためのレイアウト定義。カード自体の意匠は
   card-product-featured.css / product-card-badges.css / puffs-badge.css に依存。 */

.mymoods-product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--grid-desktop-horizontal-spacing, 16px) var(--grid-desktop-vertical-spacing, 16px);
	list-style: none;
	margin: 2rem 0 4rem;
	padding: 0;
}

@media screen and (max-width: 989px) {
	.mymoods-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 749px) {
	.mymoods-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--grid-mobile-horizontal-spacing, 8px) var(--grid-mobile-vertical-spacing, 8px);
	}
}

/* グリッドセル内でカードを幅いっぱいに収める（swiper 幅制約の代替） */
.mymoods-product-grid .featured-collection-product-item {
	width: 100%;
	margin: 0;
}

.mymoods-product-grid .mymoods-product__item,
.mymoods-product-grid .mymoods-product__card {
	width: 100%;
	height: 100%;
}

/* 画像を正方形に保つ */
.mymoods-product-grid .mymoods-product__image-wrapper {
	aspect-ratio: 1 / 1;
}

.mymoods-product-grid .mymoods-product__image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* レビュー星（Matrixify reviews.rating 由来）。--rating は 0〜5。 */
.mymoods-product__rating { display: flex; align-items: center; gap: 4px; margin: 4px 0 2px; }
.mymoods-product__stars {
	--pct: calc(var(--rating, 0) / 5 * 100%);
	display: inline-block; font-size: 1.3rem; line-height: 1; letter-spacing: 1px;
}
.mymoods-product__stars::before {
	content: "★★★★★";
	background: linear-gradient(90deg, #f5a623 var(--pct), rgba(0,0,0,.15) var(--pct));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.mymoods-product__rating-count { font-size: 1.1rem; color: rgba(var(--color-foreground), .6); }

/* 404 ページ */
.mymoods-404 { text-align: center; padding: 6rem 0 4rem; }
.mymoods-404__code { font-size: 8rem; font-weight: 800; line-height: 1; color: rgba(var(--color-foreground), .15); margin: 0; }
.mymoods-404__title { font-size: 2.4rem; margin: 1rem 0; }
.mymoods-404__text { color: rgba(var(--color-foreground), .7); margin-bottom: 2.5rem; }
.mymoods-404__search { display: flex; max-width: 520px; margin: 0 auto 2rem; gap: 8px; }
.mymoods-404__search-input { flex: 1; padding: 12px 16px; border: 1px solid rgba(var(--color-foreground), .2); border-radius: 999px; background: #fff; }
.mymoods-404__search-btn { padding: 12px 28px; border: none; border-radius: 999px; background: rgb(var(--color-button)); color: rgb(var(--color-button-text)); font-weight: 700; cursor: pointer; }
.mymoods-404__links { display: flex; gap: 12px; justify-content: center; margin-bottom: 4rem; flex-wrap: wrap; }
.mymoods-404__link { display: inline-block; padding: 12px 28px; border-radius: 999px; border: 1px solid rgba(var(--color-foreground), .25); text-decoration: none; color: rgb(var(--color-foreground)); font-weight: 600; }
.mymoods-404__suggest-title { font-size: 1.8rem; margin: 2rem 0 1.5rem; text-align: left; }

/* ===== コレクション/アーカイブ レイアウト（ライブ再現） ===== */
.mymoods-collection { padding-top: 1.2rem; }
.mymoods-collection__breadcrumb { font-size: 1.2rem; color: rgba(var(--color-foreground), .6); margin: 0 0 1rem; }
.mymoods-collection__breadcrumb a { color: rgb(63,134,39); text-decoration: none; }
.mymoods-collection__crumb-sep { margin: 0 .6rem; }

.mymoods-collection__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin: 0 0 1.6rem; }
.mymoods-collection__count { font-size: 1.4rem; }
.mymoods-collection__count strong { font-size: 1.8rem; margin: 0 .2rem; }
.mymoods-collection__controls { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.mymoods-collection__control { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.3rem; }
.mymoods-collection__control select { padding: .6rem 2.4rem .6rem 1rem; border: 1px solid rgba(var(--color-foreground), .3); border-radius: 6px; background: rgb(var(--color-background,255 255 255)); font-size: 1.3rem; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }

.mymoods-collection__layout { display: grid; grid-template-columns: 24rem 1fr; gap: 2.4rem; align-items: start; }
.mymoods-collection__sidebar { position: sticky; top: 1rem; }

.product-grid.grid--5-col-desktop { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1.2rem; margin: 0; padding: 0; }

.mymoods-collection__pagination {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin: 3rem 0 1rem;
}
.mymoods-collection__pagination .page-numbers {
	color: rgb(var(--color-foreground));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-width: 4.4rem;
	height: 4.4rem;
	padding: 0;
	text-decoration: none;
	font-size: 1.6rem;
	border: none;
	border-radius: 0;
	background: transparent;
}
.mymoods-collection__pagination a.page-numbers:not(.prev):not(.next):hover::after,
.mymoods-collection__pagination .page-numbers.current::after {
	content: '';
	display: block;
	width: 2rem;
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	background-color: currentColor;
	height: 0.1rem;
}
.mymoods-collection__pagination .page-numbers.current {
	background: transparent;
	color: rgb(var(--color-foreground));
	border-color: transparent;
}
.mymoods-collection__empty { padding: 6rem 0; text-align: center; }

@media screen and (max-width: 1200px) {
  .product-grid.grid--5-col-desktop { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media screen and (max-width: 989px) {
  .mymoods-collection__layout { grid-template-columns: 1fr; }
  .mymoods-collection__sidebar { position: static; }
  .product-grid.grid--5-col-desktop { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media screen and (max-width: 749px) {
  .product-grid.grid--5-col-desktop { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
  .mymoods-collection__toolbar { flex-direction: column; align-items: flex-start; }
}

/* グリッド内でカードをセル幅いっぱいに（card-product-featured.css の swiper 前提 flex を上書き） */
.product-grid .grid__item { min-width: 0; max-width: 100%; width: 100%; list-style: none; padding: 0; margin: 0; }
.product-grid .featured-collection-product-item { width: 100%; }
.product-grid .mymoods-product__item { width: 100%; max-width: 100%; flex: 1 1 100% !important; }
.product-grid .mymoods-product__card { width: 100%; }
.product-grid .mymoods-product__image-wrapper { width: 100%; }