/* TK Smart Search ─────────────────────────────────────────────────── */

:root {
    --tk-accent:    #f97316;
    --tk-accent-bg: #fff7ed;
    --tk-text:      #111827;
    --tk-sub:       #6b7280;
    --tk-border:    #e5e7eb;
    --tk-radius:    12px;
    --tk-shadow:    0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
}

/* ── Toolbar catégorie (search + tri sur la même ligne) ─────────────── */

.tk-shop-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tk-archive-search {
    flex: 1 1 260px;
    min-width: 200px;
    max-width: 480px;
}

.tk-shop-toolbar .woocommerce-ordering {
    margin: 0 !important;
    flex-shrink: 0;
}

/* ── Champ de recherche (partagé archive + shortcode) ───────────────── */

.tk-search-wrap { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }

.tk-search-form { margin: 0; }

.tk-search-inner {
    position: relative;
    display: flex;
    align-items: center;
    background: #f9fafb;
    border: 1.5px solid var(--tk-border);
    border-radius: 50px;
    padding: 0 6px 0 16px;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.tk-search-inner:focus-within {
    background: #fff;
    border-color: var(--tk-accent);
    box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}

.tk-search-icon {
    color: var(--tk-sub);
    flex-shrink: 0;
    transition: color .2s;
}
.tk-search-inner:focus-within .tk-search-icon { color: var(--tk-accent); }

.tk-search-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 11px 10px !important;
    font-size: 14px !important;
    color: var(--tk-text) !important;
    min-width: 0;
}
.tk-search-input::placeholder { color: #9ca3af !important; }

.tk-search-btn {
    flex-shrink: 0;
    background: var(--tk-accent);
    border: none;
    border-radius: 40px;
    padding: 8px 18px;
    cursor: pointer;
    color: #fff;
    fill: currentColor;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s, transform .1s;
}
.tk-search-btn:hover  { background: #ea6e0a; }
.tk-search-btn:active { transform: scale(.97); }

/* ── Dropdown ───────────────────────────────────────────────────────── */

.tk-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius);
    box-shadow: var(--tk-shadow);
    z-index: 99999;
    overflow: hidden;
    animation: tkFade .15s ease-out;
}
@keyframes tkFade {
    from { opacity:0; transform:translateY(-5px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Liste de résultats ─────────────────────────────────────────────── */

.tk-search-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--tk-border) transparent;
}

.tk-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background .1s;
}
.tk-search-item:hover,
.tk-search-item.tk-selected { background: var(--tk-accent-bg); }

.tk-search-thumb {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
}
.tk-search-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.tk-search-no-img    { width:100%; height:100%; background:linear-gradient(135deg,#f3f4f6,#e5e7eb); }

.tk-search-info  { flex:1; min-width:0; }

.tk-search-name {
    display: block;
    font-size: 14px; font-weight: 500;
    color: var(--tk-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.4;
}
.tk-search-name mark {
    background: transparent;
    color: var(--tk-accent);
    font-weight: 700;
    padding: 0;
}

.tk-search-meta {
    display: flex; align-items: center; gap: 7px;
    margin-top: 3px; flex-wrap: wrap;
}
.tk-search-price     { font-size:13px; font-weight:600; color:var(--tk-accent); }
.tk-search-price del { color:var(--tk-sub); font-weight:400; margin-right:3px; }
.tk-search-price ins { text-decoration:none; }
.tk-search-sku       { font-size:11px; color:var(--tk-sub); }
.tk-search-category  {
    font-size:11px; color:var(--tk-sub);
    background:#f3f4f6; padding:1px 6px; border-radius:20px;
}

.tk-badge            { font-size:11px; font-weight:600; padding:2px 7px; border-radius:20px; }
.tk-badge-stock      { background:#dcfce7; color:#16a34a; }
.tk-badge-out        { background:#fee2e2; color:#dc2626; }

.tk-search-footer {
    border-top: 1px solid var(--tk-border);
    padding: 9px 14px;
}
.tk-search-footer a {
    display: block; text-align: center;
    font-size:13px; font-weight:500;
    color: var(--tk-accent); text-decoration:none;
}
.tk-search-footer a:hover { text-decoration:underline; }

.tk-search-empty {
    padding: 20px 14px;
    font-size:13px; color:var(--tk-sub); text-align:center;
}

.tk-search-loading {
    display:flex; justify-content:center; align-items:center;
    gap:6px; padding:20px;
}
.tk-search-loading span {
    width:7px; height:7px;
    background:var(--tk-accent); border-radius:50%;
    animation:tkBounce .55s infinite alternate;
}
.tk-search-loading span:nth-child(2) { animation-delay:.15s; }
.tk-search-loading span:nth-child(3) { animation-delay:.30s; }
@keyframes tkBounce {
    from { transform:translateY(0);   opacity:.5; }
    to   { transform:translateY(-7px);opacity:1; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tk-header-search-inner { padding: 0 12px; }
    .tk-search-btn { padding: 8px 12px; font-size:0; width:38px; justify-content:center; }
    .tk-search-btn svg { display:block; width:15px; height:15px; }
    .tk-search-thumb { width:40px; height:40px; }
}