.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: 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: #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: 4px;
    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 result count / page-info / empty-state / sort toggle. */
#query-controls .result-count,
#query-controls .no-products,
#query-controls .loading-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: 'Inter', 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: 6px !important; font-family: 'Inter', 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: 'Inter', 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: 10px !important;
    font-family: 'Inter', 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: 'Inter', 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;
}
#content-filters input.filter-input:checked {
    background: #1F5D9F !important;
    border-color: #1F5D9F !important;
}
#content-filters input.filter-input:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    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: 'Inter', 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: 6px;
    font-family: 'Inter', 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"] {
    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: 'Inter', 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: 'Inter', 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;
}