/* ==========================================================================
   KINO FLO — house shapes
   Buttons and pill-shaped controls are pills; cards, images and thumbnails are square. Measured
   from .uk-button and .uk-card on the live site. The values below arrived with the LynTec port
   (4px / 6px / 16px corners) and are corrected here. Progress bars and checkbox corners keep their
   small radii — those are not buttons.
   ========================================================================== */
.content-grid {
    width: 100%;
}
.content-grid__item {
    display: flex;
}
a.content-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.content-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* gap: 0.5rem; */
    text-align: center;
}
.content-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 180px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.content-card__image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}
.content-meta {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 9;
}
.content-card__badge {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
}
.content-card__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.content-card__badge.uk-badge {
    text-transform: uppercase;
    border-radius: 0;
}
.content-card__title {
    /* font-size: 1rem; */
    /* text-transform: uppercase; */
}
.content-card__description {
    /* color: #666; */
}
a.content-card:hover .content-card__title {
    /* color:#333; */
    /* text-decoration: underline; */
}
.content-card__media {
    overflow: hidden;
}
.content-card__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
.filter-content ul.filter-list {
    list-style: none;
    padding: 0;
    margin:0;
}
.filter-content ul.filter-sublist {
    list-style: none;
    padding-left: 10px;
}
.dismiss-pill {
    border:none;
    background:transparent;
    color: black;
    padding:0;
    margin-left:2px;
}
span.filter-pill {
    background: #fff;
    padding: 1rem;
    color: black;
    display: flex;
    flex-direction: row;
    align-items:center;
    gap: 5px;
    border: 1px solid #fff;
}
span.filter-pill:hover {
    cursor: pointer;
    background: none;
    border: 1px solid #333;
    color: white;
}

span.filter-pill:hover .dismiss-pill {
    color: white;
}
.search-pill span.search-term,
.filter-pill span.filter-term {
    line-height: 1;
}
.dismiss-pill:hover {
    cursor: pointer;
}
.search-pill .uk-icon>svg {
    max-height: 15px;
    max-width: 15px;
}
div#content-active-filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
}
#content-reset-filters {
    border:none;   
    color: white;
}
#content-reset-filters:hover {
    cursor: pointer;
}
#content-autocomplete-results {
    position: absolute;
    background-color: #333333;
    border: 1px solid #1A1A1A;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    z-index: 1000;
	width: 100%;
    left:0;
    right:0;
	max-height: 320px;
	overflow-y: auto;
	display: none;
    margin-left: auto;
    margin-right: auto;
    padding: 4px 0;
}
.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #1A1A1A;
    transition: background-color 0.2s ease;
}
.autocomplete-item:last-child {
    border-bottom: none;
}
.autocomplete-item:hover,
.autocomplete-item:focus {
    background-color: #1a1a1a;
    outline: none;
}
.autocomplete-item:focus {
    box-shadow: inset 0 0 0 2px rgba(6, 1, 61, 0.25);
}
.autocomplete-item-thumb {
    width: 48px;
    height: 48px;
    border-radius: 0;
    overflow: hidden;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.autocomplete-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.autocomplete-item-thumb-placeholder {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.autocomplete-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.autocomplete-item-title {
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.autocomplete-item-meta {
    font-size: 11px;
    color: #6b6b6b;
    margin-top: 2px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.filter-label:hover {
    cursor: pointer;
}
.filter-group {
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
.filter-group:last-of-type {
    border-bottom:none;
}
.hide-filter .filter-content {
    display: none;
}
/* All images need to be square PNGs with transparent backgrounds */
/* Otherwise remove this piece of code */
a.content-card:hover .uk-card {
    /* background:#f2f2f2; */
}


@media screen and (min-width:960px) {
    /* button#filter-content {
        display:none;
    } */
    .uk-search-default {
        width:100%!important;
    }
}
@media screen and (max-width:959px) {
    /* button#filter-content {
       padding: 0;
       border: none;
       background: none;
       color:#2c2c2c;
       cursor:pointer;
       font-size:16px;
       font-family: 'Nunito Sans', sans-serif
   }   
   button#filter-content:hover {
       opacity:0.75;
   } */
   /* .filter-group {
       display: none;
   } */
   div#filters > div {
       border-bottom: 1px solid #f2f2f2;
       padding-bottom: 1rem;
   }
   .filter-group:last-of-type {
       padding-bottom:0;
   }
   #filters .uk-search-default {
       width:auto;
   }
}

.woocommerce-ordering, .woocommerce-result-count {
    margin: 0!important;
}

/*  */
#content-filters {
    min-width:350px;
}
/* body.woocommerce-shop .tm-header {
    z-index: 98;
}
body.woocommerce-shop .tm-page {
    z-index: 99;
} */
body.uk-offcanvas-container .tm-page {
    z-index: 999;
}
#content-search > .uk-container {
    max-width: 400px;
    background: #272727;
    padding: 2rem;
    position: relative;
}
#content-search .uk-search input {
    background: #333333;
    border-color: #1A1A1A;
    padding-top: 1.5rem;
    padding-bottom:1.5rem;
}
#content-search .uk-search-input::placeholder,
#content-search .uk-search-input {
    color:#fff!important;
}
#content-search .uk-search .uk-search-icon {
    color:#fff!important;
}
#content-search .query-controls {
    margin-bottom: 0!important;
}
#content-search .query-controls form {
    width: 100%;
}
#content-search .uk-modal-close-inside {
    top:5px;
    right:5px;
    color: rgba(255,255,255,0.25)
}
div#content-control-panel .uk-container {
    display: flex;
    justify-content: space-between;
}
div#panel-controls .uk-width-1-1 {
    display: flex;
    align-items: center;
    gap:1rem;
}
div#panel-sort .uk-width-1-1 {
    display: flex;
    align-items: center;
}
div#query-controls {
    gap: 1rem;
}
/* .content-search-button .uk-button,
.content-filter-button .uk-button {
    border: 1px solid #333333;
    background: #333333;
    color: white;
    padding: 0.5rem 1rem;
}
.content-search-button .uk-button:hover,
.content-filter-button .uk-button:hover {
    background: rgba(51,51,51,0.75);
} */
#content-filters .uk-offcanvas-bar {
    background: #272727;
}
.has-advanced-filters .advanced-filters-toggle-wrap {
    margin-bottom: 1rem;
}
.has-advanced-filters .filter-group.is-advanced-filter.is-revealed {
    display: block;
}
.has-advanced-filters:not(.show-advanced-filters) .filter-group.is-advanced-filter:not(.is-revealed) {
    display: none;
}
.advanced-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08);
    color: #fff;
    padding: 0.45rem 0.75rem;
    border-radius: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
    width: 100%;
    text-align: center;
    justify-content: center;
}
.advanced-filters-toggle:hover,
.advanced-filters-toggle:focus {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.35);
}
.advanced-filters-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}
div#active-filter-group {
    display: flex;
    gap: 1rem;
    height: 100%;
}

