/* Shop: the Pantry's marks and short pencil highlights, and a basket beside the title. */
.shop-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.shop-title-row .page-heading{min-width:0}
.shop-title-art{flex:none;width:118px;height:auto;margin-bottom:6px}
.shopping-group h2{display:flex;align-items:center;gap:12px}
.shopping-group-mark{flex:none;width:34px;height:34px;object-fit:contain}
.shopping-group h2 span{padding:0 5px;box-shadow:inset 0 -.42em 0 var(--shop-tone,var(--sage))}
.shopping-group[data-tone=wheat]{--shop-tone:var(--wheat)}
.shopping-group[data-tone=brick]{--shop-tone:color-mix(in srgb,var(--red) 22%,var(--paper))}
.shopping-group[data-tone=blue]{--shop-tone:var(--blue)}
.shopping-group[data-tone=ochre]{--shop-tone:color-mix(in srgb,var(--ochre) 60%,var(--paper))}
.shopping-group[data-tone=sage]{--shop-tone:color-mix(in srgb,var(--green) 18%,var(--paper))}
@media (max-width:480px){.shop-title-art{width:84px}}
@media (forced-colors:active){.shopping-group h2 span{box-shadow:none;text-decoration:underline}}

/* The cart control on Shop. While the request is open a pencil basket fills one grocery at a
   time and loops: it says Frank is working, never how far along. */
.kroger-terms{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--ink)}
.kroger-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 0;scroll-margin-bottom:96px}
.kroger-actions [hidden]{display:none}
.kroger-actions :is(a,button){min-height:44px}
#kroger-status{margin:12px 0 0;font-size:15px;line-height:1.5}
#kroger-status:focus{outline:none}
#kroger-status.error{color:var(--red)}
.kroger-missing{display:block;margin-top:8px;color:var(--ink)}
.cart-progress:not([hidden]){display:flex;justify-content:center;margin:12px 0 0}
.cart-basket{display:block;width:min(190px,100%);height:auto;overflow:visible}
.kroger-actions .cart-pause{min-height:44px;margin:0;padding:8px 14px;font-size:13px}
.cart-item{transform-box:fill-box;transform-origin:center bottom;animation:5.6s ease-in infinite both}
.cart-item-1{animation-name:cart-drop-1}
.cart-item-2{animation-name:cart-drop-2}
.cart-item-3{animation-name:cart-drop-3}
.cart-item-4{animation-name:cart-drop-4}
.cart-progress.is-paused .cart-item{animation-play-state:paused}
@keyframes cart-drop-1{0%,4%{transform:translateY(-40px) rotate(-6deg);opacity:0}5%{opacity:1}14%{transform:translateY(2px);opacity:1}17%,84%{transform:none;opacity:1}92%,100%{transform:none;opacity:0}}
@keyframes cart-drop-2{0%,21%{transform:translateY(-40px) rotate(6deg);opacity:0}22%{opacity:1}31%{transform:translateY(2px);opacity:1}34%,84%{transform:none;opacity:1}92%,100%{transform:none;opacity:0}}
@keyframes cart-drop-3{0%,38%{transform:translateY(-40px) rotate(-6deg);opacity:0}39%{opacity:1}48%{transform:translateY(2px);opacity:1}51%,84%{transform:none;opacity:1}92%,100%{transform:none;opacity:0}}
@keyframes cart-drop-4{0%,55%{transform:translateY(-40px) rotate(6deg);opacity:0}56%{opacity:1}65%{transform:translateY(2px);opacity:1}68%,84%{transform:none;opacity:1}92%,100%{transform:none;opacity:0}}
@media (prefers-reduced-motion:reduce){.cart-item{animation:none!important;opacity:1!important;transform:none!important}.cart-pause{display:none}}