/* ===================================================================
   freshstreet-digital - FSC Theme (Visual-Rich, B-style)
   将来別テンプレートにする場合、このファイルだけ差し替える設計
   =================================================================== */

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg-base);
  /* 固定ヘッダーの実高さ(--header-h, JSが同期)ぶん上に余白を取り、
     中央寄せされる本文が高くなったヘッダー(余白増/トグル/店名表示)に
     被らないようにする。背景画像(.hero__bg)は inset:0 なので全面のまま。 */
  padding-top: var(--header-h, 64px);
  box-sizing: border-box;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Was 0.45 + brightness(0.7) which crushed the food photo to near-black.
     Bumped opacity and lightened the brightness curve so the dish reads
     through the overlay and gives the page real food presence. */
  opacity: 0.78;
  transform: scale(1.05);
  transition: transform var(--duration-slow) var(--ease-out);
  filter: brightness(0.92) contrast(1.05);
}

.hero__gradient {
  position: absolute;
  inset: 0;
  /* Lighter overlay so the image breathes. Keep the bottom fade strong
     enough for text legibility but stop the middle from being a black
     wash. */
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0.44) 45%, rgba(0,0,0,0.22) 72%, var(--color-bg-base) 100%),
    radial-gradient(ellipse at center, transparent 22%, rgba(0,0,0,0.38) 96%);
  z-index: 1;
}

/* ライト系テーマ(linen/garden/paper/citrus)では、下端の「クリーム色への
   フェード」が 72%→100% で急に切り替わって強く見える。中間に半透明の
   背景色ストップを足して自然に溶け込ませ、暗いスクリム/周辺減光も軽くする
   (白地ページで重く見えないように)。文字可読のための上部スクリムは維持。 */
[data-theme="linen"] .hero__gradient,
[data-theme="garden"] .hero__gradient,
[data-theme="paper"] .hero__gradient,
[data-theme="citrus"] .hero__gradient {
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.38) 0%,
      rgba(0,0,0,0.30) 42%,
      rgba(0,0,0,0.08) 72%,
      color-mix(in srgb, var(--color-bg-base) 30%, transparent) 91%,
      var(--color-bg-base) 100%),
    radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,0.16) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  /* ヘッダー被りは .hero の padding-top(=--header-h)で確保済みなので、
     ここの上余白は本文の内的な呼吸だけにして控えめに(被り対策の二重取りを回避)。 */
  padding: clamp(24px, 5vw, 56px) 0 clamp(80px, 12vw, 140px);
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

.hero__brand-mark {
  display: inline-block;
  margin-bottom: clamp(20px, 3vw, 32px);
  padding: 0.55rem 1.4rem;
  background: rgba(20, 17, 13, 0.6);
  color: var(--color-accent-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.3em;
  font-size: clamp(0.7rem, 0.85vw, 0.85rem);
  border: 1px solid var(--color-accent-secondary);
  backdrop-filter: blur(8px);
}

/* Plain variant: same text colour but no chip frame, for cleaner heroes. */
.hero__brand-mark--plain {
  padding: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}

/* ── Footer external links ─────────────────────────────────────────── */
.footer__externals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 clamp(18px, 3vw, 28px);
}
.footer__external {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.18s ease, transform 0.18s ease, background 0.18s ease;
  /* hard caps so an unstyled SVG can never blow up the layout */
  max-height: 40px;
}
.footer__external:hover {
  color: var(--color-accent-secondary);
  transform: translateY(-1px);
}
/* Icon-only chip */
.footer__external--icon {
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--fill-1);
}
.footer__external--icon:hover {
  background: var(--fill-2);
  border-color: var(--color-accent-secondary);
}
/* Icon + text chip */
.footer__external--icon_text {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.footer__external--icon_text:hover {
  background: var(--fill-2);
  border-color: var(--color-accent-secondary);
}
/* Hard size on every footer/bottom-sheet icon SVG, with very high
   specificity to defeat any third-party CSS that might set width:100%. */
.footer__external-icon,
.bottom-sheet__external-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.footer__external-icon svg,
.bottom-sheet__external-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
}
.footer__external--icon_text .footer__external-icon svg {
  width: 16px !important;
  height: 16px !important;
}

