/*
 * Colours, corners and button styling come from the active theme, so everything blends
 * into whatever site it's on:
 *
 * - The base tokens below start as neutral stand-ins taken from the surrounding text
 *   colour. theme.js then measures what the theme actually renders around each part of
 *   the page — text, background, links, buttons, inputs — and sets these tokens to match.
 * - Everything else (muted text, borders, tints) is mixed from those, never fixed.
 *
 * A theme or site can still pin any token in its own CSS with !important, or switch the
 * measuring off with the class_manager_match_theme filter.
 */
:root {
    --clm-text: currentColor;
    --clm-surface: Canvas;
    --clm-accent: currentColor;
    --clm-on-accent: Canvas;
    --clm-button-bg: var(--clm-accent);
    --clm-button-text: var(--clm-on-accent);
    --clm-button-font: inherit;
    --clm-button-weight: 700;
    --clm-button-transform: none;
    --clm-button-spacing: normal;
    --clm-button-radius: var(--clm-radius);
    --clm-input-bg: transparent;
    --clm-input-text: var(--clm-text);
    --clm-input-border: var(--clm-border);
    --clm-radius: .25rem;
    --clm-danger: #c62828;
    /* Shape of the image frame. The whole image is always shown inside it, never cropped. */
    --clm-image-ratio: 4 / 3;
}

/*
 * Mixed from the base tokens. Declared on each top-level part too, so a part that
 * theme.js matched to its own surroundings (say, a dark footer) mixes from its own colours.
 */
:where(:root, .clm-schedule, .clm-event, .clm-instructor, .clm-instructors, .clm-block, .clm-upcoming, .clm-details, .clm-profile-form, .clm-checkout, .clm-modal) {
    --clm-muted: color-mix(in srgb, var(--clm-text) 70%, transparent);
    --clm-border: color-mix(in srgb, var(--clm-text) 18%, transparent);
    --clm-card-bg: var(--clm-surface);
    --clm-toolbar-bg: color-mix(in srgb, var(--clm-text) 5%, var(--clm-surface));
    --clm-image-bg: color-mix(in srgb, var(--clm-text) 7%, var(--clm-surface));
    --clm-button-hover-bg: color-mix(in srgb, var(--clm-button-bg) 85%, var(--clm-text));
    --clm-strong-bg: var(--clm-text);
    --clm-strong-text: var(--clm-surface);
}

/* Theme-styled buttons: the theme's own font, weight, capitals, spacing and corners. */
.clm-button,
.clm-event .clm-event__get,
.clm-checkout .clm-checkout__submit,
.clm-toolbar .clm-toolbar__submit {
    font-family: var(--clm-button-font);
    font-weight: var(--clm-button-weight);
    letter-spacing: var(--clm-button-spacing);
    text-transform: var(--clm-button-transform);
}

/* Schedule: /classes/ and /classes/{type}/, inside the theme's own page layout */

.clm-schedule {
    clear: both;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.clm-schedule__description {
    margin: 0 0 1.5rem;
}

.clm-schedule__empty {
    padding: 2rem 0;
    text-align: center;
    color: var(--clm-muted);
}

.clm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: 1rem;
    background: var(--clm-toolbar-bg);
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
    font-size: .875rem;
}

/*
 * The search box and the view buttons share one fixed height, and theme margins on
 * forms, inputs and buttons are cleared, so the two line up whatever the theme does.
 */
.clm-toolbar {
    --clm-control-height: 2.5rem;
}

.clm-toolbar .clm-toolbar__search {
    display: flex;
    align-items: stretch;
    flex: 1 1 320px;
    box-sizing: border-box;
    height: var(--clm-control-height);
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--clm-input-bg);
    border: 1px solid var(--clm-input-border);
    border-radius: var(--clm-radius);
    color: var(--clm-input-text);
}

.clm-toolbar__icon {
    display: flex;
    align-items: center;
    padding: 0 .6rem;
    color: var(--clm-muted);
}

.clm-toolbar .clm-toolbar__search input[type="search"] {
    flex: 1;
    box-sizing: border-box;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 .5rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: inherit;
    font-size: inherit;
    line-height: normal;
}

/* Placeholders in the field's own text colour, softened, so they read on any theme. */
.clm-toolbar .clm-toolbar__search input::placeholder,
.clm-checkout .clm-attendee__field input::placeholder {
    color: color-mix(in srgb, var(--clm-input-text) 60%, transparent);
    opacity: 1;
}

.clm-toolbar .clm-toolbar__submit {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0 1rem;
    border: 0;
    border-radius: 0;
    background: var(--clm-button-bg);
    color: var(--clm-button-text);
    font-size: inherit;
    line-height: 1;
    cursor: pointer;
}

.clm-toolbar__clear {
    color: var(--clm-accent);
}

/* View switcher: one joined row of outline buttons, the active one filled. */
.clm-views {
    display: inline-flex;
    box-sizing: border-box;
    height: var(--clm-control-height);
    margin: 0 0 0 auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--clm-accent);
    border-radius: var(--clm-radius);
}

.clm-views[hidden],
.clm-view[hidden],
.clm-calendar__month[hidden] {
    display: none;
}

.clm-toolbar .clm-views__button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 2.5rem;
    height: 100%;
    margin: 0;
    padding: 0 .6rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--clm-accent);
    font: inherit;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}

.clm-toolbar .clm-views__button + .clm-views__button {
    border-left: 1px solid var(--clm-accent);
}

.clm-toolbar .clm-views__button:hover {
    background: color-mix(in srgb, var(--clm-accent) 12%, transparent);
    color: var(--clm-accent);
}

.clm-toolbar .clm-views__button.is-active {
    background: var(--clm-accent);
    color: var(--clm-on-accent);
}

.clm-toolbar .clm-views__button:focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: 2px;
}

