/* Search Icon Styling */
.mobile-search-icon,
.desktop-search-icon {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b3d0f;
    width: 44px;
    height: 44px;
    position: relative;
}

.mobile-search-icon:hover,
.desktop-search-icon:hover {
    color: #1b7b89;
    background-color: rgba(27, 123, 137, 0.1);
    transform: scale(1.05);
}

/* Mobile search icon specific styling */
.mobile-search-icon {
    margin-left: 0;
}

/* Ensure search icons align with existing nav icons */
.desktop-search-icon {
    width: 44px;
    height: 44px;
    margin-right: 4px;
}

/* Search Sidebar Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9998;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Search Sidebar Base */
.search-sidebar {
    position: fixed;
    top: 0;
    height: 100%;
    width: 400px;
    max-width: 90vw;
    background: #f6f1e5;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    display: none; /* Completely remove from layout when not active */
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* Desktop defaults */
    right: 0;
    transform: translateX(100%);
    border-left: 1px solid rgba(27, 123, 137, 0.1);
}

.search-sidebar.active {
    transform: translateX(0);
    display: flex;
}

/* Mobile positioning (left side) */
@media (max-width: 991px) {
    .search-sidebar {
        left: 0;
        transform: translateX(-100%);
        width: 320px;
        border-right: 1px solid rgba(27, 123, 137, 0.1);
        right: auto;
        border-left: none;
    }
    
    .search-sidebar.active {
        transform: translateX(0);
        display: flex;
    }
}

/* Search Header */
.search-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px; /* more compact header */
    border-bottom: 1px solid rgba(27, 123, 137, 0.1);
    background: #f6f1e5;
    position: relative;
}

.search-title {
    font-size: 18px;
    font-weight: 600;
    color: #5b3d0f;
    margin: 0;
    font-family: var(--font-Montserrat, 'Montserrat'), sans-serif;
    letter-spacing: 0.5px;
}

.search-close-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #5b3d0f;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-close-btn:hover {
    color: #1b7b89;
    background-color: rgba(27, 123, 137, 0.1);
    transform: rotate(90deg) scale(1.1);
}

.search-close-btn svg {
    width: 18px;
    height: 18px;
}

/* Search Input Section */
/* Input moved into header */
.search-input-section { display: none; }

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-icon {
    position: absolute;
    left: 14px;
    width: 17px;
    height: 17px;
    color: #5b3d0f;
    opacity: 0.75;
    pointer-events: none;
    z-index: 1;
}

.search-input {
    width: 100%;
    padding: 10px 14px 10px 42px; /* reduced height */
    border: 2px solid rgba(27, 123, 137, 0.2);
    border-radius: 10px;
    background: #ffffff;
    font-size: 15px;
    color: #5b3d0f;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

/* Compact variant when input is in header */
.search-input.compact { padding: 9px 12px 9px 40px; font-size: 14px; }

/* Keep header input wrapper flexible */
.search-input-wrapper.header-input { flex: 1; }

.search-input:focus {
    border-color: #1b7b89;
    box-shadow: 0 0 0 3px rgba(27, 123, 137, 0.1);
    background: #ffffff;
}

.search-input::placeholder {
    color: rgba(91, 61, 15, 0.6);
    font-size: 15px;
}

.search-clear-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: rgba(91, 61, 15, 0.6);
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-clear-btn:hover {
    color: #1b7b89;
    background-color: rgba(27, 123, 137, 0.1);
}

.search-clear-btn svg {
    width: 17px;
    height: 17px;
}

/* Search Results Section */
.search-results-section {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: #f6f1e5;
}

/* Suggestions */
.search-suggestions {
    padding: 24px;
}

.suggestions-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: #5b3d0f;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-Montserrat, 'Montserrat'), sans-serif;
}

.suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.suggestion-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    font-size: 15px;
    color: #5b3d0f;
    font-family: inherit;
    gap: 12px;
}

.suggestion-item:hover {
    background-color: rgba(27, 123, 137, 0.08);
    color: #1b7b89;
    transform: translateX(4px);
}

.suggestion-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: rgba(91, 61, 15, 0.6);
    transition: color 0.3s ease;
}

.suggestion-item:hover .suggestion-icon {
    color: #1b7b89;
}

/* Search Results */
.search-results {
    padding: 0;
}

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.results-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: #5b3d0f;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-Montserrat, 'Montserrat'), sans-serif;
}

