/* ============ CLISTELL v3 — listing/filtros/PDP/pesquisa ============ */

/* ---- breadcrumbs ---- */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:12.5px;color:#7d8aa0}
.crumbs a{color:#7d8aa0;transition:.15s}
.crumbs a:hover{color:var(--blue)}
.crumbs .sep{color:#c3cbd8}
.crumbs .cur{color:#1c2c47;font-weight:600;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- listing layout ---- */
.listing{display:grid;grid-template-columns:252px minmax(0,1fr);gap:22px;align-items:start;margin-top:16px}
.listing .grid{grid-template-columns:repeat(auto-fill,minmax(198px,1fr))}
.listing-main{min-width:0}
.filters{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 16px;position:sticky;top:14px;max-height:calc(100vh - 30px);overflow-y:auto}
.fgroup{border-bottom:1px solid #eef1f6;padding:13px 0}
.fgroup:first-child{padding-top:0}
.fgroup:last-child{border-bottom:0;padding-bottom:0}
.fgroup>b{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#17263e;font-weight:700;margin-bottom:10px}
.fopt{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px;color:#44536b;cursor:pointer;user-select:none}
.fopt input{accent-color:var(--blue);width:15px;height:15px;flex-shrink:0}
.fopt .cnt{margin-left:auto;color:#9aa7ba;font-size:11.5px}
.fopt:hover{color:var(--blue)}
.fmore{background:none;border:0;color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;padding:5px 0 0;font-family:inherit}
.fprice{display:flex;gap:8px;align-items:center}
.fprice input{width:100%;border:1px solid #d6dde8;border-radius:7px;padding:8px 10px;font-size:12.5px;font-family:inherit;outline:0}
.fprice button{background:var(--blue);color:#fff;border:0;border-radius:7px;padding:8px 13px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.fchips{display:flex;flex-wrap:wrap;gap:7px}
.fchip{border:1.5px solid #d6dde8;background:#fff;border-radius:999px;padding:6px 13px;font-size:12px;font-weight:600;color:#44536b;cursor:pointer;transition:.15s;font-family:inherit}
.fchip:hover{border-color:var(--blue);color:var(--blue)}
.fchip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.fclear{width:100%;background:#f5f8fd;border:1px dashed #c9d7ee;color:#44536b;border-radius:8px;padding:10px;font-size:12.5px;font-weight:600;cursor:pointer;margin-top:12px;font-family:inherit}
.fclear:hover{color:var(--blue);border-color:var(--blue)}
.fmini{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#8b97a9;padding:2px 0 8px}

/* toolbar */
.toolrow{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.btn-filter{display:none;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 16px;font-size:13px;font-weight:600;color:#33445e;cursor:pointer;font-family:inherit}
.btn-filter svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.chips{display:flex;gap:7px;flex-wrap:wrap;flex:1}
.achip{display:inline-flex;align-items:center;gap:7px;background:#e8f0fe;color:#1257d0;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600}
.achip button{background:none;border:0;color:#1257d0;cursor:pointer;font-size:14px;padding:0;line-height:1;font-family:inherit}
.sortlab{margin-left:auto;font-size:12.5px;color:#64758f;font-weight:600;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sortlab select{border:1px solid #d6dde8;border-radius:8px;padding:8px 30px 8px 12px;font-size:12.5px;font-family:inherit;font-weight:600;color:#1c2c47;outline:0;background:#fff;cursor:pointer}
.countline{font-size:13px;color:#7d8aa0;margin-bottom:14px}
.countline b{color:#1c2c47}
.loadwrap{display:flex;justify-content:center;margin:26px 0 8px}
.loadwrap .btn-white{padding:12px 30px;font-size:13.5px;border-radius:9px}

/* ---- card extras v3 ---- */
.card .rate{display:flex;align-items:center;gap:6px;margin-bottom:7px;min-height:15px}
.stars{color:#f0a500;font-size:12.5px;letter-spacing:1.5px;line-height:1}
.norating{font-size:10.8px;color:#b3bccb;font-style:italic}
.rcount{font-size:11px;color:#8b97a9}
.stockline{display:flex;align-items:center;gap:6px;font-size:11.3px;color:#1fa854;font-weight:600;margin-bottom:10px;flex-wrap:wrap}
.sdot{width:7px;height:7px;border-radius:50%;background:#1fa854;flex-shrink:0}
.stockline .destr{color:#8b97a9;font-weight:500}
.save{font-size:11.3px;color:#1fa854;font-weight:700;margin-bottom:9px}
.discbadge{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-size:11px;font-weight:800;padding:4px 9px;border-radius:8px;z-index:2}
.qvbtn{position:absolute;bottom:10px;left:10px;width:33px;height:33px;border-radius:8px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;z-index:2;opacity:0;transform:translateY(4px);transition:.2s}
.qvbtn svg{width:16px;height:16px;stroke:#3f4f68;fill:none;stroke-width:1.9}
.card:hover .qvbtn{opacity:1;transform:none}
@media(hover:none){.qvbtn{opacity:1;transform:none}}

/* ---- quick view modal ---- */
.qv{display:grid;grid-template-columns:340px 1fr;gap:0;min-height:320px}
.qv-img{background:#fff;border-right:1px solid #f0f2f7;display:grid;place-items:center;padding:24px}
.qv-img img{max-width:100%;max-height:300px;object-fit:contain}
.qv-info{padding:26px 26px 24px;display:flex;flex-direction:column;gap:10px}
.qv-info .brandlink{font-size:11.5px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.5px}
.qv-info h3{font-size:17px;font-weight:700;color:#17263e;line-height:1.35}
.qv-prices{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.qv-prices .price{font-size:23px}
.qv-info .short{font-size:12.8px;color:#64758f;line-height:1.65}
.qv-actions{display:flex;gap:10px;align-items:center;margin-top:6px;flex-wrap:wrap}
.qv-link{font-size:13px;font-weight:600;color:var(--blue)}
.xbtn-dark{position:absolute;top:12px;right:12px;background:rgba(15,44,83,.08);border:0;width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:15px;color:#33445e;z-index:2}
.mbox{position:relative}

/* ---- PDP ---- */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) 450px;gap:28px;margin-top:16px;align-items:start}
.pdp-gal{position:sticky;top:14px}
.gal-main{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;cursor:zoom-in;aspect-ratio:1/1;display:grid;place-items:center}
.gal-main img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.gal-main.zoom img{transform:scale(2)}
.gal-zoomhint{position:absolute;bottom:12px;right:12px;background:rgba(15,44,83,.75);color:#fff;font-size:11px;font-weight:600;padding:6px 12px;border-radius:999px;pointer-events:none}
.gal-thumbs{display:flex;gap:10px;margin-top:10px}
.gal-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:9px;border:2px solid var(--line);cursor:pointer}
.gal-thumbs img.on{border-color:var(--blue)}
.pdp-info .brandlink{font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.6px}
.pdp-info h1{font-size:clamp(20px,3vw,26px);font-weight:800;color:#17263e;line-height:1.3;margin:7px 0 9px}
.pdp-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#7d8aa0;margin-bottom:16px}
.pdp-meta .skuline b{color:#33445e}
.priceblock{background:#f5f8fd;border:1px solid #e3ecf9;border-radius:12px;padding:18px 20px;margin-bottom:14px}
.priceblock .mainrow{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap}
.priceblock .big{font-size:30px;font-weight:800;color:var(--blue)}
.priceblock .old{font-size:15.5px;color:#98a3b5;text-decoration:line-through}
.priceblock .pct{background:var(--red);color:#fff;font-weight:800;font-size:13px;padding:4px 11px;border-radius:8px}
.priceblock .saveline{font-size:13px;color:#1fa854;font-weight:700;margin-top:5px}
.priceblock .ivaline{font-size:11.8px;color:#8b97a9;margin-top:6px}
.stockdline{display:flex;align-items:center;gap:8px;font-size:13.3px;font-weight:600;color:#1fa854;margin-bottom:6px}
.stockdline .sdot{width:9px;height:9px}
.delivline{display:flex;align-items:center;gap:9px;font-size:12.8px;color:#44536b;margin-bottom:18px}
.delivline svg{width:19px;height:19px;stroke:var(--blue);fill:none;stroke-width:1.8;flex-shrink:0}
.buyrow{display:flex;gap:11px;align-items:stretch;flex-wrap:wrap;margin-bottom:13px}
.qty2{display:inline-flex;align-items:center;border:1.5px solid #d6dde8;border-radius:9px;overflow:hidden;height:47px;background:#fff}
.qty2 button{width:40px;height:100%;border:0;background:#fff;cursor:pointer;font-size:17px;color:#33445e}
.qty2 button:hover{background:#eef3fb;color:var(--blue)}
.qty2 b{width:38px;text-align:center;font-size:14.5px}
.buyrow .btn-primary{flex:1;justify-content:center;min-width:170px;height:47px}
.btn-dark{background:#0f2c53;color:#fff;padding:13px 26px;border-radius:9px;border:0;font-weight:600;font-size:14px;display:inline-flex;gap:9px;align-items:center;cursor:pointer;transition:.2s;font-family:inherit}
.btn-dark:hover{background:#1a3d6e}
.iconbtn{width:47px;height:47px;border-radius:9px;border:1.5px solid #d6dde8;background:#fff;display:grid;place-items:center;cursor:pointer;transition:.2s;flex-shrink:0}
.iconbtn svg{width:20px;height:20px;stroke:#5a6a84;fill:none;stroke-width:2}
.iconbtn.active{border-color:#f3b3b3}
.iconbtn.active svg{fill:var(--red);stroke:var(--red)}
.iconbtn.cmp svg{stroke:var(--blue)}
.iconbtn.cmp.active{border-color:var(--blue);background:#eef4fd}
.pdp-benefits{display:grid;gap:8px;margin:16px 0}
.pdp-benefits li{display:flex;gap:9px;align-items:center;font-size:12.8px;color:#44536b}
.pdp-benefits li svg{width:15px;height:15px;stroke:var(--green);fill:none;stroke-width:2.6;flex-shrink:0}
.paychips2{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.paychips2 span{background:#fff;border:1px solid var(--line);color:#33445e;font-size:10.8px;font-weight:700;padding:5px 12px;border-radius:6px}
.pdp-note{font-size:11.6px;color:#8b97a9;background:#f5f8fd;border-radius:9px;padding:10px 13px;line-height:1.6;margin-top:14px}
.pdp-sec{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 34px;margin-top:18px}
.pdp-sec h2{font-size:18px;font-weight:800;color:#17263e;margin-bottom:14px;position:relative;padding-bottom:9px}
.pdp-sec h2::after{content:'';position:absolute;left:0;bottom:0;width:46px;height:3px;background:var(--blue);border-radius:2px}
.pdp-sec p{font-size:13.8px;color:#44536b;line-height:1.85;margin-bottom:10px}
.hllist{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px}
.hllist li{display:flex;gap:9px;align-items:flex-start;font-size:13.3px;color:#44536b;line-height:1.6}
.hllist li::before{content:'✓';color:var(--green);font-weight:800;flex-shrink:0}
.specnote{font-size:12px;color:#8b97a9;background:#f5f8fd;border-radius:9px;padding:11px 14px;line-height:1.65;margin-top:14px}
.specnote a{color:var(--blue);font-weight:600}
.infocards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.infocard{background:#f8fafd;border:1px solid var(--line);border-radius:11px;padding:17px}
.infocard b{font-size:13.3px;color:#17263e;display:block;margin-bottom:6px}
.infocard p{font-size:12.3px;color:#64758f;line-height:1.65;margin:0}
.revempty{text-align:center;padding:34px 20px;background:#f8fafd;border:1px dashed #d6e2f5;border-radius:12px}
.revempty b{font-size:14.5px;color:#17263e;display:block;margin-bottom:8px}
.revempty p{font-size:12.8px;color:#7d8aa0;max-width:460px;margin:0 auto;line-height:1.7}
.fnacbtn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--blue);color:var(--blue);font-size:12.5px;font-weight:700;padding:9px 17px;border-radius:8px;margin-top:6px;transition:.15s}
.fnacbtn:hover{background:var(--blue);color:#fff}

/* FBT */
.fbt{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fbt-it{display:flex;align-items:center;gap:11px}
.fbt-it img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#fff}
.fbt-it .t{font-size:12px;color:#44536b;max-width:150px;line-height:1.4}
.fbt-it .t a:hover{color:var(--blue)}
.fbt-plus{font-size:21px;color:#9aa7ba;font-weight:700}
.fbt-total{margin-left:auto;text-align:right}
.fbt-total span{font-size:12px;color:#8b97a9;display:block}
.fbt-total b{font-size:19px;color:#17263e}

/* ---- wishlist v2 ---- */
.whead{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 22px;margin-top:16px}
.whead span{font-size:13.5px;color:#55657d}
.whead b{color:#17263e}
.wrow{display:grid;grid-template-columns:86px minmax(0,1fr) 150px auto;gap:17px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 18px;margin-top:11px}
.wrow img{width:86px;height:86px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}
.winfo .wname{font-size:13.8px;font-weight:600;color:#17263e;line-height:1.4;display:block;margin-bottom:4px}
.winfo .wname:hover{color:var(--blue)}
.winfo .sub{margin-bottom:6px}
.wprice{text-align:right}
.wprice .old{display:block;font-size:12px;color:#98a3b5;text-decoration:line-through}
.wprice b{font-size:16.5px;color:var(--blue)}
.wprice .pct2{display:inline-block;background:#fdecec;color:var(--red);font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px;margin-top:5px}
.wact{display:flex;flex-direction:column;gap:8px}
.wact .btn-primary{padding:10px 18px;font-size:12.5px;justify-content:center}
.wact .rm{background:none;border:0;color:#9aa7ba;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.wact .rm:hover{color:var(--red)}

/* ---- autocomplete ---- */
.searchwrap{position:relative}
.ac{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:13px;box-shadow:0 24px 54px rgba(8,20,45,.24);z-index:75;overflow:hidden;max-height:430px;overflow-y:auto}
.ac-sec{padding:9px 6px 4px}
.ac-sec>b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:#9aa7ba;padding:5px 12px}
.ac-it{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:9px;cursor:pointer}
.ac-it:hover,.ac-it.active{background:#eef4fd}
.ac-it img{width:38px;height:38px;object-fit:cover;border-radius:7px;border:1px solid var(--line);flex-shrink:0}
.ac-it .t{font-size:13px;color:#22314c;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ac-it .t small{display:block;color:#8b97a9;font-size:11px;font-weight:400}
.ac-it .p{font-size:13px;font-weight:700;color:var(--blue);flex-shrink:0}
.ac-it .ic{width:34px;height:34px;border-radius:8px;background:#eef4fd;display:grid;place-items:center;font-size:16px;flex-shrink:0}
.ac-empty{padding:16px;font-size:13px;color:#8b97a9;text-align:center}
.ac-clear{background:none;border:0;color:var(--blue);font-size:11px;font-weight:600;cursor:pointer;margin-left:auto;font-family:inherit}

/* ---- compare ---- */
#cmpTray{display:none;position:fixed;left:18px;bottom:18px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(8,20,45,.24);padding:10px 12px;align-items:center;gap:12px;z-index:88}
.cmp-thumbs{display:flex;gap:6px}
.cmp-thumbs img{width:38px;height:38px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.cmp-clear{background:#f1f4f9;border:0;width:28px;height:28px;border-radius:8px;cursor:pointer;color:#55657d;font-size:13px}
.cmp-table{width:100%;border-collapse:collapse;font-size:12.8px}
.cmp-table th,.cmp-table td{border:1px solid var(--line);padding:11px 13px;vertical-align:top;text-align:left;line-height:1.55}
.cmp-table td[rowspan]{background:#f8fafd;font-weight:700;color:#17263e;width:130px}
.cmp-table img{width:100%;max-width:130px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.cmp-table .cp{color:var(--blue);font-weight:800;font-size:14.5px}
.cmp-name{font-weight:600;color:#17263e}
.cmp-name a:hover{color:var(--blue)}

/* ---- offers / novidades sections ---- */
.validchip{display:inline-flex;align-items:center;gap:8px;background:#fff6e5;border:1px solid #f3dfae;color:#b97c10;font-size:12.3px;font-weight:600;padding:8px 15px;border-radius:999px;margin:-6px 0 14px}
.offsec{margin-top:30px}
.pageSections .sechead:first-child{margin-top:6px}

/* ---- no results extra ---- */
.nr-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 24px}
.nr-title{font-size:15px;font-weight:700;color:#17263e;margin-top:22px}

/* ============ RESPONSIVE v3 ============ */
@media(max-width:1000px){
 .listing{grid-template-columns:1fr}
 .btn-filter{display:inline-flex}
 .filters{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:78vh;border-radius:18px 18px 0 0;z-index:105;transform:translateY(105%);transition:transform .35s cubic-bezier(.22,.8,.3,1);box-shadow:0 -14px 44px rgba(8,20,45,.3)}
 body.filters-open .filters{transform:none}
 .pdp{grid-template-columns:1fr}
 .pdp-gal{position:static}
 .qv{grid-template-columns:1fr}
 .qv-img{border-right:0;border-bottom:1px solid #f0f2f7}
 .qv-img img{max-height:210px}
 .wrow{grid-template-columns:72px minmax(0,1fr);gap:12px}
 .wprice{grid-column:1;text-align:left;display:flex;align-items:center;gap:10px}
 .wact{grid-column:2;flex-direction:row}
 .wact .btn-primary{flex:1}
 .infocards{grid-template-columns:1fr}
 .hllist{grid-template-columns:1fr}
 .nr-cats{grid-template-columns:1fr 1fr}
 #cmpTray{bottom:74px;left:12px;right:12px;justify-content:center}
 .fbt-total{margin-left:0;text-align:left;width:100%}
 .sortlab{margin-left:auto}
}
@media(max-width:680px){
 .crumbs{margin-top:12px;font-size:11.5px}
 .crumbs .cur{max-width:180px}
 .pdp-sec{padding:22px 18px}
 .toolrow{gap:8px}
 .sortlab select{max-width:150px}
 .buyrow .btn-primary{min-width:0}
 .qty2{height:44px}
 .buyrow .btn-primary,.btn-dark{height:44px}
 .fbt{gap:12px;padding:18px}
 .gal-zoomhint{display:none}
 .listing .grid{grid-template-columns:1fr 1fr}
}