.clm-views__button .clm-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.clm-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 600px) {
    .clm-views {
        margin-left: 0;
    }
}

.clm-icon {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
    flex: none;
}

.clm-grid {
    display: grid;
    /* Fills whatever width the theme gives: four across on a wide page, fewer beside a sidebar or on phones. */
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.5rem;
    margin: 0 0 2rem;
}

.clm-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--clm-card-bg);
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
    color: var(--clm-text);
    font-size: .875rem;
    line-height: 1.6;
    transition: box-shadow .5s;
}

.clm-card:hover {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.clm-card__thumb {
    display: block;
    aspect-ratio: var(--clm-image-ratio);
    overflow: hidden;
    background: var(--clm-image-bg);
}

/* Scaled to fit the frame's width or height, whichever comes first, keeping its own proportions. */
.clm-card .clm-card__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center;
}

.clm-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem;
}

.clm-card .clm-card__title {
    margin: 0 0 .25rem;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.clm-card .clm-card__title a {
    color: inherit;
    text-decoration: none;
}

.clm-card .clm-card__title a:hover {
    color: var(--clm-accent);
}

.clm-card__venue {
    overflow: hidden;
    color: var(--clm-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.clm-card__date {
    color: var(--clm-accent);
    font-weight: 700;
}

.clm-card__desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.clm-card__price {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: .5rem;
    font-weight: 700;
}

.clm-card__price .clm-icon {
    width: 1.4em;
    height: 1.4em;
}

.clm-card__footer {
    padding: .5rem 1rem;
    border-top: 1px solid var(--clm-border);
}

:is(.clm-card, .clm-row) .clm-button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: .5rem;
    background: var(--clm-button-bg);
    border: 1px solid var(--clm-button-bg);
    border-radius: var(--clm-button-radius);
    color: var(--clm-button-text);
    text-align: center;
    text-decoration: none;
}

:is(.clm-card, .clm-row) a.clm-button:hover {
    background: var(--clm-button-hover-bg);
    border-color: var(--clm-button-hover-bg);
    color: var(--clm-button-text);
}

:is(.clm-card, .clm-row) .clm-button:focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: 2px;
}

:is(.clm-card, .clm-row) .clm-button--muted,
:is(.clm-card, .clm-row) a.clm-button--muted:hover {
    background: transparent;
    border-color: var(--clm-border);
    color: var(--clm-muted);
}

/* Staggered grid: images at their own height, packed into columns by schedule.js. */

.clm-card--staggered .clm-card__thumb {
    aspect-ratio: auto;
}

.clm-card--staggered .clm-card__img {
    height: auto;
}

.clm-card--staggered .clm-card__desc {
    -webkit-line-clamp: 6;
}

.clm-grid--staggered.is-masonry {
    --clm-masonry-gap: 24px;
    grid-auto-rows: 8px;
    row-gap: 0;
    align-items: start;
}

.clm-grid--staggered.is-masonry > .clm-card {
    margin-bottom: var(--clm-masonry-gap);
}

/* Slider: one swipeable row of cards. */

.clm-slider {
    position: relative;
    margin: 0 0 2rem;
}

.clm-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(260px, 85%), calc((100% - 3rem) / 3));
    gap: 1.5rem;
    overflow-x: auto;
    padding: .25rem .25rem 1rem;
    scroll-snap-type: x mandatory;
    scroll-padding: .25rem;
    scrollbar-width: thin;
}

.clm-slider__track > .clm-card {
    scroll-snap-align: start;
}

.clm-card--slider .clm-card__desc {
    -webkit-line-clamp: 5;
}

.clm-slider .clm-slider__arrow {
    position: absolute;
    top: 40%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    background: var(--clm-card-bg);
    border: 1px solid var(--clm-border);
    border-radius: 50%;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
    color: var(--clm-text);
    cursor: pointer;
}

.clm-slider .clm-slider__arrow[hidden] {
    display: none;
}

.clm-slider .clm-slider__arrow:disabled {
    opacity: .35;
    cursor: default;
}

.clm-slider__arrow--prev {
    left: -.75rem;
}

.clm-slider__arrow--next {
    right: -.75rem;
}

.clm-slider__track:focus-visible,
.clm-slider .clm-slider__arrow:focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: 2px;
}

/* Stacked rows */

.clm-rows {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 0 2rem;
}

.clm-row {
    display: grid;
    grid-template-columns: 4.5rem 180px minmax(0, 1fr) 180px;
    gap: 1.25rem;
    align-items: center;
    padding: 1rem;
    background: var(--clm-card-bg);
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
    color: var(--clm-text);
    font-size: .875rem;
    line-height: 1.6;
    transition: box-shadow .5s;
}

.clm-row:hover {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.clm-row__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .4rem 0;
    border-radius: var(--clm-radius);
    background: color-mix(in srgb, var(--clm-accent) 10%, transparent);
    color: var(--clm-accent);
    line-height: 1.2;
    text-transform: uppercase;
}

.clm-row__month,
.clm-row__weekday {
    font-size: .75rem;
    font-weight: 700;
}

.clm-row__year {
    font-size: .7rem;
    font-weight: 600;
    opacity: .8;
}

.clm-row__num {
    font-size: 1.75rem;
    font-weight: 700;
}

.clm-row__thumb {
    display: block;
    aspect-ratio: var(--clm-image-ratio);
    overflow: hidden;
    border-radius: var(--clm-radius);
    background: var(--clm-image-bg);
}

.clm-row .clm-row__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
}

.clm-row__body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.clm-row .clm-row__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
}

.clm-row .clm-row__title a {
    color: inherit;
    text-decoration: none;
}

.clm-row .clm-row__title a:hover {
    color: var(--clm-accent);
}