.results-count {
    font-size: 13px;
    color: rgba(91, 61, 15, 0.7);
    background: rgba(27, 123, 137, 0.1);
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Tabs removed - no longer needed */

/* Elegant Product Layout - matching the reference design */
.product-list { 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 0; 
}

.product-link { 
    text-decoration: none; 
    display: block; 
    cursor: pointer; 
    transition: background-color 0.2s ease, transform 0.2s ease; 
    padding: 12px 16px;
    border-bottom: 1px solid rgba(27, 123, 137, 0.08);
}

.product-link:hover { 
    background-color: rgba(27, 123, 137, 0.04);
    transform: translateX(2px); 
}

.product-link:last-child {
    border-bottom: none;
}

.product-item { 
    display: grid; 
    grid-template-columns: 70px 1fr; 
    gap: 14px; 
    align-items: center; 
}

.product-thumb { 
    width: 70px; 
    height: 70px; 
    border-radius: 12px; 
    background: linear-gradient(135deg, rgba(27,123,137,0.08), rgba(91,61,15,0.05)); 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #1b7b89; 
    font-size: 28px;
    border: 1px solid rgba(27, 123, 137, 0.1);
}

.product-thumb img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

.product-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-title { 
    font-size: 13px; 
    color: #5b3d0f; 
    line-height: 1.3; 
    margin: 0;
    font-weight: 400;
}

.product-price-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-price { 
    font-size: 13px; 
    font-weight: 600; 
    color: #1b7b89; 
}

.product-original-price {
    font-size: 13px;
    color: rgba(91, 61, 15, 0.6);
    text-decoration: line-through;
    font-weight: 400;
}

.product-link:hover .product-title { 
    color: #1b7b89; 
}

.product-link:focus { 
    outline: 2px solid #1b7b89; 
    outline-offset: 2px; 
    border-radius: 8px; 
}

/* Minimalistic View All Results Button
   Sibling of .search-results-section (not nested inside it), so it stays
   pinned as a footer row and never scrolls away with the result list. */
.view-all-results {
    flex-shrink: 0;
    padding: 14px 20px;
    border-top: 1px solid rgba(27, 123, 137, 0.08);
    background: #f6f1e5;
    box-shadow: 0 -6px 12px -8px rgba(0, 0, 0, 0.12);
}

.view-all-results-btn { 
    width: 100%; 
    background: transparent;
    color: #1b7b89; 
    border: 1px solid rgba(27, 123, 137, 0.2);
    border-radius: 8px; 
    padding: 14px 20px; 
    font-weight: 500; 
    font-size: 14px;
    letter-spacing: 0.3px; 
    cursor: pointer; 
    transition: all 0.2s ease;
    font-family: inherit;
}

.view-all-results-btn:hover { 
    background: rgba(27, 123, 137, 0.05);
    border-color: #1b7b89;
    color: #1b7b89;
}

/* Elegant Loading State */
.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    color: #5b3d0f;
    background: #f6f1e5;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(27, 123, 137, 0.15);
    border-top: 3px solid #1b7b89;
    border-radius: 50%;
    animation: elegantSpin 1.2s linear infinite;
    margin-bottom: 20px;
}

@keyframes elegantSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.search-loading p {
    font-size: 15px;
    margin: 0;
    color: rgba(27, 123, 137, 0.8);
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* No Results State */
.search-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 24px;
    color: #5b3d0f;
}

.no-results-icon {
    color: rgba(91, 61, 15, 0.4);
    margin-bottom: 16px;
}

.no-results-icon svg {
    width: 48px;
    height: 48px;
}

.search-no-results h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #5b3d0f;
}

.search-no-results p {
    font-size: 14px;
    color: rgba(91, 61, 15, 0.7);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.browse-categories-btn {
    background: #1b7b89;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.browse-categories-btn:hover {
    background: #165f6b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 123, 137, 0.3);
}

/* Smooth scrollbar for sidebar */
.search-results-section::-webkit-scrollbar {
    width: 6px;
}

.search-results-section::-webkit-scrollbar-track {
    background: transparent;
}

.search-results-section::-webkit-scrollbar-thumb {
    background: rgba(27, 123, 137, 0.3);
    border-radius: 3px;
}

.search-results-section::-webkit-scrollbar-thumb:hover {
    background: rgba(27, 123, 137, 0.5);
}

/* Animation classes for smooth transitions */
.search-sidebar {
    will-change: transform;
}

.search-overlay {
    will-change: opacity;
}

/* Focus management for accessibility */
.search-sidebar:focus-within .search-input {
    border-color: #1b7b89;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .search-sidebar {
        width: 280px;
    }
    
    .search-sidebar-header {
        padding: 16px 20px;
    }
    
    .search-input-section {
        padding: 20px;
    }
    
    .search-suggestions,
    .search-results {
        padding: 20px;
    }
}

/* Integration with existing header styles */
.nav-links-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Ensure search icons don't interfere with existing navigation */
.mobile-search-icon:focus,
.desktop-search-icon:focus {
    outline: 2px solid #1b7b89;
    outline-offset: 2px;
}

/* Prevent FOUC (Flash of Unstyled Content) for search sidebar */
#search-sidebar-container {
    visibility: hidden;
}

#search-sidebar-container:has(#search-sidebar) {
    visibility: visible;
}

