.card{border-radius:6px}
.card .thumb{aspect-ratio:1.94/1}
.card .body{padding:1.2rem 1.3rem 1.3rem}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.card .tipo{font-size:.98rem;color:var(--muted)}
.card-wa{display:inline-flex;width:40px;height:40px;margin:-8px -8px -8px 0;align-items:center;justify-content:center;color:var(--ink)}
.card-wa svg{width:22px;height:22px}
.card h3{font-size:1.18rem;line-height:1.25;margin:.35rem 0 .2rem}
.card .loc{font-size:.95rem;font-weight:500;color:var(--text);letter-spacing:0;text-transform:none}
.card-preco{display:flex;align-items:baseline;gap:.9rem;margin:.9rem 0 1.2rem}
.card-preco .neg{font-size:.86rem;color:var(--muted)}

.card .price{font-weight:700;font-size:1.62rem;letter-spacing:-.015em;line-height:1.1;margin:0}
.card .specs{
  margin:auto 0 0;padding-top:1rem;border-top:1px solid var(--line);
  flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.9rem;
}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-3px);border-color:var(--line);box-shadow:0 22px 40px -28px rgba(16,27,36,.4)}
  .card:hover .thumb-slide img{transform:scale(1.03)}
  .card-wa:hover,.card h3 a:hover{color:var(--champ-ink)}
}
.card .thumb-slide img{transition:transform .5s ease}

.cf-seg{position:relative}
.cf-seg-ind{
  position:absolute;top:3px;bottom:3px;left:0;z-index:0;
  border-radius:40px;background:var(--ink);
  transition:transform .38s cubic-bezier(.22,.61,.36,1), width .38s cubic-bezier(.22,.61,.36,1);
}
.cf-seg .cf-pill{position:relative;z-index:1;transition:color .3s ease}
.cf-seg.has-ind .cf-pill.on{background:transparent}
@media (prefers-reduced-motion:reduce){ .cf-seg-ind{transition:none} }

.tag-cat{background:var(--paper);color:var(--ink)}
.tag-cat::before{background:var(--champ)}

.card .tag{z-index:3;pointer-events:none}

.card .thumb-track{overflow-x:hidden}
.thumb-track img{-webkit-user-drag:none;user-select:none}

.cards{grid-template-columns:repeat(auto-fill,minmax(max(280px,calc((100% - 3rem) / 3)),1fr))}

.thumb-dots{filter:drop-shadow(0 0 2px rgba(0,0,0,.45))}