.clm-row__date {
    color: var(--clm-accent);
    font-weight: 700;
}

.clm-row__venue {
    color: var(--clm-muted);
}

/* A venue with a website: same colour as the text around it, underlined so it reads as a link. */
.clm-venue-link,
.clm-venue-link:visited {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 2px;
}

.clm-venue-link:hover,
.clm-venue-link:focus {
    color: var(--clm-accent);
    text-decoration-color: currentColor;
}

.clm-row__desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.clm-row__aside {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.clm-row__price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-weight: 700;
}

.clm-row__price .clm-icon {
    width: 1.4em;
    height: 1.4em;
}

@media (max-width: 900px) {
    .clm-row {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .clm-row__thumb {
        display: none;
    }

    .clm-row__aside {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .clm-row__aside .clm-button {
        width: auto;
        padding: .5rem 1.5rem;
    }
}

/* Calendar */

.clm-calendar {
    margin: 0 0 2rem;
    color: var(--clm-text);
    font-size: .875rem;
}

.clm-calendar__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
}

.clm-calendar .clm-calendar__title {
    margin: 0;
    font-size: 1.25rem;
    text-align: center;
}

.clm-calendar .clm-calendar__step {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: .35rem .6rem;
    background: transparent;
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
    box-shadow: none;
    color: var(--clm-accent);
    font: inherit;
    line-height: 1.4;
    text-transform: none;
    cursor: pointer;
}

.clm-calendar .clm-calendar__step:hover:not(:disabled) {
    background: color-mix(in srgb, var(--clm-accent) 10%, transparent);
}

.clm-calendar .clm-calendar__step:disabled {
    opacity: .4;
    cursor: default;
}

.clm-calendar .clm-calendar__step:focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: 2px;
}

.clm-calendar .clm-calendar__grid {
    width: 100%;
    margin: 0;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--clm-card-bg);
}

.clm-calendar__grid th,
.clm-calendar__grid td {
    border: 1px solid var(--clm-border);
}

.clm-calendar__grid th {
    padding: .5rem .25rem;
    background: var(--clm-toolbar-bg);
    font-weight: 700;
    text-align: center;
}

.clm-calendar__grid th abbr {
    border: 0;
    text-decoration: none;
}

.clm-calendar__grid td {
    height: 7rem;
    padding: .35rem;
    vertical-align: top;
}

.clm-calendar__day.is-outside {
    background: var(--clm-toolbar-bg);
    color: var(--clm-muted);
}

.clm-calendar__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    font-weight: 700;
}

.clm-calendar__day.is-today .clm-calendar__num {
    border-radius: 50%;
    background: var(--clm-accent);
    color: var(--clm-on-accent);
}

.clm-calendar__date {
    display: none;
}

.clm-calendar .clm-calendar__classes {
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
}

.clm-calendar__classes li {
    margin: 0 0 .25rem;
    padding: 0;
}

.clm-calendar .clm-calendar__classes a {
    display: block;
    overflow: hidden;
    padding: .15rem .35rem;
    border-left: 3px solid var(--clm-accent);
    border-radius: var(--clm-radius);
    background: color-mix(in srgb, var(--clm-accent) 10%, transparent);
    color: var(--clm-text);
    font-size: .8rem;
    line-height: 1.35;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clm-calendar .clm-calendar__classes a:hover {
    background: color-mix(in srgb, var(--clm-accent) 20%, transparent);
}

.clm-calendar__day.is-past .clm-calendar__classes a {
    opacity: .6;
}

.clm-calendar__time {
    font-weight: 700;
}

/* Phones: the month grid becomes a list of the days that have classes. */
@media (max-width: 640px) {
    .clm-calendar .clm-calendar__grid,
    .clm-calendar__grid tbody,
    .clm-calendar__grid tr,
    .clm-calendar__grid td {
        display: block;
        width: 100%;
    }

    .clm-calendar__grid thead,
    .clm-calendar__grid td:not(.has-classes),
    .clm-calendar__num {
        display: none;
    }

    .clm-calendar__grid td {
        height: auto;
        padding: .6rem .75rem;
        border-width: 0 0 1px;
    }

    .clm-calendar__date {
        display: block;
        font-weight: 700;
    }

    .clm-calendar__day.is-today .clm-calendar__date {
        color: var(--clm-accent);
    }

    .clm-calendar .clm-calendar__classes a {
        padding: .4rem .5rem;
        font-size: .875rem;
        white-space: normal;
    }

    .clm-calendar__step span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clm-card,
    .clm-row {
        transition: none;
    }

    .clm-slider__track {
        scroll-behavior: auto;
    }
}

/*
 * "Classes by Type" block, sized like WooCommerce's product grid blocks: the chosen
 * number of columns whatever the space (two on phones), and each image at its own
 * proportions across the full card width.
 */

.clm-block .clm-grid {
    grid-template-columns: repeat(var(--clm-columns, 4), minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .clm-block .clm-grid {
        grid-template-columns: repeat(var(--clm-columns-medium, 2), minmax(0, 1fr));
    }
}

.clm-block .clm-card__thumb {
    aspect-ratio: auto;
    background: none;
}

.clm-block .clm-card .clm-card__img {
    height: auto;
}

.clm-block .clm-card .clm-card__title {
    white-space: normal;
}

/* Small cards (a narrow column, or many columns): tighter spacing and text. */
.clm-block .clm-card {
    container-type: inline-size;
}

@container (max-width: 200px) {
    .clm-card .clm-card__body {
        gap: .2rem;
        padding: .6rem;
        font-size: .8rem;
    }

    .clm-card .clm-card__title {
        font-size: .875rem;
    }

    .clm-card .clm-card__price {
        padding-top: .25rem;
    }

    .clm-card .clm-card__footer {
        padding: .5rem .6rem;
    }

    .clm-card .clm-button {
        padding: .4rem .25rem;
        font-size: .8rem;
    }
}

.clm-block--no-image .clm-card__thumb,
.clm-block--no-venue .clm-card__venue,
.clm-block--no-date .clm-card__date,
.clm-block--no-summary .clm-card__desc,
.clm-block--no-price .clm-card__price,
.clm-block--no-button .clm-card__footer {
    display: none;
}

/* Class list (/classes/): a card per category, staggered; class names as rows. */

.clm-catalog .clm-catalog__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

/*
 * Columns set under Appearance → Customize → Class Manager (schedule grids and the class
 * list): that many, then at most two on tablets and one on phones.
 */
.clm-grid.clm-grid--fixed,
.clm-catalog .clm-catalog__grid--fixed {
    grid-template-columns: repeat(var(--clm-columns, 3), minmax(0, 1fr));
}

@media (max-width: 900px) {
    .clm-grid.clm-grid--fixed,
    .clm-catalog .clm-catalog__grid--fixed {
        grid-template-columns: repeat(var(--clm-columns-medium, 2), minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .clm-grid.clm-grid--fixed,
    .clm-catalog .clm-catalog__grid--fixed {
        grid-template-columns: minmax(0, 1fr);
    }
}

.clm-catalog__card {
    padding: 0;
}

.clm-catalog__card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1.1rem .7rem;
    border-bottom: 2px solid var(--clm-button-bg);
}

.clm-catalog .clm-catalog__heading {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
}

.clm-catalog .clm-catalog__heading a {
    color: inherit;
    text-decoration: none;
}

.clm-catalog .clm-catalog__heading a:hover {
    color: var(--clm-accent);
}

.clm-catalog__count {
    flex: none;
    color: var(--clm-muted);
    font-size: .8rem;
}

/* One class per row. */
.clm-catalog .clm-catalog__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.clm-catalog .clm-catalog__list li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--clm-border);
}

.clm-catalog__card .clm-catalog__list li:last-child {
    border-bottom: 0;
}

.clm-catalog .clm-catalog__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem 1.1rem;
    color: var(--clm-text);
    font-weight: 600;
    text-decoration: none;
}

