/* お店（goods/）だけの見た目。販売状況の札・残り時間・期間限定の枠。幅での切り替えは site-responsive.css の K4 の区切り */

/* 販売状況の札（受付前・販売中・残りわずか・終了） */
.goods-tag { font-size: .78rem; font-weight: 700; letter-spacing: .08em; line-height: 1.4; }
.goods-tag--on { color: var(--night); background: var(--paper); }
.goods-tag--soon { color: var(--night); background: var(--kitsunebi); }
.goods-tag--few { color: var(--paper); background: var(--hi); }
.goods-tag--off { color: var(--paper); background: rgb(255 246 232 / .22); animation: none; transform: rotate(2deg); }

/* 終わった品は写真を落ち着かせる */
.goods-card--off .goods-image img { filter: grayscale(.65) brightness(.62); }
.goods-card--off h3 { color: rgb(255 246 232 / .78); }

.goods-flags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .55rem !important; }
.goods-flag { padding: .05rem .5rem; border: 1px solid rgb(245 195 75 / .38); color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .08em; line-height: 1.6; }
.goods-card .goods-period { margin-top: .45rem; }
.goods-card .goods-remaining { display: inline-block; margin: .15rem 0 .35rem; color: var(--gold); font-size: .86rem; font-weight: 700; letter-spacing: .04em; }
.goods-card .goods-remaining--soon { color: var(--kitsunebi); }
.goods-card .goods-remaining--few { color: #ff9a8f; }
.goods-card-body a { display: inline-block; margin-top: .35rem; font-size: .88rem; }
.goods-image.is-soon { display: grid; place-items: center; background: linear-gradient(135deg, rgb(245 195 75 / .08), rgb(143 216 255 / .05)); }
.goods-image.is-soon span { padding: .4rem .7rem; border: 1px solid rgb(245 195 75 / .45); color: var(--gold); font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
.goods-card:has(.goods-image.is-soon) .goods-image { min-height: 12rem; }
.goods-card:has(.goods-image:not(.is-soon)) .goods-image { display: grid; place-items: end center; background: radial-gradient(ellipse at 50% 60%, rgb(255 178 94 / .18), transparent 68%), var(--lacquer); }
.goods-card:has(.goods-image:not(.is-soon)) .goods-image img { width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }

/* 期間限定の枠（いちばん早く終わる品・次に受付が始まる品） */
.goods-spotlight { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 2.5rem; }
.goods-spotlight[hidden] { display: none; }
.goods-spot { position: relative; display: grid; align-content: start; gap: .9rem; padding: clamp(1.2rem, 3vw, 1.8rem); overflow: hidden; border: 1px solid rgb(245 195 75 / .42); background: linear-gradient(145deg, rgb(59 32 56 / .66), rgb(26 14 20 / .9)); }
.goods-spot--soon { border-color: rgb(143 216 255 / .42); }
.goods-spot::after { position: absolute; top: -3rem; right: -3rem; width: 9rem; height: 9rem; border-radius: 50%; background: radial-gradient(circle, rgb(245 195 75 / .2), transparent 70%); content: ""; pointer-events: none; }
.goods-spot--soon::after { background: radial-gradient(circle, rgb(143 216 255 / .2), transparent 70%); }
.goods-spot-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0; }
.goods-spot .goods-tag { position: static; display: inline-block; padding: .25rem .6rem; animation: none; transform: none; }
.goods-spot-period { color: var(--muted); font-size: .82rem; }
.goods-spot-names { display: grid; gap: .15rem; padding: 0; margin: 0; list-style: none; font-family: var(--mincho); font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.5; }