/* テーマの見本（/catalog/demo/th-xx/）のサイト側の足し。site/lp/theme_samples.py が書き出す（手で直さない）。
   DS の写し（tokens.css・themes.css・ds.css）は直さず、この後に読む。 */
/* 見本の帯（テーマに関係なく同じ色。ページの外側の案内） */
.cat-back{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 16px;padding:0 16px;background:#fff;color:#222;border-bottom:1px solid #d9d9d9;font:15px/1.4 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif}
.cat-back a{display:inline-flex;align-items:center;min-height:48px;color:#222;text-decoration:underline}
.th-bar{background:#1f1f1f;color:#fff;font:14px/1.5 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif}
.th-bar__in{max-width:72rem;margin:0 auto;padding:8px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.th-bar__now{margin:0;flex:1 1 14rem}
.th-bar__now strong{font-weight:700}
.th-bar a{color:#fff;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:.2em}
.th-bar__nav{display:flex;gap:16px}
/* 書体：Google Fonts を読めない（CSP の font-src 'self'）。極太の表示用書体に頼るテーマは、端末の書体を太くする */
[data-theme="TH-07"]{--typography-weight-heading:900}
/* 見本の店の部品（ds.css の部品の組み合わせ。色・余白はトークンだけ） */
.smp-hero-note{font-size:var(--typography-size-caption);color:var(--color-text-muted)}
.smp-info{display:grid;gap:var(--s3);margin:0}
.smp-info div{display:grid;gap:var(--s1);padding-block:var(--s3);border-block-end:1px solid var(--color-border)}
.smp-info dt{font-size:var(--typography-size-caption);color:var(--color-text-muted)}
.smp-info dd{margin:0}
.smp-sprite{position:absolute;inline-size:0;block-size:0;overflow:hidden}
.smp-nb{display:inline-block}
.smp-mt{margin-block-start:var(--s4)}
@media (min-width:768px){.smp-info div{grid-template-columns:8em 1fr;align-items:baseline}}