/* Shared nutrition-label layout, following the supplied visual reference.
   The surrounding site retains its brand; the label itself is black on white. */
.nf-label{width:100%;padding:6px;border:1px solid #000;border-radius:0;background:#fff;color:#000;font:14px/1.25 Arial,Helvetica,sans-serif;letter-spacing:normal;text-align:left;box-shadow:none}
.nf-label .nf-title{display:block;padding:2px 0 6px;border-bottom:1px solid #000;text-align:center;font:700 20px/1.2 Arial,Helvetica,sans-serif;letter-spacing:normal;color:#000}
.nf-label .nf-serving{padding:3px 0 4px;border-bottom:6px solid #000;line-height:1.35;color:#000}
.nf-label .nf-table{width:100%;margin:0;border:0;border-collapse:collapse;table-layout:fixed;background:#fff;color:#000;font:inherit;letter-spacing:normal}
.nf-table .nf-name{width:56%}
.nf-label .nf-table th,.nf-label .nf-table td{padding:2px 1px;border:0;border-bottom:1px solid #000;background:#fff;color:#000;vertical-align:middle;line-height:1.2}
.nf-label .nf-table th{font-weight:400;text-align:left}
.nf-label .nf-table td,.nf-label .nf-table thead th{text-align:center;white-space:nowrap}
.nf-label .nf-table thead th{padding:5px 1px;font-weight:700}
.nf-label .nf-table tr>:first-child{border-right:1px solid #000}
.nf-label .nf-table tr>:nth-child(3),.nf-label .nf-table tr>:last-child{border-left:1px solid #000}
.nf-label .nf-table tbody tr:last-child>*{border-bottom:3px solid #000}
.nf-label .nf-table .sugar th{padding-left:.45em}
.nf-label .nf-table .added-sugar th{padding-left:.9em}
.nf-label .nf-footnote{padding-top:3px;font-size:12px;line-height:1.2;color:#000}
.nutrition-table-wrap{overflow-x:auto;padding-bottom:1px}
.nutrition-table-wrap>.nf-label{min-width:330px}
.nutrition-layout{grid-template-columns:minmax(190px,.7fr) minmax(365px,1.3fr)}
.feature-nutrition-preview{max-width:410px;margin-block:24px}
.feature-nutrition-preview .label-disclaimer{margin:8px 0 0}
.export-nutrition-preview{margin-top:22px;overflow-x:auto}
.export-nutrition-preview>.nf-label{min-width:300px;font-size:13px}
.export-nutrition-preview .nf-title{font-size:18px}
.export-paper{min-width:0}
.export-layout{grid-template-columns:minmax(360px,1.4fr) minmax(165px,.7fr)}
#dialog-content .export-nutrition-preview>.nf-label{font-size:16px}
#dialog-content .nf-title{font-size:22px}
/* The complete label replaces the abbreviated floating hero card. */
.hero-art .art-label{width:350px;top:238px;left:-8%;padding:14px;rotate:-4deg}
.hero-art .art-label .nf-label{font-size:12px}
.hero-art .art-label .nf-title{font-size:16px}
.hero-art .art-label .nf-name{width:57%}
.hero-art .art-label .nf-footnote{font-size:12px}
.hero-art .art-label-top{margin-bottom:9px}
.hero-art .art-label-note{margin-top:7px}
.hero-art .art-caption{bottom:-40px}
@media(min-width:1450px){.hero-art .art-label{top:245px}}
@media(max-width:1180px){.nutrition-layout{grid-template-columns:1fr}.export-layout{grid-template-columns:1fr}.export-paper{width:100%;max-width:500px;margin-inline:auto}.hero-art .art-label{width:330px;left:-9%;top:220px}.hero-art .art-label .nf-title{font-size:15px}.hero-art{height:630px}.hero-art .art-caption{bottom:-5px}}
@media(max-width:960px) and (min-width:701px){.hero-art .art-label{left:-10px;width:310px}.hero-art .art-label-top small{font-size:12px}.hero-art .art-label .nf-title{font-size:14px}}
@media(max-width:700px){.hero-art{height:660px;max-width:520px}.hero-art .art-label{width:min(350px,94%);top:220px;left:2%;rotate:-3deg}.hero-art .art-label .nf-title{font-size:16px}.hero-art .art-caption{bottom:-6px}.feature-nutrition-preview{max-width:100%}.feature-nutrition-preview .nf-label{font-size:13px}.feature-nutrition-preview .nf-title{font-size:18px}.nutrition-card{padding:10px}.export-paper{padding:16px}.export-nutrition-preview>.nf-label{min-width:300px}.nf-label .nf-title{font-size:18px}}
@media(max-width:400px){.hero-art .art-label{padding:10px;width:96%}.hero-art .art-label .nf-title{font-size:14px}.hero-art{height:690px}.feature-nutrition-preview .nf-label{font-size:12px}.feature-nutrition-preview .nf-title{font-size:16px}}

/* Front-of-pack warning shown with the illustrative brownie in the hero. */
.hero-front-warning{position:absolute;z-index:4;right:-8%;top:510px;width:52%;margin:0;rotate:8deg;animation:scene-float 7.5s ease-in-out infinite;animation-delay:-3s}
.hero-front-warning img{display:block;width:100%;height:auto;background:#fff}
@media(max-width:1180px){.hero-art{height:755px}.hero-front-warning{width:310px;max-width:94%;right:1%;top:655px;rotate:5deg}.hero-art .art-caption{bottom:-8px}}
@media(max-width:700px){.hero-art{height:775px}.hero-front-warning{width:360px;max-width:94%;right:1%;top:auto;bottom:34px;rotate:4deg}}
@media(max-width:400px){.hero-art{height:810px}}
@media(prefers-reduced-motion:reduce){.hero-front-warning{animation:none}}

/* Use the owner-supplied artwork unchanged at its native 236.7:100 ratio. */
.hero-front-warning{top:475px}
.hero-front-warning img{aspect-ratio:236.7 / 100;object-fit:contain}
.hero-front-warning figcaption{margin-top:7px;color:var(--muted);font-size:12px;line-height:1.4;text-align:center}
@media(max-width:1180px){.hero-art{height:870px}.hero-front-warning{top:685px}}
@media(max-width:700px){.hero-art{height:910px}.hero-front-warning{top:auto;bottom:35px}}
@media(max-width:400px){.hero-art{height:940px}}

/* 30% smaller artwork at every breakpoint; SVG remains unchanged. */
.hero-front-warning{width:36.4%}
@media(max-width:1180px){.hero-front-warning{width:217px;max-width:65.8%}}
@media(max-width:700px){.hero-front-warning{width:252px;max-width:65.8%}}