:root {
    --accent: #7D00BE;
    --accent-ink: #ffffff;
    --ink: #2d2d2d;
    --muted: #6b7280;
    --warn: #DC2626;
    --bg: #ffffff;
    /* ← 背景を白に */
    --card: #ffffff;
    --border: #e5e7eb;
    --radius: 16px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .06);
    --gap: 16px;
    --maxw: 1100px;
    --base-font-min: 14px;
    --base-font-max: 15.5px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    font-size: clamp(var(--base-font-min), 1vw + 12px, var(--base-font-max));
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.7;
    letter-spacing: .02em;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    opacity: .7;
}

.wrap {
    max-width: var(--maxw);
    margin: auto;
    padding: 24px 0 0;
}

header.breadcrumb {
    font-size: .875rem;
    color: var(--muted);
    margin: 8px auto 8px;
    max-width: var(--maxw);
    padding: 12px 16px
}

header.breadcrumb a {
    color: var(--muted)
}

/* 既定：改行しない */
br.sp-only {
    display: none;
}

/* SPだけ改行させる（598pxはお好みで） */
@media (max-width: 598px) {
    br.sp-only {
        display: inline;
    }

    /* <br> は inline で改行として機能 */
}

/* Hero */
.hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    align-items: start
}

@media (min-width: 960px) {
    .hero {
        grid-template-columns: 320px 1fr
    }
    /* .poster が非表示（hidden or inline style）なら1カラムへ */
    .hero:has(.poster[hidden]),
    .hero:has(.poster[style*="display: none"]) {
        grid-template-columns: 1fr;
    }

    /* （任意）列数はそのままに、本文を横断させたい場合はコレでもOK */
    .hero:has(.poster[hidden]) .hero-info,
    .hero:has(.poster[style*="display: none"]) .hero-info {
        grid-column: 1 / -1; /* 1列目から最終列まで広げる */
    }
}

.poster {
    background: #ddd;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow)
}

.poster[hidden] {
    display: none !important;
}

/* 変更前（例：2:3でcoverしていた定義） */
/* .poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 2/3
} */

/* 変更後：元比率のままトリミングしない */
.poster img {
    display: block;
    width: 100%;
    height: auto;
    /* ← 高さは自動で比率維持 */
    object-fit: contain;
    /* ← 念のため（高さ指定がないので実質等価） */
}

@media (min-width: 960px) {
    .poster img {
        max-height: 640px;
    }

    /* 例：PCでの上限 */
}

.hero-info {
    display: grid;
    gap: var(--gap)
}

.title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px
}

.title h1 {
    margin: 0;
    font-size: clamp(18px, 2.2vw, 28px);
    line-height: 1.25
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .8rem
}

.badge.live {
    background: var(--accent);
    color: var(--accent-ink)
}

.badge.gray {
    background: #eef0f3;
    color: #3f3f46
}

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #111827
}

.meta .chip {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: .85rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .03)
}

/* Buttons */
.btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font-size: .9rem;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 700;
    transition: .2s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
}

.btn.primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: none;
}

.btn.primary:hover {
    background: #fff;
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: none;
    /* 影は抑える */
    transform: none;
    /* 以前の浮き上がりを無効化 */
}

.btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed
}

.btn.is-disabled {
    cursor: default;
    filter: grayscale(1);
}

/* 購入ボタンは常に下線なし（hover/focus/active含む） */
.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:focus,
.btn:active {
    text-decoration: none;
}

/* アクセシビリティ：フォーカス可視化（下線の代わりに輪郭） */
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* マウスクリックで付くフォーカス枠は非表示（キーボード時は維持） */
.btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* キーボード操作でのフォーカスだけカスタム表示 */
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    /* 好みで: box-shadow を使うなら下記のように
  box-shadow: 0 0 0 3px rgba(125,0,190,.25);
  */
}

/* iOS Safariのタップ時ハイライト（黒/灰のチラつき）を無効化 */
a.btn,
.btn {
    -webkit-tap-highlight-color: transparent;
}

