/* 商品詳細の下半分（_show-story・_show-reviews・_show-more）と、スマホの下に貼りつく購入の帯 */

/* 収穫と生産者の帯 */
.harv { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: clamp(80px, 10vw, 140px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.harv > div { padding: 28px clamp(16px, 2vw, 32px); border-left: 1px solid var(--rule); min-width: 0; }
.harv > div:first-child { border-left: 0; padding-left: 0; }
.harv small { display: block; font-size: 11px; letter-spacing: .22em; color: var(--ink-2); }
.harv b { display: block; margin-top: 6px; font-family: var(--f-min); font-weight: 600; font-size: clamp(20px, 2.1vw, 28px); letter-spacing: .06em; line-height: 1.5; }
.harv b a { text-decoration: none; }
.harv b a:hover { text-decoration: underline; }
.harv span { font-size: 12px; color: var(--ink-2); }

/* 生産者の言葉 */
.story2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding-top: clamp(100px, 12vw, 170px); }
.story2__ph { grid-column: 1 / span 4; grid-row: 1 / span 2; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mist); }
.story2__ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.04); }
.story2 blockquote { grid-column: 6 / span 7; margin: 0; align-self: end; }
.story2 blockquote p { font-family: var(--f-min); font-weight: 500; font-size: clamp(24px, 2.8vw, 40px); line-height: 1.9; letter-spacing: .08em; font-feature-settings: "palt" 1; text-wrap: balance; }
.story2 blockquote footer { margin-top: 18px; font-size: 12px; letter-spacing: .16em; color: var(--ink-2); }
.story2 blockquote footer a { text-decoration: none; }
.story2 .s-tx { grid-column: 6 / span 6; align-self: start; margin-top: 28px; font-size: 14px; line-height: 2.15; color: var(--ink-2); }
.story2 .s-tx .lnk { margin-top: 12px; color: var(--ink); }
.story2:not(:has(.story2__ph)) blockquote, .story2:not(:has(.story2__ph)) .s-tx { grid-column: 2 / span 9; }

