/* ============================================================
   FIX: Desktop Left-Side Border Radius
   ============================================================ */
@media (min-width: 1200px) {
    /* 1. Ensure the outer container doesn't clip the border line */
    header.header .ps-form--quick-search {
        border: 1px solid #000000 !important;
        border-radius: 26px !important;
        overflow: visible !important; 
    }
/* Ensure the category selector doesn't hide the left radius */
header.header .ps-form--quick-search .form-group--icon {
    border: none !important;
    border-right: 0px solid #fff !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    padding: 0 10px !important;
    
    background-color: transparent !important; 
}
    /* 3. Ensure the actual Select element inside is also rounded */
    header.header .ps-form--quick-search .product-category-select {
        border-radius: 26px 0 0 26px !important;
        padding-left: 15px !important;
        background-color: transparent !important;
        border: none !important;
    }
}

/* ============================================================
   2. SHARED BLACK BUTTON (Ensuring it sits correctly on Desktop)
   ============================================================ */
header.header .ps-form--quick-search button[type="submit"] {
    position: absolute !important;
    right: -1px !important; 
    top: -1px !important;
    height: calc(100% + 2px) !important;
    background-color: #000000 !important;
    border: 1px solid #000000 !important;
    border-radius: 0 26px 26px 0 !important;
    width: 50px !important;
    z-index: 10;
}

/* ============================================================
   2. MOBILE & TABLET SEARCH (Visible Borders & 90% Width)
   ============================================================ */

/* Tablet & Mobile Container */
.ps-search--mobile {
    display: block !important;
    visibility: visible !important;
    padding: 10px 0 !important;
}

/* Apply 90% width on Tablet (768px to 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .ps-search--mobile .ps-form--search-mobile {
        width: 90% !important;
        margin: 0 auto !important; /* Centers the form */
    }
}

/* Apply 95% width on small Mobile to ensure borders don't touch screen edges */
@media (max-width: 767px) {
    .ps-search--mobile .ps-form--search-mobile {
        width: 95% !important;
        margin: 0 auto !important;
    }
}

/* The actual search box for Mobile/Tablet */
.ps-search--mobile .form-group--nest {
    position: relative;
    display: flex !important;
    align-items: center;
    background-color: #ffffff !important;
    border: 1px solid #000000 !important; /* Visible Black Border */
    border-radius: 26px !important;       /* 26px Radius */
    height: 40px !important;
    box-shadow: none;
    z-index: 100;
    overflow: visible !important; /* Prevents clipping of the border line */
}

/* Input field inside the box */
.ps-search--mobile .input-search-product {
    background-color: transparent !important;
    border: none !important;
    height: 100% !important;
    flex-grow: 1;
    padding-left: 20px !important;
    padding-right: 55px !important; /* Space for the black button */
    font-size: 14px;
    border-radius: 26px 0 0 26px !important;
}

/* ============================================================
   3. SHARED BLACK SEARCH BUTTON (Desktop, Tablet, Mobile)
   ============================================================ */
header.header .ps-form--quick-search button[type="submit"],
.ps-search--mobile .form-group--nest button {
    position: absolute !important;
    right: -1px !important; /* Overlaps border for a clean look */
    top: -1px !important;
    width: 50px !important;
    height: calc(100% + 2px) !important;
    background-color: #000000 !important; /* Black Background */
    border: 1px solid #000000 !important;
    border-radius: 0 26px 26px 0 !important; /* Rounded Right side */
    color: #ffffff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0 !important;
}

header.header .ps-form--quick-search button[type="submit"] i,
.ps-search--mobile .form-group--nest button i {
    color: #ffffff !important;
    font-size: 18px !important;
}

/* ============================================================
   4. SEARCH RESULTS DROPDOWN (Ensures visibility)
   ============================================================ */
.ps-panel--search-result {
    display: none;
    position: absolute;
    top: 100% !important;
    left: 0;
    width: 100%;
    z-index: 9999 !important;
    background: #ffffff;
    border: 1px solid #e1e1e1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.ps-panel--search-result.active {
    display: block !important;
}

/* Spinner Icon */
.spinner-icon {
    position: absolute;
    right: 55px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 11;
}
/* ============================================================
   MOBILE BOTTOM BAR — Premium Restyle
   ============================================================ */

.navigation--list {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #FFFFFF !important;
    border-top: none !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.10) !important;
    padding: 0 !important;
    z-index: 100000 !important;
}

.navigation--list .navigation__content {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.navigation--list .navigation__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 10px 4px 8px !important;
    color: #555 !important;
    text-decoration: none !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    transition: all 0.15s ease !important;
    flex: 1 !important;
    position: relative !important;
    -webkit-tap-highlight-color: transparent !important;
}

.navigation--list .navigation__item i {
    font-size: 22px !important;
    color: #333 !important;
    transition: all 0.15s ease !important;
}

.navigation--list .navigation__item span {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #555 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.navigation--list .navigation__item:active {
    color: #FF6B35 !important;
}

.navigation--list .navigation__item:active i {
    color: #FF6B35 !important;
    transform: scale(1.1) !important;
}

.navigation--list .navigation__item:active span {
    color: #FF6B35 !important;
}

/* ============================================================
   MOBILE SEARCH SIDEBAR — Premium Restyle
   ============================================================ */

#search-sidebar {
    background: #fff !important;
}

#search-sidebar .ps-panel__header {
    padding: 16px 14px 12px !important;
    background: #fff !important;
    border-bottom: 1px solid #F2F2F2 !important;
}

#search-sidebar .ps-form--search-mobile .form-group--nest {
    display: flex !important;
    align-items: center !important;
    background: #F5F5F5 !important;
    border: 2px solid #FF6B35 !important;
    border-radius: 12px !important;
    height: 46px !important;
    box-shadow: 0 2px 12px rgba(255, 107, 53, 0.08) !important;
    overflow: visible !important;
    position: relative !important;
}

#search-sidebar .ps-form--search-mobile .input-search-product {
    background: transparent !important;
    border: none !important;
    height: 100% !important;
    flex: 1 !important;
    padding: 0 48px 0 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #1A1A1A !important;
    border-radius: 12px 0 0 12px !important;
}

#search-sidebar .ps-form--search-mobile .input-search-product::placeholder {
    color: #AAA !important;
    font-weight: 400 !important;
}

#search-sidebar .ps-form--search-mobile .form-group--nest button {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 46px !important;
    height: 100% !important;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%) !important;
    border: none !important;
    border-radius: 0 10px 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease !important;
}

#search-sidebar .ps-form--search-mobile .form-group--nest button:active {
    opacity: 0.85 !important;
}

#search-sidebar .ps-form--search-mobile .form-group--nest button i {
    color: #fff !important;
    font-size: 18px !important;
}

/* Search results dropdown */
#search-sidebar .ps-panel--search-result {
    border-radius: 0 0 12px 12px !important;
    border: 1px solid #F0F0F0 !important;
    border-top: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    margin-top: 4px !important;
}

/* Department button in the header top (above nav) — rounded pill style */
.header__top .menu--product-categories {
    width: 256px;
    padding-left: 15px;
    background-color: #f5f5f5;
    color: #191919;
    border-radius: 30px;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    height: 40px !important;
}