/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   PUBLIC MARKETPLACE
   CATEGORY PAGE STYLES
   File:
   /home/jqkmqvml/public_html/assets/css/pages/category.css

   Purpose:
   - Category index/detail pages
   - Category business/service/product listings
   - Live database/API driven UI
   - Responsive marketplace layout
   - SEO-friendly page presentation
   - No fake/demo/sample marketplace data
   - No JavaScript
   ========================================================================== */


/* ==========================================================================
   1. CATEGORY PAGE ROOT
   ========================================================================== */

.category-page,
.category-page-root {
    width: 100%;
    min-width: 0;
}

.category-page__section,
.category-section {
    width: 100%;
}

.category-page__section + .category-page__section,
.category-section + .category-section {
    margin-top: var(--space-8, 2rem);
}


/* ==========================================================================
   2. CATEGORY HERO
   ========================================================================== */

.category-hero {
    position: relative;
    width: 100%;
    overflow: hidden;

    background:
        var(--category-hero-background,
        linear-gradient(
            135deg,
            var(--color-surface, #ffffff),
            var(--color-surface-muted, #f5f7fa)
        ));

    border-bottom: 1px solid
        var(--color-border, #e5e7eb);
}

.category-hero__inner {
    width: min(
        100%,
        var(--container-max-width, 1280px)
    );

    margin-inline: auto;

    padding-block:
        var(--space-10, 2.5rem)
        var(--space-10, 2.5rem);

    padding-inline:
        var(--container-padding, 1rem);
}

.category-hero__content {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: var(--space-8, 2rem);
}

.category-hero__main {
    min-width: 0;
}

.category-hero__eyebrow {
    display: inline-flex;
    align-items: center;

    min-height: 1.5rem;

    margin-bottom: var(--space-2, 0.5rem);

    color:
        var(--color-text-muted, #6b7280);

    font-size:
        var(--font-size-sm, 0.875rem);

    font-weight:
        var(--font-weight-semibold, 600);

    line-height: 1.4;
}

.category-hero__title {
    margin: 0;

    color:
        var(--color-heading, #111827);

    font-size:
        clamp(
            1.75rem,
            4vw,
            2.75rem
        );

    font-weight:
        var(--font-weight-bold, 700);

    line-height: 1.15;

    letter-spacing:
        -0.02em;

    overflow-wrap: anywhere;
}

.category-hero__description {
    max-width: 70rem;

    margin:
        var(--space-4, 1rem)
        0
        0;

    color:
        var(--color-text-secondary, #4b5563);

    font-size:
        var(--font-size-md, 1rem);

    line-height: 1.7;
}

.category-hero__description:empty {
    display: none;
}

.category-hero__media {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 8rem;
}

.category-hero__image {
    display: block;

    width: clamp(7rem, 15vw, 12rem);
    height: clamp(7rem, 15vw, 12rem);

    object-fit: cover;

    border-radius:
        var(--radius-xl, 1rem);

    background:
        var(--color-surface-muted, #f5f7fa);

    border: 1px solid
        var(--color-border, #e5e7eb);
}

.category-hero__image[hidden] {
    display: none;
}


/* ==========================================================================
   3. CATEGORY BREADCRUMB AREA
   ========================================================================== */

.category-breadcrumb {
    width: min(
        100%,
        var(--container-max-width, 1280px)
    );

    margin-inline: auto;

    padding-inline:
        var(--container-padding, 1rem);

    padding-top:
        var(--space-4, 1rem);
}

.category-breadcrumb:empty {
    display: none;
}


/* ==========================================================================
   4. CATEGORY ACTIONS
   ========================================================================== */

.category-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--space-3, 0.75rem);

    margin-top:
        var(--space-5, 1.25rem);
}

.category-actions:empty {
    display: none;
}

.category-action {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 2.5rem;

    padding-inline:
        var(--space-4, 1rem);

    padding-block:
        var(--space-2, 0.5rem);

    border: 1px solid
        var(--color-border, #d1d5db);

    border-radius:
        var(--radius-md, 0.5rem);

    background:
        var(--color-surface, #ffffff);

    color:
        var(--color-text, #1f2937);

    font-size:
        var(--font-size-sm, 0.875rem);

    font-weight:
        var(--font-weight-semibold, 600);

    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

.category-action:hover {
    background:
        var(--color-surface-hover, #f9fafb);

    border-color:
        var(--color-border-strong, #9ca3af);

    color:
        var(--color-text-strong, #111827);
}

.category-action:focus-visible {
    outline:
        3px solid
        var(--color-focus, #2563eb);

    outline-offset: 2px;
}

.category-action--primary {
    background:
        var(--color-primary, #2563eb);

    border-color:
        var(--color-primary, #2563eb);

    color:
        var(--color-on-primary, #ffffff);
}

.category-action--primary:hover {
    background:
        var(--color-primary-hover, #1d4ed8);

    border-color:
        var(--color-primary-hover, #1d4ed8);

    color:
        var(--color-on-primary, #ffffff);
}


/* ==========================================================================
   5. CATEGORY LOCATION CONTEXT
   ========================================================================== */

.category-location {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--space-2, 0.5rem);

    margin-top:
        var(--space-4, 1rem);

    color:
        var(--color-text-muted, #6b7280);

    font-size:
        var(--font-size-sm, 0.875rem);
}

.category-location__label {
    font-weight:
        var(--font-weight-semibold, 600);
}

.category-location__value {
    color:
        var(--color-text, #374151);

    font-weight:
        var(--font-weight-medium, 500);
}

.category-location__link {
    color:
        var(--color-primary, #2563eb);

    text-decoration: none;
}

.category-location__link:hover {
    text-decoration: underline;
}


/* ==========================================================================
   6. CATEGORY NAVIGATION / CHILD CATEGORIES
   ========================================================================== */

.category-navigation {
    width: 100%;

    padding-block:
        var(--space-5, 1.25rem);
}

.category-navigation__list {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(13rem, 1fr)
        );

    gap: var(--space-4, 1rem);

    margin: 0;
    padding: 0;

    list-style: none;
}

.category-navigation__item {
    min-width: 0;
}

.category-navigation__link {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--space-3, 0.75rem);

    min-height: 3.25rem;

    padding:
        var(--space-3, 0.75rem)
        var(--space-4, 1rem);

    background:
        var(--color-surface, #ffffff);

    border: 1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-lg, 0.75rem);

    color:
        var(--color-text, #1f2937);

    text-decoration: none;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.category-navigation__link:hover {
    border-color:
        var(--color-primary-border, #93c5fd);

    box-shadow:
        var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));

    transform:
        translateY(-1px);
}

.category-navigation__link:focus-visible {
    outline:
        3px solid
        var(--color-focus, #2563eb);

    outline-offset: 2px;
}

.category-navigation__name {
    min-width: 0;

    overflow-wrap: anywhere;

    font-weight:
        var(--font-weight-semibold, 600);
}

.category-navigation__meta {
    flex: 0 0 auto;

    color:
        var(--color-text-muted, #6b7280);

    font-size:
        var(--font-size-xs, 0.75rem);
}


/* ==========================================================================
   7. CATEGORY OVERVIEW
   ========================================================================== */

.category-overview {
    width: min(
        100%,
        var(--container-max-width, 1280px)
    );

    margin-inline: auto;

    padding-inline:
        var(--container-padding, 1rem);
}

.category-overview__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(15rem, 22rem);

    gap: var(--space-6, 1.5rem);
}

.category-overview__content {
    min-width: 0;

    color:
        var(--color-text, #374151);

    line-height: 1.75;
}

.category-overview__content > :first-child {
    margin-top: 0;
}

.category-overview__content > :last-child {
    margin-bottom: 0;
}

.category-overview__sidebar {
    min-width: 0;
}


/* ==========================================================================
   8. CATEGORY STAT / INFORMATION CARDS
   ========================================================================== */

.category-info-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(10rem, 1fr)
        );

    gap: var(--space-4, 1rem);
}

.category-info-card {
    min-width: 0;

    padding:
        var(--space-4, 1rem);

    background:
        var(--color-surface, #ffffff);

    border: 1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-lg, 0.75rem);
}

.category-info-card__label {
    margin: 0;

    color:
        var(--color-text-muted, #6b7280);

    font-size:
        var(--font-size-sm, 0.875rem);

    font-weight:
        var(--font-weight-medium, 500);
}

.category-info-card__value {
    margin-top:
        var(--space-2, 0.5rem);

    color:
        var(--color-heading, #111827);

    font-size:
        var(--font-size-xl, 1.25rem);

    font-weight:
        var(--font-weight-bold, 700);
}


/* ==========================================================================
   9. CATEGORY CONTENT SECTION
   ========================================================================== */

.category-content {
    width: min(
        100%,
        var(--container-max-width, 1280px)
    );

    margin-inline: auto;

    padding-inline:
        var(--container-padding, 1rem);
}

.category-section__header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-4, 1rem);

    margin-bottom:
        var(--space-5, 1.25rem);
}

.category-section__heading {
    min-width: 0;
}

.category-section__title {
    margin: 0;

    color:
        var(--color-heading, #111827);

    font-size:
        var(--font-size-2xl, 1.5rem);

    font-weight:
        var(--font-weight-bold, 700);

    line-height: 1.25;
}

.category-section__description {
    max-width: 70rem;

    margin:
        var(--space-2, 0.5rem)
        0
        0;

    color:
        var(--color-text-muted, #6b7280);

    line-height: 1.6;
}

.category-section__actions {
    flex: 0 0 auto;
}

.category-section__body {
    min-width: 0;
}


/* ==========================================================================
   10. CATEGORY CARD GRID
   ========================================================================== */

.category-card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                min(
                    100%,
                    var(--category-card-min-width, 16rem)
                ),
                1fr
            )
        );

    gap:
        var(--category-grid-gap, 1rem);
}

.category-card-grid > * {
    min-width: 0;
}


/* ==========================================================================
   11. CATEGORY CARD
   ========================================================================== */

.category-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;

    overflow: hidden;

    background:
        var(--color-surface, #ffffff);

    border:
        1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-lg, 0.75rem);

    box-shadow:
        var(
            --category-card-shadow,
            0 1px 2px rgba(0, 0, 0, 0.04)
        );

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.category-card:hover {
    border-color:
        var(--color-border-strong, #d1d5db);

    box-shadow:
        var(
            --category-card-hover-shadow,
            0 8px 24px rgba(0, 0, 0, 0.08)
        );

    transform:
        translateY(-2px);
}

.category-card__link {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;

    min-width: 0;

    color: inherit;

    text-decoration: none;
}

.category-card__media {
    position: relative;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background:
        var(--color-surface-muted, #f3f4f6);
}

.category-card__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 240ms ease;
}

.category-card:hover .category-card__image {
    transform:
        scale(1.025);
}

.category-card__body {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;

    min-width: 0;

    padding:
        var(--space-4, 1rem);
}

.category-card__title {
    margin: 0;

    color:
        var(--color-heading, #111827);

    font-size:
        var(--font-size-lg, 1.125rem);

    font-weight:
        var(--font-weight-bold, 700);

    line-height: 1.35;

    overflow-wrap: anywhere;
}

.category-card__description {
    margin:
        var(--space-2, 0.5rem)
        0
        0;

    color:
        var(--color-text-secondary, #4b5563);

    font-size:
        var(--font-size-sm, 0.875rem);

    line-height: 1.55;
}

.category-card__meta {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--space-2, 0.5rem);

    margin-top:
        auto;

    padding-top:
        var(--space-4, 1rem);

    color:
        var(--color-text-muted, #6b7280);

    font-size:
        var(--font-size-xs, 0.75rem);
}

.category-card__footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--space-3, 0.75rem);

    padding:
        var(--space-3, 1rem);

    border-top:
        1px solid
        var(--color-border, #e5e7eb);
}


/* ==========================================================================
   12. CATEGORY RESULTS
   ========================================================================== */

.category-results {
    width: 100%;
}

.category-results__layout {
    display: grid;

    grid-template-columns:
        minmax(15rem, 18rem)
        minmax(0, 1fr);

    align-items: start;

    gap: var(--space-6, 1.5rem);
}

.category-results__sidebar {
    min-width: 0;
}

.category-results__main {
    min-width: 0;
}


/* ==========================================================================
   13. CATEGORY RESULTS HEADER
   ========================================================================== */

.category-results__header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: var(--space-3, 0.75rem);

    margin-bottom:
        var(--space-4, 1rem);
}

.category-results__title {
    margin: 0;

    color:
        var(--color-heading, #111827);

    font-size:
        var(--font-size-xl, 1.25rem);

    font-weight:
        var(--font-weight-bold, 700);
}

.category-results__summary {
    color:
        var(--color-text-muted, #6b7280);

    font-size:
        var(--font-size-sm, 0.875rem);
}

.category-results__controls {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-2, 0.5rem);
}


/* ==========================================================================
   14. CATEGORY RESULT GRID
   ========================================================================== */

.category-results__grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                min(
                    100%,
                    var(--category-result-card-min-width, 17rem)
                ),
                1fr
            )
        );

    gap:
        var(--category-result-gap, 1rem);
}


/* ==========================================================================
   15. BUSINESS / SERVICE / PRODUCT CATEGORY LISTING
   ========================================================================== */

.category-businesses,
.category-services,
.category-products,
.category-vendors {
    width: 100%;
}

.category-businesses__grid,
.category-services__grid,
.category-products__grid,
.category-vendors__grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                min(
                    100%,
                    var(--listing-card-min-width, 18rem)
                ),
                1fr
            )
        );

    gap: var(--space-4, 1rem);
}


/* ==========================================================================
   16. FEATURED / PRIORITY AREA
   ========================================================================== */

.category-featured {
    width: 100%;
}

.category-featured__grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(
                    100%,
                    var(--featured-card-min-width, 18rem)
                ),
                1fr
            )
        );

    gap: var(--space-4, 1rem);
}

.category-featured__item {
    min-width: 0;
}


/* ==========================================================================
   17. LOCATION-BASED CATEGORY BLOCK
   ========================================================================== */

.category-location-results {
    width: 100%;

    padding:
        var(--space-5, 1.25rem);

    background:
        var(--color-surface-muted, #f8fafc);

    border:
        1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-lg, 0.75rem);
}

.category-location-results__header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: var(--space-3, 0.75rem);

    margin-bottom:
        var(--space-4, 1rem);
}

.category-location-results__title {
    margin: 0;

    color:
        var(--color-heading, #111827);

    font-size:
        var(--font-size-lg, 1.125rem);

    font-weight:
        var(--font-weight-bold, 700);
}

.category-location-results__location {
    color:
        var(--color-primary, #2563eb);

    font-weight:
        var(--font-weight-semibold, 600);
}


/* ==========================================================================
   18. CATEGORY SEO CONTENT
   ========================================================================== */

.category-seo-content {
    width: min(
        100%,
        var(--container-max-width, 1280px)
    );

    margin-inline: auto;

    padding-inline:
        var(--container-padding, 1rem);

    color:
        var(--color-text, #374151);

    line-height: 1.8;
}

.category-seo-content__inner {
    max-width:
        var(--content-reading-width, 75rem);
}

.category-seo-content h2,
.category-seo-content h3,
.category-seo-content h4 {
    color:
        var(--color-heading, #111827);

    line-height: 1.3;
}

.category-seo-content a {
    color:
        var(--color-primary, #2563eb);

    text-decoration-thickness:
        1px;

    text-underline-offset:
        0.15em;
}

.category-seo-content img {
    max-width: 100%;
    height: auto;
}

.category-seo-content table {
    width: 100%;

    border-collapse: collapse;

    overflow-x: auto;
}

.category-seo-content th,
.category-seo-content td {
    padding:
        var(--space-3, 0.75rem);

    border:
        1px solid
        var(--color-border, #e5e7eb);

    text-align: start;
}


/* ==========================================================================
   19. CATEGORY FAQ
   ========================================================================== */

.category-faq {
    width: 100%;
}

.category-faq__list {
    display: grid;

    gap: var(--space-3, 0.75rem);
}

.category-faq__item {
    background:
        var(--color-surface, #ffffff);

    border:
        1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-lg, 0.75rem);

    overflow: hidden;
}

.category-faq__question {
    margin: 0;
}

.category-faq__question-button {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    gap: var(--space-4, 1rem);

    padding:
        var(--space-4, 1rem);

    border: 0;

    background:
        transparent;

    color:
        var(--color-heading, #111827);

    font: inherit;

    font-weight:
        var(--font-weight-semibold, 600);

    text-align: start;

    cursor: pointer;
}

.category-faq__question-button:focus-visible {
    outline:
        3px solid
        var(--color-focus, #2563eb);

    outline-offset: -3px;
}

.category-faq__answer {
    padding:
        0
        var(--space-4, 1rem)
        var(--space-4, 1rem);

    color:
        var(--color-text-secondary, #4b5563);

    line-height: 1.7;
}


/* ==========================================================================
   20. CATEGORY PAGINATION AREA
   ========================================================================== */

.category-pagination {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    margin-top:
        var(--space-7, 1.75rem);
}


/* ==========================================================================
   21. LIVE API LOADING STATE
   ========================================================================== */

.category-loading {
    width: 100%;
}

.category-loading[hidden] {
    display: none;
}

.category-loading__grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                min(
                    100%,
                    17rem
                ),
                1fr
            )
        );

    gap: var(--space-4, 1rem);
}

.category-skeleton {
    min-height: 12rem;

    overflow: hidden;

    border:
        1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-lg, 0.75rem);

    background:
        linear-gradient(
            90deg,
            var(--color-surface-muted, #f3f4f6) 25%,
            var(--color-surface-hover, #e5e7eb) 37%,
            var(--color-surface-muted, #f3f4f6) 63%
        );

    background-size: 400% 100%;

    animation:
        category-skeleton-loading
        1.4s
        ease-in-out
        infinite;
}

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

    100% {
        background-position: -100% 0;
    }
}


/* ==========================================================================
   22. EMPTY STATE
   ========================================================================== */

.category-empty {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 14rem;

    padding:
        var(--space-8, 2rem);

    text-align: center;

    background:
        var(--color-surface-muted, #f8fafc);

    border:
        1px dashed
        var(--color-border-strong, #cbd5e1);

    border-radius:
        var(--radius-lg, 0.75rem);
}

.category-empty__title {
    margin: 0;

    color:
        var(--color-heading, #111827);

    font-size:
        var(--font-size-lg, 1.125rem);

    font-weight:
        var(--font-weight-bold, 700);
}

.category-empty__message {
    max-width: 42rem;

    margin:
        var(--space-2, 0.5rem)
        0
        0;

    color:
        var(--color-text-muted, #6b7280);

    line-height: 1.6;
}


/* ==========================================================================
   23. ERROR STATE
   ========================================================================== */

.category-error {
    padding:
        var(--space-6, 1.5rem);

    background:
        var(--color-danger-surface, #fef2f2);

    border:
        1px solid
        var(--color-danger-border, #fecaca);

    border-radius:
        var(--radius-lg, 0.75rem);

    color:
        var(--color-danger-text, #991b1b);
}

.category-error__title {
    margin: 0;

    font-weight:
        var(--font-weight-bold, 700);
}

.category-error__message {
    margin:
        var(--space-2, 0.5rem)
        0
        0;

    line-height: 1.6;
}

.category-error__action {
    margin-top:
        var(--space-4, 1rem);
}


/* ==========================================================================
   24. DISABLED / UNAVAILABLE CONTENT
   ========================================================================== */

.category-is-disabled,
.category-card[aria-disabled="true"] {
    opacity: 0.65;

    pointer-events: none;
}

.category-is-hidden {
    display: none !important;
}


/* ==========================================================================
   25. CATEGORY LINKS
   ========================================================================== */

.category-link {
    color:
        var(--color-primary, #2563eb);

    text-decoration: none;
}

.category-link:hover {
    text-decoration: underline;
}

.category-link:focus-visible {
    outline:
        3px solid
        var(--color-focus, #2563eb);

    outline-offset: 2px;

    border-radius:
        var(--radius-sm, 0.25rem);
}


/* ==========================================================================
   26. CATEGORY TAGS
   ========================================================================== */

.category-tags {
    display: flex;

    flex-wrap: wrap;

    gap: var(--space-2, 0.5rem);

    margin: 0;
    padding: 0;

    list-style: none;
}

.category-tag {
    display: inline-flex;

    align-items: center;

    min-height: 1.75rem;

    padding-inline:
        var(--space-2, 0.5rem);

    border:
        1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        999px;

    background:
        var(--color-surface-muted, #f8fafc);

    color:
        var(--color-text-secondary, #4b5563);

    font-size:
        var(--font-size-xs, 0.75rem);

    font-weight:
        var(--font-weight-medium, 500);
}


/* ==========================================================================
   27. CATEGORY MEDIA / GALLERY
   ========================================================================== */

.category-media-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                min(
                    100%,
                    12rem
                ),
                1fr
            )
        );

    gap: var(--space-3, 0.75rem);
}

.category-media-grid__item {
    overflow: hidden;

    aspect-ratio: 4 / 3;

    background:
        var(--color-surface-muted, #f3f4f6);

    border:
        1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-md, 0.5rem);
}

.category-media-grid__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================================
   28. CATEGORY SIDEBAR
   ========================================================================== */

.category-sidebar {
    min-width: 0;

    padding:
        var(--space-4, 1rem);

    background:
        var(--color-surface, #ffffff);

    border:
        1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-lg, 0.75rem);
}

.category-sidebar__title {
    margin: 0 0 var(--space-4, 1rem);

    color:
        var(--color-heading, #111827);

    font-size:
        var(--font-size-lg, 1.125rem);

    font-weight:
        var(--font-weight-bold, 700);
}

.category-sidebar__section + .category-sidebar__section {
    margin-top:
        var(--space-5, 1.25rem);

    padding-top:
        var(--space-5, 1.25rem);

    border-top:
        1px solid
        var(--color-border, #e5e7eb);
}


/* ==========================================================================
   29. CATEGORY TREE
   ========================================================================== */

.category-tree {
    margin: 0;
    padding: 0;

    list-style: none;
}

.category-tree__item {
    min-width: 0;
}

.category-tree__item + .category-tree__item {
    margin-top:
        var(--space-1, 0.25rem);
}

.category-tree__link {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--space-3, 0.75rem);

    padding:
        var(--space-2, 0.5rem)
        var(--space-3, 0.75rem);

    border-radius:
        var(--radius-sm, 0.375rem);

    color:
        var(--color-text, #374151);

    text-decoration: none;
}

.category-tree__link:hover {
    background:
        var(--color-surface-hover, #f3f4f6);
}

.category-tree__link:focus-visible {
    outline:
        3px solid
        var(--color-focus, #2563eb);

    outline-offset: 1px;
}

.category-tree__name {
    min-width: 0;

    overflow-wrap: anywhere;
}

.category-tree__meta {
    flex: 0 0 auto;

    color:
        var(--color-text-muted, #6b7280);

    font-size:
        var(--font-size-xs, 0.75rem);
}

.category-tree__children {
    margin:
        var(--space-1, 0.25rem)
        0
        0
        var(--space-4, 1rem);

    padding: 0;

    list-style: none;
}


/* ==========================================================================
   30. CATEGORY SEARCH / QUICK SEARCH
   ========================================================================== */

.category-search {
    width: 100%;

    margin-bottom:
        var(--space-5, 1.25rem);
}

.category-search__form {
    display: flex;

    align-items: stretch;

    gap: var(--space-2, 0.5rem);
}

.category-search__input {
    flex: 1 1 auto;

    min-width: 0;
}

.category-search__submit {
    flex: 0 0 auto;
}


/* ==========================================================================
   31. CATEGORY CTA
   ========================================================================== */

.category-cta {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: var(--space-5, 1.25rem);

    padding:
        var(--space-6, 1.5rem);

    background:
        var(
            --category-cta-background,
            var(--color-surface-muted, #f8fafc)
        );

    border:
        1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-xl, 1rem);
}

.category-cta__title {
    margin: 0;

    color:
        var(--color-heading, #111827);

    font-size:
        var(--font-size-xl, 1.25rem);

    font-weight:
        var(--font-weight-bold, 700);
}

.category-cta__text {
    margin:
        var(--space-2, 0.5rem)
        0
        0;

    color:
        var(--color-text-secondary, #4b5563);

    line-height: 1.6;
}

.category-cta__actions {
    display: flex;

    flex-wrap: wrap;

    gap: var(--space-2, 0.5rem);
}


/* ==========================================================================
   32. CATEGORY VERIFICATION / TRUST AREA
   ========================================================================== */

.category-trust {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--space-3, 0.75rem);

    margin-top:
        var(--space-4, 1rem);
}

.category-trust__item {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2, 0.5rem);

    color:
        var(--color-text-secondary, #4b5563);

    font-size:
        var(--font-size-sm, 0.875rem);
}


/* ==========================================================================
   33. CATEGORY LEAD / ENQUIRY CTA
   ========================================================================== */

.category-enquiry {
    width: 100%;

    padding:
        var(--space-5, 1.25rem);

    background:
        var(--color-surface, #ffffff);

    border:
        1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-lg, 0.75rem);
}

.category-enquiry__title {
    margin: 0;

    color:
        var(--color-heading, #111827);

    font-size:
        var(--font-size-lg, 1.125rem);

    font-weight:
        var(--font-weight-bold, 700);
}

.category-enquiry__description {
    margin:
        var(--space-2, 0.5rem)
        0
        0;

    color:
        var(--color-text-secondary, #4b5563);

    line-height: 1.6;
}

.category-enquiry__actions {
    display: flex;

    flex-wrap: wrap;

    gap: var(--space-3, 0.75rem);

    margin-top:
        var(--space-4, 1rem);
}


/* ==========================================================================
   34. CATEGORY MAP AREA
   ========================================================================== */

.category-map {
    width: 100%;

    min-height:
        var(--category-map-min-height, 22rem);

    overflow: hidden;

    background:
        var(--color-surface-muted, #f3f4f6);

    border:
        1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-lg, 0.75rem);
}

.category-map__canvas {
    width: 100%;
    height: 100%;

    min-height:
        var(--category-map-min-height, 22rem);
}


/* ==========================================================================
   35. CATEGORY COMPARE AREA
   ========================================================================== */

.category-compare {
    width: 100%;

    overflow-x: auto;

    border:
        1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-lg, 0.75rem);
}

.category-compare__table {
    width: 100%;

    min-width:
        42rem;

    border-collapse: collapse;
}

.category-compare__table th,
.category-compare__table td {
    padding:
        var(--space-3, 0.75rem);

    border-bottom:
        1px solid
        var(--color-border, #e5e7eb);

    text-align: start;

    vertical-align: top;
}

.category-compare__table th {
    background:
        var(--color-surface-muted, #f8fafc);

    color:
        var(--color-heading, #111827);

    font-weight:
        var(--font-weight-semibold, 600);
}


/* ==========================================================================
   36. RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .category-hero__inner {
        padding-block:
            var(--space-7, 1.75rem);
    }

    .category-hero__content {
        grid-template-columns: 1fr;

        gap: var(--space-5, 1.25rem);
    }

    .category-hero__media {
        justify-content: flex-start;
    }

    .category-hero__image {
        width: 6.5rem;
        height: 6.5rem;
    }

    .category-section__header {
        align-items: flex-start;

        flex-direction: column;
    }

    .category-section__actions {
        width: 100%;
    }

    .category-results__layout {
        grid-template-columns: 1fr;
    }

    .category-results__sidebar {
        order: 1;
    }

    .category-results__main {
        order: 2;
    }

    .category-cta {
        grid-template-columns: 1fr;
    }

    .category-cta__actions {
        width: 100%;
    }

    .category-actions {
        width: 100%;
    }

    .category-action {
        flex: 1 1 auto;
    }

    .category-search__form {
        flex-direction: column;
    }

    .category-search__submit {
        width: 100%;
    }

    .category-navigation__list {
        grid-template-columns: 1fr;
    }

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

    .category-location-results {
        padding:
            var(--space-4, 1rem);
    }
}


/* ==========================================================================
   37. RESPONSIVE — SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    .category-info-grid {
        grid-template-columns: 1fr;
    }

    .category-hero__title {
        font-size:
            var(--font-size-2xl, 1.5rem);
    }

    .category-section__title {
        font-size:
            var(--font-size-xl, 1.25rem);
    }

    .category-card__body {
        padding:
            var(--space-3, 0.75rem);
    }

    .category-cta {
        padding:
            var(--space-4, 1rem);
    }
}


/* ==========================================================================
   38. TABLET
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    .category-results__layout {
        grid-template-columns:
            minmax(13rem, 16rem)
            minmax(0, 1fr);
    }

    .category-overview__grid {
        grid-template-columns: 1fr;
    }

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


/* ==========================================================================
   39. LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1440px) {

    .category-hero__inner {
        padding-block:
            var(--space-12, 3rem);
    }

    .category-results__grid {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(
                    var(--category-result-card-min-width, 19rem),
                    1fr
                )
            );
    }

    .category-card-grid {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(
                    var(--category-card-min-width, 18rem),
                    1fr
                )
            );
    }
}


/* ==========================================================================
   40. DARK THEME
   ========================================================================== */

[data-theme="dark"] .category-hero,
.theme-dark .category-hero {
    background:
        var(
            --category-hero-background-dark,
            var(--color-surface, #111827)
        );

    border-color:
        var(--color-border, #374151);
}

[data-theme="dark"] .category-card,
[data-theme="dark"] .category-info-card,
[data-theme="dark"] .category-sidebar,
[data-theme="dark"] .category-enquiry,
[data-theme="dark"] .category-compare,
.theme-dark .category-card,
.theme-dark .category-info-card,
.theme-dark .category-sidebar,
.theme-dark .category-enquiry,
.theme-dark .category-compare {
    background:
        var(--color-surface, #111827);

    border-color:
        var(--color-border, #374151);
}

[data-theme="dark"] .category-navigation__link,
.theme-dark .category-navigation__link {
    background:
        var(--color-surface, #111827);

    border-color:
        var(--color-border, #374151);
}

[data-theme="dark"] .category-navigation__link:hover,
.theme-dark .category-navigation__link:hover {
    background:
        var(--color-surface-hover, #1f2937);
}

[data-theme="dark"] .category-location-results,
[data-theme="dark"] .category-empty,
[data-theme="dark"] .category-cta,
.theme-dark .category-location-results,
.theme-dark .category-empty,
.theme-dark .category-cta {
    background:
        var(--color-surface-muted, #1f2937);

    border-color:
        var(--color-border, #374151);
}

[data-theme="dark"] .category-tree__link:hover,
.theme-dark .category-tree__link:hover {
    background:
        var(--color-surface-hover, #1f2937);
}

[data-theme="dark"] .category-compare__table th,
.theme-dark .category-compare__table th {
    background:
        var(--color-surface-muted, #1f2937);
}


/* ==========================================================================
   41. RTL SUPPORT
   ========================================================================== */

[dir="rtl"] .category-tree__children {
    margin-left: 0;

    margin-right:
        var(--space-4, 1rem);
}

[dir="rtl"] .category-card__footer,
[dir="rtl"] .category-section__header,
[dir="rtl"] .category-results__header,
[dir="rtl"] .category-location-results__header {
    direction: rtl;
}


/* ==========================================================================
   42. ACCESSIBILITY
   ========================================================================== */

.category-page a,
.category-page button,
.category-page input,
.category-page select,
.category-page textarea {
    -webkit-tap-highlight-color:
        transparent;
}

.category-page :focus-visible {
    outline:
        3px solid
        var(--color-focus, #2563eb);

    outline-offset: 2px;
}

.category-page [aria-hidden="true"] {
    pointer-events: none;
}


/* ==========================================================================
   43. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .category-card,
    .category-card__image,
    .category-navigation__link,
    .category-action {
        transition: none;
    }

    .category-card:hover {
        transform: none;
    }

    .category-card:hover .category-card__image {
        transform: none;
    }

    .category-skeleton {
        animation: none;

        background:
            var(--color-surface-muted, #f3f4f6);
    }
}


/* ==========================================================================
   44. FORCED COLORS / HIGH CONTRAST
   ========================================================================== */

@media (forced-colors: active) {

    .category-card,
    .category-info-card,
    .category-sidebar,
    .category-navigation__link,
    .category-enquiry,
    .category-location-results,
    .category-empty,
    .category-cta,
    .category-compare {
        border:
            1px solid CanvasText;
    }

    .category-action,
    .category-action--primary {
        border:
            1px solid ButtonText;

        color:
            ButtonText;

        background:
            ButtonFace;
    }

    .category-action:focus-visible,
    .category-navigation__link:focus-visible,
    .category-link:focus-visible {
        outline:
            2px solid Highlight;
    }
}


/* ==========================================================================
   45. PRINT
   ========================================================================== */

@media print {

    .category-actions,
    .category-results__controls,
    .category-sidebar,
    .category-cta__actions,
    .category-pagination {
        display: none !important;
    }

    .category-hero,
    .category-card,
    .category-info-card,
    .category-enquiry,
    .category-location-results {
        box-shadow: none !important;

        background: #ffffff !important;

        color: #000000 !important;
    }

    .category-card,
    .category-info-card,
    .category-enquiry,
    .category-location-results {
        border:
            1px solid #000000;
    }

    .category-page a {
        color: #000000;

        text-decoration: underline;
    }
}


/* ==========================================================================
   46. SAFE EMPTY DOM HANDLING
   ========================================================================== */

.category-navigation:has(.category-navigation__list:empty),
.category-card-grid:empty,
.category-results__grid:empty,
.category-featured__grid:empty,
.category-businesses__grid:empty,
.category-services__grid:empty,
.category-products__grid:empty,
.category-vendors__grid:empty {
    display: none;
}


/* ==========================================================================
   END OF CATEGORY.CSS
   ========================================================================== */