/* 雅 miyabi — レンタル着物一覧・詳細ページ（B案のデザインに合わせた追加分）
   Loaded after design.css on the kimono pages only. Uses the B tokens (--shu, --ink, --mount …). */

#miyabi-site-v12.m-kimono-page { --bottom-nav-height:76px; }
#miyabi-site-v12.m-kimono-page .m-section { padding:40px 0 56px; }
#miyabi-site-v12 .m-crumb { margin:0 0 22px; font-size:13px; font-weight:700; color:var(--muted); }
#miyabi-site-v12 .m-crumb a { color:var(--shu-deep); text-decoration:none; }
#miyabi-site-v12 .m-crumb a:hover { text-decoration:underline; }
#miyabi-site-v12.m-kimono-page .m-opener h1 { margin:0; font-size:28px; line-height:1.5; letter-spacing:.06em; }

/* ---------- Age chips ---------- */
#miyabi-site-v12 .m-age-chip { display:inline-block; padding:2px 11px; border-radius:999px; font:700 12px/1.7 var(--maru); background:#fce4e7; color:#9b2f43; }
#miyabi-site-v12 .m-age--5 .m-age-chip, #miyabi-site-v12 .m-age-chip.m-age--5 { background:#e6f0d8; color:#3f5f22; }
#miyabi-site-v12 .m-age--7 .m-age-chip, #miyabi-site-v12 .m-age-chip.m-age--7 { background:#eee7f6; color:#5b4386; }

/* ---------- List ---------- */
#miyabi-site-v12 .m-kimono-filter { margin-top:18px; }
#miyabi-site-v12 .m-kimono-filter button span { margin-left:4px; font-weight:500; opacity:.8; }
#miyabi-site-v12 .m-kimono-grid { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 14px; margin:22px 0 0; padding:0; }
#miyabi-site-v12 .m-kimono-card[hidden] { display:none; }
#miyabi-site-v12 .m-kimono-link { display:block; color:var(--ink); text-decoration:none; border-radius:6px; }
#miyabi-site-v12 .m-kimono-link:active { opacity:.8; }
#miyabi-site-v12 .m-kimono-card .m-photo-slot { --flap:22px; padding:7px; }
#miyabi-site-v12 .m-kimono-card .m-photo-slot--filled > img { top:7px; left:7px; width:calc(100% - 14px); height:calc(100% - 14px); }
#miyabi-site-v12 .m-kimono-card .m-photo-slot::after { inset:3px; }
#miyabi-site-v12 .m-kimono-card-body { padding:12px 2px 0; }
#miyabi-site-v12 .m-kimono-name { margin:6px 0 0; font-size:17px; line-height:1.5; }
#miyabi-site-v12 .m-kimono-price { margin:4px 0 0; font-size:12px; font-weight:700; color:var(--muted); line-height:1.7; }
#miyabi-site-v12 .m-kimono-price strong { display:block; font-size:17px; color:var(--ink); }
#miyabi-site-v12 .m-kimono-more-link { display:inline-block; margin-top:6px; font-size:13px; font-weight:700; color:var(--shu-deep); }
#miyabi-site-v12 .m-kimono-help { margin-top:40px; padding:22px 20px; border-radius:24px; background:var(--sakura); }
#miyabi-site-v12 .m-kimono-help h2 { margin:0; font-size:19px; }
#miyabi-site-v12 .m-kimono-help p { margin:6px 0 14px; color:var(--muted); font-size:14px; }
#miyabi-site-v12 .m-kimono-help .m-button { width:100%; }

