.bb-ing-glossary{--bb-ing-accent: var(--color-primary-container, #989a5f);--bb-ing-accent-soft: rgba(201, 202, 139, .2);--bb-ing-accent-border: rgba(201, 202, 139, .35);--bb-ing-claim: var(--color-error, #ba1a1a);--bb-ing-pad-x: 1rem;--bb-ing-pad-y: 1.25rem;--bb-ing-gap: .75rem;--bb-ing-header-offset: calc(var(--bb-header-h, 120px) + var(--bb-ing-utility-h, 44px));--bb-ing-utility-h: 44px;--bb-ing-rail-height: 40px;background:var(--color-background, #fcf9f8);color:var(--color-on-surface, #1c1b1b);min-height:60vh}.bb-ing-glossary__layout{display:flex;flex-direction:column;gap:var(--bb-ing-gap)}.bb-ing-glossary__header{text-align:center;padding:var(--bb-ing-pad-y) 0 .5rem}.bb-ing-glossary__title{margin:0 0 .5rem;font-family:var(--font-headline, "Hanken Grotesk", sans-serif);font-size:28px;font-weight:700;line-height:1.15;letter-spacing:.04em;text-transform:uppercase;color:var(--color-on-surface, #1c1b1b)}.bb-ing-glossary__subtitle,.bb-ing-glossary__meta{margin:0;color:var(--color-on-surface-variant, #48473b);font-size:14px;line-height:1.5}.bb-ing-glossary__main{display:flex;flex-direction:column;gap:var(--bb-ing-gap)}.bb-ing-glossary__search{position:relative;width:min(100%,28rem);margin:.25rem auto .35rem;z-index:150}.bb-ing-glossary__search-field{position:relative;display:flex;align-items:center;width:100%;background:var(--color-surface-container-lowest, #ffffff);border:1px solid var(--color-outline-variant, #c9c7b7);border-radius:8px;transition:border-color .15s ease,box-shadow .15s ease}.bb-ing-glossary__search-field:focus-within{border-color:var(--color-primary, #5f612d);box-shadow:0 0 0 2px var(--bb-ing-accent-soft)}.bb-ing-glossary__search-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:.75rem;color:var(--color-on-surface-variant, #48473b);pointer-events:none}.bb-ing-glossary__search-input{flex:1 1 auto;min-width:0;width:100%;min-height:44px;margin:0;padding:.65rem .5rem;border:0;background:transparent;color:var(--color-on-surface, #1c1b1b);font:400 15px/1.4 var(--font-body, "Hanken Grotesk", sans-serif);outline:none;appearance:none;-webkit-appearance:none}.bb-ing-glossary__search-input::-webkit-search-decoration,.bb-ing-glossary__search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.bb-ing-glossary__search-input::placeholder{color:var(--color-outline, #79786a)}.bb-ing-glossary__search-clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;margin-right:.15rem;padding:0;border:0;border-radius:6px;background:transparent;color:var(--color-on-surface-variant, #48473b);cursor:pointer}.bb-ing-glossary__search-clear[hidden]{display:none}@media(hover:hover){.bb-ing-glossary__search-clear:hover{color:var(--color-primary, #5f612d);background:var(--bb-ing-accent-soft)}}.bb-ing-glossary__search-clear:focus-visible{outline:2px solid var(--color-primary, #5f612d);outline-offset:1px}.bb-ing-glossary__search-list{position:absolute;top:calc(100% + .35rem);left:0;right:0;z-index:160;max-height:min(18rem,50vh);margin:0;padding:.35rem 0;list-style:none;overflow-y:auto;background:var(--color-surface-container-lowest, #ffffff);border:1px solid var(--color-outline-variant, #c9c7b7);border-radius:8px;box-shadow:0 10px 28px #1c1b1b1a}.bb-ing-glossary__search-list[hidden]{display:none}.bb-ing-glossary__search-option{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;min-height:44px;margin:0;padding:.55rem .9rem;border:0;background:transparent;color:var(--color-on-surface, #1c1b1b);font:400 14px/1.35 var(--font-body, "Hanken Grotesk", sans-serif);text-align:left;cursor:pointer}.bb-ing-glossary__search-option mark{background:var(--bb-ing-accent-soft);color:inherit;border-radius:2px;padding:0 .05em}.bb-ing-glossary__search-option-alias{font-size:12px;line-height:1.3;color:var(--color-on-surface-variant, #48473b)}.bb-ing-glossary__search-option.is-active,.bb-ing-glossary__search-option:hover{background:var(--color-surface-container-low, #f6f3f2);color:var(--color-primary, #5f612d)}.bb-ing-glossary__search-option:focus-visible{outline:2px solid var(--color-primary, #5f612d);outline-offset:-2px}.bb-ing-glossary__search-empty{margin:0;padding:.85rem .9rem;color:var(--color-on-surface-variant, #48473b);font-size:14px;line-height:1.4}.bb-ing-glossary.is-detail-open .bb-ing-glossary__search{z-index:1}.bb-ing-glossary__rail{position:sticky;top:var(--bb-ing-header-offset);z-index:149;margin:0 calc(-1 * var(--bb-ing-pad-x));padding:.35rem var(--bb-ing-pad-x);background:var(--color-background, #fcf9f8)}.bb-ing-glossary__rail:before,.bb-ing-glossary__rail:after{content:"";position:absolute;top:0;bottom:0;width:1.25rem;pointer-events:none;z-index:1}.bb-ing-glossary__rail:before{left:0;background:linear-gradient(to right,var(--color-background, #fcf9f8),transparent)}.bb-ing-glossary__rail:after{right:0;background:linear-gradient(to left,var(--color-background, #fcf9f8),transparent)}.bb-ing-glossary.is-detail-open .bb-ing-glossary__rail{position:relative;top:auto;z-index:1}.bb-ing-glossary__rail-track{display:flex;flex-wrap:nowrap;align-items:center;gap:.15rem .4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;padding:.15rem 0}.bb-ing-glossary__rail-track::-webkit-scrollbar{display:none}.bb-ing-glossary.is-rail-scrollable .bb-ing-glossary__rail-track{cursor:grab;scrollbar-width:thin}.bb-ing-glossary.is-rail-scrollable .bb-ing-glossary__rail-track:active{cursor:grabbing}.bb-ing-glossary.is-rail-scrollable .bb-ing-glossary__rail-track::-webkit-scrollbar{display:block;height:4px}.bb-ing-glossary.is-rail-scrollable .bb-ing-glossary__rail-track::-webkit-scrollbar-thumb{background:var(--color-outline-variant, #c9c7b7);border-radius:999px}.bb-ing-glossary__letter{flex:0 0 auto;scroll-snap-align:center;min-width:0;min-height:36px;padding:.35rem .45rem;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--color-on-surface-variant, #48473b);font:600 12px/1.2 var(--font-body, "Hanken Grotesk", sans-serif);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:color .15s ease,border-color .15s ease}.bb-ing-glossary__letter:disabled,.bb-ing-glossary__letter.is-disabled{opacity:.22;cursor:not-allowed;pointer-events:none}@media(hover:hover){.bb-ing-glossary__letter:not(:disabled):not(.is-disabled):hover{color:var(--color-primary, #5f612d)}}.bb-ing-glossary__letter:not(:disabled):not(.is-disabled).is-active{color:var(--color-primary, #5f612d);border-bottom-color:var(--bb-ing-accent);background:transparent}.bb-ing-glossary__letter:focus{outline:none}.bb-ing-glossary__letter:focus-visible{outline:2px solid var(--color-primary, #5f612d);outline-offset:2px;border-bottom-color:var(--bb-ing-accent)}.bb-ing-glossary__directory{display:flex;flex-direction:column;gap:1.5rem}.bb-ing-glossary__loading{color:var(--color-on-surface-variant, #48473b);text-align:center;padding:2rem 0}.bb-ing-glossary__section{scroll-margin-top:calc(var(--bb-ing-header-offset) + var(--bb-ing-rail-height) + 12px);border-top:1px solid var(--color-outline-variant, #e5e2e1);padding-top:1rem}.bb-ing-glossary__section-label{margin:0 0 .75rem;font-size:1.25rem;font-weight:700;color:var(--color-on-surface, #1c1b1b)}.bb-ing-glossary__grid{display:grid;grid-template-columns:1fr;gap:.35rem}.bb-ing-glossary__link{display:block;min-height:44px;padding:.65rem .25rem;border:0;background:transparent;color:var(--color-on-surface, #1c1b1b);font:400 14px/1.35 var(--font-body, "Hanken Grotesk", sans-serif);text-align:left;text-decoration:none;cursor:pointer;border-radius:4px;word-break:break-word}.bb-ing-glossary__link:active,.bb-ing-glossary__link.is-selected{color:var(--color-primary, #5f612d);text-decoration:underline;text-underline-offset:3px}@media(hover:hover){.bb-ing-glossary__link:hover{color:var(--color-primary, #5f612d);text-decoration:underline;text-underline-offset:3px}}.bb-ing-glossary__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#1c1b1b59;opacity:0;pointer-events:none;transition:opacity .25s ease}.bb-ing-glossary.is-detail-open .bb-ing-glossary__backdrop{opacity:1;pointer-events:auto;z-index:210}.bb-ing-glossary__detail{position:fixed;inset:auto 0 0 0;z-index:50;max-height:85vh;transform:translateY(100%);transition:transform .28s ease;pointer-events:none;scroll-margin-top:calc(var(--bb-ing-header-offset) + 12px)}.bb-ing-glossary.is-detail-open .bb-ing-glossary__detail{transform:translateY(0);pointer-events:auto;z-index:220}.bb-ing-glossary__detail-inner{position:relative;display:flex;flex-direction:column;max-height:85vh;background:var(--color-surface-container-lowest, #ffffff);border-radius:16px 16px 0 0;border:1px solid var(--color-outline-variant, #e5e2e1);border-bottom:0;box-shadow:0 -8px 32px #1c1b1b14;padding-bottom:env(safe-area-inset-bottom,0);overflow:hidden}.bb-ing-glossary__detail-handle{width:40px;height:4px;margin:10px auto 0;border-radius:999px;background:var(--color-outline-variant, #c9c7b7);flex-shrink:0}.bb-ing-glossary__detail-close{position:absolute;top:10px;right:10px;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:999px;background:var(--color-surface-container-low, #f6f3f2);color:var(--color-on-surface, #1c1b1b);cursor:pointer;transition:background .15s ease,color .15s ease}.bb-ing-glossary__detail-close:hover{background:var(--color-surface-container, #f0eded);color:var(--color-primary, #5f612d)}.bb-ing-glossary__detail-close .material-symbols-outlined{font-size:22px;line-height:1}.bb-ing-glossary__detail-content{overflow-y:auto;padding:.75rem var(--bb-ing-pad-x) 1.25rem;-webkit-overflow-scrolling:touch}.bb-ing-glossary__detail-placeholder{color:var(--color-on-surface-variant, #48473b);margin:0}.bb-ing-detail__header{padding-right:44px;margin-bottom:1rem}.bb-ing-detail__title{margin:0 0 .5rem;font-size:22px;font-weight:700;line-height:1.25;color:var(--color-on-surface, #1c1b1b)}.bb-ing-detail__tag{display:flex;align-items:center;gap:.5rem;margin:0 0 .75rem;color:var(--color-on-surface-variant, #48473b);font-size:14px}.bb-ing-detail__tag-dot{width:8px;height:8px;border-radius:50%;background:var(--bb-ing-claim);flex-shrink:0}.bb-ing-detail__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.bb-ing-detail__badge{display:inline-flex;align-items:center;padding:.25rem .65rem;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.bb-ing-detail__badge--claim{border:1px solid var(--bb-ing-claim);color:var(--bb-ing-claim)}.bb-ing-detail__badge--ocr{background:var(--bb-ing-accent-soft);color:var(--color-primary, #5f612d);border:1px solid var(--bb-ing-accent-border)}.bb-ing-detail__badge--alias{background:var(--color-surface-container-low, #f6f3f2);color:var(--color-on-surface-variant, #48473b);border:1px solid var(--color-outline-variant, #e5e2e1)}.bb-ing-detail__lang{display:inline-flex;gap:4px;padding:4px;margin-bottom:1rem;border:1px solid var(--color-outline-variant, #e5e2e1);border-radius:999px;background:var(--color-surface-container-low, #f6f3f2)}.bb-ing-detail__lang-btn{min-width:44px;min-height:36px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--color-on-surface-variant, #48473b);font:600 13px/1 var(--font-body, "Hanken Grotesk", sans-serif);cursor:pointer}.bb-ing-detail__lang-btn.is-active{background:#fff;color:var(--bb-ing-accent);box-shadow:0 1px 2px #1c1b1b14}.bb-ing-detail__field{margin-bottom:1rem}.bb-ing-detail__field-label{margin:0 0 .35rem;color:var(--color-primary, #5f612d);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.bb-ing-detail__field-value{margin:0;color:var(--color-on-surface, #1c1b1b);font-size:15px;line-height:1.55}.bb-ing-detail__divider{border:0;border-top:1px solid var(--color-outline-variant, #e5e2e1);margin:1rem 0}.bb-ing-detail__notice{padding:1rem 1.125rem;border-radius:8px;background:var(--color-surface-container-low, #f6f3f2);border:1px solid var(--color-outline-variant, #e5e2e1)}.bb-ing-detail__notice-title{margin:0 0 .5rem;font-size:14px;font-weight:600;color:var(--color-on-surface, #1c1b1b)}.bb-ing-detail__notice-body{margin:0;font-size:14px;line-height:1.55;color:var(--color-on-surface-variant, #48473b)}.bb-ing-detail__brand{margin-bottom:1rem}.bb-ing-detail__brand-name{margin:0 0 .5rem;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-on-surface-variant, #48473b)}.bb-ing-detail__products{display:flex;flex-direction:column;gap:.5rem}.bb-ing-detail__product{display:flex;align-items:center;gap:.75rem;min-height:44px;padding:.5rem;border-radius:8px;background:var(--color-surface-container-low, #f6f3f2);border:1px solid transparent;text-decoration:none;color:var(--color-on-surface, #1c1b1b);transition:border-color .15s ease,background .15s ease}@media(hover:hover){.bb-ing-detail__product:hover{border-color:var(--bb-ing-accent-border);background:var(--color-surface-container-lowest, #ffffff)}}.bb-ing-detail__product-thumb{width:64px;height:64px;border-radius:6px;object-fit:cover;background:var(--color-surface-container, #f0eded);flex-shrink:0}.bb-ing-detail__product-title{font-size:14px;line-height:1.35}.bb-ing-detail__footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--color-outline-variant, #e5e2e1);font-size:12px;color:var(--color-on-surface-variant, #48473b)}@media(prefers-reduced-motion:reduce){.bb-ing-glossary__detail,.bb-ing-glossary__backdrop{transition:none}}@media(min-width:750px){.bb-ing-glossary{--bb-ing-pad-x: 1.5rem;--bb-ing-gap: 1rem}.bb-ing-glossary__title{font-size:32px}.bb-ing-glossary__rail{margin:0;padding:.5rem 0}.bb-ing-glossary__rail-track{gap:.2rem .55rem;padding:.25rem 0}.bb-ing-glossary__letter{min-height:32px;padding:.25rem .35rem;font-size:13px}.bb-ing-glossary__grid{grid-template-columns:repeat(2,1fr);gap:.5rem}.bb-ing-glossary__backdrop{display:none}.bb-ing-glossary.is-detail-open .bb-ing-glossary__backdrop{display:block}.bb-ing-glossary__detail{position:relative;inset:auto;max-height:none;transform:none;pointer-events:auto;z-index:5;isolation:isolate}.bb-ing-glossary.is-detail-open .bb-ing-glossary__detail{position:fixed;top:calc(var(--bb-ing-header-offset) + 16px);left:50%;right:auto;bottom:auto;width:min(720px,calc(100% - 2 * var(--bb-ing-pad-x)));max-height:calc(100vh - var(--bb-ing-header-offset) - 32px);transform:translate(-50%);z-index:220}.bb-ing-glossary__detail[hidden]{display:none}.bb-ing-glossary__detail-inner{max-height:calc(100vh - var(--bb-ing-header-offset) - 32px);border-radius:12px;border:1px solid var(--color-outline-variant, #e5e2e1);padding-bottom:0;box-shadow:0 8px 32px #1c1b1b1f}.bb-ing-glossary.is-detail-open .bb-ing-glossary__detail-content{max-height:calc(100vh - var(--bb-ing-header-offset) - 96px)}.bb-ing-glossary__detail-handle{display:none}.bb-ing-glossary__main{display:flex;flex-direction:column;gap:var(--bb-ing-gap);min-width:0}.bb-ing-glossary__layout{display:grid;grid-template-columns:1fr;gap:var(--bb-ing-gap)}.bb-ing-detail__products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}}@media(min-width:990px){.bb-ing-glossary{--bb-ing-pad-x: 2rem;--bb-ing-gap: 1.25rem}.bb-ing-glossary__rail-track{justify-content:center}.bb-ing-glossary.is-rail-scrollable .bb-ing-glossary__rail-track{justify-content:flex-start}.bb-ing-glossary__grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.bb-ing-glossary__section-label{font-size:2rem}}
/*# sourceMappingURL=/cdn/shop/t/12/assets/bb-ingredient-glossary.css.map */