/*
 * Products by Group (Loop) — default styles.
 *
 * Kept in a real stylesheet (not inline) specifically so a theme or a
 * client's own Additional CSS can override any of this with a normal,
 * equal-or-higher-specificity selector — an inline style="" attribute
 * cannot be overridden that way.
 */

.bwd-ticket-widget .brand-block {
    margin-bottom: 48px;
}

.bwd-ticket-widget .bwd-group-heading-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6em;
    margin-bottom: 24px;
}

.bwd-ticket-widget .brand-heading {
    margin: 0;
}

.bwd-ticket-widget .bwd-group-date {
    margin: 0;
}

.bwd-ticket-widget .brand-products-grid {
    align-items: stretch;
}

/*
 * Equal card height: stretch the wrapper to the grid row's height, then
 * stretch the loop-item template's own root element to fill it. Height
 * only, deliberately — not display/flex-direction: Elementor's own
 * generated CSS for the loop-item template already sets those (often via
 * its --display custom property), and overriding them here fought with
 * whatever layout was actually designed inside that template.
 */
.bwd-ticket-widget .brand-product-item {
    height: 100%;
}

.bwd-ticket-widget .brand-product-item > * {
    height: 100%;
    width: 100%;
}

/*
 * Hide an Icon List row whose dynamic text came out empty (a ticket with no
 * "Ticket info", say), instead of leaving a lone icon. Elementor renders the
 * <li> and icon regardless and leaves the text <span> empty.
 *
 * Also inside Elementor's own Loop Grid (.e-loop-item): event pages that have
 * not been moved to the ticket widget yet render their cards that way.
 */
.bwd-ticket-widget .elementor-icon-list-item:has(.elementor-icon-list-text:empty),
.e-loop-item .elementor-icon-list-item:has(.elementor-icon-list-text:empty) {
    display: none;
}