/* Firefoxのボタン内側のフォーカス枠ケア（古い挙動向け） */
button.btn::-moz-focus-inner {
    border: 0;
}

/* すべてのゴーストボタン（薄色） */
.btn.ghost {
    background: rgba(0, 0, 0, .04);
    color: #000;
    /* お好みで var(--accent) でも */
    /* border: 1px solid var(--border);
  border-radius: 8px; */
    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .05s ease;
}

.btn.ghost:focus-visible {
    outline: 3px solid rgba(125, 0, 190, .25);
    /* 視認性の高いフォーカスリング */
    outline-offset: 2px;
    border-color: var(--accent, #7D00BE);
}

.btn.ghost:active {
    transform: translateY(1px);
}

.btn.ghost:hover {
    background-color: rgba(0, 0, 0, .08);
    border-color: color-mix(in srgb, var(--border) 60%, #000 40%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

/* “もっと見る”専用の微調整 */
.btn.ghost.toggle-more {
    padding: 6px 12px;
    font-size: .9rem;
    border-radius: 8px;
}

/* Cards */
.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap)
}

@media (min-width: 960px) {
    .cards {
        grid-template-columns: 1fr 1fr
    }
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px
}

.card h2 {
    margin: 12px 0;
    font-size: 1.1rem
}

/* セクション見出しのライン装飾 */
.section-title {
    position: relative;
    padding-left: 12px;
    margin: 12px 0;
    line-height: 1.3;
    font-size: clamp(16px, 1.2vw + 12px, 20px);
}

.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
    border-radius: 2px;
}

/* Sale / Tickets */
.sale {
    display: grid;
    gap: 10px
}

/* 販売情報の行レイアウトを整える */
.sale .period {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .9rem;
}

.sale .period .badge {
    /* 既存 .badge の見た目をそのまま利用（販売中バッジと同一） */
    line-height: 1;
    /* 行高を詰めて揺れを防止 */
}

/* ——— 販売期間（複数期間） ——— */
.sale-list {
    display: grid;
    gap: 12px;
}

.sale-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 12px 14px;
}

.sale-item .head {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.sale-item .label {
    font-weight: 800;
    font-size: .85rem;
}

.sale-item .badge {
    white-space: nowrap;
    font-size: .75rem;
}

.sale-item .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.sale-item .tag {
    font-size: .75rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f4f6f8;
    border: 1px solid var(--border);
}

.sale-item .tag.area {
    background: #f4f6f8;
    color: black;
    font-weight: 700;
}

.sale-item .tag.seat {
    background: rgba(125, 0, 190, 0.08);
    color: var(--accent);
    border-color: transparent;
    font-weight: 700;
}

.sale-item .note {
    margin-top: 6px;
    font-size: .85rem;
    color: var(--mutedFg, #666);
}

.sale-item .range {
    margin-top: 8px;
    font-weight: 700;
    font-size: .9rem;
}

.sale-item .cd {
    margin-top: 6px;
    font-size: .8rem;
    color: var(--mutedFg, #666);
}

/* SP 調整（詰めるだけ。既存でOKなら不要） */
@media (max-width: 598px) {
    .sale-item {
        padding: 12px;
    }

    .sale-item .label {
        font-size: .95rem;
    }
}

.sale-item .cd .countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700
}

.tickets {
    display: grid;
    gap: 12px
}

/* 料金リストは gap で統一（子の margin は無効化） */
.tickets #ticketPriceList {
    display: grid;
    /* または flex + column でもOK */
    gap: 12px;
    margin: 0;
    padding: 0;
}

/* 購入手続き側も同様に（必要なら） */
#purchaseList {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
}

/* 見出し下の余白はタイトル側で一元管理（ズレ防止） */
.tickets .section-title {
    margin: 0 0 12px !important;
}

.ticket-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    background: #fff
}

.ticket-item .name {
    font-weight: 700
}

.ticket-item .price {
    font-weight: 800
}