.content-sort {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.content-sort .sort-direction-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.content-sort .sort-direction-toggle:hover,
.content-sort .sort-direction-toggle:focus {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.4);
}
.content-sort .sort-direction-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}
.content-sort .sort-direction-toggle svg {
    transition: transform 0.2s ease;
}
.content-sort .sort-direction-toggle.is-asc svg {
    transform: rotate(180deg);
}
.content-sort .woocommerce-ordering {
    background: rgba(255,255,255,0.1);
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
}
.content-sort select.orderby {
    color: #000!important;
    border:none!important;
}
.content-sort .woocommerce input.input-text, .woocommerce select:not([multiple]):not([size]) {
    filter: invert(100%);
}

@media screen and (max-width:767px) {
    .content-search-button .uk-button, .content-filter-button .uk-button {
        padding: 0;
        height: 40px;
        width: 40px;
    }
    div#panel-controls .uk-width-1-1 {
        gap: 10px;
    }
    div#query-controls .result-count {
        display: none;
    }
}
.content-card__excerpt {
    /* color: rgba(255,255,255,0.6); */
}
#content .content-card img {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
    -webkit-transform: translateZ(0);
}

#content .content-card:hover img {
    filter: grayscale(0%);
    transition: filter 0.3s ease-in-out;
}
.content-card video {
    filter: saturate(0);
}
.content-card:hover video {
    filter: saturate(1);
}
button.sort-direction-toggle {
    border-radius: 0!important;
    /* height: -webkit-fill-available; */
    border: 0!important;
}

.uk-progress::-webkit-progress-value {
    background-color: rgba(255,255,255,0.6)!important;
}

.uk-progress::-moz-progress-bar {
    background-color: #ffffff!important;
}

.uk-progress {
    background-color: rgba(255,255,255,0.1)!important;
}

.content-card--callout {
    background: rgba(255,255,255,0.1);
    transition: filter 0.5s ease;
}

.content-card--callout article {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.catalogue-callout-card__link--media-first .content-card__body {
    padding: 0;
    justify-content: flex-start;
    align-items: stretch;
}

.catalogue-callout-card__link--media-first .content-card__media {
    margin-bottom: 0;
    width: 100%;
}

.catalogue-callout-card__link--media-first .content-card__image {
    max-width: none;
    width: 100%;
    height: auto;
}

a.catalogue-callout-card__link--media-first article.uk-card-small {
    padding: 0;
}
a.catalogue-callout-card__link--media-first article .content-card__content {
    padding: 0 1rem;
}

.catalogue-callout-card__badge.uk-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.content-card--callout:hover {
    background-color: rgba(255,255,255,0.15);
}

.content-card:hover article {
    border-color: rgba(255,255,255,0.4);
}

.load-more-button:hover {
    background: rgba(255,255,255,0.1)!important;
    color: white!important;
}

div#content-active-filter-group {
    display: flex;
    gap: 1rem;
}

/* =====================================================================
   Unified content-archive — card grid + variants + segmented toolbar.
   Appended after the blog-derived functional base; these rules define the
   new card look (article / case-study / white-paper) and the segmented
   [Search | Filters | Sort] toolbar from the Figma archive design.
   ===================================================================== */
:root { --lt-navy:#06013D; --lt-blue:#1F5D9F; --lt-border:#E5E7EB; --lt-muted:#5B5D66; --lt-card-bg:#F4F4F6; }

/* Grid */
#content-posts.content-grid { margin-top: 8px; }
.content-grid__item { display: flex; }
.content-grid__item > .content-card { width: 100%; }

/* Shared card chrome — override the inherited blog .content-card rules */
.content-card { position: relative; display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--lt-border); border-radius: 6px; overflow: hidden; box-shadow: none;
    transition: box-shadow .15s ease, transform .15s ease; }
