/**
 * DESFinder - Estilos CKC Auto Sport Design System
 * Compatible con: new.ckcautosport.com
 */

/* ========================================
   DEFAULT TRIGGER (header, no custom selector)
   ========================================
   The searchbox template emits these classes; their old rules lived in
   front_old.css, which is registered nowhere — shops without a custom
   TRIGGER_SELECTOR got a bare input (finding SEO-06). Explicit dimensions
   keep the element from reflowing when theme styles land (CLS), and the
   same appearance tokens as the modal input make the Front Appearance
   fieldset style both surfaces as one system. */
.desfinder-trigger {
    position: relative;
    max-width: 600px;
    width: 100%;
}

.desfinder-trigger-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 45px 10px 15px;
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 15px;
    color: var(--desfinder-input-color, #232323);
    background: var(--desfinder-input-bg, #ffffff);
    border: var(--desfinder-input-border, 2px solid #dddddd);
    border-radius: var(--desfinder-radius-input, 25px);
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.desfinder-trigger-input:hover,
.desfinder-trigger-input:focus {
    border-color: var(--desfinder-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.desfinder-trigger-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--desfinder-input-icon, #7a7a7a);
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* ========================================
   MODAL FULLSCREEN
   ======================================== */
.desfinder-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483647;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.desfinder-modal.active {
    opacity: 1;
    visibility: visible;
}

.desfinder-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.desfinder-layer {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--desfinder-surface, #ffffff);
    overflow: hidden;
    transition: transform 0.3s ease;
    /* Para swipe gesture */
}

/* ========================================
   HEADER
   ======================================== */
.desfinder-header {
    flex-shrink: 0;
    padding: 20px;
    background: var(--desfinder-surface, #ffffff);
    border-bottom: 1px solid var(--desfinder-border, #e6e5e5);
}

.desfinder-searchbox {
    max-width: 800px;
    margin: 0 auto;
    position: static;
    display: flex;
    align-items: center;
    gap: 0;
}

/* Wrapper que agrupa icono de lupa + input — el icono se posiciona relativo a este */
.desfinder-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

/* Logo en header del modal — visible en desktop y mobile */
.desfinder-header-logo {
    display: flex;
    flex-shrink: 0;
    height: var(--desfinder-logo-height, 36px);
    margin-right: 12px;
    margin-left: 0;
    align-items: center;
    text-decoration: none;
}

.desfinder-header-logo img {
    height: var(--desfinder-logo-height, 36px);
    width: auto;
    max-width: var(--desfinder-logo-max-width, 140px);
    object-fit: contain;
    display: block;
}

.desfinder-searchbox-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--desfinder-input-icon, #7a7a7a);
    pointer-events: none;
    display: flex;
    align-items: center;
    z-index: 1;
}

.desfinder-modal-input {
    flex: 1;
    width: 100%;
    padding: 12px 60px 12px 50px;
    font-family: var(--desfinder-font-display, 'Space Grotesk', sans-serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--desfinder-input-color, #000000);
    background-color: var(--desfinder-input-bg, #fcfcfc);
    border: var(--desfinder-input-border, none);
    border-radius: var(--desfinder-radius-input, 0px);
    outline: none;
    transition: all 0.3s ease;
    /* Optimización para móviles */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.desfinder-modal-input:focus {
    background-color: var(--desfinder-input-bg-focus, #f5f5f5);
}

/* Sin la X nativa del navegador en type="search" (Chrome, Edge, Safari):
   el modal ya tiene su propio botón de cerrar */
.desfinder-modal-input::-webkit-search-cancel-button,
.desfinder-modal-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.desfinder-modal-input::-ms-clear {
    display: none;
}

.desfinder-modal-input.searching {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"%23ff3602\" stroke-width=\"3\"><animate attributeName=\"stroke-dasharray\" from=\"0 62.83\" to=\"62.83 0\" dur=\"1s\" repeatCount=\"indefinite\"/></circle></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 70px) center;
    background-size: 20px 20px;
}

.desfinder-close-btn {
    width: 44px;
    height: 44px;
    border: var(--desfinder-btn-border, none);
    background: var(--desfinder-btn-bg, #f6f6f6);
    border-radius: var(--desfinder-radius-btn, 0px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    transition: all 0.2s ease;
    color: var(--desfinder-btn-color, #232323);
    /* Optimización táctil */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
}

.desfinder-close-btn:hover {
    background: var(--desfinder-btn-hover-bg, var(--desfinder-accent));
    color: var(--desfinder-btn-hover-color, #ffffff);
}

/* Feedback táctil en móvil */
.desfinder-close-btn:active {
    transform: scale(0.95);
}

/* ========================================
   CONTENT
   ======================================== */
.desfinder-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 30px 20px;
    background: var(--desfinder-surface, #ffffff);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* Scroll suave en iOS */
}

.desfinder-section {
    max-width: 1200px;
    margin: 0 auto 40px;
}

.desfinder-section-title {
    font-family: var(--desfinder-font-heading, 'Rubik', sans-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    color: var(--desfinder-title-color, #232323);
    text-transform: uppercase;
    margin: 0 0 20px 0;
}

/* ========================================
   SUGGESTIONS
   ======================================== */
.desfinder-suggestions {
    margin-bottom: 30px;
}

.desfinder-suggestions-title {
    font-family: var(--desfinder-font-heading, 'Rubik', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.desfinder-suggestions-title .material-icons {
    font-size: 18px;
}

.desfinder-recent-searches,
.desfinder-default-suggestions {
    margin-bottom: 20px;
}

.desfinder-recent-searches:last-child,
.desfinder-default-suggestions:last-child {
    margin-bottom: 0;
}

.desfinder-suggestion-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--desfinder-chip-bg, #f6f6f6);
    color: var(--desfinder-chip-color, #232323);
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 14px;
    font-weight: 500;
    border: var(--desfinder-chip-border, none);
    border-radius: var(--desfinder-radius-chip, 20px);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
    margin: 5px;
}

.desfinder-suggestion-item .material-icons {
    font-size: 16px;
    opacity: 0.6;
}

.desfinder-suggestion-item:hover {
    background: var(--desfinder-chip-hover-bg, var(--desfinder-accent));
    color: var(--desfinder-chip-hover-color, #ffffff);
}

.desfinder-suggestion-item:hover .material-icons {
    opacity: 1;
}

.desfinder-recent-item {
    background: #e8f4fd;
    color: #004085;
}

.desfinder-recent-item:hover {
    background: #004085;
    color: #ffffff;
}

/* Popular Searches */
.desfinder-popular-searches {
    margin-bottom: 30px;
}

.desfinder-popular-searches-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.desfinder-popular-search-item {
    padding: 12px 16px;
    background: linear-gradient(135deg, #f6f6f6 0%, #ececec 100%);
    border-left: 3px solid var(--desfinder-accent);
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.desfinder-popular-search-item:hover {
    background: linear-gradient(135deg, var(--desfinder-accent) 0%, var(--desfinder-accent-dark) 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--desfinder-accent);
}

.desfinder-popular-search-item .popular-term {
    font-family: var(--desfinder-font-heading, 'Rubik', sans-serif);
    font-size: 15px;
    font-weight: 600;
}

.desfinder-popular-search-item .popular-count {
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 12px;
    opacity: 0.7;
}

.desfinder-popular-search-item:hover .popular-count {
    opacity: 1;
}

.desfinder-suggestion-chip {
    padding: 10px 18px;
    /* Aumentado para mejor tap targeting */
    background: var(--desfinder-chip-bg, #f6f6f6);
    color: var(--desfinder-chip-color, #232323);
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 14px;
    font-weight: 500;
    border: var(--desfinder-chip-border, none);
    border-radius: var(--desfinder-radius-chip, 0px);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
    /* Área mínima táctil */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.desfinder-suggestion-chip:hover {
    background: var(--desfinder-chip-hover-bg, var(--desfinder-accent));
    color: var(--desfinder-chip-hover-color, #ffffff);
}

/* ========================================
   PRODUCTS GRID
   ======================================== */
.desfinder-featured-products,
.desfinder-personal-products,
.desfinder-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    max-width: 100%;
    margin: 0;
}

.desfinder-product-card {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background: var(--desfinder-card-bg, #ffffff);
    border: var(--desfinder-card-border, 1px solid #e6e5e5);
    border-radius: var(--desfinder-radius-card, 0px);
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Optimizaciones de hardware acceleration para transiciones */
.desfinder-product-card,
.desfinder-suggestion-chip,
.desfinder-close-btn,
.desfinder-mobile-filters-toggle {
    will-change: transform;
    transform: translateZ(0);
}

.desfinder-product-card:hover {
    background: var(--desfinder-card-hover-bg, #f5f5f5);
    box-shadow: var(--desfinder-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
    transform: translateY(-2px) translateZ(0);
}

.desfinder-category-card {
    border: var(--desfinder-category-border, 2px solid var(--desfinder-accent));
    background: var(--desfinder-category-bg, #fff8f6);
    justify-content: center;
    align-items: center;
    min-height: 320px;
}

.desfinder-category-card:hover {
    border: var(--desfinder-category-border, 2px solid var(--desfinder-accent));
    filter: brightness(0.96);
}

.desfinder-category-icon {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    color: var(--desfinder-accent);
    margin-bottom: 10px;
}

.desfinder-category-icon i {
    font-size: 56px;
}

.desfinder-category-thumbnail {
    height: 220px;
    width: 100%;
    overflow: hidden;
    border-radius: var(--desfinder-radius-card, 8px) var(--desfinder-radius-card, 8px) 0 0;
    margin-bottom: 10px;
}

.desfinder-category-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.desfinder-category-card--thumb:hover .desfinder-category-thumbnail img {
    transform: scale(1.04);
}

.desfinder-category-label {
    font-family: var(--desfinder-font-display, 'Space Grotesk', sans-serif);
    font-size: 10px;
    font-weight: 700;
    color: var(--desfinder-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-align: center;
}

.desfinder-category-count {
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 12px;
    font-weight: 400;
    color: var(--desfinder-muted-color, #7a7a7a);
    text-align: center;
    margin-top: 5px;
}

.desfinder-product-image-wrap {
    position: relative;
    overflow: hidden;
}

.desfinder-product-image {
    width: 100%;
    height: 220px;
    object-fit: contain;
    background: #ffffff;
    margin-bottom: 12px;
}

/* Out-of-stock: dim image + banner */
.desfinder-product-card--oos .desfinder-product-image {
    opacity: 0.45;
    filter: grayscale(40%);
}

.desfinder-out-of-stock-badge {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--desfinder-oos-badge-bg, rgba(0, 0, 0, 0.62));
    color: var(--desfinder-oos-badge-color, #fff);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
}

.desfinder-product-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.desfinder-product-reference {
    font-family: var(--desfinder-font-display, 'Space Grotesk', sans-serif);
    font-size: 11px;
    font-weight: 500;
    color: var(--desfinder-muted-color, #7a7a7a);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.desfinder-product-name {
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: var(--desfinder-card-title-color, #232323);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.desfinder-product-price {
    font-family: var(--desfinder-font-display, 'Space Grotesk', sans-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--desfinder-card-price-color, var(--desfinder-accent));
}

.desfinder-product-price .desfinder-login-required,
.desfinder-slider-card-price .desfinder-login-required {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    background-color: var(--desfinder-accent);
    padding: 4px 10px;
    border-radius: var(--desfinder-radius-chip, 20px);
    text-decoration: none;
    line-height: 1.4;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    /* Reset <button> defaults */
    border: none;
    outline: none;
    cursor: pointer;
    font-family: inherit;
}

.desfinder-product-price .desfinder-login-required:hover,
.desfinder-slider-card-price .desfinder-login-required:hover {
    opacity: 0.85;
    text-decoration: none;
}

.desfinder-product-old-price {
    font-size: 14px;
    font-weight: 400;
    color: var(--desfinder-old-price-color, #999999);
    text-decoration: line-through;
}

/* Wrapper so current price + old price + badge sit inline */
.desfinder-price-wrap {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Discount percentage badge: "-30%" */
.desfinder-discount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: var(--desfinder-radius-chip, 20px);
    margin-left: 4px;
    font-family: var(--desfinder-font-display, 'Space Grotesk', sans-serif);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* ========================================
   RESULTS HEADER
   ======================================== */
.desfinder-results-layout {
    display: flex;
    gap: 30px;
    max-width: 1440px;
    margin: 0 auto;
}

.desfinder-filters-sidebar {
    width: 260px;
    flex-shrink: 0;
}

.desfinder-results-main {
    flex: 1;
    min-width: 0;
}

.desfinder-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--desfinder-filters-border-color, var(--desfinder-accent));
}

.desfinder-filters-title {
    font-family: var(--desfinder-font-heading, 'Rubik', sans-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--desfinder-title-color, #232323);
    text-transform: uppercase;
    margin: 0;
}

.desfinder-filters-clear {
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--desfinder-link-color, var(--desfinder-accent));
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    transition: all 0.2s ease;
}

.desfinder-filters-clear:hover {
    background: var(--desfinder-link-hover-bg, #fff8f6);
}

/* El botón "Mostrar filtros" solo se ve por debajo de 991px (RESPONSIVE) */
.desfinder-mobile-filters-toggle {
    display: none;
}

/* Texto e icono con el color del botón aunque el tema pinte todos los span */
.desfinder-mobile-filters-toggle > span,
.desfinder-mobile-filters-toggle > .material-icons {
    color: inherit;
}

.desfinder-filter-group {
    margin-bottom: 25px;
}

.desfinder-filter-group-title {
    font-family: var(--desfinder-font-display, 'Space Grotesk', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--desfinder-title-color, #232323);
    text-transform: uppercase;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Feature filter toggle button */
.desfinder-filter-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--desfinder-muted-color, #7a7a7a);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.desfinder-filter-toggle:hover {
    color: var(--desfinder-link-color, var(--desfinder-accent));
}

.desfinder-filter-toggle .material-icons {
    font-size: 20px;
}

/* Feature filter specific styles */
.desfinder-feature-filter {
    border-left: 3px solid #f6f6f6;
    padding-left: 12px;
    transition: border-color 0.2s ease;
}

.desfinder-feature-filter:hover {
    border-left-color: var(--desfinder-filters-border-color, var(--desfinder-accent));
}

.desfinder-feature-values {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
    /* Scroll suave en iOS */
}

.desfinder-feature-values::-webkit-scrollbar {
    width: 4px;
}

.desfinder-feature-values::-webkit-scrollbar-track {
    background: #f6f6f6;
}

.desfinder-feature-values::-webkit-scrollbar-thumb {
    background: #dbdbdb;
    border-radius: 2px;
}

.desfinder-feature-values::-webkit-scrollbar-thumb:hover {
    background: var(--desfinder-link-color, var(--desfinder-accent));
}

.desfinder-filter-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.desfinder-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 0;
    transition: all 0.2s ease;
}

.desfinder-filter-option:hover {
    color: var(--desfinder-link-color, var(--desfinder-accent));
}

.desfinder-filter-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--desfinder-accent);
}

.desfinder-filter-option-label {
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 13px;
    font-weight: 400;
    color: #232323;
    cursor: pointer;
    flex: 1;
}

.desfinder-filter-option-count {
    font-family: var(--desfinder-font-display, 'Space Grotesk', sans-serif);
    font-size: 11px;
    font-weight: 500;
    color: var(--desfinder-muted-color, #7a7a7a);
    transition: color 0.2s ease;
}

/* Dynamic facet counts: dim options that yield zero results */
.desfinder-filter-option--zero {
    opacity: 0.4;
}

.desfinder-filter-option--zero .desfinder-filter-option-label,
.desfinder-filter-option--zero .desfinder-filter-option-count {
    color: #b0b0b0;
}

/* Show-more / show-less toggle for filter groups */
.desfinder-filter-extra {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.desfinder-filter-show-more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
    padding: 4px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 12px;
    font-weight: 600;
    color: var(--desfinder-link-color, var(--desfinder-accent));
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: opacity 0.2s ease;
}

.desfinder-filter-show-more:hover {
    opacity: 0.75;
}

.desfinder-filter-show-more .material-icons {
    font-size: 16px;
}

.desfinder-results-header {
    max-width: 100%;
    margin: 0 0 20px 0;
}

.desfinder-results-count {
    font-family: var(--desfinder-font-heading, 'Rubik', sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--desfinder-title-color, #232323);
}

/* ========================================
   NO RESULTS
   ======================================== */
.desfinder-no-results {
    padding: 40px 20px;
}

.desfinder-no-results-content {
    text-align: center;
    color: #7a7a7a;
}

.desfinder-no-results-content>i {
    font-size: 64px;
    color: #dbdbdb;
    margin-bottom: 20px;
    display: block;
}

.desfinder-no-results-content>h3 {
    font-family: var(--desfinder-font-heading, 'Rubik', sans-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--desfinder-title-color, #232323);
    margin: 0 0 12px 0;
}

.desfinder-no-results-content>p {
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 16px;
    color: #666;
    margin: 0 0 30px 0;
}

/* Alternative Suggestions */
.desfinder-alternative-suggestions {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: var(--desfinder-radius-card, 8px);
    text-align: center;
}

.desfinder-alternative-suggestions p {
    font-family: var(--desfinder-font-heading, 'Rubik', sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--desfinder-title-color, #232323);
    margin: 0 0 15px 0;
}

.desfinder-suggestions-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.desfinder-suggestions-chips .desfinder-suggestion-chip {
    padding: 10px 20px;
    background: #ffffff;
    border: 2px solid var(--desfinder-accent);
    color: var(--desfinder-accent);
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--desfinder-radius-chip, 20px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.desfinder-suggestions-chips .desfinder-suggestion-chip:hover {
    background: var(--desfinder-chip-hover-bg, var(--desfinder-accent));
    color: var(--desfinder-chip-hover-color, #ffffff);
}

/* Alternative Products */
.desfinder-alternative-products {
    margin-top: 40px;
    text-align: left;
}

.desfinder-alternative-products h4 {
    font-family: var(--desfinder-font-heading, 'Rubik', sans-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--desfinder-title-color, #232323);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.desfinder-alternative-products h4 .material-icons {
    color: var(--desfinder-accent);
    font-size: 24px;
}

.desfinder-alternative-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

/* Responsive para productos alternativos */
@media (max-width: 768px) {
    .desfinder-alternative-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .desfinder-alternative-products-grid {
        grid-template-columns: 1fr;
    }

    .desfinder-no-results {
        padding: 30px 15px;
    }

    .desfinder-no-results-content>h3 {
        font-size: 20px;
    }

    .desfinder-no-results-content>p {
        font-size: 14px;
    }
}

/* Legacy styles for simple no-results (mantener por compatibilidad) */
.desfinder-no-results p {
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 18px;
    color: #232323;
    margin: 0;
}

.desfinder-no-results i {
    font-size: 64px;
    color: #dbdbdb;
    margin-bottom: 20px;
}

/* ========================================
   LOADING
   ======================================== */
.desfinder-modal-loading {
    text-align: center;
    padding: 60px 20px;
}

.desfinder-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #f6f6f6;
    border-top-color: var(--desfinder-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- Infinite scroll load-more indicator ---- */
.desfinder-load-more-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 0 10px;
    color: var(--desfinder-muted-color, #7a7a7a);
    font-size: 14px;
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
}

.desfinder-mini-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #e0e0e0;
    border-top-color: var(--desfinder-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

.desfinder-modal-loading p {
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 16px;
    color: #7a7a7a;
    margin: 0;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 991px) {
    .desfinder-results-layout {
        flex-direction: column;
    }

    .desfinder-filters-sidebar {
        width: 100%;
        /* Ocultar filtros por defecto en tablet/móvil */
        display: none;
    }

    /* Mostrar filtros cuando tienen clase .show-filters */
    .desfinder-filters-sidebar.show-filters {
        display: block;
        margin-bottom: 20px;
    }

    /* Contador de resultados a la izquierda, botón de filtros a la derecha */
    .desfinder-results-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px 16px;
    }

    /* El contador se queda casi todo el espacio sobrante de la fila: el
       botón no crece mientras cabe a su lado y ocupa todo el ancho cuando
       baja solo a la línea siguiente */
    .desfinder-results-count {
        flex: 999 1 auto;
    }

    /* Botón para mostrar filtros en móvil: compacto, junto al contador */
    .desfinder-mobile-filters-toggle {
        flex: 1 1 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 40px;
        padding: 8px 16px;
        background: var(--desfinder-btn-bg, #ffffff);
        border: var(--desfinder-btn-border, 1px solid #d9d9d9);
        border-radius: var(--desfinder-radius-btn, 20px);
        font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        color: var(--desfinder-btn-color, #232323);
        cursor: pointer;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .desfinder-mobile-filters-toggle.active {
        background: var(--desfinder-btn-hover-bg, var(--desfinder-accent));
        color: var(--desfinder-btn-hover-color, #ffffff);
        border-color: var(--desfinder-btn-hover-bg, var(--desfinder-accent));
    }

    .desfinder-mobile-filters-toggle .material-icons {
        font-size: 18px;
        transition: transform 0.2s ease;
    }

    .desfinder-mobile-filters-toggle.active .material-icons {
        transform: rotate(180deg);
    }
}

/* Hover solo con ratón: en táctil se quedaría "pegado" tras el toque */
@media (max-width: 991px) and (hover: hover) {
    .desfinder-mobile-filters-toggle:hover {
        border-color: var(--desfinder-btn-hover-bg, var(--desfinder-accent));
        color: var(--desfinder-link-color, var(--desfinder-accent));
    }

    /* Activo ("Ocultar filtros") el fondo ya es del color de acento: la letra
       se queda blanca, si no desaparece al pasar el ratón */
    .desfinder-mobile-filters-toggle.active:hover {
        color: var(--desfinder-btn-hover-color, #ffffff);
    }
}

@media (max-width: 768px) {
    .desfinder-header {
        padding: 15px;
    }

    /* En mobile el logo puede ser un poco más pequeño */
    .desfinder-header-logo {
        height: var(--desfinder-logo-height-mobile, 30px);
    }

    .desfinder-header-logo img {
        height: var(--desfinder-logo-height-mobile, 30px);
        max-width: var(--desfinder-logo-max-width-mobile, 110px);
    }

    .desfinder-modal-input {
        font-size: 16px;
        /* Mínimo 16px para prevenir zoom automático en iOS */
        padding: 12px 60px 12px 45px;
    }

    .desfinder-close-btn {
        width: 44px;
        /* Mínimo 44px para área táctil según Apple HIG */
        height: 44px;
        flex-shrink: 0;
        /* Prevenir compresión */
    }

    .desfinder-content {
        padding: 20px 15px;
    }

    .desfinder-featured-products,
    .desfinder-personal-products,
    .desfinder-results-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
        /* Mayor separación para mejor tap targeting */
    }

    .desfinder-product-card {
        padding: 10px;
    }

    .desfinder-product-image {
        height: 150px;
    }

    .desfinder-section-title {
        font-size: 16px;
    }
}

@media (max-width: 480px) {

    .desfinder-featured-products,
    .desfinder-personal-products,
    .desfinder-results-grid {
        /* minmax(0, 1fr): cada columna mide la mitad aunque el contenido sea
           más ancho (si no, la 2ª tarjeta se corta por la derecha) */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        /* Aumentado de 10px para mejor separación */
    }

    .desfinder-product-card {
        min-width: 0;
    }

    .desfinder-product-name {
        font-size: 12px;
        line-height: 16px;
    }

    .desfinder-product-price {
        font-size: 16px;
    }

    /* "Regístrate o inicia sesión" (login para ver precio) puede partirse en
       dos líneas: con nowrap medía ~172px y no cabían las dos columnas */
    .desfinder-product-price .desfinder-login-required {
        white-space: normal;
        max-width: 100%;
    }

    /* Chips más grandes en móvil */
    .desfinder-suggestion-chip {
        padding: 12px 20px;
        font-size: 15px;
        min-height: 44px;
    }
}

/* Móviles muy pequeños: se mantienen las 2 columnas del bloque de 480px */
@media (max-width: 375px) {

    .desfinder-product-card {
        padding: 10px;
    }

    .desfinder-product-name {
        font-size: 14px;
        line-height: 18px;
    }
}

/* ========================================
   SLIDER DE PRODUCTOS MÁS BUSCADOS
   ======================================== */

.desfinder-section-slider {
    margin-top: 30px;
}

.desfinder-section-slider .desfinder-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--desfinder-font-heading, 'Rubik', sans-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--desfinder-title-color, #232323);
    margin: 0 0 20px 0;
}

.desfinder-section-slider .desfinder-section-title .material-icons {
    color: var(--desfinder-accent);
    font-size: 28px;
}

.desfinder-most-clicked-slider {
    position: relative;
    overflow: hidden;
}

.desfinder-slider-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 5px 20px 5px;
    -webkit-overflow-scrolling: touch;
    /* .desfinder-content declares touch-action: pan-y, which left this row
       with no horizontal touch panning; pan-x gives the gesture back to the
       scroller that actually implements it. Pointer drag is handled in
       front.js — see initSliderDragScroll(). */
    touch-action: pan-x;
    cursor: grab;
}

/* Applied by front.js for the duration of a pointer drag: smooth scrolling and
   snap points both fight a per-frame scrollLeft assignment. */
.desfinder-slider-container.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
}

/* Without this the browser starts its own link/image drag and the row never
   scrolls — the reason the scrollbar used to be the only way to move it. */
.desfinder-slider-card-link,
.desfinder-slider-card-image img {
    -webkit-user-drag: none;
}

/* Ocultar scrollbar pero permitir scroll */
.desfinder-slider-container::-webkit-scrollbar {
    height: 6px;
}

.desfinder-slider-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.desfinder-slider-container::-webkit-scrollbar-thumb {
    background: var(--desfinder-accent);
    border-radius: 3px;
}

.desfinder-slider-container::-webkit-scrollbar-thumb:hover {
    background: var(--desfinder-accent);
    opacity: 0.85;
}

/* Card del slider */
.desfinder-slider-card {
    flex: 0 0 250px;
    scroll-snap-align: start;
    background: var(--desfinder-card-bg, #ffffff);
    border: var(--desfinder-card-border, 1px solid #e8e8e8);
    border-radius: var(--desfinder-radius-slider-card, 12px);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.desfinder-slider-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--desfinder-accent);
}

.desfinder-slider-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.desfinder-slider-card-image {
    position: relative;
    height: 200px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.desfinder-slider-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.desfinder-slider-card:hover .desfinder-slider-card-image img {
    transform: scale(1.05);
}

.desfinder-slider-card-image .desfinder-no-image {
    color: #dbdbdb;
    font-size: 48px;
}

.desfinder-slider-card-info {
    padding: 15px;
}

.desfinder-slider-card-brand {
    font-family: var(--desfinder-font-body, 'Manrope', sans-serif);
    font-size: 12px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    margin: 0 0 5px 0;
    letter-spacing: 0.5px;
}

.desfinder-slider-card-name {
    font-family: var(--desfinder-font-heading, 'Rubik', sans-serif);
    font-size: 15px;
    font-weight: 500;
    color: var(--desfinder-card-title-color, #232323);
    margin: 0 0 10px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 42px;
}

.desfinder-slider-card-price {
    font-family: var(--desfinder-font-heading, 'Rubik', sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--desfinder-card-price-color, var(--desfinder-accent));
    margin: 0;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .desfinder-slider-card {
        flex: 0 0 200px;
    }

    .desfinder-slider-card-image {
        height: 160px;
    }

    .desfinder-slider-card-name {
        font-size: 14px;
        min-height: 38px;
    }

    .desfinder-slider-card-price {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .desfinder-slider-card {
        flex: 0 0 180px;
    }

    .desfinder-slider-container {
        gap: 15px;
    }

    .desfinder-section-slider .desfinder-section-title {
        font-size: 18px;
    }

    .desfinder-section-slider .desfinder-section-title .material-icons {
        font-size: 24px;
    }
}

/* ===================================================
   Suppress third-party autocomplete dropdowns (STSB,
   Elementor search, etc.) while DESFinder modal is open.
   body.desfinder-modal-open is added by openModal() and
   removed by closeModal().
=================================================== */
body.desfinder-modal-open .autocomplete-suggestions,
body.desfinder-modal-open .stsb_search_result,
body.desfinder-modal-open [class*="autocomplete-suggestion"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}