/* レビュー */
.rv { padding-top: clamp(100px, 12vw, 160px); }
.rvw { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.rvw-sum { grid-column: 1 / span 4; position: sticky; top: calc(var(--hd) + 32px); }
.rvw-avg { display: flex; align-items: baseline; gap: 14px; }
.rvw-avg b { font-family: var(--f-min); font-weight: 600; font-size: 64px; line-height: 1; }
.rvw-sum > p { margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.rvw-sum .rvw-none { margin-top: 0; font-size: 14px; line-height: 2; color: var(--ink); }
.rvw-sum .btn { margin-top: 28px; }
.bars { display: grid; gap: 8px; margin-top: 24px; }
.bar-r { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 12px; color: var(--ink-2); }
.bar-r .tnum { text-align: right; }
.bar-r i { position: relative; display: block; height: 4px; overflow: hidden; background: var(--rule); }
.bar-r i::after { content: ""; position: absolute; inset: 0; background: var(--star); transform-origin: left; transform: scaleX(var(--w, 0)); transition: transform 1.3s var(--ease); }
.rvw.is-wait .bar-r i::after { transform: scaleX(0); }
.rvw-main { grid-column: 6 / span 7; min-width: 0; }
.rvw-main .chips { margin-bottom: 8px; }
.rvw-main .chip .tnum { margin-left: 2px; opacity: .6; }
.rc { padding: 26px 0; border-bottom: 1px solid var(--rule); }
.rc:first-of-type { padding-top: 12px; }
.rc.is-gone { animation: rv-out .45s var(--ease) forwards; }
@keyframes rv-out { to { opacity: 0; transform: translateX(-12px); } }
.rc-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--ink-2); }
.rc-hd .who { color: var(--ink); font-weight: 500; }
.rc-del { margin-left: auto; padding: 6px 0; border: 0; background: none; font-size: 11px; letter-spacing: .12em; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.rc-del:hover { color: var(--danger); }
.rc h3 { margin-top: 10px; font-size: 17px; letter-spacing: .06em; }
.rc p { margin-top: 6px; font-size: 14px; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-more, .rv-empty { padding-top: 18px; }
.rv-empty { font-size: 13px; color: var(--ink-2); }

/* 星を選ぶ（右から並べ、:has で左側も塗る） */
.rv-stars { border: 0; padding: 0; margin: 0 0 var(--s-5); min-width: 0; }
.rv-stars__row { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin-top: 8px; }
.rv-stars__row input { position: absolute; opacity: 0; pointer-events: none; }
.rv-stars__row label { display: grid; place-items: center; width: 40px; height: 40px; cursor: pointer; color: var(--rule-strong); transition: color var(--t-1), transform var(--t-1) var(--spring); }
.rv-stars__row svg { width: 28px; height: 28px; fill: currentColor; }
.rv-stars__row input:checked ~ label, .rv-stars__row input:checked + label, .rv-stars__row label:hover, .rv-stars__row label:hover ~ label { color: var(--star); }
.rv-stars__row:hover label:not(:hover):not(:hover ~ label) { color: var(--rule-strong); }
.rv-stars__row input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.rv-stars__row label:active { transform: scale(.88); }

/* 組み合わせ */
.bd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.bd-it { grid-column: 1 / span 8; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 20px); padding: 4px; overflow-x: auto; scrollbar-width: none; }
.bd-it::-webkit-scrollbar { display: none; }
.bd-c { position: relative; display: block; flex: 0 0 clamp(120px, 13vw, 180px); cursor: pointer; }
.bd-c input { position: absolute; opacity: 0; }
.bd-ph { display: block; aspect-ratio: 1; overflow: hidden; background: var(--mist); transition: opacity var(--t-2), filter var(--t-2); }
.bd-ph img { width: 100%; height: 100%; object-fit: cover; }
.bd-c:not(:has(input:checked)) .bd-ph { opacity: .4; filter: grayscale(.8); }
.bd-c .box { position: absolute; z-index: 1; top: 8px; left: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(244, 244, 240, .9); transition: background-color var(--t-2); }
.bd-c .box svg { width: 12px; height: 12px; stroke: var(--surface); stroke-width: 2.4; fill: none; opacity: 0; }
.bd-c:has(input:checked) .box { background: var(--nasu); }
.bd-c:has(input:checked) .box svg { opacity: 1; }
.bd-c:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.bd-tx { display: block; margin-top: 8px; font-size: 12px; line-height: 1.6; }
.bd-tx b { display: block; font-family: var(--f-min); font-size: 14px; }
.bd-plus { flex: none; font-family: var(--f-min); font-size: 22px; color: var(--ink-2); }
.bd-sum { grid-column: 9 / span 4; }
.bd-sum p { font-size: 12px; color: var(--ink-2); }
.bd-sum b { display: block; margin: 4px 0 18px; font-family: var(--f-min); font-weight: 600; font-size: 32px; }
.pd-page ~ .section { margin-top: clamp(96px, 11vw, 150px); }
.pd-foot { padding-bottom: clamp(110px, 12vw, 170px); }

/* スマホの下に貼りつく購入の帯（カートの帯の代わりに出す） */
.itbar { display: none; }
@media (max-width: 899px) {
  .harv { grid-auto-flow: row; }
  .harv > div { border-left: 0; border-top: 1px solid var(--rule); padding: 20px 0; }
  .harv > div:first-child { border-top: 0; }
  .story2 { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .story2__ph { grid-column: 1; grid-row: auto; width: 62%; }
  .story2 blockquote, .story2 .s-tx, .story2:not(:has(.story2__ph)) blockquote, .story2:not(:has(.story2__ph)) .s-tx { grid-column: 1; }
  .story2 blockquote p { font-size: 21px; }
  .story2 .s-tx { margin-top: 0; }
  .rvw { grid-template-columns: minmax(0, 1fr); }
  .rvw-sum, .rvw-main { grid-column: 1; position: static; }
  .rvw-main { margin-top: 32px; }
  .rvw-avg b { font-size: 52px; }
  .bd { grid-template-columns: minmax(0, 1fr); }
  .bd-it, .bd-sum { grid-column: 1; }
  .bd-c { flex-basis: 34vw; }
  body.pd #cartbar { display: none; }
  body.pd.has-cartbar main { padding-bottom: 0; }
  body.pd main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .itbar { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px var(--gr) calc(10px + env(safe-area-inset-bottom, 0px)) var(--g); border-top: 1px solid var(--rule); background: rgba(244, 244, 240, .86); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); transition: transform .5s var(--ease); }
  .itbar.is-off { transform: translateY(110%); }
  .itbar small { display: block; overflow: hidden; font-size: 11px; line-height: 1.4; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
  .itbar b { font-family: var(--f-min); font-size: 20px; font-weight: 600; }
  .itbar .btn { flex: none; min-height: 50px; padding: 0 22px; letter-spacing: .12em; }
}