.clm-catalog .clm-catalog__list a:hover {
    background: color-mix(in srgb, var(--clm-accent) 6%, transparent);
    color: var(--clm-accent);
}

.clm-catalog .clm-catalog__list a:focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: -2px;
}

/*
 * Class series: "Flamenco Guitar 1 | 2 | 3", each level a link.
 *
 * The levels are a list, often inside another list (the class list), and themes style
 * nested lists heavily — bullets, display: block, indents (e.g. Responsive Brix's
 * ".main ul ul" and ".main li"). So the selectors are doubled to outrank those, and
 * every list property themes set is reset.
 */
ul.clm-levels.clm-levels {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

ul.clm-levels.clm-levels > li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    background: none;
}

ul.clm-levels.clm-levels > li::marker {
    content: none;
}

.clm-levels li + li::before {
    content: "|";
    margin: 0 .3rem;
    color: var(--clm-muted);
    font-weight: 400;
}

.clm-levels .clm-levels__level {
    padding: .1rem .3rem;
    border-radius: var(--clm-radius);
    color: var(--clm-accent);
    font-weight: 700;
    text-decoration: none;
}

.clm-levels a.clm-levels__level:hover {
    background: color-mix(in srgb, var(--clm-accent) 12%, transparent);
    text-decoration: underline;
}

.clm-levels a.clm-levels__level:focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: 1px;
}

/* On a level's own page, that level. */
.clm-levels .clm-levels__level.is-current {
    background: var(--clm-accent);
    color: var(--clm-on-accent);
}

.clm-event__series {
    margin-right: .2rem;
}

/* In the course list, a series is one row: its name, then its levels. */
.clm-catalog .clm-catalog__list .clm-catalog__series {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .6rem;
    padding: .65rem 1.1rem;
}

.clm-catalog__series-name {
    color: var(--clm-text);
    font-weight: 600;
}

.clm-catalog .clm-catalog__list .clm-levels li {
    border-bottom: 0;
}

.clm-catalog .clm-catalog__list .clm-levels a {
    display: inline;
    padding: .1rem .3rem;
    color: var(--clm-accent);
}

.clm-catalog .clm-catalog__list .clm-levels a:hover {
    background: color-mix(in srgb, var(--clm-accent) 12%, transparent);
}

/* A series' tile on a category's page: name and levels under the image. */
.clm-catalog__tile--series .clm-catalog__tile-name {
    padding-bottom: .25rem;
}

.clm-catalog__tile--series .clm-levels {
    padding: 0 .4rem .6rem;
    font-size: .875rem;
}