.price-with-tax {
    display: flex;
    align-items: baseline;
    gap: 6px
}

.price-with-tax .tax {
    font-size: .8rem;
    color: var(--muted)
}

/* Two-column section */
.two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap)
}

@media (min-width: 960px) {
    .two-col {
        grid-template-columns: 1fr 1fr
    }

    .hero .cards {
        display: flex;
        align-items: stretch;
        /* 2つの枠の高さを揃える */
        gap: 24px;
    }

    .hero .cards>.card {
        flex: 1 1 0;
        display: flex;
        /* 枠をフレックス化して */
        flex-direction: column;
        /* 中身は縦並び */
    }

    .hero .cards>.card>* {
        flex: 0 0 auto;
        /* 子要素は伸びない＝上詰め */
    }
}

.muted {
    color: var(--muted);
    font-size: .9rem;
}

/* 任意ブロック */
#customSections .custom-block+.custom-block {
    margin-top: 24px;
}

#customSections .section-title.small {
    font-size: 1rem;
    margin: 4px 0 6px;
}

#customSections p {
    margin: 0;
    line-height: 1.6;
    font-size: .85rem;
}

#customSections .custom-list {
    margin: 6px 0 0 1.1em;
    padding: 0;
    list-style: disc;
}

#customSections .custom-list li {
    margin: 2px 0;
}

/* 説明／注意事項：全文＆※記号 */
#notes .notes-list {
    list-style: none;
    margin: 0;
    padding: 0
}

#notes .notes-list li {
    position: relative;
    line-height: 1.8;
    padding-left: 1.4em;
    font-size: .85rem;
}

#notes .notes-list li::before {
    content: '※';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--muted);
}

#notes .notes-list li.no-mark {
    padding-left: 0;
}

#notes .notes-list li.no-mark::before {
    content: none;
}

/* 空白行：文字は出さず、高さだけを制御 */
#notes .notes-list li.spacer {
  padding-left: 0;
  line-height: 0;
  font-size: 0;
}
#notes .notes-list li.spacer::before { content: none; }

#notes .notes-list li.spacer::after {
  content: '';
  display: block;
  height: 12px;        /* 行間調整（px指定） */
}

/* 引取方法・支払方法：黒点廃止 */
.pickup-pay-list {
    list-style: none;
    margin: 0;
    margin-bottom: 24px;
    padding: 0;
    line-height: 1.8;
    font-size: .9rem;
}

.pickup-pay-list li+li {
    margin-top: 6px
}

/* 申込に関する注意事項：小さめ＆※記号 */
.apply-notes {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .85rem;
}

.apply-notes li {
    position: relative;
    padding-left: 1.4em;
    line-height: 1.8;
}

.apply-notes li::before {
    content: '※';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--muted);
}

/* Table (非表示のデータ用なので簡易) */
.table {
    display: none
}

/* Sticky CTA */
.sticky-cta {
    --info: 7fr;
    --cta: 3fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--border);
    backdrop-filter: saturate(180%) blur(8px);
    padding: 10px 16px;
    z-index: 50
}

.sticky-cta .inner {
    max-width: var(--maxw);
    margin: auto;
    display: grid;
    grid-template-columns: var(--info) var(--cta);
    gap: 10px;
    font-size: .9rem;
    align-items: center;
    justify-content: space-between
}

.sticky-cta .inner>div {
    min-width: 0;
}

.sticky-cta .muted {
    font-size: 0.85rem;
}

#ctaSticky {
    justify-self: end;
    font-size: .8rem;
}

/* a11y */
.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
}

footer {
    color: var(--muted);
    font-size: .85rem;
    margin-top: 48px
}

/* pickupガイドのサブノート（直下小さく） */
.subnote {
    margin-top: 0;
    font-size: .85rem;
    color: var(--warn);
}

.subnote a {
    font-weight: 700;
}

/* —— 公演開催一覧 —— */
.shows-list {
    display: grid;
    gap: 14px;
}

