/** * SearchAvancedOn v1.9.0 * El panel se añade al y su posición/tamaño se gestiona 100% por JS via style inline. * Este CSS solo pone el estilo visual de los elementos internos. */ /* ══ Variables (JS las sobreescribe) ══ */ :root { --sad-primary: #FF6600; --sad-prgb: 255,102,0; --sad-txt: #222; --sad-muted: #555; --sad-faint: #999; --sad-lbl: #333; --sad-chip-c: #444; --sad-bg: #fff; --sad-bgside: #f5f5f5; --sad-bgchip: #eee; --sad-bgimg: #f8f8f8; --sad-border: #e0e0e0; --sad-shad: 0 16px 56px rgba(0,0,0,.18); --sad-fs-nm: 13px; --sad-fs-pr: 15px; --sad-fs-rf: 11px; --sad-fs-br: 10px; --sad-fs-lb: 10px; --sad-fs-ch: 12px; --sad-sw: 190px; --sad-t: .13s ease; --sad-r: 8px; --sad-rsm: 5px; } /* ══ Matar autocomplete nativo ══ */ .ac_results, .ui-autocomplete, .tt-menu, .typeahead, #search_widget .dropdown-menu, .search-widget .dropdown-menu, form[action*="search"] .dropdown-menu, .autocomplete-suggestions { display:none!important; visibility:hidden!important; } /* ══ Animación apertura ══ */ .sad-panel.sad-in { animation: sadIn .16s ease both; } @keyframes sadIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} } /* ══ Inner: flex row/column según JS ══ */ .sad-inner { display: flex; overflow: hidden; /* flex-direction e height los pone JS */ } /* ══ SIDEBAR ══ */ .sad-side { background: var(--sad-bgside); overflow-y: auto; } .sad-side::-webkit-scrollbar { width:7px; } .sad-side::-webkit-scrollbar-track { background:var(--sad-bgside); } .sad-side::-webkit-scrollbar-thumb { background:var(--sad-primary); border-radius:4px; opacity:.5; } .sad-side::-webkit-scrollbar-thumb:hover { background:var(--sad-primary); opacity:1; } /* ══ Facets ══ */ .sad-facet { /* border/min-width puestos por JS en setGeometry */ } .sad-fhd { width:100%; display:flex; align-items:center; justify-content:space-between; padding:10px 12px 8px; background:none; border:none; cursor:pointer; text-align:left; gap:6px; } .sad-fhd:hover { background:rgba(0,0,0,.04); } .sad-ftit { font-size:var(--sad-fs-lb); font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--sad-lbl); } .sad-chev { flex-shrink:0; color:var(--sad-muted); transition:transform var(--sad-t); } .sad-fbd.sad-col { display:none; } .sad-flist { padding:2px 0 8px; } .sad-frow { display:flex; align-items:center; justify-content:space-between; padding:5px 12px; text-decoration:none; color:var(--sad-txt); font-size:var(--sad-fs-nm); line-height:1.35; transition:background var(--sad-t),color var(--sad-t); } .sad-frow:hover { background:rgba(var(--sad-prgb),.09); color:var(--sad-primary); text-decoration:none; } .sad-frow-active { background:var(--sad-primary)!important; color:#fff!important; font-weight:600; } .sad-frow-active .sad-fcnt { background:rgba(255,255,255,.25)!important; color:#fff!important; } .sad-fname { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; } .sad-fcnt { color:var(--sad-primary); font-weight:700; font-size:var(--sad-fs-br); margin-left:6px; flex-shrink:0; } /* ══ Slider ══ */ .sad-slwrap { padding:10px 12px 12px; } .sad-bubbles { display:flex; justify-content:space-between; margin-bottom:10px; } .sad-bub { background:var(--sad-primary); color:#fff; font-size:var(--sad-fs-br); font-weight:700; padding:3px 8px; border-radius:4px; min-width:36px; text-align:center; } .sad-track { position:relative; height:4px; background:#d0d0d0; border-radius:2px; margin:10px 8px 8px; } .sad-fill { position:absolute; top:0; height:100%; background:var(--sad-primary); border-radius:2px; pointer-events:none; } .sad-range { position:absolute; top:-8px; left:0; width:100%; height:20px; margin:0; padding:0; background:transparent; border:none; outline:none; cursor:pointer; -webkit-appearance:none; appearance:none; } #sad-r0 { z-index:3; } #sad-r1 { z-index:4; } .sad-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; border:2.5px solid var(--sad-primary); box-shadow:0 1px 5px rgba(0,0,0,.2); cursor:pointer; transition:box-shadow var(--sad-t); } .sad-range::-webkit-slider-thumb:hover { box-shadow:0 0 0 5px rgba(var(--sad-prgb),.18); } .sad-range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#fff; border:2.5px solid var(--sad-primary); box-shadow:0 1px 5px rgba(0,0,0,.2); cursor:pointer; } .sad-slabs { display:flex; justify-content:space-between; font-size:var(--sad-fs-br); color:var(--sad-faint); margin-top:6px; } /* ══ Main column ══ */ .sad-main { flex:1; min-width:0; overflow-y:auto; display:flex; flex-direction:column; } .sad-main::-webkit-scrollbar { width:7px; } .sad-main::-webkit-scrollbar-track { background:var(--sad-bg); } .sad-main::-webkit-scrollbar-thumb { background:var(--sad-primary); border-radius:4px; opacity:.5; } .sad-main::-webkit-scrollbar-thumb:hover { background:var(--sad-primary); opacity:1; } /* ══ Loading ══ */ .sad-loading { display:flex; align-items:center; gap:10px; padding:28px 16px; color:var(--sad-muted); font-size:var(--sad-fs-nm); flex-shrink:0; } .sad-spin { width:18px; height:18px; border:2px solid #ddd; border-top-color:var(--sad-primary); border-radius:50%; animation:sadSpin .5s linear infinite; flex-shrink:0; } @keyframes sadSpin { to{transform:rotate(360deg)} } /* ══ Chips ══ */ .sad-crows { flex-shrink:0; border-bottom:1px solid var(--sad-border); background:var(--sad-bgside); } .sad-cgrp { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:8px 14px; } .sad-cgrp+.sad-cgrp { border-top:1px solid var(--sad-border); } .sad-clbl { font-size:var(--sad-fs-lb); font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--sad-lbl); white-space:nowrap; flex-shrink:0; } .sad-clearall { border:none; background:none; cursor:pointer; color:var(--sad-primary); font-size:var(--sad-fs-br); font-weight:600; padding:0; font-family:inherit; flex-shrink:0; } .sad-clearall:hover { text-decoration:underline; } .sad-chips { display:flex; flex-wrap:wrap; gap:5px; } .sad-chip { display:inline-flex; align-items:center; gap:5px; background:var(--sad-bgchip); border:1px solid var(--sad-border); border-radius:20px; padding:3px 10px 3px 8px; font-size:var(--sad-fs-ch); color:var(--sad-chip-c); cursor:pointer; font-family:inherit; white-space:nowrap; transition:background var(--sad-t),border-color var(--sad-t),color var(--sad-t); } .sad-chip:hover { background:rgba(var(--sad-prgb),.09); border-color:var(--sad-primary); color:var(--sad-primary); } /* ══ Section header ══ */ .sad-mhd { display:flex; align-items:center; justify-content:space-between; padding:10px 14px 6px; flex-shrink:0; } .sad-slbl { font-size:var(--sad-fs-lb); font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--sad-lbl); } .sad-cnt { font-size:var(--sad-fs-br); color:var(--sad-muted); } /* ══ View toggle ══ */ .sad-vtog { display:flex; gap:2px; background:#ebebeb; border:1px solid var(--sad-border); border-radius:4px; padding:2px; } .sad-vbtn { border:none; background:none; cursor:pointer; width:26px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:3px; color:var(--sad-muted); transition:background var(--sad-t),color var(--sad-t); } .sad-von { background:var(--sad-primary)!important; color:#fff!important; } /* ══ Grid ══ */ #sad-pa { padding:4px 12px 8px; } .sad-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; } /* ══ Card ══ */ .sad-card { display:flex; flex-direction:column; border:1px solid var(--sad-border); border-radius:var(--sad-rsm); overflow:hidden; text-decoration:none; color:var(--sad-txt); background:var(--sad-bg); cursor:pointer; transition:border-color var(--sad-t),box-shadow var(--sad-t); } .sad-card:hover { border-color:var(--sad-primary); box-shadow:0 4px 16px rgba(0,0,0,.1); text-decoration:none; color:var(--sad-txt); } .sad-cwrap { position:relative; width:100%; padding-top:100%; background:var(--sad-bgimg); overflow:hidden; } .sad-cimg { position:absolute; inset:6px; display:flex; align-items:center; justify-content:center; } .sad-cimg img { max-width:100%; max-height:100%; object-fit:contain; display:block; } .sad-cimg-ph { color:#ccc; } .sad-sale-abs { position:absolute; top:5px; left:5px; z-index:1; background:var(--sad-primary); color:#fff; font-size:9px; font-weight:800; padding:2px 5px; border-radius:3px; text-transform:uppercase; } .sad-cbd { padding:8px 10px 10px; display:flex; flex-direction:column; gap:3px; } .sad-cbr { font-size:var(--sad-fs-br); font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--sad-muted); } .sad-cnm { font-size:var(--sad-fs-nm); font-weight:600; margin:0; color:var(--sad-txt); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; } .sad-hl, mark.sad-hl { background:none; color:var(--sad-primary); font-weight:800; padding:0; } .sad-crf { font-size:var(--sad-fs-rf); color:var(--sad-faint); } /* ══ List ══ */ .sad-lw { padding:2px 12px 8px; } .sad-li { display:flex; align-items:center; gap:12px; padding:8px 6px; border-bottom:1px solid var(--sad-border); text-decoration:none; color:var(--sad-txt); cursor:pointer; transition:background var(--sad-t); border-radius:var(--sad-rsm); } .sad-li:last-child { border-bottom:none; } .sad-li:hover { background:var(--sad-bgside); text-decoration:none; color:var(--sad-txt); } .sad-limg { width:56px; height:56px; flex-shrink:0; border:1px solid var(--sad-border); border-radius:4px; background:var(--sad-bgimg); overflow:hidden; display:flex; align-items:center; justify-content:center; } .sad-limg img { max-width:100%; max-height:100%; object-fit:contain; display:block; } .sad-limg-ph { color:#ccc; } .sad-lbd { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .sad-lnm { font-size:var(--sad-fs-nm); font-weight:600; margin:0; color:var(--sad-txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; } .sad-lmt { display:flex; align-items:center; flex-wrap:wrap; gap:5px; } .sad-lrf { font-size:var(--sad-fs-rf); color:var(--sad-muted); } .sad-lbr { font-size:var(--sad-fs-br); font-weight:700; text-transform:uppercase; color:var(--sad-muted); background:#ececec; border:1px solid #ddd; border-radius:3px; padding:1px 5px; } .sad-saleb { display:inline-block; background:var(--sad-primary); color:#fff; font-size:9px; font-weight:800; padding:2px 5px; border-radius:3px; text-transform:uppercase; } .sad-lft { display:flex; align-items:center; flex-wrap:wrap; gap:8px; } /* ══ Prices ══ */ .sad-prices { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px; } .sad-price { font-size:var(--sad-fs-pr); font-weight:800; color:var(--sad-primary); line-height:1; } .sad-pold { font-size:calc(var(--sad-fs-rf) + 1px); color:var(--sad-faint); text-decoration:line-through; } .sad-pntx { font-size:var(--sad-fs-rf); color:var(--sad-muted); } .sad-card .sad-price { font-size:calc(var(--sad-fs-pr) - 2px); } .sad-stk { font-size:calc(var(--sad-fs-rf) - .5px); font-weight:600; padding:2px 6px; border-radius:3px; } .sad-stk-in { background:#eaf7ed; color:#1b7a34; } .sad-stk-out { background:#fdf0f0; color:#c0392b; } /* ══ See all ══ */ .sad-seeall-inline { display:inline-flex; align-items:center; color:var(--sad-primary); font-size:11px; font-weight:500; text-decoration:none; padding:1px 8px; border-radius:20px; border:1px solid var(--sad-primary); transition:background var(--sad-t),color var(--sad-t); white-space:nowrap; line-height:1.6; } .sad-seeall-inline:hover { background:var(--sad-primary); color:#fff; text-decoration:none; } /* ══ Body lock ══ */ body.sad-lock { overflow:hidden!important; } /* ── Cart button ─────────────────────────────── */ .sad-cbf { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:2px; } .sad-cart-btn { flex-shrink:0; width:34px; height:34px; border:none; border-radius:6px; background:var(--sad-primary); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--sad-t),transform .1s; padding:0; } .sad-cart-btn:hover { filter:brightness(1.15); transform:scale(1.08); } .sad-cart-btn:active { transform:scale(.95); } .sad-cart-btn:disabled { opacity:.6; cursor:wait; } .sad-cart-ok { background:#4caf50!important; } .sad-cart-loading { opacity:.7; }