/* A single category's page: a card per class (image and name), six to a row. */
.clm-catalog__tiles {
    display: grid;
    grid-template-columns: repeat(var(--clm-columns, 6), minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
}

@media (max-width: 1000px) {
    .clm-catalog__tiles {
        grid-template-columns: repeat(var(--clm-columns-medium, 4), minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .clm-catalog__tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .clm-catalog__tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.clm-catalog .clm-catalog__tile {
    color: var(--clm-text);
    text-decoration: none;
}

.clm-catalog .clm-catalog__tile:hover {
    border-color: var(--clm-accent);
}

.clm-catalog .clm-catalog__tile:focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: 2px;
}

/* The whole image at its own proportions. */
.clm-catalog__tile-thumb {
    display: block;
}

.clm-catalog__tile-thumb.is-empty {
    aspect-ratio: var(--clm-image-ratio);
    background: var(--clm-image-bg);
}

.clm-catalog .clm-catalog__tile-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}

.clm-catalog__tile-name {
    display: block;
    padding: .6rem .7rem;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.35;
}

.clm-catalog .clm-catalog__tile:hover .clm-catalog__tile-name {
    color: var(--clm-accent);
}

.clm-catalog__schedule-link {
    margin: 0 0 2rem;
    text-align: center;
}

/* Styles chosen under Appearance → Customize → Class Manager → Class List. */
.clm-catalog .clm-catalog__schedule-link--accent a {
    color: var(--clm-accent);
}

.clm-catalog .clm-catalog__schedule-link--button a {
    display: inline-block;
    padding: .65rem 1.5rem;
    border: 1px solid var(--clm-button-bg);
    border-radius: var(--clm-button-radius);
    background: var(--clm-button-bg);
    color: var(--clm-button-text);
    font-family: var(--clm-button-font);
    font-weight: var(--clm-button-weight);
    letter-spacing: var(--clm-button-spacing);
    text-transform: var(--clm-button-transform);
    text-decoration: none;
}

.clm-catalog .clm-catalog__schedule-link--button a:hover {
    border-color: var(--clm-button-hover-bg);
    background: var(--clm-button-hover-bg);
    color: var(--clm-button-text);
}

.clm-catalog .clm-catalog__schedule-link--button a:focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: 2px;
}

/* A class's page: its upcoming dates, each linking to booking. */

.clm-event .clm-dates-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.clm-event .clm-dates-list li {
    margin: 0 0 .5rem;
    padding: 0;
}

.clm-event .clm-dates-list__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .1rem .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
    color: var(--clm-text);
    text-decoration: none;
}

.clm-event .clm-dates-list__item:hover {
    border-color: var(--clm-accent);
    background: color-mix(in srgb, var(--clm-accent) 6%, transparent);
}

.clm-event .clm-dates-list__item:focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: 2px;
}

.clm-dates-list__date {
    font-weight: 700;
}

.clm-dates-list__time {
    grid-column: 1;
    color: var(--clm-muted);
    font-size: .85rem;
}

.clm-dates-list__seats {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    color: var(--clm-accent);
    font-size: .8rem;
    font-weight: 700;
}

.clm-dates-list__item.is-full .clm-dates-list__seats {
    color: var(--clm-muted);
}

.clm-dates-list__more {
    margin: .5rem 0 0;
    font-size: .875rem;
}

/* Instructor Profile block */

.clm-instructor {
    clear: both;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    color: var(--clm-text);
}

.clm-instructor__intro {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2rem;
    align-items: start;
    margin: 0 0 2rem;
}

.clm-instructor__intro.has-no-photo,
.clm-instructor--stacked .clm-instructor__intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.clm-instructor--stacked .clm-instructor__photo {
    max-width: 480px;
}

.clm-instructor .clm-instructor__name {
    margin: 0 0 .75rem;
}

.clm-instructor__photo {
    margin: 0;
    background: var(--clm-image-bg);
    border-radius: var(--clm-radius);
    overflow: hidden;
}

.clm-instructor__photo a {
    display: block;
}

.clm-instructor .clm-instructor__photo-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.clm-instructor__bio > :first-child {
    margin-top: 0;
}

.clm-instructor .clm-instructor__heading {
    margin: 1.5rem 0 .75rem;
    font-size: 1.25rem;
}

.clm-instructor .clm-instructor__about > :first-child {
    margin-top: 0;
}

.clm-instructor .clm-instructor__certs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.clm-instructor .clm-instructor__certs li {
    margin: 0 0 .4rem;
    padding: .5rem .75rem;
    border-left: 3px solid var(--clm-accent);
    background: var(--clm-toolbar-bg);
}

.clm-instructor__cert-group + .clm-instructor__cert-group {
    margin-top: 1rem;
}

