.coffee-filter{max-width:1200px;margin:0 auto;padding:28px 16px;font-family:inherit}.cf-discover{text-align:center;font-family:var(--font-heading-family, Georgia, "Times New Roman", serif);font-variant:small-caps;font-weight:600;font-size:28px;letter-spacing:.5px;color:rgba(var(--colors-heading, 26 26 26),1);margin-bottom:28px}.cf-categories{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px 40px;padding:0 16px 6px}.cf-categories::-webkit-scrollbar{display:none}.cf-cat{flex:0 0 35%;scroll-snap-align:center;text-align:center;text-decoration:none;min-width:0}.cf-cat img{display:block;width:100%;height:150px;object-fit:contain;object-position:center bottom;filter:grayscale(45%);opacity:.6;transition:filter .3s ease,opacity .3s ease}.cf-cat-label{display:block;margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.6px;line-height:1.3;text-transform:uppercase;color:rgba(var(--colors-text, 90 90 90),.95);transition:color .3s ease}.cf-cat.is-active img{filter:none;opacity:1}.cf-cat.is-active .cf-cat-label{color:#9b7a2f}.cf-groups{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:26px 40px;max-width:900px;margin:0 auto 8px}.cf-group{flex:1 1 100%;text-align:center;margin:0}.cf-group-label{color:#cfcfcf;font-size:13px;letter-spacing:2px;font-weight:700;margin:0 0 12px;text-transform:uppercase}.cf-squares{display:flex;justify-content:center;gap:6px;width:100%;max-width:660px;margin:0 auto}.cf-square{flex:1 1 0;min-width:0;background:transparent;border:0;padding:0;cursor:pointer}.cf-square-fill{display:flex;align-items:center;justify-content:center;background:var(--sq-color, #6b2a1f);color:#fff;font-weight:700;letter-spacing:1.5px;font-size:12px;padding:10px 4px;width:100%;transition:box-shadow .2s}.cf-square.is-active .cf-square-fill{box-shadow:inset 0 0 color-mix(in srgb,var(--sq-color, #6b2a1f) 42%,#fff),inset 0 0 0 4px #fff;outline:1px solid rgba(var(--colors-heading, 30 30 30),.4);outline-offset:2px}.cf-pill-track{display:flex;align-items:center;width:100%;max-width:460px;margin:0 auto;border:1.5px solid #d4d4d4;border-radius:999px;padding:5px;background:#fff}.cf-pill{flex:1;border:none;background:transparent;padding:8px 10px;border-radius:999px;font-weight:700;letter-spacing:1px;font-size:12px;color:#b5b5b5;cursor:pointer;transition:all .25s ease;text-transform:uppercase}.cf-pill.is-active{background:#5a2a1f;color:#fff}.cf-pill-track--gold .cf-pill.is-active{background:#b89a4e;color:#fff}@media(min-width:600px){.coffee-filter{padding:34px 22px}.cf-discover{font-size:32px;margin-bottom:34px}.cf-categories{flex-wrap:nowrap;overflow:visible;justify-content:center;gap:18px;margin:0 0 56px;padding:0}.cf-cat{flex:1 1 0}.cf-cat img{height:175px}.cf-cat-label{font-size:13px;letter-spacing:.6px;margin-top:9px}.cf-group-label{font-size:15px;letter-spacing:3px;margin-bottom:16px}.cf-square-fill{font-size:13px;padding:13px 6px;letter-spacing:2px}.cf-pill{font-size:12px;padding:13px 14px;letter-spacing:1.5px}}@media(min-width:900px){.coffee-filter{padding:44px 28px 20px}.cf-discover{font-size:40px;margin-bottom:44px}.cf-categories{gap:30px;margin:0 auto 80px;max-width:1100px}.cf-cat{max-width:320px}.cf-cat img{height:190px}.cf-cat-label{font-size:13px;letter-spacing:.8px;margin-top:10px}.cf-groups{gap:28px 48px;max-width:1040px;margin-bottom:16px}.cf-group--squares{flex:1 1 100%}.cf-group--pills{flex:1 1 360px;max-width:480px}.cf-group-label{font-size:15px;letter-spacing:3px;margin-bottom:16px}.cf-squares{max-width:640px}.cf-square-fill{font-size:14px;padding:10px 6px;letter-spacing:2px}.cf-pill{font-size:13px;padding:12px 16px;letter-spacing:1.5px}}@media(hover:hover){.cf-pill:hover:not(.is-active){color:#5a2a1f}.cf-square:hover:not(.is-active) .cf-square-fill{box-shadow:inset 0 0 0 7px #ffffff29}.cf-cat:hover img{filter:none;opacity:1}.cf-cat:hover .cf-cat-label{color:#9b7a2f}}html[lang^=ar] .cf-discover,html[lang^=ar] .cf-cat-label,html[lang^=ar] .cf-group-label,html[lang^=ar] .cf-square-fill,html[lang^=ar] .cf-pill{letter-spacing:normal}
/*# sourceMappingURL=/cdn/shop/t/4/compiled_assets/styles.css.map */