/* ── Bottom sheet external links (icon variants) ───────────────────── */
.bottom-sheet__external-link--icon,
.bottom-sheet__external-link--icon_text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-height: 40px;
  padding: 0.45rem 0.85rem;
}
.bottom-sheet__external-link--icon {
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
}

.hero__title {
  font-family: var(--font-display);
  /* ヒーローは写真の上に乗るため、テーマに関わらず白文字で固定。
     下の hero__gradient の暗いスクリムで全テーマ可読にする。 */
  color: #ffffff;
  margin: 0 0 clamp(18px, 2.5vw, 28px);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  /* Japanese line-break hygiene: strict prohibition rules + balanced
     wrap so no lonely 「ー」or punctuation ends up on its own line. */
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
  /* Soft shadow keeps the title legible over the brightened photo. */
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero__title-accent {
  /* ヒーローは写真の上なので、テーマのアクセント副色(薄い色だと写真上で
     読めない)ではなく白で統一。下のスクリムと相まって全テーマで可読。 */
  color: rgba(255, 255, 255, 0.92);
  display: block;
  font-size: var(--fs-hero-accent);
  font-weight: 600;
  margin-top: 0.9em;
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-family: var(--font-body);
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.hero__subtitle {
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  max-width: 640px;
  margin: 0 auto;
  font-weight: 400;
}

.hero__cta-group {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

.hero__scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  z-index: 3;
  color: var(--color-text-secondary);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  animation: float 2.5s ease-in-out infinite;
  text-align: center;
  pointer-events: none;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-button);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.btn-primary {
  background: var(--color-accent-primary);
  color: var(--color-bg-base);
  box-shadow: var(--shadow-glow-accent);
}

.btn-primary:hover {
  background: var(--color-accent-warm);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--accent-glow);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-text-secondary);
}

.btn-secondary:hover {
  background: var(--color-overlay-light);
  border-color: var(--color-text-primary);
}

.btn-large {
  padding: 1.25rem 2.5rem;
  font-size: 1.1rem;
}

/* ===== Section Headers ===== */
.section-header {
  text-align: center;
  /* 4rem → 2.5rem so the eyebrow/title/subtitle stack sits closer to
     the cards below. Was forcing a near-blank screen between header
     and first row of content. */
  margin-bottom: var(--space-lg);
}

.section-header__eyebrow {
  display: inline-block;
  color: var(--color-accent-secondary);
  font-family: var(--font-display);
  letter-spacing: 0.3em;
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
}

.section-header__title {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  font-size: var(--fs-h1);
  font-weight: 800;
  margin: 0 0 var(--space-sm);
}

.section-header__subtitle {
  color: var(--color-text-tertiary);
  font-size: var(--fs-body);
  max-width: 600px;
  margin: 0 auto;
}

/* ===== Main Curry Grid ===== */
.mains-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.main-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-bg-elevated);
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  aspect-ratio: 3 / 4;
}

.main-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-elevated);
}

.main-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.main-card:hover .main-card__image {
  transform: scale(1.08);
}

.main-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20,17,13,0.95) 0%,
    rgba(20,17,13,0.4) 50%,
    transparent 100%
  );
}

.main-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-lg);
  z-index: 2;
}

.main-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}

.main-card__tagline {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
  line-height: 1.4;
}

.main-card__price {
  font-family: var(--font-number);
  font-size: 2rem;
  color: var(--color-accent-secondary);
  letter-spacing: 0.05em;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}

.main-card__price-currency {
  font-size: 0.7em;
  opacity: 0.8;
}

.main-card__price-suffix {
  font-size: 0.45em;
  color: var(--color-text-tertiary);
  font-family: var(--font-body);
  font-weight: 400;
  margin-left: 0.3em;
}

.main-card__badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--color-accent-primary);
  color: var(--color-bg-base);
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  z-index: 3;
}