.clm-instructor .clm-instructor__cert-category {
    margin: 0 0 .5rem;
    color: var(--clm-muted);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Qualifications: certificates and the like, each shown whole, never cropped. */

.clm-instructor__qualifications {
    margin: 2rem 0 0;
}

.clm-instructor .clm-instructor__quals {
    display: grid;
    grid-template-columns: repeat(var(--clm-qual-columns, 4), minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clm-instructor .clm-instructor__quals li {
    margin: 0;
    padding: 0;
}

.clm-instructor .clm-instructor__qual {
    margin: 0;
}

.clm-instructor__qual a {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: .5rem;
    box-sizing: border-box;
    background: var(--clm-image-bg);
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
}

.clm-instructor__qual a:hover {
    border-color: var(--clm-accent);
}

.clm-instructor .clm-instructor__qual-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: 0;
    object-fit: contain;
}

.clm-instructor__qual-caption {
    margin: .4rem 0 0;
    color: var(--clm-muted);
    font-size: .85rem;
    text-align: center;
}

@media (max-width: 900px) {
    .clm-instructor .clm-instructor__quals {
        grid-template-columns: repeat(var(--clm-qual-columns-medium, 3), minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .clm-instructor .clm-instructor__quals {
        grid-template-columns: repeat(var(--clm-qual-columns-small, 2), minmax(0, 1fr));
    }
}

.clm-instructor .clm-instructor__gallery {
    display: grid;
    grid-template-columns: repeat(var(--clm-columns, 4), minmax(0, 1fr));
    gap: .75rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.clm-instructor .clm-instructor__gallery li {
    margin: 0;
    padding: 0;
}

.clm-instructor__gallery a {
    display: block;
    aspect-ratio: 1;
    background: var(--clm-image-bg);
    border-radius: var(--clm-radius);
    overflow: hidden;
}

.clm-instructor .clm-instructor__gallery-img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    transition: transform .2s;
}

.clm-instructor__gallery a:hover .clm-instructor__gallery-img {
    transform: scale(1.04);
}

.clm-instructor__empty {
    color: var(--clm-muted);
}

.clm-instructor .clm-dates-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.clm-instructor .clm-dates-list li {
    margin: 0 0 .5rem;
    padding: 0;
}

.clm-instructor .clm-dates-list__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .1rem .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
    color: var(--clm-text);
    text-decoration: none;
}

.clm-instructor .clm-dates-list__item:hover {
    border-color: var(--clm-accent);
    background: color-mix(in srgb, var(--clm-accent) 6%, transparent);
}

.clm-instructor .clm-dates-list__item:focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: 2px;
}

@media (max-width: 700px) {
    .clm-instructor__intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .clm-instructor .clm-instructor__gallery,
    .clm-instructors .clm-instructors__grid {
        grid-template-columns: repeat(var(--clm-columns-medium, 2), minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .clm-instructors .clm-instructors__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Instructors block: a grid of instructor cards */

.clm-instructors {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    color: var(--clm-text);
}

.clm-instructors .clm-instructors__grid {
    display: grid;
    grid-template-columns: repeat(var(--clm-columns, 3), minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clm-instructors .clm-instructors__card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: var(--clm-card-bg);
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
    overflow: hidden;
}

.clm-instructors__photo {
    aspect-ratio: 1;
    background: var(--clm-image-bg);
}

.clm-instructors .clm-instructors__img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

.clm-instructors__body {
    padding: 1rem;
}

.clm-instructors .clm-instructors__name {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
}

.clm-instructors .clm-instructors__certs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
}

.clm-instructors .clm-instructors__certs li {
    margin: 0;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--clm-accent) 10%, transparent);
    color: var(--clm-accent);
    font-size: .75rem;
    font-weight: 600;
}

.clm-instructors .clm-instructors__about {
    margin: 0;
    color: var(--clm-muted);
    font-size: .9rem;
}

/* My Account → Instructor Profile */

.clm-profile-form textarea {
    width: 100%;
}

.clm-profile-form__section {
    margin: 1.5rem 0;
}

.clm-certs-field [hidden] {
    display: none !important;
}

.clm-profile-form .clm-certs-field__list {
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
}

.clm-profile-form .clm-certs-field__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
}

.clm-profile-form .clm-certs-field__name {
    flex: 1 1 14rem;
    width: auto;
    min-width: 0;
}

.clm-profile-form .clm-certs-field__category {
    flex: 0 1 14rem;
    min-width: 0;
}

.clm-profile-form .clm-certs-field__remove {
    flex: none;
    padding: 0 .4rem;
    border: 0;
    background: none;
    color: var(--clm-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.clm-profile-form .clm-certs-field__remove:hover,
.clm-profile-form .clm-certs-field__remove:focus-visible {
    color: var(--clm-danger);
}

.clm-profile-form .clm-profile-form__img--whole {
    object-fit: contain;
    aspect-ratio: 4 / 3;
    background: var(--clm-image-bg);
}

.clm-profile-form .clm-profile-form__caption {
    width: 100%;
    margin: 0 0 .4rem;
    box-sizing: border-box;
}

.clm-profile-form__caption-text {
    display: block;
    margin: 0 0 .4rem;
    color: var(--clm-muted);
}

.clm-profile-form .clm-profile-form__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .75rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.clm-profile-form .clm-profile-form__photo {
    margin: 0;
    padding: .4rem;
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
    font-size: .85rem;
}

.clm-profile-form .clm-profile-form__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin: 0 0 .4rem;
    object-fit: cover;
}

.clm-profile-form__photo label {
    display: block;
    margin: 0;
}

/* Class details box (class posts listed outside the schedule, e.g. search results) */

.clm-details {
    display: grid;
    gap: .25rem 1.5rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
}

.clm-details__row {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 1rem;
}

.clm-details dt {
    font-weight: 600;
}

.clm-details dd {
    margin: 0;
}

/* Class page: image, type/calendar bar, then description beside the Buy Tickets box.
   Columns follow the width the theme gives the content, not the window. */

.clm-event {
    container-type: inline-size;
    margin: 0 0 2rem;
}

/* The class name, when the theme doesn't show the page title. Typeface, size and colour are the theme's own h1. */
.clm-event .clm-event__title {
    margin: 1.25rem 0 0;
    padding: 0 0 0 .9rem;
    border-left: 3px solid var(--clm-button-bg);
    /* The theme's heading typeface and colour, at a size that suits a column rather than the page. */
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem);
    line-height: 1.2;
}

/* On a class's page it opens the column, with nothing above it. */
.clm-event .clm-event__main > .clm-event__title:first-child {
    margin-top: 0;
}

.clm-event__hero {
    margin: 0 0 1rem;
    text-align: center;
}

/*
 * Whole image at its natural proportions, scaled up or down so its longer side fills a
 * 500 × 500 box (never wider than the content). The width for that is worked out per
 * image and set on it (see Single::hero()); 500px is the fallback.
 */
.clm-event .clm-event__img {
    display: inline-block;
    width: min(500px, 100%);
    max-width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
}

.clm-event__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--clm-border);
}

.clm-event__types {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.clm-event .clm-event__type {
    padding: .2rem .65rem;
    border-radius: 50rem;
    background: color-mix(in srgb, var(--clm-accent) 10%, transparent);
    color: var(--clm-accent);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

.clm-event .clm-event__type:hover {
    background: color-mix(in srgb, var(--clm-accent) 20%, transparent);
}

.clm-addcal {
    position: relative;
    font-size: .875rem;
}

.clm-addcal summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
    color: var(--clm-accent);
    list-style: none;
    cursor: pointer;
}

.clm-addcal summary::-webkit-details-marker {
    display: none;
}

.clm-addcal summary:focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: 2px;
}

.clm-addcal ul {
    position: absolute;
    right: 0;
    z-index: 10;
    min-width: 13rem;
    margin: .35rem 0 0;
    padding: .35rem 0;
    background: var(--clm-card-bg);
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    list-style: none;
}

