/* v4: smooth type, real layered headings, edge-to-edge product photography. */
:root{--action-top:#ff8c24;--action-bottom:#ffb82e;--action-depth:#ec6417;}
body,button,input,select,textarea{}
h1,h2,.brandmark,.adventure b,.example-equation b,.step>b,.handoff-total b{}
.stage-label select,.field select,.reviewbar,.appbar>span{}
.stage-label select,.field select{font-size:16px;line-height:1.4}
/* No stroke/paint-order/filter combination: the back letters are ordinary text. */
.page-title h1,.brand-hero h1,.detail-title,.sectionline h2,.empty h2{ paint-order:normal;text-shadow:none;filter:none;overflow:visible}
.title-stack{display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate;padding-bottom:.13em;line-height:inherit;font-size:inherit!important}
.title-layer{display:block;grid-area:1/1;min-width:0;font-size:inherit!important;line-height:inherit;}
.title-depth{color:#c91e50;transform:translate(0,.12em);user-select:none;pointer-events:none;z-index:0}
.title-face{position:relative;color:inherit;z-index:1}
.body h2 .title-depth{color:transparent}
.body .sectionline h2 .title-depth,.body .empty h2 .title-depth{color:#c91e50}
.page-title{margin:8px 0 12px;gap:9px;min-height:84px}
.page-title h1{font-size:35px;line-height:1.06;}
.page-title .heading-art{width:80px;height:80px}
.brand-hero h1{font-size:49px;line-height:.95;transform:rotate(-3deg);}
.brand-hero h1 .title-layer>span{font-size:58px}
.brand-hero p{background:#ffcf00;color:#682b12;box-shadow:0 4px 0 #f58023}
/* Warm primary action; secondary and selected states remain distinct. */
.primary,.compare-grid .primary{background:linear-gradient(180deg,var(--action-top),var(--action-bottom));color:#57250c;box-shadow:0 4px 0 var(--action-depth);}
.secondary{background:#fff;color:#b52939;box-shadow:0 3px 0 #ff8062;}
.add{background:linear-gradient(#ff8d20,#ffb62b);color:#57250c;box-shadow:0 3px 0 #ef6618}
.chip.active,.quick-filters>button.selected,.taste-row button.active{background:#ffb52c;color:#57250c;box-shadow:0 3px 0 #ef6b20}
.quick-filters>button.selected{outline:2px solid #b83e18;outline-offset:-2px}
.goal-head>button{background:#ff8c22;color:#57250c;}
.copy-notes{background:#ffac26;color:#57250c}
.round{box-shadow:0 3px 0 #ff9151}
.view-switch button.active{background:#ff9c26;color:#57250c}
.allergen-tile:has(input:checked){background:#ff9a24;color:#57250c;box-shadow:0 4px 0 #e76016;outline:3px solid #bb3a20;outline-offset:-3px}
.allergen-tile:has(input:focus-visible){outline:3px solid #003ec5;outline-offset:4px}
.tile-check{background:#fff;color:#ba3b1f}
button:disabled{opacity:1;background:#e5e5e5!important;color:#656565!important;box-shadow:none!important}
/* Natural image proportions: no contain letterboxing or nested photo panels. */
.body{--body-gutter:16px}
.detail-visual{width:calc(100% + var(--body-gutter)*2);margin:5px calc(-1*var(--body-gutter)) 15px;border-radius:0;background:#f3f3f3;overflow:visible}
.detail-visual .large-photo{height:auto;max-height:none;width:100%;padding:0;border-radius:0;object-fit:initial;display:block}
.detail-visual .big-advantage{position:relative;left:auto;bottom:auto;display:table;margin:0 auto;padding:9px 14px;max-width:95%;transform:translateY(-6px);font-size:14px}
.detail-visual .big-advantage .art{display:inline-block;width:32px;height:32px;vertical-align:middle;margin:-8px 4px -8px -5px}
.photo-screen{background:#f3f3f3}
.edge-photo{display:block;width:100%;height:auto;border:0;border-radius:0;margin:0;padding:0}
.photo-content{padding-top:12px;padding-bottom:25px;background:linear-gradient(145deg,#ff518b,#ff287c)}
.photo-content .page-title{margin-top:0}
.photo-content .lead{font-size:17px;line-height:1.45}
body[data-screen=unavailable] #app{background:#f3f3f3}
body[data-screen=unavailable] #app>.appbar{padding-bottom:10px;background:#ff4285}
/* Move the illustration itself, never the hit area or text. */
#app .heading-art,#app .category>.art,#app .feature-row>.art,#app .family-summary>.art,#app .adventure>.art,#app .collection>.art,#app .allergen-tile>.art,#app .listlink>.art,#app .sent-art>.art,#app .empty-art,#app .lock-art>.art,#app .step>.art{animation:section-float 4.8s ease-in-out infinite;transform-origin:50% 65%}
#app .category:nth-child(2n)>.art,#app .collection:nth-child(2n)>.art{animation-name:section-sway;animation-delay:-1.7s}
#app .category:nth-child(3n)>.art{animation-delay:-3.2s}
@keyframes section-float{0%,100%{transform:translateY(2px) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes section-sway{0%,100%{transform:translateX(-2px) rotate(-2deg)}50%{transform:translateX(3px) rotate(2deg)}}
@media(max-width:380px){.body{--body-gutter:12px}.page-title h1{font-size:31px}.page-title .heading-art{width:68px;height:68px}.brand-hero h1{font-size:44px}.brand-hero h1 .title-layer>span{font-size:52px}}
@media(prefers-reduced-motion:reduce){#app .art{animation:none!important;transform:none!important}}