/* ───────────────────────────────────────────────────────────────
 * Public-flag badges + sold-out veil
 *
 * Shared visual vocabulary across main / topping / set / drink /
 * wizard opt-card so the customer learns once and recognises
 * everywhere. Badges anchor top-left (top-right is taken by price
 * chips on several cards); sold-out is a full-card veil so it can't
 * be missed.
 * ─────────────────────────────────────────────────────────────── */
.item-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 4;
  pointer-events: none;
  max-width: calc(100% - 16px);
}
.item-badges--opt {
  top: 6px;
  left: 6px;
  /* 画像 88px に対して 22px のアイコンチップが最大 3 個。横並びだと
   * 入りきらないので縦積み。視覚的にも「上から下に並ぶラベル」と
   * してまとまる。 */
  flex-direction: column;
  gap: 4px;
}

.item-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text-primary, #222);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.item-badge--featured {
  background: var(--color-accent-primary, #d97706);
  color: var(--color-bg-base, #fff);
}
.item-badge--veg {
  background: rgba(67, 160, 71, 0.95);
  color: #fff;
}
.item-badge--lowcal {
  background: rgba(38, 132, 200, 0.95);
  color: #fff;
}
/* タイムコントロール: 期間限定バッジ ("〜M/D")。アクセント色で
 * 「今だけ」を伝える。テキストなので --icon にはしない。 */
.item-badge--period {
  background: var(--color-accent-primary, #d97706);
  color: var(--color-bg-base, #fff);
}

/* アイコンのみのコンパクトバッジ (トッピング等の小さいカード用)。
 * 88px の画像エリアでも info アイコンと干渉しないよう、22x22 の
 * 小さな円形チップにする。意味は title 属性 (ツールチップ) と
 * aria-label に逃がす。 */
.item-badge--icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1;
  justify-content: center;
  border-radius: 50%;
  letter-spacing: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28), 0 0 0 1.5px rgba(255,255,255,0.7) inset;
}
.item-badge--icon.item-badge--featured {
  font-size: 0.85rem;
}
.item-badge--icon.item-badge--veg {
  font-size: 0.8rem;
}
.item-badge--icon.item-badge--lowcal {
  font-weight: 800;
  font-size: 0.62rem;
}

/* Sold-out veil — full-card overlay with rotated label */
.card-soldout-veil {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 22, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
}
.card-soldout-veil--opt {
  border-radius: var(--radius-lg, 16px);
}
.card-soldout-veil__label {
  background: rgba(255,255,255,0.96);
  color: #c1272d;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 6px 18px;
  border-radius: 6px;
  font-size: 0.95rem;
  transform: rotate(-6deg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* Card-level sold-out: desaturate + block taps. The wizard's
 * opt-card is handled separately so the ⓘ info button stays usable. */
.main-card.is-soldout,
.topping-card.is-soldout,
.set-card.is-soldout,
.drink-card.is-soldout {
  filter: grayscale(0.5);
  pointer-events: none;
  user-select: none;
}
.main-card.is-soldout img,
.topping-card.is-soldout img,
.set-card.is-soldout img,
.drink-card.is-soldout img {
  opacity: 0.55;
}

.opt-card.is-soldout {
  filter: grayscale(0.5);
}
.opt-card.is-soldout .opt-card__image {
  opacity: 0.55;
}
.opt-card.is-soldout .opt-card__main {
  cursor: not-allowed;
}

/* ===== Toppings Grid ===== */
.toppings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}

.topping-card {
  position: relative;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
}

.topping-card:hover {
  transform: translateY(-4px);
  background: var(--color-bg-hover);
  box-shadow: var(--shadow-card);
}

.topping-card__image-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.topping-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal) var(--ease-out);
}

.topping-card:hover .topping-card__image {
  transform: scale(1.1);
}

.topping-card__number {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  z-index: 2;
}

.topping-card__price-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: var(--color-accent-primary);
  color: var(--color-bg-base);
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  font-family: var(--font-number);
  font-size: 0.95rem;
  font-weight: 700;
  z-index: 2;
}

.topping-card__content {
  padding: var(--space-md);
}

.topping-card__name {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 var(--space-xs);
  color: var(--color-text-primary);
}