/* ---------- Detail ---------- */
#miyabi-site-v12 .m-kimono-photos { list-style:none; display:flex; gap:14px; margin:0 -20px; padding:4px 20px 16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:20px; scrollbar-width:none; }
#miyabi-site-v12 .m-kimono-photos::-webkit-scrollbar { display:none; }
#miyabi-site-v12 .m-kimono-photos > li { flex:0 0 86%; max-width:420px; scroll-snap-align:start; }
#miyabi-site-v12 .m-kimono-photos > li:only-child { flex-basis:100%; margin-inline:auto; }
#miyabi-site-v12 .m-kimono-title { margin-top:18px; }
#miyabi-site-v12 .m-kimono-title h1, #miyabi-site-v12 .m-kimono-title h2 { margin:8px 0 0; font-size:26px; line-height:1.5; }
#miyabi-site-v12 .m-kimono-title .m-note { margin-top:2px; }
#miyabi-site-v12 .m-kimono-panel { margin-top:16px; padding:20px 20px 12px; border-radius:24px; background:#fff; border:2px solid var(--line); }
#miyabi-site-v12 .m-kimono-panel h2, #miyabi-site-v12 .m-kimono-panel h3 { margin:0 0 6px; font-size:17px; }
#miyabi-site-v12 .m-kimono-panel > p { margin:4px 0 8px; font-size:15px; }
#miyabi-site-v12 .m-kimono-panel .m-price-list { margin:0 0 6px; }
#miyabi-site-v12 .m-kimono-panel .m-price-list dd { font-size:17px; }
#miyabi-site-v12 .m-kimono-notes { margin:4px 0 8px; padding-left:1.2em; font-size:14px; line-height:1.9; }
#miyabi-site-v12 .m-kimono-cta { margin-top:22px; padding:22px 20px 14px; border-radius:24px; background:var(--sakura); text-align:center; }
#miyabi-site-v12 .m-kimono-cta .m-button { width:100%; min-height:58px; font-size:16px; }
#miyabi-site-v12 .m-kimono-cta .m-note { margin-top:10px; }
#miyabi-site-v12 .m-kimono-more { background:var(--nanohana); }
#miyabi-site-v12 .m-kimono-more h2 { margin:0; font-size:21px; }
#miyabi-site-v12 .m-kimono-grid--row { display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; margin:16px -20px 0; padding:6px 20px 18px; scroll-padding-inline:20px; scrollbar-width:none; }
#miyabi-site-v12 .m-kimono-grid--row::-webkit-scrollbar { display:none; }
#miyabi-site-v12 .m-kimono-grid--row > li { flex:0 0 42%; max-width:200px; scroll-snap-align:start; }

/* ---------- Fixed bottom bar (back + LINE) ---------- */
#miyabi-site-v12 .m-kimono-bar { position:fixed; z-index:30; left:0; right:0; bottom:0; display:flex; gap:10px; padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background:#fff; border-radius:20px 20px 0 0; box-shadow:0 -6px 24px #3b262117; }
#miyabi-site-v12 .m-kimono-bar a { display:flex; align-items:center; justify-content:center; gap:6px; min-height:52px; border-radius:999px; font:700 15px/1.3 var(--maru); text-decoration:none; }
#miyabi-site-v12 .m-kimono-bar-back { flex:0 0 auto; padding:0 18px; border:2px solid var(--line); color:var(--ink); background:#fff; }
#miyabi-site-v12 .m-kimono-bar-line { flex:1 1 auto; background:var(--shu); color:#fff; }
#miyabi-site-v12 .m-kimono-bar-line:active { background:var(--shu-deep); }

@media (hover:hover) {
  #miyabi-site-v12 .m-kimono-link:hover .m-kimono-name { color:var(--shu-deep); }
  #miyabi-site-v12 .m-kimono-bar-line:hover { background:var(--shu-deep); }
}
@media (min-width:700px) {
  #miyabi-site-v12 .m-kimono-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 22px; }
  #miyabi-site-v12 .m-kimono-help { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 30px; }
  #miyabi-site-v12 .m-kimono-help .m-button { width:auto; flex:none; }
  #miyabi-site-v12 .m-kimono-photos { margin-inline:0; padding-inline:0; }
  #miyabi-site-v12 .m-kimono-grid--row { margin-inline:0; padding-inline:0; }
  #miyabi-site-v12 .m-kimono-grid--row > li { flex-basis:200px; }
  #miyabi-site-v12 .m-kimono-bar { left:50%; right:auto; width:min(560px,100%); transform:translateX(-50%); }
}
@media (min-width:1000px) {
  #miyabi-site-v12 .m-kimono-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #miyabi-site-v12.m-kimono-page .m-opener h1 { font-size:34px; }
}