/* 3行グリッド: 1)タイトル 2)左＋右(r1) 3)左＋右(r2) */
.show-card {
    display: grid;
    grid-template-columns: 1fr var(--btn-col-width, auto);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "title title"
        "left  r1"
        "left  r2";
    gap: 8px 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
}

.show-card .title-row {
    grid-area: title;
    font-weight: 800;
    line-height: 1.35;
    padding: 8px 10px;
    color: var(--accent);
    background: rgba(125, 0, 190, 0.06);
    border-radius: 8px;
}

/* 左カラム（日時/会場の2行） */
.show-card .left {
    grid-area: left;
}

.show-card .left .dt {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.3;
}

.show-card .left .venue {
    font-size: .85rem;
    font-weight: 700;
    margin-top: 2px;
}

/* 右カラム（ボタンコンテナ） */
.show-card .right {
    display: grid;
    text-align: center;
    align-items: center;
    justify-content: flex-end;
}

.show-card .right .btn {
    white-space: nowrap;
    display: grid;
}

/* 右：行割り当て（2ボタン時） */
.show-card .right.r1 {
    grid-area: r1;
}

.show-card .right.r2 {
    grid-area: r2;
}

/* 後方互換：クラス r1/r2 を付けない .right は「1ボタン＝2行結合」として扱う */
.show-card .right:not(.r1):not(.r2) {
    grid-area: r1;
    grid-row: 2 / 4;
    /* 2〜3行目を縦にまたいで中央寄せ */
}

/* 明示クラスでの切替（任意）
   one-btn：r1を2行結合／r2は非表示
   two-btn：r1=2行目／r2=3行目（両方表示） */
.show-card.one-btn .right.r1 {
    grid-area: r1;
    grid-row: 2 / 4;
}

.show-card.one-btn .right.r2 {
    display: none;
}

.show-card.two-btn .right.r1 {
    grid-area: r1;
}

.show-card.two-btn .right.r2 {
    grid-area: r2;
    display: flex;
}

/* 公演開催一覧：ボタンが2つある時だけ間隔を空ける */
.shows-list .show-card .right .btn+.btn {
    margin: 10px 0;
}

/* SP：公演カード（show-card）の情報と購入ボタンを縦積み */
@media (max-width: 598px) {
    .btn {
        padding: 8px 10px;
        font-size: .85rem;
        border-radius: 9px;
        min-height: 30px;
    }

    .shows-list .show-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        /* title, left, r1, r2 */
        grid-template-areas:
            "title"
            "left"
            "r1"
            "r2";
        gap: 10px;
    }

    /* 1ボタン（旧マークアップ）も全幅で下に来る */
    .shows-list .show-card .right:not(.r1):not(.r2) {
        grid-area: r1;
        grid-row: auto;
        justify-content: stretch;
    }

    .shows-list .show-card .right {
        justify-content: stretch;
    }

    .shows-list .show-card .right .btn {
        width: 100%;
        justify-content: center;
    }
}

/* 必要なときだけ 4行クランプ */
.longtext {
    position: relative;
    font-size: .9rem;
}

/* デフォルトは全文表示（ボタン非表示狙い） */
.longtext .fadeout {
    display: none;
}