.topping-card__description {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Set Cards (Redesigned: Title below image, no overlap) ===== */
.sets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);
}

/* セットが 1 件だけのとき: auto-fit は唯一のカードを利用可能幅いっぱい
   (1fr) に引き伸ばし、画像まで巨大化してしまう。中央に程よいサイズで
   1 枚だけ表示する。 */
.sets-grid:has(> .set-card:only-child) {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

/* 2 件のとき: 横に伸びすぎないよう 2 枚を中央寄せで並べる。 */
.sets-grid:has(> .set-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
}

.set-card {
  position: relative;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.set-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-elevated);
}

.set-card__image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.set-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.set-card:hover .set-card__image {
  transform: scale(1.06);
}

/* Category chip on top-left of image (subtle, no overlap with title) */
.set-card__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  /* ラベルは写真の上に乗るので、不透明度高めのダークグラス + 白文字で
     どのテーマ・どの写真でも確実に読めるようにする。カテゴリの色は
     枠線と先頭ドットで示す (色を文字に使うと、暗い色のとき読めなくなる)。 */
  background: rgba(20, 17, 13, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  border: 1.5px solid var(--chip-color, var(--color-accent-secondary));
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  z-index: 2;
}
.set-card__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip-color, var(--color-accent-secondary));
  flex-shrink: 0;
}

.set-card__content {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

/* Vertical accent bar (left side of title, color from category) */
.set-card__content::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-lg);
  bottom: var(--space-lg);
  width: 3px;
  background: var(--accent-color, var(--color-accent-primary));
  border-radius: 0 3px 3px 0;
  opacity: 0.85;
}

.set-card__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.4;
  color: var(--color-text-primary);
  word-break: break-word;
}

.set-card__tagline {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-md);
  line-height: 1.5;
  /* 一覧は3行で省略(持ち帰りカレールー等、温め方・食材一覧まで書かれた長文説明で
     カードが縦に伸びきる事故を防ぐ)。全文はカードを開いた詳細モーダルで読める。 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.set-card__price-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: auto;
}

.set-card__price-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: var(--fill-2);
  border-radius: var(--radius-small);
  border: 1px solid var(--hairline-3);
  transition: all var(--duration-fast);
}

.set-card__price-item.is-regular {
  background: linear-gradient(
    135deg,
    var(--color-accent-primary) 0%,
    var(--color-accent-warm) 100%
  );
  color: var(--color-bg-base);
  border-color: transparent;
  box-shadow: 0 2px 8px var(--accent-glow);
}

.set-card__price-size {
  font-size: 0.78rem;
  opacity: 0.9;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.set-card__price-value {
  font-family: var(--font-number);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* メイン選択式 / レンジ表示用の「¥830〜」価格行。
   4 サイズグリッドを使わず、ラベル + 価格を baseline 揃えで横並びに。 */
.set-card__price-row--single {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.set-card__price-from-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.65;
}
.set-card__price-from-value {
  font-family: var(--font-number);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-accent-primary);
}
.set-card__price-from-suffix {
  font-size: 0.95rem;
  font-weight: 500;
  margin-left: 1px;
}

/* ===== Story Section ===== */
.story {
  background: var(--color-bg-surface);
  position: relative;
}

.story__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.story-card {
  text-align: center;
  padding: var(--space-lg);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-divider);
}

.story-card__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
}

.story-card__title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-accent-secondary);
  margin-bottom: var(--space-sm);
}

.story-card__desc {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ===== Floating Customize Button ===== */
.fab-customize {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  background: var(--color-accent-primary);
  color: var(--color-bg-base);
  padding: 1rem 1.5rem;
  border-radius: 100px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-glow-accent);
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-bounce);
}

.fab-customize:hover {
  transform: scale(1.05);
  background: var(--color-accent-warm);
}

.fab-customize__icon {
  font-size: 1.2rem;
}