.clm-addcal li {
    margin: 0;
    padding: 0;
}

.clm-addcal a {
    display: block;
    padding: .4rem 1rem;
    color: var(--clm-text);
    text-decoration: none;
}

.clm-addcal a:hover {
    background: var(--clm-toolbar-bg);
    color: var(--clm-accent);
}

.clm-event__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

@container (min-width: 700px) {
    .clm-event__columns {
        grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    }

    .clm-event__aside {
        position: sticky;
        top: 2rem;
        align-self: start;
    }
}

.clm-event__when {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .75rem;
}

.clm-event__day {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.clm-event__time {
    font-size: 1rem;
}

/*
 * Details block: one label column as wide as the longest label (labels never wrap),
 * each label on the first line of its value, and equal space above and below inside
 * the yellow bar. Line height and margins are set here so the theme's don't stretch it.
 */
.clm-event .clm-event__info {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: .7rem 1.75rem;
    margin: 1.25rem 0 0;
    padding: .9rem 0 .9rem 1.25rem;
    border-left: 3px solid var(--clm-button-bg);
    line-height: 1.5;
}

.clm-event__info > div {
    display: contents;
}

.clm-event .clm-event__info dt {
    margin: 0;
    padding: 0;
    color: var(--clm-muted);
    /* Big enough that small capitals render with crisp tops at normal zoom. */
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: inherit;
    text-transform: uppercase;
    white-space: nowrap;
}

.clm-event .clm-event__info dd {
    margin: 0;
    padding: 0;
    line-height: inherit;
}

/* Narrow content area: each label sits above its value instead. */
@container (max-width: 440px) {
    .clm-event .clm-event__info {
        grid-template-columns: minmax(0, 1fr);
        row-gap: .1rem;
    }

    .clm-event .clm-event__info dd {
        margin-bottom: .6rem;
    }

    .clm-event .clm-event__info > div:last-child dd {
        margin-bottom: 0;
    }
}

.clm-event .clm-event__list,
.clm-details .clm-event__list {
    margin: 0;
    padding: 0 0 0 1.1rem;
    list-style: disc;
}

.clm-event .clm-event__list li,
.clm-details .clm-event__list li {
    margin: 0 0 .3rem;
    padding: 0;
    line-height: inherit;
}

.clm-event .clm-event__list li:last-child,
.clm-details .clm-event__list li:last-child {
    margin-bottom: 0;
}

.clm-event .clm-event__venue {
    color: var(--clm-accent);
    text-decoration: none;
}

.clm-event .clm-event__venue:hover strong {
    text-decoration: underline;
}

.clm-event__map-hint {
    color: var(--clm-muted);
    font-size: .8rem;
}

.clm-event__description {
    margin: 1.5rem 0 0;
}

.clm-event__tickets {
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--clm-card-bg);
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
    color: var(--clm-text);
}

.clm-event .clm-event__tickets-title {
    margin: 0 0 1rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.3;
}

.clm-event__dates {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* Date chips: the date shown is solid; other dates in a series are lighter links. */
.clm-event .clm-event__chip {
    display: inline-block;
    padding: .2rem .5rem;
    border: 2px solid var(--clm-border);
    border-radius: var(--clm-radius);
    color: var(--clm-muted);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

.clm-event a.clm-event__chip:hover {
    border-color: var(--clm-muted);
    color: var(--clm-text);
}

.clm-event .clm-event__chip.is-current {
    border-color: var(--clm-text);
    color: var(--clm-text);
}

.clm-event a.clm-event__chip:focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: 2px;
}

.clm-event__price {
    margin: .9rem 0 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.clm-event__seats {
    margin: .25rem 0 0;
    color: var(--clm-muted);
    font-size: .875rem;
}

.clm-event .clm-event__get {
    display: block;
    margin: 1rem 0 0;
    padding: .65rem 1rem;
    border-radius: var(--clm-button-radius);
    background: var(--clm-button-bg);
    color: var(--clm-button-text);
    text-align: center;
    text-decoration: none;
}

.clm-event .clm-event__get:hover {
    background: var(--clm-button-hover-bg);
    color: var(--clm-button-text);
}

.clm-event .clm-event__get:focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: 2px;
}

/* The page's QR code, under Get Tickets Now. Always black on white so phones can read it. */
.clm-event__qr {
    margin: 1.25rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--clm-border);
    text-align: center;
}

.clm-event .clm-event__qr-title {
    margin: 0 0 .75rem;
    font-size: 1.1rem;
}

.clm-event__qr .clm-qr {
    display: block;
    width: 170px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.clm-event__closed {
    margin: 1rem 0 0;
    font-weight: 700;
}

/* Ticket picker: a dialog once class.js has run, otherwise a section at the foot of the page. */

.clm-checkout {
    container-type: inline-size;
    margin: 2.5rem 0 0;
    padding: 1.5rem;
    background: var(--clm-card-bg);
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
    color: var(--clm-text);
}

.clm-checkout.is-dialog {
    margin: 0;
    border: 0;
}

.clm-modal {
    box-sizing: border-box;
    width: min(960px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: var(--clm-radius);
    background: var(--clm-surface);
    color: var(--clm-text);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3);
}

.clm-modal::backdrop {
    background: rgba(0, 0, 0, .55);
}

.clm-checkout__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin: 0;
}

@container (min-width: 600px) {
    .clm-checkout__form {
        grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr);
    }
}

.clm-checkout .clm-checkout__title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
}

.clm-ticket {
    padding: 0 0 1rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--clm-border);
}

.clm-ticket__name {
    font-size: 1.1rem;
    font-weight: 700;
}

