/** * TIG Search Finder - Frontend Styles v3 * Minimalista · Panel superior full-width en desktop * * @author TIGestion * @copyright 2024-2026 TIGestion */ /* ====================================== VARIABLES ====================================== */ /* Variables declaradas en AMBOS selectores: el overlay se mueve a por JS (escapar del stacking context), así que necesita sus propias variables — si no, pierde --tig-surface y el panel queda transparente. */ .tig-search-wrapper, .tig-search-overlay { --tig-primary: #d4006c; --tig-primary-hover: #b8005e; --tig-primary-light: #fff0f7; --tig-text: #1a1a1a; --tig-text-muted: #6b7280; --tig-border: #e8e8e8; --tig-border-focus: #f080b8; --tig-surface: #ffffff; --tig-bg: #fafafa; --tig-price-old: #b0b0b0; --tig-price-new: #d4006c; --tig-shadow: 0 8px 32px rgba(0,0,0,0.12); --tig-radius-sm: 6px; --tig-radius-md: 10px; --tig-radius-pill: 999px; } .tig-search-wrapper { position: relative; width: 100%; } /* ====================================== LAUNCHER BUTTON ====================================== */ .tig-search-launcher { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 44px; border: 1px solid var(--tig-border); border-radius: var(--tig-radius-pill); background: var(--tig-surface); color: var(--tig-text-muted); padding: 0.45rem 1rem; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.28s ease, transform 0.18s ease; font-size: 0.9rem; text-align: left; } .tig-search-launcher:hover { border-color: #ccc; } .tig-search-launcher:active { transform: scale(0.985); } .tig-search-launcher-icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tig-primary); color: #fff; flex-shrink: 0; } .tig-search-launcher-label { color: var(--tig-text-muted); font-size: 0.88rem; } /* ====================================== OVERLAY ====================================== */ .tig-search-overlay { position: fixed; inset: 0; z-index: 2147483647; display: none; } .tig-search-overlay.is-open { display: block; } .tig-search-overlay.has-quick-view { /* Below Warehouse's quick-view backdrop (999989), with results retained. */ z-index: 999988; pointer-events: none; } /* Backdrop — debajo del panel */ .tig-search-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; } .tig-search-overlay.is-open .tig-search-backdrop { animation: tig-backdrop-in 0.52s ease-out both; } body.tig-search-open { overflow: hidden; } /* ====================================== SEARCH LAYER — DESKTOP: panel superior ====================================== */ .tig-search-layer { position: fixed; top: 0; left: 0; right: 0; width: 100%; max-height: 82vh; display: flex; flex-direction: column; background: var(--tig-surface); box-shadow: var(--tig-shadow); border-radius: 0 0 var(--tig-radius-md) var(--tig-radius-md); overflow: hidden; transform-origin: top center; animation: tig-slide-down 0.68s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes tig-slide-down { from { transform: translateY(-16px) scale(0.99); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes tig-backdrop-in { from { opacity: 0; } to { opacity: 1; } } /* ====================================== HEADER (barra de búsqueda) ====================================== */ .tig-search-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.5rem; background: var(--tig-surface); border-bottom: 1px solid var(--tig-border); flex-shrink: 0; } /* Back arrow — sólo móvil */ .tig-search-back { display: none; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--tig-text); cursor: pointer; border-radius: var(--tig-radius-sm); padding: 0; flex-shrink: 0; } /* X desktop */ .tig-search-close { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--tig-border); border-radius: var(--tig-radius-sm); background: transparent; color: var(--tig-text-muted); cursor: pointer; flex-shrink: 0; padding: 0; transition: background 0.12s; } .tig-search-close:hover { background: var(--tig-bg); } /* Caja de búsqueda */ .tig-searchbox { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.4rem; height: 2.6rem; border: 1px solid var(--tig-border); border-radius: var(--tig-radius-pill); background: var(--tig-bg); padding: 0 0.5rem 0 0.8rem; transition: border-color 0.15s, box-shadow 0.15s; } .tig-searchbox:focus-within { border-color: var(--tig-border-focus); box-shadow: 0 0 0 3px rgba(212, 0, 108, 0.08); background: var(--tig-surface); } .tig-searchbox-icon { color: var(--tig-text-muted); flex-shrink: 0; display: flex; align-items: center; } .tig-searchbox-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--tig-text); font-size: 0.95rem; outline: 0; padding: 0; } .tig-searchbox-input::placeholder { color: #aaa; } /* The branded close control is the only visible X in the search header. */ .tig-searchbox-input::-webkit-search-cancel-button, .tig-searchbox-input::-webkit-search-decoration { display: none; -webkit-appearance: none; appearance: none; } .tig-searchbox-input::-ms-clear, .tig-searchbox-input::-ms-reveal { display: none; width: 0; height: 0; } /* Botón limpiar */ .tig-search-clear { display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: #ebebeb; color: #555; cursor: pointer; flex-shrink: 0; padding: 0; transition: background 0.12s; } .tig-search-clear:hover { background: #ddd; } /* ====================================== CHIPS ROW (sugerencias) ====================================== */ .tig-chips-row { background: var(--tig-surface); border-bottom: 1px solid var(--tig-border); padding: 0.55rem 1.5rem; flex-shrink: 0; } .tig-chips-inner { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; } .tig-chips-inner::-webkit-scrollbar { display: none; } .tig-chip { display: inline-flex; align-items: center; white-space: nowrap; padding: 0.25rem 0.7rem; border: 1px solid var(--tig-border); border-radius: var(--tig-radius-pill); background: var(--tig-surface); color: var(--tig-text); font-size: 0.82rem; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .tig-chip:hover, .tig-chip.is-active { border-color: var(--tig-primary); background: var(--tig-primary-light); color: var(--tig-primary); } /* ====================================== BODY ====================================== */ .tig-search-overlay [hidden] { display: none !important; } .tig-search-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* ====================================== ESTADO INICIAL ====================================== */ .tig-search-initial { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "popular recent" "popular recommended"; gap: 0 2rem; align-content: start; } .tig-recent-section { grid-area: recent; padding-bottom: 1.25rem; } .tig-popular-section { grid-area: popular; border-right: 1px solid var(--tig-border); padding-right: 2rem; } .tig-recommended-section { grid-area: recommended; } .tig-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; } .tig-section-title { font-size: 0.82rem; font-weight: 700; color: var(--tig-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .tig-clear-recent-btn { border: 0; background: transparent; color: var(--tig-primary); font-size: 0.82rem; cursor: pointer; padding: 0; } .tig-clear-recent-btn:hover { text-decoration: underline; } /* Chips lista (populares / recientes) */ .tig-chips-list { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tig-chip-item { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.75rem; border: 1px solid var(--tig-border); border-radius: var(--tig-radius-pill); background: var(--tig-surface); color: var(--tig-text); font-size: 0.82rem; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .tig-chip-item:hover { border-color: #ccc; background: var(--tig-bg); } .tig-chip-item-icon { color: var(--tig-text-muted); display: flex; flex-shrink: 0; } /* ====================================== GRID DE PRODUCTOS ====================================== */ .tig-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } /* Tarjeta de producto */ .tig-catalog-card { min-width: 0; display: flex; } .tig-catalog-card > .js-product-miniature-wrapper { flex: 1 1 auto; width: 100%; max-width: none; min-width: 0; margin: 0; padding: 0; } .tig-catalog-card .product-miniature-grid.product-miniature-default { width: 100%; height: 100%; margin: 0; } .tig-catalog-card.is-selected .product-miniature { outline: 2px solid var(--tig-primary); outline-offset: -2px; } /* El tema fija esta zona a 110px con !important; las tarjetas del buscador deben crecer con el titulo, las valoraciones, el precio y los descuentos. */ .tig-search-overlay .tig-catalog-card .product-description { height: auto !important; } .tig-catalog-card .product-description-short { display: none !important; } .tig-product-card { position: relative; display: flex; flex-direction: column; background: var(--tig-surface); border: 1px solid var(--tig-border); border-radius: 14px; overflow: hidden; color: inherit; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .tig-product-card:hover { border-color: #e2c3d6; box-shadow: 0 8px 22px rgba(0,0,0,0.08); transform: translateY(-2px); } .tig-product-card.is-selected { border-color: var(--tig-primary); box-shadow: 0 0 0 2px rgba(212,0,108,0.15); } /* Enlace estirado: toda la tarjeta es clicable sin anidar */ .tig-product-card-link { position: absolute; inset: 0; z-index: 1; text-decoration: none; } /* Media */ .tig-product-card-media { position: relative; padding: 0.9rem; } .tig-card-badges { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; pointer-events: none; } .tig-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: var(--tig-radius-pill); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; } .tig-badge-offer { background: var(--tig-primary); color: #fff; } .tig-badge-discount { background: var(--tig-primary-light); color: var(--tig-primary); } .tig-card-wish { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 1.9rem; height: 1.9rem; display: flex; align-items: center; justify-content: center; color: #9ca3af; pointer-events: none; } .tig-card-shop, .tig-card-quick-view { display: none; } .tig-offer-prefix { white-space: pre; } .tig-product-card-image { aspect-ratio: 1 / 1; width: 100%; background: var(--tig-surface); overflow: hidden; display: flex; align-items: center; justify-content: center; } .tig-product-card-image img { width: 100%; height: 100%; object-fit: contain; } .tig-product-card-noimg { width: 100%; height: 100%; background: #f5f5f5; } .tig-product-card-body { padding: 0 0.85rem 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; } .tig-card-cat { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tig-text-muted); } .tig-product-card-title { font-size: 0.85rem; font-weight: 600; line-height: 1.35; color: var(--tig-text); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tig-product-card-prices { margin-top: 0.25rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem; } .tig-price-old { font-size: 0.8rem; color: var(--tig-price-old); text-decoration: line-through; } .tig-price-new { font-size: 1.05rem; font-weight: 800; color: var(--tig-price-new); } .tig-card-savings { font-size: 0.78rem; font-weight: 600; color: #2563eb; } .tig-card-delivery { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem; font-size: 0.75rem; color: #2563eb; } .tig-card-delivery svg { flex-shrink: 0; } /* ====================================== LAYOUT RESULTADOS (sidebar + main) ====================================== */ .tig-results-layout { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; } .tig-results-columns { flex: 1; min-height: 0; display: flex; overflow: hidden; position: relative; } /* ====================================== TOPBAR RESULTADOS (chips activos + total + orden) ====================================== */ .tig-results-topbar { flex-shrink: 0; display: grid; grid-template-columns: 240px 1fr auto; align-items: center; gap: 0.75rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--tig-border); background: var(--tig-surface); } .tig-results-topbar:empty { display: none; } .tig-topbar-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; } .tig-active-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border: 1px solid var(--tig-primary); border-radius: var(--tig-radius-pill); background: var(--tig-primary-light); color: var(--tig-primary); font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .tig-active-chip-x { font-size: 0.72rem; opacity: 0.75; } .tig-active-chip:hover { background: #fce0ef; } .tig-topbar-count { font-size: 0.95rem; font-weight: 700; color: var(--tig-text); } .tig-topbar-tools { display: flex; align-items: center; gap: 0.6rem; justify-content: flex-end; } /* Botón "Filtros" (sólo móvil) */ .tig-mobile-filter-btn { display: none; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 1px solid var(--tig-border); border-radius: var(--tig-radius-pill); background: var(--tig-surface); color: var(--tig-text); font-size: 0.85rem; font-weight: 600; cursor: pointer; } .tig-mobile-filter-btn svg { color: var(--tig-primary); } /* Dropdown de orden */ .tig-sort { position: relative; } .tig-sort-toggle { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; border: 1px solid var(--tig-border); border-radius: var(--tig-radius-pill); background: var(--tig-surface); color: var(--tig-text); font-size: 0.85rem; cursor: pointer; white-space: nowrap; } .tig-sort-toggle:hover { border-color: #ccc; } .tig-sort-label-prefix { color: var(--tig-text-muted); } .tig-sort-current { font-weight: 600; } .tig-sort-caret { color: var(--tig-text-muted); font-size: 0.7rem; } .tig-sort-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 220px; background: var(--tig-surface); border: 1px solid var(--tig-border); border-radius: var(--tig-radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 0.3rem; display: flex; flex-direction: column; } .tig-sort-option { text-align: left; padding: 0.5rem 0.7rem; border: 0; background: transparent; color: var(--tig-text); font-size: 0.85rem; border-radius: var(--tig-radius-sm); cursor: pointer; } .tig-sort-option:hover { background: var(--tig-bg); } .tig-sort-option.is-active { color: var(--tig-primary); font-weight: 600; } .tig-filters-empty { padding: 1rem; color: var(--tig-text-muted); font-size: 0.84rem; } /* ====================================== SIDEBAR DE FILTROS ====================================== */ .tig-filters-sidebar { width: 240px; flex-shrink: 0; background: var(--tig-surface); border-right: 1px solid var(--tig-border); display: flex; flex-direction: column; overflow: hidden; } .tig-filters-header-mobile { display: none; align-items: center; justify-content: space-between; padding: 0.9rem 1rem 0.75rem; border-bottom: 1px solid var(--tig-border); flex-shrink: 0; } .tig-filters-count-label { font-size: 0.88rem; font-weight: 600; color: var(--tig-text); } .tig-filters-close-btn { display: flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border: 0; background: transparent; color: var(--tig-text-muted); cursor: pointer; border-radius: var(--tig-radius-sm); padding: 0; } .tig-filters-close-btn:hover { background: var(--tig-bg); } .tig-filters-body { flex: 1; overflow-y: auto; } /* Sección de filtro */ .tig-filter-section { border-bottom: 1px solid var(--tig-border); } .tig-filter-section:last-child { border-bottom: 0; } .tig-filter-section-header { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; cursor: pointer; user-select: none; gap: 0.5rem; width: 100%; border: 0; background: transparent; text-align: left; } .tig-filter-section-header:hover { background: var(--tig-bg); } .tig-filter-section-title { font-size: 0.88rem; font-weight: 700; color: var(--tig-text); } .tig-filter-section-toggle { color: var(--tig-text-muted); display: flex; flex-shrink: 0; transition: transform 0.18s; } .tig-filter-section.is-collapsed .tig-filter-section-toggle { transform: rotate(180deg); } .tig-filter-section-body { padding: 0 0.75rem 0.75rem; } .tig-filter-section.is-collapsed .tig-filter-section-body { display: none; } /* Búsqueda interna del filtro */ .tig-filter-search { display: flex; align-items: center; gap: 0.35rem; height: 1.9rem; border: 1px solid var(--tig-border); border-radius: var(--tig-radius-sm); padding: 0 0.45rem; margin-bottom: 0.5rem; background: var(--tig-bg); } .tig-filter-search svg { color: var(--tig-text-muted); flex-shrink: 0; } .tig-filter-search-input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 0.8rem; color: var(--tig-text); outline: 0; } .tig-filter-search-input::placeholder { color: #bbb; } /* Items de filtro */ .tig-filter-list { display: flex; flex-direction: column; } .tig-filter-item { display: flex; align-items: center; justify-content: space-between; padding: 0.28rem 0.2rem; cursor: pointer; border-radius: var(--tig-radius-sm); transition: background 0.1s; width: 100%; border: 0; background: transparent; text-align: left; } .tig-filter-item:hover { background: var(--tig-bg); } .tig-filter-item-left { display: flex; align-items: center; gap: 0.45rem; min-width: 0; } .tig-filter-checkbox { width: 15px; height: 15px; border: 1.5px solid #d0d0d0; border-radius: 50%; background: var(--tig-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.12s, background 0.12s; } .tig-filter-item.is-checked .tig-filter-checkbox { background: var(--tig-primary); border-color: var(--tig-primary); } .tig-filter-item.is-checked .tig-filter-checkbox::after { content: ''; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); display: block; } .tig-filter-item-label { font-size: 0.82rem; color: var(--tig-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tig-filter-item-count { font-size: 0.78rem; color: var(--tig-text-muted); flex-shrink: 0; margin-left: 0.4rem; } .tig-filter-show-more { display: none; align-items: center; gap: 0.25rem; margin-top: 0.4rem; padding: 0.2rem; font-size: 0.78rem; color: var(--tig-text-muted); border: 0; background: transparent; cursor: pointer; } /* Footer móvil del sidebar */ .tig-filters-footer-mobile { display: none; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid var(--tig-border); background: var(--tig-surface); flex-shrink: 0; } .tig-filters-clear-btn { border: 0; background: transparent; color: var(--tig-primary); font-size: 0.87rem; font-weight: 500; cursor: pointer; padding: 0.45rem 0; white-space: nowrap; } .tig-filters-clear-btn:hover { text-decoration: underline; } .tig-filters-apply-btn { flex: 1; padding: 0.6rem 1rem; background: var(--tig-primary); color: #fff; border: 0; border-radius: var(--tig-radius-sm); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.12s; } .tig-filters-apply-btn:hover { background: var(--tig-primary-hover); } /* ====================================== RESULTADOS MAIN ====================================== */ .tig-results-main { flex: 1; min-width: 0; overflow-y: auto; padding: 0.85rem 1.25rem; display: flex; flex-direction: column; gap: 0.7rem; } /* Barra: N resultados + orden */ .tig-results-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-shrink: 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--tig-border); } .tig-results-count { font-size: 0.87rem; font-weight: 600; color: var(--tig-text); } .tig-results-sort { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.82rem; color: var(--tig-text-muted); white-space: nowrap; } .tig-sort-btn { border: 0; background: transparent; font-size: 0.82rem; color: var(--tig-text); font-weight: 500; cursor: default; outline: 0; padding: 0; } /* DYM */ .tig-dym { padding: 0.5rem 0.7rem; border-radius: var(--tig-radius-sm); background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 0.85rem; } .tig-dym a { color: #92400e; font-weight: 700; text-decoration: none; } .tig-dym a:hover { text-decoration: underline; } /* Loader */ .tig-search-loader { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 180px; color: var(--tig-text-muted); font-size: 0.88rem; } .tig-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--tig-border); border-top-color: var(--tig-primary); animation: tig-spin 0.7s linear infinite; } @keyframes tig-spin { to { transform: rotate(360deg); } } /* Empty */ .tig-search-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; min-height: 180px; color: var(--tig-text-muted); font-size: 0.88rem; } /* Carga progresiva de resultados */ .tig-infinite-sentinel { grid-column: 1 / -1; min-height: 72px; display: flex; align-items: center; justify-content: center; gap: 0.55rem; color: var(--tig-text-muted); font-size: 0.84rem; } .tig-infinite-sentinel .tig-spinner { width: 18px; height: 18px; } .tig-infinite-sentinel.has-error { min-height: 48px; color: #9b1c1c; } /* Backdrop filtros (móvil) */ .tig-filter-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 10; display: none; } .tig-filter-overlay.is-visible { display: block; } /* ====================================== FAB FILTROS (móvil) ====================================== */ .tig-filter-fab { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 5; display: none; pointer-events: none; } .tig-filter-fab-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.4rem; background: var(--tig-primary); color: #fff; border: 0; border-radius: var(--tig-radius-pill); font-size: 0.88rem; font-weight: 600; cursor: pointer; pointer-events: auto; box-shadow: 0 4px 14px rgba(212,0,108,0.4); transition: background 0.12s; white-space: nowrap; } .tig-filter-fab-btn:hover { background: var(--tig-primary-hover); } /* ====================================== UTILIDAD ====================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ====================================== TABLET (≤ 1024px) ====================================== */ @media (max-width: 1024px) { .tig-products-grid { grid-template-columns: repeat(3, 1fr); } .tig-filters-sidebar { width: 210px; } .tig-results-topbar { grid-template-columns: 210px 1fr auto; padding: 0.75rem 1rem; } .tig-search-header { padding: 0.65rem 1rem; } .tig-chips-row { padding: 0.5rem 1rem; } .tig-results-main { padding: 0.75rem 1rem; } .tig-search-initial { padding: 1rem; } } /* ====================================== MÓVIL (≤ 768px) — modal full-screen ====================================== */ @media (max-width: 768px) { .tig-search-overlay { --tig-text: #0f2145; --tig-text-muted: #9299a3; --tig-border: #ededed; --tig-primary-light: #fce5f1; } /* Vuelve a modal centrado full-screen */ .tig-search-layer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; max-height: 100dvh; border-radius: 0; animation: tig-mobile-search-in 0.68s cubic-bezier(0.4, 0, 0.2, 1) both; } .tig-search-back { display: flex; } .tig-search-close { display: none; } .tig-search-header { padding: 0.6rem 0.75rem; } .tig-chips-row { padding: 0.45rem 0.75rem; } .tig-searchbox { height: 2.4rem; } .tig-searchbox-input { font-size: 0.92rem; } .tig-search-initial { padding: 16px; display: flex; flex-direction: column; gap: 1rem; } .tig-recent-section, .tig-popular-section, .tig-recommended-section { grid-area: unset; border-left: 0; padding-left: 0; padding-bottom: 0; } .tig-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tig-product-card { min-width: 0; border-radius: 20px; } .tig-product-card-media { aspect-ratio: 5 / 6; padding: 40px 18px 28px; box-sizing: border-box; } .tig-product-card-image { aspect-ratio: auto; height: 100%; } .tig-card-badges { top: 12px; left: 11px; gap: 2px; } .tig-badge { min-width: 56px; padding: 3px 8px; font-size: 9px; line-height: 13px; font-weight: 500; letter-spacing: 0; } .tig-badge-offer, .tig-badge-discount { background: var(--tig-primary-light); color: var(--tig-primary); } .tig-offer-prefix { display: none; } .tig-card-wish { top: 11px; right: 9px; width: 28px; height: 24px; color: #757b83; } .tig-card-wish svg { width: 12px; height: 12px; } .tig-card-shop { position: absolute; bottom: 8px; right: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--tig-primary); border-radius: 50%; background: #fff; color: var(--tig-primary); text-decoration: none; } .tig-card-shop::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; } .tig-card-shop:hover { background: var(--tig-primary-light); } .tig-card-shop:focus-visible { outline: 2px solid var(--tig-primary); outline-offset: 3px; } .tig-product-card-body { padding: 0 12px 12px; gap: 5px; } .tig-card-cat { font-size: 9px; line-height: 13px; font-weight: 500; letter-spacing: 0.04em; } .tig-product-card-title { -webkit-line-clamp: 3; font-size: 12px; line-height: 16px; font-weight: 500; } .tig-product-card-prices { margin-top: 3px; gap: 6px; line-height: 20px; } .tig-price-new, .tig-price-only { font-size: 15px; font-weight: 600; color: var(--tig-primary); } .tig-price-old { font-size: 10.5px; color: #9299a3; } .tig-card-savings { font-size: 10.5px; line-height: 15px; font-weight: 400; color: #006da3; } .tig-card-delivery { display: none; } .tig-results-layout { flex-direction: column; position: relative; overflow: visible; height: 100%; } .tig-results-columns { flex-direction: column; overflow: visible; min-height: 0; } .tig-results-main { padding: 0 16px 24px; gap: 0.55rem; } [data-tig-meta]:empty { display: none; } /* Topbar apilada: chips → [Filtros][Orden] → total */ .tig-results-topbar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 16px 12px; border-bottom: 0; } .tig-topbar-chips { order: 1; } .tig-topbar-chips:empty { display: none; } .tig-active-chip { min-height: 32px; padding: 5px 10px 5px 15px; border: 0; font-size: 13px; font-weight: 500; } .tig-active-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: #fff; opacity: 1; } .tig-topbar-tools { order: 2; gap: 10px; } .tig-topbar-count { order: 3; font-size: 13px; font-weight: 400; } .tig-mobile-filter-btn { display: inline-flex; flex: 1; justify-content: center; } .tig-sort { flex: 1; min-width: 0; } .tig-sort-toggle { width: 100%; justify-content: center; } .tig-mobile-filter-btn, .tig-sort-toggle { min-height: 45px; padding: 10px 12px; font-size: 14px; font-weight: 400; color: #4b5563; } .tig-sort-current { overflow: hidden; text-overflow: ellipsis; font-weight: 400; } .tig-sort-label-prefix { display: none; } .tig-sort-menu { left: 0; right: 0; min-width: 0; } /* Sidebar = drawer inferior */ .tig-filters-sidebar { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; max-height: 88vh; border-right: 0; border-top: 1px solid var(--tig-border); border-radius: 14px 14px 0 0; z-index: 20; transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 -4px 20px rgba(0,0,0,0.1); } .tig-filters-sidebar::before { content: ''; display: block; width: 32px; height: 4px; border-radius: 2px; background: #d0d0d0; margin: 0.55rem auto 0; } .tig-filters-sidebar.is-open { transform: translateY(0); } .tig-filters-header-mobile { display: flex; } .tig-filters-footer-mobile { display: flex; } /* FAB antiguo sustituido por el botón "Filtros" de la topbar */ .tig-filter-fab { display: none !important; } } @keyframes tig-mobile-search-in { from { opacity: 0; transform: translateY(-8px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Desktop reference: separate filter panels and four compact product cards. */ @media (min-width: 992px) { .tig-search-overlay { --tig-text: #0f2145; --tig-text-muted: #9299a3; --tig-border: #ededed; --tig-primary-light: #fce5f1; --tig-sidebar-width: 210px; --tig-column-gap: 20px; } body.tig-search-open--desktop { overflow: hidden; } .tig-search-layer { bottom: 0; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; min-height: 0; box-sizing: border-box; } .tig-search-body, .tig-results-layout, .tig-results-columns { flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; } .tig-search-body { padding: 0 20px; } .tig-results-topbar, .tig-results-columns, .tig-search-initial { width: 100%; max-width: none; margin: 0; box-sizing: border-box; } .tig-results-topbar { grid-template-columns: var(--tig-sidebar-width) minmax(0, 1fr) auto; gap: var(--tig-column-gap); padding: 8px 0 14px; border-bottom: 0; overflow: visible; z-index: 3; } .tig-active-chip { min-height: 30px; padding: 5px 8px 5px 12px; gap: 6px; border: 0; font-size: 11px; font-weight: 500; } .tig-active-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; opacity: 1; font-size: 10px; } .tig-topbar-count { font-size: 12px; font-weight: 400; } .tig-sort-toggle { min-height: 30px; padding: 5px 12px; gap: 3px; font-size: 10px; font-weight: 400; } .tig-sort-current { font-weight: 400; } .tig-sort-label-prefix { color: var(--tig-text); } .tig-sort-menu { min-width: 200px; } .tig-sort-option { font-size: 12px; } .tig-results-columns { gap: var(--tig-column-gap); } .tig-results-main { flex: 1 1 0; padding: 0 0 24px; min-height: 0; gap: 12px; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; } [data-tig-meta]:empty { display: none; } .tig-filters-sidebar { flex: 0 0 var(--tig-sidebar-width); width: var(--tig-sidebar-width); min-height: 0; max-height: 100%; border: 0; } .tig-filters-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; } .tig-filter-section, .tig-filter-section:last-child { flex-shrink: 0; border: 1px solid var(--tig-border); border-radius: 18px; overflow: hidden; } .tig-filter-section-header { padding: 14px 14px 9px; line-height: 16px; } .tig-filter-section-title { font-size: 12px; font-weight: 400; } .tig-filter-section-toggle svg { width: 11px; height: 11px; } .tig-filter-section-body { padding: 0 14px 14px; } .tig-filter-search { height: 32px; padding: 0 11px; gap: 8px; margin-bottom: 8px; border-radius: var(--tig-radius-pill); background: #fff; } .tig-filter-search svg { width: 11px; height: 11px; color: #00a5cf; } .tig-filter-search-input { font-size: 10px; } .tig-filter-search-input::placeholder { color: #9299a3; } .tig-filter-search:focus-within { border-color: var(--tig-primary); } .tig-filter-item { min-height: 34px; padding: 8px 6px; } .tig-filter-item-left { gap: 10px; } .tig-filter-checkbox { width: 13px; height: 13px; border-width: 1px; } .tig-filter-item-label { font-size: 10px; line-height: 16px; } .tig-filter-item[data-filter-group="category"] .tig-filter-item-label { text-transform: uppercase; } .tig-filter-item.is-checked .tig-filter-item-label { color: var(--tig-primary); } .tig-filter-item-count { font-size: 9px; } .tig-filter-section:not(.is-expanded):not(.is-searching) .tig-filter-item:nth-child(n+6) { display: none; } .tig-filter-show-more { display: inline-flex; gap: 5px; margin-top: 8px; padding: 0 4px; font-size: 10px; color: #006da3; } .tig-filter-section.is-expanded .tig-filter-show-more svg { transform: rotate(180deg); } .tig-filter-section.is-searching .tig-filter-show-more { display: none; } .tig-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-content: start; } .tig-product-card { min-width: 0; border-radius: 18px; } .tig-product-card-media { aspect-ratio: 5 / 6; padding: 42px 22px 30px; box-sizing: border-box; } .tig-product-card-image { aspect-ratio: auto; height: 100%; } .tig-card-badges { top: 13px; left: 12px; gap: 3px; } .tig-badge { padding: 4px 9px; font-size: 8px; line-height: 12px; font-weight: 500; letter-spacing: 0; } .tig-badge-offer, .tig-badge-discount { color: var(--tig-primary); background: var(--tig-primary-light); } .tig-card-wish { top: 12px; right: 11px; width: 24px; height: 22px; color: #757b83; } .tig-card-wish svg { width: 12px; height: 12px; } .tig-card-shop, .tig-card-quick-view { position: absolute; right: 18px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--tig-border); border-radius: 50%; background: #fff; color: var(--tig-text); text-decoration: none; } .tig-card-shop { bottom: 10px; border-color: var(--tig-primary); color: var(--tig-primary); } .tig-card-quick-view { bottom: 43px; } .tig-card-quick-view circle { color: var(--tig-primary); } .tig-card-shop:hover, .tig-card-quick-view:hover { background: var(--tig-primary-light); border-color: var(--tig-primary); } .tig-card-shop:focus-visible, .tig-card-quick-view:focus-visible, .tig-filter-section-header:focus-visible, .tig-filter-item:focus-visible, .tig-filter-show-more:focus-visible { outline: 2px solid var(--tig-primary); outline-offset: -2px; } .tig-product-card-body { padding: 0 12px 12px; gap: 4px; } .tig-card-cat { font-size: 9px; line-height: 13px; font-weight: 400; letter-spacing: 0.04em; } .tig-product-card-title { font-size: 12px; line-height: 16px; font-weight: 500; -webkit-line-clamp: 3; } .tig-product-card-prices { gap: 6px; margin-top: 6px; line-height: 20px; } .tig-price-new, .tig-price-only { font-size: 16px; font-weight: 600; color: var(--tig-primary); } .tig-price-old { font-size: 11px; color: #9299a3; } .tig-card-savings { font-size: 10px; line-height: 14px; font-weight: 400; color: #006da3; } .tig-card-delivery { justify-content: center; margin-top: 5px; gap: 5px; font-size: 9.5px; line-height: 14px; color: #607087; } .tig-card-delivery svg { width: 12px; height: 12px; color: #00a5cf; } /* Recommendations use the same four-card column before a query is entered. */ .tig-search-initial { min-height: 0; overscroll-behavior-y: contain; grid-template-columns: var(--tig-sidebar-width) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "popular recommended" "recent recommended"; padding: 16px 0 24px; gap: 14px var(--tig-column-gap); } .tig-popular-section, .tig-recent-section { align-self: start; padding: 14px; border: 1px solid var(--tig-border); border-radius: 18px; } .tig-section-title { font-size: 12px; font-weight: 400; color: var(--tig-text); text-transform: none; letter-spacing: 0; } .tig-chips-list { flex-direction: column; align-items: stretch; gap: 6px; } .tig-chip-item { padding: 6px 9px; font-size: 11px; text-align: left; } .tig-clear-recent-btn { font-size: 10px; } .tig-recent-section .tig-section-header { flex-wrap: wrap; gap: 6px; } } /* ====================================== DESKTOP: buscador integrado en header ====================================== */ @media (min-width: 992px) { body.tig-search-open--desktop #desktop-header nav#main-menu { opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: opacity 0.16s ease, transform 0.24s ease, visibility 0s linear 0.16s; } body:not(.tig-search-open--desktop) #desktop-header nav#main-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.2s ease, transform 0.24s ease, visibility 0s linear 0s; } body.tig-search-open--desktop #desktop-header .nappy-desktop-audience-nav { opacity: 0; visibility: hidden; transform: translateY(-3px); pointer-events: none; transition: opacity 0.16s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.16s; } body:not(.tig-search-open--desktop) #desktop-header .nappy-desktop-audience-nav { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } body.tig-search-open--desktop #desktop-header .headerrefit-search > .tig-search-wrapper > .tig-search-launcher { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s ease, visibility 0s linear 0.12s; } .tig-search-overlay.is-header-attached { background: transparent; pointer-events: none; } .tig-search-overlay.is-header-attached .tig-search-backdrop { display: none; } .tig-search-overlay.is-header-attached .tig-search-layer { top: var(--tig-panel-top); bottom: 0; width: 100%; height: max(0px, calc(100vh - var(--tig-panel-top, 0px))); height: max(0px, calc(100dvh - var(--tig-panel-top, 0px))); min-height: 0; max-height: 100vh; max-height: 100dvh; border-radius: 0; overflow: hidden; border-top: 1px solid #f3f5fa; border-bottom: 1px solid #e5e9f0; box-shadow: 0 14px 28px rgba(15, 33, 69, 0.10); pointer-events: auto; z-index: 2147483647; animation: tig-attached-panel-in 0.58s 0.08s cubic-bezier(0.4, 0, 0.2, 1) both; } .tig-search-overlay.is-header-attached .tig-search-header { position: fixed; top: var(--tig-header-top); left: var(--tig-header-left); z-index: 2; display: flex; width: var(--tig-header-width); height: var(--tig-header-height); min-height: var(--tig-header-height); padding: 0; gap: 4px; border: 0; border-bottom: 1px solid #d7deea; background: #fff; box-sizing: border-box; overflow: hidden; pointer-events: auto; will-change: top, left, width, height, opacity; } .tig-search-overlay.is-header-attached .tig-search-back { display: none; } .tig-search-overlay.is-header-attached .tig-searchbox { height: 100%; min-height: 0; padding: 0 4px; gap: 9px; border: 0; border-radius: 0; background: #fff; box-shadow: none; } .tig-search-overlay.is-header-attached .tig-searchbox:focus-within { border: 0; background: #fff; box-shadow: none; } .tig-search-overlay.is-header-attached .tig-searchbox-icon { width: 20px; height: 20px; color: var(--tig-primary); } .tig-search-overlay.is-header-attached .tig-searchbox-icon .nappy-brand-icon--search { width: 18px; height: 18px; } .tig-search-overlay.is-header-attached .tig-searchbox-input { height: 100%; color: #0f2145; font-size: 0.98rem; font-weight: 600; } .tig-search-overlay.is-header-attached .tig-searchbox-input::placeholder { color: #6b7280; opacity: 1; } .tig-search-overlay.is-header-attached .tig-search-close { width: 38px; height: 100%; border: 0; border-radius: 0; background: transparent; } .tig-search-overlay.is-header-attached .tig-search-close:hover, .tig-search-overlay.is-header-attached .tig-search-close:focus-visible { background: var(--tig-primary-light); outline: 0; } .tig-search-overlay.is-header-attached .tig-search-body { overflow: hidden; background: #fff; } } @keyframes tig-attached-panel-in { /* Do not transform this layer: a transformed ancestor changes the containing block of the fixed search header and offsets it twice. */ from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { body.tig-search-open--desktop #desktop-header nav#main-menu, body:not(.tig-search-open--desktop) #desktop-header nav#main-menu, body.tig-search-open--desktop #desktop-header .nappy-desktop-audience-nav, body:not(.tig-search-open--desktop) #desktop-header .nappy-desktop-audience-nav, .tig-search-overlay.is-open .tig-search-backdrop, .tig-search-layer, .tig-search-overlay.is-header-attached .tig-search-layer { transition: none; animation: none; } }