/* ===== Header ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* Vertical padding driven by --header-padding-y (set via JS from
     brand_config.headerPadding sm/md/lg/xl). Default 16px.
     padding-top はノッチ (iPhone safe-area-inset-top) を加算して
     ステータスバー下に被らないようにする。 */
  padding: calc(var(--header-padding-y, 16px) + env(safe-area-inset-top, 0px))
    0 var(--header-padding-y, 16px) 0;
  background: var(--color-header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-divider);
  transition: padding var(--duration-normal) var(--ease-out);
}

.header.is-scrolled {
  /* When scrolled, reduce padding by ~30% for a subtle compact effect */
  padding: calc(var(--header-padding-y, 16px) * 0.7 + env(safe-area-inset-top, 0px))
    0 calc(var(--header-padding-y, 16px) * 0.7) 0;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Header inner uses --logo-justify (set by JS from brand_config.logoAlign).
   Defaults to flex-start (left-aligned). */
.header__inner {
  justify-content: var(--logo-justify, flex-start);
}

/* Hide the static fallback logo until JS renders the real one. Avoids the
   FOUT (flash of unstyled text) where "FRESH STREET CURRY" briefly appears
   before being replaced by the brand image. JS adds .is-rendered after
   renderHeader() runs to reveal the final markup. */
.header__inner:not(.is-rendered) > * {
  visibility: hidden;
}
.header__inner.is-rendered {
  animation: header-fade-in 0.18s ease-out;
}
@keyframes header-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.header__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  /* ヘッダー背景(headerStyle)に追従。背景がダークなら明文字、
     ライトなら暗文字。画像ロゴには影響しない。 */
  color: var(--color-header-text);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.header__logo--image {
  font-size: 0;
  line-height: 1;
}

/*
 * Logo image sizing — guaranteed-fit, no-clip model.
 *
 * The wrapper takes the FULL inner width of the header, with a fixed
 * height equal to the slider's --logo-max-height. The image is placed
 * inside that box using `object-fit: contain`, so it ALWAYS fits both
 * dimensions while preserving its aspect ratio.
 *
 * Why this finally works:
 *   - Previous iterations let the wrapper be sized by the image's
 *     intrinsic width (inline-flex / shrink-to-fit). On narrow viewports
 *     that meant the wrapper itself could be wider than the viewport,
 *     and even `max-width: 100%` on the img couldn't shrink it because
 *     the parent reference was already too big. Body's `overflow-x: hidden`
 *     then clipped the right edge → "FRESH STR…" cut-off.
 *   - Giving the wrapper an explicit `width: 100%` of its container
 *     pins the available space first; the image then fits inside.
 *
 * The slider value behaves as a MAX height. For wide banner-style logos
 * on narrow viewports the actual rendered height will be less, because
 * width is the binding constraint — but the logo is always fully visible.
 */
.header__logo {
  /* When this is a text logo, keep its natural sizing */
  flex-shrink: 1;
  min-width: 0;
}
.header__logo--image {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: var(--logo-justify, flex-start);
  min-height: 0;
}
.header__logo--image img {
  display: block;
  /*
   * "Proportional cap" sizing — single slider, both dimensions scale.
   *
   *   --logo-max-width   = % of header inner width  (e.g. 50%)
   *   --logo-max-height  = px ceiling                (e.g. 75px)
   *
   * Both are set BY JS from the same slider value so the user pulls one
   * control and both caps move together. The image fits within whichever
   * cap binds first, preserving aspect — and because both caps grow with
   * the slider, the image's visible size changes at EVERY value.
   *
   * Earlier iterations capped only one dimension; the other became
   * fixed by the natural aspect ratio, so the slider plateaued after
   * a certain point. Tying both to the slider eliminates that.
   */
  max-width: var(--logo-max-width, 50%);
  max-height: var(--logo-max-height, 75px);
  width: auto;
  height: auto;
}

/* ───────────────────────────────────────────────────────────────
 * Per-device logo size overrides
 *
 * JS (menu.js applyBrandPatch) writes three pairs of CSS vars from the
 * admin's mobile/tablet/desktop sliders:
 *   --logo-max-width-mobile,  --logo-max-height-mobile
 *   --logo-max-width-tablet,  --logo-max-height-tablet
 *   --logo-max-width-desktop, --logo-max-height-desktop
 *
 * These media queries promote the right pair into the generic
 * --logo-max-width / --logo-max-height that the image rule above reads.
 *
 * Breakpoints match the admin preview's viewport switcher:
 *   ≤ 640px   → mobile
 *   641-1024  → tablet
 *   ≥ 1025    → desktop
 *
 * The fallback (when a device-specific var hasn't been set, e.g. on
 * brand_config rows that pre-date this feature) is the universal
 * --logo-max-width / --logo-max-height that JS still writes.
 * ─────────────────────────────────────────────────────────────── */
/* NOTE: JS no longer writes --logo-max-width / --logo-max-height inline
 * (it would override these @media blocks because inline custom properties
 * outrank stylesheet ones even inside a matching media query). It only
 * writes the per-device --logo-max-width-mobile/tablet/desktop vars and
 * lets this stylesheet promote the right one for the current viewport.
 * The fallback `50%` / `75px` only kicks in when no brand logoSize info
 * is present at all (brand-new tenant). */
@media (max-width: 640px) {
  :root {
    --logo-max-width:  var(--logo-max-width-mobile,  50%);
    --logo-max-height: var(--logo-max-height-mobile, 75px);
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --logo-max-width:  var(--logo-max-width-tablet,  50%);
    --logo-max-height: var(--logo-max-height-tablet, 75px);
  }
}
@media (min-width: 1025px) {
  :root {
    --logo-max-width:  var(--logo-max-width-desktop, 50%);
    --logo-max-height: var(--logo-max-height-desktop, 75px);
  }
}

/* ヘッダー余白もデバイス別。JS が per-device 変数を書き、ここで現在の
   ブレークポイントに合う値を --header-padding-y に昇格させる(ロゴと同方式)。
   JS は inline の --header-padding-y を書かない(書くと @media が無効化される)。 */
@media (max-width: 640px) {
  :root { --header-padding-y: var(--header-padding-y-mobile, 16px); }
}
@media (min-width: 641px) and (max-width: 1024px) {
  :root { --header-padding-y: var(--header-padding-y-tablet, 16px); }
}
@media (min-width: 1025px) {
  :root { --header-padding-y: var(--header-padding-y-desktop, 16px); }
}

/* ヘッダー縦の3間隔は --header-padding-y に比例させ、1本のスライダーで
   バランスを保ったまま伸縮させる:
     ① ロゴ上端の余白      = --header-padding-y           (.header padding-top)
     ② ロゴ↔店内/持ち帰り  = --header-padding-y * 0.55     (.header__svcbar-inner padding-top)
     ③ トグル↔下端の余白    = --header-padding-y           (.header padding-bottom)
   ①③は対称、②は内側ギャップとして少しタイト。svcbar の上下パディングは
   base.css 側で --header-padding-y 連動に変更済み。 */

.header__nav {
  display: flex;
  gap: var(--space-lg);
}

.header__nav-link {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  transition: color var(--duration-fast);
}

.header__nav-link:hover {
  color: var(--color-accent-secondary);
}

/* ===== Footer ===== */
.footer {
  padding: var(--space-xl) 0;
  background: var(--color-bg-base);
  border-top: 1px solid var(--color-divider);
  text-align: center;
}

/* ───────────────────────────────────────────────────────────────
 * Footer — 2-column layout (リファクタ 2026-05)
 *
 * モバイル: タグライン → 連絡先カラム → 営業時間カラム → SNS → 著作権
 *           (1 列縦スタック、各セクションに余白とラベル)
 * デスクトップ: タグライン → 2 カラム並列 (連絡先 ‖ 営業時間) → SNS → 著作権
 *
 * 旧フッターは雑に縦並びでズラッと文字が並んでいた。情報密度が高くなって
 * きたので「店舗情報」と「営業時間」を視覚的に分離し、それぞれが自分の
 * セクションタイトルを持つ形に再編。
 * ─────────────────────────────────────────────────────────────── */
.footer__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.footer__tagline {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-text-primary);
  text-align: center;
  margin: 0;
  line-height: 1.6;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline-3);
}
@media (min-width: 720px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl, 56px);
    align-items: start;
  }
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
@media (min-width: 720px) {
  .footer__col { text-align: left; }
}

