/* Ingredient layouts only. Editorial copy and product-card mechanics stay at their source. */
.bbi-redesign {
    --bbi-blue: #1a4775;
    --bbi-ink: #3f3f3f;
    --bbi-slate: #45545f;
    --bbi-mist: #c2d0dd;
    --bbi-line: #d7e1e9;
    --bbi-pale: #f3f6f8;
    color: var(--bbi-ink);
    font: 300 18px/1.55 Lato, sans-serif;
    text-align: left;
}
.bbi-redesign, .bbi-redesign * { box-sizing: border-box; }
.bbi-redesign:not(dialog) { padding-top: 28px; }
.bbi-redesign .wrap { width: min(1200px, calc(100% - 80px)); max-width: 1200px; margin: 0 auto; padding: 0; }
.bbi-redesign a { color: var(--bbi-blue); text-decoration: none; }
.bbi-redesign button, .bbi-redesign input, .bbi-redesign select { font-family: Lato, sans-serif; }
.bbi-redesign :is(a, button, input, select, summary) { touch-action: manipulation; }
.bbi-redesign :is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--bbi-blue); outline-offset: 4px; }
.bbi-redesign button { cursor: pointer; }
.bbi-redesign button:disabled { opacity: .35; cursor: default; }
.bbi-redesign img { display: block; max-width: 100%; }
.bbi-redesign :is(h1, h2, h3):not(.bfl-feature-card *) { font-family: Montserrat, sans-serif; font-weight: 400; line-height: 1.28; letter-spacing: .5px; text-transform: none; overflow-wrap: anywhere; }
.bbi-redesign h1 { font-size: clamp(36px, 4vw, 54px); margin: 0 0 22px; }
.bbi-redesign h2 { font-size: clamp(26px, 2.5vw, 35px); margin: 0 0 24px; }
.bbi-redesign h3:not(.bfl-feature-card *) { font-size: 25px; margin-top: 0; }
.bbi-redesign p:not(.bfl-feature-card *) { margin-top: 0; }
.bbi-redesign .crumb { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 34px; color: #77858d; font: 400 13px/1.5 Lato, sans-serif; }
.bbi-redesign .crumb :is(a, span):not(:last-child)::after { content: '/'; padding-left: 10px; color: #b0bac0; }
.bbi-redesign .hub-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: center; padding: 10px 0 42px; }
.bbi-redesign .hub-hero h1 { font-size: clamp(40px, 4.2vw, 60px); color: var(--bbi-ink); margin-bottom: 30px; text-align: left; }
.bbi-redesign .hero-count { display: inline-flex; align-items: center; gap: 15px; min-width: 240px; padding-top: 17px; border-top: 1px solid var(--bbi-line); color: var(--bbi-blue); font: 400 15px/1.4 Montserrat, sans-serif; }
.bbi-redesign .hero-count strong { font-size: 27px; font-weight: 400; }
.bbi-redesign .diptych { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; align-items: end; }
.bbi-redesign .diptych img { display: block; width: 100%; height: 256px; object-fit: cover; border-radius: 4px; }
.bbi-redesign .diptych img:last-child { height: 210px; }
.bbi-redesign .library { padding: 34px 0 70px; border-top: 1px solid var(--bbi-line); scroll-margin-top: 110px; }
.bbi-redesign .library form { margin: 0; }
.bbi-redesign .library-top { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-bottom: 25px; }
.bbi-redesign .library-top h2 { margin: 0; font-size: 29px; }
.bbi-redesign .search-row { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
.bbi-redesign input.search { width: 100%; min-width: 290px; height: auto; margin: 0; padding: 12px 15px 12px 43px; border: 1px solid #aab9c6; border-radius: 5px; box-shadow: none; color: var(--bbi-slate); font: 400 16px/1.5 Lato, sans-serif; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2345545f' stroke-width='1.5'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='m15 15 6 6'/%3E%3C/svg%3E") no-repeat 14px center; }
.bbi-redesign .search-row .search-submit, .bbi-redesign .filter-submit { min-height: 44px; margin: 0; padding: 10px 19px; border: 1px solid var(--bbi-blue); border-radius: 5px; background: var(--bbi-blue); color: #fff; font: 400 14px/1.4 Lato, sans-serif; text-transform: none; letter-spacing: 0; }
.bbi-redesign .filter-toggle { display: none; }
.bbi-redesign .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.bbi-redesign .filter-field { display: flex; flex: 1 1 180px; flex-direction: column; gap: 6px; min-width: 0; margin: 0; color: var(--bbi-slate); font: 400 13px/1.5 Lato, sans-serif; }
.bbi-redesign .filter-field select { width: 100%; max-width: 260px; height: auto; margin: 0; padding: 7px 25px 9px 0; border: 0; border-bottom: 1px solid #afbdc7; border-radius: 0; background-color: #fff; color: var(--bbi-blue); box-shadow: none; font: 400 15px/1.5 Lato, sans-serif; }
.bbi-redesign .result-count { display: block; margin: 0 0 0 auto; color: #74848d; font: 400 14px/1.5 Lato, sans-serif; }
.bbi-redesign .filter-reset { font: 400 14px/1.5 Lato, sans-serif; text-decoration: underline; }
.bbi-redesign .alphabet { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin: 0; padding: 15px 0 20px; border-top: 1px solid #edf1f4; }
.bbi-redesign .alphabet :is(a, button) { display: inline-flex; flex: 0 0 auto; justify-content: center; align-items: center; min-width: 24px; min-height: 34px; margin: 0; padding: 5px; border: 0; border-radius: 3px; background: none; color: var(--bbi-blue); font: 400 13px/1.4 Montserrat, sans-serif; text-transform: none; letter-spacing: 0; }
.bbi-redesign .alphabet :is(a, button):first-child { min-width: 42px; }
.bbi-redesign .alphabet :is(.active, [aria-current="true"], [aria-current="page"]) { background: var(--bbi-blue); color: #fff; }
.bbi-redesign .ingredient-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
.bbi-redesign .ingredient-card { display: grid; grid-template-rows: 230px auto auto auto; align-content: start; row-gap: 13px; position: relative; min-width: 0; margin: 0; padding: 0; color: var(--bbi-ink); }
.bbi-redesign .ingredient-card .card-image { display: block; height: 230px; overflow: hidden; border-radius: 5px; background: var(--bbi-pale); }
.bbi-redesign .ingredient-card .card-image img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; transition: transform .25s ease; }
.bbi-redesign .ingredient-card h3 { margin: 0; color: var(--bbi-blue); font-size: 23px; }
.bbi-redesign .ingredient-card .benefits { display: block; margin: 0; max-height: none; overflow: visible; color: var(--bbi-slate); font: 300 17px/1.5 Lato, sans-serif; overflow-wrap: anywhere; }
.bbi-redesign .ingredient-card .benefits p { margin: 0 0 10px; }
.bbi-redesign .ingredient-card .benefits p:last-child { margin-bottom: 0; }
.bbi-redesign .ingredient-card .card-link { margin-top: 1px; padding-top: 11px; border-top: 1px solid var(--bbi-line); color: var(--bbi-blue); font: 400 14px/1.5 Lato, sans-serif; }
.bbi-redesign .no-photo { display: grid; place-items: center; height: 100%; min-height: 140px; border-radius: 5px; background: var(--bbi-pale); color: var(--bbi-slate); font: 400 15px/1.5 Montserrat, sans-serif; }
.bbi-redesign .pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; margin: 48px 0 0; padding: 0; }
.bbi-redesign .pagination :is(a, span, button) { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 39px; width: auto; min-height: 39px; margin: 0; padding: 6px 10px; border: 1px solid var(--bbi-line); border-radius: 50%; background: #fff; color: var(--bbi-blue); font: 400 14px/1.4 Lato, sans-serif; }
.bbi-redesign .pagination .current { border-color: var(--bbi-blue); background: var(--bbi-blue); color: #fff; }
.bbi-redesign .pagination .dots { min-width: 24px; border: 0; padding: 0; }
.bbi-redesign .empty-results { grid-column: 1 / -1; margin: 0; padding: 50px 20px; text-align: center; color: var(--bbi-slate); }
.bbi-redesign .detail-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: center; gap: 80px; padding: 2px 0 42px; }
.bbi-redesign .detail-hero h1 { max-width: 720px; color: var(--bbi-blue); text-align: left; }
.bbi-redesign .detail-benefits { max-width: 670px; margin: 0 0 25px; color: var(--bbi-slate); font: 300 21px/1.55 Lato, sans-serif; overflow-wrap: anywhere; }
.bbi-redesign .detail-benefits p { margin: 0 0 14px; }
.bbi-redesign .detail-benefits p:last-child { margin-bottom: 0; }
.bbi-redesign .taxonomy-pills { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; }
.bbi-redesign .taxonomy-pills :is(a, span) { display: inline-block; padding: 6px 14px; border-radius: 25px; background: #edf3f7; color: var(--bbi-blue); font: 400 12px/1.5 Montserrat, sans-serif; overflow-wrap: anywhere; }
.bbi-redesign .detail-hero .detail-photo, .bbi-redesign .detail-hero > img { display: block; width: 100%; height: 310px; object-fit: cover; border-radius: 5px; }
.bbi-redesign .detail-hero .detail-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bbi-redesign .article-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; gap: 55px; padding: 44px 0 60px; border-top: 1px solid var(--bbi-line); }
.bbi-redesign .article-layout.no-toc { grid-template-columns: minmax(0, 1fr); }
.bbi-redesign .toc { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; border-left: 1px solid var(--bbi-line); }
.bbi-redesign .toc a { display: block; padding: 11px 15px; border-bottom: 1px solid #edf1f4; font: 400 13px/1.5 Montserrat, sans-serif; }
.bbi-redesign .source-copy { min-width: 0; max-width: 100%; color: var(--bbi-slate); font: 300 18px/1.7 Lato, sans-serif; overflow-wrap: anywhere; }
.bbi-redesign .source-copy :is(h2, h3) { margin: 34px 0 18px; color: var(--bbi-ink); font: 400 28px/1.35 Montserrat, sans-serif; letter-spacing: .3px; scroll-margin-top: 125px; }
.bbi-redesign .source-copy > :is(h2, h3):first-child { margin-top: 0; }
.bbi-redesign .source-copy ul { margin: 0 0 22px; padding: 0 0 0 23px; list-style: disc outside; }
.bbi-redesign .source-copy ol { margin: 0 0 22px; padding: 0 0 0 23px; list-style: decimal outside; }
.bbi-redesign .source-copy li { margin: 0 0 12px; padding-left: 4px; }
.bbi-redesign .source-copy strong { font-weight: 700; color: var(--bbi-slate); }
.bbi-redesign .source-copy p { margin: 0 0 22px; }
.bbi-redesign .source-copy > :last-child { margin-bottom: 0; }
.bbi-redesign .technical-info { display: grid; gap: 10px; margin: 25px 0 0; font-size: 14px; }
.bbi-redesign .technical-info dt { font-weight: 700; }
.bbi-redesign .technical-info dd { margin: 0 0 10px; }
.bbi-redesign .body-empty { min-height: 40px; }
.bbi-redesign .products-section { padding: 42px 0 70px; border-top: 1px solid var(--bbi-line); }
.bbi-redesign .products-section > h2 { max-width: 800px; margin-bottom: 36px; color: var(--bbi-blue); }
.bbi-redesign .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
.bbi-redesign .product-grid > * { min-width: 0; max-width: 100%; }
.bbi-redesign .product-grid.one { grid-template-columns: minmax(0, 420px); justify-content: center; }
.bbi-redesign .detail-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 25px 0 40px; border-top: 1px solid var(--bbi-line); font: 400 14px/1.5 Lato, sans-serif; }
.bbi-redesign .button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 44px; margin: 0; padding: 11px 25px; border: 0; border-radius: 28px; background: var(--bbi-blue); color: #fff; font: 400 15px/1.35 Lato, sans-serif; text-transform: none; text-align: center; letter-spacing: 0; }
/* Native dialog is the scope root, so these rules intentionally target both classes. */
.bbi-redesign.ingredient-dialog { position: fixed; inset: 0; display: none; width: min(960px, calc(100vw - 80px)); max-width: calc(100vw - 80px); height: auto; max-height: 90vh; max-height: 90dvh; margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 25px 80px #10263840; color: var(--bbi-ink); }
.bbi-redesign.ingredient-dialog[open] { display: flex; flex-direction: column; }
#bbi-ingredient-dialog::backdrop { background: rgb(29 42 52 / 48%); }
.bbi-redesign .dialog-header { display: flex; align-items: center; flex: 0 0 auto; gap: 20px; width: 100%; padding: 22px 28px 18px; border-bottom: 1px solid var(--bbi-line); background: #fff; }
.bbi-redesign .dialog-header h2 { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; color: var(--bbi-blue); font: 400 29px/1.25 Montserrat, sans-serif; letter-spacing: .3px; overflow-wrap: anywhere; }
.bbi-redesign .dialog-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 1px solid var(--bbi-line); border-radius: 50%; background: #fff; color: var(--bbi-blue); font: 300 29px/1 Lato, sans-serif; }
.bbi-redesign .dialog-nav { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; margin: 0 0 0 auto; padding: 0; color: var(--bbi-slate); font: 400 12px/1.4 Lato, sans-serif; }
.bbi-redesign .dialog-nav button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #f0f5f8; color: var(--bbi-blue); font: 400 21px/1 Lato, sans-serif; }
.bbi-redesign .dialog-nav [data-bbi-counter] { white-space: nowrap; }
.bbi-redesign .dialog-scroll { flex: 1 1 auto; min-height: 0; padding: 24px 28px 28px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.bbi-redesign .dialog-leading { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 28px; margin-bottom: 27px; }
.bbi-redesign .dialog-leading > img, .bbi-redesign .dialog-leading > .dialog-photo { display: block; width: 100%; height: 172px; margin: 0; border-radius: 5px; object-fit: cover; }
.bbi-redesign .dialog-leading .dialog-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bbi-redesign .dialog-intro { min-width: 0; color: var(--bbi-slate); font: 300 18px/1.6 Lato, sans-serif; }
.bbi-redesign .dialog-intro > :last-child { margin-bottom: 0; }
.bbi-redesign .dialog-benefits { margin: 0 0 23px; color: var(--bbi-slate); font: 300 18px/1.6 Lato, sans-serif; }
.bbi-redesign .dialog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; padding: 0; font-size: 13px; }
.bbi-redesign .dialog-meta :is(a, span) { display: inline-block; padding: 5px 12px; border-radius: 20px; background: #edf3f7; color: var(--bbi-blue); font: 400 13px/1.5 Lato, sans-serif; }
.bbi-redesign .dialog-copy { color: var(--bbi-slate); font: 300 16px/1.65 Lato, sans-serif; }
.bbi-redesign .dialog-section { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--bbi-line); background: transparent; box-shadow: none; }
.bbi-redesign .dialog-section:last-of-type { margin-bottom: 23px; border-bottom: 1px solid var(--bbi-line); }
.bbi-redesign .dialog-section summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0; padding: 17px 0; list-style: none; background: transparent; cursor: pointer; }
.bbi-redesign .dialog-section summary::-webkit-details-marker { display: none; }
.bbi-redesign .dialog-section summary::after { content: '+'; flex: 0 0 auto; color: var(--bbi-blue); font: 300 24px/1 Lato, sans-serif; }
.bbi-redesign .dialog-section[open] summary::after { content: '−'; }
.bbi-redesign .dialog-section summary :is(h2, h3) { margin: 0; padding: 0; color: var(--bbi-blue); font: 400 19px/1.45 Montserrat, sans-serif; letter-spacing: 0; }
.bbi-redesign .dialog-section .section-content { padding: 0 5px 6px 0; }
.bbi-redesign .dialog-copy li { margin-bottom: 10px; }
.bbi-redesign .dialog-copy ul { margin-bottom: 16px; padding-left: 22px; }
.bbi-redesign .dialog-context { display: flex; align-items: center; gap: 18px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--bbi-line); color: var(--bbi-slate); }
.bbi-redesign .dialog-context img { width: 56px; height: 62px; margin: 0; object-fit: contain; }
.bbi-redesign .dialog-context span { display: block; color: #71818d; font: 400 12px/1.5 Lato, sans-serif; }
.bbi-redesign .dialog-context strong { display: block; margin-top: 4px; color: var(--bbi-blue); font: 400 18px/1.4 Montserrat, sans-serif; }
.bbi-redesign .dialog-footer { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 25px; width: 100%; padding: 17px 28px; border-top: 1px solid var(--bbi-line); background: #fff; }
.bbi-redesign .dialog-footer .quiet { min-height: 44px; margin: 0; padding: 10px 0; border: 0; background: none; color: var(--bbi-blue); font: 400 14px/1.4 Lato, sans-serif; text-transform: none; letter-spacing: 0; }
.bbi-redesign .dialog-footer .button { min-width: 250px; font-size: 15px; }
.bbi-redesign .dialog-loading, .bbi-redesign .dialog-error { margin: 0; padding: 35px 0; color: var(--bbi-slate); font: 400 17px/1.6 Lato, sans-serif; }
.bbi-redesign .dialog-error a { text-decoration: underline; }
@media (hover: hover) {
    .bbi-redesign .button:hover, .bbi-redesign .filter-submit:hover { background: #123c65; color: #fff; }
    .bbi-redesign .ingredient-card:hover .card-image img { transform: scale(1.025); }
    .bbi-redesign .ingredient-card .card-link:hover, .bbi-redesign .toc a:hover { text-decoration: underline; }
    .bbi-redesign .dialog-close:hover { background: var(--bbi-pale); }
}
@media (max-width: 1020px) {
    .bbi-redesign .wrap { width: calc(100% - 48px); }
    .bbi-redesign .hub-hero { gap: 35px; }
    .bbi-redesign .ingredient-card { grid-template-rows: 200px auto auto auto; }
    .bbi-redesign .ingredient-card .card-image { height: 200px; }
    .bbi-redesign .article-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 30px; }
    .bbi-redesign .detail-hero { gap: 38px; }
    .bbi-redesign .search-row { flex-wrap: wrap; }
    .bbi-redesign input.search { min-width: 210px; }
    .bbi-redesign .dialog-header { gap: 10px; }
    .bbi-redesign .dialog-header h2 { font-size: 26px; }
    .bbi-redesign .dialog-leading { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .bbi-redesign { font-size: 16px; }
    .bbi-redesign:not(dialog) { padding-top: 18px; }
    .bbi-redesign .wrap { width: calc(100% - 40px); }
    .bbi-redesign .crumb { gap: 8px; margin: 10px 0 25px; font-size: 11px; }
    .bbi-redesign .hub-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0 0 28px; }
    .bbi-redesign .hub-hero h1 { margin-bottom: 17px; font-size: 35px; letter-spacing: .4px; }
    .bbi-redesign .hero-count { min-width: 0; gap: 10px; padding: 0; border: 0; font-size: 13px; }
    .bbi-redesign .hero-count strong { font-size: 20px; }
    .bbi-redesign .diptych img { height: 140px; }
    .bbi-redesign .diptych img:last-child { height: 120px; }
    .bbi-redesign .library { padding-top: 24px; scroll-margin-top: 90px; }
    .bbi-redesign .library-top { display: block; margin-bottom: 18px; }
    .bbi-redesign .library-top h2 { margin-bottom: 20px; font-size: 24px; }
    .bbi-redesign .search-row { width: 100%; flex-wrap: wrap; }
    .bbi-redesign input.search { flex: 1 1 175px; width: 100%; min-width: 0; padding: 11px 8px 11px 36px; background-position: 10px center; background-size: 17px; font-size: 16px; }
    .bbi-redesign .search-row .search-submit { flex: 0 0 auto; padding: 10px 13px; }
    .bbi-redesign.bbi-filters-enhanced .filter-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 44px; margin: 0; padding: 10px 14px; border: 0; border-radius: 5px; background: var(--bbi-blue); color: #fff; font: 400 14px/1.4 Lato, sans-serif; letter-spacing: 0; text-transform: none; }
    .bbi-redesign .filters { flex-direction: column; align-items: stretch; gap: 14px; padding: 5px 0 15px; }
    .bbi-redesign.bbi-filters-enhanced .filters:not(.is-open) { display: none; }
    .bbi-redesign .filter-field { flex: none; min-width: 0; font-size: 12px; }
    .bbi-redesign .filter-field select { width: 100%; max-width: none; font-size: 16px; }
    .bbi-redesign .result-count { margin: 0; font-size: 13px; }
    .bbi-redesign .alphabet { justify-content: flex-start; gap: 4px; margin-bottom: 2px; padding: 10px 0 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
    .bbi-redesign .alphabet :is(a, button) { min-width: 24px; min-height: 36px; padding: 5px 4px; font-size: 12px; }
    .bbi-redesign .ingredient-grid { display: block; }
    .bbi-redesign .ingredient-card { grid-template-columns: 108px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 9px 17px; margin-bottom: 28px; padding-bottom: 25px; border-bottom: 1px solid var(--bbi-line); }
    .bbi-redesign .ingredient-card .card-image { grid-column: 1; grid-row: 1 / span 3; height: 140px; align-self: start; }
    .bbi-redesign .ingredient-card h3 { grid-column: 2; font-size: 19px; line-height: 1.4; letter-spacing: 0; }
    .bbi-redesign .ingredient-card .benefits { grid-column: 2; font-size: 15px; line-height: 1.55; }
    .bbi-redesign .ingredient-card .card-link { grid-column: 2; padding-top: 3px; border-top: 0; font-size: 12px; }
    .bbi-redesign .ingredient-card:last-child { margin-bottom: 0; border-bottom: 0; }
    .bbi-redesign .pagination { gap: 6px; margin-top: 30px; }
    .bbi-redesign .pagination :is(a, span, button) { min-width: 36px; min-height: 36px; padding: 5px 9px; font-size: 12px; }
    .bbi-redesign .detail-hero { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 0 0 30px; }
    .bbi-redesign .detail-hero h1 { margin-bottom: 17px; font-size: 35px; }
    .bbi-redesign .detail-benefits { margin-bottom: 18px; font-size: 18px; line-height: 1.55; }
    .bbi-redesign .taxonomy-pills { gap: 7px; }
    .bbi-redesign .taxonomy-pills :is(a, span) { padding: 5px 10px; font-size: 11px; }
    .bbi-redesign .detail-hero .detail-photo, .bbi-redesign .detail-hero > img { height: 180px; object-fit: cover; }
    .bbi-redesign .article-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 24px 0 35px; }
    .bbi-redesign .toc { position: static; display: flex; gap: 0; padding: 0; border: 0; border-top: 1px solid var(--bbi-line); border-bottom: 1px solid var(--bbi-line); }
    .bbi-redesign .toc a { padding: 11px 0; font-size: 12px; line-height: 1.4; }
    .bbi-redesign .toc a:last-child { border-bottom: 0; }
    .bbi-redesign .source-copy { font-size: 17px; line-height: 1.65; }
    .bbi-redesign .source-copy :is(h2, h3) { margin: 30px 0 17px; font-size: 23px; line-height: 1.4; letter-spacing: 0; scroll-margin-top: 100px; }
    .bbi-redesign .source-copy li { margin-bottom: 13px; padding-left: 1px; }
    .bbi-redesign .source-copy ul { padding-left: 20px; }
    .bbi-redesign .products-section { padding: 32px 0 35px; }
    .bbi-redesign .products-section > h2 { margin-bottom: 26px; font-size: 26px; }
    .bbi-redesign .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
    .bbi-redesign .product-grid.one { grid-template-columns: minmax(0, 380px); }
    .bbi-redesign .detail-bottom { gap: 20px; padding: 20px 0 30px; font-size: 12px; }
    .bbi-redesign.ingredient-dialog { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; margin: 0; inset: 0; border-radius: 0; }
    .bbi-redesign .dialog-header { position: relative; flex-wrap: wrap; gap: 13px; padding: 16px 18px 14px; }
    .bbi-redesign .dialog-header h2 { order: 1; flex: 1 1 calc(100% - 60px); max-width: calc(100% - 55px); font-size: 25px; line-height: 1.32; }
    .bbi-redesign .dialog-close { position: absolute; right: 16px; top: 15px; order: 2; }
    .bbi-redesign .dialog-nav { order: 3; flex-basis: 100%; justify-content: center; gap: 14px; margin: 0; font-size: 12px; }
    .bbi-redesign .dialog-nav button { width: 36px; height: 36px; }
    .bbi-redesign .dialog-scroll { padding: 20px 20px 25px; }
    .bbi-redesign .dialog-leading { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 20px; margin-bottom: 22px; }
    .bbi-redesign .dialog-leading > img, .bbi-redesign .dialog-leading > .dialog-photo { height: 140px; object-fit: cover; }
    .bbi-redesign .dialog-intro, .bbi-redesign .dialog-benefits { font-size: 17px; line-height: 1.6; }
    .bbi-redesign .dialog-copy { font-size: 16px; line-height: 1.65; }
    .bbi-redesign .dialog-section summary { gap: 15px; padding: 16px 0; }
    .bbi-redesign .dialog-section summary :is(h2, h3) { font-size: 17px; line-height: 1.5; }
    .bbi-redesign .dialog-copy li { margin-bottom: 13px; }
    .bbi-redesign .dialog-meta { gap: 6px; margin: 0 0 21px; }
    .bbi-redesign .dialog-meta :is(a, span) { padding: 5px 10px; font-size: 12px; }
    .bbi-redesign .dialog-context { gap: 12px; margin-top: 25px; padding-top: 18px; }
    .bbi-redesign .dialog-context img { width: 45px; height: 54px; }
    .bbi-redesign .dialog-context strong { font-size: 16px; }
    .bbi-redesign .dialog-footer { justify-content: center; flex-direction: column; gap: 0; padding: 10px 20px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .bbi-redesign .dialog-footer .quiet { min-height: 34px; margin-bottom: 7px; padding: 4px 0; font-size: 12px; }
    .bbi-redesign .dialog-footer .button { width: 100%; min-width: 0; min-height: 46px; font-size: 15px; }
}
@media (max-width: 380px) {
    .bbi-redesign .wrap { width: calc(100% - 32px); }
    .bbi-redesign .ingredient-card { grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; }
    .bbi-redesign .ingredient-card h3 { font-size: 18px; }
    .bbi-redesign .ingredient-card .card-image { height: 122px; }
    .bbi-redesign .product-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .bbi-redesign *, .bbi-redesign *::before, .bbi-redesign *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Keep search and filter controls on one compact mobile row. */
@media (max-width: 767px) {
    .bbi-redesign .search-row { flex-wrap: nowrap; }
    .bbi-redesign input.search { flex: 1 1 0; }
    .bbi-redesign .search-row .search-submit { flex: 0 0 44px; width: 44px; padding: 0; font-size: 0; }
    .bbi-redesign .search-row .search-submit::after { content: '→'; font: 400 22px/1 Lato, sans-serif; }
}
/* Override the theme's generic WooCommerce .button treatment only in this dialog. */
#bbi-ingredient-dialog .dialog-footer a.button {
    background: var(--bbi-blue) !important;
    color: #fff !important;
    font: 400 15px/1.35 Lato, sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}
@media (max-width: 767px) {
    #bbi-ingredient-dialog .dialog-nav button { width: 44px; height: 44px; min-height: 44px; }
}
/* The A-Z rail also scrolls at tablet widths, before the mobile breakpoint. */
.bbi-redesign .alphabet { overflow-x: auto; overscroll-behavior-x: contain; }
/* Verified composition links stay separate from the curated ingredient carousel. */
.bbi-redesign .detail-hero.without-photo, .bbi-redesign .dialog-leading.without-photo { grid-template-columns: minmax(0, 1fr); }
.bbi-product-ingredients .bbi-composition-links { margin: 16px 0 0; padding: 0; border: 0; border-top: 1px solid #d7e1e9; background: transparent; color: #45545f; font: 400 14px/1.5 Lato, sans-serif; }
.bbi-product-ingredients .bbi-composition-links summary { display: list-item; min-height: 44px; margin: 0; padding: 11px 0 8px; cursor: pointer; color: #1a4775; font: 400 14px/1.5 Lato, sans-serif; overflow-wrap: anywhere; }
.bbi-product-ingredients .bbi-composition-links summary::marker { color: #1a4775; }
.bbi-product-ingredients .bbi-composition-links ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.bbi-product-ingredients .bbi-composition-links li { margin: 0; padding: 0; max-width: 100%; }
.bbi-product-ingredients .bbi-composition-links a { display: inline-block; min-height: 36px; max-width: 100%; margin: 0; padding: 6px 10px; border: 1px solid #d7e1e9; border-radius: 18px; background: transparent; color: #1a4775; font: 400 14px/1.5 Lato, sans-serif; text-decoration: none; overflow-wrap: anywhere; }
.bbi-product-ingredients .bbi-composition-links :is(a, summary):focus-visible { outline: 2px solid #1a4775; outline-offset: 3px; }
@media (hover: hover) { .bbi-product-ingredients .bbi-composition-links a:hover { text-decoration: underline; } }

/* The library hero uses the page's editable featured image as a decorative backdrop. */
.bbi-hub-redesign .hub-hero.hub-hero--photographic {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 360px;
    margin: 0 0 36px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e2e9ed;
    border-radius: 20px;
    background: #eef3f6;
}
.bbi-hub-redesign .hub-hero--photographic .hub-hero-visual {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}
.bbi-hub-redesign .hub-hero--photographic .hub-hero-image {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
}
.bbi-hub-redesign .hub-hero--photographic::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(248,250,252,.96) 0%, rgba(248,250,252,.9) 29%, rgba(248,250,252,.44) 48%, rgba(248,250,252,0) 64%);
    pointer-events: none;
}
.bbi-hub-redesign .hub-hero--photographic .hub-hero-copy {
    width: min(100%, 620px);
    min-width: 0;
    padding: 56px;
}
.bbi-hub-redesign .hub-hero--photographic h1 {
    max-width: 540px;
    margin: 0 0 25px;
    color: var(--bbi-blue);
    font-size: clamp(38px, 4.2vw, 58px);
    line-height: 1.18;
    letter-spacing: .3px;
}
.bbi-hub-redesign .hub-hero--photographic .hero-count {
    min-width: 0;
    width: max-content;
    max-width: 100%;
    gap: 12px;
    margin: 0;
    padding-top: 18px;
    border-color: rgba(26,71,117,.22);
}
.bbi-hub-redesign .hub-hero--photographic .hero-count strong { font-size: 32px; }
.bbi-hub-redesign .hub-hero--photographic + .library { padding-top: 0; border-top: 0; }
@media (min-width: 768px) and (max-width: 1020px) {
    .bbi-hub-redesign .hub-hero.hub-hero--photographic { min-height: 320px; }
    .bbi-hub-redesign .hub-hero--photographic .hub-hero-copy { width: 70%; padding: 38px; }
    .bbi-hub-redesign .hub-hero--photographic h1 { font-size: 44px; }
}
@media (max-width: 767px) {
    .bbi-hub-redesign .hub-hero.hub-hero--photographic { min-height: 390px; align-items: flex-start; margin-bottom: 28px; border-radius: 15px; }
    .bbi-hub-redesign .hub-hero--photographic .hub-hero-copy { width: 100%; padding: 28px; }
    .bbi-hub-redesign .hub-hero--photographic h1 { max-width: 100%; margin-bottom: 16px; font-size: clamp(29px, 7.9vw, 38px); line-height: 1.2; }
    .bbi-hub-redesign .hub-hero--photographic .hero-count { padding-top: 12px; gap: 10px; font-size: 13px; }
    .bbi-hub-redesign .hub-hero--photographic .hero-count strong { font-size: 26px; }
    .bbi-hub-redesign .hub-hero--photographic .hub-hero-image { object-position: 72% center; }
    .bbi-hub-redesign .hub-hero--photographic::before { background: linear-gradient(180deg, rgba(248,250,252,.99) 0%, rgba(248,250,252,.94) 32%, rgba(248,250,252,.28) 57%, rgba(248,250,252,0) 76%); }
}

/* Library controls and cards, scoped away from articles and ingredient dialogs. */
.bbi-hub-redesign .bbi-library-form { padding: 26px; border: 1px solid #e3e7ea; border-radius: 16px; background: #f5f6f7; }
.bbi-hub-redesign .library-top { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,430px); gap: 24px; margin-bottom: 24px; }
.bbi-hub-redesign .library-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.bbi-hub-redesign .library-heading h2 { margin: 0; color: #45545f; font-size: 27px; }
.bbi-hub-redesign .result-count { flex: 0 0 auto; margin: 0; padding: 5px 9px; border: 1px solid #dce1e5; border-radius: 7px; background: #fff; color: #66737c; font: 400 12px/1.4 Lato,sans-serif; white-space: nowrap; }
.bbi-hub-redesign .search-row { width: 100%; flex-wrap: nowrap; gap: 8px; }
.bbi-hub-redesign input.search { flex: 1 1 0; min-width: 0; min-height: 48px; border: 1px solid #d8dfe4; border-radius: 9px; background-color: #fff; color: #45545f; }
.bbi-hub-redesign .search-row .search-submit, .bbi-hub-redesign.bbi-filters-enhanced .filter-toggle, .bbi-hub-redesign .filter-submit { flex: 0 0 auto; min-height: 48px; padding: 11px 15px; border: 1px solid #d5dce1; border-radius: 9px; background: #e8ecef; color: #45545f; font: 400 14px/1.4 Lato,sans-serif; letter-spacing: 0; text-transform: none; transition: background .18s ease,color .18s ease,border-color .18s ease; }
.bbi-hub-redesign .search-row .search-submit::after { color: inherit !important; }
.bbi-hub-redesign .filters { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin: 0; padding: 0; }
.bbi-hub-redesign .filter-field { flex: 1 1 180px; gap: 8px; color: #66737c; font: 400 12px/1.4 Lato,sans-serif; }
.bbi-hub-redesign .filter-field select { width: 100%; max-width: none; min-height: 46px; padding: 11px 36px 11px 13px; border: 1px solid #d8dfe4; border-radius: 9px; background-color: #fff; color: #45545f; font: 400 15px/1.4 Lato,sans-serif; }
.bbi-hub-redesign.bbi-library-enhanced .filter-submit { display: none; }
.bbi-hub-redesign .filter-reset { display: inline-flex; align-items: center; min-height: 46px; margin: 0; padding: 9px 2px; color: #66737c; font: 400 13px/1.4 Lato,sans-serif; text-underline-offset: 3px; }
.bbi-hub-redesign .alphabet { justify-content: space-between; gap: 4px; margin: 18px 0 26px; padding: 8px; border: 1px solid #e3e7ea; border-radius: 12px; background: #f5f6f7; scrollbar-width: thin; }
.bbi-hub-redesign .alphabet :is(a,button) { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 32px; min-height: 42px; margin: 0; padding: 5px 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #647079; font: 400 12px/1.4 Montserrat,sans-serif; transition: background .18s ease,color .18s ease,transform .18s ease; }
.bbi-hub-redesign .alphabet button:disabled { color: #b4bcc2; background: #f0f2f3; opacity: 1; cursor: default; box-shadow: none; transform: none; }
.bbi-hub-redesign .alphabet a:first-child { min-width: 48px; }
.bbi-hub-redesign .alphabet a:is(.active,[aria-current]) { border-color: #5d6b76; background: #5d6b76; color: #fff; }
.bbi-hub-redesign .ingredient-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 18px 24px; margin: 0; transition: opacity .15s ease; }
.bbi-hub-redesign .ingredient-card { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 230px minmax(60px,auto) 1fr auto; gap: 18px 0; align-content: stretch; min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid #e3e7ea; border-radius: 14px; background: #fff; box-shadow: 0 2px 9px rgba(35,52,67,.025); transition: border-color .2s ease,box-shadow .2s ease; }
.bbi-hub-redesign .ingredient-card .card-image { grid-column: 1; grid-row: auto; height: 230px; margin: 0; border-radius: 0; background: #f4f6f7; align-self: start; }
.bbi-hub-redesign .ingredient-card .card-image img { height: 100%; object-fit: cover; }
.bbi-hub-redesign .ingredient-card h3 { grid-column: 1; align-self: start; min-width: 0; margin: 0; padding: 0 20px; color: #45545f; font-size: 22px; line-height: 1.35; letter-spacing: .25px; }
.bbi-hub-redesign .ingredient-card h3 a { color: inherit; }
.bbi-hub-redesign .ingredient-card .benefits { grid-column: 1; min-width: 0; margin: 0; padding: 0 20px; max-height: none; color: #5c6871; font: 300 17px/1.55 Lato,sans-serif; overflow: visible; }
.bbi-hub-redesign .ingredient-card-footer { grid-column: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 68px; margin: 0 20px 19px; padding: 15px 0 0; border-top: 1px solid #e0e6ea; align-self: stretch; }
.bbi-hub-redesign .ingredient-card .card-link { grid-column: auto; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; color: #455f74; font: 400 13px/1.4 Lato,sans-serif; }
.bbi-hub-redesign .ingredient-product-thumbs { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.bbi-hub-redesign .ingredient-product-thumb { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; overflow: hidden; border: 1px solid #e1e6e9; border-radius: 8px; background: #f7f8f9; transition: border-color .18s ease,transform .18s ease; }
.bbi-hub-redesign .ingredient-product-thumb img { display: block; width: 100%; height: 100%; margin: 0; padding: 3px; object-fit: contain; border-radius: 7px; }
.bbi-hub-redesign .ingredient-card:last-child { margin-bottom: 0; border-bottom: 1px solid #e3e7ea; }
.bbi-hub-redesign .empty-results { grid-column: 1/-1; margin: 0; padding: 34px; border: 1px solid #e3e7ea; border-radius: 12px; background: #f5f6f7; color: #66737c; }
.bbi-hub-redesign .library.is-loading .ingredient-grid { opacity: .45; }
.bbi-hub-redesign.bbi-library-enhanced .ingredient-grid { animation: bbi-library-results-in .2s ease both; }
@keyframes bbi-library-results-in { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@supports (grid-template-rows: subgrid) { .bbi-hub-redesign .ingredient-card { grid-row: span 4; grid-template-rows: subgrid; } }
@media (hover: hover) {
    .bbi-hub-redesign .search-row .search-submit:hover, .bbi-hub-redesign .filter-submit:hover, .bbi-hub-redesign.bbi-filters-enhanced .filter-toggle:hover { border-color: #596a78; background: #596a78; color: #fff; }
    .bbi-hub-redesign .alphabet a:hover { background: #e3e8ec; color: #1a4775; transform: translateY(-2px); }
    .bbi-hub-redesign .alphabet a:is(.active,[aria-current]):hover { background: #485d6d; color: #fff; }
    .bbi-hub-redesign .ingredient-card:hover { border-color: #cbd5dc; box-shadow: 0 9px 25px rgba(35,52,67,.075); }
    .bbi-hub-redesign .ingredient-card h3 a:hover { color: #1a4775; }
    .bbi-hub-redesign .ingredient-product-thumb:hover { border-color: #9aafbf; transform: translateY(-2px); }
}
@media (max-width: 1020px) {
    .bbi-hub-redesign .library-top { grid-template-columns: minmax(0,1fr); gap: 20px; }
    .bbi-hub-redesign .ingredient-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
    .bbi-hub-redesign .ingredient-card .card-image { height: 210px; }
    .bbi-hub-redesign .ingredient-card h3 { font-size: 21px; }
    .bbi-hub-redesign .alphabet { justify-content: flex-start; }
}
@media (max-width: 767px) {
    .bbi-hub-redesign .bbi-library-form { padding: 20px; border-radius: 13px; }
    .bbi-hub-redesign .library-heading { gap: 9px; }
    .bbi-hub-redesign .library-heading h2 { margin: 0; font-size: 24px; }
    .bbi-hub-redesign .search-row { display: flex; flex-wrap: nowrap; gap: 7px; }
    .bbi-hub-redesign input.search { min-height: 46px; padding-left: 34px; }
    .bbi-hub-redesign .search-row .search-submit { flex: 0 0 44px; width: 44px; min-height: 46px; padding: 0; font-size: 0; }
    .bbi-hub-redesign.bbi-filters-enhanced .filter-toggle { min-height: 46px; padding: 10px; font-size: 13px; }
    .bbi-hub-redesign .filters { gap: 14px; margin-top: 19px; }
    .bbi-hub-redesign .filter-field { flex: 1 1 100%; }
    .bbi-hub-redesign .filter-field select { font-size: 16px; }
    .bbi-hub-redesign .alphabet { margin: 15px 0 20px; padding: 7px; }
    .bbi-hub-redesign .alphabet :is(a,button) { min-width: 36px; min-height: 44px; }
    .bbi-hub-redesign .ingredient-card .card-image { grid-column: 1; grid-row: auto; align-self: start; }
    .bbi-hub-redesign .ingredient-card h3, .bbi-hub-redesign .ingredient-card .benefits, .bbi-hub-redesign .ingredient-card-footer { grid-column: 1; }
}
@media (max-width: 600px) {
    .bbi-hub-redesign .ingredient-grid { grid-template-columns: minmax(0,1fr); }
    .bbi-hub-redesign .ingredient-card .card-image { height: 215px; }
    .bbi-hub-redesign .ingredient-card h3 { font-size: 22px; }
}

/* Individual ingredient pages: the same source copy, a quieter reading layout. */
.bbi-single-redesign .detail-navigation { margin: 0 0 20px; }
.bbi-single-redesign .ingredient-back { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 17px; border: 1px solid #e2e6e9; border-radius: 24px; background: #f5f6f7; color: #52616c; font: 400 13px/1.5 Montserrat, sans-serif; transition: background .18s ease, border-color .18s ease; }
.bbi-single-redesign .ingredient-back svg { flex: 0 0 18px; }
.bbi-single-redesign .detail-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 40px; padding: 36px 40px; border: 1px solid #e3e7ea; border-radius: 18px; background: #f5f6f7; }
.bbi-single-redesign .detail-hero-copy { min-width: 0; }
.bbi-single-redesign .detail-hero h1 { margin: 0 0 22px; color: #45545f; font-size: clamp(32px, 3.7vw, 50px); line-height: 1.18; letter-spacing: .3px; overflow-wrap: break-word; hyphens: auto; }
.bbi-single-redesign .detail-benefits { max-width: 630px; margin: 0 0 23px; font-size: 20px; line-height: 1.6; }
.bbi-single-redesign .taxonomy-pills { gap: 8px; }
.bbi-single-redesign .taxonomy-pills :is(a, span) { padding: 6px 12px; border: 1px solid #e3e7ea; background: #fff; color: #5a6872; font-size: 11px; }
.bbi-single-redesign .detail-products-link { display: inline-flex; align-items: center; gap: 17px; min-height: 44px; margin-top: 13px; color: #52616c; font: 400 13px/1.5 Montserrat, sans-serif; text-decoration: underline; text-underline-offset: 4px; }
.bbi-single-redesign .detail-visual { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 14px; overflow: hidden; border-radius: 13px; background: #fff; }
.bbi-single-redesign .detail-hero .detail-photo { width: 100%; height: 280px; border-radius: 7px; object-fit: contain; }
.bbi-single-redesign .detail-hero.without-photo { grid-template-columns: minmax(0, 1fr); }
.bbi-single-redesign .detail-hero.without-photo .detail-hero-copy { max-width: 900px; }
.bbi-single-redesign .article-layout { grid-template-columns: 245px minmax(0, 1fr); gap: 46px; padding: 44px 0 52px; border-top: 0; }
.bbi-single-redesign .article-layout.no-toc { grid-template-columns: minmax(0, 1fr); }
.bbi-single-redesign .detail-reading { min-width: 0; max-width: 860px; }
.bbi-single-redesign .article-layout.no-toc .detail-reading { margin: 0 auto; }
.bbi-single-redesign .toc { top: 112px; gap: 5px; padding: 17px 12px 12px; border: 1px solid #e3e7ea; border-radius: 14px; background: #f5f6f7; }
.bbi-single-redesign .toc-label { padding: 2px 12px 10px; color: #7a858d; font: 400 11px/1.5 Montserrat, sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.bbi-single-redesign .toc a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 8px; color: #52616c; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; transition: background .18s ease, color .18s ease; }
.bbi-single-redesign .source-copy { font-size: 18px; line-height: 1.75; }
.bbi-single-redesign .source-copy > p:first-child { font-size: 20px; line-height: 1.65; color: #45545f; }
.bbi-single-redesign .source-copy :is(h2, h3) { margin: 38px 0 20px; padding-top: 26px; border-top: 1px solid #e3e7ea; color: #45545f; font-size: 27px; line-height: 1.4; scroll-margin-top: 120px; }
.bbi-single-redesign .source-copy > :is(h2, h3):first-child { padding-top: 0; border-top: 0; }
.bbi-single-redesign .source-copy li { margin-bottom: 14px; }
.bbi-single-redesign .source-copy :is(h2, h3):target { border-top-color: #95a4af; }
.bbi-single-redesign .technical-info { padding: 23px; border-radius: 12px; background: #f5f6f7; }
.bbi-single-redesign .products-section { margin: 10px 0 38px; padding: 35px 28px 28px; border: 1px solid #e3e7ea; border-radius: 18px; background: #fafbfc; }
.bbi-single-redesign .products-section > h2 { max-width: 770px; margin: 0 auto 30px; color: #45545f; font-size: clamp(24px, 2.3vw, 30px); text-align: center; scroll-margin-top: 120px; }
.bbi-single-redesign .product-grid { gap: 24px; }
.bbi-single-redesign .detail-bottom { padding: 0 0 40px; border: 0; }
@media (hover: hover) {
    .bbi-single-redesign .ingredient-back:hover { background: #e9edef; border-color: #cbd3d9; }
    .bbi-single-redesign .toc a:hover { background: #fff; color: #1a4775; text-decoration: none; }
    .bbi-single-redesign .detail-products-link:hover { color: #1a4775; }
}
@media (min-width: 768px) and (max-width: 1020px) {
    .bbi-single-redesign .detail-hero { gap: 26px; padding: 28px; }
    .bbi-single-redesign .detail-hero .detail-photo { height: 240px; }
    .bbi-single-redesign .detail-hero h1 { font-size: 36px; }
    .bbi-single-redesign .article-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 30px; }
    .bbi-single-redesign .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .bbi-single-redesign .detail-navigation { margin-bottom: 16px; }
    .bbi-single-redesign .ingredient-back { padding: 9px 14px; font-size: 12px; }
    .bbi-single-redesign .detail-hero { gap: 24px; padding: 24px; border-radius: 15px; }
    .bbi-single-redesign .detail-hero h1 { margin-bottom: 17px; font-size: clamp(28px, 7.6vw, 36px); line-height: 1.22; }
    .bbi-single-redesign .detail-benefits { margin-bottom: 18px; font-size: 18px; line-height: 1.6; }
    .bbi-single-redesign .detail-visual { width: 100%; padding: 10px; border-radius: 10px; }
    .bbi-single-redesign .detail-hero .detail-photo { height: 210px; }
    .bbi-single-redesign .article-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 0 34px; }
    .bbi-single-redesign .toc { position: static; gap: 4px; padding: 16px 12px 12px; border: 1px solid #e3e7ea; }
    .bbi-single-redesign .toc a { padding: 10px 12px; font-size: 12px; line-height: 1.5; }
    .bbi-single-redesign .source-copy { font-size: 17px; line-height: 1.7; }
    .bbi-single-redesign .source-copy > p:first-child { font-size: 18px; }
    .bbi-single-redesign .source-copy :is(h2, h3) { margin: 28px 0 18px; padding-top: 22px; font-size: 23px; scroll-margin-top: 100px; }
    .bbi-single-redesign .products-section { margin: 10px 0 28px; padding: 26px 16px 20px; border-radius: 15px; }
    .bbi-single-redesign .products-section > h2 { margin-bottom: 24px; font-size: 23px; scroll-margin-top: 100px; }
    .bbi-single-redesign .product-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .bbi-single-redesign .product-grid.one { grid-template-columns: minmax(0, 1fr); }
    .bbi-single-redesign .detail-bottom { padding-bottom: 30px; }
}
@media (max-width: 380px) {
    .bbi-single-redesign .detail-hero { padding: 21px 18px; }
    .bbi-single-redesign .detail-hero .detail-photo { height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
    .bbi-single-redesign :is(.ingredient-back, .toc a) { transition: none; }
}

.bbi-single-redesign .detail-hero + .source-copy:empty + .products-section { margin-top: 28px; }
@media (min-width: 1021px) {
    .bbi-single-redesign .product-grid:is(.two, .four) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .bbi-single-redesign .product-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Related products on ingredient pages only; WooCommerce data and mini-PDPs stay shared. */
.bbi-single-redesign .products-section { padding: 36px 28px 30px; background: #f5f6f7; border-color: #e3e7ea; border-radius: 20px; }
.bbi-single-redesign .products-section > h2 { margin-bottom: 32px; line-height: 1.4; }
.bbi-single-redesign .products-section .product-grid { gap: 22px; align-items: stretch; }
.bbi-single-redesign .products-section .bbi-redesign-product { display: flex; min-width: 0; }
.bbi-single-redesign .products-section .bfl-feature-card { position: relative; display: flex; flex-direction: column; gap: 14px; height: auto; max-width: none; margin: 0; padding: 24px; border: 1px solid #e2e7eb; border-radius: 18px; background: #fff; box-shadow: 0 4px 16px rgb(44 62 78 / 3%); transition: border-color .25s ease, box-shadow .25s ease; }
.bbi-single-redesign .products-section .bfl-feature-card > .bfl-feature-card__category { order: 1; align-self: center; justify-self: center; width: fit-content; max-width: 100%; min-height: 0; margin: 0; padding: 7px 11px; border-radius: 20px; background: #f2f4f6; color: #5b6973; font: 400 10px/1.5 Montserrat, sans-serif; letter-spacing: .65px; }
.bbi-single-redesign .products-section .bfl-feature-card__media { display: contents; height: auto; min-height: 0; margin: 0; background: none; }
.bbi-single-redesign .products-section .bfl-feature-card__photo { order: 2; position: relative; inset: auto; display: flex; align-items: center; justify-content: center; width: 100%; height: 210px; min-height: 0; padding: 6px; margin: 0; border-radius: 12px; }
.bbi-single-redesign .products-section .bfl-feature-card .bfl-feature-card__image { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; opacity: 1; transform: none; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.bbi-single-redesign .products-section .bfl-feature-card > .bfl-feature-card__title { order: 3; align-self: start; min-height: 0; margin: 0; padding: 0; color: #45545f; font: 500 18px/1.45 Montserrat, sans-serif; letter-spacing: .25px; }
.bbi-single-redesign .products-section .bfl-feature-card > .bfl-feature-card__slogan { order: 4; align-self: start; min-height: 0; margin: 0; padding: 0; color: #5a6872; font: 300 16px/1.5 Lato, sans-serif; }
.bbi-single-redesign .products-section .bfl-feature-card__annotation { order: 5; position: static; align-self: start; width: 100%; max-width: 100%; margin: 0; padding: 12px 14px; border: 0; border-radius: 11px; background: #f5f7f8; text-align: left; transform: none; }
.bbi-single-redesign .products-section .bfl-feature-card .bfl-feature-card__annotation p { max-width: none; margin: 0; padding: 0; color: #63717b; font: 400 13px/1.55 Lato, sans-serif; }
.bbi-single-redesign .products-section .bfl-feature-card__footer { order: 6; align-self: end; margin-top: auto; padding-top: 16px; border-top: 1px solid #edf0f2; }
.bbi-single-redesign .products-section .bfl-feature-card__footer .bfl-feature-card__price { min-height: 30px; margin: 0 0 12px; color: #1a4775; font-size: 23px; }
.bbi-single-redesign .products-section .bfl-feature-card__footer .bfl-feature-card__add { width: 100%; max-width: 230px; min-height: 44px; margin: 0; padding: 11px 15px; font-size: 13px; font-weight: 700; transition: background .2s ease, box-shadow .2s ease; }
.bbi-single-redesign .products-section .bfl-feature-card .bfl-feature-card__details { min-height: 44px; margin-top: 5px; padding: 10px 6px; font-size: 13px; }
.bbi-single-redesign .products-section .bfl-feature-card__details .bfl-feature-card__arrow { transition: transform .25s ease; }
/* One shared row per information type, including products without editorial benefits. */
@supports (grid-template-rows: subgrid) {
    .bbi-single-redesign .products-section .product-grid { row-gap: 16px; }
    .bbi-single-redesign .products-section .bbi-redesign-product { display: grid; grid-template-rows: subgrid; grid-row: span 6; }
    .bbi-single-redesign .products-section .bfl-feature-card { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; row-gap: 14px; }
    .bbi-single-redesign .products-section .bfl-feature-card > .bfl-feature-card__category { grid-row: 1; }
    .bbi-single-redesign .products-section .bfl-feature-card__photo { grid-row: 2; }
    .bbi-single-redesign .products-section .bfl-feature-card > .bfl-feature-card__title { grid-row: 3; }
    .bbi-single-redesign .products-section .bfl-feature-card > .bfl-feature-card__slogan { grid-row: 4; }
    .bbi-single-redesign .products-section .bfl-feature-card__annotation { grid-row: 5; }
    .bbi-single-redesign .products-section .bfl-feature-card__footer { grid-row: 6; margin-top: 0; }
}
/* Keyboard focus gets the same gentle emphasis as pointer hover. */
.bbi-single-redesign .products-section .bfl-feature-card:focus-within { border-color: #b9c8d3; box-shadow: 0 12px 28px rgb(44 62 78 / 9%); }
@media (hover: hover) and (pointer: fine) {
    .bbi-single-redesign .products-section .bfl-feature-card:hover { border-color: #b9c8d3; box-shadow: 0 12px 28px rgb(44 62 78 / 9%); }
    .bbi-single-redesign .products-section .bfl-feature-card:hover .bfl-feature-card__media .bfl-feature-card__image { transform: translateY(-3px) scale(1.035); }
    .bbi-single-redesign .products-section .bfl-feature-card__footer .bfl-feature-card__add:hover { background: #285b83; box-shadow: 0 5px 12px rgb(26 71 117 / 15%); }
    .bbi-single-redesign .products-section .bfl-feature-card__details:hover .bfl-feature-card__arrow { transform: translate(2px, -2px); }
}
@media (min-width: 1200px) {
    .bbi-single-redesign .products-section .product-grid.four .bfl-feature-card { padding: 22px 18px; }
    .bbi-single-redesign .products-section .product-grid.four .bfl-feature-card__photo { height: 185px; }
    .bbi-single-redesign .products-section .product-grid.four .bfl-feature-card > .bfl-feature-card__title { font-size: 16px; }
    .bbi-single-redesign .products-section .product-grid.four .bfl-feature-card > .bfl-feature-card__slogan { font-size: 15px; }
}
@media (max-width: 1020px) {
    .bbi-single-redesign .products-section { padding: 30px 22px 24px; }
    .bbi-single-redesign .products-section .product-grid { column-gap: 18px; }
    .bbi-single-redesign .products-section .bfl-feature-card { padding: 22px 20px; }
    .bbi-single-redesign .products-section .bfl-feature-card__photo { height: 190px; }
}
@media (max-width: 767px) {
    .bbi-single-redesign .products-section { padding: 28px 14px 18px; border-radius: 17px; }
    .bbi-single-redesign .products-section > h2 { margin-bottom: 26px; font-size: 23px; }
    .bbi-single-redesign .products-section .bfl-feature-card { padding: 22px; }
    .bbi-single-redesign .products-section .bfl-feature-card__photo { height: 200px; }
    .bbi-single-redesign .products-section .bfl-feature-card__annotation { padding: 12px; }
}
@media (max-width: 380px) {
    .bbi-single-redesign .products-section { padding-left: 10px; padding-right: 10px; }
    .bbi-single-redesign .products-section .bfl-feature-card { padding: 20px 16px; }
    .bbi-single-redesign .products-section .bfl-feature-card__photo { height: 180px; }
    .bbi-single-redesign .products-section .bfl-feature-card > .bfl-feature-card__title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .bbi-single-redesign .products-section :is(.bfl-feature-card, .bfl-feature-card__image, .bfl-feature-card__arrow, .bfl-feature-card__add) { transition: none; }
    .bbi-single-redesign .products-section .bfl-feature-card:hover .bfl-feature-card__media .bfl-feature-card__image { transform: none; }
}