/*
 * ご注文について(/shop/)
 * トークンは tokens.css。見出し・パンくず・余白は producers.css と共用
 */

.gzs-order__title{
  font-family: var(--gz-serif-ja);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

/* ---------- 入口(2つ) ---------- */
.gzs-order__entries{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-bottom: 72px;
}
.gzp .gzs-entry{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px 44px;
  border: 1px solid var(--gz-ink);
  color: var(--gz-ink);
  transition: background-color .2s ease;
}
.gzp .gzs-entry:hover{ background: var(--gz-paper); color: var(--gz-ink); }
.gzp .gzs-entry--first{ background: var(--gz-green); border-color: var(--gz-green); color: var(--gz-on-dark); }
.gzp .gzs-entry--first:hover{ background: var(--gz-green-deep); color: var(--gz-on-dark); }
.gzs-entry__label{
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gz-terracotta);
}
.gzs-entry--first .gzs-entry__label{ color: var(--gz-mint); }
.gzs-entry__title{
  font-family: var(--gz-serif-ja);
  font-size: 24px;
  letter-spacing: 0.08em;
  line-height: 1.6;
}
.gzs-entry__text{
  flex: 1;
  font-size: 14px;
  line-height: 2;
}
.gzs-entry__link{
  align-self: flex-start;
  margin-top: 8px;
  padding: 6px 0;
  border-bottom: 1px solid currentColor;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.gzs-entry__ext{ font-size: 11px; }

/* ---------- 注意書き ---------- */
.gzs-order__notes{
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 0;
}
.gzs-notes{
  margin: 0;
  padding: 28px 0 0;
  list-style: none;
  border-top: 1px solid var(--gz-line);
  font-size: 13px;
  line-height: 2;
  color: var(--gz-ink-soft);
}
.gzs-notes li{ padding-left: 1em; text-indent: -1em; }
.gzs-notes li::before{ content: "※"; }
.gzp .gzs-order__back{
  align-self: flex-start;
  margin-top: 24px;
  padding: 6px 0;
  border-bottom: 1px solid var(--gz-ink);
  font-size: 13px;
  letter-spacing: 0.08em;
}

@media (max-width: 767px){
  .gzs-order__title{ font-size: 30px; }
  .gzs-order__entries{ grid-template-columns: 1fr; gap: 20px; padding-bottom: 48px; }
  .gzp .gzs-entry{ padding: 32px 24px; }
  .gzs-entry__title{ font-size: 20px; }
}

/* ---------- ご購入ガイド(販売開始後の /shop/。template-parts/shop-guide.php) ---------- */
.gzs-guide__steps{ display: flex; flex-direction: column; gap: 40px; padding-bottom: 72px; }
.gzs-steps{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.gzs-steps__item{ display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--gz-ink); }
.gzs-steps__num{ font-family: var(--gz-serif-en); font-size: 28px; line-height: 1; color: var(--gz-terracotta); }
.gzs-steps__title{ font-family: var(--gz-serif-ja); font-size: 18px; letter-spacing: 0.08em; }
.gzs-steps__text{ font-size: 13px; line-height: 2; color: var(--gz-ink-soft); }
.gzp .gzs-guide__cta{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 32px;
  background: var(--gz-ink);
  color: var(--gz-cream);
  font-size: 14px;
  letter-spacing: 0.12em;
  transition: background-color .2s ease;
}
.gzp .gzs-guide__cta:hover{ background: var(--gz-green); color: var(--gz-cream); }
.gzs-guide__info{ display: flex; flex-direction: column; gap: 20px; padding-top: 0; padding-bottom: 72px; }
.gzs-info{ margin: 0; border-top: 1px solid var(--gz-line); }
.gzs-info__row{ display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--gz-line); }
.gzs-info dt{ font-size: 13px; color: var(--gz-ink-soft); }
.gzs-info dd{ margin: 0; font-size: 14px; line-height: 2; }
.gzs-info a{ border-bottom: 1px solid currentColor; }
.gzs-guide__legal{ margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; }

@media (max-width: 1023px){
  .gzs-steps{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px){
  .gzs-steps{ grid-template-columns: 1fr; gap: 24px; }
  .gzs-guide__steps, .gzs-guide__info{ padding-bottom: 48px; }
  .gzs-info__row{ grid-template-columns: 1fr; gap: 6px; }
  .gzp .gzs-guide__cta{ align-self: stretch; justify-content: center; }
}