/* クランプが必要なときだけ付くクラス */
.longtext.clamp {
    --clamp: 4;
    /* JSから上書き可 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--clamp);
    overflow: hidden;
}

/* クランプ時にだけフェードを表示 */
.longtext.clamp .fadeout {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

/* “もっと見る”で開いたらクランプを解除 */
.longtext.is-open {
    -webkit-line-clamp: unset;
    display: block;
}

/* 598px以下：.hero は常にフル幅1カラム＋子要素は縮め可 */
@media (max-width: 598px) {
    .wrap .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        /* 親幅いっぱい */
        justify-content: stretch;
        justify-items: stretch;
        align-items: start;
        width: 100%;
    }

    .hero>*,
    .hero-info,
    .hero-info>*,
    .hero-info .cards,
    .hero-info .cards>* {
        min-width: 0;
        max-width: 100%;
    }

    .poster,
    .poster img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* 長文はみ出し防止（必要箇所だけ） */
    .meta .chip,
    .sale .period,
    .sale .period strong,
    .tickets .ticket-item,
    .ticket-item .price-with-tax {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* 保険：横スクロールが不要なら clip を推奨（hiddenより安全） */
    html,
    body {
        overflow-x: clip;
    }
}

/* Heroの“重要メタ”をA案（眉ラベル＋本文）で強調 */
.meta .chip.key {
    border: 1px solid var(--accent);
    font-weight: 600;
    overflow-wrap: anywhere;
    box-shadow: var(--shadow);
}

.meta .chip.key.stack {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 12px;
    padding: 10px 12px;
}

/* 共通：サイズと色（currentColor） */
.ico {
    --ico-size: 18px;
    /* ここを変えれば全アイコンのサイズが変わる */
    display: inline-flex;
    width: var(--ico-size);
    height: var(--ico-size);
    color: var(--accent, currentColor);
    /* テキスト色に追従。必要なら --accent で上書き */
    flex: 0 0 auto;
    margin-top: 2px;
    /* 文字との縦揃え微調整 */
}

/* 実体は ::before で描画（SVGを mask-image として使う） */
.ico::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask: var(--ico-mask) no-repeat center / contain;
    mask: var(--ico-mask) no-repeat center / contain;
}

/* === バリエーション：ここで SVG マスクを切替 === */

/* ① カレンダー（あなたが最初に貼った path） */
.ico--calendar {
    --ico-mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path fill='white' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3a1 1 0 0 1 1-1Zm12 9H5v9h14v-9Zm-2-5H7v2h10V6Z'/>\</svg>");
}

/* ② ピン（2つ目に貼ってくれた path） */
.ico--marker {
    --ico-mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path fill='white' d='M12 2a7 7 0 0 1 7 7c0 4.97-5.4 10.39-6.56 11.53a.63.63 0 0 1-.88 0C10.4 19.39 5 13.97 5 9a7 7 0 0 1 7-7Zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/>\</svg>");
}

/* 既存の文脈スタイルがある場合（任意。必要なら残す） */
.meta .chip.key .ico {
    margin-top: 2px;
}


.meta .chip.key .stack-body {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-size: .9rem;
}

.meta .chip.key .eyebrow {
    font-size: .75rem;
    color: var(--muted);
    letter-spacing: .02em;
}

.meta .chip.key time,
.meta .chip.key strong {
    font-weight: 700;
}

/* 1) アイコンを上下中央に */
.meta .chip.key.stack {
    align-items: center;
    /* 旧: flex-start */
}

.meta .chip.key .ico {
    margin-top: 0;
    /* 旧調整をリセット */
    align-self: center;
    /* 念のためアイコン自身も中央寄せ */
}

/* Heroの会場チップ内：都道府県だけサイズ調整（見た目を揃える） */
.meta .chip.key .stack-body .muted {
    color: black !important;
    /* 既に指定している場合はそのまま */
    font-size: .9em;
    /* ← ほんの少し小さくして光学的に揃える */
    font-weight: 400;
    /* 念のため太字化を防止 */
    line-height: 1.25;
    /* 行間を会場名と合わせる */
}


/* ==== Utilities (generated to remove inline styles) ==== */
.mt-0 {
    margin-top: 0 !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-16 {
    margin-top: 16px !important;
}

.fs-90 {
    font-size: .9rem !important;
}

.pre-wrap {
    white-space: pre-wrap !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.buy-block {
    display: flex;
    gap: 10px;
    align-items: center;
}

#purchaseList .price-with-tax { 
  display: none; 
}

#purchaseList .ticket-item {
  display: grid; 
  grid-template-columns: 1fr var(--purchase-btn-width, 5.5em);
  align-items: center;
  gap: 10px;
}

#purchaseList .buy-block { 
  display: block;
}
#purchaseList .buy-block .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}