.content-card:hover { box-shadow: 0 6px 20px rgba(6,1,61,.08); transform: translateY(-2px); }
.content-card__link { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px; gap: 12px;
    text-decoration: none; color: inherit; }
/* Eyebrow styled as a pill — same treatment as the white-paper __badge. */
.content-card__eyebrow { align-self: flex-start; font: 600 11px/1 Inter, sans-serif; letter-spacing: 1px;
    text-transform: uppercase; color: var(--lt-blue); background: #EAF1FA; padding: 6px 10px; border-radius: 4px; }
.content-card__title { font: 700 19px/1.28 Bitter, Georgia, serif; color: var(--lt-navy); margin: 0; }
.content-card__excerpt { font: 400 14px/1.55 Inter, sans-serif; color: var(--lt-muted); margin: 0; flex: 1 1 auto; }
.content-card__read { font: 600 14px/1 Inter, sans-serif; color: var(--lt-blue); margin-top: 4px; }
.content-card__title::before { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole-card link */

/* Article variant — blue top accent, footer meta + read */
/* .content-card--article { border-top: 3px solid var(--lt-blue); } */
.content-card--article .content-card__foot { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--lt-border); }
.content-card--article .content-card__meta { font: 500 12px/1 Inter, sans-serif; letter-spacing: .4px;
    text-transform: uppercase; color: #8C8E96; }

/* Case-study variant — image on top */
.content-card--media .content-card__link { padding: 0; gap: 0; }
.content-card--media .content-card__image { position: relative; aspect-ratio: 16 / 9; background: var(--lt-card-bg); overflow: hidden; }
.content-card--media .content-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.content-card--media .content-card__image-ph { position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; font: 600 12px/1 Inter, sans-serif; letter-spacing: 1px; color: #8C8E96; }
.content-card--media .content-card__inner { display: flex; flex-direction: column; gap: 12px; padding: 22px; flex: 1 1 auto; }

/* White-paper variant — PDF badge, no image */
.content-card--paper .content-card__badge { align-self: flex-start; font: 600 11px/1 Inter, sans-serif;
    letter-spacing: 1px; text-transform: uppercase; color: var(--lt-blue); background: #EAF1FA;
    padding: 6px 10px; border-radius: 4px; }

/* ---- Segmented toolbar [Search | Filters | Sort] — ported from the products
   archive (#products-control-panel) so the content archives match it exactly.
   The template structure is identical (rows #panel-controls / #panel-sort), so
   the same display:contents flattening promotes the 3 segments into one flex row. */
#content-control-panel { padding: 0 !important; background: #fff; }
#content-control-panel > .uk-container {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    align-items: stretch !important; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; }
#content-control-panel #panel-controls,
#content-control-panel #panel-sort,
#content-control-panel #panel-controls > [class*="uk-width"],
#content-control-panel #panel-sort > [class*="uk-width"],
#content-control-panel #query-controls { display: contents !important; }

/* The three segments — each fills 1/3, 52px tall, navy on white. */
.content-search-button,
.content-filter-button,
#query-controls .content-sort {
    flex: 1 1 0 !important; min-width: 0 !important; height: 52px !important; margin: 0 !important;
    background: #fff !important; border-top: 1px solid #CCCCD9 !important; border-bottom: 1px solid #CCCCD9 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; gap: 0 !important; }
.content-search-button { order: 1 !important; border-left: 1px solid #CCCCD9 !important; }
.content-filter-button { order: 2 !important; }
#query-controls .content-sort { order: 3 !important; border-right: 1px solid #CCCCD9 !important; }

/* Vertical dividers between segments. */
.content-filter-button::before,
#query-controls .content-sort::before {
    content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: #CCCCD9; pointer-events: none; }

/* Button fills its segment — strip the YT button chrome. */
.content-search-button > a, .content-filter-button > a,
.content-search-button > .el-content, .content-filter-button > .el-content,
.content-search-button a.uk-button, .content-filter-button a.uk-button {
    height: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; border: none !important;
    background: transparent !important; border-radius: 0 !important; color: #06013D !important;
    font: 600 13px/1 Inter, sans-serif !important; gap: 8px !important;
    display: flex !important; align-items: center !important; justify-content: center !important; }
.content-search-button > a:hover, .content-filter-button > a:hover,
.content-search-button a.uk-button:hover, .content-filter-button a.uk-button:hover { background: #f7f7f8 !important; color: #06013D !important; }
.content-search-button .uk-icon svg, .content-filter-button .uk-icon svg { width: 14px !important; height: 14px !important; }

/* Hide the in-toolbar page-info / empty-state / sort toggle.
   KINO FLO EDIT: `.result-count` and `.loading-products` were removed from this list.
   The count is wanted in the toolbar here (see the Kino Flo block at the end of this file), and
   `display:none !important` on `.loading-products` made the spinner permanently invisible — the
   JS shows it with jQuery .show(), which sets an INLINE display and cannot beat !important, so
   the loading state never appeared. The template already ships it inline-hidden, so removing it
   from this rule restores the show/hide without needing any other change. */
#query-controls .no-products,
#content-page-info,
#query-controls .content-sort .sort-direction-toggle { display: none !important; }

/* Sort segment — invisible native <select> fills the segment, "↕ Sort" via ::after. */
#query-controls .content-sort select.orderby {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important;
    padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important;
    color: transparent !important; font-size: 0 !important; opacity: 0 !important; z-index: 2 !important; cursor: pointer; }
#query-controls .content-sort::after {
    content: '\2195\00a0\00a0Sort'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #06013D; font: 600 13px/1 Inter, sans-serif; pointer-events: none; z-index: 1; }

/* Popular Filters pills strip (recommended_filters) — sits on the navy band. */
.recommended-filters-subheading { font: 700 20px/1.2 Bitter, Georgia, serif; color: #fff; }

/* ---- Popular Filters pills — ported verbatim from product-filters.css so the
   content archives match the products pills (outlined on navy, hover-invert,
   stateless). Selectors are generic to the recommended_filters element. ---- */
.recommended-filters { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
.recommended-filters-subheading { margin: 0 !important; }
.recommended-filters-subheading h3,
.recommended-filters-subheading h5 {
    margin: 0 !important; padding: 0 !important; font-family: 'Roboto', system-ui, sans-serif !important;
    font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.14em !important;
    text-transform: uppercase !important; color: #7BB7FF !important; line-height: 1 !important; }
.recommended-filters-list { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px !important; margin: 0 !important; }
.recommended-filters-item { display: inline-flex !important; margin: 0 !important; }
.recommended-filter,
button.recommended-filter,
.recommended-filter.uk-button,
.recommended-filter.uk-button-primary {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    height: 44px !important; padding: 0 24px !important; margin: 0 !important;
    background: transparent !important; color: #fff !important; border: 1px solid #fff !important;
    border-radius: 999px !important; font-family: 'Roboto', system-ui, sans-serif !important; font-size: 14px !important;
    font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important;
    text-transform: none !important; cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.recommended-filter:hover,
.recommended-filter:focus { background: #fff !important; color: #06013D !important; border-color: #fff !important; outline: none !important; }
.recommended-filters.lt-on-light .recommended-filter { color: #06013D !important; border-color: #06013D !important; }
.recommended-filters.lt-on-light .recommended-filter:hover,
.recommended-filters.lt-on-light .recommended-filter:focus { background: #06013D !important; color: #fff !important; }

/* ---- Active-filter chip strip + pills — ported from product-filters.css so the
   content archives share the products active-filter styling. The chip strip is
   Row 2 of the segmented toolbar (full-width #F2F2F2); pills are white w/ navy
   border + 16px radius. Hidden when empty (content JS adds no body class, so we
   gate on :has()). ---- */
#content-control-panel #content-active-filter-group {
    order: 4 !important; flex: 0 0 100% !important; width: 100% !important; box-sizing: border-box !important;
    background: #F2F2F2 !important; padding: 0 !important; gap: 0 !important; margin: 0 !important;
    flex-wrap: nowrap !important; display: flex !important; align-items: stretch !important; min-height: 48px; position: relative; }
#content-control-panel #content-active-filter-group:not(:has(.filter-pill)) { display: none !important; }
#content-active-filters {
    flex: 1 1 0 !important; gap: 8px !important; flex-wrap: nowrap !important; min-width: 0 !important;
    overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; touch-action: pan-x;
    padding: 10px 14px !important; align-items: center; display: flex !important; scrollbar-width: none; -ms-overflow-style: none; }
#content-active-filters::-webkit-scrollbar { display: none; }
#content-active-filters::after { content: ''; flex: 0 0 12px; }
#content-active-filters .filter-pill { flex: 0 0 auto !important; }

.filter-pill,
span.filter-pill {
    height: 32px !important; padding: 0 14px !important; background: #fff !important; color: #06013D !important;
    border: 1px solid #06013D !important; border-radius: 16px !important; font-family: 'Roboto', system-ui, sans-serif !important;
    font-weight: 500 !important; font-size: 13px !important; gap: 8px !important;
    display: inline-flex !important; align-items: center !important; }
.filter-pill .filter-term, .filter-pill .search-term { line-height: 1 !important; }
.filter-pill .dismiss-pill {
    color: #06013D !important; background: transparent !important; border: none !important; padding: 0 !important;
    margin-left: 4px !important; cursor: pointer !important; font-size: 16px !important; line-height: 1 !important; }
.filter-pill svg, .filter-pill .lock-icon svg { stroke: #06013D !important; }
.filter-pill.search-pill svg { width: 14px !important; height: 14px !important; }
/* Reset dropped from the strip (one tap away in the filter drawer), like products. */
#content-reset-filters, button#content-reset-filters { display: none !important; }

/* Filter-count badge on the Filter segment — matches products (hidden until the
   content JS toggles .is-visible when filters > 0). */
.content-filter-button .filter-count-badge { display: none !important; }
.content-filter-button .filter-count-badge.is-visible {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    min-width: 20px !important; height: 20px !important; padding: 0 6px !important; margin-left: 4px !important;
    background: #EBEDF7 !important; color: #1F5D9F !important; border-radius: 999px !important;
    font-family: 'Roboto', system-ui, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; }

/* ==== Search overlay — ported from product-filters.css (#product-search), retargeted to #content-search ==== */
#content-search > .uk-container {
    max-width: 400px;
    background: #06013D;
    padding: 2rem;
    position: relative;
}
#content-search .uk-search input {
    background: rgb(0 0 0 / 25%);
    border-color: rgb(0 0 0 / 50%);
    padding-top: 1.5rem;
    padding-bottom:1.5rem;
}
#content-search .uk-search-input::placeholder,
#content-search .uk-search-input {
    color:#fff!important;
}
#content-search .uk-search .uk-search-icon {
    color:#fff!important;
}
#content-search .query-controls {
    margin-bottom: 0!important;
}
#content-search .query-controls form {
    width: 100%;
}
#content-search .uk-modal-close-inside {
    top:5px;
    right:5px;
    color: rgba(255,255,255,0.25)
}

/* ==== Filter drawer — ported from product-filters.css (#product-filters offcanvas), retargeted to #content-filters ==== */
/* ============================================================================
   FILTER DRAWER — `#content-filters` offcanvas (the "Filter Products" panel)
   ----------------------------------------------------------------------------
   Figma reference: node 869:9947 ("Component — Filter Drawer").

   Markup (rendered into the `#content-filters` offcanvas via the typectv2
   template's section [5] — one `products_filter` element per filter group):

       #content-filters.uk-offcanvas
         .uk-offcanvas-bar
           .uk-offcanvas-close                  (× top-right)
           h2.uk-h3                             ("Filter Products" title)
           .filter-group[#filter_<tax>]         (one per taxonomy)
             .filter-label                      (header row, click to toggle)
               h5.filter-name                   (taxonomy label)
               .filter-toggle                   (+ / − text glyph)
             .filter-content                    (.hide-filter hides it)
               ul.filter-list
                 li.filter-item
                   input.filter-input[type=checkbox]
                   label.filter-item-label
                     .filter-item-name          (term name)
                   ul.filter-sublist            (hierarchical children)
   ============================================================================ */

/* Offcanvas wrapper — flex column so the bar can host a scrolling content
   area with a non-scrolling action bar pinned to the bottom. */
#content-filters {
    z-index: 1000 !important;
}
#content-filters .uk-offcanvas-bar {
    background: #06013D !important;
    color: #fff !important;
    width: 100% !important;
    max-width: 480px !important;
    border: none !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;       /* outer container — inner area scrolls */
}

/* Grid wrapper inside the bar becomes the scroll area, padded. */
#content-filters .uk-offcanvas-bar > .uk-grid-margin,
#content-filters .uk-offcanvas-bar > div:first-child {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    margin: 0 !important;
    padding: 40px 32px 24px 32px !important;
    min-height: 0;                     /* flex children with overflow need this */
    display: flex;                     /* turn the column inside into a flex col */
    flex-direction: column;
}
#content-filters .uk-offcanvas-bar > .uk-grid-margin > .uk-width-1-1,
#content-filters .uk-offcanvas-bar > div:first-child > .uk-width-1-1 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Close button (UIkit's uk-offcanvas-close) */
#content-filters .uk-offcanvas-close {
    top: 32px !important;
    right: 32px !important;
    color: #fff !important;
    padding: 4px !important;
}
#content-filters .uk-offcanvas-close svg line {
    stroke: #fff !important;
    stroke-width: 1.5 !important;
}

