#cp-woobrands-featured,#cp-woobrands-list{--cp-woobrands-background:oklch(1 0 0);--cp-woobrands-foreground:oklch(0.145 0 0);--cp-woobrands-muted:oklch(70.8% 0 0);--cp-woobrands-accent:oklch(0.205 0 0);--cp-woobrands-destructive:oklch(63.7% 0.237 25.331);--cp-woobrands-neutral-50:oklch(98.5% 0 0);--cp-woobrands-neutral-100:oklch(97% 0 0);--cp-woobrands-neutral-200:oklch(92.2% 0 0);--cp-woobrands-neutral-300:oklch(87% 0 0);--cp-woobrands-neutral-400:oklch(70.8% 0 0);--cp-woobrands-red-50:oklch(97.1% 0.013 17.38);--cp-woobrands-yellow-400:oklch(85.2% 0.199 91.936);--cp-woobrands-border:var(--cp-woobrands-neutral-300);--cp-woobrands-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--cp-woobrands-radius:0.625rem;.cp-woobrands__loading{align-items:center;display:flex;height:100px;justify-content:center;width:100%;.animate-spin{animation:spin 1s linear infinite}svg{height:30px;width:30px}}.cp-woobrands__error{background-color:var(--cp-woobrands-red-50);border-color:var(--cp-woobrands-destructive);border-radius:var(--cp-woobrands-radius);border-style:solid;border-width:1px;color:var(--cp-woobrands-destructive);padding:1rem;width:100%}@keyframes spin{to{transform:rotate(1turn)}}}#cp-woobrands-list{[data-slot=card]{background-color:var(--cp-woobrands-background);border:1px solid transparent;border-radius:var(--cp-woobrands-radius);box-shadow:var(--cp-woobrands-shadow-md);display:inline-flex;flex-direction:column;overflow:hidden;padding:.5rem;position:relative;transition:border;transition-duration:.2s;width:120px;&:hover{border-color:var(--cp-woobrands-border)}img{height:80px;margin:0 auto;max-width:90px;-o-object-fit:contain;object-fit:contain;width:auto}[data-slot=card-footer]{align-items:center;display:flex;flex-direction:column;justify-content:center;.name{color:var(--cp-woobrands-foreground);font-size:1rem;line-height:1.5}.count{color:var(--cp-woobrands-muted);font-size:.875rem;line-height:1.42857}}.featured{color:var(--cp-woobrands-yellow-400);position:absolute;right:6px;top:4px;>svg{fill:var(--cp-woobrands-yellow-400);height:16px;width:16px}}}button[data-action=reset-filters],button[data-type=letter]{background-color:var(--cp-woobrands-background);border-color:var(--cp-woobrands-border);border-style:solid;border-width:1px;color:var(--cp-woobrands-accent);text-decoration:none;transition:border;transition-duration:.2s;&:hover{border-color:var(--cp-woobrands-accent);color:var(--cp-woobrands-accent);text-decoration:none}}button[data-type=letter]{align-items:center;display:inline-flex;font-weight:600;height:2.5rem;justify-content:center;line-height:1;padding:.5rem 1rem}button[data-type=letter]:disabled{background-color:var(--cp-woobrands-neutral-400);border-color:var(--cp-woobrands-neutral-400);color:var(--cp-woobrands-background);&:hover{border-color:var(--cp-woobrands-neutral-400)}}button[data-type=letter][data-active=true]{background-color:var(--cp-woobrands-foreground);color:var(--cp-woobrands-background)}button[data-action=reset-filters]{font-size:.875rem;line-height:1;padding-left:.5rem;padding-right:.5rem;>svg{height:16px;margin-right:.25rem;width:16px}}.cp-woobrands__list__input-wrapper{margin-bottom:1rem;position:relative;width:100%;>input[type=text]{padding-left:2.5rem;width:100%}svg{height:20px;position:absolute;top:50%;transform:translateY(-50%);width:20px;&.lucide-search{left:.75rem}&.lucide-circle-x{cursor:pointer;right:.75rem}}}.cp-woobrands__list__letters-wrapper{.letters-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;min-height:2.5rem}h3{line-height:1;margin:0}.letters-buttons{display:flex;flex-wrap:wrap;gap:.5rem}}.cp-woobrands__list__all-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;gap:2rem;margin-top:2.5rem;.letter-big{align-items:flex-end;display:flex;font-size:2.25rem;font-weight:500;gap:1rem;justify-content:space-between;line-height:1;margin-bottom:1rem;position:relative;>span{flex-grow:0;flex-shrink:0}&:after{background-color:var(--cp-woobrands-neutral-300);content:"";display:block;flex-grow:1;height:1px;transform:translateY(-.25rem)}}.brands{align-items:start;display:grid;gap:1rem;&.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}&.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}}@media (width >= 64rem){.cp-woobrands__list__input-wrapper{max-width:500px}.cp-woobrands__list__letters-wrapper{.letters-header{gap:1.5rem;justify-content:flex-start}}}}