.hero-tiles .hero-chooser { width: 100%; padding: 0; border: 0; border-right: 2px solid #fff; border-radius: 0; font: inherit; text-align: left; cursor: pointer; appearance: none; }
.hero-tiles .hero-chooser:focus-visible { outline-offset: -5px; }
.hero-tiles .hero-chooser b { transition: background-color .2s ease; }
.hero-tiles .hero-chooser:hover b, .hero-tiles .hero-chooser:focus-visible b { background: #ffffff24; }
.hero-choice-dialog { position: fixed; inset: var(--choice-top,20px) auto auto var(--choice-left,20px); width: min(680px,calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 40px); margin: 0; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid #bdcbb7; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 60px #10281f30; }
.hero-choice-dialog--stores { width: min(430px,calc(100vw - 40px)); }
.hero-choice-dialog[open] { animation: hero-choice-reveal .18s ease-out; }
.hero-choice-dialog::backdrop { background: #0d251f45; animation: hero-choice-backdrop .18s ease-out; }
.hero-choice-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; border-bottom: 1px solid #d4ddce; background: var(--paper); }
.hero-choice-kicker { margin-bottom: 8px; color: #759075; font: 700 .625rem/1.7 "Helvetica Neue",Arial,sans-serif; letter-spacing: .14em; }
.hero-choice-header h2 { margin: 0; color: var(--green); font: 600 1.5rem/1.5 "Yu Mincho","Hiragino Mincho ProN",serif; }
.hero-choice-close { display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border: 1px solid #b7c5af; border-radius: 50%; color: var(--green); background: transparent; font: 300 1.5rem/1 Arial,sans-serif; cursor: pointer; }
.hero-choice-close:hover, .hero-choice-close:focus-visible { background: #edf1e8; }
.hero-choice-body { padding: 22px 28px 28px; }
.hero-choice-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.hero-choice-groups > nav { min-width: 0; }
.hero-choice-groups h3 { margin: 0 0 12px; color: #61765f; font-size: .8125rem; font-weight: 700; line-height: 1.8; }
.hero-choice-link { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 46px; padding: 10px 0; border-bottom: 1px solid #d4ddce; color: var(--green); font-size: .875rem; font-weight: 600; line-height: 1.8; }
.hero-choice-link span { display: inline-block; flex: none; transition: transform .2s ease; }

.hero-choice-link:hover, .hero-choice-link:focus-visible { color: var(--green-2); }
@keyframes hero-choice-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-choice-backdrop { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) {
  .hero-tiles .hero-chooser { border-bottom: 2px solid #fff; }
  .hero-tiles .hero-chooser:nth-child(2) { border-right: 0; }
  .hero-choice-dialog { inset: auto 0 0; width: 100%; max-height: calc(100dvh - 32px); border: 0; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .hero-choice-dialog[open] { animation-name: hero-choice-sheet; }
  .hero-choice-header { padding: 20px 24px; }
  .hero-choice-header h2 { font-size: 1.25rem; }
  .hero-choice-body { padding: 20px 24px 28px; }
  .hero-choice-groups { grid-template-columns: 1fr; gap: 24px; }
  .hero-choice-groups h3 { margin-bottom: 6px; }
  .hero-choice-link { min-height: 46px; font-size: .8125rem; }
}
@keyframes hero-choice-sheet { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-choice-dialog[open], .hero-choice-dialog::backdrop { animation: none; }
  .hero-choice-link span, .hero-tiles img, .hero-tiles .hero-chooser b { transition: none; }
}
