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

.nicobay-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) {
	.nicobay-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

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

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

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

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

/* レビュー星（Matrixify reviews.rating 由来）。--rating は 0〜5。
   グリフはフォント依存の "★"（環境により □ の豆腐になる）をやめ、
   inc/woocommerce.php の nicobay_stars_html() と同じ星形パスを mask で描画する。
   5 つ分（1 個 20 + 間隔 2 = pitch 22、末尾の間隔なしで 108）を 1 枚の mask にし、
   塗りを linear-gradient で --rating の割合に切り替える。色も PDP と同じ #ffb400 / #e0e0e0。 */
.nicobay-product__rating { display: flex; align-items: center; gap: 4px; margin: 4px 0 2px; }
.nicobay-product__stars {
	--pct: calc(var(--rating, 0) / 5 * 100%);
	--nb-star-h: 1.3rem;
	--nb-stars-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 20'%3E%3Cg%3E%3Cpath d='M10 15l-5.878 3.09 1.123-6.545L.49 6.91l6.564-.955L10 0l2.945 5.955 6.564.955-4.755 4.635 1.123 6.545z'/%3E%3Cpath transform='translate(22,0)' d='M10 15l-5.878 3.09 1.123-6.545L.49 6.91l6.564-.955L10 0l2.945 5.955 6.564.955-4.755 4.635 1.123 6.545z'/%3E%3Cpath transform='translate(44,0)' d='M10 15l-5.878 3.09 1.123-6.545L.49 6.91l6.564-.955L10 0l2.945 5.955 6.564.955-4.755 4.635 1.123 6.545z'/%3E%3Cpath transform='translate(66,0)' d='M10 15l-5.878 3.09 1.123-6.545L.49 6.91l6.564-.955L10 0l2.945 5.955 6.564.955-4.755 4.635 1.123 6.545z'/%3E%3Cpath transform='translate(88,0)' d='M10 15l-5.878 3.09 1.123-6.545L.49 6.91l6.564-.955L10 0l2.945 5.955 6.564.955-4.755 4.635 1.123 6.545z'/%3E%3C/g%3E%3C/svg%3E");
	display: inline-block;
	width: calc(var(--nb-star-h) * 5.4);
	height: var(--nb-star-h);
	background: linear-gradient(90deg, #ffb400 var(--pct), #e0e0e0 var(--pct));
	-webkit-mask-image: var(--nb-stars-mask);
	mask-image: var(--nb-stars-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.nicobay-product__rating-count { font-size: 1.1rem; color: rgba(var(--color-foreground), .6); }

/* 404 ページ */
.nicobay-404 { text-align: center; padding: 6rem 0 4rem; }
.nicobay-404__code { font-size: 8rem; font-weight: 800; line-height: 1; color: rgba(var(--color-foreground), .15); margin: 0; }
.nicobay-404__title { font-size: 2.4rem; margin: 1rem 0; }
.nicobay-404__text { color: rgba(var(--color-foreground), .7); margin-bottom: 2.5rem; }
.nicobay-404__search { display: flex; max-width: 520px; margin: 0 auto 2rem; gap: 8px; }
.nicobay-404__search-input { flex: 1; padding: 12px 16px; border: 1px solid rgba(var(--color-foreground), .2); border-radius: 999px; background: #fff; }
.nicobay-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; }
.nicobay-404__links { display: flex; gap: 12px; justify-content: center; margin-bottom: 4rem; flex-wrap: wrap; }
.nicobay-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; }
.nicobay-404__suggest-title { font-size: 1.8rem; margin: 2rem 0 1.5rem; text-align: left; }

/* ===== コレクション/アーカイブ レイアウト（ライブ再現） ===== */
/* sections/main-collection-product-grid.liquid の section-{id}-padding（padding-top: 12px）相当 */
.nicobay-collection { padding-top: 1.2rem; }

/* ファセットツールバー（件数・表示順・在庫・ページャー）。
   意匠は component-facets.css が担当し、ここでは
   sections/main-collection-product-grid.liquid のセクション内 <style> 相当のみ再現する。
   component-facets.css の読み込み順に依存しないよう .nicobay-collection で詳細度を上げる。 */
.nicobay-collection .facets__wrapper { display: flex; flex-direction: row; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.nicobay-collection .facet-filters { display: flex; align-items: center; gap: 1rem; }

.nicobay-collection__layout { display: grid; grid-template-columns: 24rem 1fr; gap: 2.4rem; align-items: start; }
.nicobay-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; }

.nicobay-collection .facets-pagination { margin: 3rem 0 1rem; }
.nicobay-collection .facets-container .facets-pagination { margin: 0; }
.nicobay-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) {
  .nicobay-collection__layout { grid-template-columns: 1fr; }
  .nicobay-collection__sidebar { position: static; }
  .product-grid.grid--5-col-desktop { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
/* 絞り込みドロワー。
   デスクトップは <details open> のまま展開して従来どおりサイドバーに見せ、
   トグルは隠す。989px 以下では本番と同じく、緑のピル（実測: w=360 h=50 /
   background rgb(22,135,6) / radius 4px / padding 15px / アイコン 30x20 +
   ラベル fs15 fw400 白・左マージン 10px）だけを出して中身は畳む。
   移行後は常時展開していたため、モバイルでグリッド開始が y=380 → y=2056 と
   1676px 押し下げられていた。 */
.nicobay-collection__facets-toggle {
  display: none;
}

@media screen and (max-width: 989px) {
  .nicobay-collection__sidebar {
    width: 100%;
  }

  .nicobay-collection__facets-toggle {
    display: block;
    list-style: none;
    cursor: pointer;
  }

  .nicobay-collection__facets-toggle::-webkit-details-marker {
    display: none;
  }

  .nicobay-collection__facets-toggle-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-radius: 4px;
    background-color: rgb(22, 135, 6);
    color: #fff;
  }

  .nicobay-collection__facets-toggle .svg-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 20px;
  }

  .nicobay-collection__facets-toggle .svg-wrapper svg {
    width: 20px;
    height: 20px;
  }

  .nicobay-collection__facets-toggle-label {
    margin-left: 10px;
    font-size: 1.5rem;
    font-weight: 400;
    /* 本番のピルは高さ 50px（padding 15px + 中身 20px）。行高を 20px に固定する。 */
    line-height: 20px;
  }

  /* 開いた時だけサイドバー本体を見せる。閉じている間は <details> が中身を隠す。 */
  .nicobay-collection__facets[open] .custom-filters-sidebar {
    margin-top: 16px;
  }
}

@media screen and (max-width: 749px) {
  .product-grid.grid--5-col-desktop { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
  .nicobay-collection .facets__wrapper { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* STD-CTA: Shopify の CTA は <button>（UA の下線が付かない）。Woo 版は <a> のため下線を消す。
   出典: snippets/card-product-featured.liquid の .featured-collection-cart-btn。 */
.nicobay-collection a.featured-collection-cart-btn { text-decoration: none; }

/* STD-PRICE: WooCommerce の価格 HTML（.woocommerce-Price-amount）には
   card-product-featured.css の .price-item 系セレクタが当たらないため、同じ値を移植する。 */
.nicobay-collection .nicobay-product__price .woocommerce-Price-amount { font-size: 1.4rem; }
.nicobay-collection .nicobay-product__price ins { text-decoration: none; }
.nicobay-collection .nicobay-product__price ins .woocommerce-Price-amount { color: #ff4757; }
.nicobay-collection .nicobay-product__price del { text-decoration: none; opacity: 1; }
.nicobay-collection .nicobay-product__price del .woocommerce-Price-amount { font-size: 1.2rem; text-decoration: line-through; }

/* STD-ML: バッジ帯（ML/パフ）はブランド行のすぐ後ろ。ライブでもブランドが長い商品では
   バッジが 2 行目に折り返るが、そのとき左寄せで全体が見えている
   （出典: card-product-featured.css の .product-info-wrapper — margin や flex-shrink の指定は無い）。
   以前の再現で付けていた margin-left:auto / flex-shrink:0 は、折り返した行でバッジを
   カード右端の外まで押し出して切れさせていたため撤去する。 */

/* STD-PRICE-ROW: 価格 + 割引バッジの行（card-product-featured.css の
   .nicobay-product__price-row / .nicobay-product__discount-badge-inline を移植）。 */
.nicobay-collection .nicobay-product__price-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.nicobay-collection .nicobay-product__discount-badge-inline {
	display: inline-block;
	background-color: #e5323e;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	padding: 0.15em 0.5em;
	border-radius: 4px;
	line-height: 1.2;
	white-space: nowrap;
}

/* STD-CARD-HEIGHT: 同じ行のカードを等高にし、CTA を下端で揃える。
   ライブはブランド行の文字数がほぼ揃っているため自然に揃うが、Woo 側は
   ブランド行が折り返る商品が混ざるとカード丈がバラつき、行間に隙間が残る。
   グリッドセル（.grid__item）は既に stretch なので、内側を縦フレックスで伸ばす。 */
.nicobay-collection .product-grid .grid__item,
.nicobay-collection .product-grid .featured-collection-product-item { display: flex; }
.nicobay-collection .product-grid .nicobay-product__item,
.nicobay-collection .product-grid .nicobay-product__card,
.nicobay-collection .product-grid .nicobay-product__card-link { display: flex; flex-direction: column; }
.nicobay-collection .product-grid .nicobay-product__card,
.nicobay-collection .product-grid .nicobay-product__card-link { flex: 1 1 auto; }
.nicobay-collection .product-grid .featured-collection-card__cart-button-wrapper { margin-top: auto; }

/* グリッド内でカードをセル幅いっぱいに（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 .nicobay-product__item { width: 100%; max-width: 100%; flex: 1 1 100% !important; }
.product-grid .nicobay-product__card { width: 100%; }
.product-grid .nicobay-product__image-wrapper { width: 100%; }