/* Drawer title — "Filter Products" */
#content-filters .uk-offcanvas-bar h2,
#content-filters .uk-offcanvas-bar h2.uk-h3 {
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
    font-family: 'Bitter', Georgia, serif !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #fff !important;
}

/* Filter group rows — separator + collapsible header */
#content-filters .filter-group {
    margin: 0 !important;
    padding: 20px 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
#content-filters .filter-group:last-of-type {
    border-bottom: none !important;
}

#content-filters .filter-label {
    cursor: pointer;
    user-select: none;
}
#content-filters .filter-name,
#content-filters h5.filter-name {
    margin: 0 !important;
    font-family: 'Roboto', system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #fff !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#content-filters .filter-toggle {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* Filter list (when expanded) */
#content-filters .filter-content {
    margin-top: 16px !important;
}
#content-filters ul.filter-list,
#content-filters ul.filter-sublist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
#content-filters ul.filter-sublist {
    margin-top: 12px !important;
    padding-left: 32px !important;
}

#content-filters .filter-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    flex-wrap: wrap;
    line-height: 1;
}

/* Checkbox — outlined square, white border, transparent bg.
   Use appearance:none + custom check glyph so we can color it. */
#content-filters input.filter-input,
#content-filters input[type="checkbox"].filter-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}
#content-filters input.filter-input:hover {
    border-color: #fff !important;
}
/* #1F5D9F was LynTec's blue accent, carried straight through the port — the one colour in this
   stack that never belonged to Kino Flo. Yellow box, dark tick, matching the products and
   downloads filters. */
