@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{--ink:#1a1a1a;--paper:#fff;--line:#d8d8d8;--green:#c3c3c3;--muted:#515151}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}a{color:inherit}button{cursor:pointer}header{padding:25px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.logo{text-decoration:none;font-size:27px;font-weight:800;letter-spacing:-1.5px}.logo span{color:#515151;margin-left:5px}nav{display:flex;align-items:center;gap:30px;font-size:14px}nav a{text-decoration:none}nav button{border:1px solid var(--ink);border-radius:30px;background:transparent;padding:11px 18px}nav b{background:var(--green);border-radius:50%;padding:2px 6px;margin-left:8px}.hero{padding:65px 6% 60px;display:grid;grid-template-columns:1.15fr 1fr;gap:30px;overflow:hidden}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px}h1{font-family:Manrope,sans-serif;font-size:clamp(48px,5.8vw,86px);font-weight:800;line-height:1.06;letter-spacing:-5px;margin:25px 0}h1 em{font-style:normal;color:#515151}.hero p{max-width:460px;line-height:1.7;color:var(--muted);font-size:17px}.primary{display:inline-flex;gap:35px;align-items:center;border-radius:7px;background:var(--ink);color:white;padding:17px 22px;text-decoration:none;font-size:14px;margin-top:15px}.hero-note{font-size:10px;color:var(--muted);margin-top:24px}.art{position:relative;min-height:400px;display:flex;align-items:center;justify-content:center}.orbit{position:absolute;width:370px;height:370px;background:#e6e6e6;border-radius:50%}.bar{position:absolute;width:185px;height:330px;border-radius:7px 7px 10px 10px;padding:24px 19px;box-shadow:10px 20px 30px #1a1a1a20;display:flex;flex-direction:column;justify-content:space-between;border-top:9px double #ffffff55;border-bottom:9px double #ffffff55}.bar small{font-size:8px;font-weight:bold;letter-spacing:1px}.bar strong{font-family:Manrope,sans-serif;font-size:39px;line-height:1.05;letter-spacing:-2px}.bar span{font-size:7px;letter-spacing:1px}.one{background:#c3c3c3;transform:rotate(-17deg) translate(-65px,-5px)}.two{background:#b6b6b6;transform:rotate(15deg) translate(83px,15px);color:#2a2a2a}.stamp{position:absolute;bottom:0;right:0;border-radius:50%;width:102px;height:102px;display:grid;place-content:center;background:var(--ink);color:#e5e5e5;font-size:14px;font-weight:700;transform:rotate(12deg)}.strip{background:var(--green);display:flex;justify-content:space-around;padding:19px 4%;font-size:11px;letter-spacing:1.7px;font-weight:700}.strip span:before{content:'✳';margin-right:18px}#directory{padding:65px 5%}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px}h2{font-family:Manrope,sans-serif;font-size:36px;letter-spacing:-1.5px;margin:15px 0}.section-head p{color:var(--muted);font-size:14px;line-height:1.6}.catalogue{display:grid;grid-template-columns:220px 1fr;gap:35px}aside{border-top:1px solid var(--line);padding-top:20px}label{display:block;font-size:12px;font-weight:600;margin-bottom:20px}input[type=search],select{width:100%;padding:12px 10px;border:1px solid var(--line);background:transparent;border-radius:5px;color:var(--ink);margin-top:8px;font-size:13px}input[type=checkbox]{accent-color:var(--ink)}.check{display:flex;align-items:center;gap:8px}.text-button{border:0;background:none;padding:0;color:var(--muted);font-size:12px}.aside-note{margin-top:35px;border-radius:8px;padding:20px;background:#ebebeb;font-weight:600}.aside-note p{font-size:12px;line-height:1.6;color:var(--muted);font-weight:400}.results-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;color:var(--muted);font-size:12px}.sort{display:flex;align-items:center;gap:10px;margin:0;font-weight:400}.sort select{margin:0;width:auto;padding:9px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;display:flex;flex-direction:column}.visual{height:140px;background:var(--tone);display:grid;place-items:center;position:relative;overflow:hidden}.mini-bar{width:155px;min-height:66px;padding:11px 15px;background:var(--pack);color:var(--packink,#fff);border-radius:3px;transform:rotate(-10deg);box-shadow:5px 8px 10px #0002;border-left:7px double #ffffff55;border-right:7px double #ffffff55;font-weight:800;font-size:17px;letter-spacing:-.6px}.mini-bar small{display:block;font-size:8px;letter-spacing:.5px;margin-top:5px;font-weight:500}.visual-note{position:absolute;bottom:8px;right:10px;font-size:8px;opacity:.6}.card-body{padding:18px;display:flex;flex-direction:column;flex:1}.brand-tag{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:700}.card h3{font-size:16px;margin:7px 0 15px;line-height:1.4;min-height:44px;letter-spacing:-.3px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:14px;gap:8px}.metrics strong{display:block;font-size:17px}.metrics span{font-size:9px;color:var(--muted)}.card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.detail{border:0;background:none;padding:0;font-size:12px;font-weight:600;color:var(--ink)}.compare-label{font-size:10px;margin:0;display:flex;align-items:center;gap:4px}.badge{font-size:9px;background:#ededed;border-radius:12px;padding:4px 8px;align-self:start;margin-bottom:12px}.guide{padding:60px 6%;background:#e6e6e6;display:grid;grid-template-columns:1fr 1fr;gap:70px}.guide p{font-size:14px;line-height:1.8;color:var(--muted);max-width:440px}.principles article{position:relative;border-top:1px solid #cbcbcb;padding:16px 0 10px 35px}.principles span{position:absolute;left:0;top:20px;font-size:10px;color:#515151}.principles h3{font-size:17px;margin:0}.download{display:flex;align-items:center;justify-content:space-between;padding:50px 6%}.download h2{font-size:26px}.download p{color:var(--muted);font-size:13px}footer{border-top:1px solid var(--line);padding:35px 5% 80px;display:flex;gap:20px;flex-wrap:wrap;align-items:center}footer p{font-size:11px;color:var(--muted);flex:1}footer button{background:none;border:0;font-size:11px;color:var(--ink);padding:8px}footer small{width:100%;font-size:10px;color:var(--muted)}#tray{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;border-radius:12px;padding:12px 18px;box-shadow:0 6px 30px #0003;z-index:5;display:flex;gap:20px;align-items:center;font-size:13px}#tray[hidden]{display:none}#tray button{border:0;padding:10px 15px;border-radius:6px;background:var(--green);color:var(--ink)}#tray #clear{background:transparent;color:white;padding:5px}dialog{border:1px solid var(--line);border-radius:14px;max-width:900px;width:90%;max-height:88vh;padding:35px;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#1f1f1f88}#close{position:sticky;float:right;top:0;background:white;border:1px solid var(--line);border-radius:50%;width:32px;height:32px}dialog h2{padding-right:30px}dialog p{font-size:14px;line-height:1.8}dialog .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:25px 0}.facts div{background:#e6e6e6;padding:15px;border-radius:6px}.facts strong{display:block;font-size:23px}.facts span{font-size:10px}table{border-collapse:collapse;width:100%;font-size:13px}td,th{text-align:left;border-bottom:1px solid var(--line);padding:14px;vertical-align:top}th{background:#e6e6e6}.table-wrap{overflow:auto}.subtle{color:var(--muted);font-size:12px!important}.source{word-break:break-word}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #515151;outline-offset:3px}@media(min-width:1450px){main{max-width:1500px;margin:auto}}@media(max-width:1050px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{gap:0}.bar{width:155px;height:290px}.bar strong{font-size:33px}.orbit{width:300px;height:300px}.stamp{right:-5px}h1{letter-spacing:-3px}.catalogue{gap:22px;grid-template-columns:190px 1fr}}@media(max-width:700px){header{padding:20px 5%}nav{gap:15px}nav a{display:none}.hero{grid-template-columns:1fr;padding-top:40px}.hero h1{font-size:57px}.hero p{font-size:15px}.art{min-height:330px;margin-top:20px}.bar{height:270px}.stamp{right:15px;bottom:10px}.strip{font-size:8px;letter-spacing:.4px;padding:15px 2%}.strip span:before{margin-right:5px}.section-head p{display:none}h2{font-size:29px}.catalogue{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:10px}aside label{margin-bottom:5px}aside label:first-child{grid-column:1/-1}.aside-note{display:none}.grid{gap:10px}.card-body{padding:12px}.visual{height:115px}.mini-bar{width:130px}.card h3{font-size:14px}.metrics strong{font-size:15px}.metrics span{font-size:8px}.card-bottom{align-items:start;gap:8px;flex-direction:column}.guide{grid-template-columns:1fr;gap:25px}.download{align-items:start;flex-direction:column}.results-head{gap:10px}.sort select{max-width:150px}#tray{width:94%;gap:10px;justify-content:space-between;font-size:11px}dialog{padding:22px}dialog .facts{grid-template-columns:1fr 1fr}footer p{flex-basis:100%}}

.visual{height:195px;background:#fff;padding:14px}.product-image{display:block;width:100%;height:100%;object-fit:contain}.product-photo{display:block;width:100%;max-width:470px;height:310px;object-fit:contain;margin:20px auto;background:#fff;border-radius:12px;padding:18px}.image-credit{font-size:10px;color:var(--muted);text-align:center}@media(max-width:700px){.visual{height:150px;padding:10px}.product-photo{height:240px}}
.visual{display:flex;align-items:center;justify-content:center}.product-image{width:100%;height:167px;max-width:100%;object-fit:contain}@media(max-width:700px){.product-image{height:130px}}

.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.metrics>div{min-width:0}.metrics span{white-space:nowrap}@media(max-width:700px){.metrics{gap:5px}.metrics strong{font-size:13px}.metrics span{font-size:7px}}

.metrics{gap:0}.metrics>div{padding-inline:8px}.metrics>div:first-child{padding-left:0}.metrics>div:last-child{padding-right:0}.metrics>div+div{border-left:1px solid var(--line)}@media(max-width:700px){.metrics>div{padding-inline:5px}}

.metrics>div,.metrics>div:first-child,.metrics>div:last-child{padding-inline:6px;text-align:center}.metrics strong{line-height:1.25;margin-bottom:5px}.metrics span{display:block;line-height:1.3}@media(max-width:700px){.metrics>div,.metrics>div:first-child,.metrics>div:last-child{padding-inline:3px}}

.card h3{min-height:0;margin-bottom:7px}.card .badge{margin-bottom:12px}

.card{position:relative}.card-link{position:absolute;inset:0;z-index:1;border-radius:9px}.card-link:focus-visible{outline:3px solid #515151;outline-offset:-3px}.card .compare-label{position:relative;z-index:2;cursor:pointer}.card-bottom{justify-content:flex-end}.card:has(.card-link:hover){border-color:#1f1f1f;box-shadow:0 3px 12px #1a1a1a10}

.card-type-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.card-type-row .badge{margin-bottom:0}.card-type-row .compare-label{flex-shrink:0}.card-bottom{margin-top:0}

.card .metrics{margin-bottom:0}.card-bottom{height:0;padding:0;margin:0}

.card .metrics{border-bottom:0;padding-bottom:0}.card-body{padding-bottom:12px}@media(max-width:700px){.card-body{padding-bottom:10px}}
.card .visual{padding:6px;height:195px}.card .product-image{height:183px;transform:scale(1.25)}@media(max-width:700px){.card .visual{height:150px;padding:4px}.card .product-image{height:142px;transform:scale(1.15)}}
.card .product-image[src*="-cutout.png"]{transform:none}

.card svg.product-image{display:block;width:90%;height:145px;transform:none;overflow:hidden;flex:none}.product-photo{overflow:hidden}@media(max-width:700px){.card svg.product-image{width:90%;height:115px}}

.nutrition-rows{border-top:1px solid var(--line);margin-top:0}.nutrition-row{padding:10px 0}.nutrition-row+.nutrition-row{border-top:1px solid var(--line);padding-bottom:0}.nutrition-basis{font-size:9px;font-weight:700;letter-spacing:1px;color:var(--muted);margin-bottom:8px}.card .nutrition-row .metrics{border:0;padding:0;margin:0}.card .nutrition-row .metrics strong{font-size:17px}.card .nutrition-row .metrics span{font-size:8px}@media(max-width:700px){.card .nutrition-row .metrics strong{font-size:13px}.card .nutrition-row .metrics span{font-size:7px}.nutrition-basis{font-size:8px}}

.card .nutrition-rows{border-top:0}.card .card-nutrition{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:12px;margin:0;color:var(--ink)}.card .card-nutrition th,.card .card-nutrition td{border:0;padding:9px 2px;text-align:center;white-space:nowrap}.card .card-nutrition thead th{font-size:9px;font-weight:500;color:var(--muted);padding-top:2px;padding-bottom:7px}.card .card-nutrition th:first-child{width:24%;text-align:left;padding-left:8px}.card .card-nutrition tbody th{font-size:10px;font-weight:500;color:var(--muted)}.card .card-nutrition tbody td{font-weight:600}.card .card-nutrition tbody tr:first-child{background:#eeeeee}.card .card-nutrition tbody tr:first-child th{border-radius:6px 0 0 6px}.card .card-nutrition tbody tr:first-child td:last-child{border-radius:0 6px 6px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:700px){.card .card-nutrition{font-size:10px}.card .card-nutrition thead th{font-size:8px}.card .card-nutrition tbody th{font-size:9px}.card .card-nutrition th:first-child{padding-left:5px}}

.design-option{font-size:9px;letter-spacing:.3px;color:var(--muted);margin-bottom:12px}.stacked-legend{font-size:9px;color:var(--ink);margin-bottom:10px}.stacked-legend span{color:var(--muted)}.stacked-nutrition{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.stacked-nutrition>div{text-align:center}.stacked-nutrition span{display:block;font-size:9px;color:var(--muted);margin-bottom:7px}.stacked-nutrition strong{display:block;font-size:18px;font-weight:600}.stacked-nutrition small{display:block;font-size:12px;color:var(--muted);margin-top:6px}.highlight-nutrition{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}.highlight-nutrition span{display:block;font-size:9px;color:var(--muted);margin-bottom:4px}.highlight-nutrition strong{display:block;font-size:23px;line-height:1.2}.highlight-nutrition strong small{font-size:8px;font-weight:400;color:var(--muted)}.highlight-nutrition .minor strong{font-size:14px}.highlight-nutrition>div>div{font-size:10px;color:var(--muted);margin-top:4px}.panel-nutrition{display:grid;gap:7px}.nutrition-panel{padding:10px;border-radius:7px;background:#eeeeee}.nutrition-panel+.nutrition-panel{background:#f5f5f5}.panel-title{font-size:9px;color:var(--muted);margin-bottom:8px}.panel-values{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center}.panel-values strong{display:block;font-size:15px;font-weight:600}.panel-values span{display:block;font-size:8px;color:var(--muted);margin-top:4px}@media(max-width:700px){.stacked-nutrition strong{font-size:14px}.stacked-nutrition small{font-size:10px}.panel-values strong{font-size:12px}.highlight-nutrition strong{font-size:19px}}

.highlight-variation{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}.highlight-variation .nutrient{min-width:0}.highlight-variation .nutrient-name{display:block;font-size:10px;color:var(--muted);margin-bottom:5px}.highlight-variation strong{display:block;font-size:24px;line-height:1.2;font-weight:650}.highlight-variation small{font-size:8px;font-weight:400;color:var(--muted);margin-left:4px}.highlight-variation .secondary-value{font-size:11px;color:var(--muted);margin-top:5px}.highlight-variation .minor strong{font-size:15px}.variant-1 .minor{border-top:1px solid var(--line);padding-top:10px}.variant-2{gap:8px}.variant-2 .major{padding:12px 10px;background:#eeeeee;border-radius:8px}.variant-2 .minor{padding:4px 10px}.variant-2 .major small{display:block;margin:4px 0 0}.variant-2 .secondary-value small{display:inline;margin-left:4px}.variant-3{display:block}.variant-3 .value-key,.variant-3 .nutrient{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:5px}.variant-3 .value-key{font-size:8px;color:var(--muted);text-align:right;padding-bottom:8px}.variant-3 .nutrient{padding:8px 0}.variant-3 .nutrient-name{margin:0}.variant-3 strong{text-align:right;font-size:21px}.variant-3 .secondary-value{text-align:right;font-size:13px;margin:0}.variant-3 .minor{border-top:1px solid #e8e8e8}.variant-3 .minor strong{font-size:13px}.variant-3 .minor .secondary-value{font-size:11px}.variant-4{gap:14px 10px}.variant-4 .major strong{font-size:32px;letter-spacing:-1px}.variant-4 .major strong small{display:block;letter-spacing:0;margin:3px 0 0}.variant-4 .major .secondary-value{font-size:10px}.variant-4 .minor{background:#f2f2f2;border-radius:6px;padding:9px}.variant-4 .minor strong{font-size:14px}@media(max-width:700px){.highlight-variation{gap:10px 6px}.highlight-variation strong{font-size:20px}.highlight-variation small{font-size:7px}.variant-4 .major strong{font-size:27px}.variant-2 .major{padding:9px 6px}.variant-3 strong{font-size:18px}.variant-3 .secondary-value{font-size:11px}}

.soft-variation{gap:8px}.soft-variation .major{padding:12px 10px;border-radius:8px;background:#eeeeee}.soft-variation .major strong small{display:block;margin:4px 0 0}.soft-variation .secondary-value{margin-top:8px}.soft-variation .secondary-value small{display:inline;margin-left:4px}.soft-variation .minor{padding:7px 10px}.soft-variation .minor .secondary-value{margin-top:4px}.soft-2{background:linear-gradient(to bottom,#eeeeee 0,#eeeeee 65%,transparent 65%);border-radius:10px;column-gap:0;row-gap:12px}.soft-2 .major{background:transparent;border-radius:0;padding:14px 12px}.soft-2 .major:nth-child(2){border-left:1px solid #dadada}.soft-2 .minor{padding:7px 12px}.soft-3 .major{background:#fff;border:1px solid #dddddd;border-radius:10px}.soft-3 .major .nutrient-name{color:#515151}.soft-3 .major .secondary-value{border-top:1px solid #e6e6e6;padding-top:7px}.soft-4 .major{background:#e7e7e7;padding:14px 10px}.soft-4 .major:nth-child(2){background:#ebebeb}.soft-4 .major strong{font-size:28px}.soft-4 .minor{background:#f5f5f5;border-radius:8px;padding:10px}.soft-4 .minor .nutrient-name{font-size:9px}@media(max-width:700px){.soft-variation .major{padding:10px 7px}.soft-variation .minor{padding:6px}.soft-4 .major strong{font-size:23px}.soft-variation .secondary-value{font-size:10px}}

.tone-variation .major{background:#e7e7e7;padding:14px 10px;border-radius:9px}.tone-variation .major:nth-child(2){background:#ebebeb}.tone-variation .major strong{font-size:28px}.tone-variation .minor{background:#f5f5f5;border-radius:8px;padding:10px}.tone-variation .minor .nutrient-name{font-size:9px}.tone-2{gap:7px}.tone-2 .major{padding:10px}.tone-2 .major strong{font-size:24px}.tone-2 .major strong small{display:inline;margin-left:5px}.tone-2 .secondary-value{margin-top:6px;font-size:10px}.tone-2 .minor{background:transparent;padding:7px 10px}.tone-3{gap:0;border-radius:10px;overflow:hidden;background:#f5f5f5}.tone-3 .major{border-radius:0;padding:15px 12px}.tone-3 .minor{border-radius:0;background:transparent;padding:12px}.tone-3 .major strong{font-size:30px}.tone-4{gap:10px}.tone-4 .major{position:relative;padding:12px;background:linear-gradient(to bottom,#e7e7e7 0%,#e7e7e7 64%,#f4f4f4 64%,#f4f4f4 100%);border:1px solid #e0e0e0;border-radius:12px}.tone-4 .major:nth-child(2){background:linear-gradient(to bottom,#ebebeb 0%,#ebebeb 64%,#faf6ee 64%,#faf6ee 100%);border-color:#e3e3e3}.tone-4 .major strong{font-size:30px}.tone-4 .major strong small{display:inline;font-size:8px;margin-left:5px}.tone-4 .major .secondary-value{padding-top:10px;margin-top:9px}.tone-4 .minor{background:transparent;border-bottom:1px solid var(--line);border-radius:0;padding:4px 8px 9px}@media(max-width:700px){.tone-variation .major{padding:10px 7px}.tone-variation .major strong{font-size:23px}.tone-2 .major strong{font-size:20px}.tone-variation .minor{padding:8px 6px}.tone-4 .major strong small,.tone-2 .major strong small{font-size:7px;margin-left:3px}}

.tone-1 .major strong{font-size:24px}@media(max-width:700px){.tone-1 .major strong{font-size:20px}}

.separation-1 .major .secondary-value{background:#ffffff99;border-radius:5px;padding:6px 5px;margin-top:10px;font-size:11px}.separation-2 .major{padding:12px 10px 0;overflow:hidden}.separation-2 .major .secondary-value{background:#ffffff80;margin:10px -10px 0;padding:7px 10px;border-top:1px solid #ffffffa0;font-size:11px}.separation-3 .major .secondary-value{border-top:1px solid #cdcdcd;padding-top:7px;margin-top:10px;font-size:11px}.separation-3 .major:nth-child(2) .secondary-value{border-color:#d3d3d3}.separation-4 .major .secondary-value{display:inline-block;background:#ffffffa6;border:1px solid #ffffffb0;border-radius:20px;padding:5px 7px;margin-top:10px;font-size:10px}.separation-1 .minor .secondary-value,.separation-2 .minor .secondary-value,.separation-3 .minor .secondary-value,.separation-4 .minor .secondary-value{border-top:1px solid #e2e2e2;padding-top:5px;margin-top:6px}@media(max-width:700px){.separation-2 .major .secondary-value{margin-left:-7px;margin-right:-7px;padding-inline:7px}.separation-4 .major .secondary-value{padding:4px;font-size:9px}}

.separation-2 .minor{padding:12px 10px 0;overflow:hidden;border-radius:9px;background:#f5f5f5}.separation-2 .minor .nutrient-name{font-size:10px;margin-bottom:5px}.separation-2 .minor strong{font-size:24px;line-height:1.2}.separation-2 .minor .secondary-value{background:#ffffff80;margin:10px -10px 0;padding:7px 10px;border-top:1px solid #ffffffa0;font-size:11px}@media(max-width:700px){.separation-2 .minor{padding:10px 7px 0}.separation-2 .minor strong{font-size:20px}.separation-2 .minor .secondary-value{margin-left:-7px;margin-right:-7px;padding-inline:7px}}

.separation-2 .minor{width:88%;justify-self:center;padding-top:9px}.separation-2 .minor strong{font-size:17px}.separation-2 .minor .nutrient-name{font-size:9px;margin-bottom:4px}.separation-2 .minor .secondary-value{font-size:10px;margin-top:7px;padding-top:5px;padding-bottom:5px}@media(max-width:700px){.separation-2 .minor strong{font-size:15px}.separation-2 .minor{width:90%}}

.separation-2 .minor{width:100%;justify-self:stretch;padding-top:6px}.separation-2 .minor .nutrient-name{margin-bottom:2px}.separation-2 .minor .secondary-value{margin-top:4px;padding-top:4px;padding-bottom:4px}@media(max-width:700px){.separation-2 .minor{width:100%;padding-top:6px}}

.separation-2 .major,.separation-2 .minor{height:78px;display:flex;flex-direction:column;padding-top:3px}.separation-2 .major .nutrient-name{margin-bottom:0}.separation-2 .major .secondary-value,.separation-2 .minor .secondary-value{margin-top:auto;padding-top:4px;padding-bottom:4px;flex-shrink:0}.separation-2 .minor{padding-top:3px}.separation-2 .minor .nutrient-name{margin-bottom:2px}@media(max-width:700px){.separation-2 .major,.separation-2 .minor{height:73px;padding-top:3px}}

/* Keep nutrition footers flush with their panels at every viewport width. */
.separation-2 .major,.separation-2 .minor{padding-left:0;padding-right:0;min-width:0;box-sizing:border-box}.separation-2 .nutrient-name,.separation-2 strong{padding-left:10px;padding-right:10px}.separation-2 .major .secondary-value,.separation-2 .minor .secondary-value{margin-left:0;margin-right:0;width:100%;box-sizing:border-box;padding-left:10px;padding-right:10px;white-space:nowrap}.separation-2 .secondary-value small{white-space:nowrap}@media(max-width:700px){.separation-2 .major,.separation-2 .minor{padding-left:0;padding-right:0}.separation-2 .nutrient-name,.separation-2 strong{padding-left:7px;padding-right:7px}.separation-2 .major .secondary-value,.separation-2 .minor .secondary-value{margin-left:0;margin-right:0;padding-left:7px;padding-right:7px}}

.grid{align-items:start}.card .card-body{flex:0 0 auto;padding-bottom:8px}.card .nutrition-rows{margin-bottom:0}@media(max-width:700px){.card .card-body{padding-bottom:8px}}

.separation-2 .nutrient-name,.separation-2 strong,.separation-2 .secondary-value{text-align:center}

.single-row-panels{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.single-row-panels .major,.single-row-panels .minor{height:82px}.single-row-panels .nutrient-name,.single-row-panels strong{padding-left:2px;padding-right:2px}.single-row-panels .major .secondary-value,.single-row-panels .minor .secondary-value{padding-left:2px;padding-right:2px;font-size:10px}.single-row-panels .secondary-value small{display:block;margin-left:0;font-size:7px}.single-row-panels .nutrient-name{font-size:9px}.single-row-panels .major strong{font-size:22px}@media(max-width:700px){.single-row-panels{gap:4px}.single-row-panels .major strong{font-size:18px}.single-row-panels .minor strong{font-size:15px}.single-row-panels .nutrient-name{font-size:8px}.single-row-panels .major,.single-row-panels .minor{height:78px}}

.single-row-panels .major,.single-row-panels .minor{height:auto}.single-row-panels .major .secondary-value,.single-row-panels .minor .secondary-value{margin-top:4px}.single-row-panels .minor{justify-content:space-between}@media(max-width:700px){.single-row-panels .major,.single-row-panels .minor{height:auto}}

dialog{overscroll-behavior:contain}body:has(dialog[open]){overflow:hidden}dialog .floating-product h1{font-size:32px!important;letter-spacing:-1px!important;margin:8px 0 16px}dialog .floating-product .product-photo{height:210px;margin:12px auto}dialog .floating-product table{width:100%}dialog::backdrop{background:#1f1f1f66;backdrop-filter:blur(3px)}@media(max-width:700px){dialog .floating-product h1{font-size:26px!important}dialog .floating-product .product-photo{height:160px}}

.ingredients-section{margin:24px 0}.ingredients-section h2{font-size:20px;letter-spacing:-.3px;margin-bottom:8px}.ingredients-section p{overflow-wrap:anywhere}

.single-row-panels .nutrient:nth-child(3){background:#e7e7e7}

.fat-colour-option-1 .single-row-panels .nutrient:nth-child(3){background:#e7e7e7}.fat-colour-option-2 .single-row-panels .nutrient:nth-child(3){background:#e9e9e9}.fat-colour-option-3 .single-row-panels .nutrient:nth-child(3){background:#e5e5e5}.fat-colour-option-4 .single-row-panels .nutrient:nth-child(3){background:#e7e7e7}

.single-row-panels .major:first-child{background:#ebebeb}.single-row-panels .major:nth-child(2){background:#e7e7e7}

.redesigned-product h2{font-size:18px;margin:0 0 10px;letter-spacing:-.3px}.redesigned-product .product-heading h1{margin:7px 0 12px}.product-weight{font-size:11px;color:var(--muted);margin-left:10px}.redesigned-product .product-hero-image{background:white;border-radius:12px;padding:12px}.redesigned-product .product-photo{max-width:100%;padding:12px;margin:0 auto;height:180px}.redesigned-product .image-credit{margin:0;font-size:9px}.product-nutrition{margin:22px 0}.product-nutrition>p{font-size:11px;margin:0 0 12px}.redesigned-product .single-row-panels{gap:10px}.redesigned-product .single-row-panels .nutrient{height:auto;padding-top:10px}.redesigned-product .single-row-panels .secondary-value{padding-top:7px;padding-bottom:7px;margin-top:8px}.redesigned-product .single-row-panels .major strong{font-size:26px}.redesigned-product .single-row-panels .minor strong{font-size:20px}.redesigned-product .single-row-panels .nutrient-name{font-size:11px}.redesigned-product .single-row-panels .secondary-value{font-size:12px}.product-detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:start}.redesigned-product .ingredients-section{margin:0 0 24px}.redesigned-product p{font-size:12px;line-height:1.7}.product-extra{margin-top:24px}.redesigned-product td{font-size:12px;padding:9px}.product-split-hero{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:center}.product-split-hero .product-photo{height:260px}.product-split-hero .single-row-panels{grid-template-columns:repeat(2,minmax(0,1fr))}.product-compact-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px}.redesigned-product details{border-top:1px solid var(--line);padding:16px 0}.redesigned-product summary{cursor:pointer;font-size:15px;font-weight:600}.redesigned-product details>section{margin-top:15px}.redesigned-product details>section>h2{display:none}.product-soft-hero{display:grid;grid-template-columns:1fr 1fr;background:#eeeeee;border-radius:14px;padding:20px;gap:20px;align-items:center}.product-soft-hero .product-hero-image,.product-soft-hero .product-photo{background:transparent}.product-soft-section{padding:20px;background:white;border:1px solid #e3e3e3;border-radius:12px;margin-bottom:16px}.product-soft-section .ingredients-section{margin:0}.product-soft-section .product-extra{margin:0}@media(max-width:700px){.product-detail-columns,.product-split-hero{grid-template-columns:1fr;gap:18px}.product-split-hero .product-photo{height:150px}.product-split-hero .single-row-panels{grid-template-columns:repeat(4,minmax(0,1fr))}.redesigned-product .single-row-panels{gap:5px}.redesigned-product .single-row-panels .major strong{font-size:21px}.redesigned-product .single-row-panels .minor strong{font-size:17px}.redesigned-product .single-row-panels .nutrient-name{font-size:9px}.redesigned-product .single-row-panels .secondary-value{font-size:10px}.product-compact-hero,.product-soft-hero{grid-template-columns:1fr}.product-soft-hero{padding:15px}.product-compact-hero .product-photo,.product-soft-hero .product-photo{height:130px}.product-soft-section{padding:15px}}

.complete-nutrition{margin:24px 0}.complete-nutrition>p{margin:0 0 12px;font-size:11px}.complete-panel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.complete-panel{border-radius:10px;overflow:hidden;background:#f0f0f0;text-align:center;min-width:0}.complete-panel-main{padding:12px 8px}.complete-panel-main>span{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}.complete-panel-main>strong{font-size:24px;line-height:1.2;display:block}.complete-panel-footer{background:#ffffff80;border-top:1px solid #ffffffa0;padding:7px;display:flex;justify-content:center;align-items:baseline;gap:5px}.complete-panel-footer b{font-size:13px;font-weight:500}.complete-panel-footer small{font-size:9px;color:var(--muted)}.nutrient-kcal{background:#ebebeb}.nutrient-protein_g{background:#e7e7e7}.nutrient-fat_g{background:#e7e7e7}.nutrient-carbohydrates_g{background:#ebebeb}.nutrient-sugar_g{background:#e7e7e7}.nutrient-fibre_g{background:#ebebeb}.full-nutrition-2 .complete-panel-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.full-nutrition-2 .secondary-nutrient{grid-column:span 2}.full-nutrition-2 .secondary-nutrient .complete-panel-main{padding:8px}.full-nutrition-2 .secondary-nutrient strong{font-size:18px}.product-design-2 .product-split-hero{grid-template-columns:1fr}.product-design-2 .product-split-hero .product-photo{height:160px}.full-nutrition-3 .complete-panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.full-nutrition-3 .complete-panel{display:flex;align-items:stretch}.full-nutrition-3 .complete-panel-main{flex:1;text-align:left;padding:10px 14px}.full-nutrition-3 .complete-panel-footer{flex-direction:column;justify-content:center;align-items:center;min-width:35%;border-top:0;border-left:1px solid #ffffffa0;gap:3px}.full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.full-nutrition-4 .complete-panel-main{padding:8px}.full-nutrition-4 .complete-panel-main strong{font-size:20px}.full-nutrition-4 .complete-panel-footer{padding:5px}.product-design-1 .product-detail-columns,.product-design-2 .product-detail-columns{display:block}.product-design-4 .product-detail-columns{display:block}.product-design-4 .product-soft-section:empty{display:none}@media(max-width:700px){.complete-panel-grid,.full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.full-nutrition-2 .complete-panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.full-nutrition-2 .secondary-nutrient{grid-column:span 1}.full-nutrition-3 .complete-panel-grid{grid-template-columns:1fr}.complete-panel-main>strong{font-size:22px}.complete-panel-footer{flex-wrap:wrap;gap:3px}.complete-panel-footer b{font-size:12px}}

/* Distinct comparison layouts: grid, horizontal rows, and a compact strip. */
.full-nutrition-3 .complete-panel-grid{display:flex;flex-direction:column;gap:7px}.full-nutrition-3 .complete-panel{display:grid;grid-template-columns:1fr 150px;border-radius:8px}.full-nutrition-3 .complete-panel-main{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;text-align:left}.full-nutrition-3 .complete-panel-main>span{margin:0;font-size:13px}.full-nutrition-3 .complete-panel-main>strong{font-size:23px}.full-nutrition-3 .complete-panel-footer{min-width:0;display:flex;flex-direction:row;gap:6px;padding:10px;border-left:1px solid #ffffffa0}.full-nutrition-3 .complete-panel-footer b{font-size:16px}.full-nutrition-4 .complete-panel-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.full-nutrition-4 .complete-panel{border-radius:8px}.full-nutrition-4 .complete-panel-main{padding:13px 3px}.full-nutrition-4 .complete-panel-main>span{font-size:10px;margin-bottom:9px}.full-nutrition-4 .complete-panel-main>strong{font-size:21px}.full-nutrition-4 .complete-panel-footer{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px}.full-nutrition-4 .complete-panel-footer b{font-size:12px}.full-nutrition-4 .complete-panel-footer small{font-size:8px}@media(max-width:700px){.full-nutrition-3 .complete-panel{grid-template-columns:1fr 105px}.full-nutrition-3 .complete-panel-main{padding:9px 10px}.full-nutrition-3 .complete-panel-main>strong{font-size:20px}.full-nutrition-3 .complete-panel-footer{flex-direction:column;gap:2px}.full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.strip-variation-2 .complete-panel-grid{gap:0;border-radius:12px;overflow:hidden}.strip-variation-2 .complete-panel{border-radius:0}.strip-variation-2 .complete-panel+.complete-panel{border-left:1px solid #ffffffa6}.strip-variation-2 .complete-panel-main{padding-top:17px;padding-bottom:17px}.strip-variation-2 .complete-panel-footer{background:#ffffff55}.strip-variation-3 .complete-panel{padding:5px}.strip-variation-3 .complete-panel-main{padding:9px 2px}.strip-variation-3 .complete-panel-footer{border-radius:6px;background:#ffffffa6;border:0;margin-top:4px;padding:7px 2px}.strip-variation-4 .complete-panel{background:transparent;border:1px solid #d9d9d9;border-top:5px solid #e7e7e7}.strip-variation-4 .nutrient-kcal{border-color:#dbdbdb}.strip-variation-4 .nutrient-protein_g{border-color:#d8d8d8}.strip-variation-4 .nutrient-fat_g{border-color:#d7d7d7}.strip-variation-4 .nutrient-carbohydrates_g{border-color:#d9d9d9}.strip-variation-4 .nutrient-sugar_g{border-color:#d9d9d9}.strip-variation-4 .nutrient-fibre_g{border-color:#dfdfdf}.strip-variation-4 .complete-panel-footer{background:#f0f0f0;border-top:1px solid #e1e1e1}.strip-variation-4 .complete-panel-main{padding-top:9px;padding-bottom:13px}@media(max-width:700px){.strip-variation-2 .complete-panel-grid{gap:1px}.strip-variation-2 .complete-panel{border-left:0}}

.strip-variation-1 .complete-panel{border:1px solid #28282826}

.card .single-row-panels .major strong,.card .single-row-panels .minor strong{font-size:17px}@media(max-width:700px){.card .single-row-panels .major strong,.card .single-row-panels .minor strong{font-size:15px}}

.redesigned-product .full-nutrition-4 .complete-panel-grid{max-width:660px;margin-inline:auto;gap:5px}.redesigned-product .full-nutrition-4 .complete-panel-main{padding:7px 3px}.redesigned-product .full-nutrition-4 .complete-panel-main>span{margin-bottom:3px}.redesigned-product .full-nutrition-4 .complete-panel-footer{padding:4px 2px;gap:1px}@media(max-width:700px){.redesigned-product .full-nutrition-4 .complete-panel-grid{max-width:420px}}

.redesigned-product .full-nutrition-4 .complete-panel-grid{max-width:510px;gap:5px}.redesigned-product .full-nutrition-4 .complete-panel-main{padding:3px 2px 4px}.redesigned-product .full-nutrition-4 .complete-panel-main>span{font-size:9px;margin-bottom:2px}.redesigned-product .full-nutrition-4 .complete-panel-main>strong{font-size:17px;line-height:1.2}.redesigned-product .full-nutrition-4 .complete-panel-footer{padding:4px 2px;gap:1px}.redesigned-product .full-nutrition-4 .complete-panel-footer b{font-size:10px;font-weight:400}.redesigned-product .full-nutrition-4 .complete-panel-footer small{font-size:7px}@media(max-width:700px){.redesigned-product .full-nutrition-4 .complete-panel-grid{max-width:300px}.redesigned-product .full-nutrition-4 .complete-panel-main>strong{font-size:15px}.redesigned-product .full-nutrition-4 .complete-panel-main>span{font-size:8px}}

.redesigned-product .full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(6,72px);width:max-content;max-width:100%;justify-content:center;gap:5px}.redesigned-product .full-nutrition-4 .complete-panel{width:72px}.redesigned-product .full-nutrition-4 .complete-panel-main{padding-left:2px;padding-right:2px}@media(max-width:700px){.redesigned-product .full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(3,64px);width:max-content;max-width:100%;gap:5px}.redesigned-product .full-nutrition-4 .complete-panel{width:64px}}

.redesigned-product .complete-nutrition{overflow-x:auto}.redesigned-product .full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(6,72px);max-width:none}@media(max-width:700px){.redesigned-product .full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(6,64px);max-width:none;margin-inline:0}}

.sweetener-section{margin:22px 0 26px}.sweetener-section>p.subtle{font-size:11px;margin:0 0 12px}.sweetener-panels{display:flex;gap:8px;flex-wrap:wrap}.sweetener-panel{background:#e7e7e7;border:1px solid #1a1a1a26;border-radius:9px;overflow:hidden;text-align:center;min-width:120px}.sweetener-panel>span{display:block;font-size:16px;font-weight:600;padding:9px 12px}.sweetener-panel>small{display:block;background:#ffffff80;border-top:1px solid #ffffffa0;padding:5px 10px;font-size:10px;color:var(--muted)}.redesigned-product .sweetener-note{font-size:10px;color:var(--muted);margin-top:10px}

.ingredient-groups{margin:24px 0}.ingredient-groups .sweetener-panel>span{font-size:13px;padding:8px 10px}.ingredient-groups .sweetener-section{margin:18px 0}.ingredient-groups .sweetener-panel{min-width:110px}.ingredient-groups .sweetener-panels{gap:7px}

.ingredient-groups .sweetener-section h2{margin-bottom:4px}.redesigned-product .ingredient-group-description{font-size:11px;color:var(--muted);line-height:1.5;margin:0 0 10px}

.ingredient-alternative{margin:26px 0}.ingredient-group-list{display:grid;gap:10px}.ingredient-role h3{font-size:14px;margin:0 0 4px;letter-spacing:0}.ingredient-role p{font-size:11px;color:var(--muted);margin:0 0 10px;line-height:1.5}.ingredient-chips{display:flex;gap:6px;flex-wrap:wrap}.ingredient-chips span{font-size:12px;background:#fff9;border:1px solid #1a1a1a1a;border-radius:6px;padding:6px 9px}.ingredient-style-2 .ingredient-group-list{grid-template-columns:1fr 1fr}.ingredient-style-2 .ingredient-role{padding:16px;background:#eeeeee;border:1px solid #dddddd;border-radius:12px}.ingredient-style-2 .ingredient-role:nth-child(2){background:#ebebeb}.ingredient-style-2 .ingredient-role:nth-child(3){background:#e7e7e7}.ingredient-style-2 .ingredient-role:nth-child(4){background:#ebebeb}.ingredient-style-2 .ingredient-role:last-child{grid-column:1/-1;background:#ebebeb}.ingredient-style-3 .ingredient-role{display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.ingredient-style-3 .ingredient-role p{margin-bottom:0}.ingredient-style-3 .ingredient-chips span{border-radius:20px;background:#e7e7e7}.ingredient-style-4 details.ingredient-role{padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:10px}.ingredient-style-4 .ingredient-role summary{font-size:14px}.ingredient-style-4 summary span{float:right;font-size:10px;color:var(--muted);font-weight:400}.ingredient-style-4 .ingredient-role p{margin:9px 0}.ingredient-style-4 .ingredient-chips span{background:#eeeeee}.ingredient-style-4 .ingredient-role:not([open]){background:#f0f0f0}@media(max-width:700px){.ingredient-style-2 .ingredient-group-list{grid-template-columns:1fr}.ingredient-style-3 .ingredient-role{grid-template-columns:1fr;gap:9px}}

.accordion-variation-2 details.ingredient-role{background:#eeeeee;border-color:#dddddd}.accordion-variation-2 details.ingredient-role:nth-child(2){background:#ebebeb}.accordion-variation-2 details.ingredient-role:nth-child(3){background:#e7e7e7}.accordion-variation-2 details.ingredient-role:nth-child(4){background:#ebebeb}.accordion-variation-2 details.ingredient-role:nth-child(5){background:#ebebeb}.accordion-variation-2 .ingredient-chips span{background:#ffffff99}.accordion-variation-3 .ingredient-group-list{gap:0}.accordion-variation-3 details.ingredient-role{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:15px 0}.accordion-variation-3 .ingredient-chips span{background:transparent;border:0;border-radius:0;padding:2px 0;margin-right:10px}.accordion-variation-3 .ingredient-chips span:not(:last-child):after{content:' ·';margin-left:7px;color:var(--muted)}.accordion-variation-4 details.ingredient-role{padding:0;overflow:hidden}.accordion-variation-4 .ingredient-role summary{background:#eeeeee;padding:10px 12px;font-size:13px}.accordion-variation-4 summary span{background:white;border:1px solid #dddddd;border-radius:20px;padding:2px 6px;font-size:9px}.accordion-variation-4 .ingredient-role p{padding:0 12px;margin:9px 0;font-size:10px}.accordion-variation-4 .ingredient-chips{padding:0 12px 12px;gap:5px}.accordion-variation-4 .ingredient-chips span{padding:4px 7px;font-size:11px}

.accordion-variation-4 .ingredient-role summary{display:flex;align-items:center;gap:10px;list-style:none}.accordion-variation-4 .ingredient-role summary:before{content:'▸';font-size:11px;flex-shrink:0}.accordion-variation-4 .ingredient-role[open] summary:before{content:'▾'}.accordion-variation-4 .inline-group-description{font-size:10px;font-weight:400;color:var(--muted);flex:1}.accordion-variation-4 summary span{float:none;flex-shrink:0;margin-left:auto}.accordion-variation-4 .ingredient-chips{padding-top:10px}@media(max-width:700px){.accordion-variation-4 .ingredient-role summary{flex-wrap:wrap;gap:6px}.accordion-variation-4 .inline-group-description{min-width:120px}}

.header-alternative-1 .ingredient-role:nth-child(1) summary{background:#e7e7e7}.header-alternative-1 .ingredient-role:nth-child(2) summary{background:#ebebeb}.header-alternative-1 .ingredient-role:nth-child(3) summary{background:#e7e7e7}.header-alternative-1 .ingredient-role:nth-child(4) summary{background:#ebebeb}.header-alternative-1 .ingredient-role:nth-child(5) summary{background:#e7e7e7}.header-alternative-1 .ingredient-chips span{background:#f6f6f6}.header-alternative-2 details.ingredient-role{border-radius:8px;border-color:#dfdfdf}.header-alternative-2 .ingredient-role summary{background:white;padding:13px 14px}.header-alternative-2 .ingredient-role[open] summary{border-bottom:1px solid #e7e7e7}.header-alternative-2 .ingredient-chips span{background:#eeeeee;border:0;border-radius:20px;padding:5px 9px}.header-alternative-2 .ingredient-chips{padding-top:12px;padding-bottom:14px}.header-alternative-3 .ingredient-group-list{gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}.header-alternative-3 details.ingredient-role{border:0;border-radius:0;border-bottom:1px solid #dcdcdc;background:#f5f5f5}.header-alternative-3 details.ingredient-role:last-child{border-bottom:0}.header-alternative-3 .ingredient-role summary{background:#eeeeee;padding:11px 14px}.header-alternative-3 .ingredient-chips span{background:white;border-radius:5px}.header-alternative-3 .ingredient-chips{padding-left:30px}.header-alternative-3 .ingredient-role summary:before{color:#515151}

.ingredient-style-4 .ingredient-role summary .ingredient-heading-label{display:flex;flex-direction:column;gap:3px;float:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;font-size:13px;font-weight:600;flex-shrink:0}.ingredient-style-4 .ingredient-role summary .ingredient-count{display:block;font-size:9px;font-weight:400;color:var(--muted);line-height:1.3}

.ingredient-style-4 .ingredient-role summary .ingredient-heading-label{flex:1;flex-shrink:1;min-width:0;gap:4px}.ingredient-style-4 .ingredient-role summary .inline-group-description{display:block;min-width:0;flex:none;line-height:1.4}.ingredient-style-4 .ingredient-role summary:before{align-self:flex-start;margin-top:3px}

.ingredient-style-4 .ingredient-role summary .ingredient-title-row{display:flex;align-items:baseline;gap:9px;float:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;font-size:13px;font-weight:600;flex-shrink:1}.ingredient-style-4 .ingredient-role summary .ingredient-title-row .ingredient-count{display:inline;font-size:9px;font-weight:400}

.ingredient-style-4 .ingredient-role summary .ingredient-title-row .ingredient-count{display:inline-block;border:1px solid #d6d6d6;border-radius:20px;background:#ffffffb3;padding:2px 7px;line-height:1.3}

.refined-accordion-1 details.ingredient-role{border:1px solid #dcdcdc;border-radius:10px}.refined-accordion-1 .ingredient-role summary{padding:12px 14px;background:#eeeeee}.refined-accordion-2 details.ingredient-role{border:1px solid #e1e1e1;border-left:4px solid #ababab;border-radius:8px}.refined-accordion-2 .ingredient-role summary{background:#f4f4f4;padding:11px 13px}.refined-accordion-2 details.ingredient-role:nth-child(2){border-left-color:#c4c4c4}.refined-accordion-2 details.ingredient-role:nth-child(3){border-left-color:#b9b9b9}.refined-accordion-2 details.ingredient-role:nth-child(4){border-left-color:#c2c2c2}.refined-accordion-2 details.ingredient-role:nth-child(5){border-left-color:#bcbcbc}.refined-accordion-3 details.ingredient-role{background:#eeeeee;padding:5px;border:1px solid #dcdcdc;border-radius:12px}.refined-accordion-3 .ingredient-role summary{background:white;padding:10px 12px;border-radius:8px}.refined-accordion-3 .ingredient-chips{padding-top:10px}.refined-accordion-4 .ingredient-group-list{gap:0;border:1px solid #dcdcdc;border-radius:12px;overflow:hidden}.refined-accordion-4 details.ingredient-role{border:0;border-bottom:1px solid #dcdcdc;border-radius:0}.refined-accordion-4 details.ingredient-role:last-child{border-bottom:0}.refined-accordion-4 .ingredient-role summary{background:#eeeeee;padding:12px 14px}.refined-accordion-4 details.ingredient-role[open] summary{background:#e6e6e6}.refined-accordion-4 .ingredient-chips{background:#f9f9f9;padding-top:12px;padding-bottom:12px}

.ingredient-style-4 .ingredient-role summary:has(.ingredient-expand-action):before{display:none}.ingredient-style-4 .ingredient-role summary .ingredient-expand-action{display:flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;float:none;margin:0 0 0 auto;padding:6px 9px;border:1px solid #cdcdcd;border-radius:6px;background:#fff;font-size:10px;font-weight:500;color:#1a1a1a}.ingredient-expand-action .collapse-label{display:none}.ingredient-role[open] .ingredient-expand-action .expand-label{display:none}.ingredient-role[open] .ingredient-expand-action .collapse-label{display:inline}.expand-symbol:before{content:'+';font-size:16px;font-weight:400}.ingredient-role[open] .expand-symbol:before{content:'−'}.ingredient-style-4 .ingredient-role summary:hover{filter:brightness(.98)}.ingredient-style-4 .ingredient-role summary:focus-visible{outline:2px solid #515151;outline-offset:-3px}.tap-variant-2 .ingredient-expand-action .expand-label,.tap-variant-2 .ingredient-expand-action .collapse-label{display:none!important}.ingredient-style-4.tap-variant-2 summary .ingredient-expand-action{border-radius:50%;width:30px;height:30px;padding:0;background:#e5e5e5}.tap-variant-2 .ingredient-role summary:after{content:'Tap to view ingredients';font-size:9px;color:var(--muted);flex-basis:100%;padding-top:3px}.tap-variant-2 .ingredient-role[open] summary:after{content:'Tap to close'}.tap-variant-2 .ingredient-role summary{flex-wrap:wrap}.tap-variant-3 .ingredient-role summary{flex-wrap:wrap}.ingredient-style-4.tap-variant-3 summary .ingredient-expand-action{flex-basis:100%;margin:5px 0 0;border:0;border-top:1px solid #dddddd;border-radius:0;background:transparent;justify-content:space-between;padding:8px 0 0}.ingredient-style-4.tap-variant-4 summary .ingredient-expand-action{border:0;background:transparent;padding:3px;font-size:9px}.tap-variant-4 .expand-symbol:before{content:'⌄';font-size:22px}.tap-variant-4 .ingredient-role[open] .expand-symbol:before{content:'⌃'}@media(max-width:500px){.ingredient-style-4.tap-variant-1 summary .ingredient-expand-action{font-size:9px;padding:5px}.ingredient-style-4.tap-variant-4 summary .ingredient-expand-action{flex-basis:100%;justify-content:flex-end}}

.tap-variant-2 .ingredient-role summary:after,.tap-variant-2 .ingredient-role[open] summary:after{content:none}.ingredient-style-4.tap-variant-1 summary .ingredient-expand-action{width:28px;height:28px;padding:0;border-radius:6px}.ingredient-style-4.tap-variant-3 summary .ingredient-expand-action{flex-basis:auto;width:30px;height:30px;margin:0 0 0 auto;padding:0;border:0;border-radius:7px;background:#e3e3e3;justify-content:center}.ingredient-style-4.tap-variant-4 summary .ingredient-expand-action{width:30px;height:30px;border:1px solid #d5d5d5;border-radius:50%;background:#fff;padding:0;justify-content:center;flex-basis:auto}.tap-variant-4 .expand-symbol{line-height:1}@media(max-width:500px){.ingredient-style-4.tap-variant-1 summary .ingredient-expand-action{padding:0}.ingredient-style-4.tap-variant-4 summary .ingredient-expand-action{flex-basis:auto;justify-content:center}}

.ingredient-style-4.opening-cue-1 summary .ingredient-expand-action{border:0;background:transparent;width:28px;height:28px}.opening-cue-1 .expand-symbol:before{content:'›';display:block;font-size:28px;line-height:1;transition:transform .18s}.opening-cue-1 .ingredient-role[open] .expand-symbol:before{content:'›';transform:rotate(90deg)}.ingredient-style-4.opening-cue-2 summary .ingredient-expand-action{align-self:stretch;width:34px;height:auto;min-height:36px;margin:-11px -13px -11px auto;border:0;border-left:1px solid #d7d7d7;border-radius:0;background:#e3e3e3}.opening-cue-2 .expand-symbol:before{content:'⌄';font-size:24px;line-height:1}.opening-cue-2 .ingredient-role[open] .expand-symbol:before{content:'⌃'}.ingredient-style-4.opening-cue-3 summary .ingredient-expand-action{background:transparent;border:0;width:28px;height:30px}.opening-cue-3 .expand-symbol:before{content:'⌄⌄';display:block;font-size:22px;letter-spacing:-7px;padding-right:7px;line-height:1}.opening-cue-3 .ingredient-role[open] .expand-symbol:before{content:'⌃⌃'}.opening-cue-4 .ingredient-role summary{position:relative;padding-right:38px}.ingredient-style-4.opening-cue-4 summary .ingredient-expand-action{position:absolute;right:0;bottom:0;width:28px;height:28px;border:0;border-radius:9px 0 0 0;background:#dcdcdc}.opening-cue-4 .expand-symbol:before{content:'+';font-size:21px;line-height:1}.opening-cue-4 .ingredient-role[open] .expand-symbol:before{content:'−'}

.ingredient-style-4.opening-cue-2 summary .ingredient-expand-action{flex-basis:auto;flex-shrink:0;float:none;padding:0;justify-content:center}.ingredient-style-4.edge-tab-version-2 summary .ingredient-expand-action{align-self:center;width:30px;height:34px;min-height:0;margin:0 0 0 auto;border:1px solid #cdcdcd;border-radius:8px;background:#e3e3e3}.ingredient-style-4.edge-tab-version-3 summary .ingredient-expand-action{background:#dfdfdf}.edge-tab-version-3 .ingredient-role:nth-child(2) summary .ingredient-expand-action{background:#eee2cb;border-left-color:#d0d0d0}.edge-tab-version-3 .ingredient-role:nth-child(3) summary .ingredient-expand-action{background:#e1e1e1;border-left-color:#c9c9c9}.edge-tab-version-3 .ingredient-role:nth-child(4) summary .ingredient-expand-action{background:#e6e6e6;border-left-color:#d1d1d1}.edge-tab-version-3 .ingredient-role:nth-child(5) summary .ingredient-expand-action{background:#dfdfdf;border-left-color:#c5c5c5}.ingredient-style-4.edge-tab-version-4 summary .ingredient-expand-action{width:44px;background:#d6d6d6;border-left:1px solid #c4c4c4}.edge-tab-version-4 .expand-symbol:before{content:'+';font-size:24px}.edge-tab-version-4 .ingredient-role[open] .expand-symbol:before{content:'−'}

.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-heading-label{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-title-row{flex:0 0 auto}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .inline-group-description{flex:1 1 200px;min-width:0}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-count{display:inline-block;flex:0 0 auto;border:1px solid #d6d6d6;border-radius:20px;background:#ffffffb3;padding:2px 7px;font-size:9px;line-height:1.3}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary{flex-wrap:nowrap;align-items:stretch}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-expand-action{align-self:stretch}@media(max-width:500px){.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .inline-group-description{flex-basis:100%;order:3}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-count{margin-left:auto}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-expand-action{flex-basis:auto}}

.ingredient-alternative{container-type:inline-size}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-heading-label{display:grid;grid-template-columns:145px minmax(0,1fr) auto;gap:6px 12px;align-items:center}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-title-row{white-space:nowrap}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .inline-group-description{min-width:0;order:initial}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-count{margin:0;white-space:nowrap}@container(max-width:700px){.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-heading-label{grid-template-columns:minmax(0,1fr) auto}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-title-row{grid-column:1;grid-row:1;white-space:normal}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-count{grid-column:2;grid-row:1}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .inline-group-description{grid-column:1/-1;grid-row:2}}

@container(max-width:700px){.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-count{grid-row:1 / 3;align-self:center}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .inline-group-description{grid-column:1;grid-row:2}}

.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-expand-action{width:auto;min-width:94px;display:flex;flex-direction:row;gap:8px;padding:0 10px;align-items:center;justify-content:center}.ingredient-style-4 .combined-ingredient-count{font-size:10px;font-weight:400;white-space:nowrap}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-heading-label{grid-template-columns:145px minmax(0,1fr)}@container(max-width:700px){.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-heading-label{grid-template-columns:minmax(0,1fr)}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-title-row{grid-column:1;grid-row:1}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .inline-group-description{grid-column:1;grid-row:2}}@media(max-width:500px){.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-expand-action{min-width:72px;padding-inline:7px;gap:5px}.ingredient-style-4 .combined-ingredient-count{font-size:9px}}

.redesigned-product .product-soft-hero{padding:0;gap:0;border:1px solid #d8d8d8;background:white;overflow:hidden;align-items:stretch}.redesigned-product .product-soft-hero .product-heading{padding:20px;background:#eeeeee;display:flex;flex-wrap:wrap;align-content:center;align-items:baseline;gap:0}.redesigned-product .product-soft-hero .product-heading .eyebrow,.redesigned-product .product-soft-hero .product-heading h1{flex-basis:100%}.redesigned-product .product-soft-hero .product-hero-image{border-radius:0;background:white;padding:20px;border-left:1px solid #d8d8d8;display:flex;flex-direction:column;justify-content:center}.redesigned-product .product-soft-hero .product-photo{background:white}.redesigned-product .product-soft-hero .image-credit{background:white}@media(max-width:700px){.redesigned-product .product-soft-hero{padding:0}.redesigned-product .product-soft-hero .product-heading{padding:15px}.redesigned-product .product-soft-hero .product-hero-image{border-left:0;border-top:1px solid #d8d8d8;padding:15px}}

.nutrient-saturated_fat_g{background:#e6e6e6}.nutrient-salt_g{background:#e8e8e8}.redesigned-product .full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(8,72px)}@media(max-width:700px){.redesigned-product .full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(8,64px)}}

.complete-panel-main>strong{overflow-wrap:anywhere}.redesigned-product .full-nutrition-4 .complete-panel-main>strong{font-size:17px}.complete-panel-main>strong:has(+*){min-width:0}

.card .single-row-panels .nutrient{padding-bottom:0;display:flex;flex-direction:column}.card .single-row-panels .nutrient .secondary-value{margin-bottom:0;margin-top:auto;flex-grow:1;display:flex;flex-direction:column;justify-content:center}.card .single-row-panels .nutrient strong{margin-bottom:4px}

.redesigned-product .product-soft-hero .product-heading{background:#fff;display:block}.redesigned-product .product-heading .eyebrow{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:700}.redesigned-product .product-heading h1{font-size:16px!important;font-weight:700;line-height:1.4;letter-spacing:-.3px!important;margin:7px 0!important}.redesigned-product .product-heading .badge{display:inline-block;font-size:10px;padding:5px 8px;border-radius:20px;background:#eeeeee;font-weight:400}.redesigned-product .product-heading .product-weight{display:block;font-size:10px;color:var(--muted);margin:10px 0 0}@media(max-width:700px){.redesigned-product .product-heading h1{font-size:14px!important}}

.redesigned-product .product-soft-hero{grid-template-columns:1fr}.redesigned-product .product-soft-hero .product-hero-image{border-left:0;border-top:1px solid #d8d8d8}

.top-design-label{font-size:10px;color:var(--muted);margin-bottom:10px}.redesigned-product .top-design-1 .product-heading{padding:20px}.redesigned-product .top-design-1 .product-heading h1{font-size:24px!important}.redesigned-product .top-design-2 .product-heading{text-align:center;padding:24px 18px 16px}.redesigned-product .top-design-2 .product-heading h1{font-size:26px!important;margin:9px 0 12px!important}.redesigned-product .top-design-2 .product-hero-image{border-top:0;padding-top:0}.redesigned-product .top-design-3 .product-heading{background:#eeeeee;padding:20px}.redesigned-product .top-design-3 .product-heading h1{font-size:25px!important;margin:8px 0 12px!important}.redesigned-product .top-design-3 .product-heading .badge{background:#fff9}.redesigned-product .top-design-4{border:0;border-radius:0;background:transparent}.redesigned-product .top-design-4 .product-heading{padding:8px 0 16px;background:transparent;border-bottom:1px solid var(--line)}.redesigned-product .top-design-4 .product-heading h1{font-size:28px!important;margin:8px 0 12px!important}.redesigned-product .top-design-4 .product-hero-image{border-top:0;border-radius:10px;margin-top:14px}.redesigned-product .top-design-4 .product-heading .product-weight{display:inline-block;margin-left:10px}.redesigned-product .top-design-1 .product-heading .product-weight,.redesigned-product .top-design-3 .product-heading .product-weight{display:inline-block;margin-left:10px}@media(max-width:700px){.redesigned-product .product-soft-hero[class*="top-design-"] .product-heading h1{font-size:22px!important}}

.redesigned-product .top-design-centred-shaded .product-heading{text-align:center;background:#eeeeee;padding:24px 18px}.redesigned-product .top-design-centred-shaded .product-heading h1{font-size:26px!important;margin:9px 0 12px!important}.redesigned-product .top-design-centred-shaded .product-heading .badge{background:#ffffff99}.redesigned-product .top-design-centred-shaded .product-heading .product-weight{display:inline-block;margin:0 0 0 10px}.redesigned-product .top-design-centred-shaded .product-hero-image{background:white;border-top:1px solid #d8d8d8}@media(max-width:700px){.redesigned-product .top-design-centred-shaded .product-heading h1{font-size:22px!important}}

.redesigned-product .top-design-centred-shaded .product-heading .eyebrow{font-size:14px;letter-spacing:1.5px}@media(max-width:700px){.redesigned-product .top-design-centred-shaded .product-heading .eyebrow{font-size:13px}}

.catalogue{grid-template-columns:minmax(0,1fr);gap:22px}.catalogue>aside{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:end}.catalogue>aside>label{margin:0}.catalogue>aside>label:first-child{grid-column:span 2}.catalogue>aside .check{align-self:center}.catalogue>aside #reset{justify-self:start;align-self:center}.catalogue>aside .aside-note{display:none}@media(max-width:700px){.catalogue>aside{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.catalogue>aside>label:first-child{grid-column:1/-1}}

.compare-control-icon{display:none}.card .compare-label[class*="compare-design-"]{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:500;position:relative;min-height:30px}.compare-label[class*="compare-design-"] input{position:absolute;opacity:0;width:1px;height:1px;margin:0}.compare-label[class*="compare-design-"]:has(input:focus-visible){outline:2px solid #515151;outline-offset:3px}.compare-label[class*="compare-design-"]:has(input:checked){background:#1f1f1f;color:white;border-color:#1f1f1f}.compare-design-1{border:1px solid #d1d1d1;border-radius:20px;padding:5px 10px}.compare-design-1 .compare-control-icon{display:block}.compare-design-1 .compare-control-icon:before{content:'+';font-size:16px}.compare-design-1:has(input:checked) .compare-control-icon:before{content:'✓'}.compare-design-2{background:#eeeeee;border:1px solid transparent;border-radius:6px;padding:5px 9px}.compare-design-2 .compare-control-icon{display:block}.compare-design-2 .compare-control-icon:before{content:'⇄';font-size:16px}.compare-design-3{border-bottom:1px solid #515151;padding:4px 1px;min-height:26px!important}.compare-design-3 .compare-control-icon{display:block;width:13px;height:13px;border:1px solid #515151;border-radius:50%}.compare-design-3:has(input:checked) .compare-control-icon{background:white;box-shadow:inset 0 0 0 3px #1a1a1a}.compare-design-4{padding:5px 0 5px 2px}.compare-design-4 .compare-control-icon{display:block;position:relative;width:25px;height:14px;border-radius:12px;background:#dddddd}.compare-design-4 .compare-control-icon:before{content:'';position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:white;box-shadow:0 1px 2px #0002;transition:transform .15s}.compare-design-4:has(input:checked) .compare-control-icon{background:#1f1f1f}.compare-design-4:has(input:checked) .compare-control-icon:before{transform:translateX(11px)}.card .compare-design-4:has(input:checked){background:transparent;color:var(--ink)}

.card .compare-design-1{border:1px solid #cecece;border-radius:7px;background:#fff;padding:5px 9px}.compare-design-1 .compare-control-icon{width:14px;height:14px;border-radius:3px;background:#e6e6e6;display:grid;place-items:center}.compare-design-1 .compare-control-icon:before{content:'+';font-size:13px;line-height:1}.card .compare-design-2{background:transparent;border:0;border-radius:0;padding:4px 0}.compare-design-2 .compare-control-icon{width:25px;height:25px;display:grid;place-items:center;background:#eeeeee;border:1px solid #d7d7d7;border-radius:50%}.compare-design-2 .compare-control-icon:before{content:'+';font-size:18px;color:#1a1a1a}.compare-design-2:has(input:checked) .compare-control-icon:before{content:'✓'}.card .compare-design-3{background:#eeeeee;border:1px solid #d7d7d7;border-radius:20px;padding:5px 10px;min-height:30px!important}.compare-design-3 .compare-control-icon{border:0;border-radius:0;width:auto;height:auto;background:transparent}.compare-design-3 .compare-control-icon:before{content:'▥';font-size:15px}.compare-design-3:has(input:checked) .compare-control-icon{background:transparent;box-shadow:none}.compare-design-3:has(input:checked) .compare-control-icon:before{content:'✓'}.card .compare-design-4{border:1px solid #d7d7d7;border-radius:6px;padding:0 9px 0 0;gap:7px;overflow:hidden}.compare-design-4 .compare-control-icon{width:25px;height:29px;border-radius:0;background:#e5e5e5;display:grid;place-items:center;border-right:1px solid #d7d7d7}.compare-design-4 .compare-control-icon:before{content:'+';position:static;width:auto;height:auto;border-radius:0;background:transparent;box-shadow:none;font-size:18px;color:#1a1a1a}.compare-design-4:has(input:checked) .compare-control-icon:before{content:'✓';transform:none}.card .compare-design-4:has(input:checked){background:#1f1f1f;color:white}

.card .shortlist-preview{display:inline-flex;position:relative;align-items:center;gap:5px;font-size:10px;font-weight:500;border:1px solid #cecece;border-radius:20px;padding:5px 9px;min-height:29px;background:#fff;color:var(--ink)}.shortlist-preview input{position:absolute;opacity:0;width:1px;height:1px}.shortlist-preview:has(input:focus-visible){outline:2px solid #515151;outline-offset:3px}.card .shortlist-preview:has(input:checked){background:#e6e6e6;border-color:#ababab}.shortlist-icon{font-size:15px;line-height:1}.card .shortlist-option-2{border:0;background:#eeeeee;border-radius:7px}.card .shortlist-option-3{border-radius:6px}.card .shortlist-option-4{border:0;background:#eeeeee;border-radius:20px}@media(max-width:700px){.card .shortlist-preview{font-size:9px;padding:5px 7px}}

.card .shortlist-option-1{border:1px solid #cecece;background:#fff;border-radius:6px}.card .shortlist-option-2{border:1px solid #dcdcdc;background:#eeeeee;border-radius:6px}.card .shortlist-option-3{border:1px solid #cecece;background:#fff;border-radius:20px}.card .shortlist-option-4{border:1px solid #cecece;background:#fff;border-radius:6px;padding-left:0;gap:7px;overflow:hidden}.shortlist-option-4 .shortlist-icon{display:grid;place-items:center;align-self:stretch;min-width:24px;margin-block:-5px;background:#e6e6e6;border-right:1px solid #cecece}.shortlist-option-4:has(input:checked) .shortlist-icon{background:#d6d6d6}

.card.list-position-2 .card-type-row{flex-wrap:wrap;justify-content:flex-start}.card.list-position-2 .shortlist-preview{margin-left:auto}.card.list-position-2 .card-body{display:flex}.card.list-position-2 .card-type-row{display:contents}.card.list-position-2 .card-type-row .badge{align-self:flex-start;margin-bottom:12px}.card.list-position-2 .shortlist-preview{align-self:flex-end;order:5;margin-top:12px}.card.list-position-3 .shortlist-preview{position:absolute;top:12px;right:12px;z-index:2;margin:0;background:white}.card.list-position-3 .card-type-row{justify-content:flex-start}.card.list-position-4 .card-type-row{display:contents}.card.list-position-4 .card-type-row .badge{align-self:flex-start;margin-bottom:12px}.card.list-position-4 .shortlist-preview{order:5;align-self:stretch;justify-content:center;margin-top:12px}.card.list-position-4 .shortlist-icon{position:absolute;left:0;top:0;bottom:0;margin:0;width:30px}

.floating-list-control{margin-top:14px;display:flex;justify-content:center}.floating-list-control .shortlist-preview{display:inline-flex;position:relative;align-items:center;gap:7px;font-size:11px;font-weight:500;border:1px solid #cecece;border-radius:6px;padding:5px 10px 5px 0;min-height:30px;background:#fff;overflow:hidden;cursor:pointer}.floating-list-control .shortlist-icon{display:grid;place-items:center;align-self:stretch;min-width:25px;margin-block:-5px;background:#e6e6e6;border-right:1px solid #cecece}.floating-list-control .shortlist-preview:has(input:checked){background:#e6e6e6}.saved-bar-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid var(--line)}.saved-bar-row a{display:flex;flex-direction:column;gap:5px;text-decoration:none}.saved-bar-row b{font-size:11px;color:var(--muted)}.saved-bar-row button{background:transparent;border:1px solid var(--line);border-radius:6px;padding:6px 9px;font-size:10px}

.card .visual{height:155px;padding:5px}.card svg.product-image{height:145px}@media(max-width:700px){.card .visual{height:125px;padding:5px}.card svg.product-image{height:115px}}

.enlarged-card-header{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}.enlarged-card-image{display:flex;align-items:center;justify-content:center;height:220px;padding:7px}.redesigned-product .enlarged-card-image .product-photo{width:90%;max-width:none;height:200px;padding:0;margin:0;border-radius:0}.enlarged-card-body{padding:24px}.enlarged-card-body .brand-tag{font-size:12px;letter-spacing:2px}.redesigned-product .enlarged-card-body h1{font-size:26px!important;letter-spacing:-.5px!important;line-height:1.4;margin:9px 0 12px!important}.enlarged-card-type-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.enlarged-card-type-row .badge{font-size:13px;padding:7px 12px;margin:0}.enlarged-card-type-row .shortlist-preview{display:inline-flex;align-items:center;position:relative;gap:8px;font-size:12px;font-weight:500;border:1px solid #cecece;border-radius:6px;padding:7px 12px 7px 0;min-height:35px;background:white;overflow:hidden;cursor:pointer}.enlarged-card-type-row .shortlist-icon{display:grid;place-items:center;align-self:stretch;min-width:30px;margin-block:-7px;background:#e6e6e6;border-right:1px solid #cecece}.enlarged-card-type-row .shortlist-preview:has(input:checked){background:#e6e6e6}@media(max-width:700px){.enlarged-card-image{height:165px}.redesigned-product .enlarged-card-image .product-photo{height:150px}.enlarged-card-body{padding:18px}.redesigned-product .enlarged-card-body h1{font-size:22px!important}.enlarged-card-type-row .badge{font-size:11px}.enlarged-card-type-row .shortlist-preview{font-size:10px}}

.matched-actions-preview .enlarged-card-type-row .badge,.matched-actions-preview .enlarged-card-type-row .shortlist-preview{height:34px;min-height:34px;box-sizing:border-box;border:1px solid #d6d6d6;border-radius:8px;font-size:12px;font-weight:500;line-height:1.2}.matched-actions-preview .enlarged-card-type-row .badge{display:inline-flex;align-items:center;padding:0 12px;background:#eeeeee}.matched-actions-preview .enlarged-card-type-row .shortlist-preview{padding:0 12px 0 0;gap:9px;background:#fff}.matched-actions-preview .enlarged-card-type-row .shortlist-icon{margin:0;min-width:33px;height:100%;font-size:17px;background:#eeeeee;border-color:#d6d6d6}.matched-actions-preview .enlarged-card-type-row .shortlist-preview:hover{border-color:#1f1f1f;background:#f5f5f5}.matched-actions-preview .enlarged-card-type-row .shortlist-preview:has(input:checked){background:#e7e7e7}@media(max-width:700px){.matched-actions-preview .enlarged-card-type-row .badge,.matched-actions-preview .enlarged-card-type-row .shortlist-preview{font-size:11px;height:32px;min-height:32px}}

.card.matched-small-actions .card-type-row .badge,.card.matched-small-actions .card-type-row .shortlist-preview{height:30px;min-height:30px;box-sizing:border-box;border:1px solid #d6d6d6;border-radius:7px;font-size:10px;font-weight:500;line-height:1.2}.card.matched-small-actions .card-type-row .badge{display:inline-flex;align-items:center;padding:0 9px;background:#eeeeee}.card.matched-small-actions .card-type-row .shortlist-preview{padding:0 9px 0 0;gap:7px;background:#fff}.card.matched-small-actions .card-type-row .shortlist-icon{margin:0;min-width:27px;height:100%;font-size:15px;background:#eeeeee;border-color:#d6d6d6}.card.matched-small-actions .shortlist-preview:has(input:checked){background:#e7e7e7}@media(max-width:700px){.card.matched-small-actions .card-type-row .badge,.card.matched-small-actions .card-type-row .shortlist-preview{font-size:9px}}

.card.matched-small-actions .card-type-row .badge,.card.matched-small-actions .card-type-row .shortlist-preview{height:24px;min-height:24px;border-radius:6px}.card.matched-small-actions .card-type-row .badge{padding:0 7px}.card.matched-small-actions .card-type-row .shortlist-preview{padding:0 7px 0 0;gap:5px}.card.matched-small-actions .card-type-row .shortlist-icon{min-width:22px;font-size:14px}

.redesigned-product .complete-panel{display:flex;flex-direction:column}.redesigned-product .full-nutrition-4 .complete-panel-main>strong{white-space:nowrap;overflow-wrap:normal}.redesigned-product .full-nutrition-4 .complete-panel-footer{flex:1;justify-content:center}.redesigned-product .full-nutrition-4 .complete-panel-main{flex:none}

.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-expand-action{width:104px;min-width:104px;flex:0 0 104px;box-sizing:border-box;justify-content:space-between;padding:0 10px}.ingredient-style-4.edge-tab-version-4 .combined-ingredient-count{flex:1;text-align:center}.ingredient-style-4.edge-tab-version-4 .expand-symbol{width:16px;text-align:center;flex:none}@media(max-width:500px){.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-expand-action{width:90px;min-width:90px;flex:0 0 90px;padding-inline:7px}}

.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-heading-label{grid-template-columns:max-content minmax(0,1fr);column-gap:12px}@container(max-width:700px){.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-heading-label{grid-template-columns:minmax(0,1fr)}}

.catalogue>aside{background:#eeeeee;border:1px solid #dcdcdc;border-radius:12px;padding:18px;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 12px;align-items:end}.catalogue>aside>label{font-size:10px;font-weight:500;color:#515151;line-height:1.4}.catalogue>aside>label:first-child{grid-column:1/-1;font-size:11px;color:var(--ink)}.catalogue>aside input[type="search"],.catalogue>aside select{background:white;border:1px solid #d8d8d8;border-radius:7px;height:37px;padding:8px 10px;margin-top:6px;font-size:12px;font-weight:400;color:var(--ink);box-shadow:0 1px 2px #1a1a1a04}.catalogue>aside input[type="search"]{height:42px;padding-left:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2374856a' stroke-width='1.6'%3E%3Ccircle cx='7.5' cy='7.5' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:11px center}.catalogue>aside input[type="search"]::placeholder{font-weight:400;color:#515151}.catalogue>aside input:focus-visible,.catalogue>aside select:focus-visible{outline:2px solid #515151;outline-offset:2px}.catalogue>aside .check{grid-column:1/span 2;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink);padding-top:2px}.catalogue>aside .check input{accent-color:#515151;width:14px;height:14px;margin:0}.catalogue>aside #reset{grid-column:3/span 2;justify-self:end;font-size:10px;color:#515151;padding:4px 0;border-bottom:1px solid transparent}.catalogue>aside #reset:hover{border-bottom-color:#515151}@media(max-width:700px){.catalogue>aside{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px;gap:12px 10px}.catalogue>aside .check{grid-column:1;font-size:10px}.catalogue>aside #reset{grid-column:2}.catalogue>aside select{font-size:11px}}

dialog:has(.background-option-1){background:#ededed}.background-option-1 .complete-nutrition,.background-option-1 .ingredient-alternative{background:white;border:1px solid #dddddd;border-radius:12px;padding:18px}.background-option-1 .product-soft-section{box-shadow:0 2px 7px #1a1a1a05}dialog:has(.background-option-2){background:white}.background-option-2 .enlarged-card-header,.background-option-2 .product-soft-section{border:0;border-radius:0;background:white}.background-option-2 .enlarged-card-body{background:#eeeeee;border-radius:0 0 12px 12px}.background-option-2 .complete-nutrition,.background-option-2 .ingredient-alternative{background:#f1f1f1;border-radius:12px;padding:18px}.background-option-2 .ingredient-role summary{background:#fff}.background-option-2 .product-soft-section{border-top:1px solid var(--line);padding:20px 0}dialog:has(.background-option-3){background:#f3f3f3}.background-option-3 .enlarged-card-header,.background-option-3 .product-soft-section{background:white;box-shadow:0 3px 12px #1a1a1a08;border-color:#dedede}.background-option-3 .complete-nutrition{background:#e9e9e9;border:1px solid #dadada;border-radius:12px;padding:16px}.background-option-3 .ingredient-alternative{background:white;border:1px solid #dedede;border-radius:12px;padding:18px}.background-option-3 .ingredient-role summary{background:#f5f5f5}dialog:has(.background-option-4){background:white}.background-option-4 .enlarged-card-header{border:0;border-radius:0}.background-option-4 .enlarged-card-body{padding-inline:0}.background-option-4 .ingredient-alternative{border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;padding:22px 0}.background-option-4 .product-soft-section{border:0;border-radius:0;background:transparent;padding:20px 0;border-bottom:1px solid #dcdcdc}.background-option-4 .ingredient-role summary{background:#f4f4f4}.background-option-4 .ingredient-role{border-color:#e5e5e5}@media(max-width:700px){.background-option-1 .complete-nutrition,.background-option-1 .ingredient-alternative,.background-option-2 .complete-nutrition,.background-option-2 .ingredient-alternative,.background-option-3 .ingredient-alternative{padding:12px}}

.background-option-4 .enlarged-card-header{border:1px solid #dcdcdc;border-radius:12px}.background-option-4 .enlarged-card-body{padding-inline:24px}@media(max-width:700px){.background-option-4 .enlarged-card-body{padding-inline:18px}}

[hidden]{display:none!important}.browse-switch{display:inline-flex;gap:3px;background:#e8e8e8;border:1px solid #dcdcdc;border-radius:9px;padding:4px;margin-bottom:20px}.browse-switch button{border:0;background:transparent;padding:8px 18px;border-radius:6px;font-size:12px;color:#515151;cursor:pointer}.browse-switch button.active{background:white;color:var(--ink);box-shadow:0 1px 4px #1a1a1a10}.brand-intro{font-size:13px;color:var(--muted);margin:0 0 18px}.brand-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.brand-tile{padding:0;text-align:left;background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden;color:var(--ink);cursor:pointer}.brand-tile:hover{border-color:#1f1f1f;box-shadow:0 3px 12px #1a1a1a0c}.brand-tile-art{height:125px;display:flex;align-items:center;justify-content:center;padding:15px}.brand-tile-art svg{width:90%;height:90px}.brand-tile-copy{padding:15px;border-top:1px solid #ececec;background:#f7f7f7}.brand-tile-copy strong{display:block;font-size:18px}.brand-tile-copy>span{display:block;font-size:11px;color:var(--muted);margin-top:6px}.brand-tile-copy b{float:right;font-size:16px;font-weight:400}#brandSelection{display:flex;align-items:center;gap:16px;margin-bottom:18px}#backToBrands{background:transparent;border:1px solid var(--line);border-radius:6px;padding:7px 10px;font-size:11px;color:var(--muted);cursor:pointer}#selectedBrandName{font-size:22px;font-weight:650}@media(max-width:900px){.brand-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.brand-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.brand-tile-art{height:100px;padding:10px}.brand-tile-art svg{height:75px}.brand-tile-copy strong{font-size:16px}}

.browse-switch{flex-wrap:wrap}.brand-tile-copy strong{font-size:16px}.browse-switch button{white-space:nowrap}@media(max-width:500px){.browse-switch{display:flex}.browse-switch button{flex:1;padding-inline:9px;font-size:11px}}

.browse-switch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;padding:6px;gap:6px;background:#e6e6e6;border:1px solid #cecece;border-radius:13px;margin:0 0 26px}.browse-switch button{min-height:58px;padding:14px 18px;font-size:18px;font-weight:600;border-radius:9px;color:#515151;transition:background .15s,color .15s}.browse-switch button:hover{background:#f4f4f4}.browse-switch button.active{background:#1f1f1f;color:white;box-shadow:0 3px 8px #1a1a1a20}.browse-switch button:focus-visible{outline:2px solid #515151;outline-offset:2px}@media(max-width:700px){.browse-switch{display:grid;gap:4px;padding:5px;margin-bottom:22px}.browse-switch button{font-size:14px;min-height:49px;padding:11px 5px}}@media(max-width:400px){.browse-switch button{font-size:12px}}

.browse-switch{gap:10px;padding:8px}.browse-switch button{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid #c7c7c7;box-shadow:0 2px 0 #cdcdcd;cursor:pointer}.browse-switch button:before{content:'';width:13px;height:13px;border:1.5px solid #515151;border-radius:50%;background:#f7f7f7;box-sizing:border-box;flex-shrink:0}.browse-switch button.active{border-color:#1f1f1f;box-shadow:0 2px 0 #1a1a1a}.browse-switch button.active:before{border-color:#fff;background:#fff;box-shadow:inset 0 0 0 3px #1a1a1a}.browse-switch button:hover:not(.active){background:#f4f4f4;border-color:#1f1f1f;transform:translateY(-1px)}.browse-switch button:active{transform:translateY(1px);box-shadow:none}@media(max-width:700px){.browse-switch{gap:5px;padding:6px}.browse-switch button{gap:5px}.browse-switch button:before{width:10px;height:10px}}

.browse-switch{background:transparent;border:0;border-radius:0;padding:0;gap:12px}.browse-switch button{position:relative;background:#fff;border:1px solid #cdcdcd;border-radius:9px;box-shadow:none;color:#515151;min-height:58px;padding-bottom:17px}.browse-switch button:before{display:none}.browse-switch button:after{content:'';position:absolute;left:20%;right:20%;bottom:7px;height:3px;border-radius:3px;background:transparent}.browse-switch button.active{background:#ededed;border-color:#1f1f1f;color:#1a1a1a;box-shadow:inset 0 0 0 1px #515151}.browse-switch button.active:after{background:#1f1f1f}.browse-switch button:hover:not(.active){background:#f4f4f4;transform:none;border-color:#1f1f1f}.browse-switch button:active{transform:none}@media(max-width:700px){.browse-switch{gap:7px;padding:0}.browse-switch button{min-height:52px;padding-bottom:15px}}

/* Four selector style previews. */
.browse-switch #browseAll{border-radius:9px;background:#fff;border:1px solid #ababab;box-shadow:0 3px 0 #d1d1d1;color:#1a1a1a}.browse-switch #browseAll:after{display:none}.browse-switch #browseAll.active{background:#e9e9e9;box-shadow:0 3px 0 #aaaaaa}.browse-switch #browseBrands{border-radius:30px;background:#ececec;border:1px solid #bababa;box-shadow:none}.browse-switch #browseBrands:after{display:none}.browse-switch #browseBrands.active{background:#1f1f1f;color:#fff;border-color:#1f1f1f}.browse-switch #browseTypes{border-radius:8px;background:#fff;border:1px solid #cdcdcd;box-shadow:none}.browse-switch #browseTypes:after{display:block;left:15%;right:15%;height:4px;bottom:6px;background:#dadada}.browse-switch #browseTypes.active{border-color:#1f1f1f;background:#f3f3f3}.browse-switch #browseTypes.active:after{background:#1f1f1f}.browse-switch #browseFlavours{border-radius:8px;background:#e7e7e7;border:1px solid #c8c8c8;box-shadow:none;padding-right:30px}.browse-switch #browseFlavours:after{content:'›';display:block;left:auto;right:13px;bottom:auto;top:50%;height:auto;transform:translateY(-50%);font-size:25px;background:transparent;color:#515151}.browse-switch #browseFlavours.active{background:#d7d7d7;border-color:#1f1f1f;box-shadow:inset 0 0 0 1px #515151}@media(max-width:700px){.browse-switch #browseFlavours{padding-right:19px}.browse-switch #browseFlavours:after{right:7px;font-size:20px}}

.browse-switch #browseAll,.browse-switch #browseBrands,.browse-switch #browseTypes,.browse-switch #browseFlavours{border-radius:9px;background:#fff;border:1px solid #ababab;box-shadow:0 3px 0 #d1d1d1;color:#1a1a1a;padding:14px 18px}.browse-switch button[id]:after{display:none!important}.browse-switch button[id].active{background:#e9e9e9;border-color:#ababab;color:#1a1a1a;box-shadow:0 3px 0 #aaaaaa}.browse-switch button[id]:hover{background:#efefef;border-color:#1f1f1f}.browse-switch button[id]:active{transform:translateY(2px);box-shadow:0 1px 0 #aaaaaa}@media(max-width:700px){.browse-switch #browseAll,.browse-switch #browseBrands,.browse-switch #browseTypes,.browse-switch #browseFlavours{padding:11px 5px}}

/* Quieter information framing; interactive controls retain their outlines. */
.card.matched-small-actions .card-type-row .badge,.matched-actions-preview .enlarged-card-type-row .badge{border-color:transparent;background:#eeeeee}.strip-variation-1 .complete-panel{border-color:transparent}.background-option-4 .enlarged-card-header{border-color:transparent}.background-option-4 .product-soft-section{border-bottom:0}.background-option-4 .ingredient-alternative{border-top:0;border-bottom:0;padding-top:12px;padding-bottom:12px}.card .single-row-panels .nutrient{border:0}.catalogue>aside{border-color:transparent}.brand-tile-copy{border-top:0}.ingredient-style-4.edge-tab-version-4 details.ingredient-role{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent}.ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-expand-action{border-left-color:#cacaca}

.browse-switch button[id].active,.browse-switch button[id].active:hover{background:#1f1f1f;color:#fff;border-color:#1f1f1f;box-shadow:0 3px 0 #1a1a1a}.browse-switch button[id].active:active{box-shadow:0 1px 0 #1a1a1a}

@media(max-width:700px){.redesigned-product .complete-nutrition{overflow-x:visible}.redesigned-product .full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:340px;margin-inline:auto;gap:7px}.redesigned-product .full-nutrition-4 .complete-panel{width:auto;min-width:0}}

.enlarged-card-image{height:165px;padding:6px}.redesigned-product .enlarged-card-image .product-photo{height:150px}.enlarged-card-body{padding-top:16px;padding-bottom:18px}@media(max-width:700px){.enlarged-card-image{height:125px}.redesigned-product .enlarged-card-image .product-photo{height:113px}.enlarged-card-body{padding-top:12px;padding-bottom:14px}}

.background-option-4 .enlarged-card-header{border:1px solid #d8d8d8;border-radius:12px}


.ingredient-style-4.edge-tab-version-4 .combined-ingredient-count{font-size:9px;font-weight:400;color:#7d7d7d}.ingredient-style-4.edge-tab-version-4 .expand-symbol:before{font-size:25px;font-weight:600;color:#282828}@media(max-width:500px){.ingredient-style-4.edge-tab-version-4 .combined-ingredient-count{font-size:8px}.ingredient-style-4.edge-tab-version-4 .expand-symbol:before{font-size:23px}}

.redesigned-product .full-nutrition-4 .complete-panel-grid{margin-left:0;margin-right:auto;justify-content:start}

.redesigned-product .ingredient-alternative{width:100%;max-width:620px;margin-left:0;margin-right:auto}

/* Shared content rail for the complete floating product panel. */
.redesigned-product.background-option-4{width:100%;max-width:680px;margin-inline:auto}.background-option-4 .enlarged-card-header{margin-bottom:22px}.background-option-4 .enlarged-card-body{padding-left:20px;padding-right:20px}.redesigned-product.background-option-4 .complete-nutrition{margin:0 20px 26px;overflow-x:auto}.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-grid{margin-left:0;margin-right:0}.redesigned-product.background-option-4 .ingredient-alternative{width:auto;max-width:none;margin:0 20px 26px;padding:0}.background-option-4 .product-detail-columns{margin-inline:20px}.background-option-4 .product-soft-section{padding:0;margin-bottom:26px}.background-option-4 .product-extra{margin-top:0}@media(max-width:700px){.background-option-4 .enlarged-card-body{padding-left:14px;padding-right:14px}.redesigned-product.background-option-4 .complete-nutrition{margin-left:14px;margin-right:14px;overflow-x:visible}.redesigned-product.background-option-4 .ingredient-alternative{margin-left:14px;margin-right:14px}.background-option-4 .product-detail-columns{margin-inline:14px}.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-grid{margin-left:0;margin-right:0}}

.browse-switch{grid-template-columns:repeat(5,minmax(0,1fr))}.browse-switch #browseSaved{border-radius:9px;background:#fff;border:1px solid #ababab;box-shadow:0 3px 0 #d1d1d1;color:#1a1a1a;padding:14px 12px}.browse-switch #browseSaved.active{background:#1f1f1f;color:white;border-color:#1f1f1f;box-shadow:0 3px 0 #1a1a1a}#savedTabCount{font-size:11px;font-weight:500;border-radius:20px;background:#e7e7e7;color:#1a1a1a;padding:2px 6px}.browse-switch #browseSaved.active #savedTabCount{background:#ffffff26;color:white}@media(max-width:700px){.browse-switch{grid-template-columns:repeat(3,minmax(0,1fr))}.browse-switch #browseSaved{padding:11px 5px}.browse-switch button{font-size:13px}}

.card.matched-small-actions .card-type-row .shortlist-preview,.matched-actions-preview .enlarged-card-type-row .shortlist-preview{display:inline-grid;grid-template-columns:22px auto;align-items:stretch;gap:0;padding:0;line-height:1;overflow:hidden}.card.matched-small-actions .card-type-row .shortlist-preview>span:last-child,.matched-actions-preview .enlarged-card-type-row .shortlist-preview>span:last-child{display:flex;align-items:center;justify-content:center;padding:0 8px;line-height:1;white-space:nowrap}.card.matched-small-actions .card-type-row .shortlist-icon,.matched-actions-preview .enlarged-card-type-row .shortlist-icon{display:flex;align-items:center;justify-content:center;min-width:0;width:100%;height:auto;margin:0;align-self:stretch;line-height:1;box-sizing:border-box;padding:0}.matched-actions-preview .enlarged-card-type-row .shortlist-preview{grid-template-columns:33px auto}.matched-actions-preview .enlarged-card-type-row .shortlist-preview>span:last-child{padding-inline:12px}

.catalogue>aside .check{grid-column:1/span 2}.catalogue>aside #reset{grid-column:3/span 2}@media(max-width:700px){.catalogue>aside .check{grid-column:1}.catalogue>aside #reset{grid-column:2}}

/* First-product preview: ingredient count and toggle before the section title. */
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{order:-1;margin:-11px 12px -11px -13px;border-left:0;border-right:1px solid #cacaca}
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-heading-label{flex:1;min-width:0}

.ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-expand-action .expand-symbol{order:1}

.ingredient-style-4.edge-tab-version-4.ingredient-controls-left .expand-symbol:before{content:'⌄';display:block;font-size:24px;line-height:1;transform:translateY(-3px)}
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role[open] .expand-symbol:before{content:'⌃';transform:translateY(3px)}

.ingredient-style-4.edge-tab-version-4.ingredient-controls-left .expand-symbol:before{content:'›';font-size:26px;transform:none;transition:transform .15s ease}
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role[open] .expand-symbol:before{content:'›';transform:rotate(90deg)}

/* Four arrow treatments on the first four directory products. */
.ingredient-controls-left.arrow-option-1 .expand-symbol:before{content:'›';font-size:26px;font-weight:600}
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left.arrow-option-2 .expand-symbol:before{content:'';width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;box-sizing:border-box;margin:auto;transform:rotate(45deg)}
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left.arrow-option-2 .ingredient-role[open] .expand-symbol:before{content:'';transform:rotate(135deg)}
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left.arrow-option-3 .expand-symbol:before{content:'▸';font-size:24px;font-weight:400}
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left.arrow-option-3 .ingredient-role[open] .expand-symbol:before{content:'▸'}
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left.arrow-option-4 .expand-symbol:before{content:'→';font-size:21px;font-weight:400}
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left.arrow-option-4 .ingredient-role[open] .expand-symbol:before{content:'→'}

@media(max-width:700px){.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-grid{margin-left:auto;margin-right:auto;justify-content:center}}

/* Flat directory selectors, matching the other outlined controls. */
.browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved),
.browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved):is(.active,:hover,:active){box-shadow:none;transform:none}

.browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved).active,
.browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved).active:is(:hover,:active){background:#1f1f1f;color:#fff;border-color:#1f1f1f;box-shadow:none}

/* Soft fill gives unselected directory buttons a clear, flat button surface. */
.browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved):not(.active){background:#e9e9e9;border-color:#b7b7b7;color:#1a1a1a}
.browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved):not(.active):hover{background:#dfdfdf;border-color:#1f1f1f}

.catalogue>aside .aside-note{display:block;grid-column:1/-1;border:0;margin:0;padding:0;font-size:11px;line-height:1.5}.catalogue>aside .aside-note>br{display:none}

.layout-preview-caption{font-size:10px!important;color:var(--muted);margin:-3px 0 12px;line-height:1.4}
@media(min-width:701px){
 .ingredient-style-4.edge-tab-version-4:is(.desktop-layout-1,.desktop-layout-2,.desktop-layout-3) .ingredient-role summary .ingredient-heading-label{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;column-gap:12px}
 .ingredient-style-4.edge-tab-version-4:is(.desktop-layout-1,.desktop-layout-2,.desktop-layout-3) .ingredient-role summary .ingredient-title-row{grid-row:1;grid-column:1;white-space:normal}
 .ingredient-style-4.edge-tab-version-4:is(.desktop-layout-1,.desktop-layout-2,.desktop-layout-3) .ingredient-role summary .inline-group-description{grid-row:1;grid-column:2;min-width:0}
 .ingredient-style-4.edge-tab-version-4.desktop-layout-2 .ingredient-role summary .ingredient-heading-label{grid-template-columns:158px minmax(0,1fr);column-gap:14px}
 .ingredient-style-4.edge-tab-version-4.desktop-layout-3 .ingredient-group-list{gap:6px}
 .ingredient-style-4.edge-tab-version-4.desktop-layout-3 .ingredient-role summary .ingredient-heading-label{column-gap:9px}
 .ingredient-style-4.edge-tab-version-4.desktop-layout-3 .ingredient-role summary .ingredient-expand-action{width:88px;min-width:88px;flex-basis:88px;padding-inline:7px}
 .ingredient-style-4.edge-tab-version-4.desktop-layout-3 .ingredient-role summary{padding-top:8px;padding-bottom:8px}
 .ingredient-style-4.edge-tab-version-4.desktop-layout-3 .ingredient-role summary .ingredient-expand-action{margin-top:-8px;margin-bottom:-8px}
 .ingredient-style-4.edge-tab-version-4.desktop-layout-4 .ingredient-group-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .ingredient-style-4.edge-tab-version-4.desktop-layout-4 .ingredient-role:last-child:nth-child(odd){grid-column:1/-1}
 .ingredient-style-4.edge-tab-version-4.desktop-layout-4 .ingredient-role summary .ingredient-heading-label{grid-template-columns:minmax(0,1fr)}
 .ingredient-style-4.edge-tab-version-4.desktop-layout-4 .ingredient-role summary .ingredient-title-row{grid-row:1;grid-column:1}
 .ingredient-style-4.edge-tab-version-4.desktop-layout-4 .ingredient-role summary .inline-group-description{grid-row:2;grid-column:1}
 .ingredient-style-4.edge-tab-version-4.desktop-layout-4 .ingredient-role summary .ingredient-expand-action{width:82px;min-width:82px;flex-basis:82px;padding-inline:5px;margin-right:8px}
 .ingredient-style-4.edge-tab-version-4.desktop-layout-4 .ingredient-role summary{height:100%;min-height:66px}
}

.brand-logo-art{height:125px;padding:15px;overflow:hidden;background:#fff}.brand-tile-art .brand-logo{width:var(--logo-width);height:var(--logo-height);max-width:100%;flex:none;overflow:hidden}.brand-logo-monochrome{filter:brightness(0)}.brand-logo-fallback{font-size:24px;font-weight:750;letter-spacing:-.8px;text-align:center}.brand-tile-copy{min-height:82px}@media(max-width:700px){.brand-logo-art{height:100px;padding:10px}.brand-tile-art .brand-logo{max-width:100%;max-height:70px}}

.enlarged-card-image{height:177px;padding-top:18px}@media(max-width:700px){.enlarged-card-image{height:137px}}

.redesigned-product.background-option-4 .ingredients-card{margin:0 0 26px;border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff}.redesigned-product.background-option-4 .ingredients-card .ingredient-alternative{margin:0 0 26px;padding:0;border:0}.ingredients-card-list .ingredients-section{margin:0}.ingredients-card-list .ingredients-section>p:last-child{margin-bottom:0}@media(max-width:700px){.redesigned-product.background-option-4 .ingredients-card{padding:14px}}

.redesigned-product.background-option-4>:is(.enlarged-card-header,.ingredients-card){width:100%;max-width:none;box-sizing:border-box;margin-inline:0}

.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-grid{margin-left:auto;margin-right:auto;justify-content:center}

/* Nutrition tiles use the full content rail on every screen size. */
.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-grid{width:100%;max-width:none;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-inline:0}
.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel{width:auto;min-width:0}
.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main{padding:9px 2px}
.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main>strong{font-size:20px}
.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer{padding:6px 2px}
.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer b{font-size:12px}
@media(max-width:700px){
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main>strong{font-size:21px}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main>span{font-size:9px;min-height:24px;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer small{font-size:9px}
}
@media(min-width:361px) and (max-width:700px){.redesigned-product.background-option-4 .full-nutrition-4 .nutrient-carbohydrates_g .complete-panel-main>span{font-size:clamp(7px,1.9vw,9px);white-space:nowrap;overflow-wrap:normal}}
@media(max-width:360px){.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Regular-weight primary nutrition values. */
.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main>strong{font-weight:400}

/* Compact mobile nutrition tiles without reducing the values. */
@media(max-width:700px){
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main{padding:5px 2px}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main>span{min-height:20px;margin-bottom:1px;line-height:1.1}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer{padding:4px 2px;gap:0;flex:none}
}

/* Filters stay compact until a category is needed. */
.catalogue>aside.grouped-filters{display:flex;flex-direction:column;gap:10px;padding:20px}
.grouped-filters>label{width:100%;margin:0 0 6px}
.filter-group{border:1px solid #d6d6d6;border-radius:10px;background:#fff;overflow:hidden}
.filter-group>summary{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none;color:var(--ink)}
.filter-group>summary::-webkit-details-marker{display:none}
.filter-group>summary>span:first-child{flex:1;min-width:0}
.filter-group>summary strong{display:block;font-size:14px;font-weight:600}
.filter-group>summary small{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4}
.filter-group>summary:hover{background:#f5f5f5}
.filter-group>summary:focus-visible{outline:2px solid #7d7d7d;outline-offset:-3px}
.filter-chevron{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 3px 4px}
.filter-group[open] .filter-chevron{transform:rotate(225deg);margin-bottom:0}
.filter-group-status{font-size:10px;white-space:nowrap;background:#e9e9e9;color:#1a1a1a;padding:4px 7px;border-radius:20px}
.filter-group-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:16px;border-top:1px solid #e3e3e3}
.filter-group-fields>label{min-width:0;margin:0}
.filter-group-fields>.check{grid-column:1/-1}
.filter-group-fields .aside-note{grid-column:1/-1}
.filter-actions{display:flex;justify-content:flex-end}
@media(max-width:900px){.filter-group-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.catalogue>aside.grouped-filters{padding:14px}.filter-group>summary{padding:12px}.filter-group>summary strong{font-size:13px}.filter-group>summary small{font-size:10px}.filter-group-fields{padding:12px;gap:12px;grid-template-columns:1fr}.filter-group-status{font-size:9px}}

.catalogue>aside.grouped-filters{align-items:stretch}.grouped-filters>.filter-group{width:100%;box-sizing:border-box}

/* Match ingredient disclosures to the filter chevrons. */
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left.arrow-option-2 .expand-symbol:before{width:7px;height:7px;border:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left.arrow-option-2 .ingredient-role[open] .expand-symbol:before{transform:rotate(225deg)}

/* Match small-card nutrition typography to floating product panels. */
.card .single-row-panels .major strong,.card .single-row-panels .minor strong{font-size:20px;font-weight:400;line-height:1.2}
.card .single-row-panels .nutrient-name{font-size:9px}
.card .single-row-panels .secondary-value{font-size:12px;font-weight:400}
.card .single-row-panels .secondary-value small{font-size:7px}
@media(max-width:700px){
 .card .single-row-panels .major strong,.card .single-row-panels .minor strong{font-size:21px}
 .card .single-row-panels .secondary-value small{font-size:9px}
 .card .single-row-panels .nutrient:last-child .nutrient-name{font-size:clamp(7px,1.9vw,9px)}
}

/* Enclose expanded ingredient content within its heading section. */
.ingredient-style-4.edge-tab-version-4 details.ingredient-role[open]{border-top-color:#dddddd;border-right-color:#dddddd;border-bottom-color:#dddddd}

/* Neutral ingredient disclosure controls. */
.ingredient-style-4.edge-tab-version-4 details.ingredient-role{border-left-width:1px;border-left-color:transparent}
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{background:transparent;border-right-color:transparent}

.ingredient-style-4.edge-tab-version-4 details.ingredient-role[open]{border-left-color:#dddddd}

.filter-group-fields>[hidden]{display:none!important}

/* Deep teal selection accents. */
.browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved).active,.browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved).active:is(:hover,:active){background:#1f1f1f;border-color:#1f1f1f;color:#fff}

/* Reset stays at the top without a trailing empty action row. */
.grouped-filters>.filter-actions{margin:0;padding:0;min-height:0;line-height:1}.grouped-filters>.filter-actions #reset{margin:0;padding:0;font-size:11px}.catalogue>aside.grouped-filters{padding-bottom:14px}

/* Share the search-label row with the reset action. */
.catalogue>aside.grouped-filters{position:relative}
.grouped-filters>.filter-actions{position:absolute;top:20px;right:20px;z-index:1}
.grouped-filters>label:first-of-type{display:block}
@media(max-width:700px){.grouped-filters>.filter-actions{top:14px;right:14px}}

/* Stronger search heading. */
.grouped-filters>label:first-of-type{font-size:18px;font-weight:700;color:var(--ink)}
.grouped-filters>label:first-of-type input{font-weight:400}
.grouped-filters>.filter-actions{top:25px}
@media(max-width:700px){.grouped-filters>label:first-of-type{font-size:17px}.grouped-filters>.filter-actions{top:18px}}

.grouped-filters>.filter-bars-heading{font-size:18px;font-weight:700;line-height:1.3;margin:6px 0 0;color:var(--ink)}@media(max-width:700px){.grouped-filters>.filter-bars-heading{font-size:17px}}

/* Separate search and filter surfaces. */
.catalogue>aside.grouped-filters{background:transparent;padding:0;gap:14px}
.grouped-filters>.search-panel,.grouped-filters>.filters-panel{background:#ededed;border:1px solid #dfdfdf;border-radius:12px;padding:20px;position:relative;display:flex;flex-direction:column;gap:10px}
.search-panel>label{display:block;font-size:18px;font-weight:700;color:var(--ink);margin:0}
.search-panel>label input{font-weight:400}
.search-panel>.filter-actions{position:absolute;top:25px;right:20px;margin:0;padding:0;line-height:1}
.search-panel #reset{margin:0;padding:0;font-size:11px}
.filters-panel>.filter-group{width:100%;box-sizing:border-box}
.filters-panel>.filter-bars-heading{font-size:18px;font-weight:700;line-height:1.3;margin:0 0 2px;color:var(--ink)}
@media(max-width:700px){.grouped-filters>.search-panel,.grouped-filters>.filters-panel{padding:14px}.search-panel>label,.filters-panel>.filter-bars-heading{font-size:17px}.search-panel>.filter-actions{top:18px;right:14px}}

/* Compact search and filter panels. */
.catalogue>aside.grouped-filters{gap:10px}
.grouped-filters>.search-panel,.grouped-filters>.filters-panel{padding:14px;gap:7px}
.search-panel>.filter-actions{top:19px;right:14px}
.search-panel>label input{margin-top:5px;min-height:40px;padding-top:10px;padding-bottom:10px}
.filters-panel>.filter-bars-heading{margin-bottom:3px}
.filter-group>summary{padding:10px 12px;min-height:44px}
.filter-group-fields{padding:12px;gap:12px}
@media(min-width:701px){
 .filter-group>summary>span:first-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
 .filter-group>summary small{margin:0}
}
@media(max-width:700px){
 .grouped-filters>.search-panel,.grouped-filters>.filters-panel{padding:12px;gap:6px}
 .search-panel>.filter-actions{top:16px;right:12px}
 .filter-group>summary{padding:9px 11px;min-height:44px}
 .filter-group>summary small{margin-top:2px;line-height:1.25}
}

.grouped-filters>.search-panel{padding-top:6px}.search-panel>.filter-actions{top:11px}@media(max-width:700px){.grouped-filters>.search-panel{padding-top:5px}.search-panel>.filter-actions{top:9px}}

.grouped-filters>.filters-panel{padding-top:6px}@media(max-width:700px){.grouped-filters>.filters-panel{padding-top:5px}}

#directory{padding-top:24px}.browse-switch{margin-top:0}@media(max-width:700px){#directory{padding-top:16px}}

/* Balance space above and below small-card artwork. */
.card .card-body{padding-top:0}.card .visual{align-items:center}.card svg.product-image{align-self:center}

/* Centre floating-card artwork with equal vertical breathing room. */
.enlarged-card-image{height:186px;padding:18px 6px;display:flex;align-items:center;justify-content:center}
.redesigned-product .enlarged-card-image .product-photo{margin:0 auto;flex:none}
.enlarged-card-body{padding-top:0}
@media(max-width:700px){.enlarged-card-image{height:145px;padding:16px 6px}.enlarged-card-body{padding-top:0}}

/* Distinct disclosure area for ingredient arrows and counts. */
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{background:#e0e0e0;border-right:1px solid #cdcdcd}

.manufacturer-description{margin:0 0 26px;padding:18px 20px;border:1px solid var(--line);border-radius:12px}.manufacturer-description h2{font-size:19px;letter-spacing:-.5px;margin:0 0 8px}.manufacturer-description p{margin:0 0 8px;font-size:14px;line-height:1.65}.manufacturer-description a{font-size:11px;color:var(--muted)}@media(max-width:700px){.manufacturer-description{padding:14px}}

/* Nutrition spans the same outer rail as the product sections. */
.redesigned-product.background-option-4 .complete-nutrition{width:100%;margin-left:0;margin-right:0}.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-grid{width:100%;max-width:none}

.enlarged-card-body .product-description{margin:14px 0 0;font-size:14px;line-height:1.65;font-weight:400}

/* Balance apparent pack size across different wrapper proportions. */
.card svg.product-image{width:var(--product-art-width,90%);height:115px;max-height:calc(100% - 16px)}@media(max-width:700px){.card svg.product-image{height:95px;max-height:calc(100% - 12px)}}

/* Five key nutrition values on directory cards. */
.card .single-row-panels{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.card .single-row-panels .nutrient:nth-child(3){background:#e7e7e7}.card .single-row-panels .nutrient:nth-child(4){background:#ebebeb}.card .single-row-panels .nutrient:nth-child(5){background:#e7e7e7}@media(max-width:700px){.card .single-row-panels{gap:4px}.card .single-row-panels .major strong,.card .single-row-panels .minor strong{font-size:18px}.card .single-row-panels .secondary-value{font-size:11px}.card .single-row-panels .secondary-value small{font-size:8px}}

@media(max-width:600px){:is(#grid,.recommendation-grid).grid{grid-template-columns:minmax(0,1fr)}.card .single-row-panels .nutrient-name{font-size:9px}.card .single-row-panels .secondary-value small{white-space:nowrap}.card svg.product-image{height:105px}}

/* Slightly smaller primary values on directory cards. */
.card .single-row-panels .major strong,.card .single-row-panels .minor strong{font-size:18px}@media(max-width:700px){.card .single-row-panels .major strong,.card .single-row-panels .minor strong{font-size:17px}}

.sort-widgets{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.sort-widgets .sort{gap:7px}.sort-widgets select{min-width:140px}@media(max-width:700px){.results-head{align-items:flex-start;flex-direction:column;gap:10px}.sort-widgets{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}.sort-widgets .sort{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.sort-widgets select{width:100%;max-width:none;min-width:0}}

/* Compact directory controls with two columns of filter groups. */
.catalogue>aside.grouped-filters{gap:8px}
.grouped-filters>.search-panel,.grouped-filters>.filters-panel{padding:8px 12px;gap:6px}
.search-panel>label,.filters-panel>.filter-bars-heading{font-size:16px}
.search-panel>.filter-actions{top:12px;right:12px}
.search-panel>label input{height:36px;min-height:36px;margin-top:4px;padding-top:7px;padding-bottom:7px}
.grouped-filters>.filters-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.filters-panel>.filter-bars-heading{grid-column:1/-1;margin:0}
.filters-panel>.filter-group>summary{padding:8px 10px;min-height:38px}
.filter-group>summary strong{font-size:12px}
.filter-group>summary small{font-size:10px}
.filters-panel .filter-group-fields{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:10px}
@media(max-width:700px){
 .grouped-filters>.filters-panel{grid-template-columns:1fr}
 .filters-panel>.filter-group>summary{min-height:44px;padding:8px 10px}
 .filter-group>summary small{display:none}
 .filters-panel .filter-group-fields{grid-template-columns:1fr}
 .search-panel>.filter-actions{top:11px}
}

/* Keep compact filter groups in a vertical list. */
.grouped-filters>.filters-panel{grid-template-columns:minmax(0,1fr)}

.filters-panel>.filter-actions{position:absolute;top:12px;right:12px;margin:0;padding:0;line-height:1}.filters-panel #reset{margin:0;padding:0;font-size:11px}.filters-panel>.filter-bars-heading{padding-right:100px}

.search-panel>label input{margin-top:0}.grouped-filters>.search-panel{padding-top:8px;padding-bottom:8px}

/* Search stands alone without a padded outer frame. */
.catalogue>aside.grouped-filters>.search-panel{padding:0;background:transparent;border:0;border-radius:0;gap:0}.search-panel>label{margin:0}.search-panel>label input{margin:0}

/* Tighten the transition from browse buttons to search. */
#directory .browse-switch{margin-bottom:10px}#directory .catalogue{row-gap:18px}

/* Sorting uses the same panel treatment as filters. */
.results-head{flex-wrap:wrap;gap:12px}
.sorting-panel{width:100%;background:#ededed;border:1px solid #dfdfdf;border-radius:12px;padding:8px 12px}
.sorting-panel h3{font-size:16px;font-weight:700;line-height:1.3;margin:0 0 7px;color:var(--ink)}
.sorting-panel .sort-widgets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sorting-panel .sort{display:flex;flex-direction:column;align-items:stretch;gap:4px;font-size:12px;font-weight:600;color:var(--ink)}
.sorting-panel .sort select{width:100%;max-width:none;min-width:0;background:#fff;border:1px solid #d8d8d8;border-radius:7px;margin:0;padding:9px 10px;font-size:12px;font-weight:400}
@media(max-width:700px){.sorting-panel .sort-widgets{gap:8px}.sorting-panel{padding:8px 12px}}

/* Desktop directory sidebar. */

@media(min-width:901px){
 #directory{padding-top:22px}.catalogue{display:grid!important;grid-template-columns:260px minmax(0,1fr)!important;gap:24px!important;align-items:start}
 .catalogue>aside.grouped-filters{position:sticky;top:20px;gap:12px}
 .grouped-filters>.filters-panel{padding:16px;background:#ededed;gap:8px}
 .filters-panel>.filter-bars-heading{font-size:18px;margin-bottom:8px}
 .filters-panel>.filter-actions{top:20px;right:16px}
 .filters-panel .filter-group>summary{padding:12px 10px;min-height:48px}
 .filter-group>summary>span:first-child{display:block}.filter-group>summary strong{font-size:12px}.filter-group>summary small{display:none}
 .filters-panel .filter-group-fields{grid-template-columns:1fr}
 .catalogue>div{min-width:0}.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
 .results-head{gap:10px;margin-bottom:16px}.sorting-panel{background:transparent;border:0;padding:0}.sorting-panel .sort{font-size:11px}
 .card .card-body{padding-left:12px;padding-right:12px}.card h3{font-size:15px}.card-type-row{flex-wrap:wrap;gap:7px}.card .single-row-panels .major strong,.card .single-row-panels .minor strong{font-size:16px}
 .card .single-row-panels .secondary-value{font-size:10px}.card .single-row-panels .nutrient-name{font-size:8px}.card .visual{height:135px}
}

@media(min-width:901px){
 .catalogue>aside.grouped-filters .sorting-panel{background:#ededed;border:1px solid #dfdfdf;border-radius:12px;padding:12px}
 .catalogue>aside.grouped-filters .sort-widgets{grid-template-columns:1fr;gap:12px}
 .catalogue>aside.grouped-filters .sort{font-size:12px}
 .catalogue>div .results-head{margin:0 0 14px;min-height:24px;align-items:center}
}

/* Restore helpful filter descriptions on mobile. */
@media(max-width:700px){.filters-panel .filter-group>summary small{display:block;font-size:10px;line-height:1.3;margin-top:3px}.filters-panel .filter-group>summary>span:first-child{display:block}}

/* Shared row tracks align variable-length product titles and actions. */
:is(#grid,.recommendation-grid).grid{align-items:stretch}
:is(#grid,.recommendation-grid)>.card{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0}
:is(#grid,.recommendation-grid)>.card .card-body{display:contents}
:is(#grid,.recommendation-grid)>.card .visual{grid-row:1}
:is(#grid,.recommendation-grid)>.card .brand-tag{grid-row:2;margin:0 12px;padding-top:0;padding-bottom:8px;align-self:end}
:is(#grid,.recommendation-grid)>.card h3{grid-row:3;margin:0 12px;padding-bottom:10px;align-self:start}
:is(#grid,.recommendation-grid)>.card .card-type-row{grid-row:4;margin:0 12px;padding-bottom:10px;align-self:end}
:is(#grid,.recommendation-grid)>.card .nutrition-rows{grid-row:5;margin:0 12px 8px;align-self:end}
:is(#grid,.recommendation-grid)>.card .card-bottom{height:0;min-height:0;padding:0;margin:0}

/* Choose card columns from the space available beside the sidebar. */
.catalogue>div{container-type:inline-size;container-name:product-results}
:is(#grid,.recommendation-grid).grid{grid-template-columns:minmax(0,1fr)}
@container product-results (min-width:520px){:is(#grid,.recommendation-grid).grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container product-results (min-width:1000px){:is(#grid,.recommendation-grid).grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* One compact row of browse selectors on mobile. */
@media(max-width:700px){
 #directory .browse-switch{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;width:100%}
 #directory .browse-switch button{min-width:0;padding:10px 2px;min-height:44px;font-size:11px;line-height:1.2;white-space:nowrap;border-radius:7px}
 #directory .browse-switch #savedTabCount{font-size:9px;margin-left:2px;padding:0;background:transparent;min-width:0}
}
@media(max-width:360px){#directory .browse-switch button{font-size:10px}#directory .browse-switch{gap:3px}}

/* Two product cards per row, including narrow phones. */
:is(#grid,.recommendation-grid).grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@container product-results (min-width:1000px){:is(#grid,.recommendation-grid).grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){
 :is(#grid,.recommendation-grid).grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 :is(#grid,.recommendation-grid)>.card .brand-tag,:is(#grid,.recommendation-grid)>.card h3,:is(#grid,.recommendation-grid)>.card .card-type-row{margin-left:7px;margin-right:7px}
 :is(#grid,.recommendation-grid)>.card .nutrition-rows{margin:0 5px 6px}
 :is(#grid,.recommendation-grid)>.card h3{font-size:12px;line-height:1.3;padding-bottom:7px}
 :is(#grid,.recommendation-grid)>.card .brand-tag{font-size:8px;padding-bottom:5px}
 :is(#grid,.recommendation-grid)>.card .visual{height:100px;padding:4px}
 :is(#grid,.recommendation-grid)>.card svg.product-image{height:85px}
 :is(#grid,.recommendation-grid)>.card .card-type-row{flex-direction:column;align-items:flex-start;gap:5px;padding-bottom:7px}
 :is(#grid,.recommendation-grid)>.card .badge{font-size:8px;padding:4px 5px;white-space:normal}
 :is(#grid,.recommendation-grid)>.card .compare-label{font-size:8px;max-width:100%;min-height:25px}
 :is(#grid,.recommendation-grid)>.card .shortlist-icon{width:23px;min-width:23px}
 :is(#grid,.recommendation-grid)>.card .single-row-panels{gap:2px}
 :is(#grid,.recommendation-grid)>.card .single-row-panels .major strong,:is(#grid,.recommendation-grid)>.card .single-row-panels .minor strong{font-size:12px;letter-spacing:-.4px}
 :is(#grid,.recommendation-grid)>.card .single-row-panels .nutrient-name{font-size:6px;letter-spacing:-.1px}
 :is(#grid,.recommendation-grid)>.card .single-row-panels .secondary-value{font-size:8px}
 :is(#grid,.recommendation-grid)>.card .single-row-panels .secondary-value small{font-size:6px;letter-spacing:-.2px}
}

/* Expand the product grid as desktop space becomes available. */
@container product-results (min-width:850px){:is(#grid,.recommendation-grid).grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container product-results (min-width:1180px){:is(#grid,.recommendation-grid).grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1750px){main{max-width:1800px}}

/* Ingredient counts and disclosure arrows sit at the right edge. */
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{order:1;margin:-11px -13px -11px 12px;border-right:0;border-left:1px solid #cdcdcd}
.ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-heading-label{flex:1;min-width:0}

/* Tighter ingredient disclosures on mobile. */
@media(max-width:700px){
 .ingredient-style-4.edge-tab-version-4 .ingredient-group-list{gap:7px}
 .ingredient-style-4.edge-tab-version-4 .ingredient-role summary{padding:8px 10px;min-height:52px}
 .ingredient-style-4.edge-tab-version-4 .ingredient-role summary .ingredient-heading-label{gap:3px}
 .ingredient-style-4.edge-tab-version-4 .ingredient-title-row{font-size:12px;line-height:1.2}
 .ingredient-style-4.edge-tab-version-4 .inline-group-description{font-size:10px;line-height:1.35;margin:0}
 .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{margin:-8px -10px -8px 8px;width:82px;min-width:82px;flex-basis:82px;padding:0 6px;gap:4px}
 .ingredient-style-4.edge-tab-version-4 .combined-ingredient-count{font-size:9px}
}

#results{display:block;font-size:12px;color:var(--muted)}.results-head>#results{width:100%;margin-top:2px}.grouped-filters>#results{padding:0 2px;margin-top:0}@media(min-width:901px){.catalogue>div .results-head:empty{display:none}}

/* Group browsing never displays the product catalogue underneath. */
#directory .catalogue[hidden],#brandBrowser[hidden],#brandSelection[hidden]{display:none!important}

/* Compact sorting and results spacing. */
.catalogue{row-gap:10px!important}
.results-head{gap:7px;margin-bottom:10px}
.sorting-panel{padding:6px 10px}
.sorting-panel .sort-widgets{gap:8px}
.sorting-panel .sort{gap:3px}
.sorting-panel .sort select{padding:7px 9px;min-height:34px}
.results-head>#results{margin:0;line-height:1.3}
@media(max-width:900px){.results-head{gap:6px;margin-bottom:9px}.sorting-panel{padding:6px 10px}}
@media(min-width:901px){.catalogue>aside.grouped-filters .sorting-panel{padding:8px 10px}.catalogue>aside.grouped-filters .sort-widgets{gap:8px}}

/* Consistent spacing for directory controls and results. */
#directory{--control-gap:12px;--panel-padding:12px}
#directory .browse-switch{margin-bottom:var(--control-gap)}
.catalogue{row-gap:var(--control-gap)!important}
.catalogue>aside.grouped-filters{gap:var(--control-gap)}
.grouped-filters>.filters-panel{padding:var(--panel-padding);gap:8px}
.filters-panel>.filter-bars-heading{margin:0 0 4px}
.filters-panel>.filter-actions{top:16px;right:var(--panel-padding)}
.sorting-panel{padding:var(--panel-padding)}
.results-head{gap:var(--control-gap);margin:0 0 var(--control-gap)}
.results-head>#results{margin:0;padding:0;line-height:1.3}
@media(max-width:900px){.results-head{gap:var(--control-gap);margin-bottom:var(--control-gap)}.sorting-panel{padding:var(--panel-padding)}}
@media(min-width:901px){.catalogue>aside.grouped-filters .sorting-panel{padding:var(--panel-padding)}.catalogue>div .results-head{margin-bottom:var(--control-gap)}}


.ingredients-card-list .full-ingredients-content{display:block;background:#fff;padding:14px;border-top:1px solid #dddddd}
.ingredients-card-list .full-ingredients-content .ingredients-section{width:100%;margin:0}
@media(max-width:700px){.ingredients-card-list .full-ingredients-content{padding:10px}}
/* Keep disclosure labels within the shaded action area on small screens. */
@media(max-width:700px){
 .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{width:108px;min-width:108px;flex-basis:108px;box-sizing:border-box;gap:6px;padding:0 7px}
 .ingredient-style-4.edge-tab-version-4 .combined-ingredient-count{min-width:0;white-space:normal;overflow-wrap:normal;text-align:center;line-height:1.3}
 .ingredient-style-4.edge-tab-version-4 .expand-symbol{flex-shrink:0}
 .redesigned-product.background-option-4 .ingredients-card .ingredient-alternative{margin-bottom:7px}
 .redesigned-product.background-option-4 .ingredients-card .ingredients-card-list{margin-bottom:0}
}

.redesigned-product.background-option-4 .ingredients-card .ingredients-card-list{margin:0 0 20px}
.redesigned-product.background-option-4 .ingredients-card>.ingredient-alternative:last-child{margin-bottom:0}
@media(max-width:700px){.redesigned-product.background-option-4 .ingredients-card .ingredients-card-list{margin-bottom:14px}}

/* Standalone full ingredient list between nutrition and ingredient roles. */
.redesigned-product.background-option-4>.ingredients-card-list{margin:0 0 20px;padding:0;border:0}
.redesigned-product>.ingredients-card-list .ingredient-title-row{font-size:18px;font-weight:700;color:var(--ink)}
@media(max-width:700px){.redesigned-product.background-option-4>.ingredients-card-list{margin-bottom:14px}.redesigned-product>.ingredients-card-list .ingredient-title-row{font-size:16px}}
.redesigned-product>.ingredients-card-list .full-ingredients-disclosure summary .ingredient-title-row{font-size:18px!important;font-weight:700;color:var(--ink)}
@media(max-width:700px){.redesigned-product>.ingredients-card-list .full-ingredients-disclosure summary .ingredient-title-row{font-size:16px!important}}

/* Ingredient placement alternatives on the first four displayed bars. */
.redesigned-product.background-option-4 .ingredient-placement-1>.ingredient-alternative:first-child{margin-bottom:16px}
.redesigned-product.background-option-4 .ingredient-placement-1>.ingredients-card-list{margin-bottom:0;border-top:1px solid #dddddd;padding-top:16px}
.ingredient-placement-2{position:relative}
.redesigned-product.background-option-4 .ingredient-placement-2>.ingredients-card-list{position:relative;z-index:1;width:180px;margin:0 0 -36px auto}
.ingredient-placement-2>.ingredients-card-list .ingredient-title-row{font-size:11px!important}
.ingredient-placement-2>.ingredients-card-list .ingredient-expand-action{width:75px!important;min-width:75px!important;flex-basis:75px!important}
.ingredient-placement-2 .full-ingredients-disclosure[open]{position:relative;background:#fff;box-shadow:0 4px 15px #1a1a1a18}
.ingredient-placement-2>.ingredient-alternative>h2{padding-right:190px;min-height:36px}
.redesigned-product.background-option-4 .ingredient-placement-separate>.ingredients-card-list{margin:0}
.ingredient-view-tabs{display:flex;gap:4px;padding:4px;background:#ececec;border-radius:9px;margin-bottom:18px}
.ingredient-view-tabs button{flex:1;background:transparent;border:0;border-radius:6px;padding:9px;color:#1a1a1a;font:inherit;font-size:13px;cursor:pointer}
.ingredient-view-tabs button[aria-selected=true]{background:#fff;color:#242424;font-weight:600;box-shadow:0 1px 4px #0002}
.ingredient-placement-4 [data-ingredient-pane]> .ingredient-alternative{margin:0!important}
@media(max-width:700px){.redesigned-product.background-option-4 .ingredient-placement-2>.ingredients-card-list{width:145px;margin-bottom:-52px}.ingredient-placement-2>.ingredient-alternative>h2{padding-right:150px;min-height:52px;display:flex;align-items:center;font-size:15px}.ingredient-placement-2>.ingredients-card-list .ingredient-expand-action{width:68px!important;min-width:68px!important;flex-basis:68px!important}}
.ingredient-placement-2 .combined-ingredient-count{display:none!important}
.ingredient-placement-2>.ingredients-card-list .ingredient-expand-action{width:35px!important;min-width:35px!important;flex-basis:35px!important}
.redesigned-product.background-option-4 .ingredient-placement-2:has(.full-ingredients-disclosure[open])>.ingredients-card-list{width:100%;margin-bottom:16px}
@media(max-width:700px){.ingredient-placement-2>.ingredients-card-list .ingredient-expand-action{width:30px!important;min-width:30px!important;flex-basis:30px!important}}

/* Four variations of the bold teal header. */
.redesigned-product.background-option-4 .enlarged-card-header:is(.hero-redesign-1,.hero-redesign-2,.hero-redesign-3,.hero-redesign-4){background:#1f1f1f;border:1px solid #1a1a1a}
:is(.hero-redesign-1,.hero-redesign-2,.hero-redesign-3,.hero-redesign-4) .enlarged-card-body{padding:24px!important}
:is(.hero-redesign-1,.hero-redesign-2,.hero-redesign-3,.hero-redesign-4) .brand-tag{color:#d4d4d4}
.redesigned-product :is(.hero-redesign-1,.hero-redesign-2,.hero-redesign-3,.hero-redesign-4) .enlarged-card-body h1,
:is(.hero-redesign-1,.hero-redesign-2,.hero-redesign-3,.hero-redesign-4) .product-description{color:#fff}
/* 1: Pale image stage and curved edge. */
.hero-redesign-1 .enlarged-card-image{background:#eeeeee;border-radius:0 0 50% 50%/0 0 12% 12%;height:195px}
/* 2: Floating white inset within a fully teal card. */
.hero-redesign-2 .enlarged-card-image{margin:18px 18px 0;background:#fff;border-radius:12px;height:180px}
.hero-redesign-2 .brand-tag{display:inline-block;border:1px solid #7d7d7d;border-radius:20px;padding:4px 10px;font-size:10px!important}
/* 3: Centred teal composition with a soft illuminated backdrop. */
.hero-redesign-3{text-align:center}
.hero-redesign-3 .enlarged-card-image{height:205px;background:radial-gradient(ellipse at center,#515151 0%,#515151 42%,#1a1a1a 75%)}
.hero-redesign-3 .enlarged-card-type-row{justify-content:center;gap:14px;flex-wrap:wrap}
.hero-redesign-3 .product-description{max-width:440px;margin:16px auto 0}
.hero-redesign-3 .brand-tag{letter-spacing:3px!important}
/* 4: Desktop split with pale image stage and teal information panel. */
.redesigned-product.background-option-4 .hero-redesign-4{display:grid;grid-template-columns:44% 56%}
.hero-redesign-4 .enlarged-card-image{background:#e9e9e9;height:100%;min-height:290px;padding:18px}
.redesigned-product .hero-redesign-4 .enlarged-card-image .product-photo{width:100%;height:165px}
.hero-redesign-4 .enlarged-card-body{display:flex;flex-direction:column;justify-content:center}
.hero-redesign-4 .enlarged-card-type-row{flex-wrap:wrap;gap:12px}
@media(max-width:500px){
 :is(.hero-redesign-1,.hero-redesign-2,.hero-redesign-3,.hero-redesign-4) .enlarged-card-body{padding:18px!important}
 .hero-redesign-1 .enlarged-card-image,.hero-redesign-3 .enlarged-card-image{height:155px}
 .hero-redesign-2 .enlarged-card-image{height:145px;margin:14px 14px 0}
 .redesigned-product.background-option-4 .hero-redesign-4{grid-template-columns:1fr}
 .hero-redesign-4 .enlarged-card-image{height:145px;min-height:145px;border-bottom:5px solid #7d7d7d}
}
/* Refined option 1: white image stage and softer teal information panel. */
.redesigned-product.background-option-4 .hero-redesign-1{background:#1f1f1f;border-color:#1f1f1f}
.hero-redesign-1 .enlarged-card-image{background:#fff}
.hero-redesign-1 .brand-tag{color:#e9e9e9}
.redesigned-product .hero-redesign-1 .enlarged-card-body h1,.hero-redesign-1 .product-description{color:#fff}
/* Compact the selected teal header information area. */
.redesigned-product .hero-redesign-1 .enlarged-card-body{padding:14px 20px!important}
.redesigned-product .hero-redesign-1 .enlarged-card-body h1{margin:5px 0 9px!important;line-height:1.2}
.hero-redesign-1 .product-description{margin:10px 0 0;line-height:1.5}
@media(max-width:500px){.redesigned-product .hero-redesign-1 .enlarged-card-body{padding:12px 16px!important}}

/* Pale teal and black text trial on the selected first header. */
.redesigned-product.background-option-4 .enlarged-card-header.hero-redesign-1{background:#e9e9e9;border-color:#d2d2d2}
.redesigned-product.background-option-4 .hero-redesign-1 .enlarged-card-body h1,
.redesigned-product.background-option-4 .hero-redesign-1 .product-description,
.redesigned-product.background-option-4 .hero-redesign-1 .brand-tag{color:#282828}
/* Straight division between the image and pale teal information area. */
.redesigned-product.background-option-4 .hero-redesign-1 .enlarged-card-image{border-radius:0;border-bottom:1px solid #d2d2d2}
/* Place type and list controls beneath the product description. */
.hero-redesign-1 .enlarged-card-body{display:flex;flex-direction:column}
.hero-redesign-1 .enlarged-card-type-row{order:4;margin-top:12px}
.hero-redesign-1 .product-description{margin-top:2px}
.redesigned-product .hero-redesign-1.matched-actions-preview .enlarged-card-type-row .badge{background:#fff}
.redesigned-product .hero-redesign-1.matched-actions-preview .enlarged-card-type-row .badge{border:1px solid #7d7d7d}
/* Consistent dark teal treatment for floating-card controls. */
.redesigned-product .enlarged-card-type-row .shortlist-preview .shortlist-icon{background:#1f1f1f;color:#fff;border-color:#1f1f1f}
.redesigned-product .enlarged-card-type-row .shortlist-preview{border-color:#1f1f1f;color:#515151}
.redesigned-product .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{background:#1f1f1f;color:#fff;border-color:#1f1f1f}
.redesigned-product .ingredient-expand-action .combined-ingredient-count,.redesigned-product .ingredient-expand-action .expand-symbol{color:#fff}
.redesigned-product .ingredient-view-tabs button{color:#7d7d7d;border:1px solid #7d7d7d}
.redesigned-product .ingredient-view-tabs button[aria-selected=true]{background:#fff;color:#242424}
.redesigned-product a{color:#7d7d7d}
.redesigned-product a.primary{background:#1f1f1f;color:#fff;border-color:#1f1f1f}
.redesigned-product .ingredient-style-4.edge-tab-version-4.ingredient-controls-left.arrow-option-2 .expand-symbol:before{border-right-color:#fff;border-bottom-color:#fff}
/* Restore the clean segmented ingredient tabs. */
.redesigned-product .ingredient-view-tabs button{border:0;background:transparent;color:#1a1a1a}
.redesigned-product .ingredient-view-tabs button[aria-selected=true]{background:#fff;color:#242424}
.redesigned-product .ingredient-style-4 .ingredient-role summary .ingredient-title-row{color:#282828}
/* Ingredient counts precede the chevron in each disclosure control. */
.redesigned-product .ingredient-expand-action .combined-ingredient-count{order:0}
.redesigned-product .ingredient-expand-action .expand-symbol{order:1}

/* Four refinements of the selected pale teal header. */
/* 1: More compact image and calmer typography. */
.redesigned-product .header-refinement-1 .enlarged-card-image{height:155px}
.redesigned-product .header-refinement-1 .enlarged-card-image .product-photo{height:120px;width:80%}
.redesigned-product .header-refinement-1 .enlarged-card-body h1{font-size:24px!important}
.header-refinement-1 .brand-tag{font-size:10px!important;letter-spacing:1.5px!important}
.header-refinement-1 .product-description{max-width:510px}
/* 2: Editorial hierarchy with quiet type label and one clear action. */
.header-refinement-2 .enlarged-card-body{position:relative}
.header-refinement-2 .enlarged-card-type-row{justify-content:flex-end}
.redesigned-product .header-refinement-2 .enlarged-card-type-row .badge{position:absolute;top:14px;right:20px;height:auto;min-height:0;background:transparent;border:0;padding:0;font-size:11px;color:#515151}
.header-refinement-2 .brand-tag{padding-right:100px}
.header-refinement-2 .product-description{max-width:480px}
/* 3: Unified pale teal canvas with an inset white product stage. */
.redesigned-product.background-option-4 .header-refinement-3 .enlarged-card-image{margin:14px 14px 0;border-radius:10px;border:0;height:175px}
.header-refinement-3 .enlarged-card-type-row{justify-content:flex-start;gap:10px}
.redesigned-product .header-refinement-3 .enlarged-card-body{padding:18px 20px!important}
/* 4: Balanced desktop split, compact stacked composition on mobile. */
.redesigned-product.background-option-4 .enlarged-card-header.header-refinement-4{display:grid;grid-template-columns:43% 57%}
.redesigned-product.background-option-4 .header-refinement-4 .enlarged-card-image{height:100%;min-height:265px;border-bottom:0;border-right:1px solid #d2d2d2;padding:16px}
.redesigned-product .header-refinement-4 .enlarged-card-image .product-photo{width:100%;height:160px}
.redesigned-product .header-refinement-4 .enlarged-card-body{justify-content:center;padding:22px!important}
.header-refinement-4 .enlarged-card-type-row{justify-content:flex-start;flex-wrap:wrap;gap:10px}
@media(max-width:500px){
 .redesigned-product .header-refinement-1 .enlarged-card-image{height:130px}
 .redesigned-product .header-refinement-1 .enlarged-card-image .product-photo{height:100px}
 .redesigned-product.background-option-4 .header-refinement-3 .enlarged-card-image{height:140px;margin:10px 10px 0}
 .redesigned-product.background-option-4 .enlarged-card-header.header-refinement-4{grid-template-columns:1fr}
 .redesigned-product.background-option-4 .header-refinement-4 .enlarged-card-image{min-height:135px;height:135px;border-right:0;border-bottom:1px solid #d2d2d2}
 .redesigned-product .header-refinement-4 .enlarged-card-image .product-photo{height:105px}
}
.header-refinement-3 .enlarged-card-type-row{justify-content:space-between}
/* Slightly smaller type badge and shortlist control in floating headers. */
.redesigned-product .matched-actions-preview .enlarged-card-type-row .badge,
.redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview{height:29px;min-height:29px;font-size:11px;border-radius:7px}
.redesigned-product .matched-actions-preview .enlarged-card-type-row .badge{padding:0 10px}
.redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview{padding:0 10px 0 0;gap:7px}
.redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-icon{min-width:28px;font-size:15px}
@media(max-width:700px){
 .redesigned-product .matched-actions-preview .enlarged-card-type-row .badge,
 .redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview{height:28px;min-height:28px;font-size:10px}
}
/* Match the compact product-card shortlist spacing. */
.redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview{padding:0 7px 0 0;gap:5px}
.redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-icon{min-width:22px;width:22px;font-size:14px}

/* Preview the selected floating-header styling on four directory cards. */
:is(#grid,.recommendation-grid)>.card.inset-card-preview{background:#e9e9e9;border-color:#d2d2d2}
:is(#grid,.recommendation-grid)>.card.inset-card-preview .visual{background:#fff;margin:10px 10px 12px;border-radius:9px;overflow:hidden}
:is(#grid,.recommendation-grid)>.card.inset-card-preview .brand-tag{color:#282828}
:is(#grid,.recommendation-grid)>.card.inset-card-preview h3{color:#282828}
:is(#grid,.recommendation-grid)>.card.inset-card-preview .badge{background:#fff;border:1px solid #515151}
:is(#grid,.recommendation-grid)>.card.inset-card-preview .shortlist-preview{background:#fff;border-color:#1f1f1f;color:#515151}
:is(#grid,.recommendation-grid)>.card.inset-card-preview .shortlist-icon{background:#1f1f1f;color:#fff;border-color:#1f1f1f}
:is(#grid,.recommendation-grid)>.card.inset-card-preview .nutrition-rows{background:#fff;border-radius:9px;padding:6px;margin-top:2px}
@media(max-width:700px){:is(#grid,.recommendation-grid)>.card.inset-card-preview .visual{margin:7px 7px 10px;border-radius:7px}:is(#grid,.recommendation-grid)>.card.inset-card-preview .nutrition-rows{padding:3px}}

/* Four further three-section card concepts. */
:is(#grid,.recommendation-grid)>.card:is(.directory-design-1,.directory-design-2,.directory-design-3,.directory-design-4){background:#e9e9e9;border:1px solid #d2d2d2}
:is(#grid,.recommendation-grid)>.card:is(.directory-design-1,.directory-design-2,.directory-design-3,.directory-design-4) .visual{background:#fff;margin:10px 10px 12px;border-radius:9px;border:0}
:is(#grid,.recommendation-grid)>.card:is(.directory-design-1,.directory-design-2,.directory-design-3,.directory-design-4) .brand-tag,
:is(#grid,.recommendation-grid)>.card:is(.directory-design-1,.directory-design-2,.directory-design-3,.directory-design-4) h3,
:is(#grid,.recommendation-grid)>.card:is(.directory-design-1,.directory-design-2,.directory-design-3,.directory-design-4) .card-type-row{background:#fff;margin:0 10px;padding-left:10px;padding-right:10px}
:is(#grid,.recommendation-grid)>.card:is(.directory-design-1,.directory-design-2,.directory-design-3,.directory-design-4) .brand-tag{padding-top:12px;border-radius:9px 9px 0 0}
:is(#grid,.recommendation-grid)>.card:is(.directory-design-1,.directory-design-2,.directory-design-3,.directory-design-4) .card-type-row{border-radius:0 0 9px 9px}
:is(#grid,.recommendation-grid)>.card:is(.directory-design-1,.directory-design-2,.directory-design-3,.directory-design-4) .nutrition-rows{background:#fff;margin:10px;padding:5px;border-radius:9px}
/* 1: Airy rounded sections on a very pale frame. */
:is(#grid,.recommendation-grid)>.card.directory-design-1{background:#f1f1f1}
:is(#grid,.recommendation-grid)>.card.directory-design-1 .visual,:is(#grid,.recommendation-grid)>.card.directory-design-1 .nutrition-rows{border-radius:13px}
:is(#grid,.recommendation-grid)>.card.directory-design-1 .brand-tag{border-radius:13px 13px 0 0}
:is(#grid,.recommendation-grid)>.card.directory-design-1 .card-type-row{border-radius:0 0 13px 13px}
/* 2: More defined teal frame and crisp section corners. */
:is(#grid,.recommendation-grid)>.card.directory-design-2{background:#d7d7d7;border-color:#bdbdbd}
:is(#grid,.recommendation-grid)>.card.directory-design-2 .visual,:is(#grid,.recommendation-grid)>.card.directory-design-2 .nutrition-rows{border-radius:4px}
:is(#grid,.recommendation-grid)>.card.directory-design-2 .brand-tag{border-radius:4px 4px 0 0}
:is(#grid,.recommendation-grid)>.card.directory-design-2 .card-type-row{border-radius:0 0 4px 4px}
/* 3: White image and nutrition, softly tinted identity section. */
:is(#grid,.recommendation-grid)>.card.directory-design-3{background:#e3e3e3}
:is(#grid,.recommendation-grid)>.card.directory-design-3 .brand-tag,:is(#grid,.recommendation-grid)>.card.directory-design-3 h3,:is(#grid,.recommendation-grid)>.card.directory-design-3 .card-type-row{background:#f5f5f5}
:is(#grid,.recommendation-grid)>.card.directory-design-3 .brand-tag{color:#7d7d7d}
/* 4: Lifted white sections with subtle depth. */
:is(#grid,.recommendation-grid)>.card.directory-design-4{background:#ebebeb}
:is(#grid,.recommendation-grid)>.card.directory-design-4 .visual,:is(#grid,.recommendation-grid)>.card.directory-design-4 .nutrition-rows{box-shadow:0 2px 5px #28282810}
:is(#grid,.recommendation-grid)>.card.directory-design-4 .brand-tag,:is(#grid,.recommendation-grid)>.card.directory-design-4 h3,:is(#grid,.recommendation-grid)>.card.directory-design-4 .card-type-row{border-left:3px solid #7d7d7d;padding-left:9px}
@media(max-width:700px){
 :is(#grid,.recommendation-grid)>.card:is(.directory-design-1,.directory-design-2,.directory-design-3,.directory-design-4) .visual{margin-left:7px;margin-right:7px}
 :is(#grid,.recommendation-grid)>.card:is(.directory-design-1,.directory-design-2,.directory-design-3,.directory-design-4) .brand-tag,:is(#grid,.recommendation-grid)>.card:is(.directory-design-1,.directory-design-2,.directory-design-3,.directory-design-4) h3,:is(#grid,.recommendation-grid)>.card:is(.directory-design-1,.directory-design-2,.directory-design-3,.directory-design-4) .card-type-row{margin-left:7px;margin-right:7px;padding-left:6px;padding-right:6px}
 :is(#grid,.recommendation-grid)>.card:is(.directory-design-1,.directory-design-2,.directory-design-3,.directory-design-4) .nutrition-rows{margin:7px;padding:3px}
}

.redesigned-product.background-option-4 .header-refinement-3.thin-image-frame-preview .enlarged-card-image{margin:6px 6px 0;border-radius:9px}
@media(max-width:500px){.redesigned-product.background-option-4 .header-refinement-3.thin-image-frame-preview .enlarged-card-image{margin:5px 5px 0}}

/* Four quieter directory-card previews. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card{background:#fff;border:1px solid #e1e1e1;box-shadow:none}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .visual{background:transparent;margin:5px 6px 10px;border-radius:0;border:0;box-shadow:none}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .brand-tag,:is(#grid,.recommendation-grid).grid>.card.stripped-card h3,:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row{background:transparent;margin:0 12px;padding-left:0;padding-right:0;border-radius:0;border-left:0}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .brand-tag{padding-top:0;color:#7d7d7d}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrition-rows{background:transparent;margin:10px 12px 12px;padding:0;border-radius:0;box-shadow:none}
/* 1: Clean white card, with the existing coloured nutrition tiles. */
:is(#grid,.recommendation-grid).grid>.card.stripped-option-1 .badge{border:0;background:transparent;padding:0;color:#515151}
/* 2: One neutral nutrition strip with fine column dividers. */
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .single-row-panels{gap:0;background:#f6f6f6;border-radius:8px;overflow:hidden}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .nutrient{background:transparent;border-radius:0;border:0;border-right:1px solid #e4e4e4}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .nutrient:last-child{border-right:0}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .secondary-value{background:transparent}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .badge{background:transparent;border:0;padding:0;color:#515151}
/* 3: Borderless editorial card with typography-led nutrition. */
:is(#grid,.recommendation-grid).grid>.card.stripped-option-3{border-color:transparent;border-bottom:1px solid #e1e1e1;border-radius:0;background:transparent}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-3 .nutrient,:is(#grid,.recommendation-grid).grid>.card.stripped-option-3 .secondary-value{background:transparent;border:0;border-radius:0}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-3 .nutrition-rows{border-top:1px solid #e4e4e4;padding-top:8px}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-3 .badge{background:transparent;border:0;padding:0;color:#515151}
/* 4: Warm white card with a single subtle nutrition footer. */
:is(#grid,.recommendation-grid).grid>.card.stripped-option-4{background:#fffefa;border-color:#e2e2e2;border-radius:8px}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-4 .nutrition-rows{background:#f4f4f4;border-top:1px solid #e5e5e5;padding:8px 10px;margin:10px 0 0;border-radius:0 0 7px 7px}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-4 .nutrient,:is(#grid,.recommendation-grid).grid>.card.stripped-option-4 .secondary-value{background:transparent;border:0;border-radius:0}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-4 .badge{background:#f4f4f4;border:0;color:#515151}
@media(max-width:700px){:is(#grid,.recommendation-grid).grid>.card.stripped-card .brand-tag,:is(#grid,.recommendation-grid).grid>.card.stripped-card h3,:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row{margin-left:8px;margin-right:8px}:is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrition-rows{margin-left:8px;margin-right:8px}:is(#grid,.recommendation-grid).grid>.card.stripped-option-4 .nutrition-rows{margin-left:0;margin-right:0;padding-left:6px;padding-right:6px}}
/* Four restrained links to the floating-card design, preserving coloured macros. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card{background:#fff;border:1px solid #d5d5d5;border-radius:12px}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .single-row-panels{gap:5px;background:transparent;border-radius:0;overflow:visible}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrient{border:0;border-radius:10px;overflow:hidden}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .secondary-value{border-top:1px solid #fff}
/* Restore each nutrient's established colour rather than the neutral trial. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrient:nth-child(1){background:#f2eadc}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrient:nth-child(2){background:#e7e7e7}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrient:nth-child(3){background:#e7e7e7}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrient:nth-child(4){background:#eaeaea}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrient:nth-child(5){background:#e6e6e6}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .secondary-value{background:#ffffff80}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrition-rows{background:transparent;border:0;border-radius:0;padding:0;margin:10px 12px 12px}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .badge{background:#fff;border:1px solid #515151;padding:0 7px;color:#1a1a1a}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .visual{background:#fff;border:0;box-shadow:none}
/* 1: Pale teal image surround, inset white product stage. */
:is(#grid,.recommendation-grid).grid>.card.stripped-option-1 .visual{background:#fff;border:6px solid #e9e9e9;border-radius:10px;margin:8px 8px 12px}
/* 2: Pale teal identity band; white image and nutrition stay separate. */
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .brand-tag,:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 h3,:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .card-type-row{background:#e9e9e9;margin:0;padding-left:12px;padding-right:12px}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .brand-tag{padding-top:12px}
/* 3: Inset pale teal identity panel, mirroring the floating header body. */
:is(#grid,.recommendation-grid).grid>.card.stripped-option-3 .brand-tag,:is(#grid,.recommendation-grid).grid>.card.stripped-option-3 h3,:is(#grid,.recommendation-grid).grid>.card.stripped-option-3 .card-type-row{background:#e9e9e9;margin:0 8px;padding-left:10px;padding-right:10px}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-3 .brand-tag{padding-top:10px;border-radius:9px 9px 0 0}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-3 .card-type-row{border-radius:0 0 9px 9px}
/* 4: A narrow teal divider and soft action band. */
:is(#grid,.recommendation-grid).grid>.card.stripped-option-4 .visual{border-bottom:2px solid #dcdcdc;margin-bottom:10px}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-4 .card-type-row{background:#f2f2f2;border-radius:7px;padding:7px;margin:0 10px}
@media(max-width:700px){:is(#grid,.recommendation-grid).grid>.card.stripped-card .single-row-panels{gap:2px}:is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrition-rows{margin:8px}:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .brand-tag,:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 h3,:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .card-type-row{padding-left:8px;padding-right:8px}}

/* Trial the directory's white image and full-width teal band in product one. */
.redesigned-product.background-option-4 .enlarged-card-header.full-width-band-preview{background:#fff}
.redesigned-product.background-option-4 .header-refinement-3.full-width-band-preview .enlarged-card-image{margin:0;background:#fff;border-radius:0;border-bottom:0}
.redesigned-product.background-option-4 .header-refinement-3.full-width-band-preview .enlarged-card-body{background:#e9e9e9;border-top:1px solid #d7d7d7}

/* Same-brand widget previews on the first four displayed products. */
.ingredients-related-layout{margin-bottom:24px}
.related-brand{border:1px solid #dddddd;border-radius:12px;padding:16px;background:#fff;min-width:0}
.related-heading h2{margin:0 0 14px;font-size:16px}
.related-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.related-bar{display:flex;flex-direction:column;align-items:stretch;position:relative;gap:10px;min-width:0;padding:12px;background:#fff;border:1px solid #e4e4e4;border-radius:9px;color:#1a1a1a;text-align:left;cursor:pointer;font:inherit}
.related-bar:hover{border-color:#1f1f1f;background:#f8f8f8}
.related-bar svg{width:100%;height:62px;object-fit:contain}
.related-copy strong{display:block;font-size:12px;line-height:1.4}
.related-copy small{display:block;font-size:10px;color:#7d7d7d;margin-top:5px;line-height:1.5}
.related-chevron{display:none}
.related-brand-link{display:block;width:100%;margin-top:12px;border:0;border-radius:7px;background:#1f1f1f;color:#fff;padding:10px;font:inherit;font-size:12px;cursor:pointer}
.related-bar:focus-visible,.related-brand-link:focus-visible{outline:2px solid #7d7d7d;outline-offset:3px}
/* 1: Pale teal panel with two white cards. */
.related-brand-1{background:#e9e9e9}
/* 2: Compact stacked rows and a text link. */
.related-brand-2 .related-bars{grid-template-columns:1fr;gap:0}
.related-brand-2 .related-bar{flex-direction:row;align-items:center;border:0;border-bottom:1px solid #e5e5e5;border-radius:0;padding:12px 0}
.related-brand-2 .related-bar svg{width:85px;flex-shrink:0;height:46px}
.related-brand-2 .related-chevron{display:block;margin-left:auto}
.related-brand-2 .related-brand-link{background:transparent;color:#515151;text-align:left;padding:5px 0 0}
/* 3: Open editorial layout with fine dividers. */
.related-brand-3{border:0;border-top:2px solid #d5d5d5;border-radius:0;padding:16px 0}
.related-brand-3 .related-bar{border:0;padding:0 10px 8px 0;border-radius:0}
.related-brand-3 .related-bar+.related-bar{border-left:1px solid #e2e2e2;padding-left:12px}
.related-brand-3 .related-brand-link{background:#f2f2f2;color:#1a1a1a}
/* 4: Image tiles above a single shared brand footer. */
.related-brand-4{padding:0;overflow:hidden;background:#f5f5f5}
.related-brand-4 .related-heading{padding:16px 16px 0}
.related-brand-4 .related-bars{padding:0 16px 16px}
.related-brand-4 .related-bar{border:0;background:transparent;padding:0}
.related-brand-4 .related-bar svg{background:#fff;border-radius:8px;padding:8px;box-sizing:border-box;height:80px}
.related-brand-4 .related-brand-link{border-radius:0;margin:0;padding:13px}
@media(min-width:1150px){
 dialog:has(.has-related-brand){max-width:1160px}
 .redesigned-product:has(.has-related-brand){max-width:1040px!important}
 .ingredients-related-layout.has-related-brand{display:grid;grid-template-columns:minmax(0,680px) minmax(260px,1fr);align-items:start;gap:20px}
 .ingredients-related-layout.has-related-brand>.ingredients-card{margin-bottom:0}
 .related-bars{grid-template-columns:1fr}
 .related-brand-1 .related-bar svg,.related-brand-3 .related-bar svg{height:75px}
 .related-brand-3 .related-bar+.related-bar{border-left:0;border-top:1px solid #e2e2e2;padding:12px 0 0}
}
/* Four new variations of image tiles with a shared brand footer. */
.related-brand:is(.related-brand-1,.related-brand-2,.related-brand-3,.related-brand-4){padding:0;border:1px solid #dddddd;border-radius:12px;overflow:hidden;background:#f5f5f5}
.related-brand .related-heading{padding:16px 16px 0}
.related-brand .related-bars{padding:0 16px 16px;gap:14px}
.related-brand .related-bar{flex-direction:column;align-items:stretch;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.related-brand .related-bar svg{width:100%;height:80px;background:#fff;border-radius:8px;padding:8px;box-sizing:border-box;flex-shrink:1}
.related-brand .related-chevron{display:none}
.related-brand .related-bar+.related-bar{border:0;padding:0}
.related-brand .related-brand-link{border-radius:0;margin:0;padding:13px;background:#1f1f1f;color:#fff;text-align:center}
/* 1: White canvas with pale teal image tiles and a solid footer. */
.related-brand-1{background:#fff!important}
.related-brand-1 .related-bar svg{background:#efefef}
/* 2: Individually bordered tiles within a pale panel. */
.related-brand-2 .related-bar{background:#fff;border:1px solid #e2e2e2!important;border-radius:9px;padding:10px!important}
.related-brand-2 .related-bar svg{height:70px;padding:0}
.related-brand-2 .related-bars{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 3: Slim white layout with fine dividing lines and a quiet footer. */
.related-brand-3{background:#fff!important;border-radius:8px!important}
.related-brand-3 .related-bar svg{border:1px solid #e9e9e9;border-radius:5px}
.related-brand-3 .related-brand-link{background:#e9e9e9;color:#1a1a1a;border-top:1px solid #dddddd}
/* 4: Larger image stages, centred names and a compact footer button. */
.related-brand-4 .related-bar svg{height:100px}
.related-brand-4 .related-copy{text-align:center}
.related-brand-4 .related-brand-link{width:calc(100% - 32px);margin:0 16px 16px;border-radius:7px;padding:10px}
@media(min-width:1150px){.related-brand .related-bars{grid-template-columns:1fr}.related-brand .related-bar svg{height:90px}.related-brand-4 .related-bar svg{height:110px}}
/* Invert directory controls: white containers and coloured disclosure surfaces. */
.catalogue .grouped-filters>.filters-panel,
.catalogue .sorting-panel,
.catalogue>aside.grouped-filters .sorting-panel{background:#fff}
.catalogue .filters-panel .filter-group{background:#fff}
.catalogue .filters-panel .filter-group>summary{background:#ececec}
.catalogue .sorting-panel .sort select{background-color:#ececec}
/* Unshaded filter and sorting surfaces. */
.catalogue .filters-panel .filter-group>summary,
.catalogue .sorting-panel .sort select,
.catalogue .filters-panel .filter-group-status{background:#fff}

.related-brand-stack{display:grid;gap:16px;min-width:0;align-content:start}
.similar-brand-name{font-size:9px!important;text-transform:uppercase;letter-spacing:1px;color:#7d7d7d!important;margin:0 0 4px!important}
/* Replace the directory details band with a single lower divider. */
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .brand-tag,
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 h3,
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .card-type-row{background:#fff}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .card-type-row{border-bottom:1px solid #dcdcdc}
/* White ingredient role panels with retained outlines and teal controls. */
.redesigned-product .ingredient-style-4.edge-tab-version-4 details.ingredient-role{background:#fff;border:1px solid #dddddd}
.redesigned-product .ingredient-style-4.edge-tab-version-4 .ingredient-role>summary{background:#fff}
/* Isolate recommendation widgets from the directory sidebar's mobile grid. */
.redesigned-product aside.related-brand{display:block;grid-template-columns:none;gap:0;position:static}
.redesigned-product .related-brand>.related-heading,
.redesigned-product .related-brand>.related-bars,
.redesigned-product .related-brand>.related-brand-link{width:100%;grid-column:auto}
@media(max-width:1149px){
 .redesigned-product .related-brand .related-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 12px 12px}
 .redesigned-product .related-brand .related-heading{padding:14px 12px 0}
 .redesigned-product .related-brand .related-heading h2{font-size:16px;line-height:1.35;margin-bottom:12px}
 .redesigned-product .related-brand .related-bar{min-width:0;padding:9px!important}
 .redesigned-product .related-brand .related-bar svg{height:64px;width:100%}
 .redesigned-product .related-brand .related-copy strong{font-size:12px;line-height:1.35;overflow-wrap:anywhere}
 .redesigned-product .related-brand .related-copy small{font-size:10px;line-height:1.4}
 .redesigned-product .related-brand .related-brand-link{display:block;margin:0;border-radius:0;min-height:42px;padding:12px;font-size:12px}
}
/* Expanded ingredient entries read as plain text. */
.redesigned-product .ingredient-role .ingredient-chips>span{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}
/* Match recommendation-panel shading on directory control containers. */
.catalogue .grouped-filters>.filters-panel,
.catalogue .sorting-panel,
.catalogue>aside.grouped-filters .sorting-panel{background:#f5f5f5}
/* Subtle shared shading for the directory card's middle details section. */
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .brand-tag,
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 h3,
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .card-type-row{background:#f5f5f5}
/* Match floating product details to the shared subtle panel shading. */
.redesigned-product.background-option-4 .header-refinement-3.full-width-band-preview .enlarged-card-body{background:#f5f5f5}

/* Four clearly labelled price comparison concepts, with illustrative data only. */
.price-preview{padding:20px;border:1px solid #dddddd;border-radius:12px;background:#fff;margin:0 0 24px}
.price-preview-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.price-preview-heading h2{margin:0!important}
.price-demo-label{font-size:10px;color:#3c3c3c;background:#fbf2df;border:1px solid #eadbbd;padding:4px 7px;border-radius:5px}
.redesigned-product .price-preview-note{font-size:11px;color:#7d7d7d;margin:10px 0 16px}
.price-offers{display:grid;gap:10px}
.price-offer{display:grid;grid-template-columns:1fr auto auto;gap:6px 16px;align-items:center;padding:14px;border:1px solid #e3e3e3;border-radius:8px;position:relative}
.price-store strong{display:block;font-size:14px}.price-store small{display:block;font-size:10px;color:#7d7d7d;margin-top:4px}
.price-amount{text-align:right}.price-amount strong{display:block;font-size:20px;font-weight:600}.price-amount span{font-size:11px;color:#7d7d7d}
.price-delivery{grid-column:1/3;font-size:10px;color:#7d7d7d}
.sample-offer-button{grid-column:3;grid-row:1/3;background:#f0f0f0;color:#515151;border:1px dashed #b7b7b7;border-radius:6px;padding:9px;font-size:11px;text-align:center}
.redesigned-product .price-preview-updated{font-size:10px;color:#7d7d7d;margin:12px 0 0}
/* 1: Compact stacked comparison rows. */
/* 2: Offer cards with the per-bar amount prioritised. */
.price-preview-2{background:#f5f5f5}.price-preview-2 .price-offers{grid-template-columns:1fr 1fr}
.price-preview-2 .price-offer{display:flex;flex-direction:column;align-items:stretch;background:#fff;padding:18px;gap:12px}
.price-preview-2 .price-offer:first-child{border-color:#1f1f1f}.price-preview-2 .price-amount{text-align:left;display:flex;flex-direction:column-reverse;gap:3px}
.price-preview-2 .price-amount span{font-size:22px;color:#282828;font-weight:600}.price-preview-2 .price-amount strong{font-size:12px;color:#7d7d7d}
.sample-value-tag{font-size:9px;color:#7d7d7d;order:-1;text-transform:uppercase;letter-spacing:.6px}
/* 3: Minimal comparison table. */
.price-preview-3{border:0;border-top:1px solid #dddddd;border-bottom:1px solid #dddddd;border-radius:0;padding:18px 0}
.price-preview-3 .price-offers{gap:0}.price-preview-3 .price-offer{border:0;border-bottom:1px solid #e8e8e8;border-radius:0;padding:14px 0}
.price-preview-3 .price-offer:last-child{border-bottom:0}.price-preview-3 .sample-offer-button{background:transparent;border:0;padding:4px;color:#515151}
/* 4: Large featured offer with a quieter alternative below. */
.price-preview-4{padding:0;overflow:hidden;background:#f5f5f5}
.price-preview-4 .price-preview-heading{padding:18px 18px 0}.price-preview-4 .price-preview-note{padding:0 18px}
.price-preview-4 .price-offers{padding:0 18px}.price-preview-4 .price-offer:first-child{background:#fff;border-color:#bcbcbc;padding:20px}
.price-preview-4 .price-offer:first-child .price-amount strong{font-size:28px}.price-preview-4 .price-offer:last-child{border:0;padding:12px 0}
.price-preview-4 .price-preview-updated{padding:12px 18px;margin:0;background:#ececec}
@media(max-width:600px){.price-preview{padding:14px}.price-offer{grid-template-columns:1fr auto;gap:8px;padding:12px}.sample-offer-button{grid-column:1/-1;grid-row:auto}.price-delivery{grid-column:1/-1}.price-preview-2 .price-offer{padding:12px}.price-preview-2 .price-amount span{font-size:17px}.price-preview-4{padding:0}.price-preview-4 .price-offer:first-child{padding:12px}.price-preview-3{padding:14px 0}}

.sample-price-inline{font-size:10px;font-weight:400;color:#7d7d7d}
/* Give expanded ingredient rows a clear header and a continuous text area. */
.redesigned-product .ingredient-style-4.edge-tab-version-4 details.ingredient-role[open]>summary{border-bottom:1px solid #dddddd}
.redesigned-product .ingredient-style-4.edge-tab-version-4 details.ingredient-role[open]>.ingredient-chips{display:block;margin:0;padding:14px 13px;border:0;background:#fff;line-height:1.65}
.redesigned-product .ingredient-role .ingredient-chips>span{display:inline;white-space:normal}
.redesigned-product .ingredient-role .ingredient-chips>span+span:before{content:' '}
.redesigned-product .ingredient-style-4.edge-tab-version-4 details.ingredient-role{overflow:hidden}
@media(max-width:700px){.redesigned-product .ingredient-style-4.edge-tab-version-4 details.ingredient-role[open]>.ingredient-chips{padding:11px 10px;font-size:11px}}
/* Tighter spacing around expanded ingredient text. */
.redesigned-product .ingredient-style-4.edge-tab-version-4 details.ingredient-role[open]>.ingredient-chips{padding:8px 13px;line-height:1.5;min-height:0}
@media(max-width:700px){.redesigned-product .ingredient-style-4.edge-tab-version-4 details.ingredient-role[open]>.ingredient-chips{padding:7px 10px}}
/* Align inline role descriptions to the heading's text baseline. */
@media(min-width:701px){
 .redesigned-product .ingredient-style-4.edge-tab-version-4.desktop-layout-1 .ingredient-role summary .ingredient-heading-label{display:flex;flex-direction:row;align-items:baseline}
 .redesigned-product .ingredient-style-4.edge-tab-version-4.desktop-layout-1 .ingredient-role summary .inline-group-description{align-self:baseline;margin-top:0;margin-bottom:0}
}
/* Recommendation navigation as a right-edge action panel. */
.redesigned-product aside.related-brand{display:grid;grid-template-columns:minmax(0,1fr) 88px;grid-template-rows:auto 1fr;gap:0}
.redesigned-product .related-brand>.related-heading{grid-column:1;grid-row:1}
.redesigned-product .related-brand>.related-bars{grid-column:1;grid-row:2;min-width:0}
.redesigned-product .related-brand>.related-brand-link{grid-column:2;grid-row:1/3;align-self:stretch;width:100%;height:100%;margin:0;border-radius:0;border:0;border-left:1px solid #7d7d7d;display:flex;align-items:center;justify-content:center;padding:12px 10px;line-height:1.5;font-size:11px;overflow-wrap:normal}
@media(max-width:600px){
 .redesigned-product aside.related-brand{grid-template-columns:minmax(0,1fr) 68px}
 .redesigned-product .related-brand>.related-brand-link{padding:10px 6px;font-size:10px}
 .redesigned-product .related-brand .related-bars{gap:8px;padding:0 10px 10px}
 .redesigned-product .related-brand .related-bar{padding:7px!important}
 .redesigned-product .related-brand .related-bar svg{height:48px}
 .redesigned-product .related-brand .related-copy strong{font-size:10px}
 .redesigned-product .related-brand .related-copy small{font-size:9px}
}
/* Slightly softer button colours throughout the site. */
button,.shortlist-preview,.ingredient-expand-action,a.primary{filter:brightness(1.10)}
button:hover,.shortlist-preview:hover,a.primary:hover{filter:brightness(1.05)}
/* Compact explore actions beside recommendation headings. */
.redesigned-product aside.related-brand{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;align-items:center}
.redesigned-product .related-brand>.related-heading{grid-column:1;grid-row:1;padding:16px 12px}
.redesigned-product .related-brand>.related-heading h2{margin:0;line-height:1.35}
.redesigned-product .related-brand>.related-bars{grid-column:1/-1;grid-row:2}
.redesigned-product .related-brand>.related-brand-link{grid-column:2;grid-row:1;align-self:center;width:auto;height:auto;min-height:34px;margin:12px 12px 12px 0;padding:8px 10px;border:0;border-radius:7px;max-width:150px;font-size:10px;line-height:1.35}
@media(max-width:600px){.redesigned-product .related-brand>.related-heading h2{font-size:14px}.redesigned-product .related-brand>.related-brand-link{max-width:110px;font-size:9px;margin:10px 10px 10px 0;padding:7px 8px}}
.redesigned-product .related-brand>.related-brand-link{max-width:none;white-space:nowrap}
@media(max-width:600px){.redesigned-product aside.related-brand{grid-template-columns:minmax(0,1fr)}.redesigned-product .related-brand>.related-heading{grid-column:1;grid-row:1;padding-bottom:6px}.redesigned-product .related-brand>.related-brand-link{grid-column:1;grid-row:2;justify-self:start;margin:0 12px 12px;max-width:none;white-space:nowrap}.redesigned-product .related-brand>.related-bars{grid-row:3}}
/* Slim single-line explore buttons alongside recommendation titles. */
.redesigned-product aside.related-brand{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr}
.redesigned-product .related-brand>.related-heading{grid-column:1;grid-row:1;padding:14px 10px 14px 12px;min-width:0}
.redesigned-product .related-brand>.related-brand-link{grid-column:2;grid-row:1;justify-self:end;align-self:center;min-height:0;height:auto;padding:5px 8px;margin:10px 12px 10px 0;font-size:10px;line-height:1.2;white-space:nowrap}
.redesigned-product .related-brand>.related-bars{grid-column:1/-1;grid-row:2}
@media(max-width:600px){
 .redesigned-product .related-brand>.related-heading{padding:12px 7px 12px 10px}
 .redesigned-product .related-brand>.related-heading h2{font-size:12px}
 .redesigned-product .related-brand>.related-brand-link{font-size:8px;padding:5px 6px;margin-right:10px}
}
/* Keep the explore action immediately after its heading, rather than at the far edge. */
.redesigned-product aside.related-brand{grid-template-columns:auto minmax(0,1fr);justify-content:start}
.redesigned-product .related-brand>.related-heading{padding-right:8px}
.redesigned-product .related-brand>.related-brand-link{justify-self:start;margin-left:0}
@media(max-width:600px){.redesigned-product .related-brand>.related-heading{max-width:150px;padding-right:7px}}
.redesigned-product .related-brand>.related-heading{padding-right:3px}
.redesigned-product .related-brand>.related-brand-link{margin-left:0}
.redesigned-product .related-brand>.related-heading{width:max-content;max-width:100%;padding-right:0}
.redesigned-product .related-brand>.related-heading h2{margin-right:0;letter-spacing:-.3px}
.redesigned-product .related-brand>.related-brand-link{margin-left:0}
/* Recommendation action directly below its heading. */
.redesigned-product aside.related-brand{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr}
.redesigned-product .related-brand>.related-heading{grid-column:1;grid-row:1;width:auto;padding:14px 12px 4px}
.redesigned-product .related-brand>.related-brand-link{grid-column:1;grid-row:2;justify-self:start;margin:0 12px 12px;padding:5px 8px;min-height:0;width:auto;height:auto}
.redesigned-product .related-brand>.related-bars{grid-column:1;grid-row:3}

/* Four recommendation heading and action arrangements. */
/* 1: Slim action inline immediately after the title. */
.redesigned-product .recommendation-layout-1 aside.related-brand{grid-template-columns:max-content minmax(0,1fr);grid-template-rows:auto 1fr}
.redesigned-product .recommendation-layout-1 .related-brand>.related-heading{grid-column:1;grid-row:1;width:auto;padding:14px 6px 14px 12px}
.redesigned-product .recommendation-layout-1 .related-brand>.related-heading h2{font-size:14px}
.redesigned-product .recommendation-layout-1 .related-brand>.related-brand-link{grid-column:2;grid-row:1;justify-self:start;margin:10px 10px 10px 0;font-size:9px}
.redesigned-product .recommendation-layout-1 .related-brand>.related-bars{grid-column:1/-1;grid-row:2}
/* 2: A quiet text link below the title. */
.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link{background:transparent;color:#515151;border:0;border-radius:0;padding:0;margin:2px 12px 14px;font-size:11px;text-decoration:underline;text-underline-offset:3px;filter:none}
/* 3: Title plus a compact circular arrow action. */
.redesigned-product .recommendation-layout-3 aside.related-brand{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr}
.redesigned-product .recommendation-layout-3 .related-brand>.related-heading{grid-column:1;grid-row:1;padding:14px 12px}
.redesigned-product .recommendation-layout-3 .related-brand>.related-brand-link{grid-column:2;grid-row:1;margin:10px 12px 10px 0;width:30px;height:30px;min-height:30px;border-radius:50%;padding:0;font-size:0}
.redesigned-product .recommendation-layout-3 .related-brand>.related-brand-link:after{content:'→';font-size:17px}
.redesigned-product .recommendation-layout-3 .related-brand>.related-bars{grid-column:1/-1;grid-row:2}
/* 4: Return the action to a restrained full-width footer. */
.redesigned-product .recommendation-layout-4 aside.related-brand{grid-template-rows:auto 1fr auto}
.redesigned-product .recommendation-layout-4 .related-brand>.related-heading{grid-row:1;padding:14px 12px}
.redesigned-product .recommendation-layout-4 .related-brand>.related-bars{grid-row:2}
.redesigned-product .recommendation-layout-4 .related-brand>.related-brand-link{grid-row:3;justify-self:stretch;margin:0;width:100%;border-radius:0;padding:9px 12px;font-size:11px}
@media(max-width:600px){
 .redesigned-product .recommendation-layout-1 aside.related-brand{grid-template-columns:minmax(0,1fr) auto}
 .redesigned-product .recommendation-layout-1 .related-brand>.related-heading{max-width:none}
 .redesigned-product .recommendation-layout-1 .related-brand>.related-heading h2{font-size:12px}
 .redesigned-product .recommendation-layout-1 .related-brand>.related-brand-link{font-size:8px;padding:5px}
}
.redesigned-product .recommendation-layout-1 aside.related-brand{grid-template-columns:minmax(0,max-content) minmax(0,1fr)}
.redesigned-product .recommendation-layout-1 .related-brand>.related-heading{max-width:170px}
.redesigned-product .recommendation-layout-1 .related-brand>.related-brand-link{font-size:8px;padding:5px}
/* Equal-height image and information halves in floating product headers. */
.redesigned-product.background-option-4 .enlarged-card-header.full-width-band-preview{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(min-content,1fr))}
.redesigned-product.background-option-4 .header-refinement-3.full-width-band-preview .enlarged-card-image{height:auto;min-height:0;align-self:stretch}
.redesigned-product.background-option-4 .header-refinement-3.full-width-band-preview .enlarged-card-body{height:100%;justify-content:center}
/* Unshaded recommendation panels with outlined product tiles. */
.redesigned-product aside.related-brand.related-brand-2{background:#fff}
.redesigned-product .related-brand.related-brand-2 .related-bar{background:#fff;border:1px solid #dddddd!important;border-radius:9px}
/* Recommendations follow ingredients at every viewport width. */
.redesigned-product .ingredients-related-layout.has-related-brand{display:block}
.redesigned-product .ingredients-related-layout.has-related-brand>.ingredients-card{margin-bottom:20px}
.redesigned-product .related-brand .related-bars{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1150px){
 dialog:has(.has-related-brand){max-width:900px}
 .redesigned-product:has(.has-related-brand){max-width:680px!important}
}

/* Consistent price-panel spacing and hierarchy. */
.redesigned-product .price-preview-2{padding:20px;background:#f5f5f5}
.redesigned-product .price-preview-2 .price-preview-heading{margin-bottom:16px}
.redesigned-product .price-preview-2 .price-offers{gap:12px;align-items:stretch}
.redesigned-product .price-preview-2 .price-offer{padding:18px;gap:18px;border:1px solid #dddddd;border-radius:9px}
.redesigned-product .price-preview-2 .price-store strong{font-size:15px;line-height:1.3}
.redesigned-product .price-preview-2 .price-store small{font-size:11px;margin-top:5px}
.redesigned-product .price-preview-2 .price-amount{gap:7px}
.redesigned-product .price-preview-2 .price-amount>span{font-size:25px;line-height:1.2;font-weight:600;white-space:nowrap}
.price-preview-2 .price-unit-label{font-size:12px;font-weight:400}
.redesigned-product .price-preview-2 .price-amount .price-pack-total{font-size:12px;font-weight:500;line-height:1.4}
.price-preview-2 .sample-price-inline{font-size:11px;font-weight:400}
@media(max-width:600px){
 .redesigned-product .price-preview-2{padding:14px}
 .redesigned-product .price-preview-2 .price-offers{gap:9px}
 .redesigned-product .price-preview-2 .price-offer{padding:12px;gap:15px}
 .redesigned-product .price-preview-2 .price-store strong{font-size:13px}
 .redesigned-product .price-preview-2 .price-amount>span{font-size:21px;white-space:normal}
 .price-preview-2 .price-unit-label{display:block;font-size:11px;margin-top:3px}
 .price-preview-2 .sample-price-inline{display:block;font-size:10px}
}

/* Recommendation panels use the same card component and container breakpoints. */
.redesigned-product .related-brand>.recommendation-results{grid-column:1/-1;grid-row:3;padding:0 12px 12px;min-width:0;container-type:inline-size;container-name:product-results}
.recommendation-grid.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.recommendation-grid>.card:nth-child(n+3){display:none}
@container product-results (min-width:850px){.recommendation-grid.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.recommendation-grid>.card:nth-child(3){display:grid}}
@container product-results (min-width:1180px){.recommendation-grid.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.recommendation-grid>.card:nth-child(4){display:grid}}
.redesigned-product .recommendation-grid .card h3{font-family:Manrope,sans-serif;font-size:15px;line-height:1.4;letter-spacing:-.3px}
.redesigned-product .recommendation-grid .brand-tag{font-size:9px;letter-spacing:1.5px}
.redesigned-product .recommendation-grid .visual{height:135px}
.redesigned-product .recommendation-grid .product-image{height:115px;width:var(--product-art-width,90%);max-width:100%}
.redesigned-product .recommendation-grid .single-row-panels .nutrient-name{font-size:8px}
.redesigned-product .recommendation-grid .single-row-panels .major strong,.redesigned-product .recommendation-grid .single-row-panels .minor strong{font-size:18px;font-weight:400}
.redesigned-product .recommendation-grid .single-row-panels .secondary-value{font-size:11px;margin-top:0;padding:7px 0}
.redesigned-product .recommendation-grid .single-row-panels .secondary-value small{font-size:8px}
@media(min-width:1150px){dialog:has(.has-related-brand){max-width:min(1500px,96vw)}.redesigned-product:has(.has-related-brand){max-width:none!important}}
@media(max-width:700px){.recommendation-grid.grid{gap:9px}.redesigned-product .recommendation-grid .visual{height:100px}.redesigned-product .recommendation-grid .product-image{height:85px}.redesigned-product .recommendation-grid .single-row-panels .major strong,.redesigned-product .recommendation-grid .single-row-panels .minor strong{font-size:12px}.redesigned-product .recommendation-grid .single-row-panels .nutrient-name{font-size:6px}.redesigned-product .recommendation-grid .single-row-panels .secondary-value{font-size:8px}.redesigned-product .recommendation-grid .single-row-panels .secondary-value small{font-size:6px}}
.recommendation-grid.grid>.card:nth-child(n+3){display:none!important}
@container product-results (min-width:850px){.recommendation-grid.grid>.card:nth-child(3){display:grid!important}}
@container product-results (min-width:1180px){.recommendation-grid.grid>.card:nth-child(4){display:grid!important}}

/* Image regions track the actual height of their shaded details band. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card .visual{margin:0;padding:10px;min-height:0;display:flex;align-items:center;justify-content:center}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .visual .product-image{max-height:100%;object-fit:contain}
/* Open recommendation sections with stronger headings and links. */
.redesigned-product aside.related-brand.related-brand-2{border:0;border-radius:0;overflow:visible}
.redesigned-product .related-brand>.related-heading{padding:8px 0 6px;max-width:none}
.redesigned-product .related-brand>.related-heading h2{font-size:23px;font-weight:700;line-height:1.3;letter-spacing:-.5px}
.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link{font-size:14px;font-weight:600;margin:2px 0 18px;color:#7d7d7d;text-decoration-thickness:1px;text-underline-offset:4px}
.redesigned-product .related-brand>.recommendation-results{padding:0}
.related-brand-stack{gap:28px}
@media(max-width:600px){.redesigned-product .related-brand>.related-heading h2{font-size:20px}.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link{font-size:12px;margin-bottom:14px}}
/* Retailer details and pricing share one horizontal row. */
.redesigned-product .price-preview-2 .price-offer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px}
.redesigned-product .price-preview-2 .price-amount{text-align:right}
@media(max-width:600px){.redesigned-product .price-preview-2 .price-offers{grid-template-columns:1fr}.redesigned-product .price-preview-2 .price-offer{grid-template-columns:minmax(0,1fr) auto}.price-preview-2 .price-unit-label{display:inline}.price-preview-2 .sample-price-inline{display:inline}}

.redesigned-product .price-preview-2 .price-offer{grid-template-columns:minmax(0,1fr) auto auto;column-gap:16px}
.redesigned-product .price-preview-2 .price-amount{text-align:left}
.redesigned-product .price-buy-link{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:#1f1f1f;color:#fff;text-decoration:none;border-radius:6px;padding:8px 11px;font-size:12px;font-weight:600;filter:brightness(1.1)}
.redesigned-product .price-buy-link:hover{filter:brightness(1.05)}
@media(max-width:600px){.redesigned-product .price-preview-2 .price-offer{grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px}.redesigned-product .price-buy-link{padding:7px 9px;font-size:11px}.redesigned-product .price-preview-2 .price-amount>span{font-size:19px}.price-preview-2 .price-unit-label{display:block}}
.price-preview{container-type:inline-size;container-name:price-panel}
@container price-panel (max-width:800px){.redesigned-product .price-preview-2 .price-offers{grid-template-columns:1fr}}

/* Per-bar and pack prices share a single baseline. */
.redesigned-product .price-preview-2 .price-amount{flex-direction:row-reverse;align-items:baseline;justify-content:flex-end;gap:12px;white-space:nowrap}
.redesigned-product .price-preview-2 .price-amount>span{white-space:nowrap}
.price-preview-2 .price-unit-label,.price-preview-2 .sample-price-inline{display:inline}
@media(max-width:600px){.redesigned-product .price-preview-2 .price-offer{column-gap:8px}.redesigned-product .price-preview-2 .price-amount{gap:7px}.redesigned-product .price-preview-2 .price-amount>span{font-size:16px}.redesigned-product .price-preview-2 .price-amount .price-pack-total,.price-preview-2 .sample-price-inline{font-size:9px}.price-preview-2 .price-unit-label{font-size:9px}}
/* Amazon-style yellow purchase buttons. */
.redesigned-product .price-buy-link{background:#ffd814;color:#1a1a1a;filter:none}
.redesigned-product .price-buy-link:hover{background:#f7ca00;filter:none}
/* Balanced typography across retailer, price and purchase action. */
.redesigned-product .price-preview-2 .price-store strong{font-size:14px;line-height:1.4;font-weight:600}
.redesigned-product .price-preview-2 .price-amount>span{font-size:18px;line-height:1.4;font-weight:600}
.redesigned-product .price-preview-2 .price-unit-label{font-size:12px;font-weight:400}
.redesigned-product .price-preview-2 .price-amount .price-pack-total{font-size:13px;line-height:1.4;font-weight:500}
.redesigned-product .price-preview-2 .sample-price-inline{font-size:12px;font-weight:400}
.redesigned-product .price-preview-2 .price-buy-link{font-size:12px;line-height:1.4;font-weight:600}
@media(max-width:600px){
 .redesigned-product .price-preview-2 .price-store strong{font-size:12px}
 .redesigned-product .price-preview-2 .price-amount>span{font-size:15px}
 .redesigned-product .price-preview-2 .price-amount .price-pack-total{font-size:11px}
 .redesigned-product .price-preview-2 .price-unit-label,.redesigned-product .price-preview-2 .sample-price-inline{font-size:10px}
 .redesigned-product .price-preview-2 .price-buy-link{font-size:11px}
}
/* Keep retailer offers side by side at phone widths. */
.redesigned-product .price-preview-2 .price-offers{grid-template-columns:repeat(2,minmax(0,1fr))}
@container price-panel (max-width:800px){
 .redesigned-product .price-preview-2 .price-offers{grid-template-columns:repeat(2,minmax(0,1fr))}
 .redesigned-product .price-preview-2 .price-offer{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:12px;min-width:0}
 .redesigned-product .price-preview-2 .price-amount{flex-direction:column-reverse;align-items:flex-start;gap:4px;white-space:normal;text-align:left}
 .redesigned-product .price-preview-2 .price-amount>span{white-space:normal}
 .redesigned-product .price-preview-2 .price-buy-link{align-self:stretch}
}

.price-store .retailer-amazon-logo{display:block;width:88px;max-width:100%;height:auto;object-fit:contain}
@media(max-width:600px){.price-store .retailer-amazon-logo{width:76px}}
/* Explore link immediately follows its recommendation title. */
.redesigned-product .recommendation-layout-2 aside.related-brand{grid-template-columns:fit-content(65%) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:8px;align-items:baseline}
.redesigned-product .recommendation-layout-2 .related-brand>.related-heading{grid-column:1;grid-row:1;padding:8px 0 16px;width:auto;max-width:none}
.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link{grid-column:2;grid-row:1;justify-self:start;align-self:baseline;margin:8px 0 16px;padding:0;white-space:normal;text-align:left}
.redesigned-product .recommendation-layout-2 .related-brand>.recommendation-results{grid-column:1/-1;grid-row:2}
@media(max-width:600px){.redesigned-product .recommendation-layout-2 aside.related-brand{column-gap:6px}.redesigned-product .recommendation-layout-2 .related-brand>.related-heading h2{font-size:17px}.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link{font-size:11px}}

/* Anchor stacked offer actions to a shared bottom edge. */
@container price-panel (max-width:800px){.redesigned-product .price-preview-2 .price-offer>.price-buy-link{margin-top:auto}}

/* More prominent brand exploration links. */
.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link[data-related-brand]{font-size:18px;line-height:1.4}
@media(max-width:600px){.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link[data-related-brand]{font-size:15px}}

/* Centre retailer artwork within its offer row. */
.redesigned-product .price-preview-2 .price-store{align-self:center;display:flex;align-items:center}
.redesigned-product .price-preview-2 .price-store .retailer-amazon-logo{margin:0;vertical-align:middle}

/* Centre all content in the compact, side-by-side retailer cards. */
@container price-panel (max-width:800px){
 .redesigned-product .price-preview-2 .price-offer{text-align:center}
 .redesigned-product .price-preview-2 .price-store{justify-content:center;align-self:center;text-align:center}
 .redesigned-product .price-preview-2 .price-amount{align-items:center;text-align:center}
 .redesigned-product .price-preview-2 .price-buy-link{text-align:center;justify-content:center}
}

/* Tighter surround for the retailer cards. */
.redesigned-product .price-preview.price-preview-2{padding:10px;border-radius:12px}
@media(max-width:600px){.redesigned-product .price-preview.price-preview-2{padding:8px;border-radius:10px}}

/* Remove the outer retailer-panel border. */
.redesigned-product .price-preview.price-preview-2{border:0;border-radius:0;padding:0;background:transparent}

/* Four purchase-link treatments for comparison on the first four products. */
.redesigned-product .price-preview-2.purchase-option-1 .price-offer{border:1px solid #c4c4c4;border-top:4px solid #515151;box-shadow:0 5px 15px #1a1a1a10;background:linear-gradient(180deg,#f5f5f5,#fff 65%)}
.redesigned-product .price-preview-2.purchase-option-2 .price-offer{border:1px solid #ead596;border-radius:12px;background:#fffbed;box-shadow:0 4px 12px #b68a1210}
.redesigned-product .price-preview-2.purchase-option-2 .price-buy-link{box-shadow:0 3px 0 #e4b900}
.redesigned-product .price-preview-2.purchase-option-3 .price-offer{border:1px solid #1a1a1a;border-left:6px solid #515151;background:#fff;box-shadow:5px 5px 0 #eaeaea}
.redesigned-product .price-preview-2.purchase-option-3 .price-buy-link{border-radius:30px}
.redesigned-product .price-preview-2.purchase-option-4 .price-offer{border:1px solid #515151;background:#1f1f1f;box-shadow:0 6px 18px #1a1a1a20}
.redesigned-product .price-preview-2.purchase-option-4 .price-store strong,
.redesigned-product .price-preview-2.purchase-option-4 .price-amount,
.redesigned-product .price-preview-2.purchase-option-4 .price-amount>span,
.redesigned-product .price-preview-2.purchase-option-4 .price-amount .price-pack-total,
.redesigned-product .price-preview-2.purchase-option-4 .price-unit-label,
.redesigned-product .price-preview-2.purchase-option-4 .sample-price-inline{color:#fff}
.redesigned-product .price-preview-2.purchase-option-4 .price-store:has(.retailer-amazon-logo){background:#fff;border-radius:6px;padding:6px 9px}

/* Four light teal refinements of the first purchase treatment. */
.redesigned-product .price-preview-2.purchase-refinement-1 .price-offer{border:1px solid #c4c4c4;border-top:3px solid #515151;background:linear-gradient(180deg,#f3f3f3,#fff 70%);box-shadow:0 4px 12px #1a1a1a0c}
.redesigned-product .price-preview-2.purchase-refinement-2 .price-offer{border:1px solid #cfcfcf;border-top:5px solid #515151;background:#f9f9f9;box-shadow:0 6px 18px #1a1a1a14;border-radius:13px}
.redesigned-product .price-preview-2.purchase-refinement-3 .price-offer{border:2px solid #515151;border-top:3px solid #515151;background:#fff;box-shadow:0 0 0 4px #f2f2f2;border-radius:9px}
.redesigned-product .price-preview-2.purchase-refinement-4 .price-offer{border:1px solid #c4c4c4;border-top:3px solid #515151;background:linear-gradient(110deg,#ededed,#fff 65%);box-shadow:0 8px 20px #1a1a1a18;border-radius:16px}
.redesigned-product .price-preview-2.purchase-refinement-4 .price-buy-link{border-radius:24px}

/* Keep catalogue card actions together at narrow widths. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:5px;min-width:0}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .badge{min-width:0;flex:0 1 auto;padding-inline:5px}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview{flex:0 0 auto;width:auto;margin:0;grid-template-columns:20px auto}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview>span:last-child{padding-inline:5px}
@media(max-width:700px){:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .badge,:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview{font-size:8px}}

.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link[data-explore-similar]{font-size:18px;line-height:1.4}
@media(max-width:600px){.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link[data-explore-similar]{font-size:15px}}

/* Relative macro colours shared by catalogue and floating product panels. */
[data-macro-tone="green"]{--macro-fill:#e2f0e6;--macro-accent:#58956a}
[data-macro-tone="amber"]{--macro-fill:#faf0d9;--macro-accent:#ba8d32}
[data-macro-tone="red"]{--macro-fill:#f6e3e1;--macro-accent:#bd6e68}
[data-macro-tone="neutral"]{--macro-fill:#edf0f1;--macro-accent:#a0afb2}
[data-macro-tone="missing"]{--macro-fill:#f2f2f2;--macro-accent:#c7cccc}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrient[data-macro-tone],.redesigned-product .complete-panel[data-macro-tone]{background:var(--macro-fill)!important;border-top:3px solid var(--macro-accent)!important}
.redesigned-product .complete-panel[data-macro-tone] .complete-panel-main{background:transparent!important}
.redesigned-product .complete-panel[data-macro-tone] .complete-panel-footer{background:#ffffff80!important}
.macro-colour-key{font-size:11px;line-height:1.6;color:#7d7d7d;margin:10px 0 16px;max-width:900px}
.macro-key-green{color:#3d744c;font-weight:600}.macro-key-amber{color:#89651f;font-weight:600}.macro-key-red{color:#98514c;font-weight:600}

/* Keep macro fills without a darker top accent. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrient[data-macro-tone],.redesigned-product .complete-panel[data-macro-tone]{border-top:0!important}

/* Unavailable macro values use a distinct blue fill. */
[data-macro-tone="missing"]{--macro-fill:#e2edf7;--macro-accent:#9bbbd6}

/* White small-card details with matching top and bottom dividers. */
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .brand-tag,
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 h3,
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .card-type-row{background:#fff}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .brand-tag{border-top:0}

/* First-product trial: one clean card encloses hero and macros. */
.redesigned-product.background-option-4 .unified-product-card{border:1px solid #d3d3d3;border-radius:16px;overflow:hidden;margin-bottom:24px}
.redesigned-product.background-option-4 .unified-product-card .enlarged-card-header{border:0;border-radius:0;margin:0;box-shadow:none}
.redesigned-product.background-option-4 .unified-product-card .header-refinement-3.full-width-band-preview .enlarged-card-body{background:#fff;border:0}
.redesigned-product.background-option-4 .unified-product-card .enlarged-card-image{border:0}
.redesigned-product.background-option-4 .unified-product-card .complete-nutrition{margin:0;padding:16px;border-top:1px solid #dcdcdc}

/* Second-product trial: white details, existing divider retained. */
.redesigned-product.background-option-4.white-hero-trial .header-refinement-3.full-width-band-preview .enlarged-card-body{background:#fff}

/* Third-product trial: white details without the image divider. */
.redesigned-product.background-option-4.white-hero-no-divider-trial .header-refinement-3.full-width-band-preview .enlarged-card-body{background:#fff;border-top:0}

/* Let the unified first-product hero fill the available mobile width. */
.redesigned-product.background-option-4>.unified-product-card{width:100%;max-width:none;min-width:0;box-sizing:border-box;margin-inline:0}
.redesigned-product.background-option-4 .unified-product-card>.enlarged-card-header{width:100%;max-width:none;min-width:0;box-sizing:border-box;margin-inline:0}
@media(max-width:700px){.redesigned-product.background-option-4 .unified-product-card .enlarged-card-body{padding-inline:14px}.redesigned-product.background-option-4 .unified-product-card .complete-nutrition{padding:10px}}

/* Fourth-product trial: retain shading without enclosing or middle lines. */
.redesigned-product.background-option-4.shaded-borderless-hero-trial .enlarged-card-header.header-refinement-3.full-width-band-preview{border:0;box-shadow:none}
.redesigned-product.background-option-4.shaded-borderless-hero-trial .header-refinement-3.full-width-band-preview .enlarged-card-body{border-top:0}

/* Fifth-product trial: no outer border, divider or shading. */
.redesigned-product.background-option-4.white-borderless-hero-trial .enlarged-card-header.header-refinement-3.full-width-band-preview{border:0;box-shadow:none;background:#fff}
.redesigned-product.background-option-4.white-borderless-hero-trial .header-refinement-3.full-width-band-preview .enlarged-card-body{border-top:0;background:#fff}

/* Four purchasing layouts using the site's own visual language. */
.redesigned-product .price-preview-2:where([class*="purchase-redesign-"]:not(.purchase-redesign-0)) .price-offer{border:1px solid #dcdcdc;border-radius:12px;background:#fff;box-shadow:none}
.redesigned-product .price-preview-2:where([class*="purchase-redesign-"]:not(.purchase-redesign-0)) .price-buy-link{background:#1f1f1f;border:1px solid #515151;color:#fff;border-radius:7px;box-shadow:none;filter:none}
.redesigned-product .price-preview-2:where([class*="purchase-redesign-"]:not(.purchase-redesign-0)) .price-buy-link:hover{background:#1f1f1f}
/* 1: clean white cards with a familiar solid teal action. */
.redesigned-product .price-preview-2.purchase-redesign-1 .price-offer{background:#fff}
/* 2: subtle grey-green panel, white outlined action. */
.redesigned-product .price-preview-2.purchase-redesign-2 .price-offer{background:#f5f5f5}
.redesigned-product .price-preview-2.purchase-redesign-2 .price-buy-link{background:#fff;color:#515151;border-color:#1f1f1f}
/* 3: white upper section with an integrated teal action footer. */
.redesigned-product .price-preview-2.purchase-redesign-3 .price-offer{overflow:hidden;padding-bottom:0}
.redesigned-product .price-preview-2.purchase-redesign-3 .price-buy-link{border-radius:0;margin-left:-18px;margin-right:-18px;margin-bottom:0;padding:13px 18px}
/* 4: minimal divider treatment with a compact outline link. */
.redesigned-product .price-preview-2.purchase-redesign-4 .price-offer{border:0;border-radius:0;border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;background:#fff}
.redesigned-product .price-preview-2.purchase-redesign-4 .price-buy-link{background:#fff;color:#515151;border-color:#1f1f1f;border-radius:6px}
@container price-panel (max-width:800px){
 .redesigned-product .price-preview-2.purchase-redesign-3 .price-buy-link{margin-left:-12px;margin-right:-12px}
 .redesigned-product .price-preview-2.purchase-redesign-4 .price-buy-link{align-self:center;min-width:100px}
}

@container price-panel (min-width:801px){.redesigned-product .price-preview-2.purchase-redesign-3 .price-buy-link{margin:0;border-radius:7px;padding:10px 14px}.redesigned-product .price-preview-2.purchase-redesign-3 .price-offer{padding-bottom:18px}}

/* Selected purchasing treatment: integrated action in Amazon yellow. */
.redesigned-product .price-preview-2.purchase-redesign-3 .price-buy-link{background:#ffd814;border-color:#ffd814;color:#1a1a1a;filter:none}
.redesigned-product .price-preview-2.purchase-redesign-3 .price-buy-link:hover{background:#f7ca00;border-color:#f7ca00;color:#1a1a1a}

/* First-product trial: compact ingredient expander buttons. */
.redesigned-product.compact-ingredient-actions-trial .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{align-self:center;height:34px;min-height:34px;margin:0 12px 0 auto;padding:6px 10px;border:1px solid #7d7d7d;border-radius:7px;width:auto;min-width:108px;flex-basis:auto}

/* Compact purchase actions instead of full-width footers. */
.redesigned-product .price-preview-2.purchase-redesign-3 .price-offer{padding-bottom:18px}
.redesigned-product .price-preview-2.purchase-redesign-3 .price-buy-link{width:auto;justify-self:center;align-self:center;margin-left:0;margin-right:0;margin-bottom:0;padding:10px 20px;border-radius:7px;min-width:100px}
@container price-panel (max-width:800px){
 .redesigned-product .price-preview-2.purchase-redesign-3 .price-offer{padding-bottom:12px}
 .redesigned-product .price-preview-2.purchase-redesign-3 .price-buy-link{margin-top:auto;margin-left:0;margin-right:0;align-self:center;padding:10px 20px}
}

/* Remove the enclosing ingredients outline. */
.redesigned-product.background-option-4 .ingredients-card{border:0;border-radius:0}

/* Align mobile ingredients with the full-width nutrition panels. */
@media(max-width:700px){
 .redesigned-product.background-option-4 .ingredients-related-layout>.ingredients-card{width:100%;max-width:none;margin-inline:0;padding-left:0;padding-right:0;box-sizing:border-box}
 .redesigned-product.background-option-4 .ingredients-card .ingredient-alternative{width:100%;max-width:none;margin-left:0;margin-right:0}
}

.redesigned-product .ingredient-style-4.edge-tab-version-4 details.ingredient-role[open]>summary{border-bottom:0}

/* Desktop ingredients and buying column; mobile retains offers above ingredients. */
.ingredients-buying-layout{display:flex;flex-direction:column;gap:18px}
.ingredients-buying-layout>.price-preview{order:-1}
.redesigned-product.background-option-4 .ingredients-buying-layout>.ingredients-card{min-width:0}
@media(max-width:700px){.redesigned-product.background-option-4 .ingredients-buying-layout>.ingredients-card{width:100%;max-width:none;margin-inline:0;padding-inline:0}}
@media(min-width:1000px){
 .ingredients-buying-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,32%);gap:24px;align-items:start}
 .ingredients-buying-layout>.price-preview{order:0;margin:0;min-width:0}
 .redesigned-product.background-option-4 .ingredients-buying-layout>.ingredients-card{padding:0;margin:0 0 24px}
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-offers{grid-template-columns:minmax(0,1fr)}
}

/* Align the stacked offers with both edges of the ingredients section. */
@media(min-width:1000px){
 .ingredients-buying-layout{align-items:stretch;margin-bottom:24px}
 .redesigned-product.background-option-4 .ingredients-buying-layout>.ingredients-card{margin-bottom:0}
 .redesigned-product .ingredients-buying-layout>.price-preview{align-self:stretch;display:flex;flex-direction:column}
 .redesigned-product .ingredients-buying-layout .price-offers{flex:1;grid-template-rows:repeat(2,minmax(0,1fr))}
 .redesigned-product .ingredients-buying-layout .price-offer{justify-content:center}
}

@media(min-width:1000px){.ingredients-buying-layout{grid-template-columns:minmax(0,1fr) minmax(230px,25%)}}

/* Size desktop offers from the ingredients column, rather than their content. */
@media(min-width:1000px){
 .redesigned-product .ingredients-buying-layout>.price-preview{position:relative;min-height:0}
 .redesigned-product .ingredients-buying-layout .price-offers{position:absolute;inset:0;min-height:0;gap:10px}
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-offer{min-height:0;gap:8px;padding:10px;justify-content:space-evenly}
 .redesigned-product .ingredients-buying-layout .price-store .retailer-amazon-logo{width:70px}
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-amount{gap:3px}
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-buy-link{padding:8px 16px;margin-top:0}
 .redesigned-product .ingredients-buying-layout .ingredient-group-list{margin-bottom:0}
 .redesigned-product .ingredients-buying-layout [data-ingredient-pane="roles"]{margin-bottom:0}
}

/* Uniform buying-panel fill without a darker top accent. */
.redesigned-product .price-preview-2.purchase-option-1.purchase-refinement-1.purchase-redesign-3 .price-offer{border:1px solid #d2d2d2;background:#f5f5f5;box-shadow:none}

/* Four retailer-review layout previews. */
.buying-review-preview{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:3px 7px;color:#282828;font-size:11px;line-height:1.3;text-align:center}
.review-score{font-weight:700;font-size:14px}.review-scale{font-size:10px;font-weight:400}.review-stars{color:#ba8521;font-size:14px;letter-spacing:1px;white-space:nowrap}.review-stars>span{opacity:.45}.review-count{color:#7d7d7d;font-size:10px}.review-placeholder{flex-basis:100%;font-size:8px;color:#7d7d7d}
.review-option-1 .review-score{order:1}.review-option-1 .review-count{order:2}.review-option-1 .review-placeholder{order:3}
.review-option-2{padding:6px 9px;border:1px solid #dcdcdc;border-radius:7px;background:#fff}.review-option-2 .review-count{flex-basis:100%}
.review-option-3{display:grid;grid-template-columns:auto auto;gap:2px 7px}.review-option-3 .review-score{grid-row:1/3;font-size:23px}.review-option-3 .review-scale{display:none}.review-option-3 .review-stars{grid-column:2}.review-option-3 .review-count{grid-column:2}.review-option-3 .review-placeholder{grid-column:1/-1}
.review-option-4{border-top:1px solid #dcdcdc;padding-top:6px}.review-option-4 .review-score{order:0}.review-option-4 .review-stars{order:1}.review-option-4 .review-count{order:2;flex-basis:100%}.review-option-4 .review-placeholder{order:3}

/* Keep mobile buying and ingredients sections close together. */
@media(max-width:999px){
 .ingredients-buying-layout{gap:12px}
 .redesigned-product .ingredients-buying-layout>.price-preview{margin-bottom:0}
 .redesigned-product.background-option-4 .ingredients-buying-layout>.ingredients-card{padding-top:0;margin-top:0}
}

/* Review counts sit below the star-rating row in every preview. */
.buying-review-preview .review-count{flex-basis:100%;order:2;text-align:center}
.buying-review-preview .review-placeholder{order:3}
.buying-review-preview.review-option-3 .review-count{grid-column:2;grid-row:2}

.price-store strong{overflow-wrap:anywhere}

/* Give review content room without clipping purchase actions. */
@media(min-width:1000px){
 .redesigned-product .ingredients-buying-layout .price-offers{position:static;inset:auto;grid-template-rows:repeat(2,minmax(min-content,1fr));height:100%}
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-offer{padding:14px 12px;gap:10px;justify-content:center;overflow:visible}
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-buy-link{margin-top:4px;flex-shrink:0}
 .redesigned-product .ingredients-buying-layout .price-store .retailer-amazon-logo{width:76px}
}
.redesigned-product .price-preview-2 .buying-review-preview{flex-shrink:0}
.redesigned-product .price-preview-2 .price-buy-link{flex-shrink:0}

/* Compact desktop offers to share the ingredients column's height. */
@media(min-width:1000px){
 .redesigned-product .ingredients-buying-layout .price-offers{position:absolute;inset:0;height:100%;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-offer{padding:8px 10px;gap:4px;justify-content:space-evenly;overflow:visible}
 .redesigned-product .ingredients-buying-layout .price-store{min-height:20px}
 .redesigned-product .ingredients-buying-layout .price-store .retailer-amazon-logo{width:60px}
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-amount{gap:1px}
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-amount>span{font-size:17px;line-height:1.2}
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-amount .price-pack-total{font-size:11px;line-height:1.2}
 .redesigned-product .ingredients-buying-layout .price-unit-label,.redesigned-product .ingredients-buying-layout .sample-price-inline{font-size:10px}
 .redesigned-product .ingredients-buying-layout .buying-review-preview{font-size:10px;gap:1px 5px;line-height:1.2;padding-block:0}
 .redesigned-product .ingredients-buying-layout .review-stars{font-size:12px}
 .redesigned-product .ingredients-buying-layout .review-score{font-size:12px}
 .redesigned-product .ingredients-buying-layout .review-count{font-size:9px}
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-buy-link{padding:6px 16px;margin-top:0;min-height:28px;font-size:11px}
}

@media(min-width:1000px){.ingredients-buying-layout{grid-template-columns:minmax(0,1fr) minmax(200px,20%)}}

/* Remove the duplicate list action from the top navigation. */
header nav #compareTop{display:none}

/* Distinct lavender accent for the saved-list tab. */
#directory .browse-switch #browseSaved{background:#ececec;border-color:#bbbbbb;color:#333333}
#directory .browse-switch #browseSaved:hover{background:#e0e0e0}
#directory .browse-switch #browseSaved.active{background:#1f1f1f;border-color:#1f1f1f;color:#fff}

/* Warm orange palette shared across navigation, controls and ingredient panels. */
:root{--ink:#2d2d2d;--line:#dcdcdc;--green:#cccccc;--muted:#6d6d6d}
#directory .browse-switch #browseSaved{background:#f2f2f2;border-color:#1f1f1f;color:#515151}
#directory .browse-switch #browseSaved:hover{background:#e2e2e2}
#directory .browse-switch #browseSaved.active{background:#1f1f1f;border-color:#1f1f1f;color:#fff}

/* New-bar notification signup. */
.new-bars-signup{margin:24px 5% 0;padding:22px 24px;border:1px solid #d6d6d6;border-radius:14px;background:#f6f6f6;display:flex;align-items:center;justify-content:space-between;gap:20px}
.new-bars-signup h2{font-size:23px;line-height:1.3;letter-spacing:-.6px;margin:0 0 5px}
.new-bars-signup p{margin:0;font-size:13px;color:#6d6d6d}
.new-bars-signup form{flex:0 1 420px;min-width:0}
.signup-fields{display:flex;gap:8px}.signup-fields input{min-width:0;flex:1;border:1px solid #c8c8c8;border-radius:7px;padding:12px;background:#fff;font:inherit;font-size:13px;color:#1d1d1d}
.signup-fields button{border:1px solid #565656;border-radius:7px;background:#1f1f1f;color:#fff;font-size:13px;font-weight:600;padding:12px 18px;white-space:nowrap;filter:none}
.new-bars-signup .signup-status{margin-top:8px;font-size:12px}
@media(max-width:700px){.new-bars-signup{margin:16px 5% 0;padding:18px;display:block}.new-bars-signup h2{font-size:20px}.new-bars-signup form{margin-top:14px}.signup-fields button{padding-inline:12px}}

/* Monochrome interface, with semantic and retailer colours retained. */
:root{--ink:#242424;--paper:#fff;--line:#dcdcdc;--green:#dedede;--muted:#707070}
.signup-fields button{background:#1f1f1f;border-color:#1f1f1f;color:#fff}
#directory .browse-switch #browseSaved.active{background:#1f1f1f;border-color:#1f1f1f;color:#fff}
.redesigned-product .price-preview-2.purchase-redesign-3 .price-buy-link{background:#ffd814;border-color:#ffd814;color:#0f1111}
.redesigned-product .price-preview-2.purchase-redesign-3 .price-buy-link:hover{background:#f7ca00;border-color:#f7ca00}
.review-stars{color:#ba8521}

/* Compact signup alongside the site name in the header. */
body>header{gap:24px;align-items:center}
body>header>nav{display:none}
body>header>.logo{flex-shrink:0}
body>header>.new-bars-signup{margin:0 0 0 auto;padding:0;border:0;border-radius:0;background:transparent;gap:18px;max-width:850px;flex:1;justify-content:flex-end}
body>header .new-bars-signup h2{font-size:16px;letter-spacing:-.2px;margin:0 0 3px}
body>header .new-bars-signup p{font-size:11px}
body>header .new-bars-signup form{flex:0 1 340px}
body>header .signup-fields input,body>header .signup-fields button{padding:10px 12px;font-size:12px}
@media(max-width:700px){
 body>header{flex-wrap:wrap;gap:16px}
 body>header>.new-bars-signup{flex-basis:100%;max-width:none;display:block;margin:0}
 body>header .new-bars-signup form{margin-top:10px}
}


/* Keep existing dark fills visually consistent with Notify me. */
button,.shortlist-preview,.ingredient-expand-action,a.primary{filter:none}
button:hover,.shortlist-preview:hover,a.primary:hover{filter:none}

/* Compact header signup stays beside the wordmark. */
body>header{flex-wrap:nowrap;gap:18px}
body>header>.new-bars-signup{display:block;flex:0 1 390px;max-width:390px;margin-left:auto;min-width:0}
body>header .new-bars-signup h2{font-size:13px;line-height:1.3;margin:0 0 6px;letter-spacing:0}
body>header .new-bars-signup>div>p{display:none}
body>header .new-bars-signup form{margin:0}
body>header .signup-fields{gap:6px}
body>header .signup-fields input,body>header .signup-fields button{padding:7px 9px;font-size:11px;border-radius:5px}
@media(max-width:700px){
 body>header{padding:16px 4%;gap:12px;flex-wrap:nowrap}
 body>header>.logo{font-size:22px}
 body>header>.new-bars-signup{flex:1;max-width:300px;margin-left:auto}
 body>header .new-bars-signup h2{font-size:10px;margin-bottom:5px}
 body>header .signup-fields input,body>header .signup-fields button{font-size:9px;padding:7px 6px}
 body>header .signup-fields input{width:0}
}

body>header .signup-fields input{flex:0 1 190px;width:190px;max-width:190px}
@media(max-width:700px){body>header .signup-fields input{flex:0 1 140px;width:140px;max-width:140px}}

/* Clean, unified split list control. */
.card.matched-small-actions .card-type-row .shortlist-preview,
.matched-actions-preview .enlarged-card-type-row .shortlist-preview{
 display:inline-grid;grid-template-columns:24px auto;align-items:stretch;gap:0;
 padding:0;border:1px solid #1f1f1f;border-radius:6px;background:#fff;color:#303030;
 overflow:hidden;box-shadow:none;line-height:1;min-height:26px;height:26px
}
.card.matched-small-actions .card-type-row .shortlist-preview .shortlist-icon,
.matched-actions-preview .enlarged-card-type-row .shortlist-preview .shortlist-icon{
 display:flex;align-items:center;justify-content:center;background:#1f1f1f;color:#fff;
 border:0;border-radius:0;margin:0;padding:0;width:100%;min-width:0;height:100%;font-size:17px;line-height:1
}
.card.matched-small-actions .card-type-row .shortlist-preview>span:last-child,
.matched-actions-preview .enlarged-card-type-row .shortlist-preview>span:last-child{
 display:flex;align-items:center;justify-content:center;padding:0 8px;line-height:1;white-space:nowrap
}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview{grid-template-columns:24px auto}
@media(max-width:700px){:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview{grid-template-columns:20px auto}:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview>span:last-child{padding-inline:5px}}

/* Tighter label spacing on the floating product list button. */
.redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview{width:max-content;min-width:0;grid-template-columns:24px max-content;gap:0;padding:0}
.redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview>span:last-child{padding:0 6px;min-width:0}

/* Softer grey ingredient actions. */
.redesigned-product .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{background:#707070;border-color:#707070;color:#fff}

/* Match section edges throughout the stacked tablet/mobile layout. */
@media(max-width:999px){
 .redesigned-product.background-option-4 .ingredients-buying-layout>.ingredients-card{width:100%;max-width:none;box-sizing:border-box;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
 .redesigned-product.background-option-4 .ingredients-buying-layout .ingredient-alternative{width:100%;max-width:none;margin-left:0;margin-right:0}
}

/* Four ingredient action treatments on the first four products. */
.redesigned-product.ingredient-action-option-1 .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{background:#ededed;border-left:1px solid #d8d8d8;color:#303030}
.redesigned-product.ingredient-action-option-2 .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{background:#fff;border-left:1px solid #d8d8d8;color:#303030}
.redesigned-product.ingredient-action-option-3 .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{background:#fff;border:1px solid #bcbcbc;border-radius:6px;align-self:center;height:30px;min-height:30px;margin:0 10px 0 auto;padding:5px 9px;color:#303030}
.redesigned-product.ingredient-action-option-4 .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{background:transparent;border:0;color:#303030}
.redesigned-product:is(.ingredient-action-option-1,.ingredient-action-option-2,.ingredient-action-option-3,.ingredient-action-option-4) .ingredient-expand-action :is(.combined-ingredient-count,.expand-symbol){color:#303030}
.redesigned-product.ingredient-action-option-4 .ingredient-expand-action .expand-symbol{display:grid;place-items:center;background:#ededed;border-radius:50%;width:25px;height:25px}

/* Fourth ingredient option: the arrow alone is dark, the full row is interactive. */
.redesigned-product.ingredient-action-option-4 .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary{cursor:pointer;align-items:center;padding-right:12px}
.redesigned-product.ingredient-action-option-4 .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{align-self:center;position:static;margin:0 0 0 auto;padding:0;gap:10px;min-height:30px;height:auto;flex-basis:auto;width:auto;min-width:0;background:transparent;border:0}
.redesigned-product.ingredient-action-option-4 .ingredient-expand-action .expand-symbol{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;background:#1f1f1f;border-radius:50%;color:#fff}
.redesigned-product.ingredient-action-option-4 .ingredient-expand-action .expand-symbol:before{display:block;margin:0;position:static;transform:rotate(45deg) translate(-1px,-1px);border-color:#fff}
.redesigned-product.ingredient-action-option-4 .ingredient-role[open] .expand-symbol:before{transform:rotate(225deg) translate(-1px,-1px)}

/* Left-align ingredient counts while retaining a fixed arrow column. */
.redesigned-product.ingredient-action-option-4 .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{display:grid;grid-template-columns:minmax(76px,1fr) 28px;justify-content:start;text-align:left;min-width:114px}
.redesigned-product.ingredient-action-option-4 .ingredient-expand-action .combined-ingredient-count{justify-self:start;text-align:left}

/* Fifth-product comparison restores the shared charcoal ingredient action. */
.redesigned-product.ingredient-action-option-5 .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{background:#1f1f1f;border-color:#1f1f1f;color:#fff}

/* Fifth-product trial matches the description's pale shading. */
.redesigned-product.ingredient-action-option-5 .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{background:#f5f5f5;border-color:#f5f5f5;color:#303030}
.redesigned-product.ingredient-action-option-5 .ingredient-expand-action :is(.combined-ingredient-count,.expand-symbol){color:#303030}
.redesigned-product.ingredient-action-option-5 .ingredient-style-4.edge-tab-version-4.ingredient-controls-left.arrow-option-2 .expand-symbol:before{border-right-color:#303030;border-bottom-color:#303030}

/* One ingredient per line within role panels. */
.redesigned-product .ingredient-role .ingredient-chips>span{display:block;margin:0;padding:2px 0}

/* Left-aligned ingredient counts with a consistent right arrow. */
.redesigned-product.ingredient-action-option-5 .ingredient-style-4.edge-tab-version-4.ingredient-controls-left .ingredient-role summary .ingredient-expand-action{justify-content:space-between;text-align:left;padding-left:12px;padding-right:12px}
.redesigned-product.ingredient-action-option-5 .ingredient-expand-action .combined-ingredient-count{text-align:left;margin-right:auto}

/* Avoid magnifying the Caramel Cashew source beyond its useful detail. */
.redesigned-product.native-resolution-hero .enlarged-card-image .product-photo{max-width:540px;width:90%;margin-inline:auto}

/* More compact buying cards on mobile. */
@media(max-width:999px){
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-offer{padding:9px 10px;gap:7px}
 .redesigned-product .ingredients-buying-layout .price-store .retailer-amazon-logo{width:68px}
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-amount{gap:2px}
 .redesigned-product .ingredients-buying-layout .buying-review-preview{gap:1px 5px;line-height:1.2}
 .redesigned-product .ingredients-buying-layout .price-preview-2 .price-buy-link{padding:7px 15px;min-height:30px;margin-top:3px}
}

.price-offer{cursor:pointer}.price-offer:focus-within{outline:2px solid #555;outline-offset:3px}

/* Align header signup content to the site's right content edge. */
body>header>.new-bars-signup{margin-left:auto;text-align:right}
body>header .signup-fields{justify-content:flex-end}
body>header .new-bars-signup form{margin-left:auto}
@media(max-width:700px){body>header{padding-left:5%;padding-right:5%}}

/* Browse views need no introductory copy. */
#brandBrowser>.brand-intro{display:none}
/* Prevent ingredient filter controls from overlapping in the narrow sidebar. */
.catalogue .filters-panel .filter-group-fields{grid-template-columns:minmax(0,1fr);gap:14px}
.catalogue .filters-panel .filter-group-fields>label{display:block;min-width:0;width:100%;margin:0;line-height:1.4}
.catalogue .filters-panel .filter-group-fields :is(select,input:not([type="checkbox"])){display:block;position:static;width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin:6px 0 0}
.catalogue .filters-panel .filter-group-fields>.check{display:flex;align-items:center;gap:8px}

/* Invert the light surfaces of the catalogue controls. */
.catalogue .grouped-filters>.filters-panel,
.catalogue .sorting-panel,
.catalogue>aside.grouped-filters .sorting-panel{background:#fff}
.catalogue .filters-panel .filter-group,
.catalogue .filters-panel .filter-group>summary,
.catalogue .filters-panel .filter-group-fields,
.catalogue .sorting-panel select{background:#f5f5f5}
.catalogue .filters-panel .filter-group-fields :is(select,input:not([type="checkbox"])){background:#fff}

/* Sorting controls retain the inverted light surfaces above. */

/* Real wrapper and interior photographs on product pages. */
.product-image-gallery{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.product-gallery-frame{width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-gallery-frame[hidden]{display:none}
.redesigned-product .product-gallery-frame .product-photo{max-height:100%;height:100%;min-height:0}
.bar-interior-photo{display:block;width:90%;height:100%;max-height:100%;object-fit:contain}
.product-image-switch{display:flex;gap:4px;flex:0 0 auto;padding:3px;border-radius:7px;background:#f2f2f2}
.product-image-switch button{background:transparent;border:1px solid transparent;padding:6px 10px;border-radius:5px;font-size:11px;color:#555}
.product-image-switch button[aria-pressed="true"]{background:#1f1f1f;color:#fff}
/* Keep both photo choices inside the same hero area. */
.enlarged-card-image:has(.product-image-gallery){position:relative;min-height:195px!important}
.enlarged-card-image>.product-image-gallery{position:absolute;inset:12px 6px;height:auto;width:auto}
.product-gallery-frame{position:relative}
.product-gallery-frame>.bar-interior-photo,.redesigned-product .enlarged-card-image .product-gallery-frame>.product-photo{position:absolute;inset:0;width:90%;height:100%;max-height:100%;object-fit:contain;margin:auto}
@media(max-width:700px){.enlarged-card-image:has(.product-image-gallery){min-height:155px!important}.enlarged-card-image>.product-image-gallery{inset:8px 4px}}
.product-gallery-frame{container-type:size}
.bar-interior-crop{position:relative;overflow:hidden;flex:none;width:min(90cqw,calc(100cqh * var(--interior-ratio)));aspect-ratio:var(--interior-ratio)}
.bar-interior-crop>.bar-interior-photo{position:absolute;width:var(--photo-width);height:var(--photo-height);max-width:none;max-height:none;left:var(--photo-left);top:var(--photo-top);object-fit:fill}
.redesigned-product.background-option-4 .enlarged-card-header.full-width-band-preview:has(.product-image-gallery){grid-template-rows:auto auto}
.redesigned-product.background-option-4 .header-refinement-3.full-width-band-preview .enlarged-card-image:has(.product-image-gallery){height:220px}
@media(max-width:700px){.redesigned-product.background-option-4 .header-refinement-3.full-width-band-preview .enlarged-card-image:has(.product-image-gallery){height:180px}}
/* A shared spacing rhythm throughout the floating product card. */
.redesigned-product.background-option-4{--section-space:24px;--item-space:12px;display:flex;flex-direction:column;gap:var(--section-space)}
.redesigned-product.background-option-4>:is(.enlarged-card-header,.complete-nutrition,.ingredients-related-layout,.product-detail-columns){margin:0}
.redesigned-product.background-option-4 .ingredients-related-layout{display:flex;flex-direction:column;gap:var(--section-space)}
.redesigned-product.background-option-4 .ingredients-buying-layout{gap:var(--section-space);margin:0}
.redesigned-product.background-option-4 .ingredients-buying-layout>:is(.ingredients-card,.price-preview){margin:0;padding-block:0}
.redesigned-product.background-option-4 .ingredients-card .ingredient-alternative{margin-block:0;padding-block:0}
.redesigned-product.background-option-4 .ingredient-view-tabs{margin:0 0 var(--section-space)}
.redesigned-product.background-option-4 .ingredient-group-list{display:flex;flex-direction:column;gap:var(--item-space);margin:0}
.redesigned-product.background-option-4 .ingredient-group-list>.ingredient-role{margin:0}
.redesigned-product.background-option-4 .related-brand-stack{gap:var(--section-space);margin:0}
.redesigned-product.background-option-4 .recommendation-layout-2 .related-brand>.related-heading{padding-top:0;padding-bottom:var(--item-space)}
.redesigned-product.background-option-4 .recommendation-layout-2 .related-brand>.related-brand-link{margin-top:0;margin-bottom:var(--item-space)}
.redesigned-product.background-option-4 .product-soft-section{margin:0;padding-block:0}
@media(max-width:700px){.redesigned-product.background-option-4{--section-space:16px;--item-space:10px}}
/* Give the floating page and its content more breathing room. */
.redesigned-product.background-option-4{--section-space:36px;--item-space:16px}
.redesigned-product.background-option-4 .enlarged-card-header.full-width-band-preview{row-gap:20px}
.redesigned-product.background-option-4 .enlarged-card-body{padding-block:28px}
.redesigned-product.background-option-4 .enlarged-card-body .product-description{margin-block:18px;line-height:1.7}
.redesigned-product.background-option-4 .enlarged-card-body .brand-tag{display:block;margin-bottom:12px}
.redesigned-product.background-option-4 .ingredient-group-list>.ingredient-role>summary{padding-block:18px}
.redesigned-product.background-option-4 .ingredient-role .ingredient-chips{padding-block:16px;line-height:1.7}
.redesigned-product.background-option-4 .ingredient-role .ingredient-chips>span{padding-block:5px}
@media(max-width:700px){.redesigned-product.background-option-4{--section-space:26px;--item-space:14px}.redesigned-product.background-option-4 .enlarged-card-header.full-width-band-preview{row-gap:16px}.redesigned-product.background-option-4 .enlarged-card-body{padding-block:22px}.redesigned-product.background-option-4 .ingredient-group-list>.ingredient-role>summary{padding-block:16px}}
.redesigned-product.background-option-4 .complete-panel-grid{gap:12px}
.redesigned-product.background-option-4 .price-offers{gap:16px}
.redesigned-product.background-option-4 .related-bars{gap:20px}
@media(max-width:700px){.redesigned-product.background-option-4 .complete-panel-grid{gap:10px}.redesigned-product.background-option-4 .price-offers{gap:12px}}
/* Joined ingredient widget, selected design 1, shared by every product. */
.redesigned-product.background-option-4 .ingredients-widget-joined{border:1px solid #d8d8d8!important;border-radius:16px!important;overflow:hidden!important;background:#fff!important;padding:0!important}
.ingredients-widget-joined .ingredients-widget-header{display:block!important;padding:24px!important;background:#fff!important;border-bottom:1px solid #ddd!important}
.ingredients-widget-joined .ingredients-widget-header h2{display:block!important;font-size:20px!important;line-height:1.3!important;letter-spacing:0!important;margin:0 0 20px!important;color:#242424!important}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-view-tabs{margin:0!important;padding:4px!important;gap:4px!important;border:0!important;border-radius:9px!important;background:#efefef!important}
.ingredients-widget-joined .ingredient-view-tabs button{padding:12px 14px!important;border-radius:6px!important;font-size:14px!important;line-height:1.3!important}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-alternative{border:0!important;padding:0!important;margin:0!important;width:100%!important;max-width:none!important}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-group-list{display:block!important;margin:0!important;gap:0!important}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-group-list>.ingredient-role{border:0!important;border-radius:0!important;background:#fff!important;margin:0!important;padding:0 24px!important;overflow:visible!important}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-group-list>.ingredient-role+ .ingredient-role{border-top:1px solid #e5e5e5!important}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-role>summary{display:flex!important;align-items:center!important;gap:14px!important;min-height:0!important;padding:24px 0!important;margin:0!important;background:#fff!important;border:0!important;cursor:pointer!important}
.redesigned-product .ingredients-widget-joined .ingredient-heading-label{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:7px!important;flex:1!important;min-width:0!important;padding:0!important;margin:0!important}
.redesigned-product .ingredients-widget-joined .ingredient-title-row{font-size:16px!important;line-height:1.3!important;margin:0!important}
.redesigned-product .ingredients-widget-joined .inline-group-description{display:block!important;font-size:13px!important;line-height:1.5!important;font-weight:400!important;color:#777!important;margin:0!important;padding:0!important}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-role summary .ingredient-expand-action{display:flex!important;align-items:center!important;align-self:center!important;justify-content:flex-end!important;gap:18px!important;position:static!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;color:#303030!important}
.redesigned-product .ingredients-widget-joined .combined-ingredient-count{font-size:12px!important;line-height:1.4!important;white-space:nowrap!important;font-weight:400!important;margin:0!important;color:#555!important}
.redesigned-product .ingredients-widget-joined .expand-symbol{flex:0 0 12px!important;width:12px!important;height:12px!important;background:transparent!important;margin:0!important;padding:0!important}
.redesigned-product .ingredients-widget-joined .ingredient-chips{padding:0 0 24px!important;margin:0!important;font-size:14px!important;line-height:1.7!important;background:#fff!important;border:0!important}
.ingredients-widget-joined [data-ingredient-pane="full"]{padding:24px!important;font-size:14px!important;line-height:1.8!important}
.ingredients-widget-joined [data-ingredient-pane="full"] p:first-child{margin-top:0!important}
@media(max-width:700px){.ingredients-widget-joined .ingredients-widget-header{padding:20px!important}.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-group-list>.ingredient-role{padding-inline:20px!important}.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-role summary .ingredient-expand-action{gap:12px!important}.redesigned-product .ingredients-widget-joined .combined-ingredient-count{font-size:11px!important}.ingredients-widget-joined [data-ingredient-pane="full"]{padding:20px!important}}
.redesigned-product .ingredients-widget-joined .ingredient-heading-label>:is(.ingredient-title-row,.inline-group-description){flex:none!important;width:auto!important;height:auto!important;min-height:0!important}
.redesigned-product .ingredients-widget-joined .ingredient-role[open]>summary{background:#fff!important}
/* Slightly quieter nutrition figures on catalogue and recommendation cards. */
.card .single-row-panels .nutrient>strong{transform:scale(.88);transform-origin:center}
.brand-page-logo{display:flex;align-items:center;justify-content:center;min-height:110px;padding:20px;margin:0 0 30px}
.brand-page-logo[hidden]{display:none}
.brand-page-logo .brand-logo{display:block;width:180px;height:72px;max-width:65%;max-height:80px}
.brand-page-logo .brand-logo-fallback{font-size:30px;font-weight:700}
@media(max-width:700px){.brand-page-logo{min-height:90px;padding:16px;margin-bottom:24px}.brand-page-logo .brand-logo{width:160px;height:60px}}
/* Inverted sorting surfaces: white panel, pale grey selection fields. */
.catalogue .sorting-panel .sort select{background-color:#f5f5f5!important}
/* Borderless control sections aligned to the catalogue content edges. */
.catalogue .grouped-filters>.filters-panel,
.catalogue .sorting-panel,
.catalogue>aside.grouped-filters .sorting-panel{border:0;border-radius:0;padding:0;box-shadow:none;width:100%;max-width:none}
.catalogue .filters-panel .filter-group{width:100%;max-width:none;margin-inline:0}
.catalogue .sorting-panel .sort-widgets{width:100%;max-width:none;margin-inline:0}
.catalogue .sorting-panel .sort{min-width:0;width:100%;font-weight:600}
.catalogue .sorting-panel .sort select{font-weight:600}
/* Selected browse heading sits below controls and before the brand logo/products. */
.catalogue #brandSelection{width:100%;max-width:none;margin:24px 0;display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.catalogue #brandSelection[hidden]{display:none}
.catalogue #brandSelection+#brandPageLogo{margin-top:0}
@media(max-width:700px){.catalogue #brandSelection{margin:20px 0;gap:12px}}
/* Compact buying boxes added beneath the existing small card content. */
.card-buying{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 12px 12px;container-type:inline-size}
.card-buying-offer{display:flex;flex-direction:column;gap:5px;min-width:0;padding:10px;background:#f5f5f5;border:1px solid #e3e3e3;border-radius:8px;text-decoration:none;color:#242424;cursor:pointer}
.card-buying-store{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.3;font-weight:600}
.card-buying-unit{display:flex;align-items:baseline;gap:3px;white-space:nowrap;line-height:1.2}
.card-buying-unit>strong{font-size:18px;font-weight:700;letter-spacing:-.3px}
.card-buying-unit>small{font-size:10px;color:#777}
.card-buying-box{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 3px;font-size:10px;line-height:1.4;color:#666;white-space:nowrap}
.card-buying-box>small{font-size:8px}
.card-buying-review{display:grid;grid-template-columns:max-content max-content;justify-content:start;align-items:center;gap:3px 5px;padding-top:2px;line-height:1.3}
.card-buying-stars{position:relative;display:block;font-size:12px;line-height:1;letter-spacing:0;white-space:nowrap;color:#d8c49e;width:max-content}
.card-buying-stars:after{content:'★★★★★';position:absolute;inset:0 auto 0 0;width:var(--star-fill);overflow:hidden;color:#b98825}
.card-buying-review>b{font-size:10px;font-weight:600}
.card-buying-review>small{grid-column:1/-1;font-size:9px;color:#777}
.card-buying-button{display:flex;align-items:center;justify-content:center;margin-top:3px;padding:8px 4px;background:#ffd814;color:#191919;font-size:11px;line-height:1.2;font-weight:700;border-radius:5px;white-space:nowrap}
.card-buying-offer:hover .card-buying-button{background:#f2c900}
.card-buying-offer:focus-visible{outline:2px solid #333;outline-offset:2px}
@container (max-width:260px){.card-buying-offer{padding:7px;gap:4px}.card-buying-store{font-size:9px}.card-buying-unit>strong{font-size:14px}.card-buying-unit>small{font-size:8px}.card-buying-box{font-size:9px}.card-buying-box>small{font-size:7px}.card-buying-stars{font-size:10px}.card-buying-review{gap:3px}.card-buying-review>b{font-size:9px}.card-buying-review>small{font-size:8px}.card-buying-button{font-size:10px;padding:7px 3px}}
@container (max-width:190px){.card-buying-offer{padding:5px}.card-buying-stars{font-size:8px}.card-buying-review>b{font-size:8px}.card-buying-unit{gap:2px}.card-buying-unit>strong{font-size:12px}.card-buying-unit>small{font-size:7px}.card-buying-review>small{font-size:7px}.card-buying-button{font-size:9px}}
.card>.card-buying{grid-row:6;grid-column:1/-1}
:is(#grid,.recommendation-grid)>.card:has(>.card-buying){grid-row:span 6}
:is(#grid,.recommendation-grid).grid>.card.stripped-option-2 .card-type-row{border-bottom:0}
@media(max-width:480px){
 .card-buying{grid-template-columns:1fr;padding:8px;gap:6px}
 .card-buying-offer{padding:8px;gap:4px}
 .card-buying-unit>strong{font-size:14px}
 .card-buying-unit>small{font-size:8px}
 .card-buying-stars{font-size:11px}
 .card-buying-review>b{font-size:9px}
 .card-buying-review>small{font-size:8px}
 .card-buying-button{font-size:10px}
}
/* Floating offers share the small-card component, without stretched rows. */
.redesigned-product.background-option-4 .ingredients-buying-layout>.compact-floating-buying{align-self:start;display:block;position:static;margin:0;padding:0;min-width:0;width:100%}
.compact-floating-buying>.card-buying{padding:0;gap:12px;z-index:auto;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.compact-floating-buying .card-buying-offer{height:auto;min-height:0}
@media(min-width:900px){
 .redesigned-product.background-option-4 .ingredients-buying-layout{grid-template-columns:minmax(0,1fr) 220px;align-items:start}
 .compact-floating-buying>.card-buying{grid-template-columns:minmax(0,1fr)}
 .redesigned-product.background-option-4 .ingredients-buying-layout>.ingredients-widget-joined{width:100%;max-width:none}
}
@media(max-width:899px){
 .redesigned-product.background-option-4 .ingredients-buying-layout{display:flex;flex-direction:column;gap:var(--section-space)}
 .redesigned-product.background-option-4 .ingredients-buying-layout>.compact-floating-buying{order:-1}
 .redesigned-product.background-option-4 .ingredients-buying-layout>.ingredients-widget-joined{width:100%;max-width:none}
 .compact-floating-buying>.card-buying{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Let the ingredient/buying row use the whole dialog, with recommendations below. */
.redesigned-product.background-option-4 .ingredients-related-layout.has-related-brand{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%}
.redesigned-product.background-option-4 .ingredients-related-layout>.ingredients-buying-layout,
.redesigned-product.background-option-4 .ingredients-related-layout>.related-brand-stack{width:100%;min-width:0;max-width:none;flex:none;grid-column:1/-1}
/* Compact spacing inside the joined ingredient widget. */
.redesigned-product .ingredients-widget-joined .ingredients-widget-header{padding:12px 16px!important}
.redesigned-product .ingredients-widget-joined .ingredients-widget-header h2{margin:0 0 10px!important}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-view-tabs{padding:3px!important;gap:3px!important}
.redesigned-product .ingredients-widget-joined .ingredient-view-tabs button{padding:8px 10px!important;min-height:34px!important}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-group-list>.ingredient-role{padding-inline:16px!important}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-role>summary{padding:11px 0!important;gap:12px!important;min-height:44px!important}
.redesigned-product .ingredients-widget-joined .ingredient-heading-label{gap:3px!important}
.redesigned-product .ingredients-widget-joined .inline-group-description{line-height:1.4!important}
.redesigned-product .ingredients-widget-joined .ingredient-chips{padding:0 0 12px!important;line-height:1.5!important}
.redesigned-product .ingredients-widget-joined .ingredient-chips>span{padding-block:3px}
.redesigned-product .ingredients-widget-joined [data-ingredient-pane="full"]{padding:12px 16px!important}
@media(max-width:700px){.redesigned-product .ingredients-widget-joined .ingredients-widget-header{padding:10px 12px!important}.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-group-list>.ingredient-role{padding-inline:12px!important}.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-role>summary{padding-block:10px!important}.redesigned-product .ingredients-widget-joined [data-ingredient-pane="full"]{padding:10px 12px!important}}
/* Independent buying boxes with the same dark text as catalogue cards. */
.redesigned-product .compact-floating-buying{border:0;border-radius:0;background:transparent;box-shadow:none}
.redesigned-product .compact-floating-buying .card-buying-offer{color:#242424}
.redesigned-product .card-buying .card-buying-offer{color:#242424}
/* Keep the sticky close control above every product-card stacking layer. */
#modal>#modalContent{position:relative;z-index:0}
#modal>#close{z-index:10;background:#fff;opacity:1;isolation:isolate}

/* Product provenance: one readable area for data, image credits and design samples. */
.redesigned-product .product-dietary-facts{display:grid;gap:10px;margin:0 0 24px}
.redesigned-product .product-dietary-facts p{margin:0;color:#242424;line-height:1.55}
.redesigned-product .product-data-sources{border:1px solid #dedede;border-radius:14px;background:#fff;overflow:hidden;color:#242424}
.redesigned-product .data-sources-heading{padding:20px 22px;background:#f5f5f5}
.redesigned-product .data-sources-heading h2{font-size:23px;margin:0 0 5px;color:#242424}
.redesigned-product .data-sources-heading p{margin:0;font-size:14px;color:#606060}
.redesigned-product .data-source-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;padding:16px 22px;border-top:1px solid #e7e7e7;align-items:start}
.redesigned-product .data-source-label h3{font-size:15px;line-height:1.4;margin:0 0 4px;color:#242424}
.redesigned-product .data-source-label p{font-size:13px;line-height:1.5;margin:0;color:#626262}
.redesigned-product .data-source-evidence{display:flex;align-items:flex-start;flex-direction:column;gap:5px;font-size:13px;min-width:0}
.redesigned-product .data-source-evidence a{color:#242424;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;line-height:1.5}
.redesigned-product .data-source-evidence small{color:#666;font-size:12px;line-height:1.5}
.redesigned-product .source-origin,.redesigned-product .source-sample{font-size:12px;color:#333;background:#f0f0f0;border-radius:5px;padding:4px 8px}
.redesigned-product .source-missing{color:#666}
.redesigned-product .data-source-notes{border-top:1px solid #e7e7e7;padding:15px 22px;font-size:13px;line-height:1.6}
.redesigned-product .data-source-notes summary{cursor:pointer;font-weight:600;color:#333}
.redesigned-product .data-source-notes p{color:#626262;font-size:13px;margin:10px 0 0}
.redesigned-product .data-sources-footer{padding:16px 22px;background:#f8f8f8;border-top:1px solid #e7e7e7}
.redesigned-product .data-sources-footer p{font-size:12px;color:#626262;line-height:1.6;margin:0 0 7px}
.redesigned-product .data-sources-footer p:last-child{margin:0}
@media(max-width:600px){.redesigned-product .data-source-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 16px}.redesigned-product .data-sources-heading,.redesigned-product .data-source-notes,.redesigned-product .data-sources-footer{padding:16px}.redesigned-product .data-source-evidence{gap:4px}}

/* Compact source list with readable evidence and check dates. */
.redesigned-product .data-sources-heading{padding:12px 16px}
.redesigned-product .data-sources-heading h2{font-size:19px;margin:0}
.redesigned-product .data-sources-heading>p{display:none}
.redesigned-product .data-source-row{padding:9px 16px;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center}
.redesigned-product .data-source-label h3{font-size:13px;margin:0;line-height:1.4}
.redesigned-product .data-source-label>p{display:none}
.redesigned-product .data-source-evidence{flex-direction:row;flex-wrap:wrap;align-items:center;gap:3px 10px;font-size:12px}
.redesigned-product .data-source-evidence small{font-size:11px}
.redesigned-product .source-origin,.redesigned-product .source-sample{padding:2px 6px;font-size:11px}
.redesigned-product .data-source-notes{padding:9px 16px;font-size:12px}
.redesigned-product .data-sources-footer{padding:10px 16px}
.redesigned-product .data-sources-footer p{font-size:11px;line-height:1.5;margin-bottom:4px}
.redesigned-product .product-dietary-facts{gap:6px;margin-bottom:14px}
@media(max-width:600px){.redesigned-product .data-source-row{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:10px;padding:9px 12px}.redesigned-product .data-source-evidence{gap:2px 8px}.redesigned-product .data-sources-heading,.redesigned-product .data-source-notes,.redesigned-product .data-sources-footer{padding:10px 12px}}
.redesigned-product .data-sources-heading{padding:8px 12px}
.redesigned-product .data-sources-heading h2{font-size:17px}
.redesigned-product .data-source-row{padding:5px 12px;gap:8px}
.redesigned-product .data-source-label h3{font-size:12px;line-height:1.35}
.redesigned-product .data-source-evidence{font-size:11px;gap:1px 8px}
.redesigned-product .data-source-evidence small{font-size:11px}
.redesigned-product .data-source-notes,.redesigned-product .data-source-about{padding:6px 12px;font-size:11px;line-height:1.4;border-top:1px solid #e7e7e7}
.redesigned-product .data-source-about summary{cursor:pointer;font-weight:600;color:#333}
.redesigned-product .data-source-about .data-sources-footer{padding:8px 0 0;border:0;background:transparent}
@media(max-width:600px){.redesigned-product .data-source-row{padding:6px 10px;gap:6px}.redesigned-product .data-sources-heading,.redesigned-product .data-source-notes,.redesigned-product .data-source-about{padding:7px 10px}}

/* Dietary declarations use the same quiet, joined panel as other product facts. */
.redesigned-product .product-dietary-facts{display:block;border:1px solid #dedede;border-radius:12px;background:#f5f5f5;overflow:hidden;margin:0 0 14px}
.redesigned-product .dietary-fact-row{display:grid;grid-template-columns:90px minmax(0,1fr);gap:14px;align-items:baseline;padding:12px 16px}
.redesigned-product .dietary-fact-row+.dietary-fact-row{border-top:1px solid #dedede}
.redesigned-product .dietary-fact-label{font-size:14px;font-weight:600;color:#242424;line-height:1.5}
.redesigned-product .dietary-fact-value{font-size:14px;font-weight:400;color:#333;line-height:1.5;min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){.redesigned-product .dietary-fact-row{grid-template-columns:70px minmax(0,1fr);gap:10px;padding:10px 12px}.redesigned-product .dietary-fact-label,.redesigned-product .dietary-fact-value{font-size:13px}}

/* Dietary tiles echo the rounded, two-tone nutrition panels. */
.redesigned-product .product-dietary-facts{display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,3fr);gap:10px;border:0;border-radius:0;background:transparent;overflow:visible}
.redesigned-product .dietary-fact-row{display:flex;flex-direction:column;gap:0;align-items:stretch;padding:0;border:0!important;border-radius:12px;background:#ededed;overflow:hidden;min-width:0;text-align:center}
.redesigned-product .dietary-fact-label{display:block;padding:8px 12px;font-size:13px;font-weight:400;line-height:1.4;color:#666}
.redesigned-product .dietary-fact-value{display:flex;align-items:center;justify-content:center;flex:1;padding:11px 14px;background:#f6f6f6;border-top:1px solid #fff;font-size:14px;line-height:1.5;color:#242424}
.redesigned-product .dietary-fact-row:first-child .dietary-fact-value{font-size:24px;line-height:1.3;font-weight:400}
@media(max-width:600px){.redesigned-product .product-dietary-facts{grid-template-columns:85px minmax(0,1fr);gap:8px}.redesigned-product .dietary-fact-label{font-size:12px;padding:7px 8px}.redesigned-product .dietary-fact-value{font-size:13px;padding:9px 10px}.redesigned-product .dietary-fact-row:first-child .dietary-fact-value{font-size:22px}}

/* One evenly sized tile per declared allergen, alongside vegan status. */
.redesigned-product .dietary-tiles-section{margin-bottom:16px}
.redesigned-product .dietary-tiles-section .product-dietary-facts{grid-template-columns:repeat(auto-fit,minmax(95px,1fr));gap:8px;margin:0}
.redesigned-product .dietary-tiles-section .dietary-fact-label{padding:8px 5px;min-height:35px;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1.3}
.redesigned-product .dietary-tiles-section .dietary-fact-value,.redesigned-product .dietary-tiles-section .dietary-fact-row:first-child .dietary-fact-value{padding:12px 5px;min-height:47px;font-size:14px;font-weight:400;line-height:1.35}
.redesigned-product .allergen-declaration{font-size:11px;line-height:1.5;margin-top:8px;color:#666}
.redesigned-product .allergen-declaration summary{cursor:pointer;display:list-item}
.redesigned-product .allergen-declaration p{font-size:12px;line-height:1.5;margin:7px 0 0;color:#555}
@media(max-width:600px){.redesigned-product .dietary-tiles-section .product-dietary-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.redesigned-product .dietary-tiles-section .dietary-fact-label{font-size:11px}.redesigned-product .dietary-tiles-section .dietary-fact-value,.redesigned-product .dietary-tiles-section .dietary-fact-row:first-child .dietary-fact-value{font-size:13px}}

/* Group allergen declarations by presence while retaining the macro tile style. */
.redesigned-product .dietary-tiles-section .product-dietary-facts{grid-template-columns:minmax(85px,.65fr) repeat(2,minmax(0,1.65fr))}
.redesigned-product .dietary-tiles-section .dietary-fact-value{overflow-wrap:anywhere;padding:10px 12px}
@media(max-width:600px){.redesigned-product .dietary-tiles-section .product-dietary-facts{grid-template-columns:70px repeat(2,minmax(0,1fr))}.redesigned-product .dietary-tiles-section .dietary-fact-value{padding:9px 7px}}

/* Compact dietary tiles: retain the split surface with minimal empty space. */
.redesigned-product .dietary-tiles-section .product-dietary-facts{gap:6px}
.redesigned-product .dietary-tiles-section .dietary-fact-row{border-radius:9px}
.redesigned-product .dietary-tiles-section .dietary-fact-label{padding:4px 7px;min-height:0;font-size:12px;line-height:1.3}
.redesigned-product .dietary-tiles-section .dietary-fact-value,.redesigned-product .dietary-tiles-section .dietary-fact-row:first-child .dietary-fact-value{padding:6px 9px;min-height:0;font-size:13px;line-height:1.35}
.redesigned-product .dietary-tiles-section{margin-bottom:10px}
.redesigned-product .allergen-declaration{margin-top:5px}
@media(max-width:600px){.redesigned-product .dietary-tiles-section .product-dietary-facts{gap:5px}.redesigned-product .dietary-tiles-section .dietary-fact-label{padding:4px 5px}.redesigned-product .dietary-tiles-section .dietary-fact-value,.redesigned-product .dietary-tiles-section .dietary-fact-row:first-child .dietary-fact-value{padding:6px;font-size:12px}}

/* Dietary tiles size to their content rather than spanning the panel. */
.redesigned-product .dietary-tiles-section .product-dietary-facts{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;gap:6px}
.redesigned-product .dietary-tiles-section .dietary-fact-row{flex:0 1 auto;width:max-content;max-width:100%;min-width:70px}
.redesigned-product .dietary-tiles-section .dietary-fact-label{padding:4px 12px}
.redesigned-product .dietary-tiles-section .dietary-fact-value,.redesigned-product .dietary-tiles-section .dietary-fact-row:first-child .dietary-fact-value{padding:6px 12px;overflow-wrap:normal}

/* Source panel fits its text, with shared content-sized columns. */
.redesigned-product .product-data-sources{width:fit-content;max-width:100%}
.redesigned-product .data-source-list{display:grid;grid-template-columns:max-content minmax(0,max-content)}
.redesigned-product .data-source-row{grid-column:1/-1;grid-template-columns:subgrid;column-gap:22px}
.redesigned-product .data-source-evidence{min-width:0}
.redesigned-product .data-source-notes p,.redesigned-product .data-source-about .data-sources-footer{max-width:65ch}
@media(max-width:600px){.redesigned-product .data-source-list{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.redesigned-product .data-source-row{column-gap:12px}}

.redesigned-product .data-source-notes>summary,.redesigned-product .data-source-about>summary{font-size:12px;line-height:1.35;font-weight:600}

/* Monochrome dietary categories: content-sized tiles with quiet group dividers. */
.redesigned-product .dietary-tiles-section .product-dietary-facts{gap:14px}
.redesigned-product .dietary-category-group{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;max-width:100%;min-width:0}
.redesigned-product .dietary-category-group+.dietary-category-group{border-left:1px solid #c8c8c8;padding-left:14px}
@media(max-width:600px){.redesigned-product .dietary-tiles-section .product-dietary-facts{gap:10px}.redesigned-product .dietary-category-group{gap:5px}.redesigned-product .dietary-category-group+.dietary-category-group{padding-left:10px}}

/* Desktop nutrition keeps compact square tiles instead of filling the rail. */
@media(min-width:701px){
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-grid{width:fit-content;max-width:100%;grid-template-columns:repeat(8,minmax(0,100px));justify-content:start;margin-inline:0}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel{aspect-ratio:1;min-height:100px;width:100%;display:flex;flex-direction:column}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer{flex:1;justify-content:center}
}

/* Ingredient counts share a left edge, with chevrons aligned at the right. */
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-role summary .ingredient-expand-action{display:grid!important;grid-template-columns:minmax(0,1fr) 16px!important;justify-content:start!important;width:140px!important;flex:0 0 140px!important;gap:12px!important;text-align:left!important}
.redesigned-product .ingredients-widget-joined .ingredient-expand-action .combined-ingredient-count{justify-self:start!important;text-align:left!important}
@media(max-width:700px){.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-role summary .ingredient-expand-action{width:120px!important;flex-basis:120px!important;gap:10px!important}}

/* The ingredient widget and eight desktop macro tiles share one width. */
@media(min-width:701px){
 .redesigned-product.background-option-4{--macro-rail-width:842px}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-grid{width:min(100%,var(--macro-rail-width));gap:6px}
 .redesigned-product.background-option-4 .ingredients-buying-layout>.ingredients-widget-joined{width:min(100%,var(--macro-rail-width));max-width:var(--macro-rail-width);align-self:start}
}
@media(min-width:900px){
 .redesigned-product.background-option-4 .ingredients-buying-layout{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start}
 .redesigned-product.background-option-4 .ingredients-buying-layout>.ingredients-widget-joined{flex:0 0 min(100%,var(--macro-rail-width))}
 .redesigned-product.background-option-4 .ingredients-buying-layout>.compact-floating-buying{flex:0 0 220px;width:220px;max-width:100%}
}

/* Dietary declarations follow the ingredient widget, before related products. */
.redesigned-product .ingredient-content-stack{display:flex;flex-direction:column;align-items:stretch;gap:14px;width:100%;min-width:0}
.redesigned-product .ingredient-content-stack>.ingredients-widget-joined{width:100%;margin:0!important}
.redesigned-product .ingredient-content-stack>.dietary-tiles-section{margin:0}
@media(min-width:701px){.redesigned-product.background-option-4 .ingredients-buying-layout>.ingredient-content-stack{width:min(100%,var(--macro-rail-width));max-width:var(--macro-rail-width);align-self:start}}
@media(min-width:900px){.redesigned-product.background-option-4 .ingredients-buying-layout>.ingredient-content-stack{flex:0 0 min(100%,var(--macro-rail-width))}}

/* Visible full-width dividers between ingredient roles. */
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-group-list>.ingredient-role+.ingredient-role{border-top:1px solid #e5e5e5!important}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredients-widget-header{border-bottom:1px solid #ddd!important}

/* Larger desktop offers begin beside the macro row and continue by ingredients. */
.product-primary-layout{min-width:0}
@media(min-width:900px){
 .redesigned-product.background-option-4 .product-primary-layout{display:grid;grid-template-columns:minmax(0,842px) minmax(280px,340px);gap:24px;align-items:start;width:100%;justify-content:start}
 .redesigned-product.background-option-4 .product-primary-layout>.complete-nutrition{grid-column:1;grid-row:1;margin:0!important}
 .redesigned-product.background-option-4 .product-primary-layout>.ingredients-related-layout,.redesigned-product.background-option-4 .product-primary-layout>.ingredients-related-layout.has-related-brand,.redesigned-product.background-option-4 .product-primary-layout .ingredients-buying-layout{display:contents!important}
 .redesigned-product.background-option-4 .product-primary-layout .ingredient-content-stack{grid-column:1;grid-row:2;width:100%;max-width:842px}
 .redesigned-product.background-option-4 .product-primary-layout .ingredients-buying-layout>.compact-floating-buying{grid-column:2;grid-row:1/span 2;width:100%;max-width:none;margin:0!important;align-self:start}
 .redesigned-product.background-option-4 .product-primary-layout .related-brand-stack{grid-column:1/-1;grid-row:3;width:100%;margin:0}
 .product-primary-layout .compact-floating-buying .card-buying{gap:14px}
 .product-primary-layout .compact-floating-buying .card-buying-offer{padding:16px}
 .product-primary-layout .compact-floating-buying .card-buying-store{font-size:16px}
 .product-primary-layout .compact-floating-buying .card-buying-unit>strong{font-size:27px}
 .product-primary-layout .compact-floating-buying .card-buying-unit>small,.product-primary-layout .compact-floating-buying .card-buying-box{font-size:13px}
 .product-primary-layout .compact-floating-buying .card-buying-stars{font-size:20px}
 .product-primary-layout .compact-floating-buying .card-buying-review>b{font-size:15px}
 .product-primary-layout .compact-floating-buying .card-buying-review>small{font-size:12px}
 .product-primary-layout .compact-floating-buying .card-buying-button{font-size:16px;padding:11px 12px}
}

/* Desktop buying offers stay compact and square. */
@media(min-width:900px){
 .redesigned-product.background-option-4 .product-primary-layout{grid-template-columns:minmax(0,842px) 260px}
 .product-primary-layout .compact-floating-buying .card-buying-offer{aspect-ratio:1;min-height:0;box-sizing:border-box;padding:14px;display:flex;flex-direction:column;justify-content:space-between}
 .product-primary-layout .compact-floating-buying .card-buying-button{margin-top:8px}
}

@media(min-width:900px){
 .redesigned-product.background-option-4 .product-primary-layout{grid-template-columns:minmax(0,842px) var(--buying-square-size,250px)}
 .product-primary-layout .compact-floating-buying .card-buying{gap:14px}
}

/* Hero and primary desktop content share the buying column's right edge. */
@media(min-width:900px){
 .redesigned-product.background-option-4{--primary-content-width:calc(842px + 24px + var(--buying-square-size,250px))}
 .redesigned-product.background-option-4>.enlarged-card-header{width:min(100%,var(--primary-content-width))!important;max-width:var(--primary-content-width)!important;margin-left:0!important;margin-right:auto!important}
 .redesigned-product.background-option-4 .product-primary-layout{width:min(100%,var(--primary-content-width))}
 .redesigned-product.background-option-4 .enlarged-card-header .enlarged-card-image{width:100%;display:flex;align-items:center;justify-content:center}
 .redesigned-product.background-option-4 .enlarged-card-header .product-image-gallery{margin-inline:auto}
}

@media(min-width:900px){
 #modal:has(.product-primary-layout){width:var(--floating-panel-width,1200px);max-width:calc(100vw - 48px);padding-inline:35px}
}
@media(min-width:900px){#modal:has(.product-primary-layout){scrollbar-gutter:stable both-edges}}

/* Three equal ingredient views, with readable wrapping on narrow screens. */
.redesigned-product .ingredients-widget-joined .ingredient-view-tabs button{min-width:0;white-space:normal}
@media(max-width:600px){.redesigned-product .ingredients-widget-joined .ingredient-view-tabs button{font-size:12px!important;padding:8px 5px!important}}

/* Folder-style navigation makes the three content views distinct. */
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredients-widget-header{padding:12px 12px 0!important;background:#fff!important;border-bottom:1px solid #d8d8d8!important}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-view-tabs{display:flex!important;gap:8px!important;background:transparent!important;padding:0!important;border-radius:0!important;overflow:visible}
.redesigned-product .ingredients-widget-joined .ingredient-view-tabs button{position:relative;flex:1;min-width:0;min-height:43px!important;padding:10px 12px!important;margin:0 0 -1px!important;border:1px solid #d5d5d5!important;border-radius:9px 9px 0 0!important;background:#f0f0f0!important;color:#555!important;box-shadow:none!important;font-weight:400!important;line-height:1.3!important}
.redesigned-product .ingredients-widget-joined .ingredient-view-tabs button:hover{background:#e8e8e8!important;color:#242424!important}
.redesigned-product .ingredients-widget-joined .ingredient-view-tabs button[aria-selected=true]{background:#fff!important;color:#242424!important;border-bottom-color:#fff!important;box-shadow:inset 0 2px 0 #555!important;font-weight:600!important;z-index:1}
.redesigned-product .ingredients-widget-joined .ingredient-view-tabs button:focus-visible{outline:2px solid #555;outline-offset:2px;z-index:2}
@media(max-width:600px){.redesigned-product.background-option-4 .ingredients-widget-joined .ingredients-widget-header{padding:9px 8px 0!important}.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-view-tabs{gap:5px!important}.redesigned-product .ingredients-widget-joined .ingredient-view-tabs button{padding:8px 5px!important;font-size:12px!important;min-height:49px!important}}

/* Folder tabs form the top edge; remove the enclosing frame above them. */
.redesigned-product.background-option-4 .ingredients-widget-joined{border-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important;overflow:visible!important}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredients-widget-header{padding-top:0!important;margin-inline:-1px;background:#fff!important}

/* Align folder edges with the panel frame for a continuous outline. */
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredients-widget-header{padding:0!important;margin-inline:-1px!important}
.redesigned-product .ingredients-widget-joined .ingredient-view-tabs button{border-color:#d8d8d8!important}
.redesigned-product .ingredients-widget-joined .ingredient-view-tabs button[aria-selected=true]{border-bottom-color:#fff!important}

/* Every ingredient view closes directly after its content. */
.redesigned-product.background-option-4 .ingredients-widget-joined{min-height:0!important;height:auto!important;align-self:start}

/* Keep the tab bar directly below macros when a shorter pane is selected. */
@media(min-width:900px){.redesigned-product.background-option-4 .product-primary-layout{grid-template-rows:100px auto auto}}

/* Clip pane backgrounds to the rounded bottom corners without clipping folder tabs. */
.redesigned-product.background-option-4 .ingredients-widget-joined>[data-ingredient-pane]{border-radius:0 0 15px 15px;overflow:hidden}

/* Recommendation headings match the size of their Explore links. */
.redesigned-product .recommendation-layout-2 .related-brand>.related-heading h2{font-size:18px}
@media(max-width:600px){.redesigned-product .recommendation-layout-2 .related-brand>.related-heading h2{font-size:11px}.redesigned-product .recommendation-layout-2 .related-brand:has(>[data-explore-similar])>.related-heading h2{font-size:15px}}
@media(max-width:600px){.redesigned-product .recommendation-layout-2 .related-brand>.related-heading h2,.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link{font-size:15px}}

/* Type and texture labels share the same compact outlined badge treatment. */
.redesigned-product .enlarged-card-type-row .product-attribute-tags{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0}
.redesigned-product .enlarged-card-type-row .product-attribute-tags .badge{margin:0;white-space:nowrap}
.redesigned-product .enlarged-card-type-row .texture-tag{background:#fff;border:1px solid #7d7d7d;color:#242424}

/* Retain paired retailer offers on phone-width catalogue cards. */
@media(max-width:480px){
 .card-buying{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;gap:5px}
 .card-buying-offer{min-width:0;padding:5px}
 .card-buying-store{overflow-wrap:anywhere}
 .card-buying-unit{flex-wrap:wrap;white-space:normal;gap:1px 2px}
 .card-buying-review{display:flex;flex-wrap:wrap;gap:2px 3px}
 .card-buying-review>small{flex-basis:100%;overflow-wrap:anywhere}
 .card-buying-box{overflow-wrap:anywhere}
 .card-buying-button{white-space:nowrap;padding-inline:2px}
}

/* Phone-width type labels and list actions align at one compact height. */
@media(max-width:600px){
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row{align-items:center;gap:5px}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .badge,
 .redesigned-product .enlarged-card-type-row .badge{display:inline-flex;align-items:center;justify-content:center;min-height:25px;padding:3px 6px;font-size:10px;line-height:1.2;border-radius:6px}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview,
 .redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview{height:25px;min-height:25px;font-size:9px;line-height:1.2;grid-template-columns:20px max-content;align-items:stretch;border-radius:6px;margin:0;padding:0}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview .shortlist-icon,
 .redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview .shortlist-icon{width:20px;min-width:20px;height:100%;font-size:15px;display:flex;align-items:center;justify-content:center}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview>span:last-child,
 .redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview>span:last-child{padding:0 5px;display:flex;align-items:center;justify-content:center;white-space:nowrap}
}

/* Equal label spacing keeps the per-bar/per-100g divider level across tiles. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card .single-row-panels .nutrient>.nutrient-name{margin:0 0 2px!important}

/* Smaller type and list controls on catalogue and recommendation cards. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .badge{display:inline-flex;align-items:center;justify-content:center;font-size:9px;line-height:1.2;min-height:22px;height:auto;padding:3px 5px;border-radius:6px}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview{height:22px;min-height:22px;font-size:9px;line-height:1.2;grid-template-columns:18px max-content;border-radius:6px;align-items:stretch;margin:0;padding:0}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview .shortlist-icon{width:18px;min-width:18px;height:100%;font-size:13px;display:flex;align-items:center;justify-content:center}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview>span:last-child{padding:0 5px;display:flex;align-items:center;white-space:nowrap}

/* Floating nutrition tiles keep a true square at every breakpoint. */
.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel{aspect-ratio:1;width:100%;height:auto;min-height:0;display:grid;grid-template-rows:62% 38%;overflow:hidden}
.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:3px 2px;min-height:0}
.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main>span{min-height:0;margin:0;line-height:1.15}
.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main>strong{line-height:1.1}
.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;min-height:0}
.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer b,.redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer small{line-height:1.15}

/* Slightly smaller type inside the ingredient views. */
.redesigned-product .ingredients-widget-joined .ingredient-view-tabs button{font-size:13px!important}
.redesigned-product .ingredients-widget-joined .ingredient-title-row{font-size:15px!important}
.redesigned-product .ingredients-widget-joined .inline-group-description{font-size:12px!important}
.redesigned-product .ingredients-widget-joined .combined-ingredient-count{font-size:11px!important}
.redesigned-product .ingredients-widget-joined .ingredient-chips{font-size:13px!important}
@media(max-width:600px){.redesigned-product .ingredients-widget-joined .ingredient-view-tabs button{font-size:11px!important}.redesigned-product .ingredients-widget-joined .ingredient-title-row{font-size:14px!important}.redesigned-product .ingredients-widget-joined .combined-ingredient-count{font-size:10px!important}}

/* Ingredient filter placeholders align with neighbouring select values. */
.catalogue .filters-panel .filter-group-fields :is(#includeIngredients,#excludeIngredients){padding-left:10px;text-indent:0;background-image:none}

/* Explore links sit below their recommendation headings. */
.redesigned-product .recommendation-layout-2 aside.related-brand{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;row-gap:0}
.redesigned-product.background-option-4 .recommendation-layout-2 .related-brand>.related-heading{grid-column:1;grid-row:1;padding:0 0 6px}
.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link{grid-column:1;grid-row:2;justify-self:start;margin:0 0 14px;max-width:100%;white-space:normal}
.redesigned-product .recommendation-layout-2 .related-brand>.recommendation-results{grid-column:1;grid-row:3}

/* Which Bar? masthead: white lettering and a coral punctuation accent. */
body>header{background:#1f1f1f;color:#fff;border-bottom-color:#1f1f1f}
body>header :is(h2,p,label,a,button){color:#fff}
body>header .which-bar-header-logo{display:block;flex:0 0 auto;width:220px;line-height:0;letter-spacing:0}
body>header .which-bar-header-logo svg{display:block;width:100%;height:auto}
body>header .signup-fields input{background:transparent;color:#fff;border-color:#929292}
body>header .signup-fields input::placeholder{color:#e5e5e5;opacity:1}
body>header .signup-fields button{background:#1f1f1f;color:#fff;border:1px solid #aaa}
body>header nav button{border-color:#aaa;color:#fff}
body>header nav b{background:#444;color:#fff}
@media(max-width:700px){body>header .which-bar-header-logo{width:140px}body>header>.new-bars-signup{max-width:230px}}
@media(max-width:420px){body>header .which-bar-header-logo{width:115px}}

body>header .signup-fields input{background:#fff;color:#1a1a1a;border-color:#d1d1d1}
body>header .signup-fields input::placeholder{color:#626262;opacity:1}

/* Keep box pricing inline and paired purchase buttons on a common baseline. */
.card-buying{align-items:stretch}
.compact-floating-buying>.card-buying{align-items:stretch}
.card-buying .card-buying-offer>.card-buying-box{flex-wrap:nowrap;white-space:nowrap;gap:2px;font-size:clamp(8px,5.5cqw,11px)}
.card-buying .card-buying-box>small{font-size:clamp(6px,4cqw,9px);white-space:nowrap}
.card-buying .card-buying-offer>.card-buying-button{margin-top:auto}

/* Stars and numerical rating stay paired on one line. */
.card-buying .card-buying-review{display:grid;grid-template-columns:max-content max-content;justify-content:start;align-items:center;gap:3px}
.card-buying .card-buying-review>small{grid-column:1/-1}
@container(max-width:190px){.card-buying-review .card-buying-stars{font-size:8px}.card-buying-review>b{font-size:8px}}

/* Shorter shortlist label leaves room for single-line product types on phones. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row{display:flex;flex-wrap:nowrap;align-items:center;gap:4px}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .badge{white-space:nowrap;flex:0 0 auto}
@media(max-width:600px){
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .badge{font-size:8px;min-height:21px;padding:3px 4px}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview{font-size:8px;min-height:21px;height:21px;grid-template-columns:16px max-content}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview .shortlist-icon{width:16px;min-width:16px;font-size:12px}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview>span:last-child{padding-inline:4px}
}

/* Shortlist navigation uses the logo's coral punctuation accent. */
#directory .browse-switch #browseSaved{background:#ff7059;color:#242424;border-color:#242424}
#directory .browse-switch #browseSaved #savedTabCount{background:#ffffff66;color:#242424}
#directory .browse-switch #browseSaved.active{background:#ff7059;color:#242424;box-shadow:inset 0 0 0 1px #242424}

/* Size actions to each card's available width, including long bar types. */
@media(max-width:600px){
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row{container-type:inline-size;justify-content:space-between;gap:3px;min-width:0}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .badge{font-size:clamp(6px,4cqw,8px);padding-inline:4px;min-height:20px}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview{font-size:clamp(6px,4cqw,8px);grid-template-columns:14px max-content;height:20px;min-height:20px}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview .shortlist-icon{width:14px;min-width:14px;font-size:11px}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview>span:last-child{padding-inline:3px}
}

/* Reversed shortlist accent: coral lettering and outline on a neutral surface. */
#directory .browse-switch #browseSaved{background:#fff;color:#ff7059;border-color:#ff7059;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;padding-inline:12px}
#directory .browse-switch #browseSaved:hover{background:#fff5f2}
#directory .browse-switch #browseSaved.active{background:#fff5f2;color:#ff7059;border-color:#ff7059;box-shadow:inset 0 0 0 1px #ff7059}
#directory .browse-switch #browseSaved #savedTabCount{background:#ffe9e4;color:#b83e2a;margin:0;padding:2px 5px;line-height:1.2;min-width:20px;border-radius:20px}
@media(max-width:700px){
 #directory .browse-switch{grid-template-columns:1fr 1fr 1.15fr 1fr 1.6fr;gap:4px}
 #directory .browse-switch button{font-size:10px}
 #directory .browse-switch #browseSaved{font-size:10px;padding-inline:4px;gap:4px}
 #directory .browse-switch #browseSaved #savedTabCount{font-size:9px;min-width:15px;padding:2px 3px}
}

/* Shortlist shares the neutral browse-button treatment. */
#directory .browse-switch #browseSaved{background:#ececec;color:#242424;border-color:#bbb;box-shadow:none}
#directory .browse-switch #browseSaved:hover{background:#e0e0e0}
#directory .browse-switch #browseSaved.active{background:#1f1f1f;color:#fff;border-color:#1f1f1f;box-shadow:none}
#directory .browse-switch #browseSaved #savedTabCount{background:#dedede;color:inherit}
#directory .browse-switch #browseSaved.active #savedTabCount{background:#444;color:#fff}
#directory .browse-switch #browseSaved:not(.active){background:#e9e9e9;color:#1a1a1a;border-color:#b7b7b7}

/* Phone buying offers: full-width compact rows beneath the macros. */
@media(max-width:480px){
 .card>.card-buying{grid-template-columns:minmax(0,1fr);gap:7px}
 .card-buying .card-buying-offer{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto;gap:3px 8px;align-items:center;height:auto;min-height:0;aspect-ratio:auto;padding:8px}
 .card-buying .card-buying-store{grid-column:1;grid-row:1;font-size:10px}
 .card-buying .card-buying-unit{grid-column:1;grid-row:2;flex-wrap:nowrap;white-space:nowrap}
 .card-buying .card-buying-unit>strong{font-size:16px}
 .card-buying .card-buying-unit>small{font-size:9px}
 .card-buying .card-buying-offer>.card-buying-box{grid-column:1;grid-row:3;font-size:9px}
 .card-buying .card-buying-box>small{font-size:8px}
 .card-buying .card-buying-review{grid-column:1;grid-row:4;display:grid;grid-template-columns:max-content max-content;gap:2px 4px;padding:0}
 .card-buying .card-buying-stars{font-size:10px}
 .card-buying .card-buying-review>b{font-size:9px}
 .card-buying .card-buying-review>small{font-size:8px}
 .card-buying .card-buying-offer>.card-buying-button{grid-column:2;grid-row:1/-1;align-self:center;margin:0;padding:10px 7px;font-size:10px}

}
@media(max-width:360px){
 .card>.card-buying .card-buying-offer{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,auto)}
 .card>.card-buying .card-buying-offer>.card-buying-button{grid-column:1;grid-row:5;padding-block:6px}
}
/* Compact phone-card offers keep information above a slim bottom action. */
@media(max-width:480px){
 .card>.card-buying{gap:6px}
 .card>.card-buying .card-buying-offer{grid-template-columns:minmax(0,1fr) max-content;grid-template-rows:repeat(4,auto);gap:3px 5px;padding:6px;align-content:start}
 .card>.card-buying .card-buying-store{grid-column:1;grid-row:1;min-width:0;font-size:10px}
 .card>.card-buying .card-buying-unit{grid-column:2;grid-row:1;gap:2px;justify-self:end}
 .card>.card-buying .card-buying-unit>strong{font-size:14px}
 .card>.card-buying .card-buying-unit>small{font-size:8px}
 .card>.card-buying .card-buying-offer>.card-buying-box{grid-column:1/-1;grid-row:2;font-size:9px}
 .card>.card-buying .card-buying-review{grid-column:1/-1;grid-row:3;grid-template-columns:max-content max-content max-content;gap:3px}
 .card>.card-buying .card-buying-review>small{grid-column:auto;white-space:nowrap;font-size:8px}
 .card>.card-buying .card-buying-offer>.card-buying-button{grid-column:1/-1;grid-row:4;align-self:stretch;min-height:0;margin:1px 0 0;padding:4px 3px;font-size:10px;line-height:1.2;border-radius:4px}
}
/* Phone cards: quieter retailer rows with clear price and rating columns. */
@media(max-width:480px){
 .card>.card-buying{gap:0;padding-top:0}
 .card>.card-buying .card-buying-offer{grid-template-columns:minmax(0,1fr) max-content;grid-template-rows:auto auto auto auto;padding:9px 0;gap:3px 7px;background:#fff;border:0;border-top:1px solid #e6e6e6;border-radius:0}
 .card>.card-buying .card-buying-store{grid-column:1/-1;grid-row:1;font-size:10px;line-height:1.3;margin-bottom:2px}
 .card>.card-buying .card-buying-unit{grid-column:1;grid-row:2;justify-self:start;align-self:center}
 .card>.card-buying .card-buying-unit>strong{font-size:16px;letter-spacing:-.3px}
 .card>.card-buying .card-buying-unit>small{font-size:8px}
 .card>.card-buying .card-buying-offer>.card-buying-box{grid-column:1;grid-row:3;font-size:9px;gap:2px;line-height:1.3}
 .card>.card-buying .card-buying-box>small{font-size:7px}
 .card>.card-buying .card-buying-review{grid-column:2;grid-row:2/span 2;grid-template-columns:max-content max-content;gap:3px;align-self:center;justify-self:end}
 .card>.card-buying .card-buying-stars{font-size:9px}
 .card>.card-buying .card-buying-review>b{font-size:9px}
 .card>.card-buying .card-buying-review>small{grid-column:1/-1;font-size:7px;text-align:right;line-height:1.3}
 .card>.card-buying .card-buying-offer>.card-buying-button{grid-column:1/-1;grid-row:4;margin-top:4px;padding:4px 3px;font-size:9px;font-weight:600;border-radius:4px}
}
@media(max-width:360px){
 .card>.card-buying .card-buying-offer{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,auto)}
 .card>.card-buying .card-buying-review{grid-column:1;grid-row:4;justify-self:start;grid-template-columns:max-content max-content max-content}
 .card>.card-buying .card-buying-review>small{grid-column:auto}
 .card>.card-buying .card-buying-offer>.card-buying-button{grid-row:5}
}
@media(max-width:480px){
 .card>.card-buying .card-buying-offer{padding-block:6px;row-gap:2px;line-height:1.2}
 .card>.card-buying .card-buying-review{line-height:1.2}
 .card>.card-buying .card-buying-offer>.card-buying-button{margin-top:3px;padding-block:3px}
}
/* Phone macro footers keep the amount above its per-100g label. */
@media(max-width:700px){
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel{grid-template-rows:55% 45%}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main{gap:2px;padding:2px 1px}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main>strong{font-size:18px}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer{flex-direction:column;flex-wrap:nowrap;gap:1px;padding:1px;overflow:hidden}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer b{display:block;font-size:10px;line-height:1.1}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer small{display:block;font-size:7px;line-height:1.1;white-space:nowrap}
}


/* The floating panel has desktop offers and one shared mobile pair. */
@media(max-width:899px){
 .compact-floating-buying>.card-buying{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
 .compact-floating-buying .card-buying-offer{display:flex;flex-direction:column;gap:5px;min-width:0;height:auto;min-height:0;aspect-ratio:auto;padding:10px;background:#f5f5f5;border:1px solid #e3e3e3;border-radius:8px;line-height:1.4}
 .compact-floating-buying .card-buying-store{font-size:10px;line-height:1.3;margin:0}
 .compact-floating-buying .card-buying-unit{display:flex;flex-wrap:nowrap;align-items:baseline;gap:3px;white-space:nowrap;line-height:1.2}
 .compact-floating-buying .card-buying-unit>strong{font-size:18px}
 .compact-floating-buying .card-buying-unit>small{font-size:10px}
 .compact-floating-buying .card-buying-offer>.card-buying-box{font-size:11px;gap:2px;white-space:nowrap;flex-wrap:nowrap;line-height:1.4}
 .compact-floating-buying .card-buying-box>small{font-size:9px}
 .compact-floating-buying .card-buying-review{display:grid;grid-template-columns:max-content max-content;gap:3px;justify-content:start;align-items:center;padding-top:2px;line-height:1.3}
 .compact-floating-buying .card-buying-stars{font-size:12px}
 .compact-floating-buying .card-buying-review>b{font-size:10px}
 .compact-floating-buying .card-buying-review>small{grid-column:1/-1;font-size:9px;text-align:left}
 .compact-floating-buying .card-buying-offer>.card-buying-button{margin-top:auto;padding:8px 4px;min-height:0;font-size:11px;line-height:1.2;border-radius:5px}
}
@media(max-width:899px){
 .compact-floating-buying .card-buying-offer{container-type:inline-size}
 .compact-floating-buying .card-buying-offer>.card-buying-box{font-size:clamp(8px,9cqw,11px)}
 .compact-floating-buying .card-buying-box>small{font-size:clamp(6px,7cqw,9px)}
 .compact-floating-buying .card-buying-stars{font-size:clamp(9px,10cqw,12px)}
}
@media(max-width:899px){
 .compact-floating-buying .card-buying-offer{align-items:stretch;text-align:left}
 .compact-floating-buying .card-buying-offer>.card-buying-button{align-self:stretch}
}
/* Chosen explore treatment: a small solid button beneath each heading. */
.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link:is([data-related-brand],[data-explore-similar]){display:inline-flex;align-items:center;justify-content:center;gap:8px;justify-self:start;align-self:start;width:auto;min-height:0;max-width:100%;margin:0 0 16px;padding:7px 10px;border:1px solid #242424;border-radius:5px;background:#242424;color:#fff;font-size:11px;line-height:1.25;font-weight:600;text-decoration:none;white-space:normal;text-align:left;box-shadow:none}
.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link:is([data-related-brand],[data-explore-similar]):hover{background:#444;border-color:#444;color:#fff}
.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link:is([data-related-brand],[data-explore-similar]):focus-visible{outline:2px solid #242424;outline-offset:3px}
/* Outlined explore buttons. */
.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link:is([data-related-brand],[data-explore-similar]){background:#fff;color:#000;border-color:#000}
.redesigned-product .recommendation-layout-2 .related-brand>.related-brand-link:is([data-related-brand],[data-explore-similar]):hover{background:#f5f5f5;color:#000;border-color:#000}
/* Slightly smaller ingredient explanations on phones. */
@media(max-width:600px){
 .redesigned-product .ingredients-widget-joined .ingredient-title-row{font-size:13px!important}
 .redesigned-product .ingredients-widget-joined .inline-group-description{font-size:11px!important}
}
/* Mobile catalogue actions fit their label rather than the full offer width. */
@media(max-width:480px){
 .card>.card-buying .card-buying-offer>.card-buying-button{width:max-content;max-width:100%;justify-self:start;align-self:start;padding-inline:6px}
}
@media(max-width:480px){
 .card>.card-buying .card-buying-offer>.card-buying-button{justify-self:center}
}
@media(max-width:480px){
 .card>.card-buying .card-buying-offer>.card-buying-button{padding-inline:12px}
}
/* Retailer offers share a borderless surface with broken dividers. */
:is(.card,.compact-floating-buying)>.card-buying .card-buying-offer{background:transparent;border:0;border-top:1px dashed #d6d6d6;border-radius:0;box-shadow:none}
/* Match the original mobile rule: separate, solid retailer dividers. */
:is(.card,.compact-floating-buying)>.card-buying .card-buying-offer{border-top-style:solid}
/* Bring reviews and the action into the mobile price rows. */
@media(max-width:480px){
 .card>.card-buying .card-buying-offer{grid-template-columns:minmax(0,1fr) max-content;grid-template-rows:repeat(3,auto);gap:3px 7px}
 .card>.card-buying .card-buying-store{grid-column:1;grid-row:1;margin:0}
 .card>.card-buying .card-buying-unit{grid-column:1;grid-row:2}
 .card>.card-buying .card-buying-offer>.card-buying-box{grid-column:1;grid-row:3;align-self:center}
 .card>.card-buying .card-buying-review{grid-column:2;grid-row:1/span 2;align-self:start;justify-self:end;padding-top:0}
 .card>.card-buying .card-buying-offer>.card-buying-button{grid-column:2;grid-row:3;justify-self:end;align-self:center;margin:0;padding-inline:10px}
}
@media(max-width:360px){
 .card>.card-buying .card-buying-offer{grid-template-rows:repeat(4,auto);column-gap:4px}
 .card>.card-buying .card-buying-unit>strong{font-size:14px}
 .card>.card-buying .card-buying-stars{font-size:8px}
 .card>.card-buying .card-buying-offer>.card-buying-box{grid-column:1/-1;grid-row:3}
 .card>.card-buying .card-buying-offer>.card-buying-button{grid-column:2;grid-row:4}
}
/* A centre rule separates paired retailer offers. */
@media(min-width:481px){
 .card>.card-buying::after{content:"";position:absolute;left:50%;top:10px;bottom:12px;width:1px;background:#d6d6d6;pointer-events:none}
}
@media(max-width:899px){
 .compact-floating-buying>.card-buying::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#d6d6d6;pointer-events:none}
}
/* Quieter price weight and aligned compact mobile offer rows. */
.card-buying .card-buying-unit>strong{font-weight:400}
@media(max-width:480px){
 .card>.card-buying .card-buying-review{align-self:center}
 .card>.card-buying .card-buying-offer>.card-buying-button{position:relative;top:-2px}
}
/* Inset the centre divider so it stays clear of the horizontal rules. */
@media(min-width:481px){
 .card>.card-buying::after{top:26px;bottom:24px;background:#ddd}
}
@media(max-width:899px){
 .compact-floating-buying>.card-buying::after{top:16px;bottom:12px;background:#ddd}
}
/* Join each offer's top rule across the gap to the centre divider. */
@media(min-width:481px){
 .card>.card-buying::before{content:"";position:absolute;left:50%;top:10px;width:8px;height:1px;transform:translateX(-50%);background:#d6d6d6;pointer-events:none}
 .card>.card-buying::after{top:10px;background:#d6d6d6}
}
@media(max-width:899px){
 .compact-floating-buying>.card-buying::before{content:"";position:absolute;left:50%;top:0;width:12px;height:1px;transform:translateX(-50%);background:#d6d6d6;pointer-events:none}
 .compact-floating-buying>.card-buying::after{top:0;background:#d6d6d6}
}
/* Meet the outer product-card border with one continuous T-shaped divider. */
@media(min-width:481px){
 .card>.card-buying .card-buying-offer{border-top:0}
 .card>.card-buying::before{left:0;right:0;top:0;width:100%;height:1px;transform:none}
 .card>.card-buying::after{top:0;bottom:0}
}
/* Tighten the buying cells against their top and bottom dividers. */
@media(min-width:481px){
 .card>.card-buying{padding-top:0;padding-bottom:0}
 .card>.card-buying .card-buying-offer{padding-top:6px;padding-bottom:6px}
}
/* Desktop cards show retailer reviews before the prices. */
@media(min-width:481px){
 .card>.card-buying .card-buying-store{order:0}
 .card>.card-buying .card-buying-review{order:1}
 .card>.card-buying .card-buying-unit{order:2}
 .card>.card-buying .card-buying-box{order:3}
 .card>.card-buying .card-buying-button{order:4}
}
/* Enclose the floating panel's paired offers as two joined boxes. */
@media(max-width:899px){
 .redesigned-product .compact-floating-buying>.card-buying{gap:0;border:1px solid #d6d6d6;border-radius:0;overflow:hidden}
 .redesigned-product .compact-floating-buying>.card-buying .card-buying-offer{border:0;padding:10px}
 .redesigned-product .compact-floating-buying>.card-buying::before{content:none}
 .redesigned-product .compact-floating-buying>.card-buying::after{top:0;bottom:0;left:50%;background:#d6d6d6}
}
/* Joined offer panels share the surrounding rounded-corner treatment. */
@media(max-width:899px){
 .redesigned-product .compact-floating-buying>.card-buying{border-radius:10px}
}
/* Separate content-sized retailer boxes, centred in the floating panel. */
@media(max-width:899px){
 .redesigned-product .compact-floating-buying>.card-buying{width:fit-content;max-width:100%;margin-inline:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:0;border-radius:0;overflow:visible;container-type:normal}
 .redesigned-product .compact-floating-buying>.card-buying::before,
 .redesigned-product .compact-floating-buying>.card-buying::after{content:none}
 .redesigned-product .compact-floating-buying>.card-buying .card-buying-offer{width:auto;container-type:normal;border:1px solid #d6d6d6;border-radius:10px;padding:10px 12px;text-align:left;align-items:stretch}
}
@media(max-width:360px){
 .compact-floating-buying .card-buying-offer>.card-buying-box{font-size:8px}
 .compact-floating-buying .card-buying-box>small{font-size:6px}
}
/* Square, rounded standalone buying boxes in the floating panel. */
@media(max-width:899px){
 .redesigned-product .compact-floating-buying>.card-buying{width:340px;max-width:100%}
 .redesigned-product .compact-floating-buying>.card-buying .card-buying-offer{aspect-ratio:1;min-height:0;box-sizing:border-box;justify-content:space-between;border-radius:10px}
}
/* Standalone floating offers show reviews before pricing. */
@media(max-width:899px){
 .compact-floating-buying .card-buying-store{order:0}
 .compact-floating-buying .card-buying-review{order:1}
 .compact-floating-buying .card-buying-unit{order:2}
 .compact-floating-buying .card-buying-box{order:3}
 .compact-floating-buying .card-buying-button{order:4}
}
/* Desktop floating offers use the same rounded boxes and reading order. */
.redesigned-product .compact-floating-buying>.card-buying .card-buying-offer{border:1px solid #d6d6d6;border-radius:10px;background:transparent}
.compact-floating-buying .card-buying-store{order:0}
.compact-floating-buying .card-buying-review{order:1}
.compact-floating-buying .card-buying-unit{order:2}
.compact-floating-buying .card-buying-box{order:3}
.compact-floating-buying .card-buying-button{order:4}
/* Balance the retailer, reviews, prices and action within each square. */
.redesigned-product .compact-floating-buying .card-buying-offer{justify-content:space-between}
.redesigned-product .compact-floating-buying .card-buying-offer>.card-buying-button{margin-top:0}

/* Amazon wordmark scales with each retailer heading. */
.card-buying-store .amazon-retailer-logo{display:block;width:4.4em;max-width:100%;height:auto;object-fit:contain;object-position:left center}
/* Fine-tune mobile buying-section breathing room. */
@media(max-width:480px){
 .card>.card-buying .card-buying-offer:first-child .amazon-retailer-logo{margin-top:2px}
 .card>.card-buying{padding-bottom:4px}
 .card>.card-buying .card-buying-offer:last-child{padding-bottom:3px}
}
/* Equal retailer-heading rows keep logos and text aligned on paired cards. */
@media(min-width:481px){
 .card>.card-buying .card-buying-store{display:flex;align-items:center;height:1.7em;min-height:1.7em;flex-shrink:0;line-height:1.3}
 .card>.card-buying .card-buying-store .amazon-retailer-logo{flex-shrink:0;margin:0}
 .card>.card-buying .card-buying-review{padding-top:0}
}
/* Add balanced breathing room within paired retailer cells. */
@media(min-width:481px){
 .card>.card-buying .card-buying-offer{padding-top:10px;padding-bottom:10px}
}
/* Tappable floating macro tiles retain their existing dimensions and colours. */
.redesigned-product .complete-panel[data-nutrient-info]{position:relative;margin:0;padding:0;font:inherit;color:inherit;text-align:center;appearance:none;cursor:pointer}
.redesigned-product .complete-panel[data-nutrient-info]:hover{filter:brightness(.98)}
.redesigned-product .complete-panel[data-nutrient-info]:focus-visible{outline:2px solid #333;outline-offset:3px}
.macro-info-cue{position:absolute;right:4px;top:3px;display:block;width:10px;height:10px;border:1px solid #64796b55;border-radius:50%;font:500 7px/9px Georgia,serif;color:#64796b;opacity:.75;pointer-events:none}
#macroInfoDialog{position:fixed;inset:0;margin:auto;width:min(430px,calc(100% - 32px));max-width:430px;height:auto;min-height:0;max-height:85vh;max-height:85dvh;padding:0;border:1px solid #dedede;border-radius:16px;background:#fff;color:#242424;box-shadow:0 15px 70px #0002;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:auto;font-family:'DM Sans',sans-serif}
#macroInfoDialog::backdrop{background:#1116;backdrop-filter:blur(2px)}
#macroInfoDialog .macro-info-head{display:block;position:relative;padding:22px 22px 15px;background:#f4f8f4;border:0}
#macroInfoDialog .macro-info-head[data-tone=red]{background:#fbf3f1}
#macroInfoDialog .macro-info-head[data-tone=amber]{background:#faf7ee}
#macroInfoDialog .macro-info-head[data-tone=missing]{background:#f5f5f5}
#macroInfoDialog .macro-info-eyebrow{font-size:9px;line-height:1.4;letter-spacing:1px;font-weight:700;color:#777}
#macroInfoDialog h2{font-family:inherit;font-size:23px;letter-spacing:-.5px;line-height:1.25;margin:5px 35px 5px 0;font-weight:700}
#macroInfoDialog .macro-info-close{position:absolute;right:14px;top:14px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;min-height:0;padding:0;border:1px solid #ddd;border-radius:50%;background:#fff;color:#444;font:22px/1 Arial,sans-serif;cursor:pointer}
#macroInfoDialog .macro-info-product{font-size:10px;line-height:1.4;color:#777;margin:0 0 4px}
#macroInfoDialog .macro-info-serving{font-size:11px;line-height:1.4;color:#777;margin:0}
#macroInfoDialog .macro-info-amounts{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:15px}
#macroInfoDialog .macro-info-amounts>div{min-width:0;background:#fff;border:1px solid #e2e8e2;border-radius:8px;padding:10px 12px}
#macroInfoDialog .macro-info-amounts small{display:block;font-size:10px;line-height:1.4;color:#777;margin-bottom:2px}
#macroInfoDialog .macro-info-amounts strong{display:block;font-size:24px;line-height:1.2;font-weight:500}
#macroInfoDialog .macro-info-copy{padding:18px 22px 20px}
#macroInfoDialog .macro-info-comparison{border:1px solid #dedede;border-radius:9px;padding:12px 13px;margin-bottom:18px;background:#fafaf9}
#macroInfoDialog .macro-info-average{display:flex;justify-content:space-between;align-items:center;gap:12px}
#macroInfoDialog .macro-info-average>span{font-size:11px;line-height:1.4;color:#666}
#macroInfoDialog .macro-info-average>span:last-child{white-space:nowrap;text-align:right}
#macroInfoDialog .macro-info-average strong{font-size:19px;color:#242424;font-weight:500}
#macroInfoDialog .macro-info-average small{display:block;font-size:9px;color:#888}
#macroInfoDialog .macro-info-result{font-size:12px;line-height:1.4;font-weight:700;margin:9px 0 3px;color:#242424}
#macroInfoDialog .macro-info-scope{font-size:10px;line-height:1.4;color:#888;margin:0}
#macroInfoDialog .macro-info-explanation+.macro-info-explanation{margin-top:16px}
#macroInfoDialog h3{font-size:13px;line-height:1.4;letter-spacing:0;margin:0 0 5px;font-weight:700}
#macroInfoDialog .macro-info-explanation p{font-size:12px;line-height:1.6;margin:0;color:#666}
#macroInfoDialog .macro-info-source{border:0;border-top:1px solid #eee;border-radius:0;background:transparent;margin:18px 0 0;padding:11px 0 0;font-size:10px;line-height:1.5;color:#888}
#macroInfoDialog .macro-info-source summary{padding:0;font-size:10px;line-height:1.5;color:#555;cursor:pointer}
#macroInfoDialog .macro-info-source p{margin:6px 0;font-size:10px;line-height:1.5}
#macroInfoDialog .macro-info-source a{color:#555;text-underline-offset:2px}
#macroInfoDialog .macro-info-next{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:0;margin:17px 0 0;padding:9px 11px;border:1px solid #bbb;border-radius:6px;background:#fff;color:#333;font-family:inherit;font-size:11px;line-height:1.3;font-weight:600;cursor:pointer}
#macroInfoDialog :is(button,a):focus-visible{outline:2px solid #333;outline-offset:3px}
#macroInfoDialog #macroInfoTitle:focus{outline:none}
@media(max-width:600px){
 #macroInfoDialog{width:calc(100% - 32px);border-radius:16px}
 #macroInfoDialog .macro-info-head{padding:18px 20px 14px}
 #macroInfoDialog h2{font-size:22px}
 #macroInfoDialog .macro-info-copy{padding:17px 20px 22px}
 #macroInfoDialog .macro-info-amounts{padding-top:13px}
 .macro-info-cue{right:3px;top:3px;width:8px;height:8px;font-size:6px;line-height:7px}
}
#macroInfoDialog{height:fit-content}

/* One desktop structure from 900px; one stacked structure below it. */
@media(min-width:900px){
 .redesigned-product.background-option-4 .product-primary-layout{grid-template-rows:var(--macro-block-height,100px) auto auto}
}
@media(min-width:900px) and (max-width:1199px){
 #modal:has(.product-primary-layout){max-width:calc(100vw - 32px);padding-inline:24px}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
 .product-primary-layout .compact-floating-buying .card-buying-offer{padding:12px;gap:5px}
 .product-primary-layout .compact-floating-buying .card-buying-store{font-size:13px}
 .product-primary-layout .compact-floating-buying .card-buying-unit>strong{font-size:23px}
 .product-primary-layout .compact-floating-buying .card-buying-unit>small,.product-primary-layout .compact-floating-buying .card-buying-box{font-size:11px}
 .product-primary-layout .compact-floating-buying .card-buying-box>small{font-size:9px}
 .product-primary-layout .compact-floating-buying .card-buying-stars{font-size:16px}
 .product-primary-layout .compact-floating-buying .card-buying-review>b{font-size:12px}
 .product-primary-layout .compact-floating-buying .card-buying-review>small{font-size:10px}
 .product-primary-layout .compact-floating-buying .card-buying-button{font-size:12px;padding:8px 10px}
}
@media(max-width:899px){
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:480px;margin-inline:auto}
}
/* Browse selectors: option 12, bold active folder with an open page below. */
#directory .browse-switch{align-items:end;gap:8px;padding:0;border:0;border-bottom:1px solid #bbb;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
#directory .browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved){display:flex;align-items:center;justify-content:center;gap:7px;position:relative;z-index:1;margin:0 0 -1px;min-height:51px;padding:14px 12px;border:1px solid #bbb!important;border-radius:13px 13px 0 0!important;background:#e9e9e9!important;color:#242424!important;box-shadow:none!important;font-size:13px;line-height:1.2;font-weight:600;white-space:nowrap}
#directory .browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved).active{z-index:2;background:#242424!important;color:#fff!important;border-color:#242424!important;box-shadow:none!important;font-weight:700}
#directory .browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved):hover:not(.active){background:#dfdfdf!important}
#directory .browse-switch #browseSaved #savedTabCount{background:#dedede!important;color:#242424!important;font-size:10px;min-width:18px;line-height:1.2;margin:0}
#directory .browse-switch #browseSaved.active #savedTabCount{background:#4a4a4a!important;color:#fff!important}
#directory .browse-switch button:focus-visible{outline:2px solid #777;outline-offset:-5px}
@media(max-width:700px){
 #directory .browse-switch{gap:3px;grid-template-columns:1fr 1fr 1.15fr 1fr 1.65fr}
 #directory .browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved){min-height:43px;padding:10px 2px;font-size:10px;gap:3px;border-radius:10px 10px 0 0!important}
 #directory .browse-switch #browseSaved #savedTabCount{font-size:8px;min-width:13px;padding:2px 3px}
}
@media(max-width:360px){#directory .browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved){font-size:9px}}
/* All desktop widths use the same eight-tile macro row. */
@media(min-width:900px){
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-grid{grid-template-columns:repeat(8,minmax(0,1fr));max-width:none}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel{container-type:inline-size}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main{gap:2px;padding:2px 1px}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main>span{font-size:clamp(6px,9cqw,9px);white-space:nowrap;overflow-wrap:normal}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-main>strong{font-size:clamp(14px,24cqw,21px)}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer{padding:1px;gap:1px;flex-wrap:nowrap}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer b{font-size:clamp(8px,12cqw,12px)}
 .redesigned-product.background-option-4 .full-nutrition-4 .complete-panel-footer small{font-size:clamp(6px,8cqw,8px);white-space:nowrap}
}

/* Unconfirmed dietary statuses read as inactive. */
.redesigned-product .ingredients-widget-joined [data-ingredient-pane="diet"] .combined-ingredient-count.dietary-status-unverified{color:#aaa!important}

/* Retailer offers share an open section without a centre divider. */
.card>.card-buying::after{content:none}

/* Slightly smaller per-bar prices on mobile product cards. */
@media(max-width:480px){.card>.card-buying .card-buying-unit>strong{font-size:14px}}

/* Desktop retailer option 3: individual rounded offer boxes. */
@media(min-width:481px){
 .card>.card-buying{gap:10px;padding:0 12px 12px}
 .card>.card-buying::before,.card>.card-buying::after{content:none}
 .card>.card-buying .card-buying-offer{border:1px solid #ddd;border-radius:12px;background:#fff;padding:12px;min-width:0}
}

/* Open product cards; retailer offers retain their own outlines. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card{border-color:transparent;box-shadow:none}

/* Open retailer sections on product cards. */
.card>.card-buying .card-buying-offer{border:0;border-radius:0;background:transparent;box-shadow:none}

/* Full-width ingredient hover, without dimming the text. */
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-role>summary{margin-inline:-16px!important;padding-inline:16px!important;filter:none}
.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-role>summary:hover{background:#fafafa!important;filter:none}
@media(max-width:700px){.redesigned-product.background-option-4 .ingredients-widget-joined .ingredient-role>summary{margin-inline:-12px!important;padding-inline:12px!important}}

/* Brief product descriptions directly beneath the flavour name. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card:has(.card-description){grid-row:span 7}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-description{grid-row:4;grid-column:1/-1;margin:5px 12px 10px;padding:0;color:#777;font-size:11px;line-height:1.5;font-weight:400}
:is(#grid,.recommendation-grid).grid>.card.stripped-card:has(.card-description) .card-type-row{grid-row:5}
:is(#grid,.recommendation-grid).grid>.card.stripped-card:has(.card-description) .nutrition-rows{grid-row:6}
:is(#grid,.recommendation-grid).grid>.card.stripped-card:has(.card-description)>.card-buying{grid-row:7}
@media(max-width:700px){:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-description{margin-inline:8px;font-size:10px}}
@media(max-width:480px){:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-description{font-size:9px;margin-top:4px;margin-bottom:8px}}

/* A shared hero frame keeps all product headings at the same height. */
.product-image-gallery .image-switch-spacer{visibility:hidden;pointer-events:none}

/* Large image viewer, shared by wrapper and inside photographs. */
[data-enlarge-image]{cursor:zoom-in}
[data-enlarge-image]:focus-visible{outline:2px solid #555;outline-offset:3px;border-radius:6px}
#imageZoomDialog{position:fixed;inset:0;margin:auto;padding:0;width:min(1100px,calc(100vw - 24px));max-width:none;height:min(720px,90dvh);max-height:90dvh;border:1px solid #ddd;border-radius:16px;background:#fff;color:#242424;overflow:hidden;box-shadow:0 15px 65px #0003}
#imageZoomDialog::backdrop{background:#1119}
#imageZoomDialog .image-zoom-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid #eee;height:68px}
#imageZoomDialog #imageZoomTitle{margin:0;font-size:14px;font-weight:600;line-height:1.35}
#imageZoomDialog .image-zoom-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
#imageZoomDialog button{font:500 12px/1.2 'DM Sans',sans-serif;color:#242424;background:#fff;border:1px solid #ccc;border-radius:6px;padding:8px 12px;cursor:pointer}
#imageZoomDialog [data-image-zoom-close]{display:grid;place-items:center;border-radius:50%;height:32px;width:32px;padding:0;font-size:23px}
#imageZoomDialog .image-zoom-stage{width:100%;height:calc(100% - 68px);overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}
#imageZoomDialog .image-zoom-canvas{position:relative;container-type:size;display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:zoom-in}
#imageZoomDialog.is-zoomed .image-zoom-canvas{width:200%;height:200%;cursor:zoom-out}
#imageZoomDialog .image-zoom-canvas>.product-photo,#imageZoomDialog .image-zoom-canvas>.bar-interior-photo{display:block;width:94%;height:94%;max-width:none;max-height:none;object-fit:contain;margin:0;padding:0;background:transparent;border:0;border-radius:0}
#imageZoomDialog .bar-interior-crop{width:min(94cqw,calc(94cqh * var(--interior-ratio)))}
#imageZoomDialog button:focus-visible{outline:2px solid #333;outline-offset:3px}
@media(max-width:600px){#imageZoomDialog{height:85dvh;border-radius:12px}#imageZoomDialog .image-zoom-header{padding:10px 12px;gap:8px}#imageZoomDialog #imageZoomTitle{font-size:12px}#imageZoomDialog .image-zoom-actions{gap:7px}#imageZoomDialog button{padding:7px 9px;font-size:11px}}

/* Place type and shortlist controls above the product name block. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row{grid-row:2!important;padding-bottom:6px;align-self:start}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .brand-tag{grid-row:3;padding-top:0;margin-bottom:2px}
:is(#grid,.recommendation-grid).grid>.card.stripped-card h3{grid-row:4;padding-top:0;padding-bottom:0}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .card-description{grid-row:5;margin-top:4px;margin-bottom:7px}
:is(#grid,.recommendation-grid).grid>.card.stripped-card .visual{margin-bottom:4px}

/* Give main catalogue photographs room to fill the card width. */
#grid.grid>.card.stripped-card .visual{padding:6px 10px}
#grid.grid>.card.stripped-card .visual .product-image{height:100%;max-height:100%;width:var(--product-art-width,90%)}

/* Main product images span the full card width. */
#grid.grid>.card.stripped-card .visual{padding:0;margin-inline:0}
#grid.grid>.card.stripped-card .visual .product-image{width:100%;max-width:100%;height:100%;max-height:100%}

/* Bring mobile card descriptions and nutrition panels closer together. */
@media(max-width:480px){
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-description{margin-bottom:3px}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrition-rows{margin-top:4px}
}

/* Slim mobile type and shortlist controls to their text height. */
@media(max-width:480px){
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .badge{height:auto;min-height:0;padding:2px 4px;line-height:1.2}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview{height:auto;min-height:0;line-height:1.2;grid-template-columns:13px max-content}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview>span:last-child{padding:2px 4px;line-height:1.2}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview .shortlist-icon{min-height:0;width:13px;min-width:13px;font-size:11px;height:auto;line-height:1}
}

/* Trim only the upper section of mobile macro panels. */
@media(max-width:480px){
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .single-row-panels .nutrient{padding-top:2px}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .single-row-panels .nutrient>.nutrient-name{margin-bottom:1px!important}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .single-row-panels .nutrient>strong{margin-bottom:2px}
}

/* Keep mobile product blurbs to at most two lines. */
@media(max-width:480px){
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;max-height:3em}
}

/* Compact product attributes and shortlist action share one row. */
.redesigned-product .enlarged-card-type-row{flex-wrap:nowrap;gap:7px}
.redesigned-product .enlarged-card-type-row .product-attribute-tags{flex-wrap:nowrap;gap:5px}
.redesigned-product .matched-actions-preview .enlarged-card-type-row .badge{height:23px;min-height:0;padding:3px 6px;font-size:10px;line-height:1.2;border-radius:6px}
.redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview{height:23px;min-height:0;font-size:10px;grid-template-columns:18px max-content;flex-shrink:0;line-height:1.2;padding:0}
.redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview .shortlist-icon{min-width:18px;width:18px;font-size:13px}
.redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview>span:last-child{padding-inline:5px}
@media(max-width:480px){
 .redesigned-product .enlarged-card-type-row{gap:5px}
 .redesigned-product .enlarged-card-type-row .product-attribute-tags{gap:4px}
 .redesigned-product .matched-actions-preview .enlarged-card-type-row .badge{height:20px;padding:2px 4px;font-size:9px}
 .redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview{height:20px;font-size:9px;grid-template-columns:16px max-content}
 .redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview .shortlist-icon{min-width:16px;width:16px;font-size:12px}
 .redesigned-product .matched-actions-preview .enlarged-card-type-row .shortlist-preview>span:last-child{padding-inline:4px}
}
@media(min-width:481px){
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .badge{height:18px;min-height:0;padding:2px 4px;font-size:8px}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview{height:18px;min-height:0;font-size:8px;grid-template-columns:15px max-content}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-type-row .shortlist-preview .shortlist-icon{min-width:15px;width:15px;font-size:11px}
}

/* Align photograph edges with the macro panels below. */
#grid.grid>.card.stripped-card .visual{padding-inline:12px}
@media(max-width:700px){#grid.grid>.card.stripped-card .visual{padding-inline:8px}}

/* A tighter desktop rhythm between copy, macros and retailer offers. */
@media(min-width:481px){
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .card-description{margin-bottom:3px}
 :is(#grid,.recommendation-grid).grid>.card.stripped-card .nutrition-rows{margin-top:5px;margin-bottom:6px}
 .card>.card-buying{padding-top:0}
 .card>.card-buying .card-buying-offer{padding-top:5px}
}

/* Brand tagline sits beneath the existing wordmark. */
body>header .masthead-identity{flex:0 1 370px;min-width:0}
body>header .site-tagline{margin:9px 0 0;font-size:13px;font-weight:400;line-height:1.4;color:#ededed;letter-spacing:0}
@media(max-width:700px){
 body>header .masthead-identity{flex:0 1 155px}
 body>header .site-tagline{margin-top:7px;font-size:10px;line-height:1.4}
}

/* Product brands and bar types open their catalogue pages. */
a.catalogue-group-link{color:inherit;text-decoration:none;cursor:pointer}
.card a.catalogue-group-link{position:relative;z-index:2}
a.catalogue-group-link:hover{text-decoration:underline;text-underline-offset:3px}
a.catalogue-group-link:focus-visible{outline:2px solid #555;outline-offset:3px;border-radius:3px}

/* Selected tagline 05A: compact single line with coral emphasis. */
body>header .masthead-identity{flex:1 1 auto;min-width:max-content}
body>header .site-tagline{margin:12px 0 0;font-family:Manrope,sans-serif;font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.25px;color:#fff;white-space:nowrap}
body>header .site-tagline>span{color:#e99b90}
@media(max-width:900px){
 body>header{display:grid;grid-template-columns:minmax(115px,1fr) minmax(160px,230px);gap:10px 16px}
 body>header .masthead-identity{display:contents}
 body>header .which-bar-header-logo{grid-column:1;grid-row:1}
 body>header>.new-bars-signup{grid-column:2;grid-row:1;max-width:230px;width:100%;margin:0;justify-self:end}
 body>header .site-tagline{grid-column:1/-1;grid-row:2;margin:0;font-size:11px;letter-spacing:-.1px}
}

/* A slightly smaller Amazon wordmark on mobile product cards. */
@media(max-width:480px){.card>.card-buying .card-buying-store .amazon-retailer-logo{width:3.8em}}

/* Keep the complete Amazon smile visible in enlarged buying panels. */
.compact-floating-buying .card-buying-store:has(.amazon-retailer-logo){overflow:visible;flex-shrink:0;min-height:1.5em;display:flex;align-items:center}
.compact-floating-buying .card-buying-store .amazon-retailer-logo{width:3.8em;height:auto;max-height:none;flex-shrink:0}


/* Use the available desktop panel width from the desktop breakpoint. */
@media(min-width:900px){
 #modal .redesigned-product.background-option-4{width:100%;max-width:none!important;margin-inline:0}
}

/* Keep the tagline with the wordmark beside a compact email signup. */
body>header>.new-bars-signup{flex-basis:300px;max-width:300px}
body>header .new-bars-signup h2{font-size:12px}
body>header .signup-fields input,body>header .signup-fields button{padding:6px 8px;font-size:10px}
@media(max-width:900px){
 body>header{grid-template-columns:minmax(0,1fr) 190px;gap:12px;align-items:center}
 body>header .masthead-identity{display:block;min-width:0}
 body>header .site-tagline{margin:7px 0 0;font-size:11px}
 body>header>.new-bars-signup{max-width:190px;grid-column:2;grid-row:1}
 body>header .new-bars-signup h2{font-size:10px}
 body>header .signup-fields input{flex:1;width:0;max-width:none}
}
@media(max-width:480px){
 body>header{grid-template-columns:minmax(0,1fr) 130px;gap:10px}
 body>header>.new-bars-signup{max-width:130px}
 body>header .site-tagline{font-size:clamp(7px,2.35vw,11px);letter-spacing:-.15px;margin-top:6px}
 body>header .new-bars-signup h2{font-size:8px;line-height:1.3;margin-bottom:4px}
 body>header .signup-fields{gap:4px}
 body>header .signup-fields input,body>header .signup-fields button{font-size:8px;padding:5px 4px}
}

/* Keep the compact notification prompt on one line. */
body>header .new-bars-signup h2{white-space:nowrap}
@media(max-width:480px){body>header .new-bars-signup h2{font-size:6.7px;letter-spacing:-.1px}}

/* Slimmer email signup controls. */
body>header .signup-fields input,body>header .signup-fields button{padding-block:4px;line-height:1.2;min-height:0}
@media(max-width:480px){body>header .signup-fields input,body>header .signup-fields button{padding-block:3px}}

/* Balance the signup against the logo and tagline. */
body>header>.new-bars-signup{position:relative;top:-4px}

/* Align the signup controls with the tagline for a shared lower edge. */
body>header>.new-bars-signup{top:auto;align-self:flex-end}

/* Further reduce the email controls’ vertical padding. */
body>header .signup-fields input,body>header .signup-fields button{padding-block:2px}
@media(max-width:480px){body>header .signup-fields input,body>header .signup-fields button{padding-block:1px}}

/* Size the notification heading to the full width of its form. */
body>header>.new-bars-signup{container-type:inline-size}
body>header .new-bars-signup h2{font-size:5.4cqi;letter-spacing:0;text-align:left;white-space:nowrap}
body>header .signup-fields input{flex:1;width:0;max-width:none}

/* Balance the brand between the action row and product title on every small card. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card .brand-tag{padding-top:6px}

/* Related products use the same photograph frame as directory cards. */
.redesigned-product :is(#grid,.recommendation-grid).grid>.card.stripped-card .visual{padding:0 12px;margin-inline:0}
.recommendation-grid.grid>.card.stripped-card .visual .product-image{width:100%;max-width:100%;height:100%;max-height:100%}
@media(max-width:700px){.redesigned-product :is(#grid,.recommendation-grid).grid>.card.stripped-card .visual{padding-inline:8px}}

/* Directory batches keep the first view light without changing card layout. */
.card-batch-controls{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;padding:32px 12px}.card-batch-controls[hidden]{display:none}.card-batch-controls p{color:#6b6b6b;font-size:14px;margin:0}.card-batch-controls button{background:#fff;border:1px solid #222;border-radius:7px;padding:12px 24px;font:inherit;cursor:pointer}

/* Each sidebar field gets the full available width. */
.filters-panel .filter-group>.filter-group-fields{grid-template-columns:minmax(0,1fr)!important;gap:14px}
.filters-panel .filter-group-fields>label{display:block;min-width:0;width:100%;margin:0;line-height:1.4}
.filters-panel .filter-group-fields :is(select,input:not([type="checkbox"])){display:block;position:static;width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin:6px 0 0}
.filters-panel .filter-group-fields>.check{display:flex;align-items:center;gap:8px}
.filters-panel .filter-group-fields :is(#includeIngredients,#excludeIngredients){padding-left:10px;text-indent:0;background-image:none}
.filters-panel .filter-group>.filter-group-fields{grid-template-areas:none!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-columns:minmax(0,1fr)}
.filters-panel .filter-group-fields>*{grid-column:1/-1!important;grid-row:auto!important}
/* Slightly stronger brand labels on directory and recommendation cards. */
:is(#grid,.recommendation-grid).grid>.card.stripped-card .brand-tag{font-size:11px!important}
/* Compact filter sections while retaining readable labels and tap targets. */
.filters-panel .filter-group>.filter-group-fields{gap:8px;padding:8px 10px}
.filters-panel .filter-group-fields :is(select,input:not([type="checkbox"])){margin-top:4px}
@media(max-width:700px){
 .filters-panel{gap:6px}
 .filters-panel>.filter-group>summary{padding:6px 10px;min-height:44px}
 .filters-panel .filter-group>summary small{margin-top:1px;line-height:1.2}
 .filters-panel .filter-group>.filter-group-fields{gap:6px;padding:8px 10px}
 .filters-panel .filter-group-fields>label{line-height:1.3}
 .filters-panel .filter-group-fields :is(select,input:not([type="checkbox"])){margin-top:3px;padding-top:7px;padding-bottom:7px}
}
/* Slim, aligned signup controls on phones. */
@media(max-width:700px){body>header .signup-fields input,body>header .signup-fields button{height:32px;min-height:32px!important;padding:4px 10px!important;line-height:22px!important;box-sizing:border-box}}
/* Matching standard-height signup controls across desktop and mobile. */
body>header .signup-fields input,body>header .signup-fields button{height:36px!important;min-height:36px!important;padding:6px 12px!important;font-size:14px!important;line-height:22px!important;box-sizing:border-box}
/* Keep the filter descriptions visible on desktop as well as phones. */
.filters-panel .filter-group>summary>span:first-child{display:block;min-width:0}
.filters-panel .filter-group>summary small{display:block!important;font-size:10px;line-height:1.25;margin-top:2px;color:#747474}
/* A compact mobile signup sits beside the masthead rather than below it. */
@media(max-width:700px){
 body>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,50%);gap:10px 12px;align-items:center}
 body>header .masthead-identity{display:block;min-width:0}
 body>header .which-bar-header-logo{width:130px;max-width:100%}
 body>header .site-tagline{font-size:9px;line-height:1.35;white-space:normal;margin-top:6px;letter-spacing:0}
 body>header>.new-bars-signup{grid-column:2;grid-row:1;max-width:none;width:100%;margin:0;padding:0;align-self:center;justify-self:end;container-type:normal}
 body>header .new-bars-signup h2{font-size:11px!important;line-height:1.3;white-space:normal;margin-bottom:4px;letter-spacing:0}
 body>header .new-bars-signup form{margin-top:0}
 body>header .signup-fields{display:flex;gap:4px}
 body>header .signup-fields input,body>header .signup-fields button{height:30px!important;min-height:30px!important;padding:4px 6px!important;font-size:11px!important;line-height:20px!important}
 body>header .signup-fields input{width:0;min-width:0;flex:1}
 body>header .signup-fields button{flex:none}
}
/* Sorting labels share the Filters heading's responsive type scale. */
.catalogue .sorting-panel .sort{font-size:16px}
@media(min-width:901px){.catalogue .sorting-panel .sort{font-size:18px}}
/* Larger browse labels while retaining five tabs on narrow screens. */
#directory .browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved){font-size:15px}
@media(max-width:700px){#directory .browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved){font-size:11px}}
@media(max-width:360px){#directory .browse-switch :is(#browseAll,#browseBrands,#browseTypes,#browseFlavours,#browseSaved){font-size:10px}}

/* Launch export: snapshot dates and link-only offers. */
.new-bars-signup[hidden]{display:none!important}.signup-consent{display:flex;align-items:flex-start;gap:6px;font-size:11px;line-height:1.4;margin-top:7px}.signup-consent input{width:auto!important;height:auto!important;flex:none}#signupVerification:not(:empty){margin-top:7px}.signup-consent a{color:inherit;text-decoration:underline}.offer-check-date{font-size:9px;color:#76716b;line-height:1.35}.card-buying-unit .offer-check-label{font-size:17px!important;line-height:1.25}.offer-needs-check .card-buying-box{min-height:25px;line-height:1.3}
.launch-offer-date{grid-column:1/-1;font-size:10px;line-height:1.4;color:#747474;margin:0 0 5px}.card-buying[aria-label="Retailer links; prices not recorded"] .card-buying-offer{display:flex;flex-direction:column;align-items:stretch;gap:12px}.card-buying[aria-label="Retailer links; prices not recorded"] .card-buying-store{min-height:28px}