.footer__col-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 4px;
}

/* — 連絡先カラム — */
.footer__store-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.4;
}
.footer__address {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}
.footer__postal {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
  margin-right: 0.25em;
}
.footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}
@media (min-width: 720px) {
  .footer__actions { justify-content: flex-start; }
}
.footer__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--fill-2);
  border: 1px solid var(--hairline-2);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.footer__action:hover {
  background: var(--fill-3);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}
.footer__action-icon { font-size: 0.95rem; line-height: 1; }
.footer__action-text { font-variant-numeric: tabular-nums; }

.footer__detail {
  margin-top: 2px;
}
.footer__detail-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-weight: 700;
  margin-bottom: 2px;
}
.footer__detail-text {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* — 営業時間カラム — */
.footer__col--hours { align-items: center; }
@media (min-width: 720px) {
  .footer__col--hours { align-items: flex-start; }
}
.footer__legacy-hours {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0;
}

/* 公式サイトへの戻り導線 (official-site アドオン有効時のみ・双方向リンク) */
.footer__site-link {
  text-align: center;
  margin: 0 0 var(--space-sm);
}
.footer__site-link a {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-2);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer__site-link a:hover {
  color: var(--color-accent, var(--color-text-primary));
  border-color: currentColor;
}

.footer__copyright {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  text-align: center;
  margin: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline-3);
  opacity: 0.7;
}
.footer__copyright-sep { margin: 0 6px; opacity: 0.5; }