#content-filters input.filter-input:checked {
    background: var(--kf-yellow) !important;
    border-color: var(--kf-yellow) !important;
}
#content-filters input.filter-input:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid var(--kf-ink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
#content-filters input.filter-input:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px !important;
}

/* Checkbox label */
#content-filters label.filter-item-label {
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    flex: 1 1 auto;
}
#content-filters .filter-item-name {
    font-family: 'Roboto', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.92) !important;
}
#content-filters .filter-item:hover .filter-item-name {
    color: #fff !important;
}

/* Advanced-filter toggle button — sits inside a filter-group rows section */
#content-filters .has-advanced-filters .advanced-filters-toggle-wrap {
    margin: 20px 0 0 0;
}
#content-filters .advanced-filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#content-filters .advanced-filters-toggle:hover,
#content-filters .advanced-filters-toggle:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: #fff;
    outline: none;
}

/* Action bar — YT's `html` element wraps its content in an unstyled <div>,
   so the wrapper (NOT the inner `.filter-drawer-actions`) is the flex child
   of the offcanvas column. Apply `margin-top: auto` to the wrapper via
   `:has()` so it pushes to the bottom of the flex column, and `position:
   sticky; bottom: 0` so it stays visible when the user scrolls a long
   filter list. The inner element carries the visual styling. */
