/* One compact city chooser in the existing utility bar on desktop and mobile. */
.tm-storefront .topline { position: relative; z-index: 46; }
[data-weekly-nav][hidden] { display: none !important; }
.tm-storefront .topline > .container { min-height: 44px; flex-wrap: nowrap; gap: 8px 12px; }
.city-picker { position: relative; flex: 0 1 auto; width: max-content; min-width: 0; max-width: 100%; z-index: 45; }
.city-picker summary { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 6px; border-radius: 7px; cursor: pointer; list-style: none; white-space: nowrap; }
.city-picker summary:hover, .city-picker[open] summary { background: #F3FCF6; }
.city-picker summary::-webkit-details-marker { display: none; }
.city-picker summary > .icon { flex: 0 0 16px; width: 16px; height: 16px; color: #087B37; }
.city-picker summary > .icon:last-child { flex-basis: 13px; width: 13px; height: 13px; transform: rotate(90deg); transition: transform 150ms; }
.city-picker[open] summary > .icon:last-child { transform: rotate(-90deg); }
.city-picker summary strong { font-size: 12px; line-height: 18px; font-weight: 600; }
.city-picker summary .city-picker-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.city-picker summary:focus-visible { outline: 2px solid var(--green-hover); outline-offset: 3px; }
.city-picker-options { position: absolute; left: 0; top: calc(100% + 7px); width: 288px; max-width: calc(100vw - 28px); padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 9px 28px #142B1E25; }
.city-picker-options > p { margin: 0 0 8px; color: #52645A; font-size: 12px; line-height: 17px; }
.city-picker-options button { display: block; width: 100%; min-height: 44px; padding: 10px; border-radius: 9px; text-align: left; color: var(--ink); }
.city-picker-options button strong, .city-picker-options button span { display: block; }
.city-picker-options button strong { font-size: 14px; line-height: 20px; }
.city-picker-options button span { margin-top: 2px; font-size: 12px; line-height: 17px; color: #52645A; }
.city-picker-options button[aria-current], .city-picker-options button:hover { background: #E9F8EE; }
.city-picker-options button[aria-current] strong { color: #087B37; }
.city-picker-options .city-picker-all { margin-top: 5px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; font-size: 13px; }
.storefront-city-notice { margin: 16px 0; padding: 12px 16px; border: 1px solid #EACFA6; border-radius: 12px; background: #FFF7E9; color: #614216; font-size: 13px; }
@media (max-width: 767px) {
    .tm-storefront .topline > .container { padding-top: 0; padding-bottom: 0; }
    .tm-storefront .topline .topline-actions { flex-wrap: nowrap; gap: 0; margin-left: auto; }
    .topline .topline-link { display: none; }
}