/* Legacy fallback (used only when structured fields absent) */
.footer__info {
  color: var(--color-text-tertiary);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

/* ───────────────────────────────────────────────────────────────
 * Business hours block (footer) + status pill + closure banner
 *
 * Surface the structured weekly schedule so customers can see at a
 * glance what days are open, with today highlighted and a live status
 * pill above. When the store is temporarily closed (admin set a date
 * range or seasonal block), a slim banner pinned under the header
 * tells the customer immediately rather than burying it in the footer.
 * ─────────────────────────────────────────────────────────────── */
.footer__hours-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: var(--space-sm) auto var(--space-md);
}
.footer__hours-table {
  border-collapse: collapse;
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  width: 100%;
  max-width: 280px;
}
.footer__col--hours .footer__hours-table {
  margin-top: 6px;
}
.footer__hours-table th,
.footer__hours-table td {
  padding: 3px 10px;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--hairline-3);
}
.footer__hours-table th {
  color: var(--color-text-secondary, currentColor);
  font-weight: 700;
  width: 2.5em;
  text-align: center;
  opacity: 0.85;
}
.footer__hours-table tr.is-today th,
.footer__hours-table tr.is-today td {
  background: rgba(217, 119, 6, 0.08);
  color: var(--color-text-primary);
  font-weight: 600;
}

.biz-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.biz-status-pill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.biz-status-pill.is-open {
  background: rgba(67, 160, 71, 0.18);
  color: rgb(134, 200, 138);
}
.biz-status-pill.is-closing-soon {
  background: rgba(217, 119, 6, 0.2);
  color: rgb(241, 168, 75);
}
.biz-status-pill.is-closed {
  background: rgba(200, 60, 60, 0.15);
  color: rgb(232, 130, 130);
}

/* Closed-banner pinned under the header (only present when temporarily
 * closed / inside a seasonal closure). */
.mf-biz-banner {
  position: sticky;
  /* header に safe-area-inset-top を加算したので、バナーもその分下げる */
  top: calc(var(--header-h, 56px) + env(safe-area-inset-top, 0px));
  z-index: 90;
  background: linear-gradient(180deg, rgba(193, 39, 45, 0.97), rgba(168, 30, 35, 0.97));
  color: #fff;
  padding: 10px 16px;
  text-align: center;
  font-size: 0.9rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.mf-biz-banner__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.mf-biz-banner__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25);
  animation: mf-biz-pulse 1.8s ease-in-out infinite;
}
@keyframes mf-biz-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.55; transform: scale(0.85); }
}
.mf-biz-banner__label { font-weight: 800; letter-spacing: 0.05em; }
.mf-biz-banner__sub { font-size: 0.82rem; opacity: 0.92; }