#content-filters .uk-width-1-1 > div:has(> .filter-drawer-actions) {
    margin-top: auto !important;       /* push to bottom of flex column */
    margin-bottom: -24px !important;   /* hug the offcanvas bottom edge */
    position: sticky !important;
    bottom: -24px !important;          /* hugs bottom edge through scroll area padding */
    z-index: 2 !important;
    flex-shrink: 0 !important;
}
#content-filters .filter-drawer-actions {
    margin: 0 -32px !important;        /* extend to drawer edges */
    padding: 20px 32px !important;
    background: #06013D !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    display: flex !important;
    gap: 12px !important;
}
#content-filters .filter-drawer-actions .filter-reset,
#content-filters .filter-drawer-actions .js-reset-filters,
#content-filters .filter-drawer-actions [data-action="reset"] {
    border-radius: 999px !important;
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    padding: 0 16px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 6px !important;
    font-family: 'Roboto', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: color 0.15s ease, border-color 0.15s ease;
}
#content-filters .filter-drawer-actions .filter-reset:hover,
#content-filters .filter-drawer-actions .js-reset-filters:hover,
#content-filters .filter-drawer-actions [data-action="reset"]:hover {
    color: #fff !important;
    border-color: #fff !important;
}
#content-filters .filter-drawer-actions .filter-apply,
#content-filters .filter-drawer-actions .js-apply-filters,
#content-filters .filter-drawer-actions [data-action="apply"] {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    padding: 0 16px !important;
    background: #1F5D9F !important;
    color: #fff !important;
    border: 1px solid #1F5D9F !important;
    border-radius: 6px !important;
    font-family: 'Roboto', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#content-filters .filter-drawer-actions .filter-apply:hover,
#content-filters .filter-drawer-actions .js-apply-filters:hover,
#content-filters .filter-drawer-actions [data-action="apply"]:hover {
    background: transparent !important;
    border-color: #fff !important;
}

/* Scroll behaviour moved to the inner grid wrapper (above) so the action bar
   can sit OUTSIDE the scroll viewport and lock to the offcanvas bottom. */

@media screen and (max-width: 767px) {
    #content-filters .uk-offcanvas-bar {
        max-width: 100% !important;
    }
    #content-filters .uk-offcanvas-bar > .uk-grid-margin,
    #content-filters .uk-offcanvas-bar > div:first-child {
        padding: 24px 20px !important;
    }
    #content-filters .uk-offcanvas-bar h2,
    #content-filters .uk-offcanvas-bar h2.uk-h3 {
        font-size: 24px !important;
    }
    #content-filters .filter-drawer-actions {
        margin: auto -20px -24px -20px !important;
        padding: 16px 20px !important;
    }
}

/* ==== Search suggestions (autocomplete) — ported from product-filters.css, retargeted to #content-autocomplete-results ==== */
#content-autocomplete-results {
    position: absolute;
    background-color: #06013d;
    border: 1px solid rgb(0 0 0 / 25%);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    z-index: 1000;
	width: 100%;
    left:0;
    right:0;
	max-height: 320px;
	overflow-y: auto;
	display: none;
    margin-left: auto;
    margin-right: auto;
    padding: 4px 0;
}
.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #1A1A1A;
    transition: background-color 0.2s ease;
}
.autocomplete-item:last-child {
    border-bottom: none;
}
.autocomplete-item:hover,
.autocomplete-item:focus {
    background-color: #1F5D9F;
    outline: none;
}
.autocomplete-item:focus {
    box-shadow: inset 0 0 0 2px rgba(6, 1, 61, 0.25);
}
.autocomplete-item-thumb {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.autocomplete-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.autocomplete-item-thumb-placeholder {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.autocomplete-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.autocomplete-item-title {
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.autocomplete-item-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ==========================================================================
   Kino Flo overrides
   Everything above this line is the port of LynTec's content-filters.css and is left intact so
   the two stay diffable. This block is the Kino Flo skin, and it is appended rather than merged
   for the same reason: a later rule of equal specificity wins, so nothing above needs editing.

   Tokens (--kf-*) come from kf-about.css, which the enqueue declares as a dependency.
   ========================================================================== */

/* The card gains a media block that LynTec's text-only article card had no need for. */
.content-card--article { display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--kf-line); border-radius: 0; overflow: hidden; height: 100%; }
.content-card--article:hover { border-color: var(--kf-ink); }

.content-card__link { display: flex; flex-direction: column; height: 100%;
    color: inherit; text-decoration: none; }
.content-card__link:hover { color: inherit; text-decoration: none; }

.content-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--kf-paper); }
.content-card__img { width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease; }
.content-card--article:hover .content-card__img { transform: scale(1.03); }