/* Add subtle animation on page load - DISABLED to prevent horizontal overflow */
/* 
.search-sidebar,
.search-overlay {
    opacity: 0;
    animation: fadeInReady 0.3s ease forwards;
    animation-delay: 0.1s;
}

@keyframes fadeInReady {
    from { opacity: 0; }
    to { opacity: 1; }
}
*/

/* --- Minimal, borderless header search overrides --- */
/* Move input into header (HTML already updated) and style it cleanly */
.search-sidebar-header { gap: 12px; padding: 12px 16px; }
.search-input-wrapper.header-input { flex: 1; }
.search-input-section { display: none !important; }

/* Borderless input with transparent background */
.search-input {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 10px 28px 10px 30px !important; /* compact */
    font-size: 15px !important;
}
.search-input.compact { padding: 8px 26px 8px 28px !important; font-size: 14px !important; }

/* Teal accents like the reference */
.search-input-icon { left: 10px !important; color: var(--text-teal, #1b7b89) !important; width: 16px !important; height: 16px !important; opacity: 0.9 !important; }
.search-input::placeholder { color: rgba(27,123,137,0.85) !important; font-size: 14px !important; }
.search-input:focus { background: transparent !important; box-shadow: none !important; }

/* Clear/close buttons compact and teal */
.search-clear-btn { right: 6px !important; padding: 6px !important; color: var(--text-teal, #1b7b89) !important; background: transparent !important; }
.search-clear-btn:hover { color: #165f6b !important; background: transparent !important; }
.search-close-btn { padding: 6px !important; color: var(--text-teal, #1b7b89) !important; background: transparent !important; }
.search-close-btn:hover { color: #165f6b !important; background: transparent !important; transform: none !important; }
/* ============================================
   TYPOGRAPHY - one family for the whole panel

   The panel is injected into every page, and its class names (.product-title,
   .product-category, .product-price, .product-details) collide with the page
   stylesheets. On /products that meant the product name rendered in Delius
   (styles.css) while the category rendered in Inter, uppercase and bold
   (products-lite.css) - three different families inside one list.

   Everything below is scoped with #search-sidebar, whose id outranks those
   class selectors, and states its own family, size, weight, case and tracking
   so nothing is inherited by accident. Hierarchy comes from size and weight,
   not from switching typeface.
   ============================================ */

#search-sidebar {
    --search-font: 'Quicksand', 'Nunito Sans', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-family: var(--search-font);
}

#search-sidebar .search-input,
#search-sidebar .search-title,
#search-sidebar .suggestions-header h4,
#search-sidebar .suggestion-item,
#search-sidebar .results-header h4,
#search-sidebar .results-count,
#search-sidebar .results-section-header h5,
#search-sidebar .product-title,
#search-sidebar .product-category,
#search-sidebar .product-price,
#search-sidebar .product-price-original,
#search-sidebar .product-original-price,
#search-sidebar .product-variants,
#search-sidebar .stock-badge,
#search-sidebar .discount-badge,
#search-sidebar .category-title,
#search-sidebar .category-type,
#search-sidebar .view-all-results-btn,
#search-sidebar .search-no-results h4,
#search-sidebar .search-no-results p,
#search-sidebar .search-loading p,
#search-sidebar .browse-categories-btn {
    font-family: var(--search-font);
}

/* Section labels - quiet, tracked capitals */
#search-sidebar .suggestions-header h4,
#search-sidebar .results-header h4,
#search-sidebar .results-section-header h5 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Result rows. Page stylesheets set case, tracking and even display on these
   same class names, so pin every property the row depends on. */
#search-sidebar .product-title,
#search-sidebar .category-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #5b3d0f;
    text-transform: none;
    letter-spacing: normal;
    display: block;
    margin: 0;
}

/* styles.css styles .category-title for the mobile menu with !important, which
   outranks any selector here - match it so category rows keep the panel's type */
#search-sidebar .category-title {
    font-family: var(--search-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

#search-sidebar .product-category,
#search-sidebar .category-type {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(91, 61, 15, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0;
}

#search-sidebar .product-category {
    display: block;
}

#search-sidebar .product-price {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #1b7b89;
    text-transform: none;
    letter-spacing: normal;
    display: inline; /* products-lite.css turns .product-price into a flex box */
    margin: 0;
}

#search-sidebar .product-price-original,
#search-sidebar .product-original-price {
    font-size: 12px;
    font-weight: 500;
    color: rgba(91, 61, 15, 0.55);
    text-decoration: line-through;
    letter-spacing: normal;
}

#search-sidebar .product-variants {
    font-size: 11px;
    font-weight: 500;
    color: #1b7b89;
    text-transform: none;
    letter-spacing: normal;
}

#search-sidebar .stock-badge,
#search-sidebar .discount-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.2px;
}

/* Query highlight sits inside the title - keep it in the same face */
#search-sidebar mark {
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
}