/* Decorative section icons; preserve the catalogue's existing compact spacing. */
.catalog-store .panel-title.brand-section-heading {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.catalog-store .brand-heading-icon {
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (max-width: 640px) {
    .catalog-store .panel-title.brand-section-heading { gap: 6px; }
    .catalog-store .brand-heading-icon {
        flex-basis: 18px;
        width: 18px;
        height: 18px;
    }
}

/* Frontend primary actions share one sky-blue palette in either theme.
 * Keep ink/surface tokens, secondary/cancel controls and product purchase styles.
 */
html.n321-white-canvas,
html.n321-white-canvas[data-theme] {
    --md-primary: #007bbb;
    --md-primary-rgb: 0, 123, 187;
    --md-primary-hover: #0369a1;
    --md-on-primary: #fff;
    --uc-primary-deep: #0369a1;
    --uc-focus: #007bbb;
    --uc-focus-rgb: 0, 123, 187;
    --md-focus-ring: rgba(0, 123, 187, .4);
}
html.n321-white-canvas :is(
    .shop-nav__item.active,
    .shop-drawer__link.active,
    .uc-nav__item.active,
    .uc-drawer__link.active,
    .shop-btn--primary,
    .catalog-search button,
    .btn-search-query,
    .btn-primary,
    .view-card-btn,
    .catalog-categories .chip.is-primary:not(:disabled)
) {
    background: var(--md-primary);
    border-color: transparent;
    color: var(--md-on-primary);
    box-shadow: 0 3px 10px rgba(var(--md-primary-rgb), .2);
}
html.n321-white-canvas :is(
    .shop-nav__item.active,
    .shop-drawer__link.active,
    .uc-nav__item.active,
    .uc-drawer__link.active,
    .shop-btn--primary,
    .catalog-search button,
    .btn-search-query,
    .btn-primary,
    .view-card-btn,
    .catalog-categories .chip.is-primary:not(:disabled)
):is(:hover, :active) {
    background: var(--md-primary-hover);
    color: var(--md-on-primary);
    filter: none;
}
html.n321-white-canvas :is(
    .shop-nav__item.active,
    .shop-drawer__link.active,
    .uc-nav__item.active,
    .uc-drawer__link.active
) :is(i, .nav-icon, .material-icons-outlined) {
    color: inherit;
}
html.n321-white-canvas :is(
    .shop-nav__item,
    .shop-drawer__link,
    .uc-nav__item,
    .uc-drawer__link,
    .shop-btn--primary,
    .catalog-search button,
    .btn-search-query,
    .btn-primary,
    .view-card-btn,
    .catalog-categories .chip,
    .uc-ticket-submit,
    .uc-ticket-reply__submit,
    .uc-message-mobile-search__submit,
    .uc-message-mobile-feedback button
):focus-visible {
    outline: 2px solid var(--uc-focus);
    outline-offset: 3px;
}
/* Text-only accents need a lighter blue on dark panels; filled actions keep
 * the same sky-blue background and white label defined above. */
html.n321-white-canvas[data-theme="dark"] {
    --uc-primary-deep: #7dd3fc;
    --uc-focus: #38bdf8;
    --uc-focus-rgb: 56, 189, 248;
    --md-focus-ring: rgba(56, 189, 248, .5);
}