/*
 * Classified Platform stylesheet.
 *
 * Task provenance: 500.04-500.08; amended 500.32 Layout Typography Configuration Foundation.
 * Commenting pass: Task 500.09 Code Comments.
 *
 * These comments describe the styling responsibilities only. Task 500.09 does not
 * alter selectors, declarations, cascade order, or visual behaviour.
 */

/* Classified UI Framework Extension - Tasks 500.04-500.08. */

/* ==========================================================
   Task 500.38 Stage 3.5 - Completed CSS Ownership Hierarchy
   Ownership model: Generated CSS -> Manual UI Tokens -> Shared UI Framework ->
   Action/Icon Framework -> Command Framework -> Application Shell -> Feature
   Framework Consumers.

   This file is manually maintained CSS. Generated design tokens remain in
   classified-design.css. Stage 3.5 documents remaining owner/consumer
   relationships only; executable selectors and declarations are unchanged.
   ========================================================== */

/* ==========================================================
   Manual UI Token Aliases - Governed Foundation
   Stage 3.2 ownership: manual UI token aliases consume generated design tokens
   and provide stable --cls-ui-* values for manually maintained CSS.

   Permanent ownership in this section:
   - UI font, spacing, radius, surface, motion and z-index aliases.
   - Responsive alias adaptations for existing tablet and mobile token values.

   Consumption rules:
   - Generated --cls-* design tokens remain the source values.
   - Manual component, shell, admin, workspace, command and listing CSS may consume
     --cls-ui-* aliases, but this section must not define component selectors.
   - Token values are preserved in this package; no visual redesign is intended.
   ========================================================== */
