/* Shared layout and interaction fixes. */
img { max-width: 100%; }
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus { outline: 2px solid #b83a2a; }
.mail-note, .fx-status { margin: 12px 0; font-size: 13px; line-height: 1.6; }
.mail-preview { width: 100%; min-height: 180px; padding: 12px; font: inherit; }
.mail-result { margin: 18px 0; padding: 16px; border: 1px solid #b8956a; border-radius: 8px; background: #f7f5f0; color: #26221c; }
.mail-result a, .mail-result button { display: inline-block; margin: 8px 12px 0 0; padding: 10px 14px; border: 1px solid #b83a2a; border-radius: 4px; background: white; color: #b83a2a; cursor: pointer; font: inherit; }
.mail-result a { text-decoration: none; }
.mail-result label { display: block; margin: 10px 0; }
.modal-box { max-height: 90dvh; overflow-y: auto; }
.modal-form textarea { display: block; width: 100%; padding: 14px; font: inherit; border: 1px solid #cfc5b8; border-radius: 4px; }
[data-lang]:not(.active) { display: none !important; }
.modal-form label { font-size: 14px; }
.modal-form input, .modal-form select { width: 100%; }
.hbft-song { background: #efeae0; border-top: 1px solid #d6ccbc; color: #6b6355; font-size: 14px; }
.hbft-song .w { max-width: 1120px; margin: auto; padding: 48px 24px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.hbft-song h4 { color: #26221c; margin-bottom: 14px; }
.hbft-song ul { list-style: none; padding: 0; }
.hbft-song li { margin: 8px 0; }
.hbft-song a { color: inherit; text-decoration: none; }
.hbft-song .lg { font: bold 24px Georgia, serif; color: #26221c; }
.hbft-song .tag, .hbft-song .ct { margin: 14px 0; }
.hbft-song .bar { padding: 18px 24px; text-align: center; border-top: 1px solid #d6ccbc; font-size: 13px; }
.hbft-song .bar a { margin: 0 8px; }
.mobile-site-nav { display: none; position: relative; }
.mobile-site-nav summary { cursor: pointer; color: #b83a2a; padding: 8px; }
.mobile-site-nav > div { position: absolute; inset: 100% 0 auto auto; min-width: 210px; background: #f7f5f0; border: 1px solid #d6ccbc; padding: 12px; z-index: 100; }
.mobile-site-nav a { display: block; padding: 8px; color: #26221c; }
@media (max-width: 1023px) { .mobile-site-nav { display: block; } }
.calc > *, .hero .wrap > *, .grid > * { min-width: 0; }
.hero .wrap > .stats { grid-column: 1 / -1; width: 100%; }
.hero .stats { flex-wrap: wrap !important; gap: 24px !important; }
.hero .stats > div { flex: 1 1 200px !important; padding-right: 0; }
.breakdown-item .price, .big-price .price { overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .hero .stats { flex-wrap: wrap !important; gap: 22px !important; }
  .hero .stats > div { flex: 1 1 140px !important; padding-right: 0; }
}
@media (max-width: 860px) { .hbft-song .w { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .hbft-song .w { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
  .topbar .wrap { gap: 12px; height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .card .top { flex-wrap: wrap; }
  .modal-box { padding: 24px; }
  .nav-in { flex-wrap: wrap; gap: 12px; }
}