.content-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }

/* The eyebrow is the post's category, so it reads as the same token as the checked filter pill. */
.content-card__eyebrow { font-family: var(--kf-display); font-size: 11px; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; color: var(--kf-ink-3); margin-bottom: 8px; }

.content-card__title { font-family: var(--kf-display); font-size: 19px; line-height: 26px;
    font-weight: 700; color: var(--kf-ink); margin: 0; text-transform: none; }
.content-card__excerpt { font-size: 15px; line-height: 24px; color: var(--kf-ink-3);
    margin: 10px 0 0; }

/* margin-top:auto pins the footer to the card bottom so a row of cards aligns on the meta line
   regardless of how many lines the titles run to. */
.content-card__foot { display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-top: auto; padding-top: 16px; }
.content-card__meta { font-size: 13px; color: var(--kf-mute); }
.content-card__read { font-family: var(--kf-display); font-size: 13px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--kf-ink); white-space: nowrap; }
/* No mustard on hover. #A07F00 is yellow darkened until it passes contrast on white, and it
   reads as mud — the same call already recorded for eyebrows in kf-about.css: yellow is a FILL,
   not a text colour. The link stays ink and the card's other hover states carry the affordance. */
.content-card--article:hover .content-card__read { color: var(--kf-ink); }

/* A post with no featured image keeps the same footprint rather than collapsing shorter than
   its neighbours in a uk-grid-match row. */
.content-card--nomedia .content-card__body { padding-top: 26px; }
.content-card--nomedia { border-top: 3px solid var(--kf-yellow); }

/* Filter rail — align the ported controls to the site's own type scale. */
.filter-group .filter-name { font-family: var(--kf-display); font-size: 13px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--kf-ink); }
.filter-item-name { font-size: 15px; color: var(--kf-ink-3); }
.filter-pill { background: var(--kf-yellow); color: var(--kf-ink); }

@media (max-width: 639px) {
    .content-card__body { padding: 16px 18px 18px; }
    .content-card__title { font-size: 17px; line-height: 24px; }
}

/* Card copy reads left. LynTec centres it (line ~15) because its cards are short text panels;
   with a 16:9 image above and a 24-word excerpt below, centred ragged text is hard to scan. */
.content-card__body { text-align: left; }

/* Put the result count back in the toolbar.
   LynTec hides it there (`#query-controls .result-count { display: none !important }`) and shows
   the count under Load More instead, which leaves this bar holding nothing but a right-aligned
   "Sort" — it reads as an empty box at this width. Restoring it also matches the product
   catalogue toolbar, so the two archives behave alike. !important is required to beat the
   ported rule, which is itself !important. */
#query-controls .result-count { font-size: 14px; color: var(--kf-ink-3); }

/* Brand.
   The port carries LynTec's navy (#06013D) through the controls — checkbox accent, the Sort
   label, the active-filter pills, the Load More button. Recolour to the Kino Flo tokens rather
   than editing the rules above, so the port stays diffable. */
/* Checkbox — yellow box, dark tick.
   This is the selector that actually renders on the blog archive. The `#content-filters`
   rules further up style LynTec's offcanvas drawer, whose markup was never ported here (this
   archive uses a persistent sidebar), so they are inert on this page — do not "fix" the
   checkbox there and assume it landed.
   accent-color cannot express this pairing: it fills the box but hands the tick to the browser,
   which picks its own contrast colour. appearance:none + a drawn tick is the only portable way. */
