/* FluxCore Takeout / Commerce — テイクアウト・EC フロント共通スタイル
 * 生成元: index.php と ec.php の <style> で完全一致していたルールを抽出したもの。
 * 各ページ固有の差分（配色・レイアウト・EC専用UI）はページ側の <style> に残している。
 * ボタン配色は var(--fc-btn-*, 既定色) で正本のトークンを受ける。
 */
*{box-sizing:border-box}
html,body{width:100%;overflow-x:hidden}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-text-size-adjust:100%}
button,input,select,textarea{font-family:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.hero-inner{display:flex;justify-content:space-between;gap:24px;align-items:flex-end}
.hero h1{margin:0;font-size:clamp(28px,5vw,46px);letter-spacing:.04em}
.hero-links{display:flex;gap:10px;flex-wrap:wrap}
.notice{display:none;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:16px;padding:16px 18px;margin:18px 0;font-weight:800}
.toolbar{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:12px;position:sticky;top:0;z-index:30;box-shadow:0 4px 14px rgba(15,23,42,.04)}
.search-row{display:flex;gap:10px;align-items:center}
.search{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px}
.cat-quick{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.cat-quick::-webkit-scrollbar{display:none}
.cat-chip{border:1px solid var(--line);background:#f8fafc;color:#344054;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:900;white-space:nowrap;cursor:pointer}
.cat-chip.active{background:var(--fc-btn-bg,var(--ink));border-color:var(--fc-btn-bg,var(--ink));color:var(--fc-btn-fg,#fff)}
.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2}
.btn-primary{background:var(--fc-btn-bg,var(--accent));color:var(--fc-btn-fg,#fff)}
.btn-primary:hover{background:var(--fc-btn-bg-hover,var(--accent))}
.btn-dark{background:var(--fc-btn-bg,#111827);color:var(--fc-btn-fg,#fff)}
.btn-dark:hover{background:var(--fc-btn-bg-hover,#111827)}
.btn-ghost{background:#f3f4f6;color:#111827}
.btn-add{background:var(--fc-btn-bg,var(--accent));color:var(--fc-btn-fg,#fff);flex:1}
.btn-add:hover{background:var(--fc-btn-bg-hover,var(--accent))}
.product-sections{margin-top:16px;display:grid;gap:28px}
.category-section{scroll-margin-top:94px}
.category-title{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:20px;font-weight:950}
.category-title:after{content:"";height:1px;background:var(--line);flex:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.thumb{width:100%;aspect-ratio:1.35/1;background:#eef2f7;object-fit:cover}
.noimg{display:flex;align-items:center;justify-content:center;color:#98a2b3;font-size:34px}
.card-body{padding:15px;display:flex;flex-direction:column;gap:4px;flex:1}
.cat{font-size:12px;color:var(--muted);font-weight:800}
.name{font-size:18px;font-weight:900;margin:0}
.desc{font-size:13px;color:#667085;height:44px;overflow:hidden}
.actions{display:grid;grid-template-columns:1fr;gap:10px;padding:0 15px 15px;align-items:stretch}
.actions .btn{width:100%;min-height:44px}
.qty{justify-content:center;width:100%}
.qty{display:flex;align-items:center;gap:8px;background:#f3f4f6;border-radius:999px;padding:5px}
.qty button{width:30px;height:30px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);font-weight:900}
.qty span{min-width:20px;text-align:center;font-weight:900}
.cart{position:sticky;top:18px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.cart-head{padding:16px 18px 12px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px}
.cart-head h2{font-size:18px;margin:0;flex:1}
.cart-actions{display:flex;gap:8px}
.cart-close{display:none}
.cart-body{padding:16px;overflow-x:hidden}
.cart-empty{color:var(--muted);font-weight:700;text-align:center;padding:24px 0}
.cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px 0;border-bottom:1px solid #f0f2f5}
.cart-line strong{font-size:14px;word-break:break-word}
.cart-line small{color:var(--muted)}
.cart-line-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:6px}
.cart-line-actions .btn{padding:8px 10px;border-radius:10px}
.cart-total{display:flex;justify-content:space-between;font-size:20px;font-weight:950;margin:16px 0}
.form{display:grid;gap:10px;margin-top:16px}
.form label{font-size:12px;color:#475467;font-weight:900}
.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:15px;background:#fff}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.65);display:none;align-items:center;justify-content:center;z-index:100;padding:18px}
.modal-card{background:#fff;width:min(760px,100%);max-height:88vh;overflow:auto;border-radius:22px;box-shadow:0 24px 80px rgba(0,0,0,.25)}
.modal-head{padding:18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:14px}
.modal-body{padding:18px}
.info-block{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.info-block h4{margin:0 0 8px}
.req{display:inline-block;margin-left:6px;color:#dc2626;font-size:11px}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);opacity:0;background:#111827;color:#fff;padding:12px 16px;border-radius:999px;font-weight:900;z-index:120;transition:.2s;box-shadow:var(--shadow);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ------------------------------------------------------------------
   B-4 アクセシビリティ / モバイル
   ------------------------------------------------------------------ */

/* キーボード操作の可視化。ボタンは border:0 で枠を消しているため、
   フォーカス表示が無いとキーボード利用者は現在位置を追えなかった。
   :focus-visible を使うのでマウス操作時にリングは出ない。 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  /* ブランド色を使わない。店舗のボタンが赤ならリングも赤くなり、
     まさにフォーカスを示したいボタンの上でリングが見えなくなるため。
     白＋濃色の二重リングにして、明るい背景でも暗いヒーロー上でも視認できるようにする。 */
  outline:2px solid #fff;outline-offset:0;box-shadow:0 0 0 5px #111827;
  border-radius:8px;
}
/* :focus-visible 未対応ブラウザ向けの保険 */
.btn:focus,.cat-chip:focus{outline:2px solid #fff;outline-offset:0;box-shadow:0 0 0 5px #111827}

/* タップ領域を 44px 以上に。数値は Apple/Google 双方のガイドラインの下限。 */
.qty button{width:44px;height:44px}
.cart-line-actions .btn{min-width:44px;min-height:44px}
.cat-chip{min-height:44px;display:inline-flex;align-items:center}
.cart-close,.cart-actions .btn{min-height:44px}

/* 商品説明の固定高さによる不自然な切れを、行数指定に変える */
.desc{height:auto;min-height:44px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 画面外に退避しているカートシートをタブ順から外す（見えないのにフォーカスが入る問題） */
.cart[aria-hidden="true"] .cart-body{visibility:hidden}
.cart.open .cart-body{visibility:visible}

/* スクリーンリーダー専用テキスト */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* カートヘッダーの開閉をボタン要素にしたため、見た目を元の div に合わせる */
.cart-head-toggle{flex:1;display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;min-height:44px}
.cart-head-toggle h2{margin:0}