/**
CS Smart Search API - Complete Frontend Styles
Version: 2.6.0 (Updated: Horizontal Layout, Top Filters, Icon Pills, Checklist)
Layouts:
• Autocomplete: 220px Sidebar + 3-Column Product Grid
• Results Page: Full Width Horizontal List + Top Toolbar Filters
*/

/* ─────────────────────────────────────────────────────────────────────────────
   CSS VARIABLES
───────────────────────────────────────────────────────────────────────────── */
:root {
    /* ── Inogen 2026 Brand Guide Colors ──────────────────────────────────── */
    /* Inogen Blue  #004C97 — primary brand color                            */
    --cs-primary:       #004C97;
    --cs-primary-hover: #003365;   /* Inogen Blue -1 */
    --cs-primary-light: #1F74B5;   /* Inogen Blue +1 */

    /* Inogen Orange  #F58220 — primary CTA color                            */
    --cs-accent:        #F58220;
    --cs-accent-hover:  #CC4E00;   /* Inogen Orange -1 */

    /* Inogen Dark Gray  #3D3935 — body text                                 */
    --cs-text:          #3D3935;
    --cs-text-muted:    #6D6A67;   /* Dark Gray +1 */

    /* Backgrounds */
    --cs-border:        #3679b4;   /* card/sidebar border as specified */
    --cs-bg:            #FFFFFF;
    --cs-bg-alt:        #F5F5F5;
    --cs-bg-light:      #DCECF5;   /* Inogen Light Blue +1 — very light blue tint */

    /* Status */
    --cs-success:       #2e7d32;
    --cs-error:         #CC4E00;   /* Inogen Orange -1 */
    --cs-sale:          #CC4E00;

    /* Shadows & shape */
    --cs-shadow:        0 2px 8px rgba(0, 76, 151, 0.08);
    --cs-shadow-lg:     0 4px 14px rgba(0, 76, 151, 0.12);
    --cs-radius:        4px;
    --cs-radius-lg:     6px;
    --cs-transition:    150ms ease-in-out;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BASE & RESET
───────────────────────────────────────────────────────────────────────────── */
.cs-athos-search-page {
    font-size: 16px;
    color: var(--cs-text, #3D3935);
    line-height: 1.5;
    max-width: 1400px;
    margin: 0 auto;
    padding: 5rem 1.5rem 2rem;
}

/* Search page — very light background so white cards lift */
body:has(#cs-smart-search-page),
body:has(#cs-athos-category-wrapper) {
    background: #f5f7fa;
}

.cs-athos-search-page *,
.cs-athos-search-page *::before,
.cs-athos-search-page *::after {
    box-sizing: border-box;
}

.cs-athos-search-page a {
    color: var(--cs-primary);
    text-decoration: none;
    transition: color var(--cs-transition);
}

.cs-athos-search-page a:visited {
    color: var(--cs-primary);
}

.cs-athos-search-page a:hover {
    color: var(--cs-primary-hover);
}

.cs-athos-search-page button,
.cs-athos-search-page input,
.cs-athos-search-page select {
    font-size: 1rem;
}

.cs-athos-search-page :focus-visible {
    outline: 2px solid var(--cs-primary) !important;
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH FORM & INPUT
───────────────────────────────────────────────────────────────────────────── */
.cs-athos-search-form {
    margin-bottom: 2rem;
    max-width: 600px;
    position: relative;
    /* Independent of .nav-wrapper.search-active's own z-index boost — that
       class is toggled by the theme's own JS, and if it's ever briefly
       reset (observed: after switching browser tabs away and back), the
       nav-wrapper drops to its base z-index:10 with no position set,
       pulling our dropdown's effective stacking down with it even though
       the dropdown's own z-index never changed. Setting it here too means
       our stacking no longer depends on that external class's timing.
       Matches the same value used by .nav-wrapper.search-active. */
    z-index: 100000;
}

.cs-athos-search-form-inner {
    display: flex;
    align-items: stretch;
    border: 2px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    overflow: hidden;
    background: var(--cs-bg);
    transition: border-color var(--cs-transition), box-shadow var(--cs-transition);
}

.cs-athos-search-form-inner:focus-within {
    border-color: var(--cs-primary);
    /*box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);*/
}

.cs-athos-search-input {
    flex: 1;
    padding: 0.875rem 1rem;
    border: none;
    background: transparent;
    color: var(--cs-text);
    font-size: 1rem;
    outline: none;
}

.cs-athos-search-input::placeholder {
    color: var(--cs-text-muted);
}

.cs-athos-search-submit {
    padding: 0 1.25rem;
    background: var(--cs-primary);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--cs-transition);
}

.cs-athos-search-submit:hover {
    background: var(--cs-primary-hover);
}

.cs-athos-search-submit svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STANDARD AUTOCOMPLETE DROPDOWN
───────────────────────────────────────────────────────────────────────────── */
.cs-athos-autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cs-bg);
    border: 1px solid var(--cs-border);
    border-radius: 0 0 var(--cs-radius-lg) var(--cs-radius-lg);
    box-shadow: var(--cs-shadow);
    z-index: 10000;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 4px;
}

.cs-athos-suggestion {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--cs-bg-alt);
    transition: background var(--cs-transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-athos-suggestion:last-child {
    border-bottom: none;
}

.cs-athos-suggestion:hover,
.cs-athos-suggestion.active {
    background: var(--cs-bg-alt);
}

.cs-ac-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--cs-primary);
    color: #fff;
    border-radius: 3px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.cs-ac-desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--cs-text-muted);
    margin-top: 0.125rem;
}

/* ────────────────────────────────────────────────────────────────────────────
   SPLIT LAYOUT AUTOCOMPLETE (240px Sidebar + 3-Col Grid)
───────────────────────────────────────────────────────────────────────────── */
.cs-split-autocomplete {
    display: flex;
    flex-direction: row;
    gap: 24px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 20px;
    max-height: 780px;
    overflow-y: auto;
    z-index: 99999;
    max-width: 95vw;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
}

.cs-athos-search-form:not(:focus-within) .cs-split-autocomplete {
    display: none !important;
}

/* Our own close button, positioned within the dropdown itself so it stays
   visible regardless of the theme's outer search-box/nav-wrapper container
   overflowing the viewport on some mobile devices (the theme's own
   .search-close, positioned relative to that container, was going
   off-screen on those devices — see the mobile override below). Hidden by
   default; only shown on mobile, where the theme's button is hidden in its
   place. */
.cs-ac-mobile-close {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Autocomplete Sidebar */
.cs-split-sidebar {
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    padding-right: 24px;
    border-right: 1px solid #f0f0f1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cs-sidebar-title {
    margin: 0 0 8px;
    border-bottom: 1px solid #3D3935;
    padding-bottom: 10px;
    text-transform:capitalize;
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	color: #00549E; 
	margin-top:15px; 
}

.cs-suggestions-list,
.cs-categories-list,
.cs-trending-list,
.cs-support-list,
.cs-sidebar-list {
    list-style: none !important;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
gap: 15px;



}


.cs-sidebar-link {
  
    text-decoration: none;
    padding: 3px 0;
    transition: color 0.15s;
    display: block;
    cursor: pointer;
    
    
    font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
color: #3D3935;
}

.cs-sidebar-link:hover {
    color: var(--cs-primary);
    text-decoration: underline;
}

.cs-sidebar-link:visited {
    color: #3D3935;
}

.cs-clear-history-btn {
    display: block;
    margin-top: 6px;
    padding: 0;
    background: none;
    border: none;
    font-size: 13px;
    color: #3D3935;
    text-decoration: underline;
    cursor: pointer;
}

.cs-clear-history-btn:hover {
    color: var(--cs-primary);
}

.cs-sidebar-loading {
    font-size: 13px;
    color: #9ca3af;
    padding: 3px 0;
}

/* Autocomplete Main Area */
.cs-split-main {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex;
    flex-direction: column;
}

.cs-split-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f1;
}

.cs-split-autocomplete .cs-split-title {
    
        margin: 0 0 8px;
    border-bottom: 1px solid #3D3935;
    padding-bottom: 10px;
    text-transform:capitalize;
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	color: #00549E;
	margin-top:15px;
	width:100%;

}

.cs-view-all {
    font-size: 12px;
    color: var(--cs-primary);
    text-decoration: underline;
    font-weight: 600;
}

.cs-view-all:hover { color: var(--cs-primary-hover); }

/* ────────────────────────────────────────────────────────────────────────────
   CS SMART SEARCH API - AUTOCOMPLETE PRODUCT GRID
───────────────────────────────────────────────────────────────────────────── */
/* Grid Container */
.cs-split-autocomplete .cs-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    justify-content: flex-start;
    padding: 4px 0;
}