.clm-ticket__desc,
.clm-ticket__limits,
.clm-ticket__status {
    color: var(--clm-muted);
    font-size: .875rem;
}

.clm-ticket__price {
    margin: .5rem 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.clm-stepper {
    display: inline-flex;
    margin: 0 0 .35rem;
    border: 1px solid var(--clm-text);
    border-radius: var(--clm-radius);
    overflow: hidden;
}

.clm-checkout .clm-stepper__btn,
.clm-checkout .clm-stepper__qty {
    box-sizing: border-box;
    height: 2.25rem;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--clm-text);
    font: inherit;
    line-height: 1;
}

.clm-checkout .clm-stepper__btn {
    width: 2.5rem;
    padding: 0;
    font-size: 1.1rem;
    cursor: pointer;
}

.clm-checkout .clm-stepper__btn:hover {
    background: var(--clm-strong-bg);
    color: var(--clm-strong-text);
}

.clm-checkout .clm-stepper__qty {
    width: 3.25rem;
    padding: 0 .25rem;
    border-left: 1px solid var(--clm-text);
    border-right: 1px solid var(--clm-text);
    text-align: center;
    -moz-appearance: textfield;
}

.clm-stepper__qty::-webkit-outer-spin-button,
.clm-stepper__qty::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.clm-checkout__summary {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.clm-checkout .clm-checkout__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 0 .25rem;
    border-radius: var(--clm-radius);
}

.clm-checkout__name {
    font-size: 1.1rem;
    font-weight: 700;
}

.clm-checkout__date {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--clm-muted);
    font-size: .875rem;
}

.clm-checkout__total {
    display: flex;
    justify-content: space-between;
    margin: .5rem 0;
    padding: .75rem 0;
    border-top: 1px solid var(--clm-border);
    border-bottom: 1px solid var(--clm-border);
    font-weight: 700;
}

.clm-checkout .clm-checkout__submit {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: .65rem;
    background: var(--clm-button-bg);
    border: 1px solid var(--clm-button-bg);
    border-radius: var(--clm-button-radius);
    color: var(--clm-button-text);
    font-size: inherit;
    cursor: pointer;
}

.clm-checkout .clm-checkout__submit:hover:not(:disabled) {
    background: var(--clm-button-hover-bg);
}

.clm-checkout .clm-checkout__submit:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.clm-checkout .clm-checkout__close {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: .65rem;
    background: var(--clm-strong-bg);
    border: 0;
    border-radius: var(--clm-button-radius);
    color: var(--clm-strong-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.clm-checkout .clm-checkout__close[hidden] {
    display: none;
}

.clm-checkout :is(.clm-checkout__submit, .clm-checkout__close, .clm-stepper__btn):focus-visible {
    outline: 2px solid var(--clm-accent);
    outline-offset: 2px;
}

.clm-checkout__notices {
    margin: 0 0 1rem;
}

.clm-checkout__step[hidden],
.clm-checkout__back[hidden] {
    display: none;
}

.clm-checkout__intro {
    margin: -.5rem 0 1rem;
    color: var(--clm-muted);
    font-size: .875rem;
}

/* Step 2: one box per ticket with the attendee's name and date of birth. */
.clm-attendees {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.clm-checkout .clm-attendee {
    min-width: 0;
    margin: 0;
    padding: .9rem 1rem 1rem;
    border: 1px solid var(--clm-border);
    border-radius: var(--clm-radius);
}

.clm-checkout .clm-attendee__legend {
    width: auto;
    margin: 0;
    padding: 0 .35rem;
    border: 0;
    color: var(--clm-text);
    font-size: .9rem;
    font-weight: 700;
}

.clm-attendee__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: .75rem;
}

.clm-checkout .clm-attendee__field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0;
}

.clm-checkout .clm-attendee__field label {
    margin: 0;
    color: var(--clm-text);
    font-size: .8rem;
    font-weight: 600;
}

.clm-required {
    color: var(--clm-danger);
}

.clm-optional {
    color: var(--clm-muted);
    font-weight: 400;
}

.clm-checkout .clm-attendee__field input,
.clm-checkout .clm-attendee__field select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 2.4rem;
    margin: 0;
    padding: 0 .6rem;
    background: var(--clm-input-bg);
    border: 1px solid var(--clm-input-border);
    border-radius: var(--clm-radius);
    color: var(--clm-input-text);
    font: inherit;
}

.clm-checkout .clm-attendee__field input:focus,
.clm-checkout .clm-attendee__field select:focus {
    border-color: var(--clm-accent);
    outline: 2px solid color-mix(in srgb, var(--clm-accent) 35%, transparent);
    outline-offset: 0;
}

.clm-checkout .clm-attendee__field.is-invalid input,
.clm-checkout .clm-attendee__field.is-invalid select {
    border-color: var(--clm-danger);
}

/* A tick box: the box and its label on one line, across the whole row. */
.clm-checkout .clm-attendee__field--check {
    grid-column: 1 / -1;
    justify-content: center;
}

.clm-checkout .clm-attendee__field--check label {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4;
}

.clm-checkout .clm-attendee__field--check input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: .1rem 0 0;
    padding: 0;
}

.clm-checkout .clm-attendee__field.clm-attendee__field--check.is-invalid label {
    color: var(--clm-danger);
}

.clm-checkout .clm-checkout__note {
    margin-top: -.5rem;
}

.clm-checkout .clm-checkout__back {
    display: block;
    color: var(--clm-accent);
    font-size: .875rem;
    text-align: center;
}

.clm-upcoming {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clm-upcoming__item {
    display: grid;
    grid-template-columns: 9rem 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid var(--clm-border);
}

.clm-upcoming__seats {
    text-align: right;
}

@media (max-width: 600px) {
    .clm-details__row,
    .clm-upcoming__item {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    .clm-upcoming__seats {
        text-align: left;
    }
}