/**
 * C9 Catalog Styles
 *
 * BEM naming convention with Bootstrap utility class compatibility
 *
 * @package Clearnine
 * @subpackage V2/Assets
 */

/* ==========================================================================
   Catalog Container
   ========================================================================== */

.c9-catalog {
    --c9-catalog-gap: 1.5rem;
    --c9-card-border-radius: 0.5rem;
    --c9-filter-transition: 0.2s ease;

    /* Add-to-cart form — shared by card and list-row */
    --card-atc-group-width: auto;
    --card-atc-qty-width:   4.5rem;
    --card-atc-qty-border:  #adb5bd;
}

.c9-catalog__content {
    margin-top: var(--c9-catalog-gap);
}

/* ==========================================================================
   Breadcrumb
   Customisable tokens — override on .c9-breadcrumb in your theme CSS.
   ========================================================================== */

.c9-breadcrumb {
    /* Layout */
    --breadcrumb-gap:          0.375rem;

    /* Pills (ancestor links) */
    --breadcrumb-pill-padding:    0.2em 0.75em;
    --breadcrumb-pill-font-size:  0.8125rem;
    --breadcrumb-pill-bg:         #e9ecef;
    --breadcrumb-pill-color:      #495057;
    --breadcrumb-pill-bg-hover:   #dee2e6;
    --breadcrumb-pill-color-hover: #212529;
    --breadcrumb-pill-transition: background-color 0.15s, color 0.15s;

    /* Current page pill */
    --breadcrumb-current-bg:    var(--bs-primary, #000);
    --breadcrumb-current-color: var(--bs-secondary, #F95E01);

    margin-bottom: var(--c9-catalog-gap);
}

.c9-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--breadcrumb-gap);
    background-color: transparent;
    padding: 0.375rem 0;
    margin-bottom: 0;
    list-style: none;
}

/* Remove Bootstrap's slash separator — pills provide their own visual separation */
.c9-breadcrumb__item + .c9-breadcrumb__item::before {
    display: none;
}

.c9-breadcrumb__item {
    padding: 0;
}

.c9-breadcrumb__link {
    display: inline-block;
    padding: var(--breadcrumb-pill-padding);
    background-color: var(--breadcrumb-pill-bg);
    border-radius: 50rem;
    color: var(--breadcrumb-pill-color);
    font-size: var(--breadcrumb-pill-font-size);
    line-height: 1.5;
    text-decoration: none;
    transition: var(--breadcrumb-pill-transition);
}

.c9-breadcrumb__link:hover {
    background-color: var(--breadcrumb-pill-bg-hover);
    color: var(--breadcrumb-pill-color-hover);
    text-decoration: none;
}

.c9-breadcrumb__item--current {
    display: inline-block;
    padding: var(--breadcrumb-pill-padding);
    background-color: var(--breadcrumb-current-bg);
    border-radius: 50rem;
    color: var(--breadcrumb-current-color) !important;
    font-size: var(--breadcrumb-pill-font-size);
    line-height: 1.5;
}

/* ==========================================================================
   Category Header
   ========================================================================== */

/* ==========================================================================
   Catalog Banner (replaces category-header when banners are present)
   ========================================================================== */

.c9-catalog-banner {
    margin-bottom: var(--c9-catalog-gap);
    overflow: hidden;
    /* Gutenberg blocks inside may use full-width alignments; let them escape
       the Bootstrap column gutter so the banner can be truly full-width. */
    margin-left:  calc(-1 * var(--bs-gutter-x, 0px));
    margin-right: calc(-1 * var(--bs-gutter-x, 0px));
}

/* Reset margin for the very first block inside so it sits flush */
.c9-catalog-banner > *:first-child {
    margin-top: 0;
}

.c9-catalog-banner > *:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Category Header (default fallback when no banners match)
   Customisable tokens — override on .c9-category-header in your theme CSS.
   ========================================================================== */

.c9-category-header {
    /* Title */
    --header-title-size:          2rem;
    --header-title-size-mobile:   1.5rem;
    --header-title-weight:        600;
    --header-title-margin-bottom: 0.5rem;
    --header-title-color:         inherit;

    /* Description */
    --header-desc-color:          inherit;
    --header-desc-font-size:      0.95rem;
    --header-desc-line-height:    1.7;
    --header-desc-margin-bottom:  1rem;
    --header-desc-max-width:      none;

    /* Description — paragraphs */
    --header-desc-p-margin-bottom:  0.75rem;
    --header-desc-p-padding-bottom: 0.25rem;

    /* Description — headings (h2, h3, h4) */
    --header-desc-heading-color:  inherit;
    --header-desc-heading-size:   1.1rem;

    /* Description — links */
    --header-desc-link-color:       inherit;
    --header-desc-link-decoration:  underline;

    /* Description mobile collapse */
    --header-desc-collapse-height: 4.5em;
    --header-desc-collapse-fade:   #fff;

    /* Category image (shown when image_url is present) */
    --header-img-max-height:      120px;
    --header-img-border-radius:   var(--c9-card-border-radius);

    margin-bottom: var(--c9-catalog-gap);
}

.c9-category-header__title {
    margin-bottom: var(--header-title-margin-bottom);
    font-size: var(--header-title-size);
    font-weight: var(--header-title-weight);
    color: var(--header-title-color);
}

.c9-category-header__description {
    color: var(--header-desc-color);
    font-size: var(--header-desc-font-size);
    line-height: var(--header-desc-line-height);
    margin-bottom: var(--header-desc-margin-bottom);
    max-width: var(--header-desc-max-width);
}