:root {
    --cls-ui-font-family-body: var(--cls-font-body-family, Roboto, Sans-serif);
    --cls-ui-font-family-heading: var(--cls-font-heading-family, Roboto, Sans-serif);
    --cls-ui-font-family-accent: var(--cls-font-accent-family, var(--cls-font-body-family, Roboto, Sans-serif));
    --cls-ui-font-size-body: var(--cls-font-body-size, var(--cls-font-base-size, 16px));
    --cls-ui-line-height-body: var(--cls-font-body-line-height, var(--cls-line-height, 1.5));
    --cls-ui-line-height-heading: var(--cls-font-heading-line-height, 1.2);
    --cls-ui-font-weight-body: var(--cls-font-body-weight, 400);
    --cls-ui-font-weight-strong: var(--cls-font-body-strong-weight, 600);
    --cls-ui-font-weight-heading: var(--cls-font-heading-weight, 600);
    --cls-ui-font-weight-accent: var(--cls-font-accent-weight, 500);
    --cls-ui-font-weight-ui: var(--cls-font-ui-weight, 500);
    --cls-ui-font-weight-ui-strong: var(--cls-font-ui-strong-weight, 600);
    --cls-ui-font-size-h1: var(--cls-font-h1-size, clamp(1.9rem, 3vw, 2.6rem));
    --cls-ui-font-size-h2: var(--cls-font-h2-size, clamp(1.6rem, 2.4vw, 2.1rem));
    --cls-ui-font-size-h3: var(--cls-font-h3-size, clamp(1.35rem, 2vw, 1.65rem));
    --cls-ui-font-size-h4: var(--cls-font-h4-size, 1.25rem);
    --cls-ui-font-size-h5: var(--cls-font-h5-size, 1.1rem);
    --cls-ui-font-size-h6: var(--cls-font-h6-size, 1rem);
    --cls-ui-font-size-title: var(--cls-layout-page-title-font-size, var(--cls-font-h1-size, clamp(1.65rem, 3vw, 2.35rem)));
    --cls-ui-font-size-lede: var(--cls-font-lede-size, 1.02rem);
    --cls-ui-font-size-small: var(--cls-font-small-size, 0.875rem);
    --cls-ui-font-size-meta: var(--cls-layout-meta-text-font-size, var(--cls-font-meta-size, 0.85rem));
    --cls-ui-font-size-control: var(--cls-form-field-font-size, var(--cls-font-ui-size, 1rem));
    --cls-ui-font-size-button: var(--cls-button-font-size, var(--cls-font-ui-size, 1rem));
    --cls-ui-font-size-admin-title: var(--cls-font-h2-size, clamp(1.7rem, 2.5vw, 2.25rem));
    --cls-ui-paragraph-spacing: var(--cls-paragraph-spacing, 1rem);
    --cls-ui-section-padding-y: var(--cls-layout-section-padding-y, clamp(24px, 4vw, 48px));
    --cls-ui-card-padding: var(--cls-layout-card-padding, clamp(18px, 3vw, 28px));
    --cls-ui-gap-xs: var(--cls-layout-space-xs, 0.5rem);
    --cls-ui-gap-sm: var(--cls-layout-space-sm, 0.75rem);
    --cls-ui-gap-md: var(--cls-layout-space-md, 1rem);
    --cls-ui-gap-lg: var(--cls-layout-space-lg, 1.5rem);
    --cls-ui-gap-xl: var(--cls-layout-space-xl, 2rem);
    --cls-ui-control-line-height: var(--cls-form-field-line-height, 1.4);
    --cls-ui-button-line-height: var(--cls-button-line-height, 1.2);
    --cls-ui-motion-fast: 160ms;
    --cls-ui-motion-standard: var(--cls-image-transition-duration, 0.3s);
    --cls-ui-surface: var(--cls-background-surface-colour, var(--cls-ui-surface));
    --cls-ui-surface-soft: var(--cls-colour-surface-soft, var(--cls-ui-page-background));
    --cls-ui-surface-border: var(--cls-colour-surface-border, var(--cls-ui-surface-border));
    --cls-ui-surface-inverse: var(--cls-colour-surface-black, #000000);
    --cls-ui-on-surface-inverse: var(--cls-colour-surface-white, #FFFFFF);
    --cls-ui-page-background: var(--cls-background-body-colour, var(--cls-ui-page-background));
    --cls-ui-control-min-height: 44px;
    --cls-ui-control-min-height-compact: 36px;
    --cls-ui-control-min-height-small: 28px;
    --cls-ui-icon-size-sm: 28px;
    --cls-ui-icon-size-md: 32px;
    --cls-ui-icon-size-lg: 44px;
    --cls-ui-logo-max-width-header: 220px;
    --cls-ui-logo-max-height-header: 74px;
    --cls-ui-logo-max-width-footer: 156px;
    --cls-ui-logo-max-height-footer: 58px;
    --cls-ui-radius-control: var(--cls-button-border-radius, var(--cls-form-field-border-radius, 8px));
    --cls-ui-radius-card: var(--cls-button-border-radius, 8px);
    --cls-ui-radius-media: var(--cls-image-border-radius, 0px);
    --cls-ui-radius-pill: 999px;
    --cls-ui-border-width: var(--cls-form-field-border-width, 1px);
    --cls-ui-button-border-width: var(--cls-button-border-width, var(--cls-ui-border-width));
    --cls-ui-shadow-card: 0 10px 24px color-mix(in srgb, var(--cls-colour-secondary, #584473) 14%, transparent);
    --cls-ui-shadow-card-soft: 0 10px 24px color-mix(in srgb, var(--cls-colour-secondary, #584473) 10%, transparent);
    --cls-ui-shadow-raised: 0 12px 30px color-mix(in srgb, var(--cls-colour-secondary, #584473) 18%, transparent);
    --cls-ui-shadow-floating: 0 14px 34px color-mix(in srgb, var(--cls-colour-secondary, #584473) 18%, transparent);
    --cls-ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--cls-form-field-focus-border-colour, var(--cls-colour-accent, #9D6DBC)) 24%, transparent);
    --cls-ui-overlay-muted: color-mix(in srgb, var(--cls-colour-secondary, #584473) 8%, transparent);
    --cls-ui-muted-text: color-mix(in srgb, var(--cls-colour-text, #464646) 78%, transparent);
    --cls-ui-muted-text-strong: color-mix(in srgb, var(--cls-colour-text, #464646) 80%, transparent);
    --cls-ui-header-z-index: 1000;
    --cls-ui-toast-z-index: 10000;
}


@media (max-width: 1025px) {
    :root {
        --cls-ui-font-size-body: var(--cls-font-body-size-tablet, var(--cls-font-base-size-tablet, var(--cls-font-body-size, var(--cls-font-base-size, 16px))));
        --cls-ui-line-height-body: var(--cls-font-body-line-height-tablet, var(--cls-line-height-tablet, var(--cls-font-body-line-height, var(--cls-line-height, 1.5))));
        --cls-ui-font-size-h1: var(--cls-font-h1-size-tablet, var(--cls-font-h1-size, clamp(1.9rem, 3vw, 2.6rem)));
        --cls-ui-font-size-h2: var(--cls-font-h2-size-tablet, var(--cls-font-h2-size, clamp(1.6rem, 2.4vw, 2.1rem)));
        --cls-ui-font-size-h3: var(--cls-font-h3-size-tablet, var(--cls-font-h3-size, clamp(1.35rem, 2vw, 1.65rem)));
        --cls-ui-font-size-h4: var(--cls-font-h4-size-tablet, var(--cls-font-h4-size, 1.25rem));
        --cls-ui-font-size-h5: var(--cls-font-h5-size-tablet, var(--cls-font-h5-size, 1.1rem));
        --cls-ui-font-size-h6: var(--cls-font-h6-size-tablet, var(--cls-font-h6-size, 1rem));
        --cls-ui-font-size-title: var(--cls-font-h1-size-tablet, var(--cls-font-h1-size, clamp(1.65rem, 3vw, 2.35rem)));
        --cls-ui-font-size-admin-title: var(--cls-font-h2-size-tablet, var(--cls-font-h2-size, clamp(1.7rem, 2.5vw, 2.25rem)));
    }
}

@media (max-width: 768px) {
    :root {
        --cls-ui-font-size-body: var(--cls-font-body-size-mobile, var(--cls-font-base-size-mobile, var(--cls-font-body-size, var(--cls-font-base-size, 16px))));
        --cls-ui-line-height-body: var(--cls-font-body-line-height-mobile, var(--cls-line-height-mobile, var(--cls-font-body-line-height, var(--cls-line-height, 1.5))));
        --cls-ui-font-size-h1: var(--cls-font-h1-size-mobile, var(--cls-font-h1-size-tablet, var(--cls-font-h1-size, clamp(1.9rem, 3vw, 2.6rem))));
        --cls-ui-font-size-h2: var(--cls-font-h2-size-mobile, var(--cls-font-h2-size-tablet, var(--cls-font-h2-size, clamp(1.6rem, 2.4vw, 2.1rem))));
        --cls-ui-font-size-h3: var(--cls-font-h3-size-mobile, var(--cls-font-h3-size-tablet, var(--cls-font-h3-size, clamp(1.35rem, 2vw, 1.65rem))));
        --cls-ui-font-size-h4: var(--cls-font-h4-size-mobile, var(--cls-font-h4-size-tablet, var(--cls-font-h4-size, 1.25rem)));
        --cls-ui-font-size-h5: var(--cls-font-h5-size-mobile, var(--cls-font-h5-size-tablet, var(--cls-font-h5-size, 1.1rem)));
        --cls-ui-font-size-h6: var(--cls-font-h6-size-mobile, var(--cls-font-h6-size-tablet, var(--cls-font-h6-size, 1rem)));
        --cls-ui-font-size-title: var(--cls-font-h1-size-mobile, var(--cls-font-h1-size-tablet, var(--cls-font-h1-size, clamp(1.65rem, 3vw, 2.35rem))));
        --cls-ui-font-size-admin-title: var(--cls-font-h2-size-mobile, var(--cls-font-h2-size-tablet, var(--cls-font-h2-size, clamp(1.7rem, 2.5vw, 2.25rem))));
    }
}

/* ==========================================================
   Base Document Rules and Global Application Defaults
   Stage 3.2 ownership: global wrappers, document-level box sizing, base text
   defaults and low-level page layout primitives.

   This section may own application wrappers and broad layout primitives only.
   Shared components such as buttons, forms, notices, cards, tables, workspace,
   commands and listings remain in their existing sections for later packages.
   Historical compatibility surfaces (.classified-shortcode and
   .classified-registration) are retained without selector or declaration changes.
   ========================================================== */
.classified-platform-status {
    padding: 12px;
    border: 1px solid var(--cls-ui-surface-border);
    border-radius: var(--cls-ui-radius-card);
    color: var(--cls-colour-text, #464646);
    background: var(--cls-ui-surface);
    font-family: var(--cls-ui-font-family-body);
    font-weight: var(--cls-ui-font-weight-strong);
}

.classified-platform,
.classified-shortcode,
.classified-registration {
    box-sizing: border-box;
    color: var(--cls-colour-text, #464646);
    font-family: var(--cls-ui-font-family-body);
    font-size: var(--cls-ui-font-size-body);
    font-weight: var(--cls-ui-font-weight-body);
    line-height: var(--cls-ui-line-height-body);
}

.classified-platform *,
.classified-platform *::before,
.classified-platform *::after,
.classified-shortcode *,
.classified-shortcode *::before,
.classified-shortcode *::after,
.classified-registration *,
.classified-registration *::before,
.classified-registration *::after {
    box-sizing: border-box;
}

.classified-page {
    width: 100%;
    min-height: 1px;
    color: var(--cls-colour-text, #464646);
    font-family: var(--cls-ui-font-family-body);
}

.classified-section {
    width: 100%;
    padding-block: var(--cls-ui-section-padding-y);
}

.classified-container {
    width: min(100%, var(--cls-layout-content-width, 1140px));
    margin-inline: auto;
    padding-inline: var(--cls-layout-container-padding, 10px);
}

.classified-stack {
    display: flex;
    flex-direction: column;
    gap: var(--cls-layout-space-between-widgets, var(--cls-ui-gap-lg));
}

.classified-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cls-ui-gap-sm);
    align-items: center;
}

/* ==========================================================
   Shared UI Components - Governed Layer
   Stage 3.3 ownership: generic action containers, content blocks, cards,
   panels, typography helpers, buttons, messages, tables, badges, tags, empty
   states, loading indicators and accessibility helpers.

   This layer may consume generated and manual UI tokens. It must not depend on
   form controls, application shell, icon-action framework, workspace, commands,
   listings or WordPress administration adapters.
   ========================================================== */
/* Task 500.23 — Page CSS conformance helpers.
 * These generic action and body helpers allow application views to share the
 * framework rather than relying on page-specific account/listing action classes.
 */
.classified-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cls-ui-gap-sm);
    align-items: center;
    justify-content: flex-end;
}

.classified-actions--between {
    justify-content: space-between;
}

.classified-actions--start {
    justify-content: flex-start;
}

.classified-actions__left {
    margin-right: auto;
}

.classified-content {
    color: var(--cls-colour-text, #464646);
}

.classified-content > :first-child {
    margin-top: 0;
}

.classified-content > :last-child {
    margin-bottom: 0;
}

.classified-card-meta {
    color: var(--cls-layout-meta-text-color, var(--cls-ui-muted-text));
    font-family: var(--cls-layout-meta-text-font-family, var(--cls-ui-font-family-body));
    font-size: var(--cls-layout-meta-text-font-size, var(--cls-ui-font-size-small));
    font-weight: var(--cls-layout-meta-text-font-weight, var(--cls-ui-font-weight-body));
    line-height: var(--cls-layout-meta-text-line-height, var(--cls-ui-line-height-body));
}

.classified-grid {
    display: grid;
    gap: var(--cls-layout-space-between-widgets, var(--cls-ui-gap-lg));
}

.classified-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.classified-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.classified-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.classified-card,
.classified-panel {
    background: var(--cls-ui-surface);
    border: 1px solid var(--cls-ui-surface-border);
    border-radius: var(--cls-ui-radius-card);
    box-shadow: var(--cls-ui-shadow-card);
}

.classified-card {
    overflow: hidden;
}

.classified-card-header,
.classified-card-body,
.classified-card-footer,
.classified-panel {
    padding: var(--cls-ui-card-padding);
}

.classified-card-header,
.classified-card-footer {
    background: color-mix(in srgb, var(--cls-colour-primary, #522E91) 8%, transparent);
}

.classified-title,
.classified-subtitle,
.classified-heading,
.classified-platform h1,
.classified-platform h2,
.classified-platform h3,
.classified-platform h4,
.classified-platform h5,
.classified-platform h6,
.classified-shortcode h1,
.classified-shortcode h2,
.classified-shortcode h3,
.classified-shortcode h4,
.classified-shortcode h5,
.classified-shortcode h6,
.classified-registration h1,
.classified-registration h2,
.classified-registration h3,
.classified-registration h4,
.classified-registration h5,
.classified-registration h6 {
    color: var(--cls-colour-heading, #584473);
    font-family: var(--cls-ui-font-family-heading);
    font-weight: var(--cls-ui-font-weight-heading);
    line-height: var(--cls-ui-line-height-heading);
    letter-spacing: var(--cls-font-heading-letter-spacing, normal);
    text-transform: var(--cls-font-heading-transform, none);
}

.classified-platform h1, .classified-shortcode h1, .classified-registration h1 { font-size: var(--cls-ui-font-size-h1); }
.classified-platform h2, .classified-shortcode h2, .classified-registration h2 { font-size: var(--cls-ui-font-size-h2); }
.classified-platform h3, .classified-shortcode h3, .classified-registration h3 { font-size: var(--cls-ui-font-size-h3); }
.classified-platform h4, .classified-shortcode h4, .classified-registration h4 { font-size: var(--cls-ui-font-size-h4); }
.classified-platform h5, .classified-shortcode h5, .classified-registration h5 { font-size: var(--cls-ui-font-size-h5); }
.classified-platform h6, .classified-shortcode h6, .classified-registration h6 { font-size: var(--cls-ui-font-size-h6); }

.classified-platform h1,
.classified-shortcode h1,
.classified-registration h1,
.classified-title {
    margin: 0 0 10px;
    color: var(--cls-layout-page-title-color, var(--cls-colour-heading, #584473));
    font-family: var(--cls-layout-page-title-font-family, var(--cls-ui-font-family-heading));
    font-size: var(--cls-layout-page-title-font-size, var(--cls-ui-font-size-title));
    font-weight: var(--cls-layout-page-title-font-weight, var(--cls-ui-font-weight-heading));
    line-height: var(--cls-layout-page-title-line-height, var(--cls-ui-line-height-heading));
    letter-spacing: var(--cls-layout-page-title-letter-spacing, var(--cls-font-heading-letter-spacing, normal));
    text-transform: var(--cls-layout-page-title-text-transform, var(--cls-font-heading-transform, none));
    font-style: var(--cls-layout-page-title-font-style, normal);
    text-decoration: var(--cls-layout-page-title-text-decoration, none);
}

.classified-platform h2,
.classified-shortcode h2,
.classified-registration h2 {
    color: var(--cls-layout-section-heading-color, var(--cls-colour-heading, #584473));
    font-family: var(--cls-layout-section-heading-font-family, var(--cls-ui-font-family-heading));
    font-size: var(--cls-layout-section-heading-font-size, var(--cls-ui-font-size-h2));
    font-weight: var(--cls-layout-section-heading-font-weight, var(--cls-ui-font-weight-heading));
    line-height: var(--cls-layout-section-heading-line-height, var(--cls-ui-line-height-heading));
    letter-spacing: var(--cls-layout-section-heading-letter-spacing, var(--cls-font-heading-letter-spacing, normal));
    text-transform: var(--cls-layout-section-heading-text-transform, var(--cls-font-heading-transform, none));
    font-style: var(--cls-layout-section-heading-font-style, normal);
    text-decoration: var(--cls-layout-section-heading-text-decoration, none);
}

.classified-heading,
.classified-card-header strong {
    color: var(--cls-layout-card-heading-color, var(--cls-colour-heading, #584473));
    font-family: var(--cls-layout-card-heading-font-family, var(--cls-ui-font-family-heading));
    font-size: var(--cls-layout-card-heading-font-size, var(--cls-ui-font-size-h3));
    font-weight: var(--cls-layout-card-heading-font-weight, var(--cls-ui-font-weight-heading));
    line-height: var(--cls-layout-card-heading-line-height, var(--cls-ui-line-height-heading));
    letter-spacing: var(--cls-layout-card-heading-letter-spacing, var(--cls-font-heading-letter-spacing, normal));
    text-transform: var(--cls-layout-card-heading-text-transform, var(--cls-font-heading-transform, none));
    font-style: var(--cls-layout-card-heading-font-style, normal);
    text-decoration: var(--cls-layout-card-heading-text-decoration, none);
}

.classified-listing-preview .classified-title {
    color: var(--cls-layout-listing-preview-title-color, var(--cls-colour-heading, #584473));
    font-family: var(--cls-layout-listing-preview-title-font-family, var(--cls-ui-font-family-heading));
    font-size: var(--cls-layout-listing-preview-title-font-size, var(--cls-ui-font-size-h2));
    font-weight: var(--cls-layout-listing-preview-title-font-weight, var(--cls-ui-font-weight-heading));
    line-height: var(--cls-layout-listing-preview-title-line-height, var(--cls-ui-line-height-heading));
    letter-spacing: var(--cls-layout-listing-preview-title-letter-spacing, var(--cls-font-heading-letter-spacing, normal));
    text-transform: var(--cls-layout-listing-preview-title-text-transform, var(--cls-font-heading-transform, none));
    font-style: var(--cls-layout-listing-preview-title-font-style, normal);
    text-decoration: var(--cls-layout-listing-preview-title-text-decoration, none);
}

.classified-subtitle,
.classified-lede {
    max-width: 68ch;
    margin: 0;
    color: var(--cls-layout-page-subtitle-color, var(--cls-colour-text, #464646));
    font-family: var(--cls-layout-page-subtitle-font-family, var(--cls-ui-font-family-body));
    font-size: var(--cls-layout-page-subtitle-font-size, var(--cls-ui-font-size-lede));
    font-weight: var(--cls-layout-page-subtitle-font-weight, var(--cls-ui-font-weight-body));
    line-height: var(--cls-layout-page-subtitle-line-height, var(--cls-ui-line-height-body));
}

.classified-muted {
    color: var(--cls-layout-meta-text-color, color-mix(in srgb, var(--cls-colour-text, #464646) 78%, transparent));
    font-size: var(--cls-layout-meta-text-font-size, var(--cls-ui-font-size-meta));
    line-height: var(--cls-layout-meta-text-line-height, var(--cls-ui-line-height-body));
}

.classified-platform a,
.classified-shortcode a,
.classified-registration a {
    color: var(--cls-colour-link, #522E91);
}

.classified-platform a:hover,
.classified-shortcode a:hover,
.classified-registration a:hover {
    color: var(--cls-colour-link-hover, #584473);
}

.classified-button,
.classified-registration button,
.classified-registration input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cls-ui-control-min-height);
    padding: var(--cls-button-padding, var(--cls-button-padding-y, 12px) var(--cls-button-padding-x, 24px));
    border: var(--cls-button-border-width, 1px) solid var(--cls-button-border-colour, #522E91);
    border-radius: var(--cls-ui-radius-card);
    background: var(--cls-button-background-colour, #522E91);
    color: var(--cls-button-text-colour, #FFFFFF);
    cursor: pointer;
    font-family: var(--cls-button-font-family, var(--cls-ui-font-family-body));
    font-size: var(--cls-ui-font-size-button);
    font-weight: var(--cls-button-font-weight, var(--cls-ui-font-weight-ui));
    line-height: var(--cls-ui-button-line-height);
    letter-spacing: var(--cls-button-letter-spacing, normal);
    text-transform: var(--cls-button-text-transform, none);
    text-decoration: none;
    transition: background var(--cls-ui-motion-fast) ease, color var(--cls-ui-motion-fast) ease, border-color var(--cls-ui-motion-fast) ease, transform var(--cls-ui-motion-fast) ease;
}

.classified-button:hover,
.classified-registration button:hover,
.classified-registration input[type="submit"]:hover {
    background: var(--cls-button-hover-background-colour, #584473);
    color: var(--cls-button-hover-text-colour, #FFFFFF);
    transform: translateY(-1px);
}

.classified-button-secondary {
    background: var(--cls-ui-surface);
    color: var(--cls-colour-secondary, #584473);
    border-color: var(--cls-colour-secondary, #584473);
}

.classified-button-secondary:hover {
    background: var(--cls-colour-secondary, #584473);
    color: var(--cls-button-hover-text-colour, #FFFFFF);
}

.classified-button-link {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cls-colour-link, #522E91);
    cursor: pointer;
    text-decoration: underline;
}

.classified-button-link:hover,
.classified-button-link:focus {
    background: transparent;
    color: var(--cls-colour-link-hover, #584473);
    transform: none;
}

/* ==========================================================
   Forms Ownership Layer - Governed
   Stage 3.4 ownership: shared form containers, field wrappers, labels,
   inputs, textareas, select controls, help text, validation/error states and
   registration form compatibility selectors.

   This manual layer may consume generated and manual UI tokens. It must not
   redefine generated design tokens, listing presentation, workspace controls,
   command/action framework rules, application shell, header/footer or admin
   presentation.
   ========================================================== */
.classified-form {
    display: grid;
    gap: var(--cls-ui-gap-lg);
    margin: 0;
}

.classified-form-field,
.classified-field {
    display: grid;
    gap: var(--cls-ui-gap-xs);
    margin: 0;
}

.classified-label,
.classified-registration label {
    color: var(--cls-form-label-colour, #584473);
    font-family: var(--cls-form-label-font-family, var(--cls-ui-font-family-body));
    font-size: var(--cls-form-label-font-size, var(--cls-ui-font-size-small));
    font-weight: var(--cls-form-label-font-weight, var(--cls-ui-font-weight-strong));
    line-height: var(--cls-form-label-line-height, 1.35);
}

.classified-input,
.classified-select,
.classified-textarea,
.classified-registration input,
.classified-registration select,
.classified-registration textarea {
    width: 100%;
    min-height: var(--cls-ui-control-min-height);
    padding: var(--cls-form-field-padding, var(--cls-form-field-padding-y, 10px) var(--cls-form-field-padding-x, 12px));
    border: var(--cls-form-field-border-width, 1px) solid var(--cls-form-field-border-colour, #EDE1F5);
    border-radius: var(--cls-ui-radius-control);
    background: var(--cls-form-field-background-colour, #FFFFFF);
    color: var(--cls-form-field-text-colour, #464646);
    font-family: var(--cls-form-field-font-family, var(--cls-ui-font-family-body));
    font-size: var(--cls-ui-font-size-control);
    font-weight: var(--cls-form-field-font-weight, var(--cls-ui-font-weight-body));
    line-height: var(--cls-ui-control-line-height);
}

.classified-textarea,
.classified-registration textarea {
    min-height: 120px;
    resize: vertical;
}

.classified-input:focus,
.classified-select:focus,
.classified-textarea:focus,
.classified-registration input:focus,
.classified-registration select:focus,
.classified-registration textarea:focus {
    border-color: var(--cls-form-field-focus-border-colour, #522E91);
    outline: 2px solid color-mix(in srgb, var(--cls-form-field-focus-border-colour, #522E91) 35%, transparent);
    outline-offset: 1px;
}

.classified-form-field input[aria-invalid="true"],
.classified-form-field--error input,
.classified-field--error input,
.classified-field--error select,
.classified-field--error textarea {
    border-color: var(--cls-colour-error, #B32D2E);
    box-shadow: 0 0 0 1px var(--cls-colour-error, #B32D2E);
}

.classified-help-text,
.classified-field-message {
    display: block;
    margin: 0;
    color: var(--cls-layout-meta-text-color, color-mix(in srgb, var(--cls-colour-text, #464646) 80%, transparent));
    font-family: var(--cls-layout-meta-text-font-family, var(--cls-ui-font-family-body));
    font-size: var(--cls-layout-meta-text-font-size, var(--cls-ui-font-size-small));
    font-weight: var(--cls-layout-meta-text-font-weight, var(--cls-ui-font-weight-body));
    line-height: var(--cls-layout-meta-text-line-height, var(--cls-ui-control-line-height));
}

.classified-field-message--error,
.classified-error {
    color: var(--cls-colour-error, #B32D2E);
    font-weight: var(--cls-ui-font-weight-strong);
}

/* ==========================================================
   Shared UI Components - Governed Layer Continued
   Generic messages, status states and shared feedback components resume after
   the governed Forms ownership layer.
   ========================================================== */
.classified-message {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    position: relative;
    width: min(760px, 100%);
    margin: 18px 0 24px;
    padding: 18px 48px 18px 20px;
    border: 1px solid var(--cls-ui-surface-border);
    border-left-width: 5px;
    border-radius: var(--cls-ui-radius-card);
    background: var(--cls-ui-surface);
    box-shadow: var(--cls-ui-shadow-raised);
    animation: classified-message-enter 220ms ease-out;
}

.classified-message-success,
.classified-message--success {
    border-left-color: var(--cls-colour-success, #0F834D);
    background: color-mix(in srgb, var(--cls-colour-success, #0F834D) 8%, #FFFFFF);
}

.classified-message-error,
.classified-message--error {
    border-left-color: var(--cls-colour-error, #B32D2E);
    background: color-mix(in srgb, var(--cls-colour-error, #B32D2E) 8%, #FFFFFF);
}

.classified-message-warning,
.classified-message--warning {
    border-left-color: var(--cls-colour-warning, #8A6D1F);
    background: color-mix(in srgb, var(--cls-colour-warning, #8A6D1F) 10%, #FFFFFF);
}

.classified-message-info,
.classified-message--info {
    border-left-color: var(--cls-colour-information, var(--cls-colour-info, #8A56AD));
    background: color-mix(in srgb, var(--cls-colour-information, var(--cls-colour-info, #8A56AD)) 8%, #FFFFFF);
}

.classified-message__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--cls-ui-icon-size-md);
    width: var(--cls-ui-icon-size-md);
    height: var(--cls-ui-icon-size-md);
    margin-top: 1px;
    border-radius: var(--cls-ui-radius-pill);
    color: var(--cls-ui-on-surface-inverse);
    font-size: var(--cls-ui-font-size-h5);
    font-weight: var(--cls-ui-font-weight-heading);
    line-height: 1;
    box-shadow: var(--cls-ui-shadow-card);
}

.classified-message-success .classified-message__icon,
.classified-message--success .classified-message__icon { background: var(--cls-colour-success, #0F834D); }
.classified-message-error .classified-message__icon,
.classified-message--error .classified-message__icon { background: var(--cls-colour-error, #B32D2E); }
.classified-message-warning .classified-message__icon,
.classified-message--warning .classified-message__icon { background: var(--cls-colour-warning, #8A6D1F); }
.classified-message-info .classified-message__icon,
.classified-message--info .classified-message__icon { background: var(--cls-colour-information, var(--cls-colour-info, #8A56AD)); }

.classified-message__body {
    flex: 1 1 auto;
    min-width: 0;
}

.classified-message__title {
    margin: 0;
    color: var(--cls-colour-heading, #584473);
    font-size: var(--cls-ui-font-size-lede);
    font-weight: var(--cls-ui-font-weight-strong);
    line-height: var(--cls-form-label-line-height, var(--cls-ui-control-line-height));
}

.classified-message__text,
.classified-message__list {
    color: var(--cls-layout-message-text-color, var(--cls-colour-text, #464646));
    font-family: var(--cls-layout-message-text-font-family, var(--cls-ui-font-family-body));
    font-size: var(--cls-layout-message-text-font-size, var(--cls-ui-font-size-body));
    font-weight: var(--cls-layout-message-text-font-weight, var(--cls-ui-font-weight-body));
    line-height: var(--cls-layout-message-text-line-height, var(--cls-ui-line-height-body));
}

.classified-message__text {
    margin: 6px 0 0;
}

.classified-message__list {
    margin: 10px 0 0 20px;
    padding: 0;
}

.classified-message__list li + li {
    margin-top: 3px;
}

.classified-message--dismissible {
    padding-inline-end: calc(var(--cls-ui-icon-size-sm) + 38px);
}

.classified-message__dismiss {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--cls-ui-icon-size-sm);
    width: var(--cls-ui-icon-size-sm);
    height: var(--cls-ui-icon-size-sm);
    padding: 0;
    border: 0;
    border-radius: var(--cls-ui-radius-pill);
    background: transparent;
    color: var(--cls-colour-text, #464646);
    cursor: pointer;
    font-size: var(--cls-ui-font-size-h4);
    line-height: 1;
}

.classified-message__dismiss:hover,
.classified-message__dismiss:focus {
    background: var(--cls-ui-overlay-muted);
    color: var(--cls-colour-heading, #584473);
}

.classified-message--toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: var(--cls-ui-toast-z-index);
    width: min(420px, calc(100vw - 48px));
    margin: 0;
    animation: classified-toast-enter 240ms ease-out;
}

.classified-message--is-dismissing {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.classified-empty-state {
    padding: clamp(24px, 4vw, 42px);
    text-align: center;
    background: color-mix(in srgb, var(--cls-colour-primary, #522E91) 7%, #FFFFFF);
    border: 1px dashed var(--cls-ui-surface-border);
    border-radius: var(--cls-ui-radius-card);
}

.classified-badge,
.classified-tag {
    align-items: center;
    min-height: var(--cls-ui-control-min-height-small);
    border-radius: var(--cls-ui-radius-pill);
    background: color-mix(in srgb, var(--cls-colour-primary, #522E91) 14%, #FFFFFF);
    color: var(--cls-colour-secondary, #584473);
    font-size: var(--cls-ui-font-size-meta);
    font-weight: var(--cls-ui-font-weight-strong);
}

.classified-badge {
    display: inline-block;
    padding: .35rem .6rem;
    border: 1px solid currentColor;
    line-height: 1;
    text-transform: capitalize;
    white-space: nowrap;
}

.classified-tag {
    display: inline-flex;
    padding: 4px 10px;
}

/* Task 500.34 - Native Classified Application Table Component.
 * These table rules intentionally use Classified design tokens rather than
 * WordPress admin table selectors such as wp-list-table, widefat or striped.
 */
.classified-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    background: var(--cls-table-row-background, var(--cls-ui-surface));
    color: var(--cls-colour-text, #464646);
    font-family: var(--cls-table-font-family, var(--cls-ui-font-family-body));
    font-size: var(--cls-table-font-size, var(--cls-ui-font-size-body));
}

.classified-table th,
.classified-table td {
    padding: var(--cls-table-cell-padding-y, 12px) var(--cls-table-cell-padding-x, 14px);
    border-bottom: 1px solid var(--cls-table-border-colour, var(--cls-ui-surface-border));
    text-align: left;
    vertical-align: middle;
}

.classified-table th {
    background: var(--cls-table-header-background, var(--cls-colour-surface-soft, #F8F5FC));
    color: var(--cls-table-header-text-colour, var(--cls-colour-heading, #584473));
    font-weight: var(--cls-ui-font-weight-heading);
}

.classified-table tbody tr {
    background: var(--cls-table-row-background, var(--cls-ui-surface));
}

.classified-table tbody tr:nth-child(even) {
    background: var(--cls-table-striped-row-background, color-mix(in srgb, var(--cls-colour-primary, #522E91) 4%, #FFFFFF));
}

.classified-table--compact th,
.classified-table--compact td {
    padding: var(--cls-table-compact-padding-y, 8px) var(--cls-table-compact-padding-x, 10px);
}

.classified-table__actions {
    display: flex;
    gap: var(--cls-table-action-spacing, var(--cls-ui-gap-xs));
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.classified-table__empty {
    padding: var(--cls-layout-space-lg, 1.5rem);
    text-align: center;
    color: var(--cls-layout-meta-text-color, var(--cls-ui-muted-text));
}

.classified-table__sort {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.classified-table__sort:hover,
.classified-table__sort:focus-visible {
    color: var(--cls-colour-link-hover, #584473);
    text-decoration: none;
}



/* ==========================================================
   Forms Ownership Layer - Advanced Form Framework
   Stage 3.4 ownership: form rows, grouped form actions, required indicators,
   checkbox/radio alignment and form section containers.

   Listing-specific form presentation, workspace controls and command/action
   placement rules remain deferred to their own ownership packages.
   ========================================================== */

/* Task 500.04 - Advanced Form Framework. */
.classified-form-row {
    display: grid;
    gap: var(--cls-ui-gap-lg);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.classified-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cls-ui-gap-sm);
    align-items: center;
    margin-top: 6px;
}

.classified-required {
    color: var(--cls-colour-error, #B32D2E);
    font-weight: var(--cls-ui-font-weight-heading);
}

.classified-checkbox,
.classified-radio {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--cls-colour-text, #464646);
}

.classified-checkbox input,
.classified-radio input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--cls-colour-primary, #522E91);
}

.classified-form-section {
    display: grid;
    gap: var(--cls-ui-gap-lg);
    padding: clamp(18px, 3vw, 24px);
    border: 1px solid var(--cls-ui-surface-border);
    border-radius: var(--cls-ui-radius-card);
    background: color-mix(in srgb, var(--cls-ui-surface) 94%, var(--cls-colour-primary, #522E91));
}

.classified-form-section__title {
    margin: 0;
    color: var(--cls-layout-form-section-heading-color, var(--cls-colour-heading, #584473));
    font-family: var(--cls-layout-form-section-heading-font-family, var(--cls-ui-font-family-heading));
    font-size: var(--cls-layout-form-section-heading-font-size, var(--cls-ui-font-size-h3));
    font-weight: var(--cls-layout-form-section-heading-font-weight, var(--cls-ui-font-weight-heading));
    line-height: var(--cls-layout-form-section-heading-line-height, var(--cls-ui-line-height-heading));
    letter-spacing: var(--cls-layout-form-section-heading-letter-spacing, var(--cls-font-heading-letter-spacing, normal));
    text-transform: var(--cls-layout-form-section-heading-text-transform, var(--cls-font-heading-transform, none));
    font-style: var(--cls-layout-form-section-heading-font-style, normal);
    text-decoration: var(--cls-layout-form-section-heading-text-decoration, none);
}

/* ==========================================================
   Listing Presentation Ownership Layer - Governed
   Stage 3.4 ownership: listing discovery grids, result collections, public
   listing cards, listing media, listing titles, metadata, prices, pagination,
   listing discovery filters, listing preview presentation and listing-specific
   responsive presentation rules.

   This manual layer may consume generated and manual UI tokens. It must not
   own listing forms, Seller Workspace, command framework, action/icon framework,
   application shell, generated design CSS, PHP templates or business logic.
   ========================================================== */

/* Task 500.05 - Grid and Listing Card Framework. */
.classified-listing-grid {
    display: grid;
    gap: var(--cls-layout-space-between-widgets, var(--cls-ui-gap-lg));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.classified-listing-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    background: var(--cls-ui-surface);
    border: 1px solid var(--cls-ui-surface-border);
    border-radius: var(--cls-ui-radius-card);
    box-shadow: var(--cls-ui-shadow-card);
}

.classified-listing-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: color-mix(in srgb, var(--cls-colour-primary, #522E91) 10%, #FFFFFF);
}

.classified-listing-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.classified-listing-card__body {
    display: grid;
    gap: 10px;
    padding: clamp(16px, 2.5vw, 22px);
}

.classified-listing-card__title {
    margin: 0;
    color: var(--cls-layout-listing-card-title-color, var(--cls-colour-heading, #584473));
    font-family: var(--cls-layout-listing-card-title-font-family, var(--cls-ui-font-family-heading));
    font-size: var(--cls-layout-listing-card-title-font-size, var(--cls-ui-font-size-h5));
    font-weight: var(--cls-layout-listing-card-title-font-weight, var(--cls-ui-font-weight-heading));
    line-height: var(--cls-layout-listing-card-title-line-height, var(--cls-ui-line-height-heading));
    letter-spacing: var(--cls-layout-listing-card-title-letter-spacing, var(--cls-font-heading-letter-spacing, normal));
    text-transform: var(--cls-layout-listing-card-title-text-transform, var(--cls-font-heading-transform, none));
    font-style: var(--cls-layout-listing-card-title-font-style, normal);
    text-decoration: var(--cls-layout-listing-card-title-text-decoration, none);
}

.classified-listing-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--cls-layout-meta-text-color, color-mix(in srgb, var(--cls-colour-text, #464646) 78%, transparent));
    font-family: var(--cls-layout-meta-text-font-family, var(--cls-ui-font-family-body));
    font-size: var(--cls-layout-meta-text-font-size, var(--cls-ui-font-size-small));
    font-weight: var(--cls-layout-meta-text-font-weight, var(--cls-ui-font-weight-body));
    line-height: var(--cls-layout-meta-text-line-height, var(--cls-ui-line-height-body));
}

.classified-listing-card__price {
    color: var(--cls-colour-secondary, #584473);
    font-size: var(--cls-ui-font-size-h5);
    font-weight: var(--cls-ui-font-weight-heading);
}

.classified-listing-card__footer {
    display: flex;
    justify-content: space-between;
    gap: var(--cls-ui-gap-sm);
    align-items: center;
    margin-top: auto;
    padding: 0 clamp(16px, 2.5vw, 22px) clamp(16px, 2.5vw, 22px);
}

/* ==========================================================
   Shared Table Framework Boundary
   Table container rules remain shared table ownership. Listing pagination and
   discovery controls below are governed here only where they present listing
   discovery/result surfaces.
   ========================================================== */

/* Task 500.06 - Tables and Pagination Framework. */
.classified-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--cls-table-border-colour, var(--cls-ui-surface-border));
    border-radius: var(--cls-table-radius, var(--cls-ui-radius-card));
    background: var(--cls-table-row-background, var(--cls-ui-surface));
}

.classified-table caption {
    padding: 12px 14px;
    color: var(--cls-colour-heading, #584473);
    font-weight: var(--cls-ui-font-weight-heading);
    text-align: left;
}

.classified-table tbody tr:hover {
    background: var(--cls-table-row-hover-background, color-mix(in srgb, var(--cls-colour-primary, #522E91) 7%, transparent));
}

/* Listing Discovery Presentation - Pagination and Result Controls. */
.classified-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
}

.classified-pagination__item,
.classified-pagination a,
.classified-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: var(--cls-ui-control-min-height);
    padding: 8px 12px;
    border: 1px solid var(--cls-ui-surface-border);
    border-radius: var(--cls-ui-radius-card);
    background: var(--cls-ui-surface);
    color: var(--cls-colour-link, #522E91);
    font-weight: var(--cls-ui-font-weight-strong);
    text-decoration: none;
}

.classified-pagination__item--current,
.classified-pagination .current {
    background: var(--cls-button-background-colour, #522E91);
    color: var(--cls-button-text-colour, #FFFFFF);
    border-color: var(--cls-button-border-colour, #522E91);
}

/* Listing Discovery Presentation - Search and Filter Surfaces. */
/* Task 500.07 - Search and Filter Framework. */
.classified-search,
.classified-filter-panel {
    display: grid;
    gap: 16px;
    padding: clamp(16px, 2.5vw, 24px);
    border: 1px solid var(--cls-ui-surface-border);
    border-radius: var(--cls-ui-radius-card);
    background: var(--cls-ui-surface);
}

.classified-search__row,
.classified-filter-row {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.classified-filter-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.classified-filter-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--cls-layout-meta-text-color, color-mix(in srgb, var(--cls-colour-text, #464646) 78%, transparent));
    font-size: var(--cls-layout-meta-text-font-size, var(--cls-ui-font-size-small));
    line-height: var(--cls-layout-meta-text-line-height, var(--cls-ui-line-height-body));
}

/* Task 500.08 - Empty States and Loading Indicators.
 * Stage 3.3 ownership: generic empty, loading, spinner and skeleton components.
 */
.classified-loading {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--cls-colour-text, #464646);
    font-weight: var(--cls-ui-font-weight-strong);
}

.classified-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid color-mix(in srgb, var(--cls-colour-primary, #522E91) 22%, transparent);
    border-top-color: var(--cls-colour-primary, #522E91);
    border-radius: var(--cls-ui-radius-pill);
    animation: classified-spinner 700ms linear infinite;
}

.classified-skeleton {
    display: block;
    min-height: 1rem;
    border-radius: var(--cls-ui-radius-pill);
    background: linear-gradient(90deg, color-mix(in srgb, var(--cls-ui-surface-border) 70%, #FFFFFF), color-mix(in srgb, var(--cls-ui-surface-border) 35%, #FFFFFF), color-mix(in srgb, var(--cls-ui-surface-border) 70%, #FFFFFF));
    background-size: 200% 100%;
    animation: classified-skeleton 1200ms ease-in-out infinite;
}

.classified-empty-state__title {
    margin: 0 0 8px;
    color: var(--cls-layout-empty-state-title-color, var(--cls-colour-heading, #584473));
    font-family: var(--cls-layout-empty-state-title-font-family, var(--cls-ui-font-family-heading));
    font-size: var(--cls-layout-empty-state-title-font-size, var(--cls-ui-font-size-h3));
    font-weight: var(--cls-layout-empty-state-title-font-weight, var(--cls-ui-font-weight-heading));
    line-height: var(--cls-layout-empty-state-title-line-height, var(--cls-ui-line-height-heading));
}

.classified-empty-state__text {
    max-width: 56ch;
    margin: 0 auto;
    color: var(--cls-layout-message-text-color, var(--cls-colour-text, #464646));
    font-size: var(--cls-layout-message-text-font-size, var(--cls-ui-font-size-body));
    line-height: var(--cls-layout-message-text-line-height, var(--cls-ui-line-height-body));
}

@keyframes classified-spinner {
    to { transform: rotate(360deg); }
}

@keyframes classified-skeleton {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.classified-platform img,
.classified-shortcode img,
.classified-registration img {
    max-width: 100%;
    height: auto;
    border-radius: var(--cls-ui-radius-media);
    opacity: var(--cls-image-opacity, 1);
    box-shadow: var(--cls-image-box-shadow, none);
    transition: opacity var(--cls-ui-motion-standard) ease, box-shadow var(--cls-ui-motion-standard) ease;
}

.classified-platform img:hover,
.classified-shortcode img:hover,
.classified-registration img:hover {
    opacity: var(--cls-image-hover-opacity, 1);
}

.classified-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;
}

.classified-button:focus-visible,
.classified-registration button:focus-visible,
.classified-registration input[type="submit"]:focus-visible,
.classified-platform a:focus-visible,
.classified-shortcode a:focus-visible,
.classified-registration a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cls-colour-accent, #9D6DBC) 55%, transparent);
    outline-offset: 3px;
}

@keyframes classified-message-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes classified-toast-enter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive Ownership Boundary - Shared UI and Feature Consumers.
 * Responsive rules remain with the capability they adjust. This shared block
 * governs generic grid/card/message/form/listing/table adaptations only.
 */
@media (max-width: 1025px) {
    .classified-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .classified-section {
        padding-block: 24px;
    }

    .classified-grid-2,
    .classified-grid-3 {
        grid-template-columns: 1fr;
    }

    .classified-card-header,
    .classified-card-body,
    .classified-card-footer,
    .classified-panel {
        padding: 18px;
    }

    .classified-message {
        padding: 16px 44px 16px 16px;
    }

    .classified-message__icon {
        flex-basis: var(--cls-ui-icon-size-sm);
        width: 28px;
        height: 28px;
        font-size: var(--cls-ui-font-size-body);
    }
}



@media (max-width: 768px) {
    .classified-form-row,
    .classified-search__row,
    .classified-filter-row {
        grid-template-columns: 1fr;
    }

    .classified-listing-card__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .classified-table th,
    .classified-table td {
        padding: 10px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .classified-platform *,
    .classified-shortcode *,
    .classified-registration *,
    .classified-message,
    .classified-message--toast,
    .classified-message--is-dismissing {
        animation: none !important;
        transition: none !important;
    }

    .classified-spinner,
    .classified-skeleton {
        animation: none !important;
    }
}

/* 500.04-500.08 corrective completion: component preview and class alias coverage. */
.classified-component-preview .classified-section {
    padding-block: 24px;
}

.classified-component-preview .classified-title {
    margin-top: 0;
}

.classified-card p,
.classified-panel p,
.classified-listing-card p,
.classified-empty-state p {
    margin-top: 0;
}

.classified-card p:last-child,
.classified-panel p:last-child,
.classified-listing-card p:last-child,
.classified-empty-state p:last-child {
    margin-bottom: 0;
}

.classified-grid .classified-message {
    width: 100%;
    margin: 0;
}

/* ==========================================================
   Administration UI Ownership Layer - Governed
   Stage 3.5 ownership: Classified-scoped WordPress administration containers,
   admin cards, status tables, admin form controls, admin notices and admin-only
   responsive presentation.

   Administration may consume Manual UI Tokens, Shared UI patterns and Forms-like
   control styling. It does not own frontend application shell, generated CSS,
   business logic, WordPress core admin UI or third-party plugin presentation.
   ========================================================== */

.classified-admin-page {
    color: var(--cls-colour-text, #464646);
    font-family: var(--cls-ui-font-family-body);
    max-width: 1280px;
}

.classified-admin-page *,
.classified-admin-page *::before,
.classified-admin-page *::after {
    box-sizing: border-box;
}

.classified-admin-page h1,
.classified-admin-page h2,
.classified-admin-page h3,
.classified-admin-page h4 {
    color: var(--cls-colour-heading, #584473);
    font-family: var(--cls-ui-font-family-heading);
    font-weight: var(--cls-ui-font-weight-heading);
    line-height: var(--cls-ui-line-height-heading);
}

.classified-admin-page h1 {
    margin: 0 0 18px;
    font-size: var(--cls-ui-font-size-admin-title);
}

.classified-admin-page > p,
.classified-admin-page .description {
    max-width: 80ch;
    color: var(--cls-colour-text, #464646);
}

.classified-admin-card,
.classified-platform-summary,
.classified-admin-page .postbox,
.classified-admin-page .notice.inline {
    background: var(--cls-ui-surface);
    border: 1px solid var(--cls-ui-surface-border);
    border-radius: var(--cls-ui-radius-card);
    box-shadow: var(--cls-ui-shadow-card-soft);
    margin: 18px 0;
    padding: clamp(18px, 2.5vw, 26px);
}

.classified-admin-card h2,
.classified-platform-summary h2,
.classified-admin-page .postbox h2,
.classified-admin-page .postbox h3 {
    margin-top: 0;
}

.classified-admin-page table.widefat,
.classified-admin-page table.form-table,
.classified-admin-page .classified-status-table {
    width: 100%;
    border: 1px solid var(--cls-ui-surface-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--cls-ui-radius-card);
    overflow: hidden;
    background: var(--cls-ui-surface);
    box-shadow: none;
}

.classified-admin-page table.widefat th,
.classified-admin-page table.widefat td,
.classified-admin-page table.form-table th,
.classified-admin-page table.form-table td,
.classified-admin-page .classified-status-table th,
.classified-admin-page .classified-status-table td {
    padding: 12px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--cls-ui-surface-border) 70%, transparent);
    color: var(--cls-colour-text, #464646);
    vertical-align: top;
}

.classified-admin-page table.widefat th,
.classified-admin-page table.form-table th,
.classified-admin-page .classified-status-table th {
    color: var(--cls-colour-heading, #584473);
    font-weight: var(--cls-ui-font-weight-strong);
}

.classified-admin-page table.widefat tr:last-child th,
.classified-admin-page table.widefat tr:last-child td,
.classified-admin-page table.form-table tr:last-child th,
.classified-admin-page table.form-table tr:last-child td,
.classified-admin-page .classified-status-table tr:last-child th,
.classified-admin-page .classified-status-table tr:last-child td {
    border-bottom: 0;
}

.classified-admin-page table.striped > tbody > :nth-child(odd),
.classified-admin-page table.widefat.striped > tbody > :nth-child(odd) {
    background: color-mix(in srgb, var(--cls-colour-primary, #522E91) 6%, transparent);
}

.classified-admin-page .button,
.classified-admin-page .button-primary,
.classified-admin-page .button.button-primary,
.classified-admin-page input[type="submit"].button,
.classified-admin-page button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: var(--cls-button-padding, var(--cls-button-padding-y, 10px) var(--cls-button-padding-x, 22px));
    border: var(--cls-button-border-width, 1px) solid var(--cls-button-border-colour, #522E91);
    border-radius: var(--cls-ui-radius-card);
    background: var(--cls-button-background-colour, #522E91);
    color: var(--cls-button-text-colour, #FFFFFF);
    font-family: var(--cls-button-font-family, var(--cls-ui-font-family-body));
    font-size: var(--cls-ui-font-size-button);
    font-weight: var(--cls-button-font-weight, var(--cls-ui-font-weight-ui));
    line-height: var(--cls-ui-button-line-height);
    letter-spacing: var(--cls-button-letter-spacing, normal);
    text-transform: var(--cls-button-text-transform, none);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background var(--cls-ui-motion-fast) ease, border-color var(--cls-ui-motion-fast) ease, color var(--cls-ui-motion-fast) ease, transform var(--cls-ui-motion-fast) ease;
}

.classified-admin-page .button:hover,
.classified-admin-page .button-primary:hover,
.classified-admin-page .button.button-primary:hover,
.classified-admin-page input[type="submit"].button:hover,
.classified-admin-page button.button:hover {
    background: var(--cls-button-hover-background-colour, #584473);
    border-color: var(--cls-button-hover-background-colour, #584473);
    color: var(--cls-button-hover-text-colour, #FFFFFF);
    transform: translateY(-1px);
}

.classified-admin-page .button:focus,
.classified-admin-page .button-primary:focus,
.classified-admin-page .button.button-primary:focus {
    border-color: var(--cls-button-border-colour, #522E91);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cls-colour-primary, #522E91) 24%, transparent);
    outline: none;
}

.classified-admin-page .submit {
    margin-top: 20px;
    padding-top: 0;
}

.classified-admin-page .notice {
    border-radius: var(--cls-ui-radius-card);
    border-top: 1px solid var(--cls-ui-surface-border);
    border-right: 1px solid var(--cls-ui-surface-border);
    border-bottom: 1px solid var(--cls-ui-surface-border);
    box-shadow: none;
}

.classified-dashboard-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

.classified-admin-page input[type="text"],
.classified-admin-page input[type="email"],
.classified-admin-page input[type="url"],
.classified-admin-page input[type="password"],
.classified-admin-page input[type="number"],
.classified-admin-page select,
.classified-admin-page textarea,
.classified-admin-page .regular-text {
    min-height: 42px;
    border: var(--cls-form-field-border-width, 1px) solid var(--cls-form-field-border-colour, #EDE1F5);
    border-radius: var(--cls-ui-radius-control);
    color: var(--cls-colour-text, #464646);
    background: var(--cls-ui-surface);
    box-shadow: none;
}

.classified-admin-page input:focus,
.classified-admin-page select:focus,
.classified-admin-page textarea:focus {
    border-color: var(--cls-form-field-focus-border-colour, #522E91);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cls-colour-primary, #522E91) 18%, transparent);
    outline: none;
}

@media (max-width: 782px) {
    .classified-admin-page {
        margin-right: 10px;
    }

    .classified-admin-card,
    .classified-platform-summary {
        padding: 16px;
    }

    .classified-admin-page table.widefat,
    .classified-admin-page table.form-table,
    .classified-admin-page .classified-status-table {
        display: block;
        overflow-x: auto;
    }
}

/* ==========================================================
   Application Shell Ownership Layer - Governed
   Stage 3.5 ownership: Classified-managed page body, application shell wrapper,
   application header/footer container rails, main content rail and shell-level
   responsive stacking.

   Application Shell may consume Shared UI and generated/manual tokens. It does
   not own Header Framework, Footer Framework, feature workspace layout, listing
   presentation, forms, commands, actions or administration adapters.
   ========================================================== */

/* Task 500.13 - Application shell rendering.
   These rules style complete Classified-managed pages delivered by the application router. */
.classified-application-body {
    margin: 0;
    background: var(--cls-ui-page-background);
    color: var(--cls-colour-text, #464646);
    font-family: var(--cls-ui-font-family-body);
    font-size: var(--cls-ui-font-size-body);
    font-weight: var(--cls-ui-font-weight-body);
    line-height: var(--cls-ui-line-height-body);
}

/* Task 500.39 - application shell box-model foundation.
 * Classified application routes own their box model independently of host theme
 * reset styles; public WordPress and Elementor-authored pages remain outside
 * this application shell boundary.
 */
.classified-application-shell,
.classified-application-shell *,
.classified-application-shell *::before,
.classified-application-shell *::after {
    box-sizing: border-box;
}
.classified-application-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cls-ui-page-background);
}

.classified-application-header {
    border-bottom: 1px solid var(--cls-ui-surface-border);
    background: var(--cls-ui-surface);
}

.classified-application-header__inner,
.classified-application-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cls-ui-gap-md);
    padding-top: var(--cls-ui-gap-md);
    padding-bottom: var(--cls-ui-gap-md);
}

.classified-application-brand {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.classified-application-brand__link {
    font-size: var(--cls-ui-font-size-h4);
    font-weight: var(--cls-ui-font-weight-heading);
    color: var(--cls-colour-primary, #522E91);
    text-decoration: none;
}

.classified-application-brand__tenant {
    font-size: var(--cls-ui-font-size-small);
    color: var(--cls-ui-muted-text);
}

.classified-application-nav {
    display: flex;
    gap: var(--cls-ui-gap-sm);
    flex-wrap: wrap;
}

.classified-application-nav__link {
    color: var(--cls-colour-link, var(--cls-colour-primary, #522E91));
    text-decoration: none;
    font-weight: var(--cls-ui-font-weight-strong);
}

.classified-application-nav__link:hover,
.classified-application-nav__link:focus {
    text-decoration: underline;
}

.classified-application-main {
    flex: 1;
    padding-top: var(--cls-ui-gap-xs);
    padding-bottom: var(--cls-ui-gap-xl);
}

.classified-application-footer {
    border-top: 1px solid var(--cls-ui-surface-border);
    background: var(--cls-ui-surface-soft);
    color: var(--cls-ui-muted-text);
    font-size: var(--cls-ui-font-size-small);
}

.classified-application-status-page ul {
    margin: var(--cls-ui-gap-md) 0;
}

@media (max-width: 720px) {
    .classified-application-header__inner,
    .classified-application-footer__inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/**
 * Header Framework Consumption Boundary - Governed
 *
 * Stage 3.5 ownership: application header structure, header navigation, header
 * search surface, header branding surfaces and header-specific responsive
 * behaviour. Header consumes Application Shell rails, Shared UI controls,
 * Forms inputs and Action/Icon mechanics without taking ownership of them.
 *
 * Task provenance: 500.14 Build Application Header Framework.
 */
.classified-app-header {
    position: sticky;
    top: 0;
    z-index: var(--cls-ui-header-z-index);
    background: color-mix(in srgb, var(--cls-ui-surface) 96%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 14%, transparent);
    transition: background 180ms ease, box-shadow 180ms ease, backdrop-filter 180ms ease;
}

.classified-app-header.is-scrolled {
    background: color-mix(in srgb, var(--cls-ui-surface) 88%, transparent);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--cls-colour-secondary, #584473) 14%, transparent);
    backdrop-filter: blur(12px);
}

.classified-app-header__inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cls-layout-space-between-widgets, var(--cls-ui-gap-lg));
}

.classified-app-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--cls-ui-gap-sm);
    min-width: 0;
    color: var(--cls-colour-heading, #584473);
    text-decoration: none;
}

.classified-app-header__brand:hover {
    color: var(--cls-colour-heading, #584473);
}

.classified-app-header__logo {
    display: block;
    width: auto;
    max-width: 158px;
    max-height: 48px;
    border-radius: var(--cls-ui-radius-media);
}

.classified-app-header__logo-mark {
    width: var(--cls-ui-icon-size-lg);
    height: var(--cls-ui-icon-size-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cls-ui-radius-card);
    background: var(--cls-colour-primary, #522E91);
    color: var(--cls-button-text-colour, #FFFFFF);
    font-weight: var(--cls-ui-font-weight-heading);
}

.classified-app-header__brand-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.classified-app-header__site-name {
    font-family: var(--cls-ui-font-family-heading);
    font-weight: var(--cls-ui-font-weight-heading);
    color: var(--cls-colour-heading, #584473);
    line-height: var(--cls-ui-line-height-heading);
}

.classified-app-header__strapline {
    color: var(--cls-colour-text, #464646);
    font-size: var(--cls-ui-font-size-small);
    line-height: var(--cls-ui-line-height-body);
}

.classified-app-header__menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cls-layout-space-between-widgets, var(--cls-ui-gap-lg));
}

.classified-app-header__nav,
.classified-app-header__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.classified-app-header__nav-link,
.classified-app-header__action-link {
    color: var(--cls-colour-text, #464646);
    font-weight: var(--cls-button-font-weight, var(--cls-ui-font-weight-ui));
    text-decoration: none;
}

.classified-app-header__nav-link:hover,
.classified-app-header__action-link:hover {
    color: var(--cls-colour-link-hover, #584473);
}

.classified-app-header__action-button {
    min-height: var(--cls-ui-control-min-height);
    padding-top: 10px;
    padding-bottom: 10px;
}

.classified-app-header__toggle {
    display: none !important;
    width: var(--cls-ui-icon-size-lg);
    height: var(--cls-ui-icon-size-lg);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 22%, transparent);
    border-radius: var(--cls-ui-radius-card);
    background: var(--cls-ui-surface);
    cursor: pointer;
}

.classified-app-header__toggle-line {
    width: 20px;
    height: 2px;
    border-radius: var(--cls-ui-radius-pill);
    background: var(--cls-colour-secondary, #584473);
}

/* Administration Consumer Boundary - Header/Footer Design Previews.
 * These admin preview selectors support header/footer configuration screens;
 * Administration owns the admin surface, while Header/Footer own runtime shell
 * presentation.
 */
.classified-header-logo-admin__preview,
.classified-footer-logo-admin__preview {
    min-height: 64px;
    display: flex;
    align-items: center;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 16%, transparent);
    border-radius: var(--cls-ui-radius-card);
    background: var(--cls-ui-surface);
}

.classified-header-logo-admin__preview img,
.classified-footer-logo-admin__preview img {
    display: block;
    max-width: 220px;
    max-height: 72px;
}

@media (max-width: 767px) {
    .classified-app-header__inner {
        min-height: 68px;
        align-items: center;
    }

    .classified-app-header__toggle {
        display: inline-flex !important;
    }

    .classified-app-header__strapline {
        display: none;
    }

    .classified-app-header__menu {
        position: absolute;
        left: var(--cls-layout-container-padding, 10px);
        right: var(--cls-layout-container-padding, 10px);
        top: calc(100% + 8px);
        display: none;
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
        border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 14%, transparent);
        border-radius: var(--cls-ui-radius-card);
        background: var(--cls-ui-surface);
        box-shadow: 0 14px 34px color-mix(in srgb, var(--cls-colour-secondary, #584473) 18%, transparent);
    }

    .classified-app-header.is-menu-open .classified-app-header__menu {
        display: flex;
    }

    .classified-app-header__nav,
    .classified-app-header__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .classified-app-header__nav-link,
    .classified-app-header__action-link,
    .classified-app-header__action-button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}


/**
 * Classified Platform — design administration tabs.
 *
 * Task provenance: 500.14 correction.
 * These scoped admin rules support the CSS/Header/Status tab structure on the
 * Classified Design page without relying on WordPress options or theme styling.
 */
.classified-design-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cls-ui-gap-sm);
    margin: var(--cls-ui-gap-lg) 0 var(--cls-ui-gap-md);
    border-bottom: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 18%, transparent);
}

.classified-design-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--cls-button-border-radius, 8px) var(--cls-button-border-radius, 8px) 0 0;
    color: var(--cls-colour-text, #464646);
    font-weight: var(--cls-button-font-weight, var(--cls-ui-font-weight-ui));
    text-decoration: none;
}

.classified-design-tab:hover,
.classified-design-tab:focus {
    color: var(--cls-colour-link-hover, #584473);
    background: color-mix(in srgb, var(--cls-colour-accent, #9D6DBC) 8%, transparent);
}

.classified-design-tab.is-active {
    color: var(--cls-colour-heading, #584473);
    background: var(--cls-ui-surface);
    border-color: color-mix(in srgb, var(--cls-colour-secondary, #584473) 18%, transparent);
}

.classified-design-tab-panel {
    margin-top: var(--cls-ui-gap-md);
}

/* Task 500.14 UX correction: display the stored header logo URL as read-only reference text. */
.classified-header-logo-admin__url,
.classified-footer-logo-admin__url {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 14%, transparent);
    border-radius: var(--cls-ui-radius-card);
    background: color-mix(in srgb, var(--cls-ui-surface) 94%, var(--cls-colour-secondary, #584473));
    word-break: break-all;
}

.classified-header-logo-admin__url code,
.classified-footer-logo-admin__url code {
    padding: 0;
    background: transparent;
    color: var(--cls-colour-text, #464646);
}

/**
 * Footer Framework Consumption Boundary - Governed
 *
 * Stage 3.5 ownership: application footer structure, footer brand/contact/nav,
 * social links, legal rail and footer-specific responsive behaviour. Footer
 * consumes Application Shell rails, Shared UI link semantics and generated/manual
 * tokens without owning those reusable frameworks.
 *
 * Task provenance: 500.15 Application Footer Framework.
 */
.classified-app-footer {
    border-top: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 14%, transparent);
    background: color-mix(in srgb, var(--cls-ui-surface) 94%, var(--cls-colour-secondary, #584473));
    color: var(--cls-colour-text, #464646);
}

.classified-app-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--cls-ui-gap-xl);
    padding-top: var(--cls-ui-gap-xl);
    padding-bottom: var(--cls-ui-gap-xl);
}

.classified-app-footer__brand,
.classified-app-footer__contact,
.classified-app-footer__nav,
.classified-app-footer__social,
.classified-app-footer__legal {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.classified-app-footer__logo {
    display: block;
    width: auto;
    max-width: var(--cls-ui-logo-max-width-footer);
    max-height: var(--cls-ui-logo-max-height-footer);
    border-radius: var(--cls-ui-radius-media);
}

.classified-app-footer__brand-name {
    font-family: var(--cls-ui-font-family-heading);
    font-weight: var(--cls-ui-font-weight-heading);
    color: var(--cls-colour-heading, #584473);
}

.classified-app-footer__description {
    max-width: 36rem;
    margin: 0;
}

.classified-app-footer a {
    color: var(--cls-colour-link, #522E91);
    text-decoration: none;
}

.classified-app-footer a:hover,
.classified-app-footer a:focus {
    color: var(--cls-colour-link-hover, #584473);
    text-decoration: underline;
}

.classified-app-footer__social {
    flex-direction: row;
    flex-wrap: wrap;
}

.classified-app-footer__social-link {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cls-ui-radius-pill);
    background: var(--cls-colour-primary, #522E91);
    color: var(--cls-button-text-colour, #FFFFFF) !important;
    font-weight: var(--cls-button-font-weight, var(--cls-ui-font-weight-ui));
    text-decoration: none !important;
}

.classified-app-footer__legal {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-top: var(--cls-ui-gap-md);
    border-top: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 14%, transparent);
    font-size: var(--cls-ui-font-size-small);
}

@media (max-width: 767px) {
    .classified-app-footer__inner {
        grid-template-columns: 1fr;
    }

    .classified-app-footer__legal {
        flex-direction: column;
        align-items: flex-start;
    }
}

/**
 * Classified Platform — modernised legacy-aligned header/footer refinement.
 *
 * Task provenance: 500.19 Update Header/Footer.
 * These rules preserve the Wave 0 application shell architecture while moving the
 * header and footer closer to the legacy Classified banner, navigation, search bar
 * and compact footer navigation layout.
 */
.classified-app-header {
    background: var(--cls-ui-page-background);
    border-bottom: 0;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--cls-colour-secondary, #584473) 12%, transparent);
}

.classified-app-header.is-scrolled {
    background: var(--cls-ui-page-background);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--cls-colour-secondary, #584473) 18%, transparent);
    backdrop-filter: none;
}

.classified-app-header__inner--legacy-aligned {
    display: grid;
    gap: 0;
    padding-top: 14px;
    padding-bottom: 14px;
}

.classified-app-header__banner {
    display: grid;
    grid-template-columns: minmax(240px, 0.82fr) minmax(280px, 1.18fr) auto;
    align-items: stretch;
    min-height: 132px;
    overflow: hidden;
    border-radius: var(--cls-button-border-radius, 12px 8px 12px 8px) var(--cls-button-border-radius, 12px 8px 12px 8px) 0 0;
    background: var(--cls-colour-active-accent, #8A56AD);
}

.classified-app-header__brand {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--cls-ui-gap-sm);
    min-height: 132px;
    padding: 14px 18px;
    color: var(--cls-colour-surface-white, #FFFFFF);
    text-align: center;
}

.classified-app-header__brand:hover,
.classified-app-header__brand:focus {
    color: var(--cls-colour-surface-white, #FFFFFF);
    text-decoration: none;
}

.classified-app-header__logo {
    max-width: var(--cls-ui-logo-max-width-header);
    max-height: var(--cls-ui-logo-max-height-header);
}

.classified-app-header__logo-mark {
    width: 74px;
    height: 74px;
    background: var(--cls-colour-surface-white, #FFFFFF);
    color: var(--cls-colour-primary, #522E91);
    font-size: 2rem;
}

.classified-app-header__brand-text {
    justify-items: center;
}

.classified-app-header__site-name {
    color: var(--cls-colour-surface-white, #FFFFFF);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.classified-app-header__strapline {
    color: color-mix(in srgb, var(--cls-colour-accent, #9D6DBC) 42%, var(--cls-ui-on-surface-inverse));
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
    font-weight: var(--cls-ui-font-weight-ui);
}

.classified-app-header__banner-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 170px;
    padding: clamp(18px, 3vw, 34px);
    background:
        radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--cls-colour-accent, #9D6DBC) 52%, transparent), transparent 32%),
        linear-gradient(135deg, color-mix(in srgb, var(--cls-colour-primary, #522E91) 72%, #000000), var(--cls-colour-accent, #9D6DBC));
    color: var(--cls-colour-surface-white, #FFFFFF);
}

.classified-app-header__banner-kicker {
    color: color-mix(in srgb, var(--cls-colour-accent, #9D6DBC) 42%, var(--cls-ui-on-surface-inverse));
    font-size: var(--cls-ui-font-size-small);
    font-weight: var(--cls-ui-font-weight-heading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.classified-app-header__banner-title {
    max-width: 36rem;
    font-family: var(--cls-ui-font-family-heading);
    font-size: clamp(1.45rem, 2.25vw, 2rem);
    font-weight: var(--cls-ui-font-weight-heading);
    line-height: var(--cls-ui-line-height-heading);
}

.classified-app-header__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cls-ui-gap-md);
    padding: 0;
    background: var(--cls-colour-secondary, #584473);
}

.classified-app-header__nav,
.classified-app-header__actions {
    gap: 0;
}

.classified-app-header__nav-link,
.classified-app-header__action-link {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 18px;
    color: var(--cls-colour-surface-white, #FFFFFF);
    font-weight: var(--cls-ui-font-weight-heading);
    text-transform: none;
}

.classified-app-header__nav-link:hover,
.classified-app-header__nav-link:focus,
.classified-app-header__action-link:hover,
.classified-app-header__action-link:focus {
    background: var(--cls-colour-primary, #522E91);
    color: var(--cls-colour-surface-white, #FFFFFF);
    text-decoration: none;
}

.classified-app-header__action-button {
    min-height: var(--cls-ui-control-min-height-compact);
    margin: 5px 8px;
    padding: 8px 18px;
    border-color: var(--cls-colour-accent, #9D6DBC);
    background: var(--cls-colour-accent, #9D6DBC);
}

.classified-app-header__search {
    display: grid;
    grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1.3fr);
    gap: var(--cls-ui-gap-sm);
    align-items: center;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 18%, transparent);
    border-top: 0;
    border-radius: 0 0 var(--cls-button-border-radius, 12px 8px 12px 8px) var(--cls-button-border-radius, 12px 8px 12px 8px);
    background: var(--cls-ui-surface);
}

.classified-app-header__share {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 9px;
    align-items: center;
    color: var(--cls-colour-secondary, #584473);
    font-size: var(--cls-ui-font-size-small);
    font-weight: var(--cls-ui-font-weight-strong);
}

.classified-app-header__share-dot {
    width: 9px;
    height: 9px;
    border-radius: var(--cls-ui-radius-pill);
    background: var(--cls-colour-accent, #9D6DBC);
}

.classified-app-header__search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 250px) auto auto;
    gap: 8px;
    align-items: center;
}

.classified-app-header__search-label {
    color: var(--cls-colour-secondary, #584473);
    font-weight: var(--cls-ui-font-weight-heading);
}

.classified-app-header__search-label:first-child {
    grid-column: 1 / -1;
    justify-self: start;
    margin-bottom: -2px;
}

.classified-app-header__search-input {
    width: 100%;
    min-height: 38px;
}

.classified-app-header__search-select {
    width: 100%;
    min-height: 38px;
}

.classified-app-header__search-button,
.classified-app-header__advanced-link {
    min-height: 38px;
    padding: 9px 16px;
}

.classified-app-footer {
    border-top: 1px solid var(--cls-colour-primary, #522E91);
    background: var(--cls-ui-page-background);
}

.classified-app-footer__inner--legacy-aligned {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(190px, 0.9fr) minmax(0, 1.2fr);
    gap: var(--cls-ui-gap-lg);
    align-items: center;
    padding-top: 14px;
    padding-bottom: 14px;
}

.classified-app-footer__links,
.classified-app-footer__brand,
.classified-app-footer__contact {
    min-width: 0;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.classified-app-footer__links,
.classified-app-footer__brand {
    border-right: 1px solid color-mix(in srgb, var(--cls-colour-primary, #522E91) 48%, transparent);
}

.classified-app-footer__nav--compact {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--cls-ui-gap-xs);
    padding: 0 18px 0 0;
    background: transparent;
    font-size: var(--cls-ui-font-size-small);
    font-weight: var(--cls-ui-font-weight-heading);
}

.classified-app-footer__nav-separator {
    color: color-mix(in srgb, var(--cls-colour-secondary, #584473) 60%, transparent);
}

.classified-app-footer__section-heading {
    display: block;
    margin: 0 0 10px;
    color: var(--cls-colour-heading, #584473);
    font-family: var(--cls-ui-font-family-heading);
    font-weight: var(--cls-ui-font-weight-heading);
}

.classified-app-footer__social-group {
    margin-top: 22px;
}

.classified-app-footer__social {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--cls-ui-gap-sm);
    justify-content: flex-start;
}

.classified-app-footer__social-link {
    width: 34px;
    height: 34px;
    background: var(--cls-colour-primary, #522E91);
    color: var(--cls-colour-surface-white, #FFFFFF) !important;
    font-size: var(--cls-ui-font-size-small);
}

.classified-app-footer__brand {
    align-items: center;
    padding: 0 18px;
    text-align: center;
}

.classified-app-footer__logo {
    width: auto;
    max-width: min(170px, 100%);
    height: auto;
    max-height: 52px;
    object-fit: contain;
}

.classified-app-footer__brand-name {
    display: -webkit-box;
    max-width: 100%;
    margin-top: 6px;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--cls-colour-heading, #584473);
    font-size: var(--cls-ui-font-size-h6);
    line-height: var(--cls-ui-line-height-heading);
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.classified-app-footer__description {
    max-width: 22rem;
    margin: 6px 0 0;
    font-size: var(--cls-ui-font-size-small);
}

.classified-app-footer__contact {
    gap: var(--cls-ui-gap-xs);
    align-items: flex-start;
    padding-left: 16px;
}

.classified-app-footer__contact-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: var(--cls-colour-link, #522E91);
    line-height: var(--cls-form-label-line-height, var(--cls-ui-control-line-height));
    text-decoration: none;
}

.classified-app-footer__contact-row:hover,
.classified-app-footer__contact-row:focus {
    color: var(--cls-colour-link-hover, #9D6DBC);
    text-decoration: underline;
}

.classified-app-footer__contact-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cls-ui-radius-pill);
    background: var(--cls-colour-primary, #522E91);
    color: var(--cls-colour-surface-white, #FFFFFF);
    font-size: 0.76rem;
    line-height: 1;
}

.classified-app-footer__legal {
    display: flex;
    justify-content: center;
    padding: 9px 18px;
    border-top: 0;
    background: var(--cls-colour-primary, #522E91);
    color: var(--cls-colour-surface-white, #FFFFFF);
    font-size: var(--cls-ui-font-size-small);
    text-align: center;
}

@media (max-width: 900px) {
    .classified-app-header__banner {
        grid-template-columns: minmax(220px, 0.9fr) minmax(240px, 1.1fr) auto;
    }

    .classified-app-header__search {
        grid-template-columns: 1fr;
    }

    .classified-app-header__search-form {
        grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto auto;
    }

    .classified-app-footer__inner--legacy-aligned {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .classified-app-footer__links,
    .classified-app-footer__brand,
    .classified-app-footer__contact {
        min-height: auto;
        align-items: center;
        border-right: 0;
        padding: 0;
    }

    .classified-app-footer__nav--compact,
    .classified-app-footer__social {
        justify-content: center;
        padding-right: 0;
    }

    .classified-app-footer__contact {
        align-items: center;
    }

    .classified-app-footer__contact-row {
        text-align: left;
    }
}

@media (max-width: 767px) {
    .classified-app-header__inner--legacy-aligned {
        position: relative;
    }

    .classified-app-header__banner {
        grid-template-columns: 1fr auto;
        min-height: auto;
    }

    .classified-app-header__brand {
        min-height: 94px;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
    }

    .classified-app-header__brand-text {
        justify-items: start;
    }

    .classified-app-header__banner-panel {
        display: none;
    }

    .classified-app-header__toggle {
        align-self: center;
        justify-self: center;
        margin-right: 14px;
        background: var(--cls-colour-surface-white, #FFFFFF);
    }

    .classified-app-header__menu {
        left: 0;
        right: 0;
        top: calc(94px + 8px);
        z-index: 1001;
        padding: 12px;
        background: var(--cls-colour-secondary, #584473);
    }

    .classified-app-header__nav-link,
    .classified-app-header__action-link,
    .classified-app-header__action-button {
        width: 100%;
        justify-content: center;
    }

    .classified-app-header__search-form {
        grid-template-columns: 1fr;
    }

    .classified-app-header__search-input,
    .classified-app-header__search-select,
    .classified-app-header__search-button,
    .classified-app-header__advanced-link {
        width: 100%;
    }

    .classified-app-footer__nav--compact {
        align-items: center;
        flex-direction: column;
    }

    .classified-app-footer__nav-separator {
        display: none;
    }

    .classified-app-footer__legal {
        align-items: center;
    }
}

/**
 * Classified Platform — approved header refinement v3.
 *
 * Task provenance: 500.19 Update Header/Footer.
 * This final refinement keeps the approved compact footer and corrects the header
 * to the approved legacy-aligned layout: rounded top banner, left local-action
 * strapline, right configured design-page strapline, and compact two-column search.
 */
.classified-app-header__banner {
    border-radius: 34px 34px 0 0;
}

.classified-app-header__search {
    grid-template-columns: minmax(240px, 0.82fr) minmax(320px, 1.18fr);
    gap: 24px;
    align-items: center;
    min-height: 112px;
    padding: 22px 30px;
    border-top: 0;
    border-radius: 0;
}

.classified-app-header__share {
    align-self: center;
}

.classified-app-header__search-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cls-ui-gap-sm);
    align-items: center;
    padding-left: 28px;
    border-left: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 20%, transparent);
}

.classified-app-header__search-row {
    display: grid;
    gap: var(--cls-ui-gap-sm);
    align-items: center;
}

.classified-app-header__search-row--query {
    grid-template-columns: auto minmax(0, 1fr);
}

.classified-app-header__search-row--filters {
    grid-template-columns: auto minmax(180px, 0.9fr) minmax(110px, 0.45fr) minmax(120px, 0.45fr);
}

.classified-app-header__search-label {
    min-width: 44px;
    margin: 0;
    text-align: right;
}

.classified-app-header__search-label:first-child {
    grid-column: auto;
    justify-self: auto;
    margin-bottom: 0;
}

.classified-app-header__search-input {
    width: min(100%, 80%);
    min-height: 42px;
}

.classified-app-header__search-select,
.classified-app-header__search-button,
.classified-app-header__advanced-link {
    min-height: 42px;
}

.classified-app-header__search-button,
.classified-app-header__advanced-link {
    padding: 10px 20px;
}

.classified-app-footer__legal {
    border-radius: 0 0 28px 28px;
}

@media (max-width: 900px) {
    .classified-app-header__search {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 20px;
    }

    .classified-app-header__search-form {
        padding-left: 0;
        border-left: 0;
    }

    .classified-app-header__search-input {
        width: 100%;
    }

    .classified-app-header__search-row--filters {
        grid-template-columns: auto minmax(160px, 1fr) auto auto;
    }
}

@media (max-width: 767px) {
    .classified-app-header__banner {
        border-radius: 22px 22px 0 0;
    }

    .classified-app-header__search-row--query,
    .classified-app-header__search-row--filters {
        grid-template-columns: 1fr;
    }

    .classified-app-header__search-label {
        min-width: 0;
        text-align: left;
    }

    .classified-app-footer__legal {
        border-radius: 0 0 20px 20px;
    }
}

/**
 * Classified Platform — approved header refinement v4.
 *
 * Task provenance: 500.19 Update Header/Footer.
 * This final tweak reduces the banner height and simplifies the hero content:
 * left panel renders logo plus fixed local-action strapline only; right panel
 * renders the configured Header Design strapline only.
 */
.classified-app-header__banner {
    min-height: 118px;
}

.classified-app-header__brand {
    min-height: 118px;
    gap: 8px;
    padding: 12px 18px;
}

.classified-app-header__logo {
    max-width: 220px;
    max-height: 70px;
}

.classified-app-header__site-name,
.classified-app-header__banner-kicker {
    display: none;
}

.classified-app-header__strapline {
    color: var(--cls-colour-surface-white, #FFFFFF);
    font-size: clamp(1.12rem, 1.65vw, 1.36rem);
    font-weight: var(--cls-ui-font-weight-ui);
    line-height: var(--cls-ui-line-height-heading);
}

.classified-app-header__banner-panel {
    min-height: 118px;
    gap: 0;
    padding: clamp(16px, 2.6vw, 30px);
}

.classified-app-header__banner-title {
    max-width: 40rem;
    font-size: clamp(1.45rem, 2.3vw, 2.05rem);
    line-height: var(--cls-ui-line-height-heading);
}

/**
 * Classified Platform — mobile header menu correction.
 *
 * Task provenance: 500.19 Update Header/Footer responsive correction.
 * Keeps the approved desktop header/footer design while ensuring the mobile
 * navigation drawer is closed by default and only opens when the header toggle
 * applies the is-menu-open state.
 */
@media (max-width: 767px) {
    .classified-app-header__menu {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: calc(94px + 8px);
        z-index: 1001;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 16px;
        border-radius: 0 0 var(--cls-button-border-radius, 12px 8px 12px 8px) var(--cls-button-border-radius, 12px 8px 12px 8px);
        background: var(--cls-colour-secondary, #584473);
        box-shadow: 0 14px 34px color-mix(in srgb, var(--cls-colour-secondary, #584473) 18%, transparent);
    }

    .classified-app-header.is-menu-open .classified-app-header__menu {
        display: flex;
    }

    .classified-app-header__nav,
    .classified-app-header__actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }
}

/**
 * Classified Platform — mobile header width and banner-panel correction.
 *
 * Task provenance: 500.19 Update Header/Footer responsive correction v6.
 * Restores the configured header strapline panel on mobile and removes the
 * narrow, offset mobile header presentation so the header fills the viewport.
 */
@media (max-width: 767px) {
    .classified-app-header {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .classified-app-header__inner--legacy-aligned {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .classified-app-header__banner {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) auto;
        border-radius: 0;
    }

    .classified-app-header__brand {
        min-height: 96px;
        align-items: flex-start;
        padding: 14px 18px;
    }

    .classified-app-header__logo {
        max-width: min(82vw, 240px);
        max-height: 68px;
    }

    .classified-app-header__strapline {
        font-size: clamp(1rem, 4.2vw, 1.18rem);
    }

    .classified-app-header__banner-panel {
        grid-column: 1 / -1;
        display: flex;
        min-height: auto;
        padding: 12px 18px 16px;
        text-align: left;
    }

    .classified-app-header__banner-title {
        max-width: none;
        font-size: clamp(1.2rem, 5.2vw, 1.55rem);
        line-height: var(--cls-ui-line-height-heading);
    }

    .classified-app-header__toggle {
        margin: 0 18px 0 0;
        background: color-mix(in srgb, var(--cls-colour-accent, #9D6DBC) 70%, var(--cls-colour-surface-white, #FFFFFF));
    }

    .classified-app-header__menu {
        top: calc(96px + 66px);
        left: 0;
        right: 0;
        border-radius: 0;
    }

    .classified-app-header__search {
        width: 100%;
        margin: 0;
        padding: 18px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .classified-app-header__search-form {
        width: 100%;
    }
}

/**
 * Classified Platform - Header Search Toggle.
 *
 * Task provenance: 500.36 Header Refinement corrective implementation.
 * The search form remains the existing marketplace search form, but it is hidden
 * by default and opened from the navigation/action bar to reduce persistent
 * header footprint without changing search behaviour.
 */
.classified-app-header__search-toggle {
    flex: 0 0 auto;
    margin-left: 2px;
}

.classified-app-header__search[hidden] {
    display: none !important;
}

.classified-app-header.is-search-open .classified-app-header__search {
    display: grid;
}

/**
 * Classified Platform - Application Header Visual Alignment.
 *
 * Task provenance: 500.41 Application Header Visual Alignment.
 * These final source-order rules align the application-owned header with the
 * approved Classified HQ visual language. Application navigation, identity-aware
 * actions and Task 500.36 marketplace search behaviour remain authoritative and
 * independent of Elementor and the active WordPress theme.
 */
.classified-app-header {
    background: var(--cls-ui-page-background);
    box-shadow: none;
}

.classified-app-header.is-scrolled {
    background: var(--cls-ui-page-background);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--cls-colour-secondary, #584473) 14%, transparent);
}

.classified-container.classified-app-header__inner--legacy-aligned {
    width: min(calc(100% - 20px), 1280px);
    max-width: 1280px;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    margin-inline: auto;
    padding: 10px 0;
}

.classified-app-header__banner {
    grid-template-columns: minmax(320px, 35%) minmax(0, 65%);
    min-height: 152px;
    border-radius: 20px 20px 0 0;
    background: var(--cls-colour-accent, #9D6DBC);
}

.classified-app-header__brand {
    min-height: 152px;
    gap: 10px;
    padding: 10px 20px;
    background: var(--cls-colour-accent, #9D6DBC);
}

.classified-app-header__logo {
    max-width: 240px;
    max-height: 80px;
    border-radius: 20px;
}

.classified-app-header__strapline,
.classified-app-header__banner-title {
    color: var(--cls-colour-surface-white, #FFFFFF);
    font-size: clamp(1.25rem, 1.5vw, 1.5rem);
    font-weight: var(--cls-ui-font-weight-heading);
    line-height: var(--cls-ui-line-height-heading);
    text-align: center;
}

.classified-app-header__banner-panel {
    min-height: 152px;
    padding: 20px 32px;
    align-items: center;
    background: radial-gradient(
        at 0 0,
        var(--cls-colour-secondary, #584473) 0%,
        var(--cls-colour-accent, #9D6DBC) 100%
    );
    text-align: center;
}

.classified-app-header__menu {
    display: grid;
    grid-template-columns: 1fr auto;
    min-height: 60px;
    gap: 0;
    align-items: center;
    padding: 0 18px;
    background: var(--cls-colour-secondary, #584473);
}

.classified-app-header__nav {
    justify-content: center;
    min-width: 0;
    gap: clamp(12px, 1.6vw, 24px);
}

.classified-app-header__actions {
    justify-content: flex-end;
    gap: 14px;
}

.classified-app-header__nav-link,
.classified-app-header__action-link {
    color: var(--cls-colour-accent, #9D6DBC);
    font-size: var(--cls-ui-font-size-body);
    font-weight: var(--cls-ui-font-weight-ui);
    white-space: nowrap;
}

.classified-app-header__nav-link:hover,
.classified-app-header__nav-link:focus-visible,
.classified-app-header__action-link:hover,
.classified-app-header__action-link:focus-visible {
    color: var(--cls-colour-surface-white, #FFFFFF);
}

.classified-app-header__action-button {
    min-height: 43px;
    padding: 5px 12px;
    border-radius: 15px;
    background: var(--cls-colour-accent, #9D6DBC);
    color: var(--cls-colour-surface-white, #FFFFFF);
}

.classified-app-header__search-toggle {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-left: 0;
}

.classified-icon-action.classified-app-header__search-toggle {
    color: var(--cls-colour-accent, #9D6DBC);
    font-size: 24px;
    line-height: 1;
}

.classified-icon-action.classified-app-header__search-toggle svg {
    width: 24px;
    height: 24px;
}

/* The application shell is theme-independent, so the menu toggle cannot rely on
 * a host-theme screen-reader utility to preserve an accessible-only label. */
.classified-app-header__toggle .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.classified-app-header__search {
    border-color: color-mix(in srgb, var(--cls-colour-secondary, #584473) 20%, transparent);
    border-radius: 0 0 20px 20px;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .classified-app-header__inner--legacy-aligned {
        width: calc(100% - 20px);
    }

    .classified-app-header__banner {
        grid-template-columns: minmax(300px, 40%) minmax(0, 60%);
        min-height: 144px;
    }

    .classified-app-header__brand,
    .classified-app-header__banner-panel {
        min-height: 144px;
    }

    .classified-app-header__menu {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 0 10px;
    }

    .classified-app-header__nav {
        gap: clamp(7px, 1.1vw, 12px);
    }

    .classified-app-header__nav-link,
    .classified-app-header__action-link {
        font-size: clamp(0.78rem, 1.55vw, 1rem);
    }

    .classified-app-header__actions {
        gap: 8px;
    }

    .classified-app-footer__nav--compact {
        flex-flow: column nowrap;
        align-items: center;
        width: 100%;
    }

    .classified-app-footer__nav-separator {
        display: none;
    }
}

@media (max-width: 767px) {
    .classified-app-header__inner--legacy-aligned {
        width: calc(100% - 20px);
        max-width: none;
        margin: 0 auto;
        padding: 10px 0;
    }

    .classified-app-header__banner {
        display: block;
        min-height: 146px;
        border-radius: 20px 20px 0 0;
    }

    .classified-app-header__brand {
        min-height: 146px;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        text-align: center;
    }

    .classified-app-header__logo {
        max-width: min(100%, 240px);
        max-height: 80px;
    }

    .classified-app-header__strapline {
        display: block;
        font-size: 1.25rem;
        text-align: center;
    }

    .classified-app-header__banner-panel {
        display: none;
    }

    .classified-app-header__menu {
        position: static;
        display: grid;
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .classified-app-header.is-menu-open .classified-app-header__menu {
        display: grid;
    }

    .classified-app-header__toggle {
        display: inline-flex !important;
        width: 100%;
        min-height: 43px;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .classified-app-header__toggle-line {
        background: var(--cls-colour-accent, #9D6DBC);
    }

    .classified-app-header__nav {
        display: none;
        width: 100%;
        gap: 0;
        align-items: stretch;
    }

    .classified-app-header.is-menu-open .classified-app-header__nav {
        display: flex;
    }

    .classified-app-header__nav-link {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 16px;
        text-align: center;
    }

    .classified-app-header__actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 0;
        align-items: stretch;
    }

    .classified-app-header__action-link,
    .classified-app-header__action-button,
    .classified-app-header__search-toggle {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        border-radius: 0;
        text-align: center;
    }

    .classified-app-header__action-button {
        min-height: 44px;
        border-radius: 15px;
        justify-self: center;
        width: auto;
        min-width: 120px;
        margin: 0 auto;
        align-self: center;
    }

    .classified-icon-action.classified-app-header__search-toggle {
        justify-self: center;
    }

    .classified-app-header__search {
        position: static;
        width: 100%;
        padding: 18px;
        border-radius: 0 0 20px 20px;
    }

    .classified-app-header__search-row--query,
    .classified-app-header__search-row--filters {
        grid-template-columns: 1fr;
    }

    .classified-app-header__search-label {
        text-align: left;
    }
}

.classified-message-catalogue-list {
    display: grid;
    gap: 18px;
}

.classified-message-catalogue-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0;
}

.classified-message-catalogue-toolbar .classified-field {
    margin: 0;
}

.classified-message-catalogue-toolbar__actions {
    margin: 0;
    padding: 0;
}

.classified-message-catalogue-item {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 14%, transparent);
    border-radius: var(--cls-ui-radius-card);
    background: var(--cls-ui-surface);
}

.classified-message-catalogue-item[hidden] {
    display: none !important;
}

.classified-message-catalogue-item__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.classified-message-catalogue-item__header h3 {
    margin: 0 0 4px;
}

.classified-message-catalogue-item__editor textarea {
    min-height: 132px;
    width: 100%;
}

.classified-message-catalogue-item__reference {
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 12%, transparent);
}

.classified-message-catalogue-default {
    max-width: none;
    margin: 0;
    padding: 10px 0 0;
    white-space: pre-wrap;
    font-family: inherit;
    color: var(--cls-colour-text, #464646);
}

@media (max-width: 767px) {
    .classified-message-catalogue-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .classified-app-header__actions {
        align-items: center;
    }

    .classified-app-header__search-toggle {
        align-self: center;
    }

    .classified-app-header.is-search-open .classified-app-header__search {
        display: grid;
    }
}

/**
 * Authentication and Account Feature Ownership Layer - Governed
 *
 * Stage 3.5 ownership: authenticated account layout, account navigation,
 * profile read-only panels and account feature responsive stacking. This feature
 * layer consumes Application Shell, Shared UI, Forms and Action/Icon mechanics
 * without owning those reusable frameworks.
 *
 * Task provenance: 501.13 Account Layout Standardisation.
 */
.classified-account-card {
    overflow: hidden;
}

.classified-account-layout {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    min-height: 420px;
}

.classified-account-sidebar {
    border-right: 1px solid var(--cls-ui-surface-border);
    background: color-mix(in srgb, var(--cls-colour-primary, #522E91) 6%, transparent);
    padding: var(--cls-ui-card-padding);
}

.classified-account-nav__title {
    margin: 0 0 14px;
    color: var(--cls-colour-heading, #584473);
    font-family: var(--cls-ui-font-family-heading);
    font-size: var(--cls-ui-font-size-body);
    font-weight: var(--cls-ui-font-weight-strong);
}

.classified-account-nav__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.classified-account-nav__link {
    display: inline-flex;
    width: 100%;
    padding: 6px 0;
    color: var(--cls-colour-link, #522E91);
    font-weight: var(--cls-ui-font-weight-ui);
    text-decoration: none;
}

.classified-account-nav__link:hover,
.classified-account-nav__link.is-active {
    color: var(--cls-colour-link-hover, #584473);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.classified-account-content {
    min-width: 0;
}

.classified-account-content__header {
    border-bottom: 1px solid var(--cls-ui-surface-border);
}

.classified-account-content__body {
    min-height: 300px;
}

.classified-dashboard-empty-state {
    align-items: flex-start;
    text-align: left;
}

.classified-profile-toolbar,
.classified-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cls-ui-gap-sm);
    align-items: center;
    justify-content: space-between;
}

.classified-listing-management-card .classified-account-actions {
    padding: 0 8px 8px;
}

.classified-profile-edit-link,
.classified-account-link {
    color: var(--cls-colour-link, #522E91);
    font-weight: var(--cls-ui-font-weight-ui);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.classified-profile-edit-link:hover,
.classified-account-link:hover {
    color: var(--cls-colour-link-hover, #584473);
}

.classified-profile-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--cls-ui-radius-pill);
    font-size: var(--cls-ui-font-size-h4);
    line-height: 1;
    text-decoration: none;
}

.classified-profile-edit-link:hover {
    background: color-mix(in srgb, var(--cls-colour-primary, #522E91) 8%, transparent);
    text-decoration: none;
}

.classified-profile-readonly {
    display: grid;
    gap: 0;
    border: 1px solid var(--cls-ui-surface-border);
    border-radius: 16px;
    overflow: hidden;
}

.classified-profile-readonly--compact {
    margin-bottom: 18px;
}

.classified-profile-readonly__row {
    display: grid;
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
    gap: var(--cls-ui-gap-lg);
    padding: 16px 18px;
    background: var(--cls-ui-surface);
    border-bottom: 1px solid var(--cls-ui-surface-border);
}

.classified-profile-readonly__row:last-child {
    border-bottom: 0;
}

.classified-profile-readonly__label {
    color: var(--cls-colour-muted, #584473);
    font-weight: var(--cls-ui-font-weight-strong);
}

.classified-profile-readonly__value {
    color: var(--cls-colour-text, #241f2e);
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .classified-account-layout {
        grid-template-columns: 1fr;
    }

    .classified-account-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--cls-ui-surface-border);
    }

    .classified-account-nav__list,
    .classified-account-actions,
    .classified-profile-toolbar {
        align-items: flex-start;
    }

    .classified-profile-readonly__row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* Task 502.01-502.05 Marketplace Listings lifecycle UI */
.classified-listing-toolbar {
    margin-bottom: var(--cls-ui-gap-md);
}

.classified-listing-management-list {
    display: grid;
    gap: var(--cls-ui-gap-md);
}

.classified-listing-management-card .classified-card-header,
.classified-listing-preview .classified-card-header {
    align-items: flex-start;
    display: flex;
    gap: var(--cls-ui-gap-sm);
    justify-content: space-between;
}

.classified-listing-form textarea.classified-input {
    min-height: 8rem;
}


/* Task 502.01-502.05 v3 — listing lifecycle validation and withdrawal workflow */
.classified-field--required .classified-label,
.classified-field--required-before-publication .classified-label {
    font-weight: var(--cls-ui-font-weight-heading);
}

.classified-required-marker {
    margin-left: 0.15rem;
    color: var(--cls-colour-error, #FF0000);
    font-weight: var(--cls-ui-font-weight-heading);
}

.classified-field-hint,
.classified-form-note {
    display: block;
    margin-top: 0.35rem;
    color: var(--cls-layout-meta-text-color, var(--cls-ui-muted-text));
    font-size: var(--cls-layout-meta-text-font-size, var(--cls-ui-font-size-small));
    line-height: var(--cls-layout-meta-text-line-height, var(--cls-ui-line-height-body));
}

.classified-form-field--error .classified-input,
.classified-field--error .classified-input {
    border-color: var(--cls-colour-error, #FF0000);
    box-shadow: 0 0 0 1px var(--cls-colour-error, #FF0000);
}

.classified-field-message--error {
    display: block;
    margin-top: 0.35rem;
    color: var(--cls-colour-error, #FF0000);
    font-weight: var(--cls-ui-font-weight-strong);
}

.classified-withdraw-confirmation,
.classified-listing-withdraw-preview {
    margin-top: var(--cls-ui-gap-md);
}

.classified-inline-action-form {
    margin-top: var(--cls-ui-gap-md);
}

/* Application Shell Consumption Boundary - Feature Content Alignment.
 * Feature pages consume the application shell content rail; feature frameworks
 * keep ownership of their internal presentation.
 */
/* Task 502.01-502.05 v4 - Application content layout alignment.
 * Keeps routed application content on the same centred content grid as the
 * legacy-aligned header and footer panels.
 */
.classified-container {
    box-sizing: border-box;
}

.classified-application-main > .classified-container {
    width: min(100%, var(--cls-layout-content-width, 1140px));
    max-width: var(--cls-layout-content-width, 1140px);
    margin-inline: auto;
    padding-inline: var(--cls-layout-container-padding, 10px);
    box-sizing: border-box;
}

.classified-account-section,
.classified-account-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Task 502.12 - seller listing workspace container width correction.
 * Account pages inherit the shared application container width so the account
 * navigation and main content panel align with the standard Classified shell.
 */
.classified-application-main .classified-account-section,
.classified-application-main .classified-account-card {
    padding-top: 0;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 1140px) {
    .classified-application-main .classified-account-section,
    .classified-application-main .classified-account-card {
        max-width: 100%;
    }
}

/* ==========================================================
   Listing Presentation Ownership Layer - Preview and Detail Display
   Stage 3.4 ownership: listing preview media, image framing, detail text and
   compact listing card presentation. Listing forms and workspace controls stay
   deferred to their own ownership packages.
   ========================================================== */

/* Task 502.06-502.10 v4 - listing preview presentation correction */
.classified-listing-category-path {
    margin: 0.35rem 0 0;
}

.classified-listing-preview-media {
    margin: 0 0 var(--cls-ui-gap-md);
}

.classified-listing-preview-image {
    border-radius: var(--cls-ui-radius-lg);
    display: block;
    height: auto;
    max-height: 28rem;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

.classified-listing-preview-media figcaption {
    color: var(--cls-layout-meta-text-color, var(--cls-ui-muted-text));
    font-size: var(--cls-layout-meta-text-font-size, var(--cls-ui-font-size-small));
    line-height: var(--cls-layout-meta-text-line-height, var(--cls-ui-line-height-body));
    margin-top: 0.35rem;
}

.classified-listing-description {
    margin-top: var(--cls-ui-gap-sm);
}

/* Listing Presentation Ownership Layer - Compact Listing Cards. */
/*
 * Task 502.06-502.10 v5 - Listing management card refinement.
 * The listings index is a compact management surface: thumbnail, title, price
 * and lifecycle status. Full actions remain on the preview/detail view.
 */
.classified-listing-management-list--compact {
    display: grid;
    gap: var(--cls-ui-gap-md);
}

.classified-listing-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.classified-listing-card-link:focus-visible {
    border-radius: var(--cls-ui-radius-card);
    box-shadow: var(--cls-ui-focus-ring);
    outline: none;
}

.classified-listing-card-link:hover .classified-listing-management-card--compact,
.classified-listing-management-card--compact:hover {
    box-shadow: var(--cls-ui-shadow-raised);
    transform: translateY(-1px);
}

.classified-listing-management-card--compact {
    display: grid;
    grid-template-columns: minmax(86px, 120px) 1fr auto;
    align-items: center;
    gap: var(--cls-ui-gap-md);
    overflow: hidden;
    transition: box-shadow var(--cls-ui-motion-fast) ease, transform var(--cls-ui-motion-fast) ease;
}

.classified-listing-card-thumbnail {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--cls-ui-radius-card);
    color: var(--cls-layout-meta-text-color, var(--cls-ui-muted-text));
    background: var(--cls-ui-surface-soft);
    font-size: var(--cls-layout-meta-text-font-size, var(--cls-ui-font-size-small));
    font-weight: var(--cls-ui-font-weight-ui);
}

.classified-listing-card-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.classified-listing-card-summary {
    min-width: 0;
}

.classified-listing-card-title {
    margin: 0;
    color: var(--cls-layout-listing-card-title-color, var(--cls-colour-heading, #584473));
    font-family: var(--cls-layout-listing-card-title-font-family, var(--cls-ui-font-family-heading));
    font-size: var(--cls-layout-listing-card-title-font-size, var(--cls-ui-font-size-h5));
    font-weight: var(--cls-layout-listing-card-title-font-weight, var(--cls-ui-font-weight-heading));
    line-height: var(--cls-layout-listing-card-title-line-height, var(--cls-ui-line-height-heading));
    letter-spacing: var(--cls-layout-listing-card-title-letter-spacing, var(--cls-font-heading-letter-spacing, normal));
    text-transform: var(--cls-layout-listing-card-title-text-transform, var(--cls-font-heading-transform, none));
    font-style: var(--cls-layout-listing-card-title-font-style, normal);
    text-decoration: var(--cls-layout-listing-card-title-text-decoration, none);
}

.classified-listing-card-category {
    margin: 0.35rem 0 0;
    color: var(--cls-layout-meta-text-color, color-mix(in srgb, var(--cls-colour-text, #464646) 78%, transparent));
    font-family: var(--cls-layout-meta-text-font-family, var(--cls-ui-font-family-body));
    font-size: var(--cls-layout-meta-text-font-size, var(--cls-ui-font-size-meta));
    font-weight: var(--cls-layout-meta-text-font-weight, var(--cls-ui-font-weight-body));
    line-height: var(--cls-layout-meta-text-line-height, var(--cls-ui-line-height-body));
}

.classified-listing-card-commercial {
    display: grid;
    justify-items: end;
    gap: var(--cls-ui-gap-xs);
    min-width: 128px;
    text-align: right;
}

.classified-listing-card-price {
    color: var(--cls-colour-text, #464646);
    font-size: var(--cls-ui-font-size-lede);
    font-weight: var(--cls-ui-font-weight-heading);
}
.classified-listing-card-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cls-ui-gap-xs);
    margin: 0;
}

.classified-listing-card-actions .classified-inline-action-form {
    margin: 0;
}

.classified-listing-card-actions .classified-icon-action {
    width: var(--cls-ui-control-min-height, 44px);
    min-width: var(--cls-ui-control-min-height, 44px);
    height: var(--cls-ui-control-min-height, 44px);
}

@media (max-width: 768px) {
    .classified-listing-management-card--compact {
        grid-template-columns: 92px 1fr;
    }

    .classified-listing-card-commercial {
        grid-column: 2;
        justify-items: start;
        text-align: left;
    }

    .classified-listing-card-actions {
        justify-content: flex-start;
    }
}


/* Task 502.06-502.10 v9: featured image management. */
.classified-featured-image-current {
    display: grid;
    gap: var(--classified-space-sm, 0.75rem);
    margin-bottom: var(--classified-space-sm, 0.75rem);
}

.classified-listing-form-featured-image {
    max-width: 220px;
    height: auto;
    border-radius: var(--classified-radius-md, 8px);
    display: block;
}

/* ==========================================================
   Action/Icon Framework Ownership Layer - Governed
   Stage 3.4 ownership: reusable icon-action mechanics, icon-only hit areas,
   icon sizing, action grouping, hover/focus/active/disabled states,
   destructive states, inline action surfaces and reusable action affordances.

   This framework owns reusable action mechanics and icon-button presentation.
   It does not own Command Framework composition, Seller Workspace layout,
   Listing Preview layout, Forms structure, Shared UI button presentation,
   generated CSS, PHP templates, JavaScript behaviour or business logic.
   ========================================================== */

/* Action/Icon Framework - Base Icon Actions. */
/* Task 502.06-502.10 v15-v16 - Standard application action icons. */
.classified-screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.classified-button-with-icon,
.classified-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.classified-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--cls-interaction-icon-size, 20px);
    height: var(--cls-interaction-icon-size, 20px);
    line-height: 1;
}

.classified-fa-icon,
.classified-action-icon i,
.classified-action-icon svg,
.classified-preview-edge-action svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.classified-fa-icon {
    overflow: visible;
}

.classified-action-icon i {
    font-size: 1em;
    line-height: 1;
}

.classified-icon-action-bar {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--cls-ui-gap-md);
    gap: var(--cls-ui-gap-xs);
}

.classified-role-select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 220px;
    padding-right: 36px !important;
    background-color: #FFFFFF !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23522E91' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4-5.9 5.9-5.9-5.9z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 18px 18px !important;
}

.classified-icon-action-bar .classified-inline-action-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 0;
}

.classified-icon-action,
.classified-platform .classified-icon-action,
.classified-shortcode .classified-icon-action,
.classified-registration .classified-icon-action {
    position: relative;
    width: var(--cls-ui-control-min-height, 44px);
    min-width: var(--cls-ui-control-min-height, 44px);
    height: var(--cls-ui-control-min-height, 44px);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--cls-ui-radius-pill);
    background: transparent;
    color: var(--cls-colour-link, #522E91);
    cursor: pointer;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
    box-shadow: none;
    transition: border-color var(--cls-ui-motion-fast) ease, background var(--cls-ui-motion-fast) ease, color var(--cls-ui-motion-fast) ease;
}

/* Action/Icon Framework - Interaction States. */
.classified-icon-action:hover,
.classified-icon-action:focus-visible,
.classified-platform .classified-icon-action:hover,
.classified-platform .classified-icon-action:focus-visible,
.classified-shortcode .classified-icon-action:hover,
.classified-shortcode .classified-icon-action:focus-visible,
.classified-registration .classified-icon-action:hover,
.classified-registration .classified-icon-action:focus-visible {
    border-color: transparent;
    background: transparent;
    color: var(--cls-colour-link-hover, #9D6DBC);
    text-decoration: none;
    outline: 2px solid color-mix(in srgb, var(--cls-colour-link, #522E91) 24%, transparent);
    outline-offset: 2px;
}

.classified-icon-action:disabled,
.classified-icon-action[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
}

.classified-icon-action[aria-expanded="true"],
.classified-icon-action.is-active,
.classified-platform .classified-icon-action[aria-expanded="true"],
.classified-platform .classified-icon-action.is-active,
.classified-shortcode .classified-icon-action[aria-expanded="true"],
.classified-shortcode .classified-icon-action.is-active,
.classified-registration .classified-icon-action[aria-expanded="true"],
.classified-registration .classified-icon-action.is-active {
    border-color: transparent;
    background: transparent;
    color: var(--cls-colour-link-hover, #9D6DBC);
}

[data-classified-tooltip] {
    position: relative;
}

[data-classified-tooltip]::after {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 20;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--cls-colour-secondary, #584473) 92%, #000000);
    color: #FFFFFF;
    content: attr(data-classified-tooltip);
    font-size: var(--cls-ui-font-size-meta);
    line-height: 1.25;
    opacity: 0;
    overflow-wrap: break-word;
    pointer-events: none;
    text-align: center;
    transform: translateY(4px);
    transition: opacity var(--cls-ui-motion-fast) ease, transform var(--cls-ui-motion-fast) ease;
    white-space: normal;
}

[data-classified-tooltip]:hover::after,
[data-classified-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}


@media (hover: none) {
    [data-classified-tooltip]::after {
        display: none;
    }
}

/* Listing Presentation Ownership Layer - Preview Navigation. */
.classified-listing-preview-frame {
    position: relative;
}

/* Action/Icon Framework - Preview Edge Action Consumption.
 * Listing Preview owns preview layout. Action/Icon owns the reusable edge-action
 * control mechanics consumed by that layout.
 */
.classified-preview-edge-action {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cls-ui-control-min-height, 44px);
    min-width: var(--cls-ui-control-min-height, 44px);
    height: var(--cls-ui-control-min-height, 44px);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--cls-ui-radius-pill);
    background: transparent;
    color: var(--cls-colour-link, #522E91);
    box-shadow: none;
    line-height: 1;
    text-decoration: none;
    transform: translateY(-50%);
    transition: border-color var(--cls-ui-motion-fast) ease, background var(--cls-ui-motion-fast) ease, color var(--cls-ui-motion-fast) ease;
}

.classified-action-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cls-ui-gap-sm);
    align-items: center;
    justify-content: space-between;
}

.classified-preview-edge-action:hover,
.classified-preview-edge-action:focus-visible {
    border-color: transparent;
    background: transparent;
    color: var(--cls-colour-link-hover, #9D6DBC);
    outline: 2px solid color-mix(in srgb, var(--cls-colour-link, #522E91) 24%, transparent);
    outline-offset: 2px;
    text-decoration: none;
}

.classified-preview-edge-action--previous {
    left: -1.375rem;
}

.classified-preview-edge-action--next {
    right: -1.375rem;
}

@media (max-width: 767px) {
    /* Action/Icon Framework - Preview Edge Action Responsive Consumption. */
    .classified-preview-edge-action {
        position: static;
        transform: none;
        margin-bottom: var(--cls-ui-gap-sm);
    }

    .classified-listing-preview-frame {
        display: flex;
        flex-wrap: wrap;
        gap: var(--cls-ui-gap-sm);
    }

    .classified-listing-preview-frame .classified-listing-preview {
        flex: 1 0 100%;
        order: 3;
    }

    .classified-preview-edge-action--previous {
        order: 1;
    }

    .classified-preview-edge-action--next {
        order: 2;
    }
}


/* ==========================================================
   Action/Icon Framework - Action Bars and Icon Sizing Refinements
   Reusable action bars, icon-action hit areas and sizing refinements remain in
   Action/Icon ownership even when consumed by listing, form, command or
   workspace surfaces.
   ========================================================== */

/* Task 502.06-502.10 v17 - Action icon sizing and placement refinement. */
.classified-icon-action-bar {
    align-items: center;
    justify-content: flex-end;
    margin-top: 0;
    margin-bottom: var(--cls-ui-gap-md);
}

.classified-icon-action-bar--top {
    width: 100%;
}

.classified-account-actions.classified-icon-action-bar {
    justify-content: flex-end;
}

.classified-icon-action {
    appearance: none;
    -webkit-appearance: none;
    width: var(--cls-ui-control-min-height, 44px);
    min-width: var(--cls-ui-control-min-height, 44px);
    height: var(--cls-ui-control-min-height, 44px);
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

button.classified-icon-action {
    font: inherit;
}

.classified-action-icon {
    width: var(--cls-interaction-icon-size, 20px);
    height: var(--cls-interaction-icon-size, 20px);
}

.classified-icon-action--create {
    width: var(--cls-ui-control-min-height, 44px);
    min-width: var(--cls-ui-control-min-height, 44px);
    height: var(--cls-ui-control-min-height, 44px);
}
.classified-listing-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Action/Icon Framework - Preview Edge Action Consumption.
 * Listing Preview owns preview layout. Action/Icon owns the reusable edge-action
 * control mechanics consumed by that layout.
 */
.classified-preview-edge-action {
    width: var(--cls-ui-control-min-height, 44px);
    height: var(--cls-ui-control-min-height, 44px);
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.classified-preview-edge-action:hover,
.classified-preview-edge-action:focus-visible {
    border-color: transparent;
    background: transparent;
    color: var(--cls-colour-link-hover, #9D6DBC);
    outline: 2px solid color-mix(in srgb, var(--cls-colour-link, #522E91) 24%, transparent);
    outline-offset: 2px;
    transform: translateY(-50%);
}

.classified-preview-edge-action--previous {
    left: -1.75rem;
}

.classified-preview-edge-action--next {
    right: -1.75rem;
}

/* Action/Icon Framework - Responsive Action Behaviour. */
@media (max-width: 767px) {
    .classified-icon-action-bar {
        justify-content: flex-end;
    }

    .classified-preview-edge-action:hover,
    .classified-preview-edge-action:focus-visible {
        transform: none;
    }
}

/* Task 502.06-502.10 v18 — Edit and withdraw action placement tidy-up. */
/* Action/Icon Framework - Form and Withdraw Action Bars.
 * Forms own form structure; Action/Icon owns reusable action presentation and
 * icon mechanics used by inline, form and withdraw action surfaces.
 */
.classified-form-action-bar,
.classified-withdraw-action-bar {
    justify-content: flex-end;
    margin-top: 0;
    margin-bottom: var(--cls-ui-gap-md);
}

.classified-inline-action-form.classified-withdraw-action-form {
    margin: 0 0 var(--cls-ui-gap-md) 0;
}

/* Action/Icon Framework - Inline Action Forms. */
.classified-inline-action-form .classified-icon-action,
.classified-form-action-bar .classified-icon-action,
.classified-withdraw-action-bar .classified-icon-action,
button.classified-icon-action,
input.classified-icon-action {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: var(--cls-ui-control-min-height, 44px);
    min-width: var(--cls-ui-control-min-height, 44px);
    height: var(--cls-ui-control-min-height, 44px);
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    text-shadow: none;
}

.classified-inline-action-form .classified-icon-action:hover,
.classified-inline-action-form .classified-icon-action:focus-visible,
.classified-form-action-bar .classified-icon-action:hover,
.classified-form-action-bar .classified-icon-action:focus-visible,
.classified-withdraw-action-bar .classified-icon-action:hover,
.classified-withdraw-action-bar .classified-icon-action:focus-visible {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--cls-colour-link-hover, #9D6DBC);
    outline: 2px solid color-mix(in srgb, var(--cls-colour-link, #522E91) 24%, transparent);
    outline-offset: 2px;
}

/* Task 502.06-502.10 v21 — Marketplace home category placeholder. */
.classified-marketplace-home {
    display: flex;
    flex-direction: column;
    gap: var(--cls-ui-gap-lg);
}

.classified-marketplace-home-hero {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 16%, transparent);
    border-radius: var(--cls-ui-radius-lg);
    background: var(--cls-ui-surface);
    box-shadow: var(--cls-ui-shadow-card);
}

.classified-marketplace-home-hero h1 {
    margin: 0 0 var(--cls-ui-gap-sm) 0;
}

.classified-marketplace-home-hero p:last-child {
    max-width: 52rem;
    margin-bottom: 0;
}

.classified-kicker {
    margin: 0 0 0.35rem 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cls-colour-primary, #522E91);
}

/*
 * Task 502.06-502.10 v22 — smarter marketplace home category layout.
 *
 * CSS columns are used here rather than a fixed grid so shorter category groups
 * do not create large blank areas beneath neighbouring taller groups. Each
 * category card remains a single unbroken block and the browser flows the next
 * available category into the current column before starting a new one.
 */
.classified-marketplace-category-grid {
    column-count: 3;
    column-gap: var(--cls-ui-gap-md);
}

.classified-marketplace-category-card {
    display: inline-block;
    width: 100%;
    margin: 0 0 var(--cls-ui-gap-md) 0;
    padding: 0.8rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 14%, transparent);
    border-radius: var(--cls-ui-radius-lg);
    background: var(--cls-ui-surface);
    box-shadow: var(--cls-ui-shadow-card);
    break-inside: avoid;
    page-break-inside: avoid;
}

.classified-marketplace-category-card h2 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.55rem;
    margin: 0 0 0.5rem 0;
    font-size: clamp(0.98rem, 1.55vw, 1.12rem);
    line-height: 1.2;
}

.classified-marketplace-category-count {
    white-space: nowrap;
    font-size: 0.86em;
    font-weight: 600;
    color: var(--cls-colour-secondary, #584473);
}

.classified-marketplace-subcategory-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.classified-marketplace-subcategory-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.22rem 0;
    border-top: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 8%, transparent);
    font-size: 0.92rem;
    line-height: 1.25;
}

.classified-marketplace-subcategory-list li:first-child {
    border-top: 0;
}

.classified-marketplace-category-empty {
    margin: 0;
    color: var(--cls-colour-secondary, #584473);
    font-size: 0.92rem;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .classified-marketplace-category-grid {
        column-count: 2;
    }
}

@media (max-width: 620px) {
    .classified-marketplace-category-grid {
        column-count: 1;
    }
}

/* ==========================================================
   Seller Workspace Ownership Layer - Governed
   Stage 3.4 ownership: seller-facing listing management workspace shell,
   workspace sections and panels, summary/status filters, workspace controls,
   bulk-selection surfaces, compact seller listing-management cards and
   workspace-specific responsive presentation.

   This manual layer may consume generated and manual UI tokens plus shared
   Forms and Action/Icon selectors. It must not own public Listing Presentation,
   Forms, Command Framework, Action/Icon Framework, application shell, generated
   design CSS, PHP templates, JavaScript behaviour or business logic.
   ========================================================== */

/* Seller Workspace - Shell and Sections. */

/* Task 502.12 - seller listing management workspace. */
.classified-listing-workspace {
    display: grid;
    width: 100%;
    max-width: 100%;
    gap: var(--cls-ui-gap-lg);
}

.classified-listing-workspace__section {
    display: grid;
    width: 100%;
    max-width: 100%;
    gap: var(--cls-ui-gap-sm);
}

.classified-listing-workspace__section + .classified-listing-workspace__section {
    padding-top: var(--cls-ui-gap-md);
    border-top: 1px solid var(--cls-ui-surface-border);
}

.classified-listing-workspace__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cls-ui-gap-sm);
    width: 100%;
    max-width: 100%;
}

.classified-listing-workspace__section-title {
    margin: 0;
    color: var(--cls-colour-heading, #584473);
    font-size: var(--cls-ui-font-size-h4);
    line-height: 1.25;
}

.classified-listing-workspace__section-note {
    margin: calc(-1 * var(--cls-ui-gap-xs)) 0 0;
    max-width: 42rem;
}

/* Seller Workspace - Summary and Status Filters. */
.classified-listing-workspace__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: var(--cls-ui-gap-xs);
}

.classified-summary-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--cls-ui-gap-xs);
    min-height: 3rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cls-ui-surface-border);
    border-radius: var(--cls-ui-radius-control);
    color: var(--cls-colour-text, #464646);
    background: var(--cls-ui-surface, #fff);
    text-decoration: none;
}

.classified-summary-filter:hover,
.classified-summary-filter:focus-visible,
.classified-summary-filter--active {
    border-color: var(--cls-colour-link, #522E91);
    background: color-mix(in srgb, var(--cls-colour-link, #522E91) 6%, var(--cls-ui-surface, #fff));
    outline: none;
}

.classified-summary-filter:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--cls-colour-link, #522E91) 35%, transparent);
    outline-offset: 2px;
}

.classified-summary-filter--active {
    box-shadow: inset 0 0 0 1px var(--cls-colour-link, #522E91);
}

.classified-summary-filter span {
    min-width: 0;
    color: var(--cls-layout-meta-text-color, var(--cls-ui-muted-text));
    font-size: var(--cls-ui-font-size-small);
    font-weight: var(--cls-ui-font-weight-ui);
    line-height: 1.25;
}

.classified-summary-filter strong {
    color: var(--cls-colour-heading, #584473);
    font-size: var(--cls-ui-font-size-h5, 1.2rem);
    line-height: 1;
}

/* Seller Workspace - Controls and Bulk Toolbar Surfaces.
 * Consumes shared Forms selectors for field, label and button presentation;
 * Forms ownership remains in the governed Forms layer.
 */
.classified-listing-workspace__controls,
.classified-listing-bulk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
    gap: var(--cls-ui-gap-sm);
    overflow: visible;
}

.classified-listing-workspace__controls .classified-field,
.classified-listing-bulk-toolbar .classified-field {
    flex: 1 1 150px;
    min-width: min(100%, 150px);
}

.classified-listing-workspace__controls .classified-label,
.classified-listing-bulk-toolbar .classified-label {
    display: block;
    color: var(--cls-form-label-colour, #584473);
}

.classified-listing-workspace__controls .classified-listing-search-field {
    flex-basis: 220px;
}

.classified-listing-bulk-toolbar .classified-field {
    flex: 0 1 240px;
}

.classified-listing-workspace__control-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--cls-ui-gap-xs);
    min-width: max-content;
}

.classified-listing-workspace__controls .classified-button,
.classified-listing-bulk-toolbar .classified-button {
    flex: 0 0 auto;
    width: auto;
    min-width: 7rem;
    white-space: nowrap;
}

/* Seller Workspace - Compact Listing Management Cards.
 * Consumes public listing card primitives and Action/Icon controls without
 * taking ownership of Listing Presentation or Action/Icon Framework rules.
 */
.classified-listing-management-card--compact {
    position: relative;
    grid-template-columns: minmax(86px, 120px) minmax(0, 1fr) auto;
    width: 100%;
}

.classified-listing-select {
    position: absolute;
    top: var(--cls-ui-gap-xs);
    left: var(--cls-ui-gap-xs);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cls-ui-surface, #fff) 88%, transparent);
    box-shadow: var(--cls-ui-shadow-subtle);
}

.classified-listing-select input {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--cls-colour-link, #522E91);
}
/* Seller Workspace - Responsive Refinements. */
@media (max-width: 768px) {
    .classified-listing-workspace__section-header {
        grid-template-columns: 1fr;
    }

    .classified-listing-workspace__controls,
    .classified-listing-bulk-toolbar,
    .classified-listing-workspace__control-actions {
        align-items: stretch;
    }

    .classified-listing-workspace__controls .classified-field,
    .classified-listing-bulk-toolbar .classified-field,
    .classified-listing-workspace__control-actions,
    .classified-listing-workspace__controls .classified-button,
    .classified-listing-bulk-toolbar .classified-button {
        flex-basis: 100%;
        width: 100%;
        min-width: 0;
    }

    .classified-listing-management-card--compact {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .classified-listing-card-commercial {
        grid-column: 2;
    }
}

/* Seller Workspace - Shared Workspace Panels and Toolbars. */
/* Task 502.13 - reusable workspace presentation framework. */
.classified-workspace {
    display: grid;
    width: 100%;
    max-width: 100%;
    gap: var(--cls-ui-gap-md);
}

.classified-workspace-hero,
.classified-workspace-panel {
    width: 100%;
    max-width: 100%;
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 12%, transparent);
    border-radius: var(--cls-ui-radius-card);
    background: var(--cls-ui-surface, #fff);
    box-shadow: var(--cls-ui-shadow-card-soft);
}

.classified-workspace-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--cls-ui-gap-md);
    align-items: start;
    padding: clamp(0.95rem, 2vw, 1.35rem);
}

.classified-workspace-hero__content {
    min-width: 0;
}

.classified-workspace-hero__title {
    margin: 0;
    color: var(--cls-colour-heading, #584473);
    font-family: var(--cls-ui-font-family-heading);
    font-size: var(--cls-ui-font-size-h3);
    font-weight: var(--cls-ui-font-weight-heading);
    line-height: var(--cls-ui-line-height-heading);
    letter-spacing: 0;
}

.classified-workspace-hero__meta {
    margin: 0.35rem 0 0;
}

.classified-workspace-toolbar {
    align-self: start;
    margin: 0;
}

.classified-workspace-panel {
    display: grid;
    gap: var(--cls-ui-gap-sm);
    padding: clamp(0.85rem, 1.8vw, 1.15rem);
}

.classified-workspace-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cls-ui-gap-sm);
}

.classified-workspace-filter-bar,
.classified-workspace-bulk-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1.45fr) repeat(3, minmax(140px, 1fr)) auto;
    gap: var(--cls-ui-gap-sm);
    align-items: end;
}

.classified-workspace-bulk-toolbar {
    grid-template-columns: minmax(180px, 240px) auto;
}

.classified-summary-filter-bar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: var(--cls-ui-gap-xs);
}

.classified-summary-filter {
    min-height: 2.75rem;
    padding: 0.5rem 0.65rem;
    box-shadow: none;
    transition: border-color var(--cls-ui-motion-fast) ease, background var(--cls-ui-motion-fast) ease, transform var(--cls-ui-motion-fast) ease;
}

.classified-summary-filter:hover,
.classified-summary-filter:focus-visible {
    transform: translateY(-1px);
}

.classified-summary-filter span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classified-listing-workspace__section + .classified-listing-workspace__section {
    padding-top: 0;
    border-top: 0;
}

.classified-listing-workspace__section-title {
    font-size: var(--cls-ui-font-size-h5);
}

.classified-listing-workspace__section-note {
    margin: 0.2rem 0 0;
}

.classified-listing-workspace__controls .classified-field,
.classified-listing-bulk-toolbar .classified-field {
    min-width: 0;
}

.classified-listing-workspace__control-actions {
    align-self: end;
}

.classified-listing-management-list--compact {
    gap: var(--cls-ui-gap-sm);
}

.classified-listing-management-card--compact {
    grid-template-columns: minmax(88px, 112px) minmax(0, 1fr) minmax(150px, auto);
    gap: var(--cls-ui-gap-md);
    padding: 0.65rem 0.8rem 0.65rem 0.65rem;
    border-color: color-mix(in srgb, var(--cls-colour-secondary, #584473) 10%, transparent);
    box-shadow: none;
}

.classified-listing-card-thumbnail {
    border-radius: var(--cls-ui-radius-control);
}

.classified-listing-card-summary {
    display: grid;
    gap: 0.25rem;
}

.classified-listing-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    color: var(--cls-layout-meta-text-color, var(--cls-ui-muted-text));
    font-size: var(--cls-ui-font-size-meta);
    line-height: 1.25;
}

.classified-listing-card-meta span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classified-listing-card-meta span + span {
    position: relative;
}

.classified-listing-card-meta span + span::before {
    position: absolute;
    left: -0.45rem;
    color: color-mix(in srgb, var(--cls-colour-text, #464646) 34%, transparent);
    content: "|";
}

.classified-listing-card-description {
    display: -webkit-box;
    margin: 0.1rem 0 0;
    overflow: hidden;
    color: var(--cls-ui-muted-text);
    font-size: var(--cls-ui-font-size-small);
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.classified-listing-card-commercial {
    align-self: stretch;
    align-content: center;
    min-width: 150px;
}

.classified-listing-card-actions {
    flex-wrap: nowrap;
}

.classified-listing-select {
    top: 0.45rem;
    left: 0.45rem;
    width: 2rem;
    height: 2rem;
    background: color-mix(in srgb, var(--cls-ui-surface, #fff) 92%, transparent);
}

@media (max-width: 1024px) {
    .classified-workspace-filter-bar {
        grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr);
    }

    .classified-listing-workspace__control-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .classified-workspace-hero {
        grid-template-columns: 1fr;
    }

    .classified-workspace-toolbar,
    .classified-listing-toolbar {
        justify-content: flex-start;
    }

    .classified-workspace-filter-bar,
    .classified-workspace-bulk-toolbar {
        grid-template-columns: 1fr;
    }

    .classified-listing-workspace__control-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .classified-listing-workspace__control-actions .classified-button {
        min-width: 0;
        width: 100%;
    }

    .classified-listing-management-card--compact {
        grid-template-columns: 82px minmax(0, 1fr);
        padding-right: 0.65rem;
    }

    .classified-listing-card-commercial {
        grid-column: 1 / -1;
        grid-template-columns: 1fr auto;
        align-items: center;
        justify-items: start;
        min-width: 0;
        text-align: left;
    }

    .classified-listing-card-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .classified-summary-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .classified-summary-filter {
        grid-template-columns: 1fr;
        align-content: center;
        min-height: 3.4rem;
    }

    .classified-summary-filter strong {
        font-size: var(--cls-ui-font-size-h5);
    }
}

/**
 * Task 500.42 - approved HQ footer visual alignment.
 * Application-owned selectors reproduce the approved geometry without importing
 * Elementor runtime mechanics into the native application shell.
 */
.classified-app-footer { overflow: hidden; border-top: 1px solid var(--cls-colour-primary, #522E91); }
.classified-app-footer__inner--legacy-aligned { grid-template-columns: minmax(0, 30%) minmax(0, 30%) minmax(0, 40%); gap: 0; align-items: stretch; padding-top: 20px; padding-bottom: 20px; }
.classified-app-footer__links,
.classified-app-footer__brand,
.classified-app-footer__contact { min-width: 0; padding: 0 24px; overflow-wrap: anywhere; }
.classified-app-footer__links,
.classified-app-footer__brand { border-right: 1px solid color-mix(in srgb, var(--cls-colour-primary, #522E91) 42%, transparent); }
.classified-app-footer__nav--compact { justify-content: center; padding-right: 0; }
.classified-app-footer__contact-row { max-width: 100%; overflow-wrap: anywhere; }
.classified-app-footer__legal { min-height: 42px; align-items: center; border-radius: 0 0 28px 28px; }

@media (min-width: 768px) and (max-width: 900px) {
    .classified-app-footer__inner--legacy-aligned { grid-template-columns: minmax(0, 30%) minmax(0, 30%) minmax(0, 40%); text-align: initial; }
    .classified-app-footer__links,
    .classified-app-footer__brand,
    .classified-app-footer__contact { min-height: 108px; padding: 0 16px; }
    .classified-app-footer__links,
    .classified-app-footer__brand { border-right: 1px solid color-mix(in srgb, var(--cls-colour-primary, #522E91) 42%, transparent); }
    .classified-app-footer__nav--compact { flex-flow: column nowrap; align-items: center; gap: 8px; width: 100%; }
    .classified-app-footer__nav-separator { display: none; }
}

@media (max-width: 767px) {
    .classified-app-footer__inner--legacy-aligned { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 20px; padding-bottom: 20px; text-align: center; }
    .classified-app-footer__links,
    .classified-app-footer__brand,
    .classified-app-footer__contact { min-height: 0; padding: 0 16px; border-right: 0; align-items: center; }
    .classified-app-footer__nav--compact { flex-flow: column nowrap; align-items: center; gap: 8px; width: 100%; }
    .classified-app-footer__nav-separator { display: none; }
    .classified-app-footer__contact { width: fit-content; max-width: 100%; justify-self: center; align-items: stretch; text-align: left; }
    .classified-app-footer__contact-row { width: 100%; max-width: 100%; grid-template-columns: 26px minmax(0, 1fr); align-self: stretch; text-align: left; }
    .classified-app-footer__contact-icon { justify-self: center; }
    .classified-app-footer__contact-row > :last-child { min-width: 0; overflow-wrap: anywhere; }
    .classified-app-footer__legal { padding: 10px 16px; border-radius: 0 0 20px 20px; font-size: 0.75rem; }
}

/* Seller Workspace - Composition Refinements. */
/* Task 502.13 - workspace composition refinement. */
.classified-listing-workspace {
    gap: var(--cls-ui-gap-sm);
}

.classified-listing-workspace__section--summary {
    padding: 0;
}

.classified-listing-workspace__section--toolbar {
    padding: 0 0 var(--cls-ui-gap-sm);
}

.classified-listing-workspace__section--listings {
    gap: var(--cls-ui-gap-sm);
}

.classified-listing-workspace__section--summary,
.classified-listing-workspace__section--toolbar,
.classified-listing-workspace__section--listings {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.classified-listing-workspace__section--summary + .classified-listing-workspace__section,
.classified-listing-workspace__section--toolbar + .classified-listing-workspace__section,
.classified-listing-workspace__section--bulk + .classified-listing-workspace__section {
    padding-top: 0;
    border-top: 0;
}

.classified-listing-workspace__section--toolbar .classified-listing-workspace__section-header,
.classified-listing-workspace__section--listings > .classified-listing-workspace__section-header {
    margin: 0;
}

.classified-listing-workspace__section--listings > .classified-listing-workspace__section-header {
    min-height: 0;
}

.classified-listing-workspace__section--listings > .classified-listing-workspace__section-header .classified-listing-workspace__section-title {
    font-size: var(--cls-ui-font-size-h6);
}

.classified-summary-filter-bar.classified-listing-workspace__summary {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 0.4rem;
}

.classified-summary-filter {
    min-height: 2.35rem;
    padding: 0.4rem 0.55rem;
    border-color: color-mix(in srgb, var(--cls-colour-secondary, #584473) 10%, transparent);
    background: transparent;
}

.classified-summary-filter strong {
    font-size: var(--cls-ui-font-size-h6);
}

.classified-workspace-filter-bar.classified-listing-workspace__controls {
    grid-template-columns: minmax(220px, 1.35fr) minmax(130px, 0.75fr) minmax(150px, 0.9fr) minmax(118px, 0.6fr) auto;
    padding: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 10%, transparent);
    border-radius: var(--cls-ui-radius-card);
    background: color-mix(in srgb, var(--cls-ui-surface, #fff) 86%, var(--cls-ui-surface-soft, #f8f5fa));
    box-shadow: none;
}

.classified-listing-workspace__control-actions {
    display: flex;
    gap: 0.35rem;
    align-items: end;
}

.classified-listing-workspace__control-actions .classified-button {
    min-width: 5.75rem;
}

.classified-listing-workspace__control-actions .classified-icon-action--create {
    width: var(--cls-ui-control-min-height, 44px);
    min-width: var(--cls-ui-control-min-height, 44px);
    height: var(--cls-ui-control-min-height, 44px);
}
.classified-js [data-classified-bulk-toolbar] {
    display: none;
}

.classified-js [data-classified-bulk-toolbar].classified-listing-workspace__section--bulk-active {
    display: grid;
}

.classified-listing-workspace__section--bulk {
    padding: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--cls-colour-link, #522E91) 14%, transparent);
    border-radius: var(--cls-ui-radius-card);
    background: color-mix(in srgb, var(--cls-colour-link, #522E91) 4%, var(--cls-ui-surface, #fff));
    box-shadow: none;
}

.classified-listing-workspace__section--bulk .classified-listing-workspace__section-title {
    font-size: var(--cls-ui-font-size-small);
}

.classified-listing-workspace__section--bulk .classified-workspace-section-header {
    align-self: center;
}

.classified-listing-workspace__section--bulk .classified-listing-bulk-form {
    margin: 0;
}

.classified-listing-workspace__section--bulk {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
}

.classified-listing-workspace__section--bulk .classified-workspace-bulk-toolbar {
    justify-content: end;
}

.classified-listing-workspace__section--listings .classified-listing-workspace__section-title {
    color: var(--cls-ui-muted-text-strong);
}

.classified-listing-management-card--compact {
    background: var(--cls-ui-surface, #fff);
}

@media (max-width: 1024px) {
    .classified-workspace-filter-bar.classified-listing-workspace__controls {
        grid-template-columns: minmax(220px, 1fr) minmax(130px, 0.7fr) minmax(150px, 0.8fr);
    }
}

@media (max-width: 768px) {
    .classified-workspace-filter-bar.classified-listing-workspace__controls,
    .classified-listing-workspace__section--bulk {
        grid-template-columns: 1fr;
    }

    .classified-listing-workspace__control-actions {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
    }

    .classified-listing-workspace__section--bulk .classified-workspace-bulk-toolbar {
        justify-content: stretch;
    }
}

@media (max-width: 520px) {
    .classified-summary-filter-bar.classified-listing-workspace__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .classified-listing-workspace__control-actions {
        grid-template-columns: 1fr auto;
    }

    .classified-listing-workspace__control-actions .classified-button-secondary {
        grid-column: 1;
    }
}

/* Seller Workspace - Final Summary and Card Presentation Refinements. */
/* Task 502.13 - final presentation refinement. */
.classified-application-main .classified-account-section,
.classified-application-main .classified-account-card,
.classified-application-main .classified-account-layout,
.classified-application-main .classified-account-content,
.classified-application-main .classified-account-content__body,
.classified-account-content__body > .classified-workspace {
    width: 100%;
    max-width: 100%;
}

.classified-application-main .classified-account-section {
    padding-inline: 0;
}

.classified-listing-workspace__section--summary {
    width: 100%;
}

.classified-summary-filter-bar.classified-listing-workspace__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.classified-summary-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: var(--cls-ui-control-min-height-compact, 36px);
    padding: 0.35rem 0.65rem;
    border-radius: var(--cls-ui-radius-pill);
    font-size: var(--cls-ui-font-size-small);
    font-weight: var(--cls-ui-font-weight-ui);
    line-height: 1.2;
}

.classified-summary-filter span {
    min-width: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classified-summary-filter strong {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.classified-summary-filter--active {
    color: var(--cls-colour-link, #522E91);
}

@media (max-width: 520px) {
    .classified-summary-filter-bar.classified-listing-workspace__summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .classified-summary-filter {
        width: 100%;
    }
}

/* Seller Workspace - Shell Alignment Consumption Boundary.
 * These rules consume application shell containers for workspace alignment;
 * application shell ownership remains outside this package.
 */
/* Task 502.13 - shell alignment correction after product review. */

.classified-application-main .classified-account-section,
.classified-application-main .classified-account-card,
.classified-application-main .classified-account-layout,
.classified-application-main .classified-account-content,
.classified-application-main .classified-account-content__body,
.classified-account-content__body > .classified-workspace {
    width: 100%;
    max-width: 100%;
}

.classified-summary-filter-bar.classified-listing-workspace__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.classified-summary-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 2.25rem;
    padding: 0.38rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 16%, transparent);
    border-radius: var(--cls-ui-radius-pill);
    background: var(--cls-ui-surface, #fff);
    color: var(--cls-colour-text, #464646);
    box-shadow: none;
    font-size: var(--cls-ui-font-size-small);
    font-weight: var(--cls-ui-font-weight-ui);
    line-height: 1.2;
    text-decoration: none;
}

.classified-summary-filter:hover,
.classified-summary-filter:focus-visible,
.classified-summary-filter--active {
    border-color: var(--cls-colour-link, #522E91);
    background: color-mix(in srgb, var(--cls-colour-link, #522E91) 7%, var(--cls-ui-surface, #fff));
    color: var(--cls-colour-link, #522E91);
    transform: none;
}

.classified-summary-filter--active {
    box-shadow: inset 0 0 0 1px var(--cls-colour-link, #522E91);
}

.classified-summary-filter span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

@media (max-width: 520px) {
    .classified-summary-filter-bar.classified-listing-workspace__summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .classified-summary-filter {
        width: 100%;
    }
}
/* Seller Workspace - Diagnostic Layout Corrections and Responsive Safeguards. */
/* Task 502.13 - workspace layout correction from diagnostic findings. */
.classified-account-content,
.classified-account-content__body,
.classified-account-content__body > .classified-workspace,
.classified-listing-workspace__section,
.classified-listing-workspace__controls,
.classified-listing-management-list,
.classified-listing-management-card {
    min-width: 0;
}

.classified-workspace-filter-bar.classified-listing-workspace__controls {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr) minmax(0, 0.9fr) minmax(0, 0.6fr) minmax(0, auto);
    max-width: 100%;
}

.classified-listing-workspace__control-actions {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.classified-listing-workspace__control-actions .classified-button {
    min-width: 0;
}

.classified-listing-management-card--compact {
    grid-template-columns: minmax(72px, 96px) minmax(0, 1fr) minmax(0, auto);
    max-width: 100%;
}

.classified-listing-card-commercial {
    min-width: 0;
}

.classified-listing-card-price,
.classified-listing-card-commercial .classified-badge {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
    .classified-workspace-filter-bar.classified-listing-workspace__controls {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    }

    .classified-listing-workspace__control-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .classified-workspace-filter-bar.classified-listing-workspace__controls,
    .classified-listing-management-card--compact {
        grid-template-columns: 1fr;
    }

    .classified-listing-card-commercial {
        grid-column: auto;
    }
}
/* ==========================================================
   Command Framework Ownership Layer - Governed
   Stage 3.4 ownership: reusable command composition, command grouping,
   command-field layout, command action groups, transient command panels,
   command toggles, command counts and command-specific responsive interaction
   layout.

   This layer owns interaction composition rather than reusable control styling.
   It may consume Seller Workspace containers, shared Forms fields, Shared UI
   buttons and Action/Icon controls, but those frameworks retain ownership of
   their visual presentation and behaviour.
   ========================================================== */

/* Command Framework - Base Command Bars and Groups. */

/* Task 500.37 - reusable workspace command framework. */
.classified-workspace-command-bar,
.classified-workspace-bulk-command-bar {
    display: grid;
    width: 100%;
    max-width: 100%;
    gap: var(--cls-ui-gap-sm);
    align-items: end;
}

.classified-workspace-command-bar {
    grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(130px, 0.8fr)) auto;
}

.classified-workspace-bulk-command-bar {
    grid-template-columns: minmax(180px, 240px) auto;
}

.classified-workspace-command-field {
    min-width: 0;
}

.classified-workspace-command-field[data-classified-workspace-command="search"] {
    min-width: min(100%, 220px);
}

.classified-workspace-command-bar__actions {
    display: flex;
    gap: 0.35rem;
    align-items: end;
    justify-content: flex-end;
    min-width: max-content;
}

/* Command Framework - Shared Button Consumption.
 * Commands arrange shared buttons; Shared UI retains button visual ownership.
 */
.classified-workspace-command-bar__actions .classified-button,
.classified-workspace-bulk-command-bar .classified-button {
    width: auto;
    min-width: 5.75rem;
    white-space: nowrap;
}

/* Action/Icon Framework - Framework Consumption Boundaries.
 * Command Framework, Seller Workspace, Listing Preview and Forms may consume
 * reusable icon actions. They own composition and placement; Action/Icon owns
 * reusable icon mechanics.
 */
/* Command Framework - Action/Icon Consumption.
 * Commands reserve placement for icon actions; Action/Icon Framework owns the
 * reusable icon action mechanics.
 */
.classified-workspace-command-bar__actions .classified-icon-action--create {
    width: var(--cls-ui-control-min-height, 44px);
    min-width: var(--cls-ui-control-min-height, 44px);
    height: var(--cls-ui-control-min-height, 44px);
}
.classified-js [data-classified-bulk-toolbar] {
    display: none;
}

.classified-js [data-classified-bulk-toolbar].classified-workspace-command-bar--active,
.classified-js [data-classified-bulk-toolbar].classified-listing-workspace__section--bulk-active {
    display: grid;
}

/* Command Framework - Base Responsive Command Layout. */
@media (max-width: 1024px) {
    .classified-workspace-command-bar {
        grid-template-columns: minmax(220px, 1fr) minmax(130px, 0.7fr) minmax(150px, 0.8fr);
    }

    .classified-workspace-command-bar__actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .classified-workspace-command-bar,
    .classified-workspace-bulk-command-bar {
        grid-template-columns: 1fr;
    }

    .classified-workspace-command-bar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        width: 100%;
        min-width: 0;
    }

    .classified-workspace-command-bar__actions .classified-button,
    .classified-workspace-bulk-command-bar .classified-button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .classified-workspace-command-bar__actions {
        grid-template-columns: 1fr auto;
    }

    .classified-workspace-command-bar__actions .classified-button-secondary {
        grid-column: 1;
    }
}

/* Command Framework - Seller Workspace Command Surface Composition.
 * These rules compose command controls inside Seller Workspace surfaces without
 * taking ownership of Seller Workspace layout or reusable control styling.
 */
/* Task 500.37 - product review command surface refinement. */
.classified-workspace-filter-bar.classified-listing-workspace__controls.classified-workspace-command-bar {
    position: relative;
    grid-template-columns: minmax(260px, 1.55fr) minmax(132px, 0.78fr) minmax(156px, 0.9fr) minmax(120px, 0.62fr) auto;
    gap: 0.55rem;
    align-items: stretch;
    padding: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 14%, transparent);
    border-radius: var(--cls-ui-radius-card);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cls-ui-surface, #fff) 94%, var(--cls-ui-surface-soft, #f8f5fa)), var(--cls-ui-surface, #fff));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--cls-colour-secondary, #584473) 8%, transparent);
}

.classified-workspace-filter-bar.classified-listing-workspace__controls.classified-workspace-command-bar::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: var(--cls-ui-radius-card) 0 0 var(--cls-ui-radius-card);
    background: var(--cls-colour-link, #522E91);
    content: "";
}

.classified-workspace-command-bar .classified-workspace-command-field {
    display: grid;
    gap: 0.22rem;
    align-content: end;
    min-height: 4.25rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 10%, transparent);
    border-radius: var(--cls-ui-radius-control);
    background: color-mix(in srgb, var(--cls-ui-surface, #fff) 88%, transparent);
}

.classified-workspace-command-bar .classified-workspace-command-field[data-classified-workspace-command="search"] {
    min-width: 0;
    border-color: color-mix(in srgb, var(--cls-colour-link, #522E91) 18%, transparent);
    background: var(--cls-ui-surface, #fff);
}

/* Command Framework - Forms Field Consumption.
 * Commands position labels and inputs inside command fields; Forms retains
 * ownership of reusable form-control presentation.
 */
.classified-workspace-command-bar .classified-label,
.classified-workspace-bulk-command-bar .classified-label {
    margin: 0;
    color: var(--cls-ui-muted-text-strong, #584473);
    font-size: var(--cls-ui-font-size-meta);
    font-weight: var(--cls-ui-font-weight-ui);
    line-height: 1.15;
}

.classified-workspace-command-bar .classified-input,
.classified-workspace-bulk-command-bar .classified-input {
    min-height: 2.4rem;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.classified-workspace-command-bar .classified-workspace-command-field[data-classified-workspace-command="search"] .classified-input {
    font-size: var(--cls-ui-font-size-body);
    font-weight: var(--cls-ui-font-weight-ui);
}

.classified-workspace-command-bar .classified-input:focus,
.classified-workspace-command-bar .classified-input:focus-visible,
.classified-workspace-bulk-command-bar .classified-input:focus,
.classified-workspace-bulk-command-bar .classified-input:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--cls-colour-link, #522E91) 26%, transparent);
    outline-offset: 2px;
}

.classified-workspace-command-bar__actions.classified-listing-workspace__control-actions {
    position: relative;
    align-self: stretch;
    align-items: center;
    gap: 0.45rem;
    padding-left: 0.75rem;
    border-left: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 12%, transparent);
}

.classified-workspace-command-bar__actions .classified-button:not(.classified-button-secondary) {
    min-height: var(--cls-ui-control-min-height, 44px);
    border-color: var(--cls-colour-link, #522E91);
    background: var(--cls-colour-link, #522E91);
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--cls-colour-link, #522E91) 18%, transparent);
}

.classified-workspace-command-bar__actions .classified-button-secondary {
    border-color: transparent;
    background: transparent;
    color: var(--cls-ui-muted-text-strong, #584473);
    box-shadow: none;
}

/* Action/Icon Framework - Framework Consumption Boundaries.
 * Command Framework, Seller Workspace, Listing Preview and Forms may consume
 * reusable icon actions. They own composition and placement; Action/Icon owns
 * reusable icon mechanics.
 */
/* Command Framework - Action/Icon Consumption.
 * Commands reserve placement for icon actions; Action/Icon Framework owns the
 * reusable icon action mechanics.
 */
.classified-workspace-command-bar__actions .classified-icon-action--create {
    border-color: transparent;
    background: transparent;
}
.classified-listing-workspace__section--bulk {
    gap: 0.65rem;
    align-items: center;
    border-color: color-mix(in srgb, var(--cls-colour-link, #522E91) 18%, transparent);
    background: color-mix(in srgb, var(--cls-colour-link, #522E91) 6%, var(--cls-ui-surface, #fff));
}

/* Command Framework - Bulk Command Composition. */
.classified-workspace-bulk-command-bar.classified-listing-bulk-toolbar {
    align-items: stretch;
    gap: 0.55rem;
}

.classified-workspace-bulk-command-bar .classified-workspace-command-field {
    display: grid;
    gap: 0.22rem;
    align-content: end;
    padding: 0.45rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--cls-colour-link, #522E91) 14%, transparent);
    border-radius: var(--cls-ui-radius-control);
    background: var(--cls-ui-surface, #fff);
}

.classified-workspace-bulk-command-bar .classified-button {
    align-self: end;
    min-height: var(--cls-ui-control-min-height, 44px);
}

@media (max-width: 1024px) {
    .classified-workspace-filter-bar.classified-listing-workspace__controls.classified-workspace-command-bar {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }

    .classified-workspace-command-bar__actions.classified-listing-workspace__control-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-top: 0.55rem;
        padding-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 12%, transparent);
        border-left: 0;
    }
}

@media (max-width: 768px) {
    .classified-workspace-filter-bar.classified-listing-workspace__controls.classified-workspace-command-bar,
    /* Command Framework - Bulk Command Composition. */
.classified-workspace-bulk-command-bar.classified-listing-bulk-toolbar {
        grid-template-columns: 1fr;
    }

    .classified-workspace-command-bar__actions.classified-listing-workspace__control-actions {
        grid-template-columns: 1fr 1fr auto;
        justify-content: stretch;
    }

    .classified-workspace-command-bar__actions .classified-button:not(.classified-button-secondary),
    .classified-workspace-command-bar__actions .classified-button-secondary {
        width: 100%;
    }

    .classified-listing-workspace__section--bulk {
        align-items: stretch;
    }
}

@media (max-width: 520px) {
    .classified-workspace-filter-bar.classified-listing-workspace__controls.classified-workspace-command-bar {
        padding: 0.6rem;
    }

    .classified-workspace-command-bar__actions.classified-listing-workspace__control-actions {
        grid-template-columns: 1fr auto;
    }

    .classified-workspace-command-bar__actions .classified-button-secondary {
        grid-column: 1;
    }
}

/* Command Framework - Compact Command Mode, Toggles and Panels. */
/* Task 500.37 - workspace command interaction refinement. */
.classified-workspace-filter-bar.classified-listing-workspace__controls.classified-workspace-command-bar--compact {
    position: relative;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 12%, transparent);
    border-radius: var(--cls-ui-radius-card);
    background: color-mix(in srgb, var(--cls-ui-surface, #fff) 94%, var(--cls-ui-surface-soft, #f8f5fa));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--cls-colour-secondary, #584473) 6%, transparent);
}

.classified-workspace-filter-bar.classified-listing-workspace__controls.classified-workspace-command-bar--compact::before {
    content: none;
}

.classified-workspace-command-bar--compact .classified-workspace-command-field[data-classified-workspace-command="search"] {
    min-height: var(--cls-ui-control-min-height, 44px);
    padding: 0;
    border-color: color-mix(in srgb, var(--cls-colour-secondary, #584473) 12%, transparent);
    border-radius: var(--cls-ui-radius-control);
    background: var(--cls-ui-surface, #fff);
}

.classified-workspace-command-bar--compact .classified-workspace-command-field[data-classified-workspace-command="search"] .classified-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.classified-workspace-command-bar--compact .classified-workspace-command-field[data-classified-workspace-command="search"] .classified-input {
    min-height: var(--cls-ui-control-min-height, 44px);
    padding-inline: 0.85rem;
    border: 0;
    background: transparent;
}

.classified-workspace-command-bar--compact .classified-workspace-command-bar__actions.classified-listing-workspace__control-actions {
    display: inline-flex;
    grid-column: auto;
    align-self: center;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    min-width: max-content;
    padding: 0;
    border: 0;
}

.classified-workspace-command-bar--compact .classified-icon-action {
    position: relative;
    flex: 0 0 auto;
    width: var(--cls-ui-control-min-height, 44px);
    min-width: var(--cls-ui-control-min-height, 44px);
    height: var(--cls-ui-control-min-height, 44px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--cls-colour-link, #522E91);
    box-shadow: none;
}

.classified-workspace-command-bar--compact .classified-icon-action:hover,
.classified-workspace-command-bar--compact .classified-icon-action:focus-visible {
    border-color: transparent;
    background: transparent;
    color: var(--cls-colour-link-hover, #9D6DBC);
}

/* Command Framework - Command Toggle and Count States. */
.classified-workspace-command-toggle[aria-expanded="true"],
.classified-workspace-command-toggle--active {
    border-color: transparent;
    background: transparent;
    color: var(--cls-colour-link-hover, #9D6DBC);
}

.classified-workspace-command-count {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    display: grid;
    place-items: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding-inline: 0.25rem;
    border: 2px solid var(--cls-ui-surface, #fff);
    border-radius: 999px;
    background: var(--cls-colour-link, #522E91);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}


/* Command Framework - Transient Command Panel Composition. */
.classified-workspace-command-panel[hidden] {
    display: none;
}

.classified-workspace-command-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.45rem);
    right: 0.55rem;
    display: grid;
    width: min(24rem, calc(100vw - 2rem));
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--cls-colour-secondary, #584473) 16%, transparent);
    border-radius: var(--cls-ui-radius-card);
    background: var(--cls-ui-surface, #fff);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--cls-colour-secondary, #584473) 16%, transparent);
}

.classified-workspace-command-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cls-ui-gap-xs);
}

.classified-workspace-command-panel__title {
    margin: 0;
    color: var(--cls-colour-heading, #584473);
    font-size: var(--cls-ui-font-size-h6);
    line-height: 1.2;
}

.classified-workspace-command-panel__description {
    margin: -0.35rem 0 0;
    color: var(--cls-ui-muted-text);
    font-size: var(--cls-ui-font-size-small);
    line-height: 1.35;
}

.classified-workspace-command-panel__close {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    font-size: 1.2rem;
}

.classified-workspace-command-panel__fields {
    display: grid;
    gap: 0.55rem;
}

.classified-workspace-command-panel .classified-workspace-command-field {
    display: grid;
    gap: 0.25rem;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.classified-workspace-command-panel .classified-input {
    min-height: var(--cls-ui-control-min-height, 44px);
    border: 1px solid var(--cls-ui-surface-border);
    border-radius: var(--cls-ui-radius-control);
    background: var(--cls-ui-surface, #fff);
}

.classified-workspace-command-panel__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
    padding-top: 0.15rem;
}

.classified-workspace-command-panel__actions .classified-button {
    width: auto;
    min-width: 5.5rem;
}

/* Command Framework - Responsive Compact Panel Layout. */
@media (max-width: 768px) {
    .classified-workspace-filter-bar.classified-listing-workspace__controls.classified-workspace-command-bar--compact {
        grid-template-columns: 1fr;
    }

    .classified-workspace-command-bar--compact .classified-workspace-command-bar__actions.classified-listing-workspace__control-actions {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }

    .classified-workspace-command-panel {
        right: 0.55rem;
        left: 0.55rem;
        width: auto;
    }
}

@media (max-width: 520px) {
    .classified-workspace-command-bar--compact .classified-workspace-command-bar__actions.classified-listing-workspace__control-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, var(--cls-ui-control-min-height, 44px)));
    }

    .classified-workspace-command-panel__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .classified-workspace-command-panel__actions .classified-button {
        width: 100%;
        min-width: 0;
    }
}