/* Merchandising banner — content/styling comes from the banner's own HTML;
   this just gives it breathing room below the Recommended cards. */
.cs-split-autocomplete .cs-ac-banner {
    margin-top: 20px;
    width: 100%;
}
.cs-split-autocomplete .cs-ac-banner img { max-width: 100%; height: auto; display: block; }

.cs-ac-product-price {
    font-size: 15px;
    font-weight: 700;
    margin: 2px 0 6px;
}
.cs-ac-price-sale { color: var(--cs-accent, #F58220); }
.cs-ac-price-regular { color: #9ca3af; text-decoration: line-through; font-weight: 400; margin-left: 4px; }
.cs-ac-price { color: #003365; }

/* Product Card - Fixed Width */
.cs-split-autocomplete .cs-products-grid .cs-ac-product-card {
    display: flex;
    flex-direction: column;
    background: #eeeeee;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cs-split-autocomplete .cs-products-grid .cs-ac-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* Image Wrapper - Fixed Height + Placeholder */
.cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-image-wrap {
    width: 100%;
    height: 180px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Placeholder icon for missing/broken images */
.cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-image-wrap::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpolyline points='21 15 16 10 5 21'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    z-index: 1;
}

/* Product Image */
.cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-image-wrap img {
    height: 100%;
    object-fit: cover;
    padding: 0;
    margin: 0;
    display: block;
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease;
}

/* Zero state (Recommended cards, shown before typing) only — does not
   apply to live product results once the user has typed a query. */
.cs-split-autocomplete.cs-zero-state .cs-products-grid .cs-ac-product-card .cs-ac-product-image-wrap img {
    width: 100%;
}

.cs-split-autocomplete .cs-products-grid .cs-ac-product-card:hover .cs-ac-product-image-wrap img {
    transform: scale(1.03);
}

/* Content Area */
.cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Category Label */
.cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-content .cs-ac-product-cat {
    font-size: 11px;
    color: var(--cs-text-muted, #646970);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Product Title - 2 Line Max */
.cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-content .cs-ac-product-title {
    
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
   
font-style: normal;
font-weight: 400;
font-size: 25px;
line-height: 30px;
color: #3D3935;
margin-bottom:20px;



}

/* Shop Now Button */
.cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-content .cs-ac-shop-btn {
    margin-top: auto;
    padding: 8px 12px;
    background: var(--cs-accent, #F58220);  /* Inogen Orange */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease;
    width: 100%;
    
    padding: 8px 22px;
	height: 35px;
	background: #F58220;
	border-radius: 8px;
	
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 19px;
	color: #001932;
}

.cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-content .cs-ac-shop-btn:hover {
    background: var(--cs-accent-hover, #135e96);
}

.cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-content .cs-ac-shop-btn:active {
    transform: scale(0.98);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cs-split-autocomplete .cs-products-grid {
        grid-template-columns: repeat(2, 240px);
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .cs-split-autocomplete .cs-products-grid {
        grid-template-columns: 240px;
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DARK MODE SUPPORT
───────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .cs-split-autocomplete .cs-products-grid .cs-ac-product-card {
        background: #1e1e1e;
        border-color: #3c434a;
    }

    .cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-image-wrap {
        background: #2c2c2c;
    }

    .cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-image-wrap::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpolyline points='21 15 16 10 5 21'%3E%3C/polyline%3E%3C/svg%3E");
    }

    .cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-content .cs-ac-product-cat {
        color: var(--cs-text-muted, #a7aaad);
    }

    .cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-content .cs-ac-product-title {
        color: var(--cs-text, #f0f0f1);
    }

    .cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-content .cs-ac-shop-btn {
        background: var(--cs-accent, #3c8dd6);
    }

    .cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-content .cs-ac-shop-btn:hover {
        background: var(--cs-accent-hover, #5a9fd9);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH RESULTS PAGE LAYOUT
   UPDATED: Removed Sidebar, Full Width
───────────────────────────────────────────────────────────────────────────── */
.cs-athos-search-header {
    margin-bottom: 1.25rem;
}

.cs-athos-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.cs-athos-query-title {
    font-size: 30px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0;
    color: #004C97;
    margin: 0;


    /* Inogen Website/H2 */
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    line-height: 48px;
    /* identical to box height */
    display: flex;
    align-items: center;

    /* New/Navy */
    color: #001932;



}

.cs-athos-query-title em {
    font-style: normal;
    color: var(--cs-primary);
}

.cs-athos-results-count {
    color: var(--cs-text-muted);
    font-size: 0.9375rem;
    margin: 0;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #3D3935;

}

/* Similar Searches Bar */
.cs-suggestions-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cs-similar-searches {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    flex-wrap: wrap;
    font-family: 'Lato';
    font-style: normal;
    font-size: 20px;
    line-height: 26px;
    color: #3D3935;


}

.cs-similar-label {
    font-weight: 600;
    white-space: nowrap;

    font-style: normal;
    line-height: 26px;

    color: #001932;
    font-size: 0.95rem;

}

.cs-suggest-chip {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    color: var(--cs-primary, #004C97);
    text-decoration: none;
    text-transform: capitalize;
}
.cs-suggest-chip:hover {
    color: var(--cs-primary-hover, #003a75);
}

.cs-similar-chip {
    /*padding: 0.375rem 0.875rem;*/
    background: transparent;
    border-bottom: 1px solid var(--cs-border);
    /*border-radius: 20px;*/
    font-size: 0.875rem;
    color: var(--cs-text);
    cursor: pointer;
    transition: all var(--cs-transition);
    text-decoration: underline;
    text-underline-offset: 2px;

    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    text-decoration-line: underline;

    /* New/Dark Gray */
    color: #3D3935;





}

.cs-similar-chip:hover {
    background: var(--cs-bg-alt);
    border-color: var(--cs-primary);
    color: var(--cs-primary);
}

/* =========================================
   MATCHED TOOLBAR DESIGN
   ========================================= */
#cs-athos-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #f8f9fa;
    /*border: 1px solid #e9ecef;
    border-radius: 6px;*/
    /*margin-bottom: 24px;*/

}

/* LEFT SIDE: SORT */
.cs-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cs-sort-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.cs-sort-select {
    /*padding: 4px 24px 4px 8px;*/
    font-size: 14px;
    color: #333;
    background: transparent;
    border: none;
    /*font-weight: 600;*/
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M0.371582 0.334482L4.87158 5.33448L9.37158 0.334482' stroke='%233D3935' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 7px;

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    gap: 5px;

    background: #FFFFFF;
    border: 1px solid #CECDCC;
    border-radius: 5px;

}

.cs-sort-select:focus { 
    outline: none; 
    border:none;
 }

/* RIGHT SIDE: FACETS & TOGGLE */
.cs-toolbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cs-toolbar-filter {
    display: inline-flex;
}

.cs-toolbar-filter select.cs-facet-select {
    padding: 4px 24px 4px 8px;
    font-size: 14px;
    color: #333;
    background: transparent;
    border: none;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
}

.cs-facet-select:focus { outline: none; }

/* TOGGLE SWITCH (Hide out of stock) */
.cs-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    user-select: none;
    margin-left: 8px;
    padding-left: 8px;
    /*border-left: 1px solid #e0e0e0;*/
}

.cs-toggle-input { display: none; }

.cs-toggle-track {
    width: 40px;
    height: 20px;
    background: #e0e0e0;
    border-radius: 12px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.cs-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.cs-toggle-input:checked + .cs-toggle-track {
    background: #333;
}

.cs-toggle-input:checked + .cs-toggle-track .cs-toggle-thumb {
    transform: translateX(20px);
}

/* Main Grid Layout */
.cs-athos-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

/* Sidebar visible when populated by JS */
.cs-athos-sidebar,
#cs-athos-facets,
#cs-category-facets {
    display: none; /* JS shows it when there are sidebar facets */
    width: 240px;
    min-width: 220px;
    flex-shrink: 0;
    border: 1px solid #D0D8E4;
    border-radius: 8px;
    padding: 1.25rem;
    background: #fff;
    margin-top: 0 !important;
    position: relative;
    z-index: 1; /* native range-slider thumbs can otherwise paint in their
                   own compositing layer above header overlays (e.g. search
                   autocomplete) regardless of their own small z-index */
}

/* When sidebar is shown, switch to two-column grid */
.cs-athos-layout:has(.cs-athos-sidebar[style*="display: block"]),
.cs-athos-layout:has(#cs-athos-facets[style*="display: block"]),
.cs-athos-layout:has(#cs-category-facets[style*="display: block"]) {
    grid-template-columns: 240px 1fr;
}

/* Sidebar margin-top is set dynamically by JS (alignSidebarToGrid) to match
   the toolbar's rendered height — keeping the sidebar top border flush with
   the first product card regardless of toolbar content/wrapping. */

/* Results Container */
.cs-athos-content {
    width: 100%;
    min-width: 0; /* prevent overflow in grid */
}

/* ── Sidebar Facet Panel ────────────────── */

.cs-sidebar-narrow-title {

    letter-spacing: 0.01em;
    color: #3D3935;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;

    font-size: 20px;
    line-height: 26px;
    color: #001932;

}

.cs-sidebar-clear-all {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--cs-primary, #004C97);
    text-decoration: none;
    letter-spacing: 0;
    cursor: pointer;

    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    /* identical to box height, or 131% */
    text-decoration-line: underline;


    color: #004C97;


}
.cs-sidebar-clear-all:hover { text-decoration: underline; }

/* Filter icon on mobile */
.cs-sidebar-narrow-title::after {
    content: '';
    display: none; /* shown only on mobile via media query */
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cpath d='M4 5H21.5' stroke='%233D3935' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 12H21.5' stroke='%233D3935' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 19H21.5' stroke='%233D3935' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='17' cy='5' r='1.5' fill='white' stroke='%233D3935'/%3E%3Ccircle cx='8' cy='12' r='1.5' fill='white' stroke='%233D3935'/%3E%3Ccircle cx='16' cy='19' r='1.5' fill='white' stroke='%233D3935'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex-shrink: 0;
}

.cs-sidebar-narrow-title.cs-filters-open::after {
    opacity: 0.55;
}

/* Filter content wrapper — collapsible on mobile */
.cs-sidebar-filters-body {
    /* no styles needed on desktop */
}
.cs-athos-sidebar .cs-facet-group,
#cs-athos-facets .cs-facet-group,
#cs-category-facets .cs-facet-group {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #D0D8E4;    
}

.cs-sidebar-facet-header {
   
    text-transform: capitalize;
    letter-spacing: 0.08em;
    color: #6D6A67;
    padding-bottom: 0.5rem;
    margin-bottom: 0.875rem;
    /*border-bottom: 1px solid #D0D8E4;*/
    font-style: normal;
    font-size: 16px;
    line-height: 19px;
    color: #001932;

}

/* ── Sidebar Checkbox Facets ─────────────────── */

.cs-facet-group--checkbox { margin-bottom: 1.5rem; }

.cs-sidebar-checkbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cs-sidebar-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /*font-size: 0.875rem;*/
    font-size: 15px;
    cursor: pointer;
    padding: 0.25rem 0.35rem;
    border-radius: 4px;
    transition: background 0.12s;
    line-height: 1.3;
    color: var(--cs-text);
}

.cs-sidebar-checkbox-label:hover { background: var(--cs-bg-alt, #f3f4f6); }

.cs-sidebar-checkbox {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--cs-primary);
    cursor: pointer;
}

.cs-sidebar-checkbox-text {
    flex: 1;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

.cs-sidebar-checkbox-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--cs-text-muted, #9ca3af);
}

/* ── Hierarchical Category Tree ──────────────── */

.cs-cat-tree,
.cs-cat-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-cat-children {
    padding-left: 1.25rem;
    border-left: 1px solid var(--cs-border, #e5e7eb);
    margin-left: 0.5rem;
    margin-top: 0.15rem;
}

.cs-cat-item { margin: 0; }

.cs-cat-row {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.cs-cat-toggle {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 0.7rem;
    color: var(--cs-text-muted, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background 0.12s;
}

.cs-cat-toggle:hover { background: var(--cs-bg-alt, #f3f4f6); }

.cs-cat-toggle-spacer,
.cs-cat-no-cb {
    flex-shrink: 0;
    display: inline-block;
}

.cs-cat-toggle-spacer { width: 18px; }
.cs-cat-no-cb { width: 15px; }

.cs-cat-label {
    flex: 1;
    min-width: 0;
}

/* Indent depth visual cue via opacity on count */
.cs-cat-item[data-depth="1"] .cs-sidebar-checkbox-text { font-weight: 400; }
.cs-cat-item[data-depth="2"] .cs-sidebar-checkbox-text { font-size: 0.825rem; }

/* ── Price Slider ─────────────────────────── */
.cs-price-slider-wrap {
    padding: 0 0.25rem;
}

.cs-price-display {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    color: var(--cs-text, #111827);
    margin-bottom: 1.1rem;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #001932;

}

.cs-price-display-sep {
    color: var(--cs-text-muted, #9ca3af);
    font-weight: 400;
}

/* Slider track container — position:relative holds the two <input type=range> */
/*
.cs-range-slider {
    position: relative;
    height: 36px; 
    margin: 0 0 0.75rem;

}

.cs-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    transform: translateY(-50%);
    background: #CECECE;   
    border-radius: 2px;
    pointer-events: none;
}

.cs-range-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--cs-primary, #004C97);  
    border-radius: 2px;
}


.cs-range-input {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    height: 36px;
    margin: 0;
    padding: 0;
}


.cs-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--cs-primary, #004C97);
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.1s;
}
.cs-range-input::-moz-range-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--cs-primary, #004C97);
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.1s;
}

.cs-range-input:focus::-webkit-slider-thumb,
.cs-range-input:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 5px rgba(0,76,151,0.15);
    transform: scale(1.08);
}
.cs-range-input:focus::-moz-range-thumb,
.cs-range-input:hover::-moz-range-thumb {
    box-shadow: 0 0 0 5px rgba(0,76,151,0.15);
    transform: scale(1.08);
}


.cs-range-low  { z-index: 3; }
.cs-range-high { z-index: 4; }
.cs-range-low::-webkit-slider-thumb  { z-index: 3; }
.cs-range-high::-webkit-slider-thumb { z-index: 4; }

*/

/* ==========================================================
   PRICE RANGE SLIDER
   ========================================================== */

.cs-range-slider {
    position: relative;
    width: 100%;
    height: 34px;
    margin: 12px 0 0px;
}

/* ---------------------------------------
   Custom Track
---------------------------------------- */

.cs-range-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 17px;
    transform: translateY(-50%);
    background: #d9d9d9;
    border-radius: 999px;
    z-index: 1;
}

.cs-range-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #004C97;
    border-radius: 999px;

}

/* ---------------------------------------
   Range Inputs
---------------------------------------- */

.cs-range-input {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 34px;

    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
    outline: none;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    pointer-events: none;
    z-index: 3;
}

/* Chrome / Safari */

.cs-range-input::-webkit-slider-runnable-track {
    height: 2px;
    background: transparent;
    border: none;
}

.cs-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;

    width: 16px;
    height: 16px;

    margin-top: -7px;

    border-radius: 50%;
    border: 2px solid #1976d2;
    background: #fff;

    box-shadow: 0 1px 3px rgba(0,0,0,.15);

    cursor: pointer;

    pointer-events: auto;

    transition:
        transform .15s ease,
        box-shadow .15s ease;

    position: relative;
    z-index: 5;
}

/* Firefox */

.cs-range-input::-moz-range-track {
    height: 2px;
    background: transparent;
    border: none;
}

.cs-range-input::-moz-range-thumb {
    width: 16px;
    height: 16px;

    border-radius: 50%;
    border: 2px solid #1976d2;
    background: #fff;

    box-shadow: 0 1px 3px rgba(0,0,0,.15);

    cursor: pointer;

    pointer-events: auto;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

/* Edge */

.cs-range-input::-ms-track {
    height: 2px;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

/* ---------------------------------------
   Hover / Focus
---------------------------------------- */

.cs-range-input:hover::-webkit-slider-thumb,
.cs-range-input:focus::-webkit-slider-thumb {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(25,118,210,.18);
}

.cs-range-input:hover::-moz-range-thumb,
.cs-range-input:focus::-moz-range-thumb {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(25,118,210,.18);
}

.cs-range-input:focus {
    outline: none;
}

/* ---------------------------------------
   Handle stacking
---------------------------------------- */

.cs-range-low {
    z-index: 3;
}

.cs-range-high {
    z-index: 4;
}

/* ---------------------------------------
   Touch devices
---------------------------------------- */

@media (pointer: coarse) {

    .cs-range-slider {
        height: 42px;
    }

    .cs-range-input {
        height: 42px;
    }

    .cs-range-input::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
        margin-top: -9px;
    }

    .cs-range-input::-moz-range-thumb {
        width: 20px;
        height: 20px;
    }

}

/* Clear link */
.cs-price-clear {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--cs-primary, #2563eb);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 0.25rem;
}
.cs-price-clear:hover {
    color: var(--cs-primary-dark, #1d4ed8);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESULTS PRODUCTS GRID (Horizontal List)
   UPDATED: Flex Layout, Horizontal Cards
───────────────────────────────────────────────────────────────────────────── */
.cs-athos-products-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Horizontal Product Card — Figma 2026 */
.cs-athos-content .cs-product-card {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    background: #fff;
    border: none;
    border-radius: 8px;
    padding: 1.25rem;
    /*box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 2px 12px rgba(0,0,0,0.06);*/
    transition: box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid #CECDCC;
    border-radius: 10px;

}

.cs-athos-content .cs-product-card:hover {
    box-shadow: 0 4px 16px rgba(0,76,151,0.12);
}

/* Left: Image */
.cs-product-image-wrap {
    flex: 0 0 283px;
    min-height: 160px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 1.25rem;
}

.cs-product-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.75rem;
    display: block;
}

.cs-product-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--cs-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    z-index: 1;
}

/* Middle: Info */
.cs-product-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.cs-product-category-label {
    font-size: 0.72rem;
    text-transform: capitalize;
    letter-spacing: 0.06em;
    margin-bottom: 0.15rem;

    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: #004C97;


}

.cs-product-category-label a { color: var(--cs-primary); }
.cs-product-category-label a:visited { color: var(--cs-primary); }
.cs-product-category-label a:hover { color: var(--cs-primary-hover); }

.cs-product-title {
    margin: 0;
   
    color: #001932;


    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    line-height: 30px;
    color: #001932;


}

.cs-product-title a { color: #3D3935; text-decoration: none; text-transform: none !important; }
.cs-product-title a:visited { color: #3D3935; }
.cs-product-title a:hover { color: var(--cs-primary, #004C97); }
.cs-product-title { text-transform: none !important; }

.cs-product-tagline {
    font-size: 0.9375rem;
    color: var(--cs-text);
    margin: 0;
    font-weight: 500;
}

/* Product Pills & Checklist Styles */
.cs-product-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    flex-direction: column;
}

.cs-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    background: #EEF4FB;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    color: var(--cs-primary, #004C97);
    white-space: nowrap;
    border: 1px solid #B9D9EB;
    width: fit-content;
}

.cs-pill-icon {
    display: flex;
    align-items: center;
}
.cs-pill-icon svg {
    stroke: var(--cs-primary, #004C97);
    width: auto;
    height: 14px;
}

.cs-product-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px 16px;
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #001932;
}

.cs-product-checklist li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cs-check-icon {
    color: var(--cs-primary, #004C97);
    flex-shrink: 0;
}

/* Right: Options & Price */
.cs-product-side {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-left: 1.25rem;
    /*border-left: 1px solid #E0E8F0;*/
    justify-content: center;
}

/* Hide "Select Options" Label */
.cs-select-options-label {
    display: none;
}

.cs-option-select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-bg-alt);
    font-size: 0.9375rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23646970' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

.cs-product-price-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.cs-price-sale {
    font-size: 1.375rem;
    font-weight: 700;
    font-family: 'Lato';
    font-style: normal;
    font-size: 25px;
    color: #D80027;
    font-weight: 700;


}

.cs-price-divider {
    color: var(--cs-text-muted, #6D6A67);
    font-weight: 400;
    margin: 0 2px;
}

.cs-price-regular { 
    color: var(--cs-text-muted, #6D6A67);
    text-decoration: line-through;
    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    line-height: 30px;
    color: #001932;


}

.cs-price {
    font-size: 1.375rem;
    font-weight: 700;
    font-style: normal;
   
    font-size: 25px;
    line-height: 30px;
    color: #001932;

}

.cs-delivery-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--cs-text-muted, #6D6A67);
    margin: 0.15rem 0;
    line-height: 1.4;

    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #001932;

    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 10px;

    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;


}

.cs-delivery-msg svg {
    flex-shrink: 0;
    color: var(--cs-primary);
    width: 17.2px;
    height: 14px;


}

.cs-add-to-cart {
    width: 100%;
    padding: 0.7rem 1.25rem;
    background: var(--cs-accent, #F58220);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.825rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
    text-align: center;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 15px 22px;

    /* New/Orange */
    background: #F58220;
    border-radius: 8px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

    font-style: normal;
    font-weight: 700;
    font-size: 16px !important;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-transform: uppercase;

    color: #001932;

    margin-top:15px


}

.cs-add-to-cart:hover:not(:disabled) { background: var(--cs-accent-hover); }
.cs-add-to-cart:disabled {
    background: var(--cs-bg-alt);
    color: var(--cs-text-muted);
    cursor: not-allowed;
}

.cs-add-to-cart.cs-added  { background: var(--cs-success, #16a34a); color: #fff; }
.cs-add-to-cart.cs-error  { background: var(--cs-error, #d63638);   color: #fff; }
.cs-add-to-cart:disabled:not([class*="cs-added"]):not([class*="cs-error"]) { cursor: wait; }

.cs-btn-secondary {
    width: 100% !important;
    padding: 0.65rem 1.25rem;
    background: #fff;
    color: var(--cs-primary, #004C97);
    border: 1.5px solid var(--cs-primary, #004C97);
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.825rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    

    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 15px 22px;

    width: 283px;
    height: 49px;

    border: 1px solid #004C97;
    border-radius: 8px;

    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-transform: uppercase;

    color: #004C97;



}

.cs-btn-secondary:hover { background: #EEF4FB; }
.cs-btn-secondary:visited { color: #004C97; }

/* ─────────────────────────────────────────────────────────────────────────────
   PAGINATION
───────────────────────────────────────────────────────────────────────────── */
.cs-athos-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

/* The actual buttons render inside an inner <nav class="cs-pagination">
   (see renderPag() in athos-search.js / athos-category.js) — one level
   deeper than #cs-athos-pagination / #cs-category-pagination itself, so
   the flex/gap needs to live here, not just on the outer container. */
.cs-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cs-athos-pagination .cs-page-btn {
    min-width: 3.25rem;
    height: 3.25rem;
    padding: 0 0.875rem;
    background: var(--cs-bg);
    border: 2px solid var(--cs-border);
    border-radius: var(--cs-radius);
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--cs-transition);
}

.cs-page-btn:hover:not(.active) {
    background: var(--cs-bg-alt);
    border-color: var(--cs-primary);
}

.cs-page-btn.active {
    background: var(--cs-primary);
    color: #fff;
    border-color: var(--cs-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING & SKELETONS
───────────────────────────────────────────────────────────────────────────── */
.cs-athos-loading,
.cs-skeleton-card {
    /* Static — no animation. Rapid pulsing/flashing loading indicators can
       be uncomfortable or disorienting, particularly for older users, so
       skeleton placeholders are shown as a fixed state rather than an
       animated one. */
}

.cs-skeleton {
    /* Static flat color — was previously an animated shimmer sweep, removed
       for the same reason as cs-pulse above (accessibility for an older
       user base; moving/flashing placeholders can be uncomfortable). */
    background: var(--cs-bg-alt, #e8e8e8);
    border-radius: var(--cs-radius);
}

.cs-skeleton--image { width: 100%; aspect-ratio: 1; margin-bottom: 1rem; }
.cs-skeleton--label { height: 1rem; width: 60%; margin-bottom: 0.75rem; }
.cs-skeleton--item { height: 0.875rem; width: 100%; margin-bottom: 0.5rem; }
.cs-skeleton--title { height: 1.125rem; width: 90%; margin-bottom: 0.5rem; }
.cs-skeleton--price { height: 1.25rem; width: 40%; }

/* ────────────────────────────────────────────────────────────────────────────
   EMPTY & ERROR STATES
───────────────────────────────────────────────────────────────────────────── */
.cs-athos-empty-state,
.cs-error-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--cs-text-muted);
}

.cs-athos-empty-state p,
.cs-error-state p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}

.cs-retry-btn {
    padding: 0.625rem 1.5rem;
    background: var(--cs-primary);
    color: #fff;
    border: none;
    border-radius: var(--cs-radius);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--cs-transition);
}

.cs-retry-btn:hover { background: var(--cs-primary-hover); }
a.cs-retry-btn,
a.cs-retry-btn:visited {
    color: #fff !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────────────────── */

/* Tablet / Small Desktop */
@media (max-width: 1100px) {
    .cs-athos-content .cs-product-card {
        padding: 1.25rem;
    }
}

/* Mobile */
@media (max-width: 900px) {
    /* Autocomplete stacks on mobile */
    .cs-split-autocomplete {
        flex-direction: column !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important; /* was width:100% — that's 100% of the containing block, which inherits its width if that block itself overflows the viewport; left/right stretches to the actual positioned-ancestor edges instead */
        max-width: 100vw;
        box-sizing: border-box;
    }
    .cs-split-sidebar {
        flex: none !important;
        width: 100% !important;
        min-width: 100% !important;
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid #f0f0f1;
        padding-bottom: 16px;
        margin-bottom: 16px;
        order: 2; /* product recommendations show first on mobile — see .cs-split-main below */
    }
    .cs-split-main {
        order: 1;
    }
    .cs-split-autocomplete .cs-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* The theme's own close button is positioned relative to its outer
       search-box/nav-wrapper container, which was found to overflow the
       viewport on some mobile devices, taking the button off-screen with
       it regardless of the button's own right offset. Hide it here and use
       our own instead — positioned within the dropdown itself (see
       .cs-ac-mobile-close above), which isn't affected by that container's
       overflow. :not() distinguishes the two, since both now share the
       .search-close class (reusing it lets the existing global click
       listener handle closing without needing new JS). */
    .nav-wrapper.search-active .search-close:not(.cs-ac-mobile-close) {
        display: none !important;
    }
    .cs-ac-mobile-close {
        display: block;
    }

    /* Results Page Mobile */
    .cs-athos-content .cs-product-card {
        flex-direction: column;
        gap: 1rem;
    }
    .cs-product-image-wrap {
        flex: none;
        max-width: 300px;
        margin: 0 auto;
        width: 100%;
        border-right: none;
    }
    .cs-product-side {
        flex: none;
        max-width: 100%;
        border-left: none;
        border-top: 1px solid var(--cs-border);
        padding-left: 0;
        padding-top: 1rem;
    }
    .cs-product-checklist {
        grid-template-columns: 1fr;
    }
    
    /* Toolbar stacks on mobile */
    .cs-toolbar-left, .cs-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }
    .cs-sort-select {
        flex: 1;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .cs-athos-search-page { padding: 1rem; }
    
    .cs-athos-content .cs-product-card { padding: 1rem; }
    .cs-product-title { /*font-size: 1.125rem;*/ }
    .cs-price-sale { font-size: 1.25rem; }
    
    .cs-split-autocomplete .cs-products-grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DARK MODE
───────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --cs-text: #f0f0f1;
        --cs-text-muted: #a7aaad;
        --cs-border: #3c434a;
        --cs-bg: #1e1e1e;
        --cs-bg-alt: #2c2c2c;
        --cs-bg-light: #222;
        --cs-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    .cs-athos-content .cs-product-card,
    .cs-split-autocomplete .cs-product-card { border-color: #3679b4; }
    .cs-facet-toggle { background: var(--cs-bg-alt); }
    .cs-facet-toggle:hover { background: #3c3c3c; }
    .cs-sort-select, .cs-facet-select { background: var(--cs-bg); border-color: var(--cs-border); }
    .cs-athos-search-form-inner { background: var(--cs-bg); border-color: var(--cs-border); }
    .cs-athos-search-input { color: var(--cs-text); }
    .cs-athos-search-input::placeholder { color: var(--cs-text-muted); }
    .cs-athos-autocomplete-results,
    .cs-split-autocomplete { background: var(--cs-bg); border-color: var(--cs-border); }
    .cs-athos-suggestion { border-bottom-color: var(--cs-border); }
    .cs-athos-suggestion:hover { background: var(--cs-bg-alt); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY
───────────────────────────────────────────────────────────────────────────── */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================
   SEARCH INPUT OVERRIDE
   ========================= */
.nav-wrapper {
    z-index: 10;
}

/* Prevent layout jump */
.nav-wrapper .search-box {
    position: relative;
    z-index: 2;
}

/* =========================
   ACTIVE STATE
   ========================= */
.nav-wrapper.search-active {
    position: relative;
    z-index: 100000;
}

/* =========================
   SEARCH OVERLAY (CONTAINED)
   ========================= */
.nav-wrapper.search-active .search-box {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 20;
    display: flex;
    align-items: center;
    padding: 0 20px;
    transform: translateY(-8px);
    opacity: 0;
    animation: searchFadeIn 0.25s ease forwards;
}

/* =========================
   INPUT STYLING
   ========================= */
.nav-wrapper .search-box form {
    width: 100%;
    position: relative;
}

.nav-wrapper.search-active .search-box input {
    width: 100%;
    height: 52px;
    font-size: 18px;
    padding: 0 50px 0 36px;
}

.search-box .fa-search {
    /*left: 16px !important;*/
}

/* =========================
   CLOSE BUTTON
   ========================= */
.search-close {
    position: absolute;
    top: 50%;
    right: 20px; /* safe default — doesn't extend past its containing block while inactive/invisible */
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 600;
    background: none;
    border: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10000 !important;
    cursor: pointer !important;
}

.nav-wrapper.search-active .search-close {
    right: -50px; /* only extends beyond the search bar once .nav-wrapper is positioned again (search-active) */
    opacity: 1;
    pointer-events: auto;
}

/* =========================
   HIDE HEADER CONTENT
   ========================= */
.nav-wrapper.search-active .site-nav,
.nav-wrapper.search-active .header__logo,
.nav-wrapper.search-active .header__cart {
    opacity: 0;
    pointer-events: none;
}

/* =========================
   AUTOCOMPLETE (IMPORTANT)
   ========================= */
.nav-wrapper .cs-split-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 99999;
}

.nav-wrapper.search-active .cs-split-autocomplete {
    z-index: 100000;
}

/* =========================
   ANIMATION
   ========================= */
@keyframes searchFadeIn {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =========================
   SAFETY FIXES
   ========================= */
/* Narrowed from ".nav-wrapper.search-active *" — that universal selector
   re-enabled pointer-events for every descendant of .nav-wrapper during
   search-active state, not just our own search elements. Anything else
   nested in .nav-wrapper without its own explicit pointer-events:none
   override (e.g. a mega-menu panel using a different class than
   .site-nav, which IS explicitly protected above) would stay fully
   interactive — receiving real hover events and opening its own menu in
   the background, invisible but still clickable, behind our dropdown. */
.nav-wrapper.search-active .cs-athos-search-form,
.nav-wrapper.search-active .cs-athos-search-form *,
.nav-wrapper.search-active .search-box,
.nav-wrapper.search-active .search-box * {
    pointer-events: auto;
}

.nav-wrapper {
    min-height: 70px;
}

.nav-wrapper .site-nav,
.nav-wrapper .header__logo,
.nav-wrapper .header__cart {
    transition: opacity 0.2s ease;
}

.search-box {
    padding: 12px 20px;
    align-items: center;
    box-sizing: border-box;
}

.search-box input[type="text"] {
    width: 100%;
    padding: 6px 38px 8px 16px;
    font-size: 14px;
    /*border: 1px solid #333;*/
    border-radius: 100px;
    border: 1px solid #00549E !important;
    background: #FFF;
}

/* Prevent search-box from swallowing clicks when collapsed */
.nav-wrapper:not(.search-active) .search-box {
    pointer-events: none;
}

/* Re-enable pointer events only on the input and icon */
.nav-wrapper:not(.search-active) .search-box input,
.nav-wrapper:not(.search-active) .search-box i,
.nav-wrapper:not(.search-active) .search-box .fa-search {
    pointer-events: auto;
}

/* Make sure autocomplete never shows when search isn't active */
.nav-wrapper:not(.search-active) .cs-split-autocomplete {
    display: none !important;
}

/* =============================================================================
   CATEGORY ARCHIVE OVERRIDES
   ============================================================================= */
body.cs-athos-archive-page .woocommerce-products-header__title,
body.cs-athos-archive-page .woocommerce-products-header,
body.cs-athos-archive-page ul.products,
body.cs-athos-archive-page .woocommerce-pagination,
body.cs-athos-archive-page .woocommerce-result-count,
body.cs-athos-archive-page .woocommerce-ordering,
body.cs-athos-archive-page .widget_layered_nav,
body.cs-athos-archive-page .widget_price_filter,
body.cs-athos-archive-page .widget_product_categories,
body.cs-athos-archive-page .breadcrumb {
    display: none !important;
}

/* The theme's native breadcrumb (.breadcrumb) is hidden above wherever it
   naturally renders (outside our container), since our own copy — reusing
   the exact same classes so it inherits the theme's styling — is rendered
   at the top of #cs-athos-category-wrapper instead. Restore display for
   that specific copy only. */
#cs-athos-category-wrapper .breadcrumb {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

body.cs-athos-archive-page .site-main,
body.cs-athos-archive-page #primary {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* Override the 2rem top padding from .cs-athos-search-page */
.cs-athos-search-page.cs-athos-category-wrapper,
.cs-athos-category-wrapper {
    padding-top: 5rem !important;
}

/* Active Filter Breadcrumbs */
.cs-category-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--cs-bg-alt);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
}

.cs-breadcrumb-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cs-text-muted);
    white-space: nowrap;
}

.cs-breadcrumb-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    background: var(--cs-bg);
    border: 1px solid var(--cs-border);
    border-radius: 20px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all var(--cs-transition);
}

.cs-breadcrumb-tag:hover {
    border-color: var(--cs-error);
    color: var(--cs-error);
}

.cs-breadcrumb-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--cs-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0;
}

/* Facet Slider */
.cs-facet-slider-wrap { padding: 0.5rem 0.25rem; }
.cs-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--cs-text-muted);
    margin-bottom: 0.5rem;
}

.cs-facet-slider {
    width: 100%;
    accent-color: var(--cs-primary);
    cursor: pointer;
    display: block;
    margin-bottom: 0.5rem;
}

/* Color Palette Swatches */
.cs-facet-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0.5rem 0;
}

.cs-palette-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--cs-transition), border-color var(--cs-transition);
    outline: 2px solid transparent;
}

.cs-palette-swatch:hover,
.cs-palette-swatch.active {
    transform: scale(1.1);
    outline-color: var(--cs-primary);
    outline-offset: 2px;
}

/* Collapsed facet body */
.cs-facet-values[style*="display: none"] { display: none !important; }

/* Responsive */
@media (max-width: 900px) {
    .cs-athos-layout,
    .cs-athos-layout:has(.cs-athos-sidebar[style*="display: block"]),
    .cs-athos-layout:has(#cs-athos-facets[style*="display: block"]),
    .cs-athos-layout:has(#cs-category-facets[style*="display: block"]) {
        grid-template-columns: 1fr;
    }
    .cs-athos-sidebar,
    #cs-athos-facets,
    #cs-category-facets {
        width: 100%;
        min-width: 0;
        order: -1;
        margin-bottom: 1rem;
    }
}

@media (max-width: 600px) {
    .cs-athos-products-grid { grid-template-columns: 1fr !important; }
    .cs-category-breadcrumbs { flex-direction: column; align-items: flex-start; }
    .cs-breadcrumb-clear { margin-left: 0; margin-top: 0.5rem; }
}

/* =========================================
   CLEAR FILTERS BUTTON
   ========================================= */
.cs-clear-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #d63638; /* Red for reset/clear */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

.cs-clear-filters-btn:hover {
    color: #b32d2e;
    background: rgba(214, 54, 56, 0.05);
}

/* Mobile adjustment for Clear button */
@media (max-width: 768px) {
    .cs-clear-filters-btn {
        width: 100%;
        justify-content: center;
        margin: 8px 0;
        border: 1px solid #d63638;
        border-radius: 4px;
        text-decoration: none;
    }

    /* Show chevron on mobile */
    .cs-sidebar-narrow-title::after {
        display: block;
    }

    /* Collapsed by default on mobile — no content below the title, so
       drop the margin that normally separates it from the filter body
       (was leaving a large empty gap inside the box). */
    .cs-sidebar-narrow-title {
        margin-bottom: 0;
    }
    .cs-sidebar-narrow-title.cs-filters-open {
        margin-bottom: 1.25rem;
    }

    /* Collapsed by default on mobile */
    .cs-sidebar-filters-body {
        display: none;
        margin-top: 1rem;
    }

    /* Open state */
    .cs-sidebar-filters-body.cs-filters-open {
        display: block;
    }
}

/* =============================================================================
   CATEGORY ARCHIVE - MATCH SEARCH LAYOUT
   ============================================================================= */
/* Hide Default WC Layout */
body.cs-athos-archive-page .woocommerce-products-header__title,
body.cs-athos-archive-page .woocommerce-products-header,
body.cs-athos-archive-page ul.products,
body.cs-athos-archive-page .woocommerce-pagination,
body.cs-athos-archive-page .woocommerce-result-count,
body.cs-athos-archive-page .woocommerce-ordering,
body.cs-athos-archive-page .widget_layered_nav,
body.cs-athos-archive-page .widget_price_filter,
body.cs-athos-archive-page .widget_product_categories,
body.cs-athos-archive-page .breadcrumb {
    display: none !important;
}

/* The theme's native breadcrumb (.breadcrumb) is hidden above wherever it
   naturally renders (outside our container), since our own copy — reusing
   the exact same classes so it inherits the theme's styling — is rendered
   at the top of #cs-athos-category-wrapper instead. Restore display for
   that specific copy only. */
#cs-athos-category-wrapper .breadcrumb {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

/* Force Full Width Content */
body.cs-athos-archive-page .site-main,
body.cs-athos-archive-page #primary,
body.cs-athos-archive-page .content-area {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Container Spacing — padding-top set above via .cs-athos-search-page.cs-athos-category-wrapper */

/* Category sidebar visibility is controlled by JS (renderSidebar).
   The shared rule above (.cs-athos-sidebar, #cs-category-facets) sets
   display:none by default; JS sets display:block when price facets exist. */

/* Ensure Category Toolbar Uses New Styles */
#cs-category-toolbar {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 0 0;
    /*background: #f8f9fa;*/
    /*border: 1px solid #e9ecef;*/
    border-radius: 6px;
    margin-bottom: 24px;
}

/* ── Category Grid ─────────────────────────────────────────────────── */

#cs-category-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

/* ── Category grid card — matches Inogen screenshot style ───────────────── */
/* Clean white card, square image, compact title + price + orange button    */

#cs-category-products .cs-product-card--grid {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border: 1px solid #3679b4;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    box-shadow: none;
    transition: box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 15px;
    background: #FFFFFF;
    border: 1px solid #CECDCC;
    border-radius: 10px;

}

#cs-category-products .cs-product-card--grid:hover {
    box-shadow: 0 1px 8px rgba(0,0,0,0.08);
    transform: none;
}

/* Square product image */
#cs-category-products .cs-product-card--grid .cs-product-image-wrap {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    border-radius: 0;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border-bottom: 1px solid #3679b4;*/
}

#cs-category-products .cs-product-card--grid .cs-product-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: transform 0.2s ease;
}

#cs-category-products .cs-product-card--grid:hover .cs-product-image-wrap img {
    transform: scale(1.03);
}

/* Body */
#cs-category-products .cs-product-card--grid .cs-product-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.75rem 0.875rem 0.5rem;
}

/* Category label — small grey uppercase, matches screenshot */
#cs-category-products .cs-product-card--grid .cs-product-category-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 0.25rem;
}
#cs-category-products .cs-product-card--grid .cs-product-category-label a {
    color: inherit;
    text-decoration: none;
}

/* Product title — bold, 2-line clamp */
#cs-category-products .cs-product-card--grid .cs-product-title {
    line-height: 1.35;
    margin: 0 0 0.4rem;
    letter-spacing: 0.01em;
    /*display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;*/
}
#cs-category-products .cs-product-card--grid .cs-product-title a {
    color: inherit;
    text-decoration: none;
}
#cs-category-products .cs-product-card--grid .cs-product-title a:visited {
    color: inherit;
}
#cs-category-products .cs-product-card--grid .cs-product-title a:hover {
    color: var(--cs-primary, #2B5EA7);
}

/* Tagline — show as short description below title */
#cs-category-products .cs-product-card--grid .cs-product-tagline {
    display: -webkit-box;
    font-size: 0.72rem;
    color: #666;
    line-height: 1.4;
    margin: 0.2rem 0 0;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Checklist — hide on grid cards, too busy */
#cs-category-products .cs-product-checklist--compact { display: none; }

/* Side — price + buttons below the body */
#cs-category-products .cs-product-card--grid .cs-product-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem 0.875rem;
    border-left: none;
    border-top: none;
    margin-top: auto;
    width:100%;
}

/* Price — large, bold */
#cs-category-products .cs-product-card--grid .cs-product-price-wrap {
    /*font-size: 1rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 0.25rem;*/

    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #001932;

}

/* Short description — 2-line, small grey text below price */
#cs-category-products .cs-product-card--grid .cs-product-short-desc {
    font-size: 0.72rem;
    color: #666;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.4rem;
}

/* Buttons — full width, compact */
#cs-category-products .cs-product-card--grid .cs-add-to-cart {
    width: 100%;
    font-weight: 700;
    text-transform: none !important;
    border: none;
	padding: 15px 22px;
	background: #F58220;
	border-radius: 8px;

}
#cs-category-products .cs-product-card--grid .cs-add-to-cart:hover {
    background: var(--cs-accent-hover, #d96a10);
}

/* More Details — white outlined button below Add to Cart */
#cs-category-products .cs-product-card--grid .cs-btn-secondary {
    display: flex;
    width: 100% !important; 
    /*padding: 0.55rem 0.875rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none !important;
    border-radius: 0;
    background: #fff;
    color: #444;
    border: 1px solid #BBBBBB;*/
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
#cs-category-products .cs-product-card--grid .cs-btn-secondary:hover {
    background: #f5f5f5;
    color: #222;
}

/* Skeleton grid cards */
#cs-category-products .cs-skeleton-card {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #3679b4;
}

/* ── Responsive grid columns ─────────────────────────────────────────────── */
/* Desktop: 4 columns */
#cs-category-products { grid-template-columns: repeat(4, 1fr); gap: 1rem; }

@media (max-width: 1100px) {
    #cs-category-products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    #cs-category-products { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

@media (max-width: 420px) {
    #cs-category-products { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    #cs-category-products .cs-product-card--grid .cs-product-title { /*font-size: 0.72rem;*/ }
    #cs-category-products .cs-product-card--grid .cs-product-price-wrap { /* font-size: 0.875rem;*/ }
}


.cs-athos-toolbar-cont {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1rem;
    margin-bottom: 15px;
}

#cs-athos-toolbar,
#cs-category-toolbar {
    flex: 1 1 auto;
    min-width: 0;
}

/* Free shipping pill button — matches screenshot */
.cs-free-shipping-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 5px 40px;
    background: #5CC4F2;
    border: none;
    border-radius: 100px;       /* full pill shape */
    flex-shrink: 0;
    flex-basis: auto;
    line-height: 1.3;
    text-align: center;

    width: auto;
    max-width: 100%;
    min-height: 56px;
    box-sizing: border-box;
}
.cs-free-shipping-badge svg { display: none; } 
.cs-free-shipping-badge strong {
    display: block;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    color: #000000;
}
.cs-free-shipping-badge span > span,
.cs-free-shipping-badge .cs-fs-sub {
    display: block;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: #000000;
}

@media (max-width: 700px) {
    .cs-athos-toolbar-cont {
        flex-direction: column;
        align-items: stretch;
    }
    #cs-athos-toolbar,
    #cs-category-toolbar {
        min-width: 0;
    }
    .cs-free-shipping-badge {
        width: 100%;
        padding: 8px 20px;
    }
    .cs-free-shipping-badge strong { font-size: 15px; line-height: 19px; }
    .cs-free-shipping-badge .cs-fs-sub,
    .cs-free-shipping-badge span > span { font-size: 13px; line-height: 16px; }
}

/* =============================================================================
   INOGEN BRAND OVERRIDES
   Ensures Inogen orange (#F47B20) is used for all primary CTA actions,
   and Inogen blue (#2B5EA7) for links, active states, and navigation.
============================================================================= */

/* Active filter breadcrumb tags — orange pill */
.cs-breadcrumb-tag {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
    color: #fff;
}
.cs-breadcrumb-tag:hover { background: var(--cs-accent-hover); border-color: var(--cs-accent-hover); color: #fff; }

/* Clear Filters link — blue */
.cs-clear-filters-btn {
    color: var(--cs-primary);
    border-color: var(--cs-primary);
}
.cs-clear-filters-btn:hover { background: var(--cs-primary); color: #fff; }

/* Sidebar checkbox active tick — blue */
.cs-sidebar-checkbox:checked { accent-color: var(--cs-primary); }

/* Range slider fill & thumb — see .cs-range-fill and .cs-range-input above */

/* Similar searches chips — blue outline */
.cs-similar-link {
    color: var(--cs-primary);
    border-color: var(--cs-primary);
}
.cs-similar-link:hover { background: var(--cs-primary); color: #fff; }

/* Toolbar category dropdown — blue focus ring */
.cs-facet-select:focus { outline-color: var(--cs-primary); border-color: var(--cs-primary); }

/* Pagination active page — orange */
.cs-page-btn.active {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
}

/* =============================================================================
   ACCESSORIES FILTER BAR — "Find Accessories by Product"
   Only rendered on the Accessories & Parts category page.
============================================================================= */

.cs-acc-filter {
    /*background: var(--cs-bg-alt, #F5F5F5);
    border: 1px solid var(--cs-border, #E0E0E0);*/
    /*border-radius: var(--cs-radius-lg, 6px);*/
    padding: 1.25rem 0rem;
    margin-bottom: 1.75rem;
}

.cs-acc-filter__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cs-text, #222);
    margin: 0 0 1rem;
    text-transform: capitalize;
    letter-spacing: 0.03em;

    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    display: flex;
    align-items: center;
    color: #001932;

}

.cs-acc-filter__list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.cs-acc-filter__item {     
    display: flex;
    aspect-ratio: 140 / 198;
    margin: 0; 
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
}

/* Filter button */
.cs-acc-filter__btn {
    display: flex;
    flex: 1;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    min-width: 0;
    text-align: left;
    transition: opacity 0.15s;
}

.cs-acc-filter__btn:hover { opacity: 0.9; }

/* Image area — white, fills all space above the label band */
.cs-acc-filter__img-wrap {
    flex: 1;
    width: 100%;
    height: auto;
    /*padding: 10px;*/
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    transition: background 0.15s, box-shadow 0.15s;
}

/* Active — orange border around the whole tile */
.cs-acc-filter__btn.cs-acc-active {
    box-shadow: inset 0 0 0 2px var(--cs-accent, #F47B20);
}

.cs-acc-filter__img-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.cs-acc-filter__label {
    flex-shrink: 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    background: #BEE1F5;
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 19px;
    text-align: left;
    color: #001932;
}

/* Active label — orange */
.cs-acc-filter__btn.cs-acc-active .cs-acc-filter__label {
    color: var(--cs-accent, #F47B20);
}

/* "All Accessories" button — filled blue gradient across the whole tile */
.cs-acc-filter__btn[data-acc-filter=""] .cs-acc-filter__img-wrap {
    background: linear-gradient(180deg, #B9D9EB 0%, #5CC4F2 100%);
}
.cs-acc-filter__btn[data-acc-filter=""] .cs-acc-filter__label {
    background: linear-gradient(180deg, #5CC4F2 0%, #3AAEE0 100%);
    color: #001932;
    font-weight: 700;
}

@media (max-width: 900px) {
    .cs-acc-filter__list { grid-template-columns: repeat(4, 1fr); }
    .cs-acc-filter__label { font-size: 13px; padding: 8px 10px; }
}

/* Below tablet: text-only chips — no product image, uniform grid cells. */
@media (max-width: 640px) {
    .cs-acc-filter__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .cs-acc-filter__item {
        aspect-ratio: auto;
        background: #BEE1F5;
    }
    .cs-acc-filter__img-wrap {
        display: none;
    }
    .cs-acc-filter__btn {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        min-height: 56px;
    }
    .cs-acc-filter__label {
        flex: 1;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: transparent;
        font-size: 0.72rem;
        line-height: 1.2;
        padding: 8px 6px;
    }
    .cs-acc-filter__btn[data-acc-filter=""] .cs-acc-filter__img-wrap { display: none; }
    .cs-acc-filter__view-all-text { font-size: 0.72rem; }
}

/* "View All" text inside All Accessories bubble */
.cs-acc-filter__view-all-text {
    font-size: 13px;
    font-weight: 700;
    color: #001932;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

/* =============================================================================
   SEARCH RESULT TABS — Products | Articles
============================================================================= */

/* ==========================================================
   TRENDING SEARCH CHIPS — styled as plain links, not buttons
   (previously had no base styling at all, just the browser's
   default unstyled <button> appearance)
   ========================================================== */
.cs-trending-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}
.cs-trending-chip {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    color: var(--cs-primary, #004C97);
    text-decoration: none;
    text-transform: capitalize;
}
.cs-trending-chip:hover {
    color: var(--cs-primary-hover, #003a75);
}

.cs-search-tabs {
    display: flex;
    gap: 0;
    /*border-bottom: 1px solid #D0D8E4;*/
    margin-bottom: 1.25rem;

    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 15px;

    flex: none;
    order: 0;
    flex-grow: 0;
    margin-top: 25px;

}

.cs-search-tab {
    padding: 0.625rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.9375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
    box-sizing: border-box;
    padding: 10px 20px;
    gap: 5px;
    background: #FFFFFF;
    border: 1px solid #CECDCC;
    border-radius: 5px;
    flex: none;
    order: 0;
    flex-grow: 0;

}

.cs-search-tab:hover {
    background-color: var(--cs-primary, #004C97);
    border-color: var(--cs-primary, #004C97);
    color: #ffffff;
}

.cs-search-tab--active {
   background-color: var(--cs-primary, #004C97);
    border-bottom-color: var(--cs-primary, #004C97);
    font-weight: 700;
    color: #ffffff;
}

.cs-tab-count {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--cs-text-muted, #6D6A67);
    transition: color 0.15s;
}

.cs-search-tab:hover .cs-tab-count,
.cs-search-tab--active .cs-tab-count {
    color: #ffffff;
}

/* Tab panels */
.cs-tab-panel { display: block; }
.cs-tab-panel[hidden] { display: none; }

/* =============================================================================
   CONTENT / ARTICLES RESULTS
============================================================================= */


/* ── Resources tab — simple list matching inogen.com search style ─────── */
.cs-resource-list {
    display: flex;
    flex-direction: column;
}
.cs-resource-item {
    /*padding: 1.25rem 0;
    border-bottom: 1px solid #e0e0e0;*/

    box-sizing: border-box;
    padding: 30px;
    gap: 10px;
    background: #FFFFFF;
    border: 1px solid #CECDCC;
    border-radius: 10px;
    margin-bottom:30px;


}
.cs-resource-item:first-child { border-top: 0px solid #e0e0e0; }
.cs-resource-item__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
    line-height: 1.3;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 38px;
    display: flex;
    align-items: center;
    color: #003365;
    flex-grow: 0;
    text-transform: capitalize;

}
.cs-resource-item__title a { color: var(--cs-primary, #004C97); text-decoration: none; }
.cs-resource-item__title a:visited { color: var(--cs-primary, #004C97); }
.cs-resource-item__title a:hover { text-decoration: underline; }
.cs-resource-item__excerpt {
    font-size: 0.9rem;
    color: #3D3935;
    line-height: 1.6;
    margin: 0;
    
    font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
color: #001932;
}
/* Skeleton */
.cs-content-loading { display: flex; flex-direction: column; }
.cs-content-skeleton-card { padding: 1.25rem 0; border-bottom: 1px solid #e0e0e0; }
.cs-content-skeleton-card:first-child { border-top: 1px solid #e0e0e0; }
.cs-content-sk--img   { display: none; }
.cs-content-sk--title { height: 16px; margin: 0 0 10px; width: 55%; border-radius: 3px; }
.cs-content-sk--text  { height: 13px; margin: 0; width: 90%; border-radius: 3px; }

/* Merchandising banners — Left / Footer / Inline placements.
   Content/styling comes from the banner's own HTML; these just give each
   slot sensible spacing and positioning within the page. */
.cs-promo-banner--left {
    width: 100%;
    margin-bottom: 1.25rem;
}
.cs-promo-banner--left img { max-width: 100%; height: auto; display: block; }

.cs-promo-banner--footer {
    width: 100%;
    margin-top: 2rem;
}
.cs-promo-banner--footer img { max-width: 100%; height: auto; display: block; }

.cs-inline-banner {
    grid-column: 1 / -1; /* full-width row within the products grid */
    width: 100%;
    margin: 0.5rem 0;
}
.cs-inline-banner img { max-width: 100%; height: auto; display: block; }

/* Override theme rule that hides the desktop search box on mobile:
   .site-header .search-box { display: none; } @media (max-width: 768px)
   Keeps our expandable search bar usable on mobile instead of relying on
   the theme's separate mobile-menu search block. */
@media (max-width: 768px) {
    .nav-wrapper {
        flex-wrap: wrap !important;
    }
    .site-header .search-box {
        display: flex !important;
        width: 100% !important;
        flex: 1 0 100% !important; /* forces it onto its own row within the wrapping flex container */
        margin-top: 9px !important;
    }
    .site-header .search-box input[type="text"] {
        padding: 14px 40px 14px 40px !important;
        font-size: 15px !important;
    }
    #mobile-search-button {
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ==========================================================
   CATEGORY DESCRIPTION (below pagination — Parts & Accessories only)
   ========================================================== */
.inogen-category-description {
    width: 100%;
    box-sizing: border-box;
    max-width: 1400px;
    margin: 2rem auto 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid #D0D8E4;
    color: #3D3935;
    font-size: 15px;
    line-height: 1.7;
}
.inogen-category-description h1,
.inogen-category-description h2,
.inogen-category-description h3,
.inogen-category-description h4 {
    margin: 1.5rem 0 0.75rem;
    color: #1e1e1e;
}
.inogen-category-description h1:first-child,
.inogen-category-description h2:first-child,
.inogen-category-description h3:first-child,
.inogen-category-description h4:first-child {
    margin-top: 0;
}
.inogen-category-description p {
    margin: 0 0 1rem;
}
.inogen-category-description p:last-child {
    margin-bottom: 0;
}
.inogen-category-description a {
    color: #2271b1;
}

/* ==========================================================
   AUTOCOMPLETE DROPDOWN — always light, regardless of system
   dark mode. Placed after the dark-mode blocks above so it
   wins in the cascade; !important as a safety margin against
   the CSS-variable-based rules those blocks apply.
   ========================================================== */
@media (prefers-color-scheme: dark) {
    .cs-split-autocomplete,
    .cs-athos-autocomplete-results {
        background: #fff !important;
        border-color: #c3c4c7 !important;
    }
    .cs-split-autocomplete .cs-products-grid .cs-ac-product-card {
        background: #fff !important;
        border-color: #e0e0e0 !important;
    }
    .cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-image-wrap {
        background: #f5f5f5 !important;
    }
    .cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-content .cs-ac-product-cat {
        color: #6D6A67 !important;
    }
    .cs-split-autocomplete .cs-products-grid .cs-ac-product-card .cs-ac-product-content .cs-ac-product-title,
    .cs-athos-suggestion,
    .cs-split-autocomplete .cs-sidebar-link {
        color: #1e1e1e !important;
    }
    .cs-athos-suggestion:hover {
        background: #f5f5f5 !important;
    }
    /* Sort dropdown and pagination buttons — same bug as the autocomplete
       above: background switches to a dark CSS variable in dark mode, but
       text color either stays hardcoded dark (#333) or isn't set at all,
       so it doesn't follow along. Same "always light" fix. */
    .cs-sort-select,
    .cs-facet-select {
        background: #fff !important;
        color: #333 !important;
        border-color: #CECDCC !important;
    }
    .cs-athos-pagination .cs-page-btn {
        background: #fff !important;
        color: #333 !important;
        border-color: #CECDCC !important;
    }
    .cs-page-btn:hover:not(.active) {
        background: #f5f5f5 !important;
    }
    .cs-page-btn.active {
        background: var(--cs-primary, #004C97) !important;
        color: #fff !important;
    }
    /* Sidebar facet checkbox labels — same bug: color follows the dark-mode
       --cs-text variable (near-white), but the sidebar's own background
       stays hardcoded white, so the text washes out to near-invisible. */
    .cs-sidebar-checkbox-label {
        color: #1e1e1e !important;
    }
    .cs-sidebar-checkbox-count {
        color: #9ca3af !important;
    }
}

/* ==========================================================
   AUTOCOMPLETE NO-RESULTS STATE (message + "You May Like" recs)
   ========================================================== */
.cs-split-autocomplete .cs-ac-no-results {
    grid-column: 1 / -1; /* .cs-products-grid is itself a 3-column grid —
                             without this, the message/heading/grid below
                             become separate grid cells sitting side-by-side
                             instead of stacking as one block */
    display: block;
}
.cs-ac-no-results-message {
    font-size: 15px;
    line-height: 1.6;
    color: #3D3935;
    text-align: center;
    margin: 0 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}
.cs-ac-no-results-message a {
    color: #2271b1;
    text-decoration: underline;
}
.cs-ac-no-results-message a:hover {
    color: #135e96;
}
.cs-ac-no-results-heading {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6D6A67;
    text-align: center;
    margin: 0 0 1rem;
}
.cs-split-autocomplete .cs-ac-no-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}
@media (max-width: 600px) {
    .cs-split-autocomplete .cs-ac-no-results-grid {
        grid-template-columns: 1fr;
    }
}