.card .specs{align-items:center;gap:.4rem 1rem}
.card .specs .sp-falta{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.sp-ce{display:inline-flex;align-items:center;gap:.35rem}
.sp-ce b{display:inline-flex;align-items:center;justify-content:center;min-width:1.55rem;height:1.25rem;padding:0 .3rem;border-radius:3px;font-size:.74rem;font-weight:800;line-height:1;color:#fff;background:color-mix(in srgb,var(--muted) 55%,transparent)}

.sp-ce[data-c="A+"] b{background:#00A651}.sp-ce[data-c="A"] b{background:#4CB847}
.sp-ce[data-c="B"] b{background:#8DC63F}.sp-ce[data-c="B-"] b{background:#C6D62E}
.sp-ce[data-c="C"] b{background:#FFF200;color:#3a3a1a}.sp-ce[data-c="D"] b{background:#FDB913;color:#3a2a05}
.sp-ce[data-c="E"] b{background:#F58220}.sp-ce[data-c="F"] b{background:#EF4123}.sp-ce[data-c="G"] b{background:#ED1C24}

.card .specs > span{display:inline-flex;align-items:center;gap:.35rem}
.card .specs .sp-ic{width:16px;height:16px;flex:none;color:var(--ink);opacity:.7}
.card .specs .sp-falta .sp-ic{opacity:.4}

.card-preco .card-wa{margin:0 -8px 0 auto;align-self:center}

[data-c="A+"]{--ce:#00843D}[data-c="A"]{--ce:#19A03E}[data-c="B"]{--ce:#8CC63E}[data-c="B-"]{--ce:#CBDB2A;--ce-t:#2b2f0a}
[data-c="C"]{--ce:#FFE600;--ce-t:#3a3a1a}[data-c="D"]{--ce:#FBBA00;--ce-t:#3a2a05}[data-c="E"]{--ce:#EC6608}[data-c="F"]{--ce:#E30613}
.sp-ce b{
  border-radius:2px 0 0 2px;padding:0 .75rem 0 .35rem;min-width:2rem;justify-content:flex-start;
  background:var(--ce,color-mix(in srgb,var(--muted) 55%,transparent)) !important;color:var(--ce-t,#fff) !important;
  clip-path:polygon(0 0,calc(100% - .45rem) 0,100% 50%,calc(100% - .45rem) 100%,0 100%);
}

.sp-ce{display:inline-flex;align-items:center}
.sp-ce img{display:block;width:26px;height:auto}
.sp-ce b{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:23px;padding:3px 0 0;min-width:0;
  border-radius:0 !important;font-size:.8rem;font-weight:800;color:#fff !important;background:#9A9A9A !important;
  clip-path:polygon(50% 0,100% 25%,100% 100%,0 100%,0 25%);
}

.card .thumb-slide{overflow:hidden}

.cart-tools{gap:.85rem;margin-bottom:1.6rem}
.cart-tools .cart-filters{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem 1.2rem}
.cf-chips{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;min-width:0}
.cf-chip{
  position:relative;display:inline-flex;align-items:center;gap:.45rem;height:42px;padding:0 .9rem 0 1.05rem;
  font:inherit;font-size:.88rem;font-weight:500;color:var(--ink);white-space:nowrap;cursor:pointer;
  background:var(--white);border:1px solid var(--line);border-radius:40px;
  transition:background-color .25s cubic-bezier(.22,.61,.36,1), border-color .25s cubic-bezier(.22,.61,.36,1), color .25s cubic-bezier(.22,.61,.36,1);
}
.cf-chev{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.cf-chip[aria-expanded="true"] .cf-chev{transform:rotate(180deg)}

.cf-chip select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0;-webkit-appearance:none;appearance:none}
.cf-chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cf-chip.is-on .cf-chev{opacity:.8}
.cf-chip:focus-visible,.cf-chip:has(select:focus-visible){outline:2px solid var(--champ);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .cf-chip:not(.is-on):hover{border-color:color-mix(in srgb,var(--ink) 45%,transparent)}
}
.cf-reset{font-size:.84rem;padding:.5rem .3rem;margin-left:.2rem}

.cf-meta{display:flex;align-items:center;gap:1.1rem;font-size:.88rem;color:var(--muted);white-space:nowrap}
.cf-count{font-variant-numeric:tabular-nums}
.cf-sort{position:relative;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}
.cf-sort__v{font-weight:600;color:var(--ink)}
.cf-sort .cf-chev{color:var(--ink);margin-left:-.1rem}

.cf-sort select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0;-webkit-appearance:none;appearance:none}
.cf-sort:has(select:focus-visible){outline:2px solid var(--champ);outline-offset:4px;border-radius:2px}

.cf-pop{
  position:absolute;z-index:30;width:320px;padding:1rem 1rem 1.05rem;
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 26px 48px -28px rgba(16,27,36,.5), 0 2px 8px -4px rgba(16,27,36,.12);
}
.cf-pop[hidden]{display:none}
.cf-pop__t{margin:0 0 .7rem;font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cf-range{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.cf-range label{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;color:var(--muted)}
.cf-pop .cf-num{width:100%;flex:none;height:44px;border-radius:6px;padding:0 .8rem;font-size:.95rem;color:var(--ink)}
.cf-pop__n{margin:.65rem 0 0;font-size:.78rem;color:var(--muted)}

@media (max-width:640px){

  .cart-tools,.cart-tools .cart-filters,.cf-meta{min-width:0;max-width:100%}
  .cart-tools .cart-filters{display:flex;flex-direction:column;align-items:stretch;gap:.6rem}

  .cf-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    box-sizing:border-box;width:calc(100% + 2 * var(--pad));max-width:none;
    margin-inline:calc(var(--pad) * -1);padding:2px var(--pad);scroll-padding-inline:var(--pad)}
  .cf-chips::-webkit-scrollbar{display:none}
  .cf-chip{flex:none;height:40px;font-size:.86rem}
  .cf-meta{justify-content:space-between;font-size:.84rem}
  .cf-pop{left:0 !important;right:0;width:auto}
}
@media (hover:none){ .cf-chip{height:44px} }

@keyframes cfEntra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cf-entra{animation:cfEntra .32s cubic-bezier(.22,.61,.36,1)}
.cart-suggest:not([hidden]){animation:cfEntra .22s cubic-bezier(.22,.61,.36,1)}

@keyframes cfSai{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}
.cf-pop.a-abrir{animation:cfEntra .22s cubic-bezier(.22,.61,.36,1)}
.cf-pop.a-fechar{animation:cfSai .18s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .cf-entra,.cf-pop:not([hidden]),.cart-suggest:not([hidden]){animation:none} }

.cf-js .cf-chip select,.cf-js .cf-sort select{display:none}
.cf-js .cf-chip[role="button"]:focus-visible,.cf-js .cf-sort:focus-visible{outline:2px solid var(--champ);outline-offset:3px}
.cf-pop--lista{width:auto;min-width:230px;padding:.85rem .5rem .5rem}
.cf-pop--lista .cf-pop__t{padding:0 .6rem;margin-bottom:.4rem}
.cf-op{
  display:flex;align-items:center;gap:.6rem;width:100%;min-height:42px;padding:0 .65rem;
  font:inherit;font-size:.92rem;color:var(--text);text-align:left;cursor:pointer;
  background:none;border:0;border-radius:6px;
  transition:background-color .2s cubic-bezier(.22,.61,.36,1), color .2s cubic-bezier(.22,.61,.36,1);
}
.cf-op__t{flex:1}
.cf-op__n{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;
  min-width:1.6rem;text-align:center;padding:.12rem .4rem;border-radius:20px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.cf-op__ok{width:16px;height:16px;flex:none;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s ease}
.cf-op.is-on{color:var(--ink);font-weight:600}
.cf-op.is-on .cf-op__ok{opacity:1}
.cf-op:focus-visible{outline:2px solid var(--champ);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){ .cf-op:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)} }
@media (hover:none){ .cf-op{min-height:46px} }

.nov-track .card,.cards .card,.thumb-slide{scroll-snap-stop:always}
