/*! ============================================================================ * lp-goods.css — 動的商品ラインナップ（lp-goods.js）用の追加スタイル * ---------------------------------------------------------------------------- * 既存 lp-style.css の .products / .product / .product-tabs / .btn を流用し、 * 本ファイルでは「不足分の補完」のみを行う（lp-style.css の後に読み込む）。 * 色・角丸などは既存のデザイントークン（:root 変数）を継承。 * ========================================================================== */ /* --- カテゴリ絞り込みタブ：件数が増えても破綻しないよう折り返し可に --------- */ .lp-goods__tabs { flex-wrap: wrap; } .lp-goods__tabs .product-tab { flex: 0 1 auto; /* 既存の flex:1（均等幅）を上書き。内容幅で並べる */ padding: 10px 14px; } /* --- 画像リンク（カードのサムネイルを商品詳細へ） ------------------------- */ .product__img-link { display: block; flex: none; } .product__img-link .product__img { display: block; } /* --- 商品名リンク：色は本文色を継承、ホバーで下線 ------------------------- */ .product__name a { color: inherit; text-decoration: none; } .product__name a:hover { text-decoration: underline; } /* --- ★評価の差込口（ReviCo 星ウィジェット） ----------------------------- */ .product__rating { margin: 2px 0 8px; line-height: 1; } .product__rating:empty { display: none; /* mode:'off' や ReviCo 未描画時は詰める（空き防止） */ } /* --- 詳細ボタンを で使う際の体裁（.btn/.product__btn を継承しつつ補正） - */ a.product__btn { display: inline-block; text-align: center; text-decoration: none; } /* --- ⑤「カートに入れる」ボタン（