/* 商品の箱（モジュール goods）の最小限の形。色・大きさ・並べ方はテーマの CSS で上書きする（class は knk-goods…）。
   高さを先に取っておき、値が入っても下の文章が動かないようにする */
.knk-goods { margin: 0; }
.knk-goods-body { display: grid; gap: 8px; }
.knk-goods-main { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.knk-goods-images { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: #f3f4f6; }
.knk-goods-video .knk-goods-images { aspect-ratio: 2 / 3; }
.knk-goods-images img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.knk-goods-video .knk-goods-images img { object-fit: cover; }
/* 画像が2枚以上あれば、JS が is-on を順に付け替える（フェード）。JS がなければ1枚目 */
.knk-goods-images img + img { opacity: 0; }
.knk-goods-images.is-fading img { opacity: 0; transition: opacity .6s; }
.knk-goods-images.is-fading img.is-on { opacity: 1; }
.knk-goods-title { display: block; min-height: 1.4em; overflow-wrap: anywhere; }
.knk-goods-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.knk-goods-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border: 1px solid currentColor; border-radius: 8px; color: inherit; text-decoration: none; }
.knk-goods-button[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.knk-goods-note { font-size: .75em; }
.knk-goods-search { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
@media (prefers-reduced-motion: reduce) { .knk-goods-images.is-fading img { transition: none; } }