.filter-group input[type="checkbox"].filter-input,
.kf-blog__filters input[type="checkbox"].filter-input {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    border: 1.5px solid #B9BABC;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.filter-group input[type="checkbox"].filter-input:hover,
.kf-blog__filters input[type="checkbox"].filter-input:hover { border-color: var(--kf-ink); }
.filter-group input[type="checkbox"].filter-input:checked,
.kf-blog__filters input[type="checkbox"].filter-input:checked {
    background: var(--kf-yellow);
    border-color: var(--kf-yellow);
}
.filter-group input[type="checkbox"].filter-input:checked::after,
.kf-blog__filters input[type="checkbox"].filter-input:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.5px;
    width: 4px;
    height: 8px;
    border: solid var(--kf-ink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.filter-group input[type="checkbox"].filter-input:focus-visible,
.kf-blog__filters input[type="checkbox"].filter-input:focus-visible {
    outline: 2px solid var(--kf-ink);
    outline-offset: 2px;
}
#query-controls .content-sort::after,
#query-controls .content-sort { color: var(--kf-ink); }
.filter-pill { border-color: var(--kf-ink); color: var(--kf-ink); background: var(--kf-yellow); }
.filter-pill .dismiss-pill { color: var(--kf-ink); }
#content-load-more.uk-button-primary { background: var(--kf-yellow); color: var(--kf-ink); }
#content-load-more.uk-button-primary:hover { background: #D9B201; color: var(--kf-ink); }
#content-reset-filters { color: var(--kf-ink); }

/* The archive header and the results band each contribute 40px, which reads as a hole between the
   H1 and the first control. One band's worth is enough. */
.kf-sec.kf-blog-head { padding-bottom: 0; }

/* Mobile: the category list is the full height of the viewport before a single post is visible.
   Collapse it by default under 768px — kf_blog_mobile_collapse() in kf-blog-filters.js sets the
   `hide-filter` class and the matching +/− glyph, so the existing .filter-label tap handler opens
   it exactly as it does on desktop. Done in JS rather than a media query because the toggle uses
   jQuery .toggle(), which writes an inline display that a media query cannot then take back. */
@media (max-width: 767px) {
    .kf-blog__filters { margin-bottom: 8px; }
    .filter-group .filter-label { cursor: pointer; padding: 10px 0; }
}

/* The two rules above that resist a plain override: the pill block (line ~703) is entirely
   !important, and the eyebrow (line ~564) sets its colour through LynTec's own `--lt-*` tokens,
   which are not defined on this install — so it was falling back to a hard-coded pale blue.
   Matching !important is the minimum needed to win; specificity alone does not. */
.filter-pill,
span.filter-pill {
    background: var(--kf-yellow) !important;
    color: var(--kf-ink) !important;
    border: 1px solid var(--kf-ink) !important;
    font-family: var(--kf-body) !important;
    font-weight: 700 !important;
}
.filter-pill .dismiss-pill { color: var(--kf-ink) !important; }
.filter-pill svg, .filter-pill .lock-icon svg { stroke: var(--kf-ink) !important; }

/* Eyebrow: a flat uppercase label in the ink ramp rather than a pale-blue chip. */
.content-card__eyebrow {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: var(--kf-ink-3);
    align-self: flex-start;
}

/* ==========================================================================
   Kino Flo — house button shapes (corrections over the port)
   --------------------------------------------------------------------------
   The rules above are LynTec's and are almost entirely !important, so neither the .kf-btn aliases
   in kf-about.css nor a plain class can reach them. Restated here at matching weight.

   House spec, measured from the live site: buttons and pill controls are pills in Roboto with
   normal tracking; cards and images are square; the accent is #FED208 on #161616, never navy.
   ========================================================================== */

/* Active-filter chips — were 16px corners with LynTec's navy #06013D. */
.filter-pill,
span.filter-pill {
    border-radius: 999px !important;
    border-color: var(--kf-ink, #161616) !important;
}

/* Load more — the one real CTA in the list, so it takes the full primary treatment. */
#content-load-more,
button#content-load-more,
.load-more-button,
.load-more-button.uk-button {
    border-radius: 999px !important;
    font-family: 'Roboto', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: uppercase !important;
    min-height: 52px !important;
    padding-inline: 30px !important;
    background: var(--kf-yellow, #FED208) !important;
    color: var(--kf-ink, #161616) !important;
    border: 2px solid transparent !important;
}
#content-load-more:hover,
.load-more-button:hover {
    background: #D9B201 !important;
    color: var(--kf-ink, #161616) !important;
}

/* Sort toggle and the filter/search triggers. */
.content-sort .sort-direction-toggle,
.content-search-button > a,
.content-filter-button > a,
.content-search-button > .el-content,
.content-filter-button > .el-content {
    border-radius: 999px !important;
    font-family: 'Roboto', system-ui, sans-serif !important;
    letter-spacing: normal !important;
}

/* ==========================================================================
   Locked context term — the archive's own identity
   --------------------------------------------------------------------------
   On /blog/ or /category/spotlite/ the queried term is ticked in the category facet and cannot be
   removed: dismissing it used to drop the visitor into all 162 posts, i.e. out of the archive they
   were standing in. It is rendered as a locked pill (lock glyph, no ×) exactly like the products
   archive's context term.

   What it is NOT is a server-side AND clause, which is how the products archive locks. There the
   context taxonomy (kf_type) is independent of the facets (series, form factor), so ANDing is
   correct. The blog's one live facet IS category — the taxonomy the archive is keyed on — so ANDing
   `blog` would make 7 of the 10 category terms return zero posts (measured). The term stays an OR
   selection and only the affordance is locked. See isPreselectCheckbox() in kf-blog-filters.js.
   ========================================================================== */

/* Same treatment as the products archive: yellow means removable, so a term that cannot be removed
   must not wear it. */
.filter-pill.locked,
span.filter-pill.locked {
    background: #fff !important;
    color: var(--kf-ink, #161616) !important;
    border: 1px solid var(--kf-ink, #161616) !important;
    font-weight: 500 !important;
    cursor: default;
}
.filter-pill.locked .lock-icon {
    display: inline-flex;
    align-items: center;
    opacity: .55;
}

/* The row in the drawer. The checkbox is genuinely `disabled`, so this only makes the state read as
   deliberate rather than as a control that failed to respond. */
.filter-list .filter-item.is-locked {
    opacity: .72;
}
.filter-list .filter-item.is-locked > label,
.filter-list .filter-item.is-locked > input[type="checkbox"] {
    cursor: default;
}