.c9-category-header__description p {
    margin-bottom: var(--header-desc-p-margin-bottom);
    padding-bottom: var(--header-desc-p-padding-bottom);
}

.c9-category-header__description h2,
.c9-category-header__description h3,
.c9-category-header__description h4 {
    color: var(--header-desc-heading-color);
    font-size: var(--header-desc-heading-size);
}

.c9-category-header__description a {
    color: var(--header-desc-link-color);
    text-decoration: var(--header-desc-link-decoration);
}

.c9-category-header__description > *:last-child {
    margin-bottom: 0;
}

.c9-category-header__img {
    width: 100%;
    max-height: var(--header-img-max-height);
    object-fit: contain;
    border-radius: var(--header-img-border-radius);
}

/* ==========================================================================
   Category Tree (Sidebar)
   Customisable tokens — override on .c9-category-tree in your theme CSS.
   ========================================================================== */

.c9-category-tree {
    /* Header (back-link row) */
    --tree-header-margin-bottom:  1rem;
    --tree-header-padding-bottom: 0.75rem;
    --tree-header-border:         1px solid #dee2e6;

    /* Browse-all / back link */
    --tree-browse-all-color:       var(--bs-primary, #0d6efd);
    --tree-browse-all-color-hover: #0056b3;
    --tree-browse-all-font-size:   0.9375rem;
    --tree-browse-all-font-weight: 500;

    /* Section title ("Categories") */
    --tree-title-font-size:       1rem;
    --tree-title-weight:          600;
    --tree-title-margin-bottom:   1rem;

    /* Scrollable list */
    --tree-list-max-height:       500px;

    /* Category links */
    --tree-link-padding:          0.25rem 0.5rem;
    --tree-link-line-height:      1.3;
    --tree-link-border-radius:    0.25rem;
    --tree-link-bg-hover:         rgba(0, 0, 0, 0.05);

    /* Active category */
    --tree-link-active-bg:        rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
    --tree-link-active-color:     var(--bs-primary, #0d6efd);
    --tree-link-active-weight:    600;

    /* Thumbnail (shown when category thumbs enabled) */
    --tree-thumb-size:            32px;
    --tree-thumb-border-radius:   0.25rem;
    --tree-thumb-margin-right:    0.75rem;

    /* Sub-list (grandchildren) */
    --tree-sub-indent:            1.25rem;
    --tree-sub-font-size:         0.9em;
    --tree-sub-link-padding:      0.2rem 0.5rem;

    /* Compact mode (facets visible) */
    --tree-compact-link-padding:  0.15rem 0.5rem;
    --tree-compact-font-size:     0.9em;

    /* Show-more button */
    --tree-show-more-color:       var(--bs-primary, #0d6efd);
    --tree-show-more-font-size:   0.875rem;

    margin-bottom: var(--c9-catalog-gap);
}

.c9-category-tree__header {
    margin-bottom: var(--tree-header-margin-bottom);
    padding-bottom: var(--tree-header-padding-bottom);
    border-bottom: var(--tree-header-border);
}

.c9-category-tree__browse-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tree-browse-all-color);
    text-decoration: none;
    font-size: var(--tree-browse-all-font-size);
    font-weight: var(--tree-browse-all-font-weight);
    transition: color var(--c9-filter-transition);
}

.c9-category-tree__browse-all:hover {
    color: var(--tree-browse-all-color-hover);
    text-decoration: underline;
}

.c9-category-tree__browse-all svg {
    flex-shrink: 0;
}

.c9-category-tree__title {
    margin-bottom: var(--tree-title-margin-bottom) !important;
    font-size: var(--tree-title-font-size) !important;
    font-weight: var(--tree-title-weight) !important;
}

.c9-category-tree__list {
    margin-bottom: 0;
    list-style: none !important;
    padding-left: 0 !important;
    max-height: var(--tree-list-max-height);
    overflow-y: auto;
}

.c9-category-tree__item {
    margin-bottom: 0;
}

.c9-category-tree__link {
    display: flex;
    align-items: center;
    padding: var(--tree-link-padding);
    line-height: var(--tree-link-line-height);
    color: inherit;
    text-decoration: none;
    border-radius: var(--tree-link-border-radius);
    transition: background-color var(--c9-filter-transition);
}

.c9-category-tree__link:hover {
    background-color: var(--tree-link-bg-hover);
    text-decoration: none;
}

.c9-category-tree__thumb {
    width: var(--tree-thumb-size);
    height: var(--tree-thumb-size);
    object-fit: cover;
    border-radius: var(--tree-thumb-border-radius);
    margin-right: var(--tree-thumb-margin-right);
}

.c9-category-tree__name {
    flex: 1;
}

.c9-category-tree__count {
    margin-left: auto;
}

/* Active: shown as a non-linked span, highlighted */
.c9-category-tree__link--active {
    background-color: var(--tree-link-active-bg);
    color: var(--tree-link-active-color);
    font-weight: var(--tree-link-active-weight);
    cursor: default;
}

/* Ancestor: expanded branch header — subtle bold */
.c9-category-tree__link--ancestor {
    font-weight: var(--tree-link-active-weight);
    color: inherit;
}

.c9-category-tree__link--ancestor:hover {
    background-color: var(--tree-link-bg-hover);
}

/* Sub-list (children of active/ancestor item) */
.c9-category-tree__sub-list {
    margin: 0;
    padding-left: var(--tree-sub-indent) !important;
    list-style: none !important;
}

.c9-category-tree__link--sub {
    font-size: var(--tree-sub-font-size);
    padding: var(--tree-sub-link-padding);
}

/* Show-all mode: remove the max-height scroll constraint */
.c9-category-tree--show-all .c9-category-tree__list {
    max-height: none;
    overflow-y: visible;
}

/* Compact mode (facets visible): hide thumbnails, tighter spacing */
.c9-category-tree--compact .c9-category-tree__thumb {
    display: none;
}

.c9-category-tree--compact .c9-category-tree__link {
    padding: var(--tree-compact-link-padding);
    font-size: var(--tree-compact-font-size);
}

/* Show-more toggle button */
.c9-category-tree__show-more {
    color: var(--tree-show-more-color);
    text-decoration: none;
    font-size: var(--tree-show-more-font-size);
}

.c9-category-tree__show-more:hover {
    text-decoration: underline;
}

/* Hidden items (beyond limit, before "show more" is clicked) */
.c9-category-tree__item--hidden {
    display: none;
}

/* ==========================================================================
   Bootstrap Collapse Utility (needed for accordion functionality)
   ========================================================================== */

.collapse:not(.show) {
    display: none;
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

/* ==========================================================================
   Facets (Filters)
   Customisable tokens — override on .c9-facets in your theme CSS.
   ========================================================================== */

.c9-facets {
    /* Section title ("Filter By") */
    --facets-title-font-size:      1rem;
    --facets-title-weight:         600;
    --facets-title-margin-bottom:  0.5rem;

    /* Facet group (each attribute block) */
    --facets-group-margin-bottom:  0.875rem;
    --facets-group-padding-bottom: 0.875rem;
    --facets-group-border:         1px solid #e0e0e0;

    /* Facet group title (attribute name — uppercase by default) */
    --facets-group-title-font-size:     0.8125rem;
    --facets-group-title-weight:        600;
    --facets-group-title-text-transform: uppercase;
    --facets-group-title-letter-spacing: 0.025em;

    /* Clear link */
    --facets-clear-font-size:  0.75rem;
    --facets-clear-color:      var(--bs-primary, #0d6efd);

    /* Value items */
    --facets-value-margin-bottom: 0.25rem;
    --facets-value-font-size:     0.8125rem;
    --facets-value-padding:       0.125rem 0;
    --facets-value-color-hover:   var(--bs-primary, #0d6efd);
    --facets-value-active-weight: 500;

    /* Unavailable values */
    --facets-unavailable-color:      #bbb;
    --facets-unavailable-checkbox-border: #ddd;
    --facets-unavailable-checkbox-bg:     #f8f8f8;

    /* Checkbox */
    --facets-checkbox-size:          16px;
    --facets-checkbox-border:        1px solid #888;
    --facets-checkbox-border-radius: 2px;
    --facets-checkbox-margin-right:  0.5rem;
    --facets-checkbox-checked-bg:    var(--bs-primary, #0d6efd);
    --facets-checkbox-checked-color: #fff;

    /* Value count "(12)" */
    --facets-count-color:       #767676;
    --facets-count-margin-left: 0.25rem;

    /* See more / See fewer buttons */
    --facets-see-more-font-size:    0.8125rem;
    --facets-see-more-color:        var(--bs-primary, #0d6efd);
    --facets-see-more-color-hover:  #0056b3;
    --facets-see-more-border:       1px solid #e0e0e0;

    margin-bottom: var(--c9-catalog-gap);
}

.c9-facets__title {
    margin-bottom: var(--facets-title-margin-bottom) !important;
    font-size: var(--facets-title-font-size) !important;
    font-weight: var(--facets-title-weight) !important;
}

.c9-facets__group {
    margin-bottom: var(--facets-group-margin-bottom);
    padding-bottom: var(--facets-group-padding-bottom);
    border-bottom: var(--facets-group-border);
}

.c9-facets__group:last-of-type {
    border-bottom: none;
}

.c9-facets__group--hidden {
    display: none;
}

.c9-facets__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.c9-facets__group-title {
    font-size: var(--facets-group-title-font-size);
    font-weight: var(--facets-group-title-weight);
    margin: 0;
    text-transform: var(--facets-group-title-text-transform);
    letter-spacing: var(--facets-group-title-letter-spacing);
}

.c9-facets__clear-link {
    font-size: var(--facets-clear-font-size);
    color: var(--facets-clear-color);
    text-decoration: none;
}

.c9-facets__clear-link:hover {
    text-decoration: underline;
}

.c9-facets__values {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0;
}

.c9-facets__value {
    margin-bottom: var(--facets-value-margin-bottom);
}

.c9-facets__value:last-child {
    margin-bottom: 0;
}

.c9-facets__value--hidden {
    display: none;
}

.c9-facets__value-link {
    display: flex;
    align-items: center;
    padding: var(--facets-value-padding);
    color: inherit;
    text-decoration: none;
    font-size: var(--facets-value-font-size);
    transition: color var(--c9-filter-transition);
}

.c9-facets__value-link:hover {
    color: var(--facets-value-color-hover);
    text-decoration: none;
}

.c9-facets__value-link--active {
    font-weight: var(--facets-value-active-weight);
}

.c9-facets__value-link--unavailable {
    color: var(--facets-unavailable-color);
    cursor: not-allowed;
    pointer-events: none;
}

.c9-facets__value-link--unavailable .c9-facets__checkbox {
    border-color: var(--facets-unavailable-checkbox-border);
    background: var(--facets-unavailable-checkbox-bg);
}

.c9-facets__checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--facets-checkbox-size);
    height: var(--facets-checkbox-size);
    border: var(--facets-checkbox-border);
    border-radius: var(--facets-checkbox-border-radius);
    margin-right: var(--facets-checkbox-margin-right);
    flex-shrink: 0;
}

.c9-facets__checkbox--checked {
    background-color: var(--facets-checkbox-checked-bg);
    border-color: var(--facets-checkbox-checked-bg);
    color: var(--facets-checkbox-checked-color);
}

.c9-facets__checkbox--checked svg {
    width: 12px;
    height: 12px;
}

.c9-facets__value-text {
    flex: 1;
    min-width: 0;
}

.c9-facets__value-count {
    color: var(--facets-count-color);
    font-size: var(--facets-value-font-size);
    margin-left: var(--facets-count-margin-left);
}

.c9-facets__see-more,
.c9-facets__see-more-values {
    display: block;
    width: 100%;
    padding: 0.375rem 0;
    background: none;
    border: none;
    color: var(--facets-see-more-color);
    font-size: var(--facets-see-more-font-size);
    text-align: left;
    cursor: pointer;
    transition: color var(--c9-filter-transition);
}

.c9-facets__see-more:hover,
.c9-facets__see-more-values:hover {
    color: var(--facets-see-more-color-hover);
    text-decoration: underline;
}

.c9-facets__see-more {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: var(--facets-see-more-border);
}

/* Range filter (continuous min/max inputs)
   ---------------------------------------- */

.c9-facets__range-form {
    /* Tokens — override on .c9-facets in your theme CSS */
    --range-input-width: 5rem;
    --range-gap:         0.375rem;
    --range-sep-color:   #6c757d;
    --range-hint-color:  #6c757d;
    --range-hint-size:   0.75rem;
}

.c9-facets__range-inputs {
    display: flex;
    align-items: center;
    gap: var(--range-gap);
}

.c9-facets__range-inputs .c9-facets__range-min,
.c9-facets__range-inputs .c9-facets__range-max {
    width: var(--range-input-width);
    min-width: 0;
    /* Remove browser spinner arrows */
    -moz-appearance: textfield;
}

.c9-facets__range-inputs .c9-facets__range-min::-webkit-outer-spin-button,
.c9-facets__range-inputs .c9-facets__range-min::-webkit-inner-spin-button,
.c9-facets__range-inputs .c9-facets__range-max::-webkit-outer-spin-button,
.c9-facets__range-inputs .c9-facets__range-max::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.c9-facets__range-sep {
    color: var(--range-sep-color);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.c9-facets__range-hint {
    margin: 0.375rem 0 0;
    font-size: var(--range-hint-size);
    color: var(--range-hint-color);
}

/* ==========================================================================
   Toolbar (Active Filters + Sort)
   Customisable tokens — override on .c9-catalog__toolbar in your theme CSS.
   ========================================================================== */

.c9-catalog__toolbar {
    /* Container */
    --toolbar-padding:        0.5rem;
    --toolbar-bg:             #f8f9fa;
    --toolbar-border-radius:  var(--c9-card-border-radius);

    /* Active filter tags */
    --toolbar-tag-bg:             var(--bs-primary, #0d6efd);
    --toolbar-tag-color:          #fff;
    --toolbar-tag-padding:        0.35em 0.75em;
    --toolbar-tag-font-size:      0.875rem;
    --toolbar-tag-weight:         400;
    --toolbar-tag-opacity-hover:  0.85;

    /* "Active filters:" label */
    --toolbar-label-font-size:    0.875rem;
    --toolbar-label-color:        #6c757d;

    /* "Clear all" link */
    --toolbar-clear-font-size:    0.875rem;

    /* Sort label */
    --toolbar-sort-label-weight:  500;

    /* Sort select */
    --toolbar-sort-min-width:     180px;

    padding: var(--toolbar-padding);
    background-color: var(--toolbar-bg);
    border-radius: var(--toolbar-border-radius);
}

/* ==========================================================================
   Active Filters
   ========================================================================== */

.c9-active-filters__label {
    font-size: var(--toolbar-label-font-size);
    color: var(--toolbar-label-color);
}

.c9-active-filters__tag {
    display: inline-flex;
    align-items: center;
    padding: var(--toolbar-tag-padding) !important;
    background-color: var(--toolbar-tag-bg) !important;
    color: var(--toolbar-tag-color) !important;
    font-size: var(--toolbar-tag-font-size);
    font-weight: var(--toolbar-tag-weight);
    cursor: pointer;
    transition: opacity var(--c9-filter-transition);
}

.c9-active-filters__tag:hover {
    opacity: var(--toolbar-tag-opacity-hover);
    color: #fff;
}

.c9-active-filters__clear {
    font-size: var(--toolbar-clear-font-size);
}

/* ==========================================================================
   Sort Dropdown
   ========================================================================== */

.c9-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.c9-sort__label {
    margin-bottom: 0;
    font-weight: var(--toolbar-sort-label-weight);
}

.c9-sort__select {
    min-width: var(--toolbar-sort-min-width);
    width: auto;
}

/* ==========================================================================
   Category Grid
   ========================================================================== */

/* ==========================================================================
   Category Grid & Header
   Customisable tokens — override on .c9-category-grid in your theme CSS.
   ========================================================================== */

.c9-category-grid {
    /* "Browse Categories" / "Browse Subcategories" header */
    --cat-grid-title-font-size:       2rem;
    --cat-grid-title-weight:          600;
    --cat-grid-title-margin-bottom:   0.5rem;
    --cat-grid-title-color:           inherit;
    --cat-grid-subtitle-font-size:    1.125rem;
    --cat-grid-subtitle-color:        #6c757d;

    /* Subcategory section heading ("This category contains the following subcategories:") */
    --cat-grid-subheading-font-size:   0.9375rem;
    --cat-grid-subheading-weight:      600;
    --cat-grid-subheading-color:       inherit;
    --cat-grid-subheading-margin-bottom: 1rem;

    margin-bottom: var(--c9-catalog-gap);
}

.c9-catalog__header {
    text-align: center;
}

.c9-subcategory-grid__heading {
    font-size: var(--cat-grid-subheading-font-size) !important;
    font-weight: var(--cat-grid-subheading-weight) !important;
    color: var(--cat-grid-subheading-color) !important;
    margin-bottom: var(--cat-grid-subheading-margin-bottom) !important;
}

.c9-catalog__title {
    margin-bottom: var(--cat-grid-title-margin-bottom) !important;
    font-size: var(--cat-grid-title-font-size) !important;
    font-weight: var(--cat-grid-title-weight) !important;
    color: var(--cat-grid-title-color) !important;
}

.c9-catalog__subtitle {
    font-size: var(--cat-grid-subtitle-font-size);
    color: var(--cat-grid-subtitle-color);
}

/* ==========================================================================
   Category Card
   Customisable tokens — override on .c9-category-card in your theme CSS.
   ========================================================================== */

.c9-category-card {
    /* Container */
    --cat-card-border-radius:     var(--c9-card-border-radius);
    --cat-card-hover-shadow:      0 0.5rem 1rem rgba(0, 0, 0, 0.10);
    --cat-card-hover-lift:        translateY(-2px);

    /* Image */
    --cat-card-image-padding:     0.375rem;
    --cat-card-image-bg:          #f8f9fa;
    --cat-card-image-hover-scale: scale(1.05);

    /* Body */
    --cat-card-body-padding:      1.25rem;

    /* Title */
    --cat-card-title-font-size:        1rem;
    --cat-card-title-weight:           600;
    --cat-card-title-margin-bottom:    0.5rem;
    --cat-card-title-color-hover:      var(--bs-primary, #0d6efd);

    /* Item count */
    --cat-card-count-font-size:   0.875rem;
    --cat-card-count-color:       #6c757d;

    border-radius: var(--cat-card-border-radius);
    transition: box-shadow var(--c9-filter-transition), transform var(--c9-filter-transition);
}

.c9-category-card:hover {
    box-shadow: var(--cat-card-hover-shadow);
    transform: var(--cat-card-hover-lift);
}

.c9-category-card__image-link {
    display: block;
    overflow: hidden;
    border-radius: var(--cat-card-border-radius) var(--cat-card-border-radius) 0 0;
    padding: var(--cat-card-image-padding);
}

.c9-category-card__image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--cat-card-image-bg);
    transition: transform 0.3s ease;
}

.c9-category-card:hover .c9-category-card__image {
    transform: var(--cat-card-image-hover-scale);
}

.c9-category-card__body {
    padding: var(--cat-card-body-padding);
}

.c9-category-card__title {
    font-size: var(--cat-card-title-font-size) !important;
    font-weight: var(--cat-card-title-weight) !important;
    margin-bottom: var(--cat-card-title-margin-bottom) !important;
}

.c9-category-card__title-link {
    color: inherit;
    text-decoration: none;
}

.c9-category-card__title-link:hover {
    color: var(--cat-card-title-color-hover);
    text-decoration: none;
}

.c9-category-card__count {
    font-size: var(--cat-card-count-font-size);
    color: var(--cat-card-count-color);
}

/* ==========================================================================
   Items Grid
   ========================================================================== */

.c9-items-grid {
    margin-bottom: var(--c9-catalog-gap);
}

/* ==========================================================================
   Item Card
   ========================================================================== */

/* ==========================================================================
   Item Card
   Customisable tokens — override on .c9-item-card in your theme CSS.
   ========================================================================== */

.c9-item-card {
    /* Card container */
    --card-border-radius:     var(--c9-card-border-radius);
    --card-hover-shadow:      0 0.5rem 1rem rgba(0, 0, 0, 0.10);
    --card-hover-lift:        translateY(-2px);

    /* Image */
    --card-image-padding:     0.375rem;
    --card-image-bg:          #f8f9fa;
    --card-image-hover-scale: scale(1.05);

    /* Title */
    --card-title-font-size:        1rem;
    --card-title-font-size-mobile: 0.9375rem;
    --card-title-weight:           500;
    --card-title-line-height:      1.3;
    --card-title-margin-bottom:    0.25rem;
    --card-title-line-clamp:       3;
    --card-title-color-hover:      var(--bs-primary, #0d6efd);

    /* SKU */
    --card-sku-font-size:       0.8125rem;
    --card-sku-margin-bottom:   0.5rem;
    --card-sku-underline-color: rgba(0, 0, 0, 0.20);
    --card-sku-color-hover:     var(--bs-secondary, #F95E01);

    /* Short description */
    --card-desc-color:       #6c757d;
    --card-desc-line-clamp:  2;

    /* Price block */
    --card-price-padding-top:              0.5rem;
    --card-price-original-font-size:       0.875rem;
    --card-price-current-font-size:        1.125rem;
    --card-price-current-font-size-mobile: 1rem;
    --card-uom-font-size:                  0.75rem;

    /* Footer */
    --card-footer-border: 1px solid rgba(0, 0, 0, 0.05);

    /* Extra fields */
    --card-fields-font-size:    0.8125rem;
    --card-fields-margin-top:   0.5rem;
    --card-field-gap:           0.25rem;
    --card-field-margin-bottom: 0.125rem;
    --card-field-label-color:   #6c757d;
    --card-field-value-weight:  500;

    border-radius: var(--card-border-radius);
    transition: box-shadow var(--c9-filter-transition), transform var(--c9-filter-transition);
}

.c9-item-card:hover {
    box-shadow: var(--card-hover-shadow);
    transform: var(--card-hover-lift);
}

.c9-item-card__image-link {
    display: block;
    overflow: hidden;
    border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
    padding: var(--card-image-padding);
}

.c9-item-card__image {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: var(--card-image-bg);
    transition: transform 0.3s ease;
}

.c9-item-card:hover .c9-item-card__image {
    transform: var(--card-image-hover-scale);
}

.c9-item-card__body {
    display: flex;
    flex-direction: column;
}

.c9-item-card__title {
    font-size: var(--card-title-font-size) !important;
    font-weight: var(--card-title-weight) !important;
    line-height: var(--card-title-line-height) !important;
    margin-bottom: var(--card-title-margin-bottom) !important;
    display: -webkit-box;
    -webkit-line-clamp: var(--card-title-line-clamp);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.c9-item-card__title-link {
    color: inherit;
    text-decoration: none;
}

.c9-item-card__title-link:hover {
    color: var(--card-title-color-hover);
    text-decoration: none;
}

.c9-item-card__sku {
    font-size: var(--card-sku-font-size);
    margin-bottom: var(--card-sku-margin-bottom);
}

.c9-item-card__sku-link {
    text-decoration: underline;
    text-decoration-color: var(--card-sku-underline-color);
    transition: color 0.15s, text-decoration-color 0.15s;
}

.c9-item-card__sku-link:hover {
    color: var(--card-sku-color-hover) !important;
    text-decoration-color: var(--card-sku-color-hover);
}

.c9-item-card__description {
    flex: 1;
    color: var(--card-desc-color);
    display: -webkit-box;
    -webkit-line-clamp: var(--card-desc-line-clamp);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.c9-item-card__price {
    margin-top: auto;
    padding-top: var(--card-price-padding-top);
}

.c9-item-card__price-original {
    font-size: var(--card-price-original-font-size);
    margin-right: 0.25rem;
}

.c9-item-card__price-current {
    font-size: var(--card-price-current-font-size);
}

.c9-item-card__uom {
    font-size: var(--card-uom-font-size);
}

.c9-item-card__footer {
    border-top: var(--card-footer-border);
}

.c9-item-card__footer a.btn:hover {
    color: #fff !important;
}

.c9-item-card__atc-group {
    width: var(--card-atc-group-width) !important;
}

.c9-item-card__atc-qty {
    width: var(--card-atc-qty-width) !important;
    flex: 0 0 var(--card-atc-qty-width) !important;
    border-color: var(--card-atc-qty-border) !important;
}

/* ==========================================================================
   Pagination
   Customisable tokens — override on .c9-pagination in your theme CSS.
   Bootstrap's pagination colours are driven by --bs-pagination-* variables.
   We map our tokens onto those so Bootstrap's engine picks them up with no
   !important needed.
   ========================================================================== */

.c9-pagination {
    /* Container */
    --pagination-border:           1px solid #dee2e6;
    --pagination-padding-top:      var(--c9-catalog-gap);

    /* "Page X of Y (N items)" info line */
    --pagination-info-font-size:   0.875rem;
    --pagination-info-color:       #6c757d;

    /* Page links — default state */
    --pagination-link-color:       var(--bs-primary, #0d6efd);
    --pagination-link-bg:          #fff;
    --pagination-link-border:      #dee2e6;
    --pagination-link-font-size:   inherit;
    --pagination-link-padding-x:   0.75rem;
    --pagination-link-padding-y:   0.375rem;

    /* Page links — hover */
    --pagination-link-color-hover:  var(--bs-primary, #0d6efd);
    --pagination-link-bg-hover:     #e9ecef;
    --pagination-link-border-hover: #dee2e6;

    /* Active page */
    --pagination-active-color:     #fff;
    --pagination-active-bg:        var(--bs-primary, #0d6efd);
    --pagination-active-border:    var(--bs-primary, #0d6efd);

    /* Disabled (prev/next when at first/last page) */
    --pagination-disabled-color:   #6c757d;
    --pagination-disabled-bg:      #fff;
    --pagination-disabled-border:  #dee2e6;

    /* Map onto Bootstrap's own pagination variables */
    --bs-pagination-color:                var(--pagination-link-color);
    --bs-pagination-bg:                   var(--pagination-link-bg);
    --bs-pagination-border-color:         var(--pagination-link-border);
    --bs-pagination-font-size:            var(--pagination-link-font-size);
    --bs-pagination-padding-x:            var(--pagination-link-padding-x);
    --bs-pagination-padding-y:            var(--pagination-link-padding-y);
    --bs-pagination-hover-color:          var(--pagination-link-color-hover);
    --bs-pagination-hover-bg:             var(--pagination-link-bg-hover);
    --bs-pagination-hover-border-color:   var(--pagination-link-border-hover);
    --bs-pagination-active-color:         var(--pagination-active-color);
    --bs-pagination-active-bg:            var(--pagination-active-bg);
    --bs-pagination-active-border-color:  var(--pagination-active-border);
    --bs-pagination-disabled-color:       var(--pagination-disabled-color);
    --bs-pagination-disabled-bg:          var(--pagination-disabled-bg);
    --bs-pagination-disabled-border-color: var(--pagination-disabled-border);

    padding-top: var(--pagination-padding-top);
    border-top: var(--pagination-border);
}

.c9-pagination__info {
    text-align: center;
    font-size: var(--pagination-info-font-size);
    color: var(--pagination-info-color);
}

/* ==========================================================================
   No Results
   ========================================================================== */

.c9-no-results {
    padding: 3rem 1rem;
}

.c9-no-results__icon {
    opacity: 0.5;
}

/* ==========================================================================
   Error Page
   ========================================================================== */

.c9-catalog-error {
    padding: 3rem 1rem;
}

.c9-catalog-error__icon {
    opacity: 0.7;
}

.c9-catalog-error__debug {
    font-family: monospace;
    border-radius: var(--c9-card-border-radius);
    max-height: 200px;
    overflow-y: auto;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 991.98px) {
    .c9-catalog__sidebar {
        order: 2;
    }

    .c9-catalog__main {
        order: 1;
    }

    .c9-category-tree {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .c9-catalog__toolbar {
        padding: 0.5rem 0.75rem;
    }

    .c9-catalog__toolbar-filters {
        flex-basis: 100%;
    }

    .c9-sort__select {
        flex: 1;
        min-width: 0;
    }

    .c9-category-header__title {
        font-size: var(--header-title-size-mobile);
    }

    .c9-category-header__description--collapsed {
        max-height: var(--header-desc-collapse-height);
        overflow: hidden;
        position: relative;
    }

    .c9-category-header__description--collapsed::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1.75em;
        background: linear-gradient(to bottom, transparent, var(--header-desc-collapse-fade));
        pointer-events: none;
    }

    .c9-category-hero__body--collapsed {
        max-height: var(--hero-body-collapse-height, 4.5em); /* ~3 lines */
        overflow: hidden;
        position: relative;
    }

    .c9-category-hero__body--collapsed::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1.75em;
        background: linear-gradient(to bottom, transparent, var(--hero-body-collapse-fade, #fff));
        pointer-events: none;
    }

    .c9-description-toggle {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.875rem;
    }

    .c9-item-card__title {
        font-size: var(--card-title-font-size-mobile);
    }

    .c9-item-card__price-current {
        font-size: var(--card-price-current-font-size-mobile);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .c9-catalog__sidebar,
    .c9-catalog__toolbar,
    .c9-pagination,
    .c9-item-card__footer {
        display: none !important;
    }

    .c9-catalog__main {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .c9-item-card {
        break-inside: avoid;
        box-shadow: none !important;
    }
}

/* ==========================================================================
   View Toggle
   ========================================================================== */

.c9-view-toggle {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.c9-view-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
    color: #6c757d;
    text-decoration: none;
    transition: color 0.15s, background-color 0.15s;
}

.c9-view-toggle__btn:hover {
    color: #212529;
    background-color: #e9ecef;
}

.c9-view-toggle__btn.is-active {
    color: #0d6efd;
    background-color: #e7f1ff;
}

/* ==========================================================================
   Item Card Extra Fields
   ========================================================================== */

.c9-item-card__fields {
    list-style: none;
    padding: 0;
    margin: var(--card-fields-margin-top) 0 0;
    font-size: var(--card-fields-font-size);
}

.c9-item-card__field {
    display: flex;
    gap: var(--card-field-gap);
    flex-wrap: wrap;
    margin-bottom: var(--card-field-margin-bottom);
}

.c9-item-card__field-label {
    color: var(--card-field-label-color);
}

.c9-item-card__field-value {
    font-weight: var(--card-field-value-weight);
}

/* ==========================================================================
   Items List (Table View)
   ========================================================================== */

.c9-items-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.c9-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.c9-items-table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    padding: 0.75rem 0.5rem !important;
    text-align: left;
    font-weight: 600 !important;
    white-space: nowrap;
}

.c9-items-table__row {
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.1s;
}

.c9-items-table__row:hover {
    background-color: #f8f9fa;
}

.c9-items-table__cell {
    padding: 0.625rem 0.5rem;
    vertical-align: middle;
}

.c9-items-table__col-image {
    width: 76px;
}

.c9-items-table__col-item {
    width: 100px;
    white-space: nowrap;
}

.c9-items-table__col-name {
    min-width: 180px;
}

.c9-items-table__col-price {
    white-space: nowrap;
}

.c9-items-table__col-actions {
    white-space: nowrap;
    width: 1%;
}

/* Higher specificity (0,2,0) to beat Divi's .entry-content tr td (0,1,2) */
.c9-items-table .c9-items-table__cell {
    padding: 0.5rem 0.625rem;
}

/* Force Bootstrap input-group flex behaviour inside table cells — Divi resets
   flex-wrap to wrap on descendants of .entry-content td */
.c9-items-table .c9-items-table__cell--actions .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
}

/* Image cell: minimal horizontal padding so 64px image fits in 76px column */
.c9-items-table .c9-items-table__cell--image {
    padding-left: 4px;
    padding-right: 4px;
}

/* Image link — signals clickability */
.c9-items-table__img-link {
    display: inline-block;
}

.c9-items-table__thumb {
    display: block;
    width: 64px;
    height: 64px;
    max-width: none;
    object-fit: contain;
    border-radius: 0.25rem;
    transition: opacity 0.15s, transform 0.15s;
}

.c9-items-table__img-link:hover .c9-items-table__thumb {
    opacity: 0.8;
    transform: scale(1.06);
}

/* Item number link */
.c9-items-table__sku-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.25);
    font-weight: 600;
    transition: color 0.15s, text-decoration-color 0.15s;
}

.c9-items-table__sku-link:hover {
    color: var(--bs-secondary, #F95E01);
    text-decoration-color: var(--bs-secondary, #F95E01);
}

/* Name link */
.c9-items-table__name-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.25);
    font-weight: 500;
    transition: color 0.15s, text-decoration-color 0.15s;
}

.c9-items-table__name-link:hover {
    color: var(--bs-secondary, #F95E01);
    text-decoration-color: var(--bs-secondary, #F95E01);
}

/* Mobile-only SKU shown inside the name cell when item# column is hidden */
.c9-items-table__sku-mobile {
    display: block;
    color: #6c757d;
    font-size: 0.8rem;
    margin-top: 0.2rem;
    font-weight: 400;
    text-decoration: none;
}

/* Sticky actions column */
.c9-col--sticky-right {
    position: sticky;
    right: 0;
    background-color: #fff;
    z-index: 1;
}

.c9-items-table__row:hover .c9-col--sticky-right {
    background-color: #f8f9fa;
}

.c9-items-table thead .c9-col--sticky-right {
    background-color: #f8f9fa;
}

/* Sticky price column - right offset set by JS to sit just left of actions */
.c9-col--sticky-price {
    position: sticky;
    right: 0; /* JS overrides this once actions column width is known */
    background-color: #fff;
    z-index: 1;
}

.c9-items-table__row:hover .c9-col--sticky-price {
    background-color: #f8f9fa;
}

.c9-items-table thead .c9-col--sticky-price {
    background-color: #f8f9fa;
}

/* Shadow marks the left boundary of the sticky zone (price column) */
.c9-items-list--scrollable .c9-col--sticky-price {
    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.08);
}

/* Responsive column priority classes */
@media (max-width: 575.98px) {
    .c9-col--sm-up {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .c9-col--md-up {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .c9-col--lg-up {
        display: none;
    }
}

/* ==========================================================================
   Category Hero
   Customisable tokens — override on .c9-category-hero in your theme CSS.
   ========================================================================== */

.c9-category-hero {
    /* --- Image panel --- */
    --hero-min-height:        320px;
    --hero-border-radius:     var(--c9-card-border-radius);

    /* Gradient overlay: left-to-right, heavier on the left where title sits */
    --hero-overlay-start:     rgba(0, 0, 0, 0.60);
    --hero-overlay-mid:       rgba(0, 0, 0, 0.30);
    --hero-overlay-end:       rgba(0, 0, 0, 0.00);

    /* Title */
    --hero-title-width:       40%;   /* constraint on desktop */
    --hero-title-color:       #fff;
    --hero-title-size:        2rem;
    --hero-title-weight:      700;
    --hero-title-shadow:      0 1px 4px rgba(0, 0, 0, 0.45);

    /* --- Body panel (description below image) --- */
    --hero-body-padding:        1.25rem 0;
    --hero-body-font-size:      0.95rem;
    --hero-body-line-height:    1.7;
    --hero-body-color:          inherit;
    --hero-body-bg:             transparent;
    --hero-body-max-width:      none;

    /* Paragraph spacing */
    --hero-body-p-margin-bottom:  0.75rem;
    --hero-body-p-padding-bottom: 0.25rem;

    /* Headings inside description (h2, h3, etc.) */
    --hero-body-heading-color:  inherit;
    --hero-body-heading-size:   1.1rem;

    /* Links inside description */
    --hero-body-link-color:       inherit;
    --hero-body-link-decoration:  underline;

    margin-bottom: var(--c9-catalog-gap);
}

/* Image panel */
.c9-category-hero__image {
    position: relative;
    width: 100%;
    min-height: var(--hero-min-height);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--hero-border-radius);
    overflow: hidden;
}

/* Gradient overlay — sits above the image, below the title */
.c9-category-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--hero-overlay-start) 0%,
        var(--hero-overlay-mid)   45%,
        var(--hero-overlay-end)   100%
    );
    display: flex;
    align-items: flex-end;
    padding: 2rem;
}

.c9-category-hero__title {
    width: var(--hero-title-width);
    margin: 0;
    color: var(--hero-title-color);
    font-size: var(--hero-title-size);
    font-weight: var(--hero-title-weight);
    line-height: 1.2;
    text-shadow: var(--hero-title-shadow);
}

/* Description panel — below the image */
.c9-category-hero__body {
    padding: var(--hero-body-padding);
    font-size: var(--hero-body-font-size);
    line-height: var(--hero-body-line-height);
    color: var(--hero-body-color);
    background: var(--hero-body-bg);
    max-width: var(--hero-body-max-width);
}

.c9-category-hero__body p {
    margin-bottom: var(--hero-body-p-margin-bottom);
    padding-bottom: var(--hero-body-p-padding-bottom);
}

.c9-category-hero__body h2,
.c9-category-hero__body h3,
.c9-category-hero__body h4 {
    color: var(--hero-body-heading-color);
    font-size: var(--hero-body-heading-size);
}

.c9-category-hero__body a {
    color: var(--hero-body-link-color);
    text-decoration: var(--hero-body-link-decoration);
}

.c9-category-hero__body > *:last-child {
    margin-bottom: 0;
}

/* Tablet: widen the title */
@media (max-width: 991.98px) {
    .c9-category-hero__title {
        width: 60%;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .c9-category-hero {
        --hero-min-height:  220px;
        --hero-title-size:  1.5rem;
        --hero-title-width: 100%;
    }

    .c9-category-hero__overlay {
        /* Switch to a bottom-up gradient so title reads cleanly at smaller sizes */
        background: linear-gradient(
            to top,
            var(--hero-overlay-start) 0%,
            var(--hero-overlay-end)   100%
        );
        padding: 1.25rem 1rem;
    }
}

@media (max-width: 1199.98px) {
    .c9-col--xl-up {
        display: none;
    }
}