/* ---------- b21: 着物カードのモーダル（kimono-modal.js）— phone: a sheet from the bottom; PC: a centred card ---------- */
html.m-modal-open, html.m-modal-open body { overflow:hidden; }
#miyabi-site-v12 .m-kimono-modal { box-sizing:border-box; width:100%; max-width:640px; max-height:92dvh; margin:auto auto 0; padding:0; border:0; border-radius:24px 24px 0 0; background:#fff; color:var(--ink); font-family:var(--maru); box-shadow:0 -10px 40px #3b262133; overflow:hidden; }
#miyabi-site-v12 .m-kimono-modal::backdrop { background:#3b262170; }
/* the top page's older heading rules (Mincho, centred) must not reach inside the modal */
#miyabi-site-v12 .m-kimono-modal { text-align:left; letter-spacing:normal; }
#miyabi-site-v12 .m-kimono-modal :is(h1, h2, h3) { font-family:var(--maru); font-weight:700; letter-spacing:.02em; text-align:left; }
#miyabi-site-v12 .m-kimono-modal[open] { animation:miyabi-sheet-in .32s cubic-bezier(.2,.8,.2,1); }
@keyframes miyabi-sheet-in { from { transform:translateY(40px); opacity:0; } to { transform:none; opacity:1; } }
#miyabi-site-v12 .m-kimono-modal-sheet { display:flex; flex-direction:column; max-height:92dvh; }
#miyabi-site-v12 .m-kimono-modal-bar { display:flex; justify-content:flex-end; padding:10px 12px 0; }
#miyabi-site-v12 .m-kimono-modal-close { width:44px; height:44px; padding:0; border:2px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); font-size:22px; line-height:1; }
#miyabi-site-v12 .m-kimono-modal-body { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:0 20px calc(24px + env(safe-area-inset-bottom,0px)); }
#miyabi-site-v12 .m-kimono-modal-content .m-kimono-photos { margin-top:4px; }
#miyabi-site-v12 .m-kimono-modal-actions { display:grid; gap:10px; margin-top:20px; }
#miyabi-site-v12 .m-kimono-modal-actions .m-button { width:100%; min-height:52px; }
@media (min-width:700px) {
  #miyabi-site-v12 .m-kimono-modal { margin:auto; max-height:88vh; border-radius:24px; box-shadow:0 20px 60px #3b262140; }
  #miyabi-site-v12 .m-kimono-modal-sheet { max-height:88vh; }
  #miyabi-site-v12 .m-kimono-modal-body { padding:0 32px 32px; }
  #miyabi-site-v12 .m-kimono-modal-content .m-kimono-photos { margin-inline:0; padding-inline:0; }
}
@media (prefers-reduced-motion:reduce) { #miyabi-site-v12 .m-kimono-modal[open] { animation:none; } }

/* ---------- b22: 中央寄せで統一（着物ページとモーダル）。料金表・箇条書き・入力欄は左寄せのまま ---------- */
#miyabi-site-v12.m-kimono-page .m-crumb,
#miyabi-site-v12.m-kimono-page .m-opener,
#miyabi-site-v12.m-kimono-page .m-kimono-list > .m-shell > .m-note,
#miyabi-site-v12 .m-kimono-title,
#miyabi-site-v12 .m-kimono-help,
#miyabi-site-v12 .m-kimono-more h2,
#miyabi-site-v12 .m-kimono-more-link,
#miyabi-site-v12.m-kimono-page .m-contact .m-opener { text-align:center; }
#miyabi-site-v12 .m-kimono-more .m-shell > .m-kimono-more-link { display:table; margin-inline:auto; }
#miyabi-site-v12 .m-kimono-filter { justify-content:center; }
#miyabi-site-v12 .m-crumb { word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance; }
#miyabi-site-v12 .m-kimono-name, #miyabi-site-v12 .m-kimono-title h1, #miyabi-site-v12 .m-kimono-title h2 { word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance; }
#miyabi-site-v12 [data-kimono-status] { text-align:center; }
#miyabi-site-v12 .m-kimono-modal .m-kimono-title, #miyabi-site-v12 .m-kimono-modal .m-kimono-title h2 { text-align:center; }
#miyabi-site-v12 .m-kimono-panel h2, #miyabi-site-v12 .m-kimono-panel h3 { text-align:center; }
#miyabi-site-v12 .m-kimono-panel .m-price-list, #miyabi-site-v12 .m-kimono-notes { text-align:left; }
#miyabi-site-v12 .m-kimono-panel > p, #miyabi-site-v12 .m-kimono-panel > .m-note { text-align:center; text-wrap:balance; }
#miyabi-site-v12 .m-kimono-panel > p, #miyabi-site-v12 .m-kimono-panel > .m-note, #miyabi-site-v12.m-kimono-page .m-opener .m-lead,
#miyabi-site-v12 .m-kimono-help p, #miyabi-site-v12.m-kimono-page .m-kimono-list > .m-shell > .m-note { word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance; }
@media (min-width:700px) { #miyabi-site-v12 .m-kimono-help { flex-direction:column; text-align:center; } }

/* b29: disclosure stays visible even when review notes are hidden. */
#miyabi-site-v12 .m-sample-photo-label{position:absolute;left:12px;bottom:12px;z-index:2;padding:5px 9px;border-radius:4px;background:rgba(255,255,255,.95);color:#5e453d;font-size:11px;font-weight:700;line-height:1.5}
#miyabi-site-v12 .m-sample-photo-note{margin:0 0 10px;color:#6e5b55;font-size:11px;line-height:1.65;letter-spacing:.02em}