.cms-promotion-directory { margin-top: 24px; }
.cms-promotion-directory-page > header { display: grid; gap: 8px; padding: clamp(20px, 4vw, 38px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel)); box-shadow: var(--shadow); }
.cms-promotion-directory-page > header h1, .cms-promotion-directory-page > header p { margin: 0; }
.cms-promotion-directory-page > header p { max-width: 68ch; color: var(--muted-light); line-height: 1.55; }
.cms-promotion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.cms-promotion-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); }
.cms-promotion-card > a { height: 100%; display: grid; grid-template-rows: auto 1fr; color: inherit; text-decoration: none; }
.cms-promotion-card img { width: 100%; aspect-ratio: 16 / 10; display: block; object-fit: cover; background: var(--panel3); }
.cms-promotion-card div { display: grid; align-content: start; gap: 9px; padding: 17px; }
.cms-promotion-card span, .cms-promotion-detail header > span { color: var(--muted); font-size: .74rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.cms-promotion-card h2, .cms-promotion-card p { margin: 0; }
.cms-promotion-card h2 { font-size: 1.13rem; }
.cms-promotion-card p { color: var(--muted-light); line-height: 1.5; }
.cms-promotion-card strong { margin-top: auto; padding-top: 4px; color: var(--accent); }
.cms-promotion-card > a:hover, .cms-promotion-card > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cms-promotion-empty { padding: 28px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; }
.cms-promotion-detail > article { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); }
.cms-promotion-detail picture, .cms-promotion-detail picture img { width: 100%; display: block; }
.cms-promotion-detail picture img { max-height: min(55vh, 620px); object-fit: cover; background: var(--panel3); }
.cms-promotion-detail header { display: grid; gap: 12px; padding: clamp(20px, 5vw, 48px); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--panel)), var(--panel)); }
.cms-promotion-detail header h1, .cms-promotion-detail header p { margin: 0; }
.cms-promotion-detail header p { max-width: 68ch; color: var(--muted-light); font-size: 1.05rem; line-height: 1.6; }
.cms-promotion-detail header .button { justify-self: start; margin-top: 5px; }
.cms-promotion-detail-body { display: grid; gap: 18px; padding: clamp(20px, 5vw, 48px); }
.cms-promotion-detail-body section, .cms-promotion-detail-body aside, .cms-promotion-detail-body details { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel2); }
.cms-promotion-detail-body aside[data-promotion-block="notice"] { border-inline-start: 4px solid var(--accent); }
.cms-promotion-detail-body details[data-promotion-block="accordion"] summary { cursor: pointer; font-weight: 800; }
.cms-promotion-detail-body details[data-promotion-block="accordion"] summary + p { margin-top: 10px; }
.cms-promotion-terms-table { overflow-x: auto; }
.cms-promotion-terms-table table { width: 100%; border-collapse: collapse; }
.cms-promotion-terms-table th, .cms-promotion-terms-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.cms-promotion-terms-table th { width: 40%; color: var(--text); }
.cms-promotion-detail-body h2, .cms-promotion-detail-body p { margin: 0; }
.cms-promotion-detail-body h2 + p { margin-top: 8px; }
.cms-promotion-detail-body p, .cms-promotion-detail-body li { color: var(--muted-light); line-height: 1.65; }
@media (max-width: 620px) { .cms-promotion-grid { grid-template-columns: 1fr; } .cms-promotion-detail header .button { width: 100%; } }