/* ───────────────────────────────────────────────────────────────
 * Announcements section (お知らせ)
 *
 * Lists upcoming temporary closures + seasonal periods. Placed at the
 * top of the main content so customers see "we're closed next Tuesday"
 * before they pick what to order — saves them a return trip.
 *
 * Visual weight: meaningful but not panic-inducing. Closures get a soft
 * red accent, seasonal periods a warm amber. Active items get a dot;
 * "本日"/"明日" get pill badges.
 * ─────────────────────────────────────────────────────────────── */
.mf-announcements {
  padding: var(--space-md) 0 var(--space-sm);
  background: var(--fill-1);
}
.mf-announcements__inner { padding-top: 4px; padding-bottom: 4px; }
.mf-announcements__title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 10px;
}
.mf-announcements__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mf-ann {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline-2);
  background: var(--fill-1);
}
.mf-ann.is-closure {
  border-left: 3px solid rgba(232, 80, 80, 0.65);
}
.mf-ann.is-seasonal {
  border-left: 3px solid rgba(217, 119, 6, 0.7);
}
.mf-ann__icon {
  font-size: 1.1rem;
  line-height: 1.4;
  flex: 0 0 auto;
}
.mf-ann__body { flex: 1; min-width: 0; }
.mf-ann__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.mf-ann__kind {
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 6px;
  margin-right: 4px;
}
.mf-ann.is-closure .mf-ann__kind {
  background: rgba(232, 80, 80, 0.18);
  color: rgb(240, 130, 130);
}
.mf-ann.is-seasonal .mf-ann__kind {
  background: rgba(217, 119, 6, 0.18);
  color: rgb(241, 168, 75);
}
.mf-ann__date {
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: 0.92rem;
  tab-size: 2;
}
.mf-ann__badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--fill-3);
  color: var(--color-text-secondary, currentColor);
}
.mf-ann__badge.is-now { background: rgba(232,80,80,0.85); color:#fff; }
.mf-ann__badge.is-today { background: rgba(217,119,6,0.85); color:#fff; }
.mf-ann__badge.is-soon { background: rgba(217,119,6,0.55); color:#fff; }
.mf-ann__reason {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.45;
}
.mf-ann__hours {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  margin: 4px 0 0;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Footer note shown when a seasonal range is currently in effect */
.footer__hours-note {
  font-size: 0.78rem;
  color: rgb(241, 168, 75);
  margin: 6px 0 0;
  text-align: center;
}

/* ───────────────────────────────────────────────────────────────
 * Footer 連絡先 / アクセス / 駐車場 ブロック
 *
 * 「電話したい」「メールしたい」「行き方を確認したい」をスマホで
 * 1タップで起こせるよう tel: / mailto: を使う。各項目は admin が
 * 入力したものだけ出るので、未入力の店舗で空セクションが出ない。
 * ─────────────────────────────────────────────────────────────── */
.footer__contact-block {
  margin: 14px 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.footer__contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
}
.footer__contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--color-text-secondary, currentColor);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--fill-2);
  border: 1px solid var(--hairline-3);
  transition: background 160ms ease, color 160ms ease;
}
.footer__contact:hover {
  background: var(--fill-3);
  color: var(--color-text-primary);
}
.footer__contact span {
  font-variant-numeric: tabular-nums;
}
.footer__access {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.footer__access strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  margin-bottom: 2px;
  font-weight: 700;
}
.footer__access p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .header__nav {
    display: none;
  }

  .hero__cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-large {
    padding: 1rem 1.5rem;
  }

  .toppings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .topping-card__content {
    padding: var(--space-sm);
  }

  .fab-customize {
    bottom: 16px;
    right: 16px;
    padding: 0.85rem 1.2rem;
    font-size: 0.9rem;
  }
}

@media (min-width: 1024px) {
  .toppings-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}