/* Layout editorial do artigo */
.article-card{
 box-sizing:border-box;
 max-width:100%;
}
@media(min-width:861px){
main.wrap{
 width:min(1170px,calc(100% - 48px))
}
.article-card{
 display:grid;
 grid-template-columns:minmax(0,1.6fr) minmax(315px,1fr);
 gap:16px 24px;
 align-items:start;
 background:transparent;
 border:0;
 padding:0
}
.article-card>h1,
.article-card>p,
.article-card>.cover{
 grid-column:1/-1
}
.article-card>h1{margin:0}
.article-card>p{margin:0 0 16px}
.article-card>.cover{
 margin:0 0 12px;
 max-height:340px
}
.article-card>section:not(.shopping){
 grid-column:1;
 margin:0;
 padding:24px;
 border:1px solid #e0eaf3;
 border-radius:18px;
 background:#fff
}
.article-card>section:not(.shopping) h2{
 margin-top:0
}
.article-card>.shopping{
 grid-column:2;
 grid-row:3/span 4;
 position:sticky;
 top:20px;
 margin:0
}
.article-card:has(>.cover)>.shopping{
 grid-row:4/span 4
}
}
html.landing-dark .article-card{
 background:transparent!important;
 border-color:transparent!important
}
html.landing-dark .article-card>section:not(.shopping){
 background:#1b314b;
 border-color:#39536e
}
@media(max-width:860px){
.article-card>.shopping{position:static}
}

/* Progresso interativo das compras */
.shopping .lp-progress{
 height:9px;
 background:#d2e5da;
 border-radius:999px;
 overflow:hidden;
 margin:5px 0 18px
}
.shopping .lp-progress>span{
 display:block;
 height:100%;
 width:0;
 background:#0aa36e;
 border-radius:999px;
 transition:width .22s ease
}
.shopping label:has(input:checked){
 text-decoration:line-through;
 opacity:.68
}
html.landing-dark .shopping .lp-progress{
 background:#3b5a55
}

/* Lista visual dos cinco jantares */
.lp-dinners{
 list-style:none;
 padding:0;
 margin:14px 0 0;
 display:grid;
 gap:9px
}
.lp-dinners li{
 display:grid;
 grid-template-columns:88px minmax(0,1fr);
 align-items:center;
 gap:12px;
 padding:10px;
 background:#f1f7fb;
 border-radius:10px;
 font-size:14px;
 line-height:1.5
}
.lp-dinners strong{
 color:#087e56;
 background:#ddf5e8;
 text-align:center;
 padding:8px 5px;
 border-radius:7px
}
html.landing-dark .lp-dinners li{
 background:#263e59;
 color:#eff6ff
}
html.landing-dark .lp-dinners strong{
